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

@@ -50,7 +50,7 @@ describe("AccordionSection ", () => {
       />
     );
     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>}
@@ -65,7 +65,7 @@ describe("AccordionSection ", () => {
     // 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 () => {

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;
+};

yarn.lock

@@ -4290,12 +4290,12 @@
   dependencies:
     undici-types "~5.26.4"
 
-"@types/node@18.19.4":
-  version "18.19.4"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.19.4.tgz#89672e84f11a2c19543d694dac00ab8d7bc20ddb"
-  integrity sha512-xNzlUhzoHotIsnFoXmJB+yWmBvFZgKCI9TtPIEdYIMM1KWfwuY8zh7wvc1u1OAXlC7dlf6mZVx/s+Y5KfFz19A==
+"@types/node@20.8.5":
+  version "20.8.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.8.5.tgz#13352ae1f80032171616910e8aba2e3e52e57d96"
+  integrity sha512-SPlobFgbidfIeOYlzXiEjSYeIJiOCthv+9tSQVpvk4PAdIIc+2SmjNVzWXk9t0Y7dl73Zdf+OgXKHX9XtkqUpw==
   dependencies:
-    undici-types "~5.26.4"
+    undici-types "~5.25.1"
 
 "@types/node@^18.0.0":
   version "18.18.9"
@@ -11042,11 +11042,6 @@ mylas@^2.1.9:
   resolved "https://registry.yarnpkg.com/mylas/-/mylas-2.1.13.tgz#1e23b37d58fdcc76e15d8a5ed23f9ae9fc0cbdf4"
   integrity sha512-+MrqnJRtxdF+xngFfUUkIMQrUUL0KsxbADUkn23Z/4ibGg192Q+z+CQyiYwvWTsYjJygmMR8+w3ZDa98Zh6ESg==
 
-nanoid@5.0.4:
-  version "5.0.4"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-5.0.4.tgz#d2b608d8169d7da669279127615535705aa52edf"
-  integrity sha512-vAjmBf13gsmhXSgBrtIclinISzFFy22WwCYoyilZlsrRXNIHSwgFQ1bEdjRwMT3aoadeIF6HMuDRlOxzfXV8ig==
-
 nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
@@ -14178,6 +14173,11 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
+undici-types@~5.25.1:
+  version "5.25.3"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.25.3.tgz#e044115914c85f0bcbb229f346ab739f064998c3"
+  integrity sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==
+
 undici-types@~5.26.4:
   version "5.26.5"
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"