From 6245f7f0fa2436f09694283808838d3977a64474 Mon Sep 17 00:00:00 2001
From: Jeff Yates <jeff@khanacademy.org>
Date: Mon, 16 Dec 2024 14:52:01 -0600
Subject: [PATCH 1/2] [wb1812.4.delete] Delete the deprecated identifier
 generation code

---
 .../id-provider.stories.tsx                   |  92 -------
 .../unique-id-provider.stories.tsx            | 137 -----------
 __docs__/wonder-blocks-core/use-unique-id.mdx |  50 ----
 .../use-unique-id.stories.tsx                 | 116 ---------
 .../modal-header.stories.tsx                  |   4 +-
 .../with-action-scheduler.mdx                 | 142 +----------
 .../with-action-scheduler.stories.tsx         |  50 ++--
 .../wonder-blocks-tooltip/tooltip.stories.tsx |   2 +-
 .../components/__tests__/id-provider.test.tsx |  49 ----
 .../__tests__/unique-id-provider.test.tsx     | 189 --------------
 .../src/components/id-provider.tsx            |  90 -------
 .../src/components/unique-id-provider.tsx     | 115 ---------
 .../hooks/__tests__/use-unique-id.test.tsx    | 231 ------------------
 .../src/hooks/use-unique-id.ts                |  63 -----
 packages/wonder-blocks-core/src/index.ts      |  18 +-
 .../unique-id-factory.test.ts.snap            |   7 -
 .../src/util/__tests__/ssr-id-factory.test.ts |  13 -
 .../util/__tests__/unique-id-factory.test.ts  | 165 -------------
 .../src/util/ssr-id-factory.ts                |  24 --
 packages/wonder-blocks-core/src/util/types.ts |   9 -
 .../src/util/unique-id-factory.ts             |  65 -----
 21 files changed, 30 insertions(+), 1601 deletions(-)
 delete mode 100644 __docs__/wonder-blocks-core/id-provider.stories.tsx
 delete mode 100644 __docs__/wonder-blocks-core/unique-id-provider.stories.tsx
 delete mode 100644 __docs__/wonder-blocks-core/use-unique-id.mdx
 delete mode 100644 __docs__/wonder-blocks-core/use-unique-id.stories.tsx
 delete mode 100644 packages/wonder-blocks-core/src/components/__tests__/id-provider.test.tsx
 delete mode 100644 packages/wonder-blocks-core/src/components/__tests__/unique-id-provider.test.tsx
 delete mode 100644 packages/wonder-blocks-core/src/components/id-provider.tsx
 delete mode 100644 packages/wonder-blocks-core/src/components/unique-id-provider.tsx
 delete mode 100644 packages/wonder-blocks-core/src/hooks/__tests__/use-unique-id.test.tsx
 delete mode 100644 packages/wonder-blocks-core/src/hooks/use-unique-id.ts
 delete mode 100644 packages/wonder-blocks-core/src/util/__tests__/__snapshots__/unique-id-factory.test.ts.snap
 delete mode 100644 packages/wonder-blocks-core/src/util/__tests__/ssr-id-factory.test.ts
 delete mode 100644 packages/wonder-blocks-core/src/util/__tests__/unique-id-factory.test.ts
 delete mode 100644 packages/wonder-blocks-core/src/util/ssr-id-factory.ts
 delete mode 100644 packages/wonder-blocks-core/src/util/unique-id-factory.ts

diff --git a/__docs__/wonder-blocks-core/id-provider.stories.tsx b/__docs__/wonder-blocks-core/id-provider.stories.tsx
deleted file mode 100644
index 073a23114..000000000
--- a/__docs__/wonder-blocks-core/id-provider.stories.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-/* eslint-disable import/no-deprecated */
-import * as React from "react";
-import type {Meta, StoryObj} from "@storybook/react";
-
-import {IDProvider, View} from "@khanacademy/wonder-blocks-core";
-import packageConfig from "../../packages/wonder-blocks-core/package.json";
-
-import ComponentInfo from "../../.storybook/components/component-info";
-
-export default {
-    title: "Packages / Core / IDProvider",
-    component: IDProvider,
-    args: {
-        scope: "field",
-        id: "",
-        testId: "",
-    },
-    parameters: {
-        componentSubtitle: (
-            <ComponentInfo
-                name={packageConfig.name}
-                version={packageConfig.version}
-            />
-        ),
-        docs: {
-            description: {
-                component: null,
-            },
-            source: {
-                // See https://github.com/storybookjs/storybook/issues/12596
-                excludeDecorators: true,
-            },
-        },
-    },
-    decorators: [(Story): React.ReactElement => <View>{Story()}</View>],
-} as Meta<typeof IDProvider>;
-
-type StoryComponentType = StoryObj<typeof IDProvider>;
-
-export const Default: StoryComponentType = {
-    render: (args) => (
-        <IDProvider {...args}>
-            {(uniqueId) => (
-                <label htmlFor={uniqueId}>
-                    Label with ID {uniqueId}:
-                    <input type="text" id={uniqueId} />
-                </label>
-            )}
-        </IDProvider>
-    ),
-};
-
-export const WithFormFields: StoryComponentType = () => (
-    <IDProvider scope="field">
-        {(uniqueId) => (
-            <label htmlFor={uniqueId}>
-                Label with ID {uniqueId}:
-                <input type="text" id={uniqueId} />
-            </label>
-        )}
-    </IDProvider>
-);
-
-WithFormFields.parameters = {
-    docs: {
-        description: {
-            story: "This example allows you to generate an unique ID and make it available to associate the `<label>` and `<input>` elements. To see this example in action, check that `label[for]` and `input[id]` are using the same id.",
-        },
-    },
-};
-
-export const IdProvided: StoryComponentType = {
-    name: "Identifier provided by parent component",
-    render: () => (
-        <IDProvider scope="field" id="some-user-id">
-            {(uniqueId) => (
-                <label htmlFor={uniqueId}>
-                    Label with ID {uniqueId}:
-                    <input type="text" id={uniqueId} />
-                </label>
-            )}
-        </IDProvider>
-    ),
-};
-
-IdProvided.parameters = {
-    docs: {
-        description: {
-            story: "In some cases, a parent component using `IDProvider` could have an identifier as well. For this particular scenario, we can reuse this ID and pass it down to `IDProvider`. This will avoid generating a unique identifier, and it will reuse the passed identifier instead.",
-        },
-    },
-};
diff --git a/__docs__/wonder-blocks-core/unique-id-provider.stories.tsx b/__docs__/wonder-blocks-core/unique-id-provider.stories.tsx
deleted file mode 100644
index 9c564ce9d..000000000
--- a/__docs__/wonder-blocks-core/unique-id-provider.stories.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-/* eslint-disable import/no-deprecated */
-import * as React from "react";
-import type {Meta, StoryObj} from "@storybook/react";
-
-import Button from "@khanacademy/wonder-blocks-button";
-import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {Body, HeadingSmall} from "@khanacademy/wonder-blocks-typography";
-
-import {UniqueIDProvider, View} from "@khanacademy/wonder-blocks-core";
-import packageConfig from "../../packages/wonder-blocks-core/package.json";
-
-import type {IIdentifierFactory} from "../../packages/wonder-blocks-core/src/util/types";
-
-import ComponentInfo from "../../.storybook/components/component-info";
-
-export default {
-    title: "Packages / Core / UniqueIDProvider",
-    component: UniqueIDProvider,
-    args: {
-        scope: "field",
-        mockOnFirstRender: false,
-    },
-    parameters: {
-        componentSubtitle: (
-            <ComponentInfo
-                name={packageConfig.name}
-                version={packageConfig.version}
-            />
-        ),
-        docs: {
-            description: {
-                component: null,
-            },
-            source: {
-                // See https://github.com/storybookjs/storybook/issues/12596
-                excludeDecorators: true,
-            },
-        },
-    },
-    decorators: [(Story): React.ReactElement => <View>{Story()}</View>],
-} as Meta<typeof UniqueIDProvider>;
-
-const Template = (args: any) => {
-    const [count, setCount] = React.useState(0);
-    const renders = React.useRef<Array<string>>([]);
-    const handleClick = () => {
-        setCount(count + 1);
-    };
-
-    return (
-        <View>
-            <Button onClick={handleClick} style={{width: 200}}>
-                Re-render
-            </Button>
-            <Strut size={16} />
-
-            <HeadingSmall>The UniqueIDProvider:</HeadingSmall>
-
-            <UniqueIDProvider {...args}>
-                {(ids) => {
-                    renders.current.push(ids.get("my-unique-id"));
-
-                    return renders.current.map((value, index) => (
-                        <View key={index}>
-                            Render {index}: {value}
-                        </View>
-                    ));
-                }}
-            </UniqueIDProvider>
-        </View>
-    );
-};
-
-type StoryComponentType = StoryObj<typeof UniqueIDProvider>;
-
-export const Default: StoryComponentType = {
-    render: Template,
-};
-
-Default.parameters = {
-    docs: {
-        description: {
-            story: "By default, `mockOnFirstRender` is `false`. The `children` prop is only called after the initial render. Each call provides the same identifier factory, meaning the same identifier gets returned. Try it below.",
-        },
-    },
-};
-
-export const WithMockOnFirstRender: StoryComponentType = {
-    render: Template,
-    args: {
-        mockOnFirstRender: true,
-    },
-    name: "With mockOnFirstRender",
-};
-
-WithMockOnFirstRender.parameters = {
-    docs: {
-        description: {
-            story: "When specifying `mockOnFirstRender` to be `true`, the first render will use a mock identifier factory that doesn't guarantee identifier uniqueness. Mock mode can help things appear on the screen during the initial render, but is not the default, because it is not always safe (e.g., we need actual IDs for some SVG constructs).",
-        },
-    },
-};
-
-export const Scoped: StoryComponentType = () => {
-    const children = (ids: IIdentifierFactory) => (
-        <View>
-            <Body>
-                The id returned for my-identifier: {ids.get("my-identifier")}
-            </Body>
-        </View>
-    );
-
-    return (
-        <View>
-            <HeadingSmall>First Provider with scope: first</HeadingSmall>
-            <UniqueIDProvider mockOnFirstRender={false} scope="first">
-                {children}
-            </UniqueIDProvider>
-            <HeadingSmall>Second Provider with scope: second</HeadingSmall>
-            <UniqueIDProvider mockOnFirstRender={false} scope="second">
-                {children}
-            </UniqueIDProvider>
-        </View>
-    );
-};
-
-Scoped.args = {
-    mockOnFirstRender: true,
-};
-
-Scoped.parameters = {
-    docs: {
-        description: {
-            story: "`UniqueIDProvider` ensures every identifier factory is unique using a unique number for each one. However, this isn't very readable when wanting to differentiate the types of things using unique identifiers. If we want to, we can provide a `scope` prop that adds some text to each identifier provided. This can be useful for providing some quick at-a-glance component identification to identifiers when there are multiple providers.",
-        },
-    },
-};
diff --git a/__docs__/wonder-blocks-core/use-unique-id.mdx b/__docs__/wonder-blocks-core/use-unique-id.mdx
deleted file mode 100644
index 4891b23e2..000000000
--- a/__docs__/wonder-blocks-core/use-unique-id.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
-import {Meta, Story, Canvas} from "@storybook/blocks";
-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
-each component.
-
-NOTE: All uses of `useUniqueIdWithoutMock` should appear as descendants
-of `<RenderStateRoot>`. It's customary to place `<RenderStateRoot>` near
-the base of the render tree since only one instance is allow in any given
-render tree.
-
-<Canvas of={UseUniqueIdStories.WithoutMockExample} />
-
-# `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
-during the initial render, but is not the default, because it is not always safe
-(e.g., we need actual IDs for some SVG constructs).
-
-NOTE: All uses of `useUniqueIdWithMock` should appear as descendants
-of `<RenderStateRoot>`. It's customary to place `<RenderStateRoot>` near
-the base of the render tree since only one instance is allow in any given
-render tree.
-
-<Canvas of={UseUniqueIdStories.WithMockExample} />
-
-# Scoped
-
-Both of these hooks ensure that every identifier factory is unique using a
-unique number for each one. However, this isn't very readable when wanting to
-differentiate the types of things using unique identifiers. If we want to, we
-can provide a `scope` param that adds some text to each identifier provided.
-This can be useful for providing some quick at-a-glance component identification
-to identifiers when there are multiple hooks being used.
-
-<Canvas of={UseUniqueIdStories.ScopedExample} />
diff --git a/__docs__/wonder-blocks-core/use-unique-id.stories.tsx b/__docs__/wonder-blocks-core/use-unique-id.stories.tsx
deleted file mode 100644
index b14fc140f..000000000
--- a/__docs__/wonder-blocks-core/use-unique-id.stories.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-/* eslint-disable import/no-deprecated */
-import * as React from "react";
-
-import {Meta} from "@storybook/react";
-import {Body, HeadingSmall} from "@khanacademy/wonder-blocks-typography";
-import {
-    View,
-    useUniqueIdWithoutMock,
-    useUniqueIdWithMock,
-    RenderStateRoot,
-} from "@khanacademy/wonder-blocks-core";
-import Button from "@khanacademy/wonder-blocks-button";
-
-export default {
-    title: "Packages / Core / useUniqueId*",
-
-    // Disable global decorator for this story since we are testing this component
-    parameters: {
-        enableRenderStateRootDecorator: false,
-
-        chromatic: {
-            disableSnapshot: true,
-        },
-    },
-
-    decorators: [
-        (Story): React.ReactElement => (
-            <RenderStateRoot>
-                <Story />
-            </RenderStateRoot>
-        ),
-    ],
-} as Meta;
-
-export const WithoutMockExample = () => {
-    const [count, setCount] = React.useState(0);
-    const renders = React.useRef<Array<string>>([]);
-    const ids = useUniqueIdWithoutMock();
-    const handleClick = () => {
-        setCount(count + 1);
-    };
-    if (ids) {
-        renders.current.push(ids.get("my-unique-id"));
-    } else {
-        renders.current.push("null");
-    }
-    return (
-        <View>
-            <Button onClick={handleClick} style={{width: 200}}>
-                Re-render
-            </Button>
-            <br />
-            renders:
-            {renders.current.map((value, index) => (
-                <View key={index}>
-                    Render {index}: {value}
-                </View>
-            ))}
-        </View>
-    );
-};
-
-export const WithMockExample = () => {
-    const [count, setCount] = React.useState(0);
-    const renders = React.useRef<Array<string>>([]);
-    const ids = useUniqueIdWithMock();
-    const handleClick = () => {
-        setCount(count + 1);
-    };
-    if (ids) {
-        renders.current.push(ids.get("my-unique-id"));
-    } else {
-        renders.current.push("null");
-    }
-    return (
-        <View>
-            <Button onClick={handleClick} style={{width: 200}}>
-                Re-render
-            </Button>
-            <br />
-            renders:
-            {renders.current.map((value, index) => (
-                <View key={index}>
-                    Render {index}: {value}
-                </View>
-            ))}
-        </View>
-    );
-};
-
-export const ScopedExample = () => {
-    const firstIdFactory = useUniqueIdWithoutMock("first");
-    const secondIdFactory = useUniqueIdWithoutMock("second");
-    return (
-        <View>
-            <HeadingSmall>First Provider with scope: first</HeadingSmall>
-            {firstIdFactory && (
-                <View>
-                    <Body>
-                        The id returned for my-identifier:{" "}
-                        {firstIdFactory.get("my-identifier")}
-                    </Body>
-                </View>
-            )}
-            <HeadingSmall>Second Provider with scope: second</HeadingSmall>
-            {secondIdFactory && (
-                <View>
-                    <Body>
-                        The id returned for my-identifier:{" "}
-                        {secondIdFactory.get("my-identifier")}
-                    </Body>
-                </View>
-            )}
-        </View>
-    );
-};
diff --git a/__docs__/wonder-blocks-modal/modal-header.stories.tsx b/__docs__/wonder-blocks-modal/modal-header.stories.tsx
index 3ba4b8d9a..b86cbf177 100644
--- a/__docs__/wonder-blocks-modal/modal-header.stories.tsx
+++ b/__docs__/wonder-blocks-modal/modal-header.stories.tsx
@@ -106,8 +106,8 @@ est.`}
  * - If there is a custom Dialog implementation (e.g. `TwoPaneDialog`), the
  *   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).
+ *   [ModalDialog](/#modaldialog) component. Identifiers can be generated with
+ *   the `useId` React hook.
  *
  * ### Implementation notes
  *
diff --git a/__docs__/wonder-blocks-timing/with-action-scheduler.mdx b/__docs__/wonder-blocks-timing/with-action-scheduler.mdx
index 7d636fff3..af82ec4a2 100644
--- a/__docs__/wonder-blocks-timing/with-action-scheduler.mdx
+++ b/__docs__/wonder-blocks-timing/with-action-scheduler.mdx
@@ -1,6 +1,6 @@
 import {Meta, Story, Canvas} from "@storybook/blocks";
-import {IDProvider, View} from "@khanacademy/wonder-blocks-core";
-import * as WithActionSchedulerStories from './with-action-scheduler.stories';
+import {Id, View} from "@khanacademy/wonder-blocks-core";
+import * as WithActionSchedulerStories from "./with-action-scheduler.stories";
 
 import packageConfig from "../../packages/wonder-blocks-timing/package.json";
 
@@ -47,149 +47,11 @@ component.
 The following component, `MyNaughtyComponent`, will keep spamming our pretend
 log even after it was unmounted.
 
-export const IncorrectUsage = () => (
-    <IDProvider id="incorrect">
-        {(id) => (
-            <View>
-                <Unmounter>
-                    <MyNaughtyComponent targetId={id} />
-                </Unmounter>
-                <View id={id} />
-            </View>
-        )}
-    </IDProvider>
-);
-
 <Canvas of={WithActionSchedulerStories.IncorrectUsage} />
 
-```jsx
-function Unmounter(props: {|children: React.Node|}): React.Node {
-    const [mountKids, setMountKids] = React.useState(true);
-
-    const maybeRenderKids = () => {
-        if (!mountKids) {
-            return "Children unmounted";
-        }
-
-        return (
-            <>
-                <Button
-                    onClick={() => {
-                        setMountKids(false);
-                    }}
-                >
-                    Unmount
-                </Button>
-                {props.children}
-            </>
-        );
-    };
-
-    return <View>{maybeRenderKids()}</View>;
-}
-
-class MyNaughtyComponent extends React.Component<{|targetId: string|}> {
-    componentDidMount() {
-        const {targetId} = this.props;
-        let counter = 0;
-        const domElement: HTMLElement = (document.getElementById(
-            targetId,
-        ): any);
-
-        setInterval(() => {
-            domElement.innerText = "Naughty interval logged: " + counter++;
-        }, 200);
-    }
-
-    render(): React.Node {
-        return <View>NaughtyComponent here</View>;
-    }
-}
-
-const IncorrectUsage = () => (
-    <IDProvider id="incorrect">
-        {(id) => (
-            <View>
-                <Unmounter>
-                    <MyNaughtyComponent targetId={id} />
-                </Unmounter>
-                <View id={id} />
-            </View>
-        )}
-    </IDProvider>
-);
-```
-
 ### Correct Usage
 
 But if we use `withActionScheduler` and the `interval` method, everything is
 fine. Unmount the component, and the logging stops.
 
-export const CorrectUsage = () => (
-    <IDProvider id="correct">
-        {(id) => (
-            <View>
-                <Unmounter>
-                    <MyGoodComponentWithScheduler targetId={id} />
-                </Unmounter>
-                <View id={id} />
-            </View>
-        )}
-    </IDProvider>
-);
-
 <Canvas of={WithActionSchedulerStories.CorrectUsage} />
-
-```jsx
-import {withActionScheduler} from "@khanacademy/wonder-blocks-timing";
-import type {
-    WithActionSchedulerProps,
-    WithoutActionScheduler,
-} from "@khanacademy/wonder-blocks-timing";
-
-type Props = {|
-    ...WithActionSchedulerProps,
-    targetId: string,
-|};
-
-class MyGoodComponent extends React.Component<Props> {
-    componentDidMount() {
-        const {targetId, schedule} = this.props;
-        let counter = 0;
-        const domElement: HTMLElement = (document.getElementById(
-            targetId,
-        ): any);
-
-        schedule.interval(() => {
-            domElement.innerText = "Naughty interval logged: " + counter++;
-        }, 200);
-    }
-
-    render(): React.Node {
-        return <View>GoodComponent here</View>;
-    }
-}
-
-const MyGoodComponentWithScheduler: React.AbstractComponent<
-    WithoutActionScheduler<React.ElementConfig<typeof MyGoodComponent>>,
-    MyGoodComponent,
-> = withActionScheduler(MyGoodComponent);
-
-// This is the same as the previous example
-function Unmounter(props: {|children: React.Node|}): React.Node {
-    ...
-}
-
-const CorrectUsage = () => (
-    <IDProvider id="correct">
-        {(id) => (
-            <View>
-                <Unmounter>
-                    <MyGoodComponentWithScheduler targetId={id} />
-                </Unmounter>
-                <View id={id} />
-            </View>
-        )}
-    </IDProvider>
-);
-```
diff --git a/__docs__/wonder-blocks-timing/with-action-scheduler.stories.tsx b/__docs__/wonder-blocks-timing/with-action-scheduler.stories.tsx
index e6ef598a0..8ccaeea60 100644
--- a/__docs__/wonder-blocks-timing/with-action-scheduler.stories.tsx
+++ b/__docs__/wonder-blocks-timing/with-action-scheduler.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import {Meta} from "@storybook/react";
-import {Id, View} from "@khanacademy/wonder-blocks-core";
+import {View} from "@khanacademy/wonder-blocks-core";
 
 import {
     Unmounter,
@@ -28,28 +28,26 @@ export default {
     decorators: [(Story) => <View>{Story()}</View>],
 } as Meta;
 
-export const IncorrectUsage = () => (
-    <Id>
-        {(id) => (
-            <View>
-                <Unmounter>
-                    <MyNaughtyComponent targetId={id} />
-                </Unmounter>
-                <View id={id} />
-            </View>
-        )}
-    </Id>
-);
-
-export const CorrectUsage = () => (
-    <Id>
-        {(id) => (
-            <View>
-                <Unmounter>
-                    <MyGoodComponentWithScheduler targetId={id} />
-                </Unmounter>
-                <View id={id} />
-            </View>
-        )}
-    </Id>
-);
+export const IncorrectUsage = () => {
+    const id = React.useId();
+    return (
+        <View>
+            <Unmounter>
+                <MyNaughtyComponent targetId={id} />
+            </Unmounter>
+            <View id={id} />
+        </View>
+    );
+};
+
+export const CorrectUsage = () => {
+    const id = React.useId();
+    return (
+        <View>
+            <Unmounter>
+                <MyGoodComponentWithScheduler targetId={id} />
+            </Unmounter>
+            <View id={id} />
+        </View>
+    );
+};
diff --git a/__docs__/wonder-blocks-tooltip/tooltip.stories.tsx b/__docs__/wonder-blocks-tooltip/tooltip.stories.tsx
index ceb4d3bf5..e4fec9823 100644
--- a/__docs__/wonder-blocks-tooltip/tooltip.stories.tsx
+++ b/__docs__/wonder-blocks-tooltip/tooltip.stories.tsx
@@ -124,7 +124,7 @@ ComplexAnchorAndTitle.play = async ({canvasElement}) => {
 ComplexAnchorAndTitle.parameters = {
     docs: {
         description: {
-            story: "In this example, we're no longer forcing the anchor root to be focusable, since the text input can take focus. However, that needs a custom accessibility implementation too (for that, we should use `UniqueIDProvider`, but we'll cheat here and give our own identifier).",
+            story: "In this example, we're no longer forcing the anchor root to be focusable, since the text input can take focus. However, that needs a custom accessibility implementation too (for that, we should use `useId`, but we'll cheat here and give our own identifier).",
         },
     },
 };
diff --git a/packages/wonder-blocks-core/src/components/__tests__/id-provider.test.tsx b/packages/wonder-blocks-core/src/components/__tests__/id-provider.test.tsx
deleted file mode 100644
index e49c92047..000000000
--- a/packages/wonder-blocks-core/src/components/__tests__/id-provider.test.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/* eslint-disable import/no-deprecated */
-import * as React from "react";
-import {render} from "@testing-library/react";
-
-import IDProvider from "../id-provider";
-
-const mockIDENTIFIER = `uid-component-0-${IDProvider.defaultId}`;
-
-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) =>
-            // eslint-disable-next-line testing-library/no-node-access
-            props.children({
-                get: () => mockIDENTIFIER,
-            }),
-    };
-});
-
-describe("UniqueDialog", () => {
-    test("renders children if ID is provided", () => {
-        // Arrange
-        const renderDialogFn = jest.fn(() => <div />);
-        const titleId = "custom-title";
-
-        // Act
-        render(
-            <IDProvider id={titleId} scope="component">
-                {renderDialogFn}
-            </IDProvider>,
-        );
-
-        // Assert
-        expect(renderDialogFn).toHaveBeenCalledWith(titleId);
-    });
-
-    test("if ID is not provided, then generates a unique ID and renders children", () => {
-        // Arrange
-        const renderDialogFn = jest.fn(() => <div />);
-
-        // Act
-        render(<IDProvider scope="component">{renderDialogFn}</IDProvider>);
-
-        // Assert
-        expect(renderDialogFn).toHaveBeenCalledWith(mockIDENTIFIER);
-    });
-});
diff --git a/packages/wonder-blocks-core/src/components/__tests__/unique-id-provider.test.tsx b/packages/wonder-blocks-core/src/components/__tests__/unique-id-provider.test.tsx
deleted file mode 100644
index 9eeb5855d..000000000
--- a/packages/wonder-blocks-core/src/components/__tests__/unique-id-provider.test.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-/* eslint-disable import/no-deprecated */
-import * as React from "react";
-import * as ReactDOMServer from "react-dom/server";
-import {render} from "@testing-library/react";
-
-import View from "../view";
-
-import SsrIDFactory from "../../util/ssr-id-factory";
-import UniqueIDFactory from "../../util/unique-id-factory";
-import UniqueIDProvider from "../unique-id-provider";
-import InitialFallback from "../initial-fallback";
-import {RenderStateRoot} from "../render-state-root";
-
-describe("UniqueIDProvider", () => {
-    describe("mockOnFirstRender is default (false)", () => {
-        test("initial render is nothing on server", () => {
-            // Arrange
-            const children = jest.fn(() => null);
-            const nodes = (
-                <UniqueIDProvider mockOnFirstRender={false}>
-                    {children}
-                </UniqueIDProvider>
-            );
-
-            // Act
-            ReactDOMServer.renderToStaticMarkup(nodes);
-
-            // Assert
-            expect(children).not.toHaveBeenCalled();
-        });
-
-        test("initial render is skipped on client", () => {
-            // Arrange
-            const children = jest.fn(() => null);
-            const nodes = (
-                <UniqueIDProvider mockOnFirstRender={false}>
-                    {children}
-                </UniqueIDProvider>
-            );
-
-            // Act
-            render(nodes);
-
-            // Assert
-            // Called once; for real render.
-            // Compare with case where mock factory is provided and note that
-            // children gets called twice, once for initial render, and once
-            // for real render with unique ID factory.
-            expect(children).toHaveBeenCalledTimes(1);
-            // @ts-expect-error [FEI-5019] - TS2493 - Tuple type '[]' of length '0' has no element at index '0'.
-            expect(children.mock.calls[0][0]).toBeInstanceOf(UniqueIDFactory);
-        });
-
-        test("all renders get same unique id factory", () => {
-            // Arrange
-            const children = jest.fn(() => <View />);
-            const UnderTest = () => (
-                <UniqueIDProvider mockOnFirstRender={false}>
-                    {children}
-                </UniqueIDProvider>
-            );
-            const {rerender} = render(<UnderTest />);
-
-            // Act
-            rerender(<UnderTest />);
-
-            // Assert
-            // Check our forced render worked and we rendered three times.
-            expect(children).toHaveBeenCalledTimes(2);
-            // Check the first render gets a UniqueIDFactory instance.
-            // @ts-expect-error [FEI-5019] - TS2493 - Tuple type '[]' of length '0' has no element at index '0'.
-            expect(children.mock.calls[0][0]).toBeInstanceOf(UniqueIDFactory);
-            // Check the second render gets the same UniqueIDFactory instance.
-            // @ts-expect-error [FEI-5019] - TS2493 - Tuple type '[]' of length '0' has no element at index '0'. | TS2493 - Tuple type '[]' of length '0' has no element at index '0'.
-            expect(children.mock.calls[1][0]).toBe(children.mock.calls[1][0]);
-        });
-    });
-
-    describe("mockOnFirstRender is true", () => {
-        test("initial server render, children called with SsrIDFactory", () => {
-            // Arrange
-            const children = jest.fn(() => null);
-            const nodes = (
-                <UniqueIDProvider mockOnFirstRender={true}>
-                    {children}
-                </UniqueIDProvider>
-            );
-
-            // Act
-            ReactDOMServer.renderToStaticMarkup(nodes);
-
-            // Assert
-            // Called twice; once for initial mock render only.
-            expect(children).toHaveBeenCalledTimes(1);
-            expect(children).toHaveBeenCalledWith(SsrIDFactory);
-        });
-
-        test("initial client render, children called with SsrIDFactory", () => {
-            // Arrange
-            const children = jest.fn(() => null);
-            const nodes = (
-                <UniqueIDProvider mockOnFirstRender={true}>
-                    {children}
-                </UniqueIDProvider>
-            );
-
-            // Act
-            render(nodes);
-
-            // Assert
-            // Called twice; once for initial mock render, and again for real
-            // render.
-            expect(children).toHaveBeenCalledTimes(2);
-            expect(children).toHaveBeenCalledWith(SsrIDFactory);
-        });
-
-        test("children calls after first get same unique id factory", () => {
-            // Arrange
-            const children = jest.fn(() => null);
-            const UnderTest = () => (
-                <UniqueIDProvider mockOnFirstRender={true}>
-                    {children}
-                </UniqueIDProvider>
-            );
-            const {rerender} = render(<UnderTest />);
-
-            // Act
-            rerender(<UnderTest />);
-
-            // Assert
-            // Check our forced render worked and we rendered three times.
-            expect(children).toHaveBeenCalledTimes(3);
-            // Check the second render gets a UniqueIDFactory instance.
-            // @ts-expect-error [FEI-5019] - TS2493 - Tuple type '[]' of length '0' has no element at index '0'.
-            expect(children.mock.calls[1][0]).toBeInstanceOf(UniqueIDFactory);
-            // // Check the third render gets the same UniqueIDFactory instance.
-            // @ts-expect-error [FEI-5019] - TS2493 - Tuple type '[]' of length '0' has no element at index '0'. | TS2493 - Tuple type '[]' of length '0' has no element at index '0'.
-            expect(children.mock.calls[2][0]).toBe(children.mock.calls[1][0]);
-        });
-    });
-
-    describe("inside a InitialFallback", () => {
-        test("it should pass an id to its children", () => {
-            // Arrange
-            const foo = jest.fn(() => null);
-            const nodes = (
-                <InitialFallback fallback={null}>
-                    {() => (
-                        <UniqueIDProvider mockOnFirstRender={false}>
-                            {/* @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call. | TS2554 - Expected 0 arguments, but got 1. */}
-                            {(ids: any) => foo(ids.get(""))}
-                        </UniqueIDProvider>
-                    )}
-                </InitialFallback>
-            );
-
-            // Act
-            render(nodes);
-
-            // Assert
-            expect(foo).toHaveBeenCalled();
-            // @ts-expect-error [FEI-5019] - TS2493 - Tuple type '[]' of length '0' has no element at index '0'.
-            expect(foo.mock.calls[0][0]).toBeTruthy();
-        });
-    });
-
-    describe("inside a RenderStateRoot", () => {
-        test("it should pass an id to its children", () => {
-            // Arrange
-            const foo = jest.fn(() => null);
-            const nodes = (
-                <RenderStateRoot>
-                    <UniqueIDProvider mockOnFirstRender={false}>
-                        {/* @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call. | TS2554 - Expected 0 arguments, but got 1. */}
-                        {(ids: any) => foo(ids.get(""))}
-                    </UniqueIDProvider>
-                </RenderStateRoot>
-            );
-
-            // Act
-            render(nodes);
-
-            // Assert
-            expect(foo).toHaveBeenCalled();
-            // @ts-expect-error [FEI-5019] - TS2493 - Tuple type '[]' of length '0' has no element at index '0'.
-            expect(foo.mock.calls[0][0]).toBeTruthy();
-        });
-    });
-});
diff --git a/packages/wonder-blocks-core/src/components/id-provider.tsx b/packages/wonder-blocks-core/src/components/id-provider.tsx
deleted file mode 100644
index c8f7f5d7b..000000000
--- a/packages/wonder-blocks-core/src/components/id-provider.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-/* eslint-disable import/no-deprecated */
-import * as React from "react";
-
-import UniqueIDProvider from "./unique-id-provider";
-
-import type {IIdentifierFactory} from "../util/types";
-
-type Props = {
-    /**
-     * Use the children-as-function pattern to pass a uniqueId string for
-     * use anywhere within children. This provides a way of adding a unique identifier
-     * to a given component for a11y purposes.
-     */
-    children: (uniqueId: string) => React.ReactNode;
-    /**
-     * Scope for the unique identifier
-     */
-    scope: string;
-    /**
-     * An optional id parameter for the title. If one is
-     * not provided, a unique id will be generated.
-     */
-    id?: string;
-    /**
-     * Test ID used for e2e testing.
-     */
-    testId?: string;
-};
-
-/**
- * @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,
- * among other things.
- *
- * The main difference with `UniqueIDProvider` is that `IDProvider` has a single
- * responsibility, to return an identifier that can by used by the children that
- * are rendered internally.
- *
- * This way, the wrapped component will receive this custom ID and will use it
- * to connect different elements.
- *
- * e.g. It uses the same generated id to connect a Dialog with its main title,
- * or form label with the associated input element, etc.
- *
- * ## Usage
- *
- * ```jsx
- * import {IDProvider} from "@khanacademy/wonder-blocks-core";
- *
- * <IDProvider scope="field">
- *  {(uniqueId) => (
- *     Unique ID: {uniqueId}
- *  )}
- * </IDProvider>
- * ```
- */
-export default class IDProvider extends React.Component<Props> {
-    static defaultId = "wb-id";
-
-    renderChildren(ids?: IIdentifierFactory): React.ReactNode {
-        const {id, children} = this.props;
-        const uniqueId = ids ? ids.get(IDProvider.defaultId) : id;
-
-        if (!uniqueId) {
-            throw new Error("Did not get an identifier factory nor a id prop");
-        }
-
-        return children(uniqueId);
-    }
-
-    render(): React.ReactNode {
-        const {id, scope} = this.props;
-
-        if (id) {
-            // Let's bypass the extra weight of an id provider since we don't
-            // need it.
-            return this.renderChildren();
-        } else {
-            return (
-                <UniqueIDProvider scope={scope} mockOnFirstRender={true}>
-                    {(ids) => this.renderChildren(ids)}
-                </UniqueIDProvider>
-            );
-        }
-    }
-}
diff --git a/packages/wonder-blocks-core/src/components/unique-id-provider.tsx b/packages/wonder-blocks-core/src/components/unique-id-provider.tsx
deleted file mode 100644
index 520f2bec1..000000000
--- a/packages/wonder-blocks-core/src/components/unique-id-provider.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-/* eslint-disable import/no-deprecated */
-import * as React from "react";
-
-import InitialFallback from "./initial-fallback";
-
-import UniqueIDFactory from "../util/unique-id-factory";
-import SsrIDFactory from "../util/ssr-id-factory";
-
-import type {IIdentifierFactory} from "../util/types";
-
-// TODO(FEI-4202): update to use `useUniqueId`
-type Props = {
-    /**
-     * A render prop that takes an instance of IIdentifierFactory and returns
-     * the content to be rendered.
-     *
-     * If mockOnFirstRender is false, this is only called after
-     * the initial render has occurred -- it will be blank for the
-     * the first render -- and will always be called with the same
-     * IIdentifierFactory instance.
-     *
-     * If mockOnFirstRender is true, this is called once with
-     * a mock IIdentifierFactory for the initial render, and then a unique ID
-     * factory thereafter.
-     *
-     * Full type with `IIdentifierFactory` definition inlined is:
-     *
-     * `{get(id: string): string} => React.Node`
-     */
-    children: (arg1: IIdentifierFactory) => React.ReactNode;
-    /**
-     * If mockOnFirstRender is false, children is only called
-     * after the initial render has occurred.
-     * If mockOnFirstRender is true, children is called once with
-     * a mock IIdentifierFactory for the initial render, and then a unique ID
-     * factory thereafter.
-     */
-    mockOnFirstRender: boolean;
-    /**
-     * If this prop is specified, any identifiers provided will contain the
-     * given scope. This can be useful for making easily readable identifiers.
-     */
-    readonly scope?: string;
-};
-
-/**
- * @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
- * identifiers for the client.
- *
- * In all but the first render, the children are rendered with the same
- * `IIdentifierFactory` instance, ensuring that the same calls will return the
- * same identifiers.
- *
- * The `get` method of the identifier factory ensures that the same identifier
- * is returned for like requests, but also that all identifiers provided are
- * unique. Therefore, `get("test")` will always equal `get("test")`, and
- * `get("test2")` will always equal `get("test2")`, but `get("test")` will
- * never equal `get("test2")`.
- *
- * ## Usage
- *
- * ```jsx
- * import {UniqueIDProvider} from "@khanacademy/wonder-blocks-core";
- *
- * <UniqueIDProvider mockOnFirstRender={false} scope="field">
- *  {(ids) => (
- *     <>The id returned for "my-identifier": {ids.get("my-identifier")}</>
- *  )}
- * </UniqueIDProvider>
- * ```
- */
-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.
-    _idFactory: IIdentifierFactory;
-
-    _performRender(firstRender: boolean): React.ReactNode {
-        const {children, mockOnFirstRender, scope} = this.props;
-
-        // If this is our first render, we're going to stop right here.
-        // Note: `firstRender` will be `false` on the first render if this
-        // component is a descendant of a `InitialFallback`.
-        if (firstRender) {
-            if (mockOnFirstRender) {
-                // We're allowing an initial render, so let's pass our mock
-                // identifier factory to support SSR.
-                return children(SsrIDFactory);
-            }
-            return null;
-        }
-
-        // Create an identifier factory if we don't already have one
-        if (!this._idFactory) {
-            this._idFactory = new UniqueIDFactory(scope);
-        }
-
-        // It's a regular render, so let's use our identifier factory.
-        return children(this._idFactory);
-    }
-
-    render(): React.ReactNode {
-        // Here we use the InitialFallback component to control
-        // when we render and whether we provide a mock or real
-        // identifier factory.
-        return (
-            <InitialFallback fallback={() => this._performRender(true)}>
-                {() => this._performRender(false)}
-            </InitialFallback>
-        );
-    }
-}
diff --git a/packages/wonder-blocks-core/src/hooks/__tests__/use-unique-id.test.tsx b/packages/wonder-blocks-core/src/hooks/__tests__/use-unique-id.test.tsx
deleted file mode 100644
index c541b1428..000000000
--- a/packages/wonder-blocks-core/src/hooks/__tests__/use-unique-id.test.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-/* eslint-disable import/no-deprecated */
-import * as React from "react";
-import {render} from "@testing-library/react";
-import {renderHookStatic} from "@khanacademy/wonder-blocks-testing-core";
-
-import SsrIDFactory from "../../util/ssr-id-factory";
-import UniqueIDFactory from "../../util/unique-id-factory";
-import {useUniqueIdWithMock, useUniqueIdWithoutMock} from "../use-unique-id";
-import {RenderStateRoot} from "../../components/render-state-root";
-
-describe("useUniqueIdWithoutMock", () => {
-    test("server-side render returns null", () => {
-        // Arrange
-        const wrapper = ({children}: any) => (
-            <RenderStateRoot>{children}</RenderStateRoot>
-        );
-
-        // Act
-        const {result} = renderHookStatic(() => useUniqueIdWithoutMock(), {
-            wrapper,
-        });
-
-        // Assert
-        expect(result.current).toEqual(null);
-    });
-
-    test("initial client render returns null", () => {
-        // Arrange
-        const factoryValues: Array<any> = [];
-        const TestComponent = (): React.ReactElement | null => {
-            const factory = useUniqueIdWithoutMock();
-            factoryValues.push(factory);
-            return null;
-        };
-
-        // Act
-        render(
-            <RenderStateRoot>
-                <TestComponent />
-            </RenderStateRoot>,
-        );
-
-        // Assert
-        expect(factoryValues[0]).toBe(null);
-    });
-
-    test("second client render returns a unique id factory", () => {
-        // Arrange
-        const factoryValues: Array<any> = [];
-        const TestComponent = (): React.ReactElement | null => {
-            const factory = useUniqueIdWithoutMock();
-            factoryValues.push(factory);
-            return null;
-        };
-
-        // Act
-        render(
-            <RenderStateRoot>
-                <TestComponent />
-            </RenderStateRoot>,
-        );
-
-        // Assert
-        expect(factoryValues[1]).not.toBe(SsrIDFactory);
-        expect(factoryValues[1]).toBeInstanceOf(UniqueIDFactory);
-    });
-
-    test("second render returns the same unique id factory", () => {
-        // Arrange
-        const factoryValues: Array<any> = [];
-        const TestComponent = (): React.ReactElement | null => {
-            const factory = useUniqueIdWithoutMock();
-            factoryValues.push(factory);
-            return null;
-        };
-        const {rerender} = render(
-            <RenderStateRoot>
-                <TestComponent />
-            </RenderStateRoot>,
-        );
-
-        // Act
-        rerender(
-            <RenderStateRoot>
-                <TestComponent />
-            </RenderStateRoot>,
-        );
-
-        // Assert
-        expect(factoryValues[1]).toBe(factoryValues[2]);
-    });
-
-    it("should minimize the number of renders it does", () => {
-        // Arrange
-        const values1: Array<any> = [];
-        const TestComponent1 = (): React.ReactElement | null => {
-            const ids = useUniqueIdWithoutMock();
-            values1.push(ids ? ids.get("TestComponent1") : "null");
-            return null;
-        };
-
-        const values2: Array<any> = [];
-        const TestComponent2 = () => {
-            const ids = useUniqueIdWithoutMock();
-            values2.push(ids ? ids.get("TestComponent2") : "null");
-            return <TestComponent1 />;
-        };
-
-        // Act
-        render(
-            <RenderStateRoot>
-                <TestComponent2 />
-            </RenderStateRoot>,
-        );
-
-        // Assert
-        expect(values1).toHaveLength(2);
-        expect(values2).toHaveLength(2);
-    });
-});
-
-describe("useUniqueIdWithMock", () => {
-    test("server-side render returns SsrIDFactory", () => {
-        // Arrange
-        const wrapper = ({children}: any) => (
-            <RenderStateRoot>{children}</RenderStateRoot>
-        );
-
-        // Act
-        const {result} = renderHookStatic(() => useUniqueIdWithMock(), {
-            wrapper,
-        });
-
-        // Assert
-        expect(result.current).toBe(SsrIDFactory);
-    });
-
-    test("initial client render returns SsrIDFactory", () => {
-        // Arrange
-        const factoryValues: Array<any> = [];
-        const TestComponent = (): React.ReactElement | null => {
-            const factory = useUniqueIdWithMock();
-            factoryValues.push(factory);
-            return null;
-        };
-
-        // Act
-        render(
-            <RenderStateRoot>
-                <TestComponent />
-            </RenderStateRoot>,
-        );
-
-        // Assert
-        expect(factoryValues[0]).toBe(SsrIDFactory);
-    });
-
-    test("second client render retursn a unique id factory", () => {
-        // Arrange
-        const factoryValues: Array<any> = [];
-        const TestComponent = (): React.ReactElement | null => {
-            const factory = useUniqueIdWithMock();
-            factoryValues.push(factory);
-            return null;
-        };
-
-        // Act
-        render(
-            <RenderStateRoot>
-                <TestComponent />
-            </RenderStateRoot>,
-        );
-
-        // Assert
-        expect(factoryValues[1]).not.toBe(SsrIDFactory);
-        expect(factoryValues[1]).toBeInstanceOf(UniqueIDFactory);
-    });
-
-    test("second render returns the same unique id factory", () => {
-        // Arrange
-        const factoryValues: Array<any> = [];
-        const TestComponent = (): React.ReactElement | null => {
-            const factory = useUniqueIdWithMock();
-            factoryValues.push(factory);
-            return null;
-        };
-        const {rerender} = render(
-            <RenderStateRoot>
-                <TestComponent />
-            </RenderStateRoot>,
-        );
-
-        // Act
-        rerender(
-            <RenderStateRoot>
-                <TestComponent />
-            </RenderStateRoot>,
-        );
-
-        // Assert
-        expect(factoryValues[1]).toBe(factoryValues[2]);
-    });
-
-    it("Should minimize the number of renders it does", () => {
-        // Arrange
-        const values1: Array<any> = [];
-        const TestComponent1 = (): React.ReactElement | null => {
-            const ids = useUniqueIdWithMock();
-            values1.push(ids.get("TestComponent1"));
-            return null;
-        };
-
-        const values2: Array<any> = [];
-        const TestComponent2 = () => {
-            const ids = useUniqueIdWithMock();
-            values2.push(ids.get("TestComponent2"));
-            return <TestComponent1 />;
-        };
-
-        // Act
-        render(
-            <RenderStateRoot>
-                <TestComponent2 />
-            </RenderStateRoot>,
-        );
-
-        // Assert
-        expect(values1).toHaveLength(2);
-        expect(values2).toHaveLength(2);
-    });
-});
diff --git a/packages/wonder-blocks-core/src/hooks/use-unique-id.ts b/packages/wonder-blocks-core/src/hooks/use-unique-id.ts
deleted file mode 100644
index 7980bac2d..000000000
--- a/packages/wonder-blocks-core/src/hooks/use-unique-id.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-/* eslint-disable import/no-deprecated */
-import {useRef} from "react";
-
-import {useRenderState} from "./use-render-state";
-import SsrIDFactory from "../util/ssr-id-factory";
-import UniqueIDFactory from "../util/unique-id-factory";
-
-import {RenderState} from "../components/render-state-context";
-
-import type {IIdentifierFactory} from "../util/types";
-
-/**
- * @deprecated Use `useId` for your ID needs. If you are in a class-based
- * component and cannot use hooks, then use the `Id` component.
- *
- * Returns a unique identifier factory.  If the parent component hasn't
- * been mounted yet, the global SsrIDFactory will be returned until the
- * component becomes mounted.
- *
- * @param {string} [scope] optional string to prefix generated ids with.
- * @returns {IIdentifierFactory}
- */
-export const useUniqueIdWithMock = (scope?: string): IIdentifierFactory => {
-    const renderState = useRenderState();
-    const idFactory = useRef<IIdentifierFactory | null | undefined>(null);
-
-    if (renderState === RenderState.Initial) {
-        return SsrIDFactory;
-    }
-
-    if (!idFactory.current) {
-        idFactory.current = new UniqueIDFactory(scope);
-    }
-
-    return idFactory.current;
-};
-
-/**
- * @deprecated Use `useId` for your ID needs. If you are in a class-based
- * component and cannot use hooks, then use the `Id` component.
- *
- * Returns a unique identifier factory.  If the parent component hasn't
- * been mounted yet, null will be returned.
- *
- * @param {string} [scope] optional string to prefix generated ids with.
- * @returns {?IIdentifierFactory}
- */
-export const useUniqueIdWithoutMock = (
-    scope?: string,
-): IIdentifierFactory | null | undefined => {
-    const renderState = useRenderState();
-    const idFactory = useRef<IIdentifierFactory | null | undefined>(null);
-
-    if (renderState === RenderState.Initial) {
-        return null;
-    }
-
-    if (!idFactory.current) {
-        idFactory.current = new UniqueIDFactory(scope);
-    }
-
-    return idFactory.current;
-};
diff --git a/packages/wonder-blocks-core/src/index.ts b/packages/wonder-blocks-core/src/index.ts
index 55df69118..be714657c 100644
--- a/packages/wonder-blocks-core/src/index.ts
+++ b/packages/wonder-blocks-core/src/index.ts
@@ -1,23 +1,9 @@
-import type {
-    AriaProps,
-    // eslint-disable-next-line import/no-deprecated
-    IIdentifierFactory,
-    StyleType,
-    PropsFor,
-} from "./util/types";
-
 export {default as Text} from "./components/text";
 export {default as View} from "./components/view";
 export {default as InitialFallback} from "./components/initial-fallback";
-export {default as IDProvider} from "./components/id-provider";
-export {default as UniqueIDProvider} from "./components/unique-id-provider";
 export {default as addStyle} from "./util/add-style";
 export {default as Server} from "./util/server";
 export {Id} from "./components/id";
-export {
-    useUniqueIdWithMock,
-    useUniqueIdWithoutMock,
-} from "./hooks/use-unique-id";
 export {useForceUpdate} from "./hooks/use-force-update";
 export {useIsMounted} from "./hooks/use-is-mounted";
 export {useLatestRef} from "./hooks/use-latest-ref";
@@ -28,6 +14,4 @@ export {useRenderState} from "./hooks/use-render-state";
 export {RenderStateRoot} from "./components/render-state-root";
 export {RenderState} from "./components/render-state-context";
 export type {AriaRole, AriaAttributes} from "./util/aria-types";
-
-// eslint-disable-next-line import/no-deprecated
-export type {AriaProps, IIdentifierFactory, StyleType, PropsFor};
+export type {AriaProps, StyleType, PropsFor} from "./util/types";
diff --git a/packages/wonder-blocks-core/src/util/__tests__/__snapshots__/unique-id-factory.test.ts.snap b/packages/wonder-blocks-core/src/util/__tests__/__snapshots__/unique-id-factory.test.ts.snap
deleted file mode 100644
index 6df3fa817..000000000
--- a/packages/wonder-blocks-core/src/util/__tests__/__snapshots__/unique-id-factory.test.ts.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`UniqueIDFactory #constructor whitespace in scope, throws 1`] = `"Invalid factory scope: not valid scope"`;
-
-exports[`UniqueIDFactory #constructor whitespace only scope, throws 1`] = `"Invalid factory scope:      "`;
-
-exports[`UniqueIDFactory #get should throw on invalid key 1`] = `"Invalid identifier key: IN*89098 08a7 jhufs"`;
diff --git a/packages/wonder-blocks-core/src/util/__tests__/ssr-id-factory.test.ts b/packages/wonder-blocks-core/src/util/__tests__/ssr-id-factory.test.ts
deleted file mode 100644
index c4b98c93f..000000000
--- a/packages/wonder-blocks-core/src/util/__tests__/ssr-id-factory.test.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-describe("SsrIDFactory", () => {
-    test("returns the same id, regardless of client or server render", async () => {
-        // Arrange
-        const id = "this-is-the-id";
-        const {default: SsrIDFactory} = await import("../ssr-id-factory");
-
-        // Act
-        const result = SsrIDFactory.get(id);
-
-        // Assert
-        expect(result).toBe(id);
-    });
-});
diff --git a/packages/wonder-blocks-core/src/util/__tests__/unique-id-factory.test.ts b/packages/wonder-blocks-core/src/util/__tests__/unique-id-factory.test.ts
deleted file mode 100644
index 00af2b8dd..000000000
--- a/packages/wonder-blocks-core/src/util/__tests__/unique-id-factory.test.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-/* eslint-disable import/no-deprecated */
-import UniqueIDFactory from "../unique-id-factory";
-
-describe("UniqueIDFactory", () => {
-    describe("#constructor", () => {
-        test("no scope, should not throw", () => {
-            // Arrange
-
-            // Act
-            const underTest = () => new UniqueIDFactory();
-
-            // Assert
-            expect(underTest).not.toThrow();
-        });
-
-        test("valid scope, should not throw", () => {
-            // Arrange
-            const scope = "this-is-a-scope";
-
-            // Act
-            const underTest = () => new UniqueIDFactory(scope);
-
-            // Assert
-            expect(underTest).not.toThrow();
-        });
-
-        test("whitespace in scope, throws", () => {
-            // Arrange
-            const scope = "not valid scope";
-
-            // Act
-            const underTest = () => new UniqueIDFactory(scope);
-
-            // Assert
-            expect(underTest).toThrowErrorMatchingSnapshot();
-        });
-
-        test("whitespace only scope, throws", () => {
-            // Arrange
-            const scope = "     ";
-
-            // Act
-            const underTest = () => new UniqueIDFactory(scope);
-
-            // Assert
-            expect(underTest).toThrowErrorMatchingSnapshot();
-        });
-
-        test("special characters in scope, should not throw", () => {
-            // Arrange
-            const scope = "invalid$%^&*(";
-
-            // Act
-            const underTest = () => new UniqueIDFactory(scope);
-
-            // Assert
-            expect(underTest).not.toThrow();
-        });
-    });
-
-    describe("#get", () => {
-        test("should return an identifier", () => {
-            // Arrange
-            const factory = new UniqueIDFactory();
-
-            // Act
-            const actual = factory.get("mynamedid");
-
-            // Assert
-            expect(typeof actual).toBe("string");
-        });
-
-        test("should return an identifier with the factory name", () => {
-            // Arrange
-            const name = "factory-for-testing";
-            const factory = new UniqueIDFactory(name);
-            const expected = /^uid-factory-for-testing.*/g;
-
-            // Act
-            const actual = factory.get("anotherid");
-
-            // Assert
-            expect(actual).toMatch(expected);
-        });
-
-        test("should throw on invalid key", () => {
-            // Arrange
-            const factory = new UniqueIDFactory();
-
-            // Act
-            const underTest = () => factory.get("IN*89098 08a7 jhufs");
-
-            // Assert
-            expect(underTest).toThrowErrorMatchingSnapshot();
-        });
-
-        test("should normalize key to lowercase", () => {
-            // Arrange
-            const factory = new UniqueIDFactory();
-            const expected = /.*this-id-please/g;
-
-            // Act
-            const actual = factory.get("ThiS-ID-PLEASE");
-
-            // Assert
-            expect(actual).toMatch(expected);
-        });
-
-        test("should normalize factory name to lowercase", () => {
-            // Arrange
-            const name = "FACTory-NamE";
-            const factory = new UniqueIDFactory(name);
-            const expected = /.*factory-name.*/g;
-
-            // Act
-            const actual = factory.get("anotherid");
-
-            // Assert
-            expect(actual).toMatch(expected);
-        });
-
-        test("should return unique identifiers", () => {
-            // Arrange
-            const factory = new UniqueIDFactory();
-            const id1 = factory.get("first");
-
-            // Act
-            const id2 = factory.get("second");
-
-            // Assert
-            expect(id2).not.toEqual(id1);
-        });
-
-        test("should return the same identifier for the same key", () => {
-            // Arrange
-            const factory = new UniqueIDFactory();
-
-            // Generate some ids either side of our test case.
-            // Just to validate that we're not benefiting from some
-            // "only id requested" side-effect.
-            factory.get("before");
-            const expected = factory.get("name");
-            factory.get("after");
-
-            // Act
-            const actual = factory.get("name");
-
-            // Assert
-            expect(actual).toBe(expected);
-        });
-
-        test("should return unique identifiers across factories", () => {
-            // Arrange
-            const factory1 = new UniqueIDFactory();
-            const factory2 = new UniqueIDFactory();
-
-            // Act
-            const id1 = factory1.get("testname");
-            const id2 = factory2.get("testname");
-
-            // Assert
-            expect(id2).not.toEqual(id1);
-        });
-    });
-});
diff --git a/packages/wonder-blocks-core/src/util/ssr-id-factory.ts b/packages/wonder-blocks-core/src/util/ssr-id-factory.ts
deleted file mode 100644
index 58ada4346..000000000
--- a/packages/wonder-blocks-core/src/util/ssr-id-factory.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/* eslint-disable import/no-deprecated */
-import type {IIdentifierFactory} from "./types";
-
-/**
- * This is NOT for direct use. Instead, see the UniqueIDProvider component.
- *
- * Implements a version of IIdentifierFactory that can be used for providing
- * identifiers on initial render of components that are eligible for server-side
- * rendering.
- *
- * The identifiers are not guaranteed to be unique, but they will match between
- * server and the first client render.
- * @deprecated Use `useId` for your ID needs. If you are in a class-based
- * component and cannot use hooks, then use the `Id` component.
- */
-class SsrIDFactory implements IIdentifierFactory {
-    static Default: IIdentifierFactory = new SsrIDFactory();
-
-    get(id: string): string {
-        return id;
-    }
-}
-
-export default SsrIDFactory.Default;
diff --git a/packages/wonder-blocks-core/src/util/types.ts b/packages/wonder-blocks-core/src/util/types.ts
index 5570a0f25..20458357d 100644
--- a/packages/wonder-blocks-core/src/util/types.ts
+++ b/packages/wonder-blocks-core/src/util/types.ts
@@ -102,13 +102,4 @@ export type TextViewSharedProps = {
 } & AriaProps &
     EventHandlers;
 
-/**
- * Interface implemented by types that can provide identifiers.
- * @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 interface IIdentifierFactory {
-    get(id: string): string;
-}
-
 export * from "./types.propsfor";
diff --git a/packages/wonder-blocks-core/src/util/unique-id-factory.ts b/packages/wonder-blocks-core/src/util/unique-id-factory.ts
deleted file mode 100644
index 2c3820bcb..000000000
--- a/packages/wonder-blocks-core/src/util/unique-id-factory.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-/* eslint-disable import/no-deprecated */
-import type {IIdentifierFactory} from "./types";
-
-/**
- * This is NOT for direct use. Instead, see the UniqueIDProvider component.
- *
- * Implements IIdentifierFactory to provide unique identifiers.
- *
- * @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 UniqueIDFactory implements IIdentifierFactory {
-    _uniqueFactoryName: string;
-
-    static _factoryUniquenessCounter = 0;
-
-    /**
-     * Creates a UniqueIDFactory instance.
-     *
-     * @param {string} scope An optional case-insensitive scope for the
-     * factory. This will be used as part of the identifier. Useful for
-     * providing context to the identifiers, which can be useful in
-     * differentiating elements when debugging the DOM. This must contain only
-     * hyphen and alphanumeric characters.
-     */
-    constructor(scope?: string) {
-        scope = typeof scope === "string" ? scope : "";
-        const normalizedScope = scope.toLowerCase();
-        if (!this._hasValidIdChars(normalizedScope)) {
-            throw new Error(`Invalid factory scope: ${scope}`);
-        }
-        this._uniqueFactoryName = `uid-${normalizedScope}-${UniqueIDFactory._factoryUniquenessCounter++}`;
-    }
-
-    /**
-     * This method verifies that a string contains valid characters for an
-     * identifier. It does not assert that a string IS a valid identifier (for
-     * example, that it doesn't start with numbers). We don't need to do that
-     * here because all identifiers are prefixed to avoid needing that check.
-     *
-     * According to this post:
-     * https://stackoverflow.com/questions/70579/html-valid-id-attribute-values/31773673#31773673
-     * The only characters that are not allowed in an id are whitespace characters.
-     */
-    _hasValidIdChars(value?: string | null): boolean {
-        return typeof value === "string" ? !/\s/.test(value) : false;
-    }
-
-    /**
-     * Provides a unique identifier with the given key.
-     *
-     * @param {string} key The case-insensitive key of the identifier.
-     *
-     * @returns {string} A unique identifier that will remain the same for this
-     * key in this factory. This must contain only hyphen and alphanumeric
-     * characters.
-     */
-    get: (key: string) => string = (key) => {
-        const normalizedKey = key.toLowerCase();
-        if (!this._hasValidIdChars(key)) {
-            throw new Error(`Invalid identifier key: ${key}`);
-        }
-        return `${this._uniqueFactoryName}-${normalizedKey}`;
-    };
-}

From f523a2b0aa31e5ebb39d05cda36e79f2a660c8ca Mon Sep 17 00:00:00 2001
From: Jeff Yates <jeff@khanacademy.org>
Date: Mon, 16 Dec 2024 14:53:50 -0600
Subject: [PATCH 2/2] [wb1812.4.delete] docs(changeset): Delete the custom
 identifier generation API

---
 .changeset/lemon-seals-buy.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/lemon-seals-buy.md

diff --git a/.changeset/lemon-seals-buy.md b/.changeset/lemon-seals-buy.md
new file mode 100644
index 000000000..5ab1f8f35
--- /dev/null
+++ b/.changeset/lemon-seals-buy.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-core": major
+---
+
+Delete the custom identifier generation API