[wb1812.3.migratewb] Remove useUniqueId usage from inside WB

Khan · Dec 16, 2024 · aeb5fa1 · aeb5fa1
1 parent a637181
commit aeb5fa1
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 47 deletions.
diff --git a/packages/wonder-blocks-accordion/src/components/accordion-section.tsx b/packages/wonder-blocks-accordion/src/components/accordion-section.tsx
@@ -2,12 +2,12 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import type {StyleDeclaration} from "aphrodite";
 
-// eslint-disable-next-line import/no-deprecated
-import {useUniqueIdWithMock, View} from "@khanacademy/wonder-blocks-core";
+import {View} from "@khanacademy/wonder-blocks-core";
 import * as tokens from "@khanacademy/wonder-blocks-tokens";
 import {Body} from "@khanacademy/wonder-blocks-typography";
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 
+import {useId} from "react";
 import type {AccordionCornerKindType} from "./accordion";
 import AccordionSectionHeader from "./accordion-section-header";
 
@@ -204,15 +204,15 @@ const AccordionSection = React.forwardRef(function AccordionSection(
 
     const controlledMode = expanded !== undefined && onToggle;
 
-    // eslint-disable-next-line import/no-deprecated
-    const ids = useUniqueIdWithMock();
-    const sectionId = id ?? ids.get("accordion-section");
+    const uniqueSectionId = useId();
+    const sectionId = id ?? uniqueSectionId;
     // We need an ID for the header so that the content section's
     // aria-labelledby attribute can point to it.
-    const headerId = id ? `${id}-header` : ids.get("accordion-section-header");
+    const uniqueHeaderId = useId();
+    const headerId = id ? `${id}-header` : uniqueHeaderId;
     // We need an ID for the content section so that the opener's
     // aria-controls attribute can point to it.
-    const sectionContentUniqueId = ids.get("accordion-section-content");
+    const sectionContentUniqueId = useId();
 
     const sectionStyles = _generateStyles(
         cornerKind,

diff --git a/packages/wonder-blocks-dropdown/src/components/combobox.tsx b/packages/wonder-blocks-dropdown/src/components/combobox.tsx
@@ -4,12 +4,7 @@ import * as React from "react";
 import caretDownIcon from "@phosphor-icons/core/regular/caret-down.svg";
 import xIcon from "@phosphor-icons/core/regular/x.svg";
 
-import {
-    StyleType,
-    // eslint-disable-next-line import/no-deprecated
-    useUniqueIdWithMock,
-    View,
-} from "@khanacademy/wonder-blocks-core";
+import {StyleType, View} from "@khanacademy/wonder-blocks-core";
 import {TextField} from "@khanacademy/wonder-blocks-form";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import {
@@ -21,6 +16,7 @@ import {
 
 import {DetailCell} from "@khanacademy/wonder-blocks-cell";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
+import {useId} from "react";
 import {useListbox} from "../hooks/use-listbox";
 import {useMultipleSelection} from "../hooks/use-multiple-selection";
 import {
@@ -177,8 +173,8 @@ export default function Combobox({
     value = "",
 }: Props) {
     // eslint-disable-next-line import/no-deprecated
-    const ids = useUniqueIdWithMock("combobox");
-    const uniqueId = id ?? ids.get("listbox");
+    const generatedUniqueId = useId();
+    const uniqueId = id ?? generatedUniqueId;
     // Ref to the combobox input element.
     const comboboxRef = React.useRef<HTMLInputElement>(null);
     // Ref to the top-level node of the combobox.
@@ -516,8 +512,8 @@ export default function Combobox({
 
         return <View style={styles.iconWrapper}>{startIconElement}</View>;
     };
-
-    const pillIdPrefix = id ? `${id}-pill-` : ids.get("pill");
+    const pillIdPrefix = `${uniqueId}-pill-`;
+    const textFieldId = useId();
 
     const currentActiveDescendant = !openState
         ? undefined
@@ -577,7 +573,7 @@ export default function Combobox({
                 {maybeRenderStartIcon()}
 
                 <TextField
-                    id={ids.get("input")}
+                    id={textFieldId}
                     testId={testId}
                     style={styles.combobox}
                     value={inputValue}
@@ -684,7 +680,6 @@ export default function Combobox({
                                         testId ? `${testId}-listbox` : undefined
                                     }
                                     aria-label={labels.listbox}
-                                    aria-labelledby={ids.get("input")}
                                 >
                                     {renderList}
                                 </Listbox>

diff --git a/packages/wonder-blocks-dropdown/src/components/listbox.tsx b/packages/wonder-blocks-dropdown/src/components/listbox.tsx
@@ -1,13 +1,9 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
-import {
-    StyleType,
-    // eslint-disable-next-line import/no-deprecated
-    useUniqueIdWithMock,
-    View,
-} from "@khanacademy/wonder-blocks-core";
+import {StyleType, View} from "@khanacademy/wonder-blocks-core";
 import {color} from "@khanacademy/wonder-blocks-tokens";
 
+import {useId} from "react";
 import {useListbox} from "../hooks/use-listbox";
 import {MaybeValueOrValues, OptionItemComponent} from "../util/types";
 
@@ -104,9 +100,8 @@ function StandaloneListbox(props: Props) {
         "aria-labelledby": ariaLabelledby,
     } = props;
 
-    // eslint-disable-next-line import/no-deprecated
-    const ids = useUniqueIdWithMock("listbox");
-    const uniqueId = id ?? ids.get("id");
+    const generatedUniqueId = useId();
+    const uniqueId = id ?? generatedUniqueId;
 
     const {
         focusedIndex,

diff --git a/packages/wonder-blocks-form/src/components/text-area.tsx b/packages/wonder-blocks-form/src/components/text-area.tsx
@@ -4,8 +4,6 @@ import {StyleSheet} from "aphrodite";
 import {
     AriaProps,
     StyleType,
-    // eslint-disable-next-line import/no-deprecated
-    useUniqueIdWithMock,
     addStyle,
     View,
 } from "@khanacademy/wonder-blocks-core";
@@ -17,6 +15,7 @@ import {
     spacing,
 } from "@khanacademy/wonder-blocks-tokens";
 import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
+import {useId} from "react";
 import {useFieldValidation} from "../hooks/use-field-validation";
 
 type TextAreaProps = AriaProps & {
@@ -245,9 +244,8 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
 
         const hasError = error || !!errorMessage;
 
-        // eslint-disable-next-line import/no-deprecated
-        const ids = useUniqueIdWithMock("text-area");
-        const uniqueId = id ?? ids.get("id");
+        const generatedUniqueId = useId();
+        const uniqueId = id ?? generatedUniqueId;
 
         const handleChange = (
             event: React.ChangeEvent<HTMLTextAreaElement>,

diff --git a/packages/wonder-blocks-switch/src/components/switch.tsx b/packages/wonder-blocks-switch/src/components/switch.tsx
@@ -1,19 +1,14 @@
 import * as React from "react";
 import {CSSProperties, StyleSheet} from "aphrodite";
 
-import {
-    AriaProps,
-    View,
-    addStyle,
-    // eslint-disable-next-line import/no-deprecated
-    useUniqueIdWithMock,
-} from "@khanacademy/wonder-blocks-core";
+import {AriaProps, View, addStyle} from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {
     ThemedStylesFn,
     useScopedTheme,
     useStyles,
 } from "@khanacademy/wonder-blocks-theming";
+import {useId} from "react";
 import ThemedSwitch, {
     SwitchThemeContext,
     SwitchThemeContract,
@@ -70,9 +65,8 @@ const SwitchCore = React.forwardRef(function SwitchCore(
         testId,
     } = props;
 
-    // eslint-disable-next-line import/no-deprecated
-    const ids = useUniqueIdWithMock("labeled-field");
-    const uniqueId = id ?? ids.get("labeled-field-id");
+    const generatedUniqueId = useId();
+    const uniqueId = id ?? generatedUniqueId;
 
     const {theme, themeName} = useScopedTheme(SwitchThemeContext);
     const sharedStyles = useStyles(themedSharedStyles, theme);

diff --git a/packages/wonder-blocks-testing/src/harness/adapters/__tests__/render-state.test.tsx b/packages/wonder-blocks-testing/src/harness/adapters/__tests__/render-state.test.tsx
@@ -3,6 +3,7 @@ import {render, screen} from "@testing-library/react";
 import * as WBCore from "@khanacademy/wonder-blocks-core";
 import {makeTestHarness} from "@khanacademy/wonder-blocks-testing-core";
 
+import {useId} from "react";
 import * as RenderState from "../render-state";
 
 jest.mock("@khanacademy/wonder-stuff-core", () => {
@@ -48,9 +49,8 @@ describe("SSR.adapter", () => {
     it("should enable harnessing of components that require RenderStateRoot", () => {
         // Arrange
         const ComponentNeedsSsr = (props: any) => {
-            // eslint-disable-next-line import/no-deprecated
-            const idf = WBCore.useUniqueIdWithoutMock();
-            return <div>{idf?.get("my-id")}</div>;
+            const id = useId();
+            return <div>{id}-my-id</div>;
         };
         const testHarness = makeTestHarness(
             {
@@ -66,7 +66,7 @@ describe("SSR.adapter", () => {
         const underTest = () => render(<Harnessed />);
 
         // Assert
-        expect(underTest).not.toThrowError();
+        expect(underTest).not.toThrow();
     });
 
     it.each`