refactor: replace withSSD & ssdFallback with useDocument

packages/react/components/Dialog/Component.tsx

@@ -1,9 +1,4 @@
-import {
+import { Slot, type VariantProps, useDocument, vcn } from "@pswui-lib";
-  ServerSideDocumentFallback,
-  Slot,
-  type VariantProps,
-  vcn,
-} from "@pswui-lib";
 import React, { type ReactNode, useId, useState } from "react";
 import ReactDOM from "react-dom";
 
@@ -93,35 +88,32 @@ const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
     const { children, closeOnClick, onClick, ...otherPropsExtracted } =
       otherPropsCompressed;
 
-    return (
+    const document = useDocument();
-      <ServerSideDocumentFallback>
+    if (!document) return null;
-        {() =>
+
-          ReactDOM.createPortal(
+    return ReactDOM.createPortal(
-            <div
+      <div
-              {...otherPropsExtracted}
+        {...otherPropsExtracted}
-              id={ids.dialog}
+        id={ids.dialog}
-              ref={ref}
+        ref={ref}
-              className={dialogOverlayVariant(variantProps)}
+        className={dialogOverlayVariant(variantProps)}
-              onClick={(e) => {
+        onClick={(e) => {
-                if (closeOnClick) {
+          if (closeOnClick) {
-                  setContext((p) => ({ ...p, opened: false }));
+            setContext((p) => ({ ...p, opened: false }));
-                }
+          }
-                onClick?.(e);
+          onClick?.(e);
-              }}
+        }}
-            >
+      >
-              <div
+        <div
-                className={
+          className={
-                  "w-screen max-w-full min-h-screen flex flex-col justify-center items-center"
+            "w-screen max-w-full min-h-screen flex flex-col justify-center items-center"
-                }
+          }
-              >
+        >
-                {/* Layer for overflow positioning */}
+          {/* Layer for overflow positioning */}
-                {children}
+          {children}
-              </div>
+        </div>
-            </div>,
+      </div>,
-            document.body,
+      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,28 +125,25 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
           : 1
     })`;
 
-    return (
+    const document = useDocument();
-      <ServerSideDocumentFallback>
+    if (!document) return null;
-        {() =>
+
-          createPortal(
+    return createPortal(
-            <Comp
+      <Comp
-              {...restPropsExtracted}
+        {...restPropsExtracted}
-              className={drawerOverlayVariant({
+        className={drawerOverlayVariant({
-                ...variantProps,
+          ...variantProps,
-                opened: state.isDragging ? true : state.opened,
+          opened: state.isDragging ? true : state.opened,
-              })}
+        })}
-              onClick={onOutsideClick}
+        onClick={onOutsideClick}
-              style={{
+        style={{
-                backdropFilter,
+          backdropFilter,
-                WebkitBackdropFilter: backdropFilter,
+          WebkitBackdropFilter: backdropFilter,
-                transitionDuration: state.isDragging ? "0s" : undefined,
+          transitionDuration: state.isDragging ? "0s" : undefined,
-              }}
+        }}
-              ref={ref}
+        ref={ref}
-            />,
+      />,
-            document.body,
+      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,71 +145,73 @@ interface ToasterProps
   muteDuplicationWarning?: boolean;
 }
 
-const Toaster = withServerSideDocument(
+const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
-  React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
+  const id = useId();
-    const id = useId();
+  const [variantProps, otherPropsCompressed] =
-    const [variantProps, otherPropsCompressed] =
+    resolveToasterVariantProps(props);
-      resolveToasterVariantProps(props);
+  const { defaultOption, muteDuplicationWarning, ...otherPropsExtracted } =
-    const { defaultOption, muteDuplicationWarning, ...otherPropsExtracted } =
+    otherPropsCompressed;
-      otherPropsCompressed;
 
-    const [toastList, setToastList] = React.useState<typeof toasts>(toasts);
+  const [toastList, setToastList] = React.useState<typeof toasts>(toasts);
-    const internalRef = useRef<HTMLDivElement | null>(null);
+  const internalRef = useRef<HTMLDivElement | null>(null);
 
-    useEffect(() => {
+  useEffect(() => {
-      return subscribe(() => {
+    return subscribe(() => {
-        setToastList(getSnapshot());
+      setToastList(getSnapshot());
-      });
+    });
-    }, []);
+  }, []);
 
-    const option = React.useMemo(() => {
+  const option = React.useMemo(() => {
-      return {
+    return {
-        ...defaultToastOption,
+      ...defaultToastOption,
-        ...defaultOption,
+      ...defaultOption,
-      };
+    };
-    }, [defaultOption]);
+  }, [defaultOption]);
 
-    const toasterInstance = document.querySelector("div[data-toaster-root]");
+  const document = useDocument();
-    if (toasterInstance && id !== toasterInstance.id) {
+
-      if (process.env.NODE_ENV === "development" && !muteDuplicationWarning) {
+  if (!document) return null;
-        console.warn(
+
-          "Multiple Toaster instances detected. Only one Toaster is allowed.",
+  const toasterInstance = document.querySelector("div[data-toaster-root]");
-        );
+  if (toasterInstance && id !== toasterInstance.id) {
-      }
+    if (process.env.NODE_ENV === "development" && !muteDuplicationWarning) {
-      return null;
+      console.warn(
+        "Multiple Toaster instances detected. Only one Toaster is allowed.",
+      );
     }
+    return null;
+  }
 
-    return (
+  return (
-      <>
+    <>
-        {ReactDOM.createPortal(
+      {ReactDOM.createPortal(
-          <div
+        <div
-            {...otherPropsExtracted}
+          {...otherPropsExtracted}
-            data-toaster-root={true}
+          data-toaster-root={true}
-            className={toasterVariant(variantProps)}
+          className={toasterVariant(variantProps)}
-            ref={(el) => {
+          ref={(el) => {
-              internalRef.current = el;
+            internalRef.current = el;
-              if (typeof ref === "function") {
+            if (typeof ref === "function") {
-                ref(el);
+              ref(el);
-              } else if (ref) {
+            } else if (ref) {
-                ref.current = el;
+              ref.current = el;
-              }
+            }
-            }}
+          }}
-            id={id}
+          id={id}
-          >
+        >
-            {Object.entries(toastList).map(([id]) => (
+          {Object.entries(toastList).map(([id]) => (
-              <ToastTemplate
+            <ToastTemplate
-                key={id}
+              key={id}
-                id={id as `${number}`}
+              id={id as `${number}`}
-                globalOption={option}
+              globalOption={option}
-              />
+            />
-            ))}
+          ))}
-          </div>,
+        </div>,
-          document.body,
+        document.body,
-        )}
+      )}
-      </>
+    </>
-    );
+  );
-  }),
+});
-);
 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 "./useDocument";
-export * from "./withSSD";

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