Migrate off deprecated ID APIs

.changeset/rare-bobcats-type.md

@@ -0,0 +1,7 @@
+---
+"@khanacademy/perseus-dev-ui": patch
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+Migrate off deprecated ID generation APIs

dev/gallery.tsx

@@ -1,14 +1,14 @@
 /* eslint monorepo/no-internal-import: "off", monorepo/no-relative-import: "off", import/no-relative-packages: "off" */
 import Button from "@khanacademy/wonder-blocks-button";
-import {useUniqueIdWithMock, View} from "@khanacademy/wonder-blocks-core";
+import {View} from "@khanacademy/wonder-blocks-core";
 import {OptionItem, MultiSelect} from "@khanacademy/wonder-blocks-dropdown";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import SearchField from "@khanacademy/wonder-blocks-search-field";
 import Switch from "@khanacademy/wonder-blocks-switch";
 import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {css, StyleSheet} from "aphrodite";
 import * as React from "react";
-import {useEffect, useMemo, useState} from "react";
+import {useEffect, useId, useMemo, useState} from "react";
 
 import {Renderer} from "../packages/perseus/src";
 import {mockStrings} from "../packages/perseus/src/strings";
@@ -98,9 +98,6 @@ function capitalize(key: string): string {
 }
 
 export function Gallery() {
-    // TODO(WB-1812, somewhatabstract): Migrate to Id or useId
-    // eslint-disable-next-line no-restricted-syntax
-    const ids = useUniqueIdWithMock();
     const params = useMemo(
         () => new URLSearchParams(window.location.search),
         [],
@@ -150,10 +147,10 @@ export function Gallery() {
         return acc;
     }, {});
 
-    const mobileId = ids.get("mobile");
-    const tooltipId = ids.get("tooltip");
-    const flagsId = ids.get("flags");
-    const searchId = ids.get("search");
+    const mobileId = useId();
+    const tooltipId = useId();
+    const flagsId = useId();
+    const searchId = useId();
 
     const insertShowTooltips = ([question, i]): [PerseusRenderer, number] => {
         Object.keys(question.widgets).forEach((widgetName) => {

packages/perseus-editor/src/components/widget-editor.tsx

@@ -6,11 +6,11 @@ import {
     iconChevronDown,
     iconTrash,
 } from "@khanacademy/perseus";
-import {useUniqueIdWithMock} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Switch from "@khanacademy/wonder-blocks-switch";
 import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import * as React from "react";
+import {useId} from "react";
 import _ from "underscore";
 
 import {iconChevronRight} from "../styles/icon-paths";
@@ -236,10 +236,7 @@ function LabeledSwitch(props: {
     onChange: (value: boolean) => unknown;
 }) {
     const {label, ...switchProps} = props;
-    // TODO(WB-1812, somewhatabstract): Migrate to Id or useId
-    // eslint-disable-next-line no-restricted-syntax
-    const ids = useUniqueIdWithMock();
-    const id = ids.get("switch");
+    const id = useId();
     return (
         <>
             <label htmlFor={id}>{label}</label>

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/labeled-switch.tsx

@@ -1,10 +1,11 @@
-import {View, useUniqueIdWithMock} from "@khanacademy/wonder-blocks-core";
+import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Switch from "@khanacademy/wonder-blocks-switch";
 import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
+import {useId} from "react";
 
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
@@ -18,11 +19,7 @@ type Props = {
 const LabeledSwitch = (props: Props) => {
     const {checked, label, style, onChange} = props;
 
-    // TODO(WB-1812, somewhatabstract): Migrate to Id or useId
-    // eslint-disable-next-line no-restricted-syntax
-    const ids = useUniqueIdWithMock();
-    const switchId = ids.get("switch");
-
+    const switchId = useId();
     return (
         <View style={[styles.row, style]}>
             <Switch id={switchId} checked={checked} onChange={onChange} />

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figures-section.tsx

@@ -4,11 +4,12 @@
  * the dropdown for adding figures as well as the settings for each figure.
  */
 import Button from "@khanacademy/wonder-blocks-button";
-import {View, useUniqueIdWithMock} from "@khanacademy/wonder-blocks-core";
+import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
+import {useId} from "react";
 
 import Heading from "../../../components/heading";
 
@@ -43,9 +44,7 @@ const LockedFiguresSection = (props: Props) => {
 
     const [isExpanded, setIsExpanded] = React.useState(true);
 
-    // TODO(WB-1812, somewhatabstract): Migrate to Id or useId
-    // eslint-disable-next-line no-restricted-syntax
-    const uniqueId = useUniqueIdWithMock().get("locked-figures-section");
+    const uniqueId = useId();
     const {figures, onChange} = props;
 
     function addLockedFigure(newFigure: LockedFigureType) {

packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap

@@ -350,7 +350,7 @@ exports[`renderer snapshots correct answer: correct answer 1`] = `
           >
             <label
               class="text_f1191h-o_O-LabelLarge_5s82ln"
-              for="uid-dropdown-widget-1-dropdown"
+              for=":r3:"
             >
               Test visible label
             </label>
@@ -365,14 +365,14 @@ exports[`renderer snapshots correct answer: correct answer 1`] = `
                 data-testid="dropdown-live-region"
               />
               <button
-                aria-controls=":r2:"
+                aria-controls=":r4:"
                 aria-disabled="false"
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 aria-invalid="false"
                 aria-label="Test ARIA label"
                 class="button_vr44p2-o_O-shared_u51dsh-o_O-default_3ie67y"
-                id="uid-dropdown-widget-1-dropdown"
+                id=":r3:"
                 role="combobox"
                 type="button"
               >
@@ -429,7 +429,7 @@ exports[`renderer snapshots incorrect answer: incorrect answer 1`] = `
           >
             <label
               class="text_f1191h-o_O-LabelLarge_5s82ln"
-              for="uid-dropdown-widget-2-dropdown"
+              for=":r6:"
             >
               Test visible label
             </label>
@@ -444,14 +444,14 @@ exports[`renderer snapshots incorrect answer: incorrect answer 1`] = `
                 data-testid="dropdown-live-region"
               />
               <button
-                aria-controls=":r4:"
+                aria-controls=":r7:"
                 aria-disabled="false"
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 aria-invalid="false"
                 aria-label="Test ARIA label"
                 class="button_vr44p2-o_O-shared_u51dsh-o_O-default_3ie67y"
-                id="uid-dropdown-widget-2-dropdown"
+                id=":r6:"
                 role="combobox"
                 type="button"
               >
@@ -508,7 +508,7 @@ exports[`renderer snapshots initial render: initial render 1`] = `
           >
             <label
               class="text_f1191h-o_O-LabelLarge_5s82ln"
-              for="uid-dropdown-widget-0-dropdown"
+              for=":r0:"
             >
               Test visible label
             </label>
@@ -523,14 +523,14 @@ exports[`renderer snapshots initial render: initial render 1`] = `
                 data-testid="dropdown-live-region"
               />
               <button
-                aria-controls=":r0:"
+                aria-controls=":r1:"
                 aria-disabled="false"
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 aria-invalid="false"
                 aria-label="Test ARIA label"
                 class="button_vr44p2-o_O-shared_u51dsh-o_O-default_3ie67y"
-                id="uid-dropdown-widget-0-dropdown"
+                id=":r0:"
                 role="combobox"
                 type="button"
               >

packages/perseus/src/util/react-render.tsx

@@ -24,13 +24,10 @@ export default function render(
     container: HTMLElement,
 ) {
     /**
-     * `RenderStateRoot` is responsible for tracking whether it's
-     * the initial render or subsequent renders.  It's used by
-     * `useUniqueId` and will be used by `UniqueIDProvider` and
-     * `WithSSRPlaceholder` in the future.  We're placing it as
-     * high up in the render tree as possible to ensure that any
-     * components using that hook or those components will function
-     * correctly.
+     * `RenderStateRoot` is responsible for tracking whether it's the initial
+     * render or subsequent renders.  It's used by `WithSSRPlaceholder`.  We're
+     * placing it as high up in the render tree as possible to ensure that any
+     * components using that hook or those components will function correctly.
      */
     const children = (
         <RenderStateRoot throwIfNested={false}>{element}</RenderStateRoot>

packages/perseus/src/widgets/dropdown/__snapshots__/dropdown.test.ts.snap

@@ -32,14 +32,14 @@ exports[`Dropdown widget should snapshot when opened: dropdown open 1`] = `
                 3 items
               </span>
               <button
-                aria-controls=":r2:"
+                aria-controls=":r4:"
                 aria-disabled="false"
                 aria-expanded="true"
                 aria-haspopup="listbox"
                 aria-invalid="false"
                 aria-label="Select an answer"
                 class="button_vr44p2-o_O-shared_u51dsh-o_O-default_3ie67y"
-                id="uid-dropdown-widget-1-dropdown"
+                id=":r3:"
                 role="combobox"
                 type="button"
               >
@@ -105,14 +105,14 @@ exports[`Dropdown widget should snapshot: initial render 1`] = `
                 data-testid="dropdown-live-region"
               />
               <button
-                aria-controls=":r0:"
+                aria-controls=":r1:"
                 aria-disabled="false"
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 aria-invalid="false"
                 aria-label="Select an answer"
                 class="button_vr44p2-o_O-shared_u51dsh-o_O-default_3ie67y"
-                id="uid-dropdown-widget-0-dropdown"
+                id=":r0:"
                 role="combobox"
                 type="button"
               >

packages/perseus/src/widgets/dropdown/dropdown.tsx

@@ -1,4 +1,4 @@
-import {UniqueIDProvider, View} from "@khanacademy/wonder-blocks-core";
+import {Id, View} from "@khanacademy/wonder-blocks-core";
 import {SingleSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
 import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import * as React from "react";
@@ -86,10 +86,8 @@ class Dropdown extends React.Component<Props> implements Widget {
         ];
 
         return (
-            // TODO(WB-1812, somewhatabstract): Migrate to Id or useId
-            // eslint-disable-next-line no-restricted-syntax
-            <UniqueIDProvider scope="dropdown-widget" mockOnFirstRender={true}>
-                {(ids) => (
+            <Id>
+                {(dropdownId) => (
                     <View
                         // NOTE(jared): These are required to prevent weird behavior
                         // When there's a dropdown in a zoomable table.
@@ -101,15 +99,12 @@ class Dropdown extends React.Component<Props> implements Widget {
                         }}
                     >
                         {this.props.visibleLabel && (
-                            <LabelLarge
-                                tag="label"
-                                htmlFor={ids.get("dropdown")}
-                            >
+                            <LabelLarge tag="label" htmlFor={dropdownId}>
                                 {this.props.visibleLabel}
                             </LabelLarge>
                         )}
                         <SingleSelect
-                            id={ids.get("dropdown")}
+                            id={dropdownId}
                             placeholder=""
                             onChange={(value) =>
                                 this._handleChange(parseInt(value))
@@ -131,7 +126,7 @@ class Dropdown extends React.Component<Props> implements Widget {
                         </SingleSelect>
                     </View>
                 )}
-            </UniqueIDProvider>
+            </Id>
         );
     }
 }

packages/perseus/src/widgets/explanation/__snapshots__/explanation.test.ts.snap

@@ -18,7 +18,7 @@ exports[`Explanation should snapshot when expanded: expanded 1`] = `
           class="perseus-widget-container widget-nohighlight widget-inline"
         >
           <button
-            aria-controls="uid-explanation-widget-1-content"
+            aria-controls=":r1:"
             aria-disabled="false"
             aria-expanded="true"
             class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1hl5pu8-o_O-small_14crccx-o_O-inlineStyles_1s8anjv"
@@ -43,7 +43,7 @@ exports[`Explanation should snapshot when expanded: expanded 1`] = `
             aria-hidden="false"
             class="default_xu2jcg-o_O-content_1pprw9s-o_O-contentExpanded_1ojyq0m"
             data-testid="content-container"
-            id="uid-explanation-widget-1-content"
+            id=":r1:"
           >
             <div
               class="default_xu2jcg-o_O-contentWrapper_y9ev9r"
@@ -91,7 +91,7 @@ exports[`Explanation should snapshot: initial render 1`] = `
           class="perseus-widget-container widget-nohighlight widget-inline"
         >
           <button
-            aria-controls="uid-explanation-widget-0-content"
+            aria-controls=":r0:"
             aria-disabled="false"
             aria-expanded="false"
             class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1hl5pu8-o_O-small_14crccx-o_O-inlineStyles_1s8anjv"
@@ -116,7 +116,7 @@ exports[`Explanation should snapshot: initial render 1`] = `
             aria-hidden="true"
             class="default_xu2jcg-o_O-content_1pprw9s-o_O-contentCollapsed_j2403j"
             data-testid="content-container"
-            id="uid-explanation-widget-0-content"
+            id=":r0:"
           >
             <div
               class="default_xu2jcg-o_O-contentWrapper_y9ev9r"

packages/perseus/src/widgets/explanation/explanation.tsx

@@ -1,6 +1,6 @@
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import Button from "@khanacademy/wonder-blocks-button";
-import {UniqueIDProvider, View} from "@khanacademy/wonder-blocks-core";
+import {Id, View} from "@khanacademy/wonder-blocks-core";
 import caretDown from "@phosphor-icons/core/regular/caret-down.svg";
 import caretUp from "@phosphor-icons/core/regular/caret-up.svg";
 import {StyleSheet} from "aphrodite";
@@ -128,17 +128,12 @@ class Explanation extends React.Component<Props, State> implements Widget {
         ];
 
         return (
-            // TODO(WB-1812, somewhatabstract): Migrate to Id or useId
-            // eslint-disable-next-line no-restricted-syntax
-            <UniqueIDProvider
-                mockOnFirstRender={true}
-                scope="explanation-widget"
-            >
-                {(ids) => (
+            <Id>
+                {(contentId) => (
                     <>
                         <Button
                             aria-expanded={this.state.expanded}
-                            aria-controls={ids.get("content")}
+                            aria-controls={contentId}
                             endIcon={caretIcon}
                             kind="tertiary"
                             labelStyle={labelStyle}
@@ -150,7 +145,7 @@ class Explanation extends React.Component<Props, State> implements Widget {
                         </Button>
 
                         <View
-                            id={ids.get("content")}
+                            id={contentId}
                             style={contentStyling}
                             aria-hidden={!this.state.expanded}
                             testId="content-container"
@@ -167,7 +162,7 @@ class Explanation extends React.Component<Props, State> implements Widget {
                         </View>
                     </>
                 )}
-            </UniqueIDProvider>
+            </Id>
         );
     }
 }