feat(useAutoId): removed colons from react generated id

Author: João Dias

cypress/test/hooks/use-auto-id.cy.tsx

@@ -81,7 +81,7 @@ describe("useAutoId", () => {
 
     cy.findByText("A paragraph")
       .invoke("attr", "id")
-      .should("match", /^fdz-prefix--:?[a-z0-9:]+:?$/);
+      .should("match", /^fdz-prefix--[a-z0-9]+$/);
   });
 
   context("React <18 (no useId support)", () => {
@@ -123,18 +123,18 @@ describe("useAutoId", () => {
 
       cy.findByText("A paragraph")
         .invoke("attr", "id")
-        .should("match", /^:?[a-z0-9:]+:?$/);
+        .should("match", /^[a-z0-9]+$/);
       cy.findByText("An inline span element")
         .invoke("attr", "id")
-        .should("match", /^:?[a-z0-9:]+:?$/);
+        .should("match", /^[a-z0-9]+$/);
     });
 
     it("applies prefix to ID generated by React.useId", () => {
       cy.mount(<DemoComponent prefix="fdz-js-prefix" />);
 
       cy.findByText("A paragraph")
         .invoke("attr", "id")
-        .should("match", /^fdz-js-prefix--:?[a-z0-9:]+:?$/);
+        .should("match", /^fdz-js-prefix--[a-z0-9]+$/);
     });
 
     it("uses static fallback ID when explicitly provided", () => {

src/hooks/use-auto-id.ts

@@ -87,7 +87,7 @@ export function useAutoId(
     }
   });
 
-  const baseId = customId ?? reactId ?? generatedId;
+  const baseId = customId ?? reactId?.replace(/:/g, "") ?? generatedId;
 
   return useMemo(() => {
     return prefix ? makeId(prefix, baseId) : baseId;