refactor: Deprecate custom useId hook and use useId provided by React…

… 18.

package.json

@@ -90,13 +90,12 @@
   },
   "dependencies": {
     "@types/jest": "29.5.11",
-    "@types/node": "18.19.4",
+    "@types/node": "20.8.5",
     "@types/react": "18.2.46",
     "@types/react-dom": "18.2.18",
     "@types/react-table": "7.7.19",
     "classnames": "2.5.1",
     "jest-environment-jsdom": "29.7.0",
-    "nanoid": "5.0.4",
     "prop-types": "15.8.1",
     "react-table": "7.8.0",
     "react-useportal": "1.0.19"

src/components/Accordion/Accordion.test.tsx

@@ -1,15 +1,10 @@
 import React from "react";
-import * as nanoid from "nanoid";
 
 import Accordion from "./Accordion";
 import { render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 describe("Accordion", () => {
-  beforeEach(() => {
-    jest.spyOn(nanoid, "nanoid").mockReturnValueOnce("mocked-nanoid");
-  });
-
   afterEach(() => {
     jest.restoreAllMocks();
   });
@@ -69,10 +64,7 @@ describe("Accordion", () => {
     );
     const tab = screen.getByRole("tab", { name: "Advanced topics" });
     await userEvent.click(tab);
-    expect(onExpandedChange).toHaveBeenCalledWith(
-      "mocked-nanoid",
-      "Advanced topics"
-    );
+    expect(onExpandedChange).toHaveBeenCalledWith(":r6:", "Advanced topics");
     // Clicking the tab again should close the accordion section.
     await userEvent.click(tab);
     expect(onExpandedChange).toHaveBeenCalledWith(null, null);

src/components/Accordion/AccordionSection/AccordionSection.test.tsx

@@ -12,7 +12,7 @@ describe("AccordionSection ", () => {
         expanded="abcd-1234"
         setExpanded={jest.fn()}
         title="Test section"
-      />
+      />,
     );
 
     expect(screen.getByRole("listitem")).toMatchSnapshot();
@@ -26,7 +26,7 @@ describe("AccordionSection ", () => {
         setExpanded={jest.fn()}
         title="Test section"
         titleElement="h4"
-      />
+      />,
     );
     // Query for the specific element as defined in the titleElement prop.
     // eslint-disable-next-line testing-library/no-node-access
@@ -47,10 +47,10 @@ describe("AccordionSection ", () => {
           expanded = id;
         }}
         title="Test section"
-      />
+      />,
     );
     await userEvent.click(screen.getByRole("tab", { name: "Test section" }));
-    expect(onTitleClick).toHaveBeenCalledWith(true, "mock-nanoid-1");
+    expect(onTitleClick).toHaveBeenCalledWith(true, ":r4:");
     rerender(
       <AccordionSection
         content={<span>Test</span>}
@@ -60,12 +60,12 @@ describe("AccordionSection ", () => {
           expanded = id;
         }}
         title="Test section"
-      />
+      />,
     );
     // Clicking the title again should close the accordion section.
     await userEvent.click(screen.getByRole("tab", { name: "Test section" }));
 
-    expect(onTitleClick.mock.calls[1]).toEqual([false, "mock-nanoid-1"]);
+    expect(onTitleClick.mock.calls[1]).toEqual([false, ":r4:"]);
   });
 
   it("can use a key for expanded state", async () => {
@@ -81,7 +81,7 @@ describe("AccordionSection ", () => {
           expanded = id;
         }}
         title="Test section"
-      />
+      />,
     );
     await userEvent.click(screen.getByRole("tab", { name: "Test section" }));
 

src/components/Accordion/AccordionSection/AccordionSection.tsx

@@ -1,8 +1,7 @@
-import React from "react";
+import React, { useId } from "react";
 import type { ReactNode } from "react";
 
 import type { Headings } from "types";
-import { useId } from "hooks/useId";
 
 export type AccordionHeadings = Exclude<Headings, "h1">;
 

src/components/Accordion/AccordionSection/__snapshots__/AccordionSection.test.tsx.snap

@@ -10,10 +10,10 @@ exports[`AccordionSection  renders 1`] = `
     role="heading"
   >
     <button
-      aria-controls="#mock-nanoid-1"
+      aria-controls="#:r0:"
       aria-expanded="false"
       class="p-accordion__tab"
-      id="mock-nanoid-2"
+      id=":r1:"
       role="tab"
       type="button"
     >
@@ -22,9 +22,9 @@ exports[`AccordionSection  renders 1`] = `
   </div>
   <section
     aria-hidden="true"
-    aria-labelledby="mock-nanoid-2"
+    aria-labelledby=":r1:"
     class="p-accordion__panel"
-    id="mock-nanoid-1"
+    id=":r0:"
     role="tabpanel"
   >
     <span>

src/components/Accordion/__snapshots__/Accordion.test.tsx.snap

@@ -18,10 +18,10 @@ exports[`Accordion renders 1`] = `
         role="heading"
       >
         <button
-          aria-controls="#mocked-nanoid"
+          aria-controls="#:r0:"
           aria-expanded="false"
           class="p-accordion__tab"
-          id="mock-nanoid-1"
+          id=":r1:"
           role="tab"
           type="button"
         >
@@ -30,9 +30,9 @@ exports[`Accordion renders 1`] = `
       </div>
       <section
         aria-hidden="true"
-        aria-labelledby="mock-nanoid-1"
+        aria-labelledby=":r1:"
         class="p-accordion__panel"
-        id="mocked-nanoid"
+        id=":r0:"
         role="tabpanel"
       >
         test content
@@ -47,10 +47,10 @@ exports[`Accordion renders 1`] = `
         role="heading"
       >
         <button
-          aria-controls="#mock-nanoid-2"
+          aria-controls="#:r2:"
           aria-expanded="false"
           class="p-accordion__tab"
-          id="mock-nanoid-3"
+          id=":r3:"
           role="tab"
           type="button"
         >
@@ -59,9 +59,9 @@ exports[`Accordion renders 1`] = `
       </div>
       <section
         aria-hidden="true"
-        aria-labelledby="mock-nanoid-3"
+        aria-labelledby=":r3:"
         class="p-accordion__panel"
-        id="mock-nanoid-2"
+        id=":r2:"
         role="tabpanel"
       >
         More test content

src/components/Card/Card.tsx

@@ -1,9 +1,8 @@
 import classNames from "classnames";
-import React from "react";
+import React, { useId } from "react";
 import type { HTMLProps, ReactNode } from "react";
 
 import type { ClassName, PropsWithSpread } from "types";
-import { useId } from "hooks";
 
 export type Props = PropsWithSpread<
   {

src/components/Card/__snapshots__/Card.test.tsx.snap

@@ -2,13 +2,13 @@
 
 exports[`Card  renders 1`] = `
 <div
-  aria-labelledby="mock-nanoid-1"
+  aria-labelledby=":r0:"
   class="p-card"
   role="group"
 >
   <h3
     class="p-card__title"
-    id="mock-nanoid-1"
+    id=":r0:"
   >
     This is the title
   </h3>

src/components/CheckboxInput/CheckableInput/CheckableInput.tsx

@@ -1,9 +1,8 @@
 import classNames from "classnames";
-import React, { useEffect, useRef, HTMLProps } from "react";
+import React, { useEffect, useRef, HTMLProps, useId } from "react";
 import type { ReactNode } from "react";
 
 import type { PropsWithSpread } from "types";
-import { useId } from "hooks/useId";
 
 export type Props = PropsWithSpread<
   {

src/components/ContextualMenu/ContextualMenu.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useId, useRef, useState } from "react";
 import type { HTMLProps } from "react";
 import usePortal from "react-useportal";
 
@@ -10,7 +10,6 @@ import ContextualMenuDropdown from "./ContextualMenuDropdown";
 import type { ContextualMenuDropdownProps } from "./ContextualMenuDropdown";
 import type { MenuLink, Position } from "./ContextualMenuDropdown";
 import { ClassName, PropsWithSpread, SubComponentProps } from "types";
-import { useId } from "hooks/useId";
 
 export enum Label {
   Toggle = "Toggle menu",

src/components/Input/Input.tsx

@@ -1,13 +1,12 @@
 import classNames from "classnames";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useId, useRef } from "react";
 import type { InputHTMLAttributes, ReactNode } from "react";
 
 import Field from "../Field";
 import CheckboxInput from "../CheckboxInput";
 import RadioInput from "../RadioInput";
 
 import type { ClassName, PropsWithSpread } from "types";
-import { useId } from "hooks";
 
 /**
  * The props for the Input component.

src/components/Modal/Modal.tsx

@@ -1,8 +1,7 @@
 import classNames from "classnames";
-import React, { ReactElement, useRef, useEffect } from "react";
+import React, { ReactElement, useId, useRef, useEffect } from "react";
 import type { HTMLProps, ReactNode, MutableRefObject, RefObject } from "react";
 import { ClassName, PropsWithSpread } from "types";
-import { useId } from "hooks/useId";
 
 export type Props = PropsWithSpread<
   {

src/components/Navigation/NavigationMenu/NavigationMenu.tsx

@@ -1,12 +1,12 @@
 import type { HTMLProps } from "react";
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useId, useRef, useState } from "react";
 
 import classNames from "classnames";
 
 import NavigationLink from "../NavigationLink";
 import type { GenerateLink, NavMenu } from "../types";
 import { PropsWithSpread } from "types";
-import { useOnClickOutside, useId } from "hooks";
+import { useOnClickOutside } from "hooks";
 
 type Props = PropsWithSpread<
   NavMenu & {

src/components/PasswordToggle/PasswordToggle.tsx

@@ -1,13 +1,12 @@
 import classNames from "classnames";
-import React, { useState } from "react";
+import React, { useId, useState } from "react";
 import type { InputHTMLAttributes, ReactNode } from "react";
 
 import Button from "../Button";
 import Field from "../Field";
 import VanillaLabel from "../Label";
 
 import type { ClassName, PropsWithSpread } from "types";
-import { useId } from "hooks";
 
 export enum Label {
   Hide = "Hide",

src/components/Select/Select.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useId, useRef } from "react";
 import type {
   ChangeEventHandler,
   ReactNode,
@@ -10,7 +10,6 @@ import type {
 import Field from "../Field";
 
 import type { ClassName, PropsWithSpread } from "types";
-import { useId } from "hooks";
 
 type Option = OptionHTMLAttributes<HTMLOptionElement>;
 

src/components/Slider/Slider.tsx

@@ -1,10 +1,9 @@
-import React from "react";
+import React, { useId } from "react";
 import type { ChangeEventHandler, HTMLProps, ReactNode } from "react";
 
 import Field from "../Field";
 
 import type { PropsWithSpread } from "types";
-import { useId } from "hooks";
 
 export const FILLED_COLOR = "#0066CC";
 export const EMPTY_COLOR = "#D9D9D9";

src/components/Textarea/Textarea.tsx

@@ -1,11 +1,16 @@
 import classNames from "classnames";
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, {
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 import type { TextareaHTMLAttributes, ReactNode } from "react";
 
 import Field from "../Field";
 
 import type { ClassName, PropsWithSpread } from "types";
-import { useId } from "hooks";
 
 /**
  * The props for the Textarea component.

src/components/Tooltip/Tooltip.tsx

@@ -1,9 +1,9 @@
 import classNames from "classnames";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useId, useRef, useState } from "react";
 import type { MouseEventHandler, ReactNode } from "react";
 import usePortal from "react-useportal";
 
-import { useWindowFitment, useListener, useId } from "hooks";
+import { useWindowFitment, useListener } from "hooks";
 import type { WindowFitment } from "hooks";
 
 import type { ClassName, ValueOf } from "types";

src/hooks/useId.ts

@@ -1,9 +1,16 @@
-import { useRef } from "react";
-import { nanoid } from "nanoid";
+import { useId as useIdReact } from "react";
+
+import { IS_DEV } from "utils";
 
 /**
- * A hook that returns the same random ID string on every render.
- * Can be used as a value for HTML "id" attributes.
- * @returns random ID string
+ * @deprecated Code component is deprecated. Use CodeSnippet component or inline `<code>` instead.
  */
-export const useId = (): string => useRef(nanoid()).current;
+export const useId = () => {
+  const id = useIdReact();
+  if (IS_DEV) {
+    console.warn(
+      'The useId hook has been deprecated. Use `import { useId } from "react";` instead.'
+    );
+  }
+  return id;
+};