@homecode/ui 4.26.5 → 4.26.6

package/dist/esm/src/components/Portal/Portal.js

@@ -1,19 +1,33 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useState, useLayoutEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { config } from '../../tools/config.js';
+import { isBrowser } from '../../tools/env.js';
 
 const DEFAULT_SELECTOR = `#${config.appOverlayId}`;
 function Portal(props) {
     const { selector = DEFAULT_SELECTOR, children } = props;
-    const [isMounted, setMounted] = useState(false);
-    useEffect(() => {
-        // prevent HTML mismatch between server and client
+    // Start with immediate rendering if we're in browser
+    const [isMounted, setMounted] = useState(isBrowser);
+    useLayoutEffect(() => {
+        // Ensure we're mounted on client side (handles SSR edge cases)
         setMounted(true);
     }, []);
+    // Cache target element to avoid DOM queries on every render
+    const targetElement = useMemo(() => {
+        if (!isMounted)
+            return null;
+        return document.querySelector(selector);
+    }, [selector, isMounted]);
+    // Don't render if not mounted (prevents SSR hydration mismatch)
     if (!isMounted)
         return null;
-    return createPortal(jsx(Fragment, { children: children }), document.querySelector(selector));
+    // Check if target element exists before rendering
+    if (!targetElement) {
+        console.warn(`Portal target element not found: ${selector}`);
+        return null;
+    }
+    return createPortal(jsx(Fragment, { children: children }), targetElement);
 }
 
 export { Portal };

package/dist/esm/types/src/components/Portal/Portal.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.26.5",
+  "version": "4.26.6",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",