feat: remove nanoid dependency (#555)

build.washingtonpost.com/components/Markdown/Components/Checkbox.js

@@ -1,9 +1,8 @@
 import React from "react";
 import { Checkbox } from "@washingtonpost/wpds-ui-kit";
-import { nanoid } from "nanoid";
 
 export const InputCheckbox = (props) => {
-  const elementId = nanoid();
+  const elementId = React.useId();
 
   return <Checkbox {...props} id={elementId} />;
 };

ui/carousel/package.json

@@ -51,7 +51,6 @@
     "@washingtonpost/wpds-icon": "1.17.0",
     "@washingtonpost/wpds-pagination-dots": "1.17.0",
     "@washingtonpost/wpds-theme": "1.17.0",
-    "nanoid": "^3.3.4",
     "react-swipeable": "^7.0.0"
   },
   "gitHead": "5ba886cfa95b3eed476edf87b1ac36d37ffe3469"

ui/carousel/src/CarouselContent.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 
 import { styled, theme } from "@washingtonpost/wpds-theme";
 import type * as WPDS from "@washingtonpost/wpds-theme";
-import { nanoid } from "nanoid";
 
 import { useSwipeable } from "react-swipeable";
 
@@ -51,7 +50,7 @@ export const CarouselContent = React.forwardRef<
   } = React.useContext(CarouselContext);
 
   const [totalItems, setTotalItems] = React.useState(0);
-  const idRef = React.useRef<string | null>(null);
+  const id = React.useId();
   const childRefs = React.useRef<HTMLDivElement[]>([]);
   const internalRef = React.useRef<HTMLDivElement>(null);
   const [xPos, setXpos] = React.useState(0);
@@ -68,11 +67,6 @@ export const CarouselContent = React.forwardRef<
       : (ref.current = internalRef.current);
   }, [ref, internalRef]);
 
-  //create the prefix using a random id when the component is first rendered
-  React.useEffect(() => {
-    idRef.current = String(nanoid(5));
-  }, []);
-
   // get the total amount of items we're passing
   // to be able to index the items
   React.useEffect(() => {
@@ -272,10 +266,10 @@ export const CarouselContent = React.forwardRef<
                 child as React.ReactElement<CarouselItemProps>,
                 {
                   "aria-label": `${index + 1} of ${totalItems}`,
-                  id: child.props.id || `${idRef.current}-item${index}`,
+                  id: child.props.id || `${id}-item${index}`,
                   ref: (ref: HTMLDivElement) =>
                     (childRefs.current[index] = ref),
-                  key: child.props.id || `${idRef.current}-item${index}`,
+                  key: child.props.id || `${id}-item${index}`,
                 }
               );
             }

ui/carousel/src/CarouselTitle.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { nanoid } from "nanoid";
 import { styled, theme } from "@washingtonpost/wpds-theme";
 import { CarouselContext } from "./CarouselRoot";
 
@@ -22,9 +21,8 @@ export const CarouselTitle = React.forwardRef<
   CarouselTitleProps
 >(({ children, ...props }, ref) => {
   const { titleId, setTitleId } = React.useContext(CarouselContext);
-
+  const id = React.useId();
   React.useEffect(() => {
-    const id = `${nanoid(6)}-title`;
     setTitleId && setTitleId(id);
   }, [setTitleId]);
 

ui/carousel/src/play.stories.jsx

@@ -705,26 +705,29 @@ InternalFocusInteractions.parameters = {
 };
 
 InternalFocusInteractions.play = async ({ canvasElement }) => {
-  const user = userEvent.setup();
   const canvas = within(canvasElement);
-  await user.tab();
-  await user.tab();
-  await user.tab();
-  await user.keyboard("[ArrowDown]");
+  await userEvent.tab();
+  await userEvent.tab();
+  await userEvent.tab();
+  await userEvent.keyboard("{ArrowDown}");
+
   const groups = canvas.getAllByRole("group");
   const content = groups[1];
   expect(content).toHaveAttribute("aria-activedescendant", "button-id-0");
+
   const button1 = canvas.getByText("Action 1");
-  await user.click(button1);
+  await userEvent.click(button1);
   await waitFor(() =>
     expect(button1).toHaveClass("wpds-c-kSOqLF-bywHgD-variant-primary")
   );
+
   const button2 = canvas.getByText("Action 2");
-  await user.click(button2);
+  await userEvent.click(button2);
   await waitFor(() =>
     expect(button2).toHaveClass("wpds-c-kSOqLF-bywHgD-variant-primary")
   );
-  await user.click(canvas.getAllByRole("main")[0]);
+
+  await userEvent.click(canvas.getAllByRole("main")[0]);
   const item2 = canvas.getByLabelText("3 of 10");
   expect(item2).not.toHaveClass("wpds-c-lnwwct-jEMdsi-focused-true");
 };

ui/input-text/package.json

@@ -58,8 +58,7 @@
     "@washingtonpost/wpds-input-label": "1.17.0",
     "@washingtonpost/wpds-input-shared": "1.17.0",
     "@washingtonpost/wpds-theme": "1.17.0",
-    "@washingtonpost/wpds-visually-hidden": "1.17.0",
-    "nanoid": "^3.3.4"
+    "@washingtonpost/wpds-visually-hidden": "1.17.0"
   },
   "gitHead": "5ba886cfa95b3eed476edf87b1ac36d37ffe3469"
 }

ui/input-text/src/InputText.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { useEffect, useState } from "react";
-import { nanoid } from "nanoid";
 import { theme, styled } from "@washingtonpost/wpds-theme";
 import { Button } from "@washingtonpost/wpds-button";
 import { Divider } from "@washingtonpost/wpds-divider";
@@ -141,10 +140,10 @@ export const InputText = React.forwardRef<HTMLInputElement, InputTextProps>(
     const [errorId, setErrorId] = useState<string | undefined>();
     const [isAutofilled, setIsAutofilled] = useState<boolean>(false);
     const internalRef = React.useRef<HTMLInputElement>(null);
-
+    const rootId = React.useId();
     useEffect(() => {
-      setHelperId(`wpds-input-helper-${nanoid(6)}`);
-      setErrorId(`wpds-input-error-${nanoid(6)}`);
+      setHelperId(`wpds-input-helper-${rootId}`);
+      setErrorId(`wpds-input-error-${rootId}`);
     }, []);
 
     //takes into account ref that might be passed into the component

ui/input-textarea/package.json

@@ -49,7 +49,6 @@
     "@washingtonpost/wpds-input-label": "1.17.0",
     "@washingtonpost/wpds-input-shared": "1.17.0",
     "@washingtonpost/wpds-theme": "1.17.0",
-    "nanoid": "^3.3.4",
     "react": "^16.8.6 || ^17.0.2 || ^18"
   },
   "gitHead": "5ba886cfa95b3eed476edf87b1ac36d37ffe3469"

ui/input-textarea/src/InputTextarea.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { useEffect, useState } from "react";
-import { nanoid } from "nanoid";
 import { theme, css, styled } from "@washingtonpost/wpds-theme";
 import type * as WPDS from "@washingtonpost/wpds-theme";
 import {
@@ -134,9 +133,10 @@ export const InputTextarea = React.forwardRef<
 
     const internalRef = React.useRef<HTMLTextAreaElement>(null);
 
+    const rootId = React.useId();
     useEffect(() => {
-      setHelperId(`wpds-input-helper-${nanoid(6)}`);
-      setErrorId(`wpds-input-error-${nanoid(6)}`);
+      setHelperId(`wpds-input-helper-${rootId}`);
+      setErrorId(`wpds-input-error-${rootId}`);
     }, []);
 
     //takes into account ref that might be passed into the component

ui/kitchen-sink/package.json

@@ -37,13 +37,12 @@
   },
   "peerDependencies": {
     "@washingtonpost/wpds-assets": "latest",
-    "@washingtonpost/wpds-ui-kit": "1.2.0",
+    "@washingtonpost/wpds-ui-kit": "*",
     "react": "^16.8.6 || ^17.0.2 || ^18"
   },
   "dependencies": {
     "@washingtonpost/wpds-assets": "latest",
-    "@washingtonpost/wpds-ui-kit": "1.17.0",
-    "nanoid": "^3.3.4"
+    "@washingtonpost/wpds-ui-kit": "1.17.0"
   },
   "gitHead": "5ba886cfa95b3eed476edf87b1ac36d37ffe3469"
 }

ui/radio-group/package.json

@@ -47,8 +47,7 @@
     "@washingtonpost/wpds-error-message": "1.17.0",
     "@washingtonpost/wpds-fieldset": "1.17.0",
     "@washingtonpost/wpds-input-label": "1.17.0",
-    "@washingtonpost/wpds-theme": "1.17.0",
-    "nanoid": "^3.3.3"
+    "@washingtonpost/wpds-theme": "1.17.0"
   },
   "gitHead": "5ba886cfa95b3eed476edf87b1ac36d37ffe3469"
 }

ui/radio-group/src/RadioGroup.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { nanoid } from "nanoid";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import type { RadioGroupProps as RadioGroupRootProps } from "@radix-ui/react-radio-group";
 import * as Theme from "@washingtonpost/wpds-theme";
@@ -86,8 +85,9 @@ export const RadioGroup = React.forwardRef<
   ) => {
     const [errorId, setErrorId] = React.useState<string | undefined>();
 
+    const id = React.useId();
     React.useEffect(() => {
-      setErrorId(`wpds-input-error-${nanoid(6)}`);
+      setErrorId(`wpds-input-error-${id}`);
     }, [setErrorId]);
 
     return (

ui/select/package.json

@@ -54,8 +54,7 @@
     "@washingtonpost/wpds-icon": "1.17.0",
     "@washingtonpost/wpds-input-label": "1.17.0",
     "@washingtonpost/wpds-input-shared": "1.17.0",
-    "@washingtonpost/wpds-theme": "1.17.0",
-    "nanoid": "^3.3.4"
+    "@washingtonpost/wpds-theme": "1.17.0"
   },
   "gitHead": "5ba886cfa95b3eed476edf87b1ac36d37ffe3469"
 }

ui/select/src/SelectTrigger.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { nanoid } from "nanoid";
 
 import { theme, styled } from "@washingtonpost/wpds-theme";
 import { ChevronDown } from "@washingtonpost/wpds-assets";
@@ -110,9 +109,10 @@ export const SelectTrigger = React.forwardRef<
       [setContentWidth]
     );
 
+    const id = React.useId();
     React.useEffect(() => {
-      setHelperId(`wpds-input-helper-${nanoid(6)}`);
-      setErrorId(`wpds-input-error-${nanoid(6)}`);
+      setHelperId(`wpds-input-helper-${id}`);
+      setErrorId(`wpds-input-error-${id}`);
     }, []);
 
     return (