@abstraks-dev/ui-library 1.1.19 → 1.1.22

package/dist/utils/ssrSafeId.js

@@ -5,41 +5,41 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useStableId = exports.generateStableId = exports.default = void 0;
 var _react = require("react");
-// Global counter for SSR-safe ID generation
-let globalIdCounter = 0;
+// Global state for ID generation
+let idCounter = 0;
+let isServer = typeof window === 'undefined';
+
+// Reset counter on server for each request, maintain on client
+if (isServer) {
+  // Reset counter for each server render
+  idCounter = 0;
+}
 
 /**
  * A hook that provides SSR-safe ID generation.
- * This implementation ensures that server-side rendered HTML
- * matches client-side rendered HTML, preventing hydration mismatches.
- *
- * The hook works by:
- * 1. Using a global counter that's consistent across server/client
- * 2. Generating deterministic IDs during SSR
- * 3. Maintaining the same ID sequence during hydration
+ * Ensures consistent ID generation between server and client renders.
  *
  * @param {string} prefix - A prefix for the generated ID (default: 'id')
  * @returns {function} A function that generates unique IDs with the given prefix
  */
 const useStableId = (prefix = 'id') => {
-  const [isClient, setIsClient] = (0, _react.useState)(false);
   const idRef = (0, _react.useRef)(null);
+  const assignedIdRef = (0, _react.useRef)(null);
 
-  // Track client-side hydration
-  (0, _react.useEffect)(() => {
-    setIsClient(true);
-  }, []);
+  // Assign ID on first render only
+  if (assignedIdRef.current === null) {
+    idCounter += 1;
+    assignedIdRef.current = idCounter;
+  }
   const generateId = (0, _react.useCallback)(() => {
-    // If we already have an ID, return it (important for consistency)
-    if (idRef.current) {
+    // Return cached ID if available
+    if (idRef.current !== null) {
       return idRef.current;
     }
 
-    // Generate a new ID using the global counter
-    globalIdCounter += 1;
-    const newId = `${prefix}-${globalIdCounter}`;
-    idRef.current = newId;
-    return newId;
+    // Generate ID using the assigned counter value
+    idRef.current = `${prefix}-${assignedIdRef.current}`;
+    return idRef.current;
   }, [prefix]);
   return generateId;
 };

package/dist/utils/utils/ssrSafeId.js

@@ -1,42 +1,42 @@
-import { useRef, useCallback, useEffect, useState } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 
-// Global counter for SSR-safe ID generation
-let globalIdCounter = 0;
+// Global state for ID generation
+let idCounter = 0;
+let isServer = typeof window === 'undefined';
+
+// Reset counter on server for each request, maintain on client
+if (isServer) {
+	// Reset counter for each server render
+	idCounter = 0;
+}
 
 /**
  * A hook that provides SSR-safe ID generation.
- * This implementation ensures that server-side rendered HTML
- * matches client-side rendered HTML, preventing hydration mismatches.
- *
- * The hook works by:
- * 1. Using a global counter that's consistent across server/client
- * 2. Generating deterministic IDs during SSR
- * 3. Maintaining the same ID sequence during hydration
+ * Ensures consistent ID generation between server and client renders.
  *
  * @param {string} prefix - A prefix for the generated ID (default: 'id')
  * @returns {function} A function that generates unique IDs with the given prefix
  */
 export const useStableId = (prefix = 'id') => {
-	const [isClient, setIsClient] = useState(false);
 	const idRef = useRef(null);
+	const assignedIdRef = useRef(null);
 
-	// Track client-side hydration
-	useEffect(() => {
-		setIsClient(true);
-	}, []);
+	// Assign ID on first render only
+	if (assignedIdRef.current === null) {
+		idCounter += 1;
+		assignedIdRef.current = idCounter;
+	}
 
 	const generateId = useCallback(() => {
-		// If we already have an ID, return it (important for consistency)
-		if (idRef.current) {
+		// Return cached ID if available
+		if (idRef.current !== null) {
 			return idRef.current;
 		}
 
-		// Generate a new ID using the global counter
-		globalIdCounter += 1;
-		const newId = `${prefix}-${globalIdCounter}`;
-		idRef.current = newId;
+		// Generate ID using the assigned counter value
+		idRef.current = `${prefix}-${assignedIdRef.current}`;
 
-		return newId;
+		return idRef.current;
 	}, [prefix]);
 
 	return generateId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abstraks-dev/ui-library",
-  "version": "1.1.19",
+  "version": "1.1.22",
   "description": "User Interface library",
   "main": "dist/index.js",
   "files": [