From c692276ed529b08d72067a1bfaab5abf44f22f9e Mon Sep 17 00:00:00 2001
From: Jeff Yates <jeff@khanacademy.org>
Date: Wed, 11 Dec 2024 15:02:19 -0600
Subject: [PATCH 1/9] [wb1812.3.migratewb] Migrate uses of IDProvider

---
 .../with-action-scheduler.stories.tsx                 | 11 +++++------
 .../src/components/action-menu.tsx                    | 11 +++++------
 .../src/components/multi-select.tsx                   | 11 +++++------
 .../src/components/single-select.tsx                  | 11 +++++------
 .../src/components/labeled-text-field.tsx             |  7 +++----
 .../wonder-blocks-form/src/components/text-field.tsx  |  7 +++----
 .../src/components/modal-header.tsx                   |  3 ++-
 .../src/components/one-pane-dialog.tsx                |  7 +++----
 .../wonder-blocks-popover/src/components/popover.tsx  |  7 +++----
 .../src/components/search-field.tsx                   |  7 +++----
 10 files changed, 37 insertions(+), 45 deletions(-)

diff --git a/__docs__/wonder-blocks-timing/with-action-scheduler.stories.tsx b/__docs__/wonder-blocks-timing/with-action-scheduler.stories.tsx
index a95601300..e6ef598a0 100644
--- a/__docs__/wonder-blocks-timing/with-action-scheduler.stories.tsx
+++ b/__docs__/wonder-blocks-timing/with-action-scheduler.stories.tsx
@@ -1,7 +1,6 @@
-/* eslint-disable import/no-deprecated */
 import * as React from "react";
 import {Meta} from "@storybook/react";
-import {IDProvider, View} from "@khanacademy/wonder-blocks-core";
+import {Id, View} from "@khanacademy/wonder-blocks-core";
 
 import {
     Unmounter,
@@ -30,7 +29,7 @@ export default {
 } as Meta;
 
 export const IncorrectUsage = () => (
-    <IDProvider id="incorrect" scope="example">
+    <Id>
         {(id) => (
             <View>
                 <Unmounter>
@@ -39,11 +38,11 @@ export const IncorrectUsage = () => (
                 <View id={id} />
             </View>
         )}
-    </IDProvider>
+    </Id>
 );
 
 export const CorrectUsage = () => (
-    <IDProvider id="correct" scope="example">
+    <Id>
         {(id) => (
             <View>
                 <Unmounter>
@@ -52,5 +51,5 @@ export const CorrectUsage = () => (
                 <View id={id} />
             </View>
         )}
-    </IDProvider>
+    </Id>
 );
diff --git a/packages/wonder-blocks-dropdown/src/components/action-menu.tsx b/packages/wonder-blocks-dropdown/src/components/action-menu.tsx
index 91011864e..d5db71ee4 100644
--- a/packages/wonder-blocks-dropdown/src/components/action-menu.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/action-menu.tsx
@@ -2,8 +2,7 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {StyleSheet} from "aphrodite";
 import {
-    // eslint-disable-next-line import/no-deprecated
-    IDProvider,
+    Id,
     type AriaProps,
     type StyleType,
 } from "@khanacademy/wonder-blocks-core";
@@ -256,7 +255,7 @@ export default class ActionMenu extends React.Component<Props, State> {
         const {disabled, menuText, opener, testId, id} = this.props;
 
         return (
-            <IDProvider id={id} scope="action-menu-opener">
+            <Id id={id}>
                 {(uniqueOpenerId) => (
                     <DropdownOpener
                         id={uniqueOpenerId}
@@ -291,7 +290,7 @@ export default class ActionMenu extends React.Component<Props, State> {
                               }}
                     </DropdownOpener>
                 )}
-            </IDProvider>
+            </Id>
         );
     }
 
@@ -302,7 +301,7 @@ export default class ActionMenu extends React.Component<Props, State> {
         const items = this.getMenuItems();
 
         return (
-            <IDProvider id={dropdownId} scope="action-menu-dropdown">
+            <Id id={dropdownId}>
                 {(uniqueDropdownId) => (
                     <DropdownCore
                         id={uniqueDropdownId}
@@ -321,7 +320,7 @@ export default class ActionMenu extends React.Component<Props, State> {
                         dropdownStyle={[styles.menuTopSpace, dropdownStyle]}
                     />
                 )}
-            </IDProvider>
+            </Id>
         );
     }
 }
diff --git a/packages/wonder-blocks-dropdown/src/components/multi-select.tsx b/packages/wonder-blocks-dropdown/src/components/multi-select.tsx
index e749b05fe..43090a503 100644
--- a/packages/wonder-blocks-dropdown/src/components/multi-select.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/multi-select.tsx
@@ -2,8 +2,7 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 
 import {
-    // eslint-disable-next-line import/no-deprecated
-    IDProvider,
+    Id,
     type AriaProps,
     type StyleType,
 } from "@khanacademy/wonder-blocks-core";
@@ -546,7 +545,7 @@ const MultiSelect = (props: Props) => {
         const menuText = getMenuText(allChildren);
 
         const dropdownOpener = (
-            <IDProvider id={id} scope="multi-select-opener">
+            <Id id={id}>
                 {(uniqueOpenerId) => {
                     return opener ? (
                         <DropdownOpener
@@ -582,7 +581,7 @@ const MultiSelect = (props: Props) => {
                         </SelectOpener>
                     );
                 }}
-            </IDProvider>
+            </Id>
         );
 
         return dropdownOpener;
@@ -602,7 +601,7 @@ const MultiSelect = (props: Props) => {
     const isDisabled = numEnabledOptions === 0 || disabled;
 
     return (
-        <IDProvider id={dropdownId} scope="multi-select-dropdown">
+        <Id id={dropdownId}>
             {(uniqueDropdownId) => (
                 <DropdownCore
                     id={uniqueDropdownId}
@@ -645,7 +644,7 @@ const MultiSelect = (props: Props) => {
                     disabled={isDisabled}
                 />
             )}
-        </IDProvider>
+        </Id>
     );
 };
 
diff --git a/packages/wonder-blocks-dropdown/src/components/single-select.tsx b/packages/wonder-blocks-dropdown/src/components/single-select.tsx
index dc4660276..27a9fa429 100644
--- a/packages/wonder-blocks-dropdown/src/components/single-select.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/single-select.tsx
@@ -2,8 +2,7 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 
 import {
-    // eslint-disable-next-line import/no-deprecated
-    IDProvider,
+    Id,
     type AriaProps,
     type StyleType,
 } from "@khanacademy/wonder-blocks-core";
@@ -444,7 +443,7 @@ const SingleSelect = (props: Props) => {
             : placeholder;
 
         const dropdownOpener = (
-            <IDProvider id={id} scope="single-select-opener">
+            <Id id={id}>
                 {(uniqueOpenerId) => {
                     return opener ? (
                         <DropdownOpener
@@ -480,7 +479,7 @@ const SingleSelect = (props: Props) => {
                         </SelectOpener>
                     );
                 }}
-            </IDProvider>
+            </Id>
         );
 
         return dropdownOpener;
@@ -498,7 +497,7 @@ const SingleSelect = (props: Props) => {
     const isDisabled = numEnabledOptions === 0 || disabled;
 
     return (
-        <IDProvider id={dropdownId} scope="single-select-dropdown">
+        <Id id={dropdownId}>
             {(uniqueDropdownId) => (
                 <DropdownCore
                     id={uniqueDropdownId}
@@ -532,7 +531,7 @@ const SingleSelect = (props: Props) => {
                     disabled={isDisabled}
                 />
             )}
-        </IDProvider>
+        </Id>
     );
 };
 
diff --git a/packages/wonder-blocks-form/src/components/labeled-text-field.tsx b/packages/wonder-blocks-form/src/components/labeled-text-field.tsx
index b7ad9373a..d14a36b79 100644
--- a/packages/wonder-blocks-form/src/components/labeled-text-field.tsx
+++ b/packages/wonder-blocks-form/src/components/labeled-text-field.tsx
@@ -1,7 +1,6 @@
 import * as React from "react";
 
-// eslint-disable-next-line import/no-deprecated
-import {IDProvider, StyleType} from "@khanacademy/wonder-blocks-core";
+import {Id, StyleType} from "@khanacademy/wonder-blocks-core";
 
 import FieldHeading from "./field-heading";
 import TextField from "./text-field";
@@ -249,7 +248,7 @@ class LabeledTextField extends React.Component<PropsWithForwardRef, State> {
         } = this.props;
 
         return (
-            <IDProvider id={id} scope="labeled-text-field">
+            <Id id={id}>
                 {(uniqueId) => (
                     <FieldHeading
                         id={uniqueId}
@@ -291,7 +290,7 @@ class LabeledTextField extends React.Component<PropsWithForwardRef, State> {
                         error={(!this.state.focused && this.state.error) || ""}
                     />
                 )}
-            </IDProvider>
+            </Id>
         );
     }
 }
diff --git a/packages/wonder-blocks-form/src/components/text-field.tsx b/packages/wonder-blocks-form/src/components/text-field.tsx
index a7b97554b..d64930e61 100644
--- a/packages/wonder-blocks-form/src/components/text-field.tsx
+++ b/packages/wonder-blocks-form/src/components/text-field.tsx
@@ -1,8 +1,7 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-// eslint-disable-next-line import/no-deprecated
-import {IDProvider, addStyle} from "@khanacademy/wonder-blocks-core";
+import {Id, addStyle} from "@khanacademy/wonder-blocks-core";
 import {border, color, mix, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
 
@@ -246,7 +245,7 @@ const TextField = (props: PropsWithForwardRef) => {
     };
 
     return (
-        <IDProvider id={id} scope="text-field">
+        <Id id={id}>
             {(uniqueId) => (
                 <StyledInput
                     style={[getStyles(), style]}
@@ -269,7 +268,7 @@ const TextField = (props: PropsWithForwardRef) => {
                     {...otherProps}
                 />
             )}
-        </IDProvider>
+        </Id>
     );
 };
 
diff --git a/packages/wonder-blocks-modal/src/components/modal-header.tsx b/packages/wonder-blocks-modal/src/components/modal-header.tsx
index dd1dc37fe..8225a63f1 100644
--- a/packages/wonder-blocks-modal/src/components/modal-header.tsx
+++ b/packages/wonder-blocks-modal/src/components/modal-header.tsx
@@ -71,7 +71,8 @@ type Props = Common | WithSubtitle | WithBreadcrumbs;
  *   ModalHeader doesn’t have to have the `titleId` prop however this is
  *   recommended. It should match the `aria-labelledby` prop of the
  *   [ModalDialog](/#modaldialog) component. If you want to see an example of
- *   how to generate this ID, check [IDProvider](/#idprovider).
+ *   how to generate this ID look at the `React.useId` hook documentation, o
+ *   check [Id](/#id).
  *
  * **Implementation notes:**
  *
diff --git a/packages/wonder-blocks-modal/src/components/one-pane-dialog.tsx b/packages/wonder-blocks-modal/src/components/one-pane-dialog.tsx
index a68ed01bc..979751672 100644
--- a/packages/wonder-blocks-modal/src/components/one-pane-dialog.tsx
+++ b/packages/wonder-blocks-modal/src/components/one-pane-dialog.tsx
@@ -4,8 +4,7 @@ import {Breadcrumbs} from "@khanacademy/wonder-blocks-breadcrumbs";
 import {MediaLayout} from "@khanacademy/wonder-blocks-layout";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
-// eslint-disable-next-line import/no-deprecated
-import {IDProvider} from "@khanacademy/wonder-blocks-core";
+import {Id} from "@khanacademy/wonder-blocks-core";
 import ModalDialog from "./modal-dialog";
 import ModalPanel from "./modal-panel";
 import ModalHeader from "./modal-header";
@@ -197,7 +196,7 @@ export default class OnePaneDialog extends React.Component<Props> {
         return (
             <MediaLayout styleSheets={styleSheets}>
                 {({styles}) => (
-                    <IDProvider id={titleId} scope="modal">
+                    <Id id={titleId}>
                         {(uniqueId) => (
                             <ModalDialog
                                 style={[styles.dialog, style]}
@@ -218,7 +217,7 @@ export default class OnePaneDialog extends React.Component<Props> {
                                 />
                             </ModalDialog>
                         )}
-                    </IDProvider>
+                    </Id>
                 )}
             </MediaLayout>
         );
diff --git a/packages/wonder-blocks-popover/src/components/popover.tsx b/packages/wonder-blocks-popover/src/components/popover.tsx
index ab05e03c8..53f3068d5 100644
--- a/packages/wonder-blocks-popover/src/components/popover.tsx
+++ b/packages/wonder-blocks-popover/src/components/popover.tsx
@@ -1,8 +1,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 
-// eslint-disable-next-line import/no-deprecated
-import {IDProvider} from "@khanacademy/wonder-blocks-core";
+import {Id} from "@khanacademy/wonder-blocks-core";
 import {TooltipPopper} from "@khanacademy/wonder-blocks-tooltip";
 import {maybeGetPortalMountedModalHostElement} from "@khanacademy/wonder-blocks-modal";
 
@@ -390,7 +389,7 @@ export default class Popover extends React.Component<Props, State> {
                     placement: placement,
                 }}
             >
-                <IDProvider id={id} scope="popover">
+                <Id id={id}>
                     {(uniqueId) => (
                         <React.Fragment>
                             <PopoverAnchor
@@ -405,7 +404,7 @@ export default class Popover extends React.Component<Props, State> {
                             {this.renderPortal(uniqueId, opened)}
                         </React.Fragment>
                     )}
-                </IDProvider>
+                </Id>
 
                 {dismissEnabled && opened && (
                     <PopoverEventListener
diff --git a/packages/wonder-blocks-search-field/src/components/search-field.tsx b/packages/wonder-blocks-search-field/src/components/search-field.tsx
index aae39522a..824027885 100644
--- a/packages/wonder-blocks-search-field/src/components/search-field.tsx
+++ b/packages/wonder-blocks-search-field/src/components/search-field.tsx
@@ -5,8 +5,7 @@ import xIcon from "@phosphor-icons/core/regular/x.svg";
 import magnifyingGlassIcon from "@phosphor-icons/core/bold/magnifying-glass-bold.svg";
 
 import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
-// eslint-disable-next-line import/no-deprecated
-import {View, IDProvider} from "@khanacademy/wonder-blocks-core";
+import {View, Id} from "@khanacademy/wonder-blocks-core";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import {TextField} from "@khanacademy/wonder-blocks-form";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
@@ -192,7 +191,7 @@ const SearchField: React.ForwardRefExoticComponent<
     };
 
     return (
-        <IDProvider id={id} scope="search-field">
+        <Id id={id}>
             {(uniqueId) => (
                 <View onClick={onClick} style={[styles.inputContainer, style]}>
                     <PhosphorIcon
@@ -242,7 +241,7 @@ const SearchField: React.ForwardRefExoticComponent<
                     {maybeRenderClearIconButton()}
                 </View>
             )}
-        </IDProvider>
+        </Id>
     );
 });
 

From 51447a63be1d3ef2b2496968f6bdf341fa8d73a2 Mon Sep 17 00:00:00 2001
From: Jeff Yates <jeff@khanacademy.org>
Date: Wed, 11 Dec 2024 15:07:16 -0600
Subject: [PATCH 2/9] [wb1812.3.migratewb] Update tests to drop need for
 checking scopes

---
 .../__tests__/labeled-text-field.test.tsx     | 20 ++++++++-----------
 .../components/__tests__/text-area.test.tsx   |  8 ++++----
 .../components/__tests__/text-field.test.tsx  |  8 ++++----
 3 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/packages/wonder-blocks-form/src/components/__tests__/labeled-text-field.test.tsx b/packages/wonder-blocks-form/src/components/__tests__/labeled-text-field.test.tsx
index d91bdc708..1e06b2b59 100644
--- a/packages/wonder-blocks-form/src/components/__tests__/labeled-text-field.test.tsx
+++ b/packages/wonder-blocks-form/src/components/__tests__/labeled-text-field.test.tsx
@@ -58,15 +58,13 @@ describe("LabeledTextField", () => {
 
         // Act
         render(<LabeledTextField label="Label" value="" onChange={() => {}} />);
+        const input = await screen.findByRole("textbox");
+        const result = input.getAttribute("id");
 
         // Assert
         // Since the generated id is unique, we cannot know what it will be. We
-        // only test if the id attribute starts with "uid-", then followed by
-        // "text-field-" as the scope assigned to IDProvider.
-        const input = await screen.findByRole("textbox");
-        expect(input.getAttribute("id")).toMatch(
-            /uid-labeled-text-field.*-field/,
-        );
+        // only that it ends with "-field".
+        expect(result).toMatch(/.*-field/);
     });
 
     it("type prop is passed to input", async () => {
@@ -207,16 +205,14 @@ describe("LabeledTextField", () => {
                 // ariaDescribedby is not passed in
             />,
         );
+        const input = await screen.findByRole("textbox");
+        const result = input.getAttribute("aria-describedby");
 
         // Assert
         // Since the generated aria-describedby is unique,
         // we cannot know what it will be.
-        // We only test if the aria-describedby attribute starts with
-        // "uid-" and ends with "-error".
-        const input = await screen.findByRole("textbox");
-        expect(input.getAttribute("aria-describedby")).toMatch(
-            /^uid-.*-error$/,
-        );
+        // We only test if the aria-describedby attribute ends with "-error".
+        expect(result).toMatch(/^.*-error$/);
     });
 
     it("validate prop is called when input changes", async () => {
diff --git a/packages/wonder-blocks-form/src/components/__tests__/text-area.test.tsx b/packages/wonder-blocks-form/src/components/__tests__/text-area.test.tsx
index cfb7c6e94..089d061f8 100644
--- a/packages/wonder-blocks-form/src/components/__tests__/text-area.test.tsx
+++ b/packages/wonder-blocks-form/src/components/__tests__/text-area.test.tsx
@@ -38,13 +38,13 @@ describe("TextArea", () => {
 
             // Act
             render(<TextArea value="" onChange={() => {}} />, defaultOptions);
+            const textArea = await screen.findByRole("textbox");
+            const result = textArea.getAttribute("id");
 
             // Assert
             // Since the generated id is unique, we cannot know what it will be. We
-            // only test if the id attribute starts with "uid-", then followed by
-            // "text-field-" as the scope assigned to IDProvider.
-            const textArea = await screen.findByRole("textbox");
-            expect(textArea.getAttribute("id")).toMatch(/uid-text-area-.*$/);
+            // only test that it is there.
+            expect(result).toBeString();
         });
 
         it("should use the testId prop for the textarea element", async () => {
diff --git a/packages/wonder-blocks-form/src/components/__tests__/text-field.test.tsx b/packages/wonder-blocks-form/src/components/__tests__/text-field.test.tsx
index c99b36e32..7588470a4 100644
--- a/packages/wonder-blocks-form/src/components/__tests__/text-field.test.tsx
+++ b/packages/wonder-blocks-form/src/components/__tests__/text-field.test.tsx
@@ -32,13 +32,13 @@ describe("TextField", () => {
 
         // Act
         render(<TextField value="" onChange={() => {}} />);
+        const input = await screen.findByRole("textbox");
+        const result = input.getAttribute("id");
 
         // Assert
         // Since the generated id is unique, we cannot know what it will be. We
-        // only test if the id attribute starts with "uid-", then followed by
-        // "text-field-" as the scope assigned to IDProvider.
-        const input = await screen.findByRole("textbox");
-        expect(input.getAttribute("id")).toMatch(/uid-text-field-.*$/);
+        // only test if the id attribute exists.
+        expect(result).toBeString();
     });
 
     it("textfield is focused", async () => {

From 80983c7562e33bac9fbb3523bd50f3f605567e44 Mon Sep 17 00:00:00 2001
From: Jeff Yates <jeff@khanacademy.org>
Date: Wed, 11 Dec 2024 15:53:30 -0600
Subject: [PATCH 3/9] [wb1812.3.migratewb] Migrate components off
 UniqueIDProvider

---
 .../src/components/choice-internal.tsx        |  25 ++--
 .../src/components/__tests__/tooltip.test.tsx | 125 ++++++++----------
 .../src/components/tooltip-anchor.tsx         |  13 +-
 .../src/components/tooltip.tsx                |  40 ++----
 4 files changed, 83 insertions(+), 120 deletions(-)

diff --git a/packages/wonder-blocks-form/src/components/choice-internal.tsx b/packages/wonder-blocks-form/src/components/choice-internal.tsx
index 7f20fea29..4d0efc717 100644
--- a/packages/wonder-blocks-form/src/components/choice-internal.tsx
+++ b/packages/wonder-blocks-form/src/components/choice-internal.tsx
@@ -1,8 +1,7 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-// eslint-disable-next-line import/no-deprecated
-import {View, UniqueIDProvider} from "@khanacademy/wonder-blocks-core";
+import {View, Id} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
@@ -112,20 +111,18 @@ type Props = AriaProps & {
     const ChoiceCore = getChoiceCoreComponent();
 
     return (
-        <UniqueIDProvider mockOnFirstRender={true} scope="choice">
-            {(ids) => {
-                // A choice element should always have a unique ID set
-                // so that the label can always refer to this element.
-                // This guarantees that clicking on the label will
-                // always click on the choice as well. If an ID is
-                // passed in as a prop, use that one. Otherwise,
-                // create a unique ID using the provider.
-                const uniqueId = id || ids.get("main");
-
+        // A choice element should always have a unique ID set
+        // so that the label can always refer to this element.
+        // This guarantees that clicking on the label will
+        // always click on the choice as well. If an ID is
+        // passed in as a prop, use that one. Otherwise,
+        // create a unique ID using the provider.
+        <Id id={id}>
+            {(uniqueId) => {
                 // Create a unique ID for the description section to be
                 // used by this element's `aria-describedby`.
                 const descriptionId = description
-                    ? ids.get("description")
+                    ? `${uniqueId}-description`
                     : undefined;
 
                 return (
@@ -154,7 +151,7 @@ type Props = AriaProps & {
                     </View>
                 );
             }}
-        </UniqueIDProvider>
+        </Id>
     );
 });
 
diff --git a/packages/wonder-blocks-tooltip/src/components/__tests__/tooltip.test.tsx b/packages/wonder-blocks-tooltip/src/components/__tests__/tooltip.test.tsx
index 5ffa92c0d..f4640454c 100644
--- a/packages/wonder-blocks-tooltip/src/components/__tests__/tooltip.test.tsx
+++ b/packages/wonder-blocks-tooltip/src/components/__tests__/tooltip.test.tsx
@@ -1,29 +1,12 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import {render, screen} from "@testing-library/react";
+import {act, render, screen} from "@testing-library/react";
 import {userEvent} from "@testing-library/user-event";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 
 import Tooltip from "../tooltip";
 
-const mockIDENTIFIER = "mock-identifier";
-jest.mock("@khanacademy/wonder-blocks-core", () => {
-    const Core = jest.requireActual("@khanacademy/wonder-blocks-core");
-    // We want all of Core to be the regular thing except for UniqueIDProvider
-    return {
-        ...Core,
-        UniqueIDProvider: (props: any) =>
-            // NOTE(kevinb): We aren't actually access the DOM here.  The logic
-            // used by this lint rule to determine DOM access could be more
-            // precise.
-            // eslint-disable-next-line testing-library/no-node-access
-            props.children({
-                get: () => mockIDENTIFIER,
-            }),
-    };
-});
-
 describe("Tooltip", () => {
     beforeEach(() => {
         jest.clearAllMocks();
@@ -52,7 +35,7 @@ describe("Tooltip", () => {
         it("should show the tooltip on hover", async () => {
             // Arrange
             const ue = userEvent.setup({
-                advanceTimers: jest.advanceTimersByTime,
+                advanceTimers: jest.advanceTimersByTimeAsync,
             });
             render(
                 <View>
@@ -62,21 +45,19 @@ describe("Tooltip", () => {
                 </View>,
             );
 
+            // Act
             const node = await screen.findByText("Anchor");
             await ue.hover(node);
-            jest.runOnlyPendingTimers();
-
-            // Act
-            const tooltip = await screen.findByRole("tooltip");
+            await act(() => jest.runOnlyPendingTimersAsync());
 
             // Assert
-            expect(tooltip).toBeInTheDocument();
+            await screen.findByRole("tooltip");
         });
 
         it("should hide the tooltip on unhover", async () => {
             // Arrange
             const ue = userEvent.setup({
-                advanceTimers: jest.advanceTimersByTime,
+                advanceTimers: jest.advanceTimersByTimeAsync,
             });
             render(
                 <View>
@@ -88,9 +69,9 @@ describe("Tooltip", () => {
 
             const node = await screen.findByText("Anchor");
             await ue.hover(node);
-            jest.runOnlyPendingTimers();
+            await act(() => jest.runOnlyPendingTimersAsync());
             await ue.unhover(node);
-            jest.runOnlyPendingTimers();
+            await act(() => jest.runOnlyPendingTimersAsync());
 
             // Act
             const tooltip = screen.queryByRole("tooltip");
@@ -102,7 +83,7 @@ describe("Tooltip", () => {
         it("should work when the anchor is text", async () => {
             // Arrange
             const ue = userEvent.setup({
-                advanceTimers: jest.advanceTimersByTime,
+                advanceTimers: jest.advanceTimersByTimeAsync,
             });
             render(
                 <View>
@@ -114,7 +95,7 @@ describe("Tooltip", () => {
 
             const node = await screen.findByText("Anchor");
             await ue.hover(node);
-            jest.runOnlyPendingTimers();
+            await act(() => jest.runOnlyPendingTimersAsync());
 
             // Act
             const tooltip = await screen.findByRole("tooltip");
@@ -152,7 +133,7 @@ describe("Tooltip", () => {
     });
 
     describe("accessibility", () => {
-        test("no id, sets identifier of TooltipBubble with UniqueIDProvider", async () => {
+        test("no id, sets identifier of TooltipBubble", async () => {
             // Arrange
             const ue = userEvent.setup({
                 advanceTimers: jest.advanceTimersByTime,
@@ -164,22 +145,21 @@ describe("Tooltip", () => {
                     </Tooltip>
                 </View>,
             );
-            const node = await screen.findByText("Anchor");
-            await ue.hover(node);
-            jest.runOnlyPendingTimers();
 
             // Act
-            // eslint-disable-next-line testing-library/no-node-access
-            const result = document.querySelector("#" + mockIDENTIFIER);
+            const node = await screen.findByText("Anchor");
+            await ue.hover(node);
+            await act(() => jest.runOnlyPendingTimersAsync());
+            const result = await screen.findByRole("tooltip");
 
             // Assert
-            expect(result).toBeInTheDocument();
+            expect(result).toHaveAttribute("id", expect.any(String));
         });
 
-        test("custom id, sets identifier of TooltipBubble", async () => {
+        it("custom id, sets identifier of TooltipBubble", async () => {
             // Arrange
             const ue = userEvent.setup({
-                advanceTimers: jest.advanceTimersByTime,
+                advanceTimers: jest.advanceTimersByTimeAsync,
             });
             render(
                 <View>
@@ -188,16 +168,15 @@ describe("Tooltip", () => {
                     </Tooltip>
                 </View>,
             );
-            const node = await screen.findByText("Anchor");
-            await ue.hover(node);
-            jest.runOnlyPendingTimers();
 
             // Act
-            // eslint-disable-next-line testing-library/no-node-access
-            const result = document.querySelector("#tooltip-1");
+            const node = await screen.findByText("Anchor");
+            await ue.hover(node);
+            await act(() => jest.runOnlyPendingTimersAsync());
+            const result = await screen.findByRole("tooltip");
 
             // Assert
-            expect(result).toBeInTheDocument();
+            expect(result).toHaveAttribute("id", "tooltip-1");
         });
 
         describe("text-only anchor", () => {
@@ -217,7 +196,7 @@ describe("Tooltip", () => {
                 expect(result.innerHTML).toBe("Anchor");
             });
 
-            test("id provided, does not attach aria-describedby", async () => {
+            test("id provided, attaches aria-describedby", async () => {
                 // Arrange
                 render(
                     <View>
@@ -226,13 +205,15 @@ describe("Tooltip", () => {
                         </Tooltip>
                     </View>,
                 );
-                const node = await screen.findByText("Anchor");
 
                 // Act
-                const result = node.getAttribute("aria-describedby");
+                const result = await screen.findByText("Anchor");
 
                 // Assert
-                expect(result).toBeNull();
+                expect(result).toHaveAttribute(
+                    "aria-describedby",
+                    "tooltip-2-anchor-aria-content",
+                );
             });
 
             test("no id provided, attaches aria-describedby", async () => {
@@ -249,7 +230,8 @@ describe("Tooltip", () => {
                 // Assert
                 expect(node).toHaveAttribute(
                     "aria-describedby",
-                    mockIDENTIFIER,
+                    // We don't know what the generated portion would be,
+                    expect.stringMatching(/.*-anchor-aria-content/),
                 );
             });
         });
@@ -283,13 +265,8 @@ describe("Tooltip", () => {
                 expect(result.children[0].innerHTML).toBe("Anchor");
             });
 
-            test("id provided, does not attach aria-describedby", async () => {
+            test("id provided, attaches aria-describedby", async () => {
                 // Arrange
-                const anchor = (
-                    <View>
-                        <View>Anchor</View>
-                    </View>
-                );
                 const ref = await new Promise((resolve: any) => {
                     render(
                         <View>
@@ -298,19 +275,23 @@ describe("Tooltip", () => {
                                 ref={resolve}
                                 content="Content"
                             >
-                                {anchor}
+                                <View>
+                                    <View>Anchor</View>
+                                </View>
                             </Tooltip>
                         </View>,
                     );
                 });
-                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'ReactInstance | null | undefined'.
-                const node = ReactDOM.findDOMNode(ref) as any;
 
                 // Act
-                const result = node.getAttribute("aria-describedby");
+                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'ReactInstance | null | undefined'.
+                const result = ReactDOM.findDOMNode(ref) as any;
 
                 // Assert
-                expect(result).toBeNull();
+                expect(result).toHaveAttribute(
+                    "aria-describedby",
+                    "tooltip-3-anchor-aria-content",
+                );
             });
 
             test("no id provided, attaches aria-describedby", async () => {
@@ -329,14 +310,16 @@ describe("Tooltip", () => {
                         </View>,
                     );
                 });
-                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'ReactInstance | null | undefined'.
-                const node = ReactDOM.findDOMNode(ref) as any;
 
                 // Act
-                const result = node.getAttribute("aria-describedby");
+                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'ReactInstance | null | undefined'.
+                const result = ReactDOM.findDOMNode(ref) as any;
 
                 // Assert
-                expect(result).toBe(mockIDENTIFIER);
+                expect(result).toHaveAttribute(
+                    "aria-describedby",
+                    expect.stringMatching(/.*-anchor-aria-content/),
+                );
             });
         });
     });
@@ -344,6 +327,8 @@ describe("Tooltip", () => {
     describe("Controlled", () => {
         test("can be opened programmatically", async () => {
             // Arrange
+
+            // Act
             render(
                 <View>
                     <Tooltip id="tooltip" content="Content" opened={true}>
@@ -351,16 +336,16 @@ describe("Tooltip", () => {
                     </Tooltip>
                 </View>,
             );
-
-            // Act
-            jest.runOnlyPendingTimers();
+            await act(() => jest.runOnlyPendingTimersAsync());
 
             // Assert
-            expect(await screen.findByText("Content")).toBeInTheDocument();
+            await screen.findByText("Content");
         });
 
         test("can be closed programmatically", async () => {
             // Arrange
+
+            // Act
             render(
                 <View>
                     <Tooltip id="tooltip" content="Content" opened={false}>
@@ -368,9 +353,7 @@ describe("Tooltip", () => {
                     </Tooltip>
                 </View>,
             );
-
-            // Act
-            jest.runOnlyPendingTimers();
+            await act(() => jest.runOnlyPendingTimersAsync());
 
             // Assert
             expect(screen.queryByText("Content")).not.toBeInTheDocument();
diff --git a/packages/wonder-blocks-tooltip/src/components/tooltip-anchor.tsx b/packages/wonder-blocks-tooltip/src/components/tooltip-anchor.tsx
index 47a598341..74bfedcd8 100644
--- a/packages/wonder-blocks-tooltip/src/components/tooltip-anchor.tsx
+++ b/packages/wonder-blocks-tooltip/src/components/tooltip-anchor.tsx
@@ -6,7 +6,6 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 
 import {Text as WBText} from "@khanacademy/wonder-blocks-core";
-import type {IIdentifierFactory} from "@khanacademy/wonder-blocks-core";
 
 import ActiveTracker from "../util/active-tracker";
 import {
@@ -54,9 +53,9 @@ type Props = {
      */
     onActiveChanged: (active: boolean) => unknown;
     /**
-     * Optional unique id factory.
+     * Optional unique id.
      */
-    ids?: IIdentifierFactory;
+    id?: string | undefined;
 };
 
 type DefaultProps = {
@@ -320,11 +319,11 @@ export default class TooltipAnchor
         );
     }
 
-    _renderAccessibleChildren(ids: IIdentifierFactory): React.ReactNode {
+    _renderAccessibleChildren(uniqueId: string): React.ReactNode {
         const anchorableChildren = this._renderAnchorableChildren();
 
         return React.cloneElement(anchorableChildren, {
-            "aria-describedby": ids.get(TooltipAnchor.ariaContentId),
+            "aria-describedby": `${uniqueId}-${TooltipAnchor.ariaContentId}`,
         });
     }
 
@@ -333,8 +332,8 @@ export default class TooltipAnchor
         // If the content is just a string, we wrap it in a Text element
         // so as not to affect styling or layout but still have an element
         // to anchor to.
-        if (this.props.ids) {
-            return this._renderAccessibleChildren(this.props.ids);
+        if (this.props.id) {
+            return this._renderAccessibleChildren(this.props.id);
         }
         return this._renderAnchorableChildren();
     }
diff --git a/packages/wonder-blocks-tooltip/src/components/tooltip.tsx b/packages/wonder-blocks-tooltip/src/components/tooltip.tsx
index 75098105d..3e3583ebd 100644
--- a/packages/wonder-blocks-tooltip/src/components/tooltip.tsx
+++ b/packages/wonder-blocks-tooltip/src/components/tooltip.tsx
@@ -20,11 +20,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 
-import {
-    // eslint-disable-next-line import/no-deprecated
-    UniqueIDProvider,
-    IIdentifierFactory,
-} from "@khanacademy/wonder-blocks-core";
+import {Id} from "@khanacademy/wonder-blocks-core";
 import {maybeGetPortalMountedModalHostElement} from "@khanacademy/wonder-blocks-modal";
 import type {Typography} from "@khanacademy/wonder-blocks-typography";
 import type {AriaProps} from "@khanacademy/wonder-blocks-core";
@@ -193,7 +189,6 @@ export default class Tooltip extends React.Component<Props, State> {
         active: false,
         activeBubble: false,
     };
-    static ariaContentId = "aria-content";
 
     _updateAnchorElement(ref?: Element | null) {
         if (ref && ref !== this.state.anchorElement) {
@@ -222,14 +217,8 @@ export default class Tooltip extends React.Component<Props, State> {
         }
     }
 
-    _renderPopper(ids?: IIdentifierFactory): React.ReactNode {
-        const {id, backgroundColor} = this.props;
-        const bubbleId = ids ? ids.get(Tooltip.ariaContentId) : id;
-        if (!bubbleId) {
-            throw new Error("Did not get an identifier factory nor a id prop");
-        }
-
-        const {placement} = this.props;
+    _renderPopper(bubbleId: string): React.ReactNode {
+        const {backgroundColor, placement} = this.props;
         return (
             <TooltipPopper
                 anchorElement={this.state.anchorElement}
@@ -267,7 +256,7 @@ export default class Tooltip extends React.Component<Props, State> {
         );
     }
 
-    _renderTooltipAnchor(ids?: IIdentifierFactory): React.ReactNode {
+    _renderTooltipAnchor(uniqueId: string): React.ReactNode {
         const {autoUpdate, children, forceAnchorFocusivity} = this.props;
         const {active, activeBubble} = this.state;
 
@@ -287,28 +276,23 @@ export default class Tooltip extends React.Component<Props, State> {
                     forceAnchorFocusivity={forceAnchorFocusivity}
                     anchorRef={(r) => this._updateAnchorElement(r)}
                     onActiveChanged={(active) => this.setState({active})}
-                    ids={ids}
+                    id={`${uniqueId}-anchor`}
                 >
                     {children}
                 </TooltipAnchor>
                 {shouldBeVisible &&
-                    ReactDOM.createPortal(this._renderPopper(ids), popperHost)}
+                    ReactDOM.createPortal(
+                        this._renderPopper(uniqueId),
+                        popperHost,
+                    )}
             </React.Fragment>
         );
     }
 
     render(): React.ReactNode {
         const {id} = this.props;
-        if (id) {
-            // Let's bypass the extra weight of an id provider since we don't
-            // need it.
-            return this._renderTooltipAnchor();
-        } else {
-            return (
-                <UniqueIDProvider scope="tooltip" mockOnFirstRender={true}>
-                    {(ids) => this._renderTooltipAnchor(ids)}
-                </UniqueIDProvider>
-            );
-        }
+        return (
+            <Id id={id}>{(uniqueId) => this._renderTooltipAnchor(uniqueId)}</Id>
+        );
     }
 }

From 41c830ca9e92e3ee359f56c1bef16407c78e4bc2 Mon Sep 17 00:00:00 2001
From: Jeff Yates <jeff@khanacademy.org>
Date: Wed, 11 Dec 2024 16:04:20 -0600
Subject: [PATCH 4/9] [wb1812.3.migratewb] Fix up tests for new ID generation

---
 .../components/__tests__/action-menu.test.tsx | 25 ++++++-------------
 .../__tests__/multi-select.test.tsx           | 23 ++++++-----------
 .../__tests__/single-select.test.tsx          | 23 ++++++-----------
 .../components/__tests__/checkbox.test.tsx    |  2 +-
 .../__tests__/search-field.test.tsx           |  2 +-
 5 files changed, 23 insertions(+), 52 deletions(-)

diff --git a/packages/wonder-blocks-dropdown/src/components/__tests__/action-menu.test.tsx b/packages/wonder-blocks-dropdown/src/components/__tests__/action-menu.test.tsx
index a2d999cfd..61388ddaa 100644
--- a/packages/wonder-blocks-dropdown/src/components/__tests__/action-menu.test.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/__tests__/action-menu.test.tsx
@@ -907,11 +907,8 @@ describe("ActionMenu", () => {
             const opener = await screen.findByRole("button");
 
             // Assert
-            // Expect autogenerated id to be in the form uid-action-menu-opener-[number]-wb-id
-            expect(opener).toHaveAttribute(
-                "id",
-                expect.stringMatching(/^uid-action-menu-opener-\d+-wb-id$/),
-            );
+            // Expect autogenerated id
+            expect(opener).toHaveAttribute("id", expect.any(String));
         });
 
         it("Should use the `id` prop if provided", async () => {
@@ -929,6 +926,7 @@ describe("ActionMenu", () => {
             // Assert
             expect(opener).toHaveAttribute("id", id);
         });
+
         it("Should auto-generate an id for the dropdown if `dropdownId` prop is not provided", async () => {
             // Arrange
             render(
@@ -945,10 +943,7 @@ describe("ActionMenu", () => {
             // Assert
             expect(
                 await screen.findByRole("menu", {hidden: true}),
-            ).toHaveAttribute(
-                "id",
-                expect.stringMatching(/^uid-action-menu-dropdown-\d+-wb-id$/),
-            );
+            ).toHaveAttribute("id", expect.any(String));
         });
 
         it("Should use the `dropdownId` prop if provided", async () => {
@@ -1007,10 +1002,7 @@ describe("ActionMenu", () => {
 
             // Assert
             expect(opener).toHaveAttribute("aria-controls", dropdown.id);
-            expect(opener).toHaveAttribute(
-                "aria-controls",
-                expect.stringMatching(/^uid-action-menu-dropdown-\d+-wb-id$/),
-            );
+            expect(dropdown.id).toBeString();
         });
 
         it("Should set the `aria-controls` attribute on the custom opener to the provided dropdownId prop", async () => {
@@ -1035,7 +1027,7 @@ describe("ActionMenu", () => {
 
             // Assert
             expect(opener).toHaveAttribute("aria-controls", dropdown.id);
-            expect(opener).toHaveAttribute("aria-controls", dropdownId);
+            expect(dropdown.id).toBe(dropdownId);
         });
 
         it("Should set the `aria-controls` attribute on the custom opener to the auto-generated dropdownId", async () => {
@@ -1058,10 +1050,7 @@ describe("ActionMenu", () => {
 
             // Assert
             expect(opener).toHaveAttribute("aria-controls", dropdown.id);
-            expect(opener).toHaveAttribute(
-                "aria-controls",
-                expect.stringMatching(/^uid-action-menu-dropdown-\d+-wb-id$/),
-            );
+            expect(dropdown.id).toBeString();
         });
     });
 
diff --git a/packages/wonder-blocks-dropdown/src/components/__tests__/multi-select.test.tsx b/packages/wonder-blocks-dropdown/src/components/__tests__/multi-select.test.tsx
index db5f73572..3bf0ad1e3 100644
--- a/packages/wonder-blocks-dropdown/src/components/__tests__/multi-select.test.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/__tests__/multi-select.test.tsx
@@ -1828,11 +1828,9 @@ describe("MultiSelect", () => {
             const opener = await screen.findByRole("button");
 
             // Assert
-            expect(opener).toHaveAttribute(
-                "id",
-                expect.stringMatching(/^uid-multi-select-opener-\d+-wb-id$/),
-            );
+            expect(opener).toHaveAttribute("id", expect.any(String));
         });
+
         it("Should use the `id` prop if provided", async () => {
             // Arrange
             const id = "test-id";
@@ -1849,6 +1847,7 @@ describe("MultiSelect", () => {
             // Assert
             expect(opener).toHaveAttribute("id", id);
         });
+
         it("Should auto-generate an id for the dropdown if `dropdownId` prop is not provided", async () => {
             // Arrange
             const {userEvent} = doRender(
@@ -1866,11 +1865,9 @@ describe("MultiSelect", () => {
             // Assert
             expect(
                 await screen.findByRole("listbox", {hidden: true}),
-            ).toHaveAttribute(
-                "id",
-                expect.stringMatching(/^uid-multi-select-dropdown-\d+-wb-id$/),
-            );
+            ).toHaveAttribute("id", expect.any(String));
         });
+
         it("Should use the `dropdownId` prop if provided", async () => {
             // Arrange
             const dropdownId = "test-id";
@@ -1930,10 +1927,7 @@ describe("MultiSelect", () => {
 
             // Assert
             expect(opener).toHaveAttribute("aria-controls", dropdown.id);
-            expect(opener).toHaveAttribute(
-                "aria-controls",
-                expect.stringMatching(/^uid-multi-select-dropdown-\d+-wb-id$/),
-            );
+            expect(opener).toHaveAttribute("aria-controls", expect.any(String));
         });
 
         it("Should set the `aria-controls` attribute on the custom opener to the provided dropdownId prop", async () => {
@@ -1983,10 +1977,7 @@ describe("MultiSelect", () => {
 
             // Assert
             expect(opener).toHaveAttribute("aria-controls", dropdown.id);
-            expect(opener).toHaveAttribute(
-                "aria-controls",
-                expect.stringMatching(/^uid-multi-select-dropdown-\d+-wb-id$/),
-            );
+            expect(opener).toHaveAttribute("aria-controls", expect.any(String));
         });
     });
 
diff --git a/packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx b/packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx
index adf9b7068..cd0ced15b 100644
--- a/packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx
@@ -1396,11 +1396,9 @@ describe("SingleSelect", () => {
             const opener = await screen.findByRole("button");
 
             // Assert
-            expect(opener).toHaveAttribute(
-                "id",
-                expect.stringMatching(/^uid-single-select-opener-\d+-wb-id$/),
-            );
+            expect(opener).toHaveAttribute("id", expect.any(String));
         });
+
         it("Should use the `id` prop if provided", async () => {
             // Arrange
             const id = "test-id";
@@ -1417,6 +1415,7 @@ describe("SingleSelect", () => {
             // Assert
             expect(opener).toHaveAttribute("id", id);
         });
+
         it("Should auto-generate an id for the dropdown if `dropdownId` prop is not provided", async () => {
             // Arrange
             const {userEvent} = doRender(
@@ -1434,11 +1433,9 @@ describe("SingleSelect", () => {
             // Assert
             expect(
                 await screen.findByRole("listbox", {hidden: true}),
-            ).toHaveAttribute(
-                "id",
-                expect.stringMatching(/^uid-single-select-dropdown-\d+-wb-id$/),
-            );
+            ).toHaveAttribute("id", expect.any(String));
         });
+
         it("Should use the `dropdownId` prop if provided", async () => {
             // Arrange
             const dropdownId = "test-id";
@@ -1506,10 +1503,7 @@ describe("SingleSelect", () => {
 
             // Assert
             expect(opener).toHaveAttribute("aria-controls", dropdown.id);
-            expect(opener).toHaveAttribute(
-                "aria-controls",
-                expect.stringMatching(/^uid-single-select-dropdown-\d+-wb-id$/),
-            );
+            expect(opener).toHaveAttribute("aria-controls", expect.any(String));
         });
 
         it("Should set the `aria-controls` attribute on the custom opener to the provided dropdownId prop", async () => {
@@ -1561,10 +1555,7 @@ describe("SingleSelect", () => {
 
             // Assert
             expect(opener).toHaveAttribute("aria-controls", dropdown.id);
-            expect(opener).toHaveAttribute(
-                "aria-controls",
-                expect.stringMatching(/^uid-single-select-dropdown-\d+-wb-id$/),
-            );
+            expect(opener).toHaveAttribute("aria-controls", expect.any(String));
         });
     });
 
diff --git a/packages/wonder-blocks-form/src/components/__tests__/checkbox.test.tsx b/packages/wonder-blocks-form/src/components/__tests__/checkbox.test.tsx
index fc08706e1..91d3a5257 100644
--- a/packages/wonder-blocks-form/src/components/__tests__/checkbox.test.tsx
+++ b/packages/wonder-blocks-form/src/components/__tests__/checkbox.test.tsx
@@ -36,7 +36,7 @@ describe("Checkbox", () => {
         const checkbox = screen.getByRole("checkbox");
 
         // Assert
-        expect(checkbox).toHaveAttribute("id", "uid-choice-1-main");
+        expect(checkbox).toHaveAttribute("id", expect.any(String));
     });
 
     test("clicking the checkbox triggers `onChange`", () => {
diff --git a/packages/wonder-blocks-search-field/src/components/__tests__/search-field.test.tsx b/packages/wonder-blocks-search-field/src/components/__tests__/search-field.test.tsx
index 6be059cbe..be29af677 100644
--- a/packages/wonder-blocks-search-field/src/components/__tests__/search-field.test.tsx
+++ b/packages/wonder-blocks-search-field/src/components/__tests__/search-field.test.tsx
@@ -387,7 +387,7 @@ describe("SearchField", () => {
         const searchField = await screen.findByTestId("search-field-test");
 
         // Assert
-        expect(searchField.getAttribute("id")).toMatch(/^uid-search-field.*$/);
+        expect(searchField).toHaveAttribute("id", expect.any(String));
     });
 
     test("has focus if autoFocus is true", async () => {

From d016cf0582d3c98343182ae5fd840ad43f0de35c Mon Sep 17 00:00:00 2001
From: Jeff Yates <jeff@khanacademy.org>
Date: Wed, 11 Dec 2024 16:30:05 -0600
Subject: [PATCH 5/9] [wb1812.3.migratewb] Update some docs and improve
 visibility of deprecation notices

---
 __docs__/wonder-blocks-core/id.mdx            | 39 +++++++++++++++++++
 __docs__/wonder-blocks-core/use-unique-id.mdx |  8 +++-
 .../src/components/id-provider.tsx            |  6 +--
 .../wonder-blocks-core/src/components/id.tsx  |  5 ++-
 .../src/components/unique-id-provider.tsx     |  6 +--
 5 files changed, 56 insertions(+), 8 deletions(-)
 create mode 100644 __docs__/wonder-blocks-core/id.mdx

diff --git a/__docs__/wonder-blocks-core/id.mdx b/__docs__/wonder-blocks-core/id.mdx
new file mode 100644
index 000000000..e81a59ca3
--- /dev/null
+++ b/__docs__/wonder-blocks-core/id.mdx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import {Meta, Story, Canvas} from "@storybook/blocks";
+import * as IdStories from "./id.stories";
+
+<Meta of={IdStories} />
+
+# Id
+
+`Id` is a component that provides an identifier to its children.
+
+It is useful for situations where the `useId` hook cannot be easily used,
+such as in class-based components.
+
+If an `id` prop is provided, that is passed through to the children;
+otherwise, a unique identifier is generated.
+
+## Usage
+
+```tsx
+import {Id} from "@khanacademy/wonder-blocks-core";
+
+<Id id={maybeId}>{(id) => <div id={id}>Hello, world!</div>}</Id>;
+```
+
+## Examples
+
+### 1. Generating an id
+
+An identifier will always be generated if an `id` prop is not provided, or the
+provided `id` property is falsy.
+
+<Canvas withSource="open" of={IdStories.GeneratedIdExample} />
+
+### 2. Passthrough an id
+
+If an `id` prop is provided and it is truthy, that value will be passed through
+to the children.
+
+<Canvas sourceState="shown" of={IdStories.PassedThroughIdExample} />
diff --git a/__docs__/wonder-blocks-core/use-unique-id.mdx b/__docs__/wonder-blocks-core/use-unique-id.mdx
index a65d7fd2d..4891b23e2 100644
--- a/__docs__/wonder-blocks-core/use-unique-id.mdx
+++ b/__docs__/wonder-blocks-core/use-unique-id.mdx
@@ -1,10 +1,13 @@
 import {Meta, Story, Canvas} from "@storybook/blocks";
-import * as UseUniqueIdStories from './use-unique-id.stories';
+import * as UseUniqueIdStories from "./use-unique-id.stories";
 
 <Meta of={UseUniqueIdStories} />
 
 # `useUniqueIdWithoutMock`
 
+DEPRECATED: Will be removed in a future release. Use `useId` from React or
+the `Id` component.
+
 This hook is similar to `<UniqueIDProvider mockOnFirstRender={false}>`.
 It will return `null` on the initial render and then the same identifier
 factory for each subsequent render. The identifier factory is unique to
@@ -19,6 +22,9 @@ render tree.
 
 # `useUniqueIdWithMock`
 
+DEPRECATED: Will be removed in a future release. Use `useId` from React or
+the `Id` component.
+
 This hook is similar to `<UniqueIDProvider mockOnFirstRender={true}>`.
 It will return a mock identifier factory on the initial render that doesn'that
 guarantee identifier uniqueness. Mock mode can help things appear on the screen
diff --git a/packages/wonder-blocks-core/src/components/id-provider.tsx b/packages/wonder-blocks-core/src/components/id-provider.tsx
index 7b87c9e26..c8f7f5d7b 100644
--- a/packages/wonder-blocks-core/src/components/id-provider.tsx
+++ b/packages/wonder-blocks-core/src/components/id-provider.tsx
@@ -28,6 +28,9 @@ type Props = {
 };
 
 /**
+ * @deprecated This component is deprecated and will be removed in an
+ * upcoming release. Migrate existing code to use `useId` or the `Id` component.
+ *
  * This is a wrapper that returns an identifier. If the `id` prop is set, the
  * component will return the same id to be consumed by its children. Otherwise,
  * a unique id will be provided. This is beneficial for accessibility purposes,
@@ -54,9 +57,6 @@ type Props = {
  *  )}
  * </IDProvider>
  * ```
- *
- * @deprecated Use `useId` for your ID needs. If you are in a class-based
- * component and cannot use hooks, then use the `Id` component.
  */
 export default class IDProvider extends React.Component<Props> {
     static defaultId = "wb-id";
diff --git a/packages/wonder-blocks-core/src/components/id.tsx b/packages/wonder-blocks-core/src/components/id.tsx
index 7bf054302..a058cff9c 100644
--- a/packages/wonder-blocks-core/src/components/id.tsx
+++ b/packages/wonder-blocks-core/src/components/id.tsx
@@ -16,7 +16,10 @@ type Props = {
 };
 
 /**
- * A component that provides an identifier to its children.
+ * `Id` is a component that provides an identifier to its children.
+ *
+ * It is useful for situations where the `useId` hook cannot be easily used,
+ * such as in class-based components.
  *
  * If an `id` prop is provided, that is passed through to the children;
  * otherwise, a unique identifier is generated.
diff --git a/packages/wonder-blocks-core/src/components/unique-id-provider.tsx b/packages/wonder-blocks-core/src/components/unique-id-provider.tsx
index fb086c4fd..520f2bec1 100644
--- a/packages/wonder-blocks-core/src/components/unique-id-provider.tsx
+++ b/packages/wonder-blocks-core/src/components/unique-id-provider.tsx
@@ -44,6 +44,9 @@ type Props = {
 };
 
 /**
+ * @deprecated This component is deprecated and will be removed in an
+ * upcoming release. Migrate existing code to use `useId` or the `Id` component.
+ *
  * The `UniqueIDProvider` component is how Wonder Blocks components obtain
  * unique identifiers. This component ensures that server-side rendering and
  * initial client rendering match while allowing the provision of unique
@@ -70,9 +73,6 @@ type Props = {
  *  )}
  * </UniqueIDProvider>
  * ```
- *
- * @deprecated Use `useId` for your ID needs. If you are in a class-based
- * component and cannot use hooks, then use the `Id` component.
  */
 export default class UniqueIDProvider extends React.Component<Props> {
     // @ts-expect-error [FEI-5019] - TS2564 - Property '_idFactory' has no initializer and is not definitely assigned in the constructor.

From a637181ccb0b8dbfad94a0cb9f030cc3fe641bdb Mon Sep 17 00:00:00 2001
From: Jeff Yates <jeff@khanacademy.org>
Date: Wed, 11 Dec 2024 16:40:04 -0600
Subject: [PATCH 6/9] [wb1812.3.migratewb] Add changeset

---
 .changeset/clever-pillows-grow.md | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 .changeset/clever-pillows-grow.md

diff --git a/.changeset/clever-pillows-grow.md b/.changeset/clever-pillows-grow.md
new file mode 100644
index 000000000..d88a9990e
--- /dev/null
+++ b/.changeset/clever-pillows-grow.md
@@ -0,0 +1,11 @@
+---
+"@khanacademy/wonder-blocks-search-field": major
+"@khanacademy/wonder-blocks-dropdown": major
+"@khanacademy/wonder-blocks-popover": major
+"@khanacademy/wonder-blocks-tooltip": major
+"@khanacademy/wonder-blocks-modal": major
+"@khanacademy/wonder-blocks-form": major
+"@khanacademy/wonder-blocks-core": patch
+---
+
+-   Migrate Wonder Blocks components off old id providers and onto new `Id` component

From aeb5fa153785cf9d36ab33834b522de745f8f061 Mon Sep 17 00:00:00 2001
From: Jeff Yates <jeff@khanacademy.org>
Date: Fri, 13 Dec 2024 12:47:09 -0600
Subject: [PATCH 7/9] [wb1812.3.migratewb] Remove useUniqueId usage from inside
 WB

---
 .../src/components/accordion-section.tsx      | 14 +++++++-------
 .../src/components/combobox.tsx               | 19 +++++++------------
 .../src/components/listbox.tsx                | 13 ++++---------
 .../src/components/text-area.tsx              |  8 +++-----
 .../src/components/switch.tsx                 | 14 ++++----------
 .../adapters/__tests__/render-state.test.tsx  |  8 ++++----
 6 files changed, 29 insertions(+), 47 deletions(-)

diff --git a/packages/wonder-blocks-accordion/src/components/accordion-section.tsx b/packages/wonder-blocks-accordion/src/components/accordion-section.tsx
index 3ccf97940..c9bc906a8 100644
--- 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
index 890b03e54..3f75b29a3 100644
--- 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
index fd64b2380..23eafbf1a 100644
--- 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
index fb101994c..978df76d8 100644
--- 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
index 09a7cd2e2..3ed70bbc5 100644
--- 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
index 20878bae5..27904e27e 100644
--- 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`

From 1d754e62c6b57abad52f701a47c29f1b3d5c25ca Mon Sep 17 00:00:00 2001
From: Jeff Yates <jeff@khanacademy.org>
Date: Fri, 13 Dec 2024 14:04:28 -0600
Subject: [PATCH 8/9] [wb1812.3.migratewb] Update changeset

---
 .changeset/{clever-pillows-grow.md => witty-panthers-shave.md} | 3 +++
 1 file changed, 3 insertions(+)
 rename .changeset/{clever-pillows-grow.md => witty-panthers-shave.md} (75%)

diff --git a/.changeset/clever-pillows-grow.md b/.changeset/witty-panthers-shave.md
similarity index 75%
rename from .changeset/clever-pillows-grow.md
rename to .changeset/witty-panthers-shave.md
index d88a9990e..10e609afb 100644
--- a/.changeset/clever-pillows-grow.md
+++ b/.changeset/witty-panthers-shave.md
@@ -1,8 +1,11 @@
 ---
 "@khanacademy/wonder-blocks-search-field": major
+"@khanacademy/wonder-blocks-accordion": major
 "@khanacademy/wonder-blocks-dropdown": major
 "@khanacademy/wonder-blocks-popover": major
+"@khanacademy/wonder-blocks-testing": major
 "@khanacademy/wonder-blocks-tooltip": major
+"@khanacademy/wonder-blocks-switch": major
 "@khanacademy/wonder-blocks-modal": major
 "@khanacademy/wonder-blocks-form": major
 "@khanacademy/wonder-blocks-core": patch

From b7a8236ff02345d98382a0164eef28b04c9997c3 Mon Sep 17 00:00:00 2001
From: Jeff Yates <jeff@khanacademy.org>
Date: Fri, 13 Dec 2024 16:39:59 -0600
Subject: [PATCH 9/9] [wb1812.3.migratewb] Add the labelledby attr back

---
 packages/wonder-blocks-dropdown/src/components/combobox.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/wonder-blocks-dropdown/src/components/combobox.tsx b/packages/wonder-blocks-dropdown/src/components/combobox.tsx
index 3f75b29a3..88fe56172 100644
--- a/packages/wonder-blocks-dropdown/src/components/combobox.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/combobox.tsx
@@ -680,6 +680,7 @@ export default function Combobox({
                                         testId ? `${testId}-listbox` : undefined
                                     }
                                     aria-label={labels.listbox}
+                                    aria-labelledby={textFieldId}
                                 >
                                     {renderList}
                                 </Listbox>