refactor: replace withSSD & ssdFallback with useDocument

packages/react/components/Dialog/Component.tsx

@@ -1,9 +1,4 @@
-import {
-  ServerSideDocumentFallback,
-  Slot,
-  type VariantProps,
-  vcn,
-} from "@pswui-lib";
+import { Slot, type VariantProps, useDocument, vcn } from "@pswui-lib";
 import React, { type ReactNode, useId, useState } from "react";
 import ReactDOM from "react-dom";
 
@@ -93,10 +88,10 @@ const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
     const { children, closeOnClick, onClick, ...otherPropsExtracted } =
       otherPropsCompressed;
 
-    return (
-      <ServerSideDocumentFallback>
-        {() =>
-          ReactDOM.createPortal(
+    const document = useDocument();
+    if (!document) return null;
+
+    return ReactDOM.createPortal(
       <div
         {...otherPropsExtracted}
         id={ids.dialog}
@@ -119,9 +114,6 @@ const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
         </div>
       </div>,
       document.body,
-          )
-        }
-      </ServerSideDocumentFallback>
     );
   },
 );

packages/react/components/Drawer.tsx

@@ -1,8 +1,8 @@
 import {
   type AsChild,
-  ServerSideDocumentFallback,
   Slot,
   type VariantProps,
+  useDocument,
   vcn,
 } from "@pswui-lib";
 import React, {
@@ -125,10 +125,10 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
           : 1
     })`;
 
-    return (
-      <ServerSideDocumentFallback>
-        {() =>
-          createPortal(
+    const document = useDocument();
+    if (!document) return null;
+
+    return createPortal(
       <Comp
         {...restPropsExtracted}
         className={drawerOverlayVariant({
@@ -144,9 +144,6 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
         ref={ref}
       />,
       document.body,
-          )
-        }
-      </ServerSideDocumentFallback>
     );
   },
 );

packages/react/components/Toast/Component.tsx

@@ -1,4 +1,4 @@
-import { type VariantProps, vcn, withServerSideDocument } from "@pswui-lib";
+import { type VariantProps, useDocument, vcn } from "@pswui-lib";
 import React, { useEffect, useId, useRef } from "react";
 import ReactDOM from "react-dom";
 
@@ -145,8 +145,7 @@ interface ToasterProps
   muteDuplicationWarning?: boolean;
 }
 
-const Toaster = withServerSideDocument(
-  React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
+const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
   const id = useId();
   const [variantProps, otherPropsCompressed] =
     resolveToasterVariantProps(props);
@@ -169,6 +168,10 @@ const Toaster = withServerSideDocument(
     };
   }, [defaultOption]);
 
+  const document = useDocument();
+
+  if (!document) return null;
+
   const toasterInstance = document.querySelector("div[data-toaster-root]");
   if (toasterInstance && id !== toasterInstance.id) {
     if (process.env.NODE_ENV === "development" && !muteDuplicationWarning) {
@@ -208,8 +211,7 @@ const Toaster = withServerSideDocument(
       )}
     </>
   );
-  }),
-);
+});
 Toaster.displayName = "Toaster";
 
 export { Toaster };

packages/react/lib/index.ts

@@ -1,4 +1,3 @@
 export * from "./vcn";
 export * from "./Slot";
-export * from "./ssrFallback";
-export * from "./withSSD";
+export * from "./useDocument";

packages/react/lib/ssrFallback.tsx

@@ -1,22 +0,0 @@
-import { type ReactNode, useEffect, useState } from "react";
-
-/**
- * This component allows components to use `document` as like they're always in the client side.
- * Return null if there is no `document` (which represents it's server side) or initial render(to avoid hydration error).
- */
-function ServerSideDocumentFallback({
-  children,
-}: { children: () => ReactNode }) {
-  const [initialRender, setInitialRender] = useState<boolean>(true);
-
-  useEffect(() => {
-    setInitialRender(false);
-  }, []);
-
-  if (typeof document === "undefined" /* server side */ || initialRender)
-    return null;
-
-  return children();
-}
-
-export { ServerSideDocumentFallback };

packages/react/lib/useDocument.ts

@@ -0,0 +1,21 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+/**
+ * This hook allows components to use `document` as like they're always in the client side.
+ * Return undefined if there is no `document` (which represents it's server side) or initial render(to avoid hydration error).
+ */
+function useDocument(): undefined | Document {
+  const [initialRender, setInitialState] = useState(true);
+
+  useEffect(() => {
+    setInitialState(false);
+  }, []);
+
+  if (typeof document === "undefined" || initialRender) return undefined;
+
+  return document;
+}
+
+export { useDocument };

packages/react/lib/withSSD.tsx

@@ -1,18 +0,0 @@
-import type { ComponentType } from "react";
-import { ServerSideDocumentFallback } from "./ssrFallback";
-
-function withServerSideDocument<P extends {}>(
-  Component: ComponentType<P>,
-): ComponentType<P> {
-  const SSDocumentFallbackWrapper = (props: P) => {
-    return (
-      <ServerSideDocumentFallback>
-        {() => <Component {...props} />}
-      </ServerSideDocumentFallback>
-    );
-  };
-
-  return SSDocumentFallbackWrapper;
-}
-
-export { withServerSideDocument };