@abstraks-dev/ui-library 1.1.20 → 1.1.22

package/dist/utils/ssrSafeId.js

@@ -3,50 +3,43 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useStableId = exports.resetCounter = exports.generateStableId = exports.default = void 0;
+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 mechanism to ensure consistent starting point
-const resetCounter = () => {
-  globalIdCounter = 0;
-};
+// Reset counter on server for each request, maintain on client
+if (isServer) {
+  // Reset counter for each server render
+  idCounter = 0;
+}
 
-// Export reset function for testing and manual resets
-exports.resetCounter = resetCounter;
 /**
  * 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 consistent global counter
- * 2. Generating the same ID for each component on every render
- * 3. Using useRef to cache the ID once generated
+ * 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 idRef = (0, _react.useRef)(null);
-  const [isHydrated, setIsHydrated] = (0, _react.useState)(false);
+  const assignedIdRef = (0, _react.useRef)(null);
 
-  // Track hydration completion
-  (0, _react.useEffect)(() => {
-    setIsHydrated(true);
-  }, []);
+  // Assign ID on first render only
+  if (assignedIdRef.current === null) {
+    idCounter += 1;
+    assignedIdRef.current = idCounter;
+  }
   const generateId = (0, _react.useCallback)(() => {
-    // Always return the same ID if we already have one
+    // Return cached ID if available
     if (idRef.current !== null) {
       return idRef.current;
     }
 
-    // Generate new ID using 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,50 +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 mechanism to ensure consistent starting point
-const resetCounter = () => {
-	globalIdCounter = 0;
-};
-
-// Export reset function for testing and manual resets
-export { resetCounter };
+// 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 consistent global counter
- * 2. Generating the same ID for each component on every render
- * 3. Using useRef to cache the ID once generated
+ * 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 idRef = useRef(null);
-	const [isHydrated, setIsHydrated] = useState(false);
+	const assignedIdRef = useRef(null);
 
-	// Track hydration completion
-	useEffect(() => {
-		setIsHydrated(true);
-	}, []);
+	// Assign ID on first render only
+	if (assignedIdRef.current === null) {
+		idCounter += 1;
+		assignedIdRef.current = idCounter;
+	}
 
 	const generateId = useCallback(() => {
-		// Always return the same ID if we already have one
+		// Return cached ID if available
 		if (idRef.current !== null) {
 			return idRef.current;
 		}
 
-		// Generate new ID using 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.20",
+  "version": "1.1.22",
   "description": "User Interface library",
   "main": "dist/index.js",
   "files": [