diff --git a/.changeset/rare-bobcats-type.md b/.changeset/rare-bobcats-type.md new file mode 100644 index 0000000000..e6cd2fbfe5 --- /dev/null +++ b/.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 diff --git a/dev/gallery.tsx b/dev/gallery.tsx index c046d31813..8cc1ca65fb 100644 --- a/dev/gallery.tsx +++ b/dev/gallery.tsx @@ -1,6 +1,6 @@ /* 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"; @@ -8,7 +8,7 @@ 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) => { diff --git a/packages/perseus-editor/src/components/widget-editor.tsx b/packages/perseus-editor/src/components/widget-editor.tsx index 5624a9e5b7..51e4cc6cbd 100644 --- a/packages/perseus-editor/src/components/widget-editor.tsx +++ b/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 ( <> diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/labeled-switch.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/labeled-switch.tsx index c376ff7e3f..a9cc08e4e8 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/labeled-switch.tsx +++ b/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 ( diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figures-section.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figures-section.tsx index b6c8400efb..6027306db1 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figures-section.tsx +++ b/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) { diff --git a/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap b/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap index 69a72b9b0f..be700817bd 100644 --- a/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap +++ b/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap @@ -350,7 +350,7 @@ exports[`renderer snapshots correct answer: correct answer 1`] = ` > @@ -365,14 +365,14 @@ exports[`renderer snapshots correct answer: correct answer 1`] = ` data-testid="dropdown-live-region" /> implements Widget { )} - + ); } } diff --git a/packages/perseus/src/widgets/label-image/answer-pill.tsx b/packages/perseus/src/widgets/label-image/answer-pill.tsx index 1d6ce2ccf7..0fcde84664 100644 --- a/packages/perseus/src/widgets/label-image/answer-pill.tsx +++ b/packages/perseus/src/widgets/label-image/answer-pill.tsx @@ -1,8 +1,8 @@ -import {useUniqueIdWithMock} from "@khanacademy/wonder-blocks-core"; import Pill from "@khanacademy/wonder-blocks-pill"; import {color} from "@khanacademy/wonder-blocks-tokens"; import {StyleSheet, type CSSProperties} from "aphrodite"; import * as React from "react"; +import {useId} from "react"; import {Popper} from "react-popper"; import {usePerseusI18n} from "../../components/i18n-context"; @@ -34,9 +34,7 @@ export const AnswerPill = (props: { hovered, } = props; - // TODO(WB-1812, somewhatabstract): Migrate to Id or useId - // eslint-disable-next-line no-restricted-syntax - const idFactory = useUniqueIdWithMock(); + const pillId = useId(); const {strings} = usePerseusI18n(); const answerString = @@ -66,7 +64,7 @@ export const AnswerPill = (props: { ["onChange"]; }) => { - // TODO(WB-1812, somewhatabstract): Migrate to Id or useId - // eslint-disable-next-line no-restricted-syntax - const idFactory = useUniqueIdWithMock(); - const switchId = idFactory.get("hide-answers-toggle"); - const labelId = idFactory.get("hide-answers-label"); + const switchId = useId(); + const labelId = useId(); const {strings} = usePerseusI18n(); return (