@khanacademy/perseus 16.0.0 → 17.1.0

package/dist/perseus-types.d.ts

@@ -36,6 +36,7 @@ export type PerseusAnswerArea = {
     tTable: boolean;
     calculator: boolean;
     periodicTable: boolean;
+    periodicTableWithKey?: boolean;
 };
 type Widget<Type extends string, Options> = {
     type: Type;

package/dist/server-item-renderer.d.ts

@@ -1,3 +1,4 @@
+import * as PerseusLinter from "@khanacademy/perseus-linter";
 /**
  * A copy of the ItemRenderer which renders its question renderer and hints
  * renderer normally instead of ReactDOM.render()ing them into elements in the
@@ -8,18 +9,18 @@
  */
 import * as React from "react";
 import Renderer from "./renderer";
-import type { KeypadProps } from "./mixins/provide-keypad";
 import type { APIOptions, FocusPath, PerseusDependenciesV2 } from "./types";
 import type { KeypadAPI } from "@khanacademy/math-input";
 import type { KeypadContextRendererInterface, RendererInterface, KEScore } from "@khanacademy/perseus-core";
-type OwnProps = // These props are used by the ProvideKeypad mixin.
-KeypadProps & {
+import type { LinterContextProps } from "@khanacademy/perseus-linter";
+type OwnProps = {
     apiOptions: APIOptions;
     hintsVisible?: number;
     item: {
         hints: ReadonlyArray<any>;
         question: any;
     };
+    linterContext: LinterContextProps;
     problemNum?: number;
     reviewMode?: boolean;
     keypadElement?: KeypadAPI | null | undefined;
@@ -32,6 +33,7 @@ type Props = OwnProps & HOCProps;
 type DefaultProps = {
     apiOptions: Props["apiOptions"];
     onRendered: Props["onRendered"];
+    linterContext: Props["linterContext"];
 };
 type State = {
     questionCompleted: boolean;
@@ -102,16 +104,41 @@ export declare class ServerItemRenderer extends React.Component<Props, State> im
     setAssetStatus: (assetKey: string, status: boolean) => void;
     render(): React.ReactNode;
 }
-declare const ref: React.ForwardRefExoticComponent<Omit<KeypadProps & {
-    apiOptions: APIOptions;
-    hintsVisible?: number | undefined;
-    item: {
-        hints: ReadonlyArray<any>;
-        question: any;
-    };
-    problemNum?: number | undefined;
-    reviewMode?: boolean | undefined;
-    keypadElement?: KeypadAPI | null | undefined;
-    dependencies: PerseusDependenciesV2;
-} & HOCProps, "onRendered"> & React.RefAttributes<ServerItemRenderer>>;
+declare const ref: React.ForwardRefExoticComponent<Omit<Pick<OwnProps & HOCProps, "item" | "problemNum" | "reviewMode" | "keypadElement" | "hintsVisible" | "dependencies"> & {
+    linterContext?: PerseusLinter.LinterContextProps | undefined;
+    apiOptions?: Readonly<{
+        isArticle?: boolean | undefined;
+        onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
+        onFocusChange?: ((newFocusPath: FocusPath, oldFocusPath: FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+        GroupMetadataEditor?: React.ComponentType<any> | undefined;
+        showAlignmentOptions?: boolean | undefined;
+        readOnly?: boolean | undefined;
+        answerableCallback?: ((arg1: boolean) => unknown) | undefined;
+        getAnotherHint?: (() => unknown) | undefined;
+        interactionCallback?: (() => unknown) | undefined;
+        groupAnnotator?: ((groupNumber: number, widgetId: string) => React.ReactNode) | undefined;
+        imagePlaceholder?: React.ReactNode;
+        widgetPlaceholder?: React.ReactNode;
+        baseElements?: {
+            Link: React.ComponentType<any>;
+        } | undefined;
+        imagePreloader?: ((dimensions: import("./types").Dimensions) => React.ReactNode) | undefined;
+        trackInteraction?: ((args: {
+            type: string;
+            id: string;
+            correct?: boolean | undefined;
+        } & Partial<import("./types").TrackingGradedGroupExtraArguments> & Partial<import("./types").TrackingSequenceExtraArguments>) => void) | undefined;
+        customKeypad?: boolean | undefined;
+        nativeKeypadProxy?: ((blur: () => void) => KeypadAPI) | undefined;
+        isMobile?: boolean | undefined;
+        setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
+        useDraftEditor?: boolean | undefined;
+        hintProgressColor?: string | undefined;
+        canScrollPage?: boolean | undefined;
+        inModal?: boolean | undefined;
+        crossOutEnabled?: boolean | undefined;
+        editorChangeDelay?: number | undefined;
+    }> | undefined;
+    onRendered?: ((isRendered: boolean) => void) | undefined;
+} & {}, "onRendered"> & React.RefAttributes<ServerItemRenderer>>;
 export default ref;

package/dist/strings.js

@@ -20,6 +20,7 @@ module.exports = [
     i18n.$_("[Marker for question %(number)s]", {}),
     i18n.$_("[Sentence %(number)s]", {}),
     i18n._("**Your answer should be** ", {}),
+    i18n.ngettext("%(num)s answer","%(num)s answers", {}),
     i18n._("a *proper* fraction, like $1/2$ or $6/10$", {}),
     i18n._("a *simplified improper* fraction, like $7/4$", {}),
     i18n._("a *simplified proper* fraction, like $3/5$", {}),
@@ -53,8 +54,6 @@ module.exports = [
     i18n._("Correct (but you crossed it out)", {}),
     i18n._("Correct (selected)", {}),
     i18n._("Correct!", {}),
-    i18n._("Cosine", {}),
-    i18n._("Cube root", {}),
     i18n._("Current", {}),
     // I18N: As in the command, "Dilate the polygon"
     i18n._("Dilate", {}),
@@ -62,19 +61,13 @@ module.exports = [
     i18n._("Dilation", {}),
     i18n.$_("Dilation about %(point)s by %(scale)s", {}),
     i18n.$_("Dilation of scale %(scale)s about %(point)s", {}),
-    i18n._("Divide", {}),
     i18n._("Drag handles to make graph", {}),
     i18n._("End of reading passage.", {}),
     i18n._("entered in an invalid answer.", {}),
-    i18n._("Equals sign", {}),
     i18n.$_("Error rendering: %(error)s", {}),
     i18n._("Explain", {}),
-    i18n._("Exponent", {}),
     i18n._("False", {}),
-    i18n._("Fraction, excluding the current expression", {}),
     i18n._("Get another hint", {}),
-    i18n._("Greater than or equal to sign", {}),
-    i18n._("Greater than sign", {}),
     i18n._("Hide answer choices", {}),
     i18n._("Hide explanation", {}),
     i18n._("Hint #%(pos)s", {}),
@@ -87,38 +80,27 @@ module.exports = [
     i18n._("It looks like you left something blank or ", {}),
     i18n._("Keep trying", {}),
     i18n._("Khan Academy video wrapper", {}),
-    i18n._("Less than or equal to sign", {}),
-    i18n._("Less than sign", {}),
     // I18N: a label next to a reading passage to denote the line number
     i18n._("Line ", {}),
     i18n.$_("line %(lineNumber)s", {}),
     i18n.$_("lines %(lineRange)s", {}),
     i18n._("Loading...", {}),
-    i18n._("Logarithm with base 10", {}),
-    i18n._("Logarithm with custom base", {}),
     i18n._("Make circle filled", {}),
     i18n._("Make circle open", {}),
     i18n._("Make sure you fill in all cells in the matrix.", {}),
     i18n._("Make sure you select something for every row.", {}),
-    i18n._("Minus", {}),
     i18n.ngettext("Moves: %(num)s","Moves: %(num)s", {}),
-    i18n._("Multiply", {}),
-    i18n._("Natural logarithm", {}),
     i18n._("Next question", {}),
     i18n._("No", {}),
     i18n._("None of the above", {}),
-    i18n._("Not-equals sign", {}),
     i18n._("Note: For this question, the shape will not move.", {}),
     i18n._("Number of divisions:", {}),
     i18n._("Number of trials:", {}),
     i18n._("Oops!", {}),
     i18n._("open math keypad", {}),
     i18n._("Parameter", {}),
-    i18n._("Phi", {}),
-    i18n._("Pi", {}),
     i18n._("Please choose the correct number of answers.", {}),
     i18n.$_("Please make sure the number of divisions is in the range %(divRangeString)s.", {}),
-    i18n._("Plus", {}),
     i18n._("Reaction arrow pointing to the right.", {}),
     // I18N: As in the command, "Reflect the polygon"
     i18n._("Reflect", {}),
@@ -136,19 +118,15 @@ module.exports = [
     i18n._("Run simulation", {}),
     i18n._("Sample size:", {}),
     i18n._("See video transcript", {}),
-    i18n._("Sine", {}),
     i18n._("Skip to %(title)s", {}),
     i18n._("Something went wrong.", {}),
     i18n._("Sorry, I don't understand that!", {}),
-    i18n._("Square root", {}),
     i18n._("Switch direction", {}),
-    i18n._("Tangent", {}),
     i18n._("Tap each dot on the image to select all answers that apply.", {}),
     i18n._("Tap each dot on the image to select an answer.", {}),
     i18n._("Tap to add points", {}),
     i18n._("That answer is numerically incorrect.", {}),
     i18n._("The symbol %(questionSymbol)s indicates that question %(questionNumber)s references this portion of the passage.", {}),
-    i18n._("Theta", {}),
     i18n._("This controls the proportion or percentage that will be used in your simulation.", {}),
     i18n._("This controls the sample size that will be used in your simulation. For example, if you set this to 100, then for each trial, responses from 100 participants will be simulated.", {}),
     i18n._("This is the number of trials used in the simulation. For example, if set to 50, then the survey will be conducted 50 times.", {}),

package/dist/widgets/label-image/answer-pill.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { type CSSProperties } from "aphrodite";
+export declare const AnswerPill: (props: {
+    selectedAnswers: readonly string[];
+    showCorrectness?: "correct" | "incorrect";
+    markerRef?: HTMLElement;
+    side: "top" | "bottom" | "left" | "right";
+    onClick: () => void;
+    style?: CSSProperties;
+}) => JSX.Element;

package/dist/widgets/label-image/hide-answers-toggle.d.ts

@@ -0,0 +1,6 @@
+import Switch from "@khanacademy/wonder-blocks-switch";
+import * as React from "react";
+export declare const HideAnswersToggle: (props: {
+    areAnswersHidden: boolean;
+    onChange: React.ComponentPropsWithoutRef<typeof Switch>["onChange"];
+}) => JSX.Element;

package/dist/widgets/label-image/marker.d.ts

@@ -8,20 +8,17 @@ import type { InteractiveMarkerType } from "./types";
 type Props = InteractiveMarkerType & {
     showSelected: boolean;
     showPulsate: boolean;
-    onClick: (e: MouseEvent) => void;
-    onKeyDown: (e: KeyboardEvent) => void;
+    onClick: (e: React.MouseEvent) => void;
+    onKeyDown: (e: React.KeyboardEvent) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    focused: boolean;
 };
-type State = {
-    isFocused: boolean;
-};
-export default class Marker extends React.Component<Props, State> {
+export default class Marker extends React.Component<Props> {
     _icon: HTMLElement | null | undefined;
     static defaultProps: {
         selected: ReadonlyArray<any>;
     };
-    state: State;
-    handleFocus(): void;
-    handleBlur(): void;
     renderIcon(): React.ReactElement<React.ComponentProps<"div">>;
     render(): React.ReactNode;
 }

package/dist/widgets/label-image/types.d.ts

@@ -7,6 +7,7 @@ export type MarkerType = {
 export type InteractiveMarkerType = MarkerType & {
     selected?: ReadonlyArray<string>;
     showCorrectness?: "correct" | "incorrect";
+    focused?: boolean;
 };
 export type InteractiveMarkerScore = {
     hasAnswers: boolean;

package/dist/widgets/label-image.d.ts

@@ -10,8 +10,10 @@ import * as React from "react";
 import AnswerChoices from "./label-image/answer-choices";
 import Marker from "./label-image/marker";
 import type { InteractiveMarkerType, InteractiveMarkerScore } from "./label-image/types";
+import type { DependencyProps } from "../dependencies";
 import type { ChangeableProps } from "../mixins/changeable";
 import type { APIOptions, PerseusScore } from "../types";
+export type PreferredPopoverDirection = "NONE" | "UP" | "DOWN" | "LEFT" | "RIGHT";
 type MarkersState = {
     markers: ReadonlyArray<InteractiveMarkerType>;
 };
@@ -33,7 +35,7 @@ type Point = {
     x: number;
     y: number;
 };
-type LabelImageProps = ChangeableProps & {
+type LabelImageProps = ChangeableProps & DependencyProps & {
     apiOptions: APIOptions;
     choices: ReadonlyArray<string>;
     imageAlt: string;
@@ -44,12 +46,15 @@ type LabelImageProps = ChangeableProps & {
     multipleAnswers: boolean;
     hideChoicesFromInstructions: boolean;
     questionCompleted: boolean;
+    preferredPopoverDirection?: PreferredPopoverDirection;
 };
 type LabelImageState = {
-    selectedMarkerIndex: number;
+    activeMarkerIndex: number;
     markersInteracted: boolean;
+    focusedMarkerIndex: number;
+    hideAnswers: boolean;
 };
-declare class LabelImage extends React.Component<LabelImageProps, LabelImageState> {
+export declare class LabelImage extends React.Component<LabelImageProps, LabelImageState> {
     _markers: Array<Marker | null | undefined>;
     _selectedMarkerPopup: Popover | null | undefined;
     _answerChoices: AnswerChoices | null | undefined;
@@ -64,7 +69,7 @@ declare class LabelImage extends React.Component<LabelImageProps, LabelImageStat
     /**
      * Determine the image side given a marker position (as percent of size).
      */
-    static imageSideForMarkerPosition(x: number, y: number): "bottom" | "left" | "right" | "top" | "center";
+    static imageSideForMarkerPosition(x: number, y: number, preferredDirection: PreferredPopoverDirection | undefined): "bottom" | "left" | "right" | "top" | "center";
     /**
      * Calculate the next marker to navigate to, from the "this marker".
      *
@@ -73,17 +78,13 @@ declare class LabelImage extends React.Component<LabelImageProps, LabelImageStat
      */
     static navigateToMarkerIndex(navigateDirection: Direction, markers: ReadonlyArray<InteractiveMarkerType>, thisIndex: number): number;
     constructor(props: LabelImageProps);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
     simpleValidate(rubric: LabelImageProps): PerseusScore;
     getUserInput(): MarkersState;
     showRationalesForCurrentlySelectedChoices(rubric: LabelImageProps): void;
     dismissMarkerPopup(): void;
-    handleDocumentClick: (e: MouseEvent) => void;
-    handleDocumentKeyDown: (e: KeyboardEvent) => void;
     handleMarkerChange(index: number, marker: InteractiveMarkerType): void;
-    handleMarkerClick(index: number, e: MouseEvent): void;
-    handleMarkerKeyDown(index: number, e: KeyboardEvent): void;
+    activateMarker(index: number): void;
+    handleMarkerKeyDown(index: number, e: React.KeyboardEvent): void;
     handleAnswerChoicesChangeForMarker(index: number, selection: ReadonlyArray<boolean>): void;
     renderAnswerChoicesForMarker(index: number, marker: InteractiveMarkerType): React.ReactElement<React.ComponentProps<"div">>;
     renderMarkers(): ReadonlyArray<React.ReactNode>;
@@ -93,7 +94,51 @@ declare class LabelImage extends React.Component<LabelImageProps, LabelImageStat
 declare const _default: Readonly<{
     name: string;
     displayName: string;
-    getWidget?: (() => typeof LabelImage) | undefined;
+    getWidget?: (() => React.ForwardRefExoticComponent<Omit<ChangeableProps & Partial<import("../types").PerseusDependenciesV2> & {
+        apiOptions: Readonly<{
+            isArticle?: boolean | undefined;
+            onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            GroupMetadataEditor?: React.ComponentType<any> | undefined;
+            showAlignmentOptions?: boolean | undefined;
+            readOnly?: boolean | undefined;
+            answerableCallback?: ((arg1: boolean) => unknown) | undefined;
+            getAnotherHint?: (() => unknown) | undefined;
+            interactionCallback?: (() => unknown) | undefined;
+            groupAnnotator?: ((groupNumber: number, widgetId: string) => React.ReactNode) | undefined;
+            imagePlaceholder?: React.ReactNode;
+            widgetPlaceholder?: React.ReactNode;
+            baseElements?: {
+                Link: React.ComponentType<any>;
+            } | undefined;
+            imagePreloader?: ((dimensions: import("../types").Dimensions) => React.ReactNode) | undefined;
+            trackInteraction?: ((args: {
+                type: string;
+                id: string;
+                correct?: boolean | undefined;
+            } & Partial<import("../types").TrackingGradedGroupExtraArguments> & Partial<import("../types").TrackingSequenceExtraArguments>) => void) | undefined;
+            customKeypad?: boolean | undefined;
+            nativeKeypadProxy?: ((blur: () => void) => import("@khanacademy/math-input").KeypadAPI) | undefined;
+            isMobile?: boolean | undefined;
+            setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
+            useDraftEditor?: boolean | undefined;
+            hintProgressColor?: string | undefined;
+            canScrollPage?: boolean | undefined;
+            inModal?: boolean | undefined;
+            crossOutEnabled?: boolean | undefined;
+            editorChangeDelay?: number | undefined;
+        }>;
+        choices: readonly string[];
+        imageAlt: string;
+        imageUrl: string;
+        imageWidth: number;
+        imageHeight: number;
+        markers: readonly InteractiveMarkerType[];
+        multipleAnswers: boolean;
+        hideChoicesFromInstructions: boolean;
+        questionCompleted: boolean;
+        preferredPopoverDirection?: PreferredPopoverDirection | undefined;
+    }, "analytics"> & React.RefAttributes<LabelImage>>) | undefined;
     accessible?: boolean | ((props: any) => boolean) | undefined;
     hidden?: boolean | undefined;
     version?: import("../types").Version | undefined;
@@ -108,6 +153,50 @@ declare const _default: Readonly<{
     propUpgrades?: {
         [key: string]: (arg1: any) => any;
     } | undefined;
-    widget: typeof LabelImage;
+    widget: React.ForwardRefExoticComponent<Omit<ChangeableProps & Partial<import("../types").PerseusDependenciesV2> & {
+        apiOptions: Readonly<{
+            isArticle?: boolean | undefined;
+            onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            GroupMetadataEditor?: React.ComponentType<any> | undefined;
+            showAlignmentOptions?: boolean | undefined;
+            readOnly?: boolean | undefined;
+            answerableCallback?: ((arg1: boolean) => unknown) | undefined;
+            getAnotherHint?: (() => unknown) | undefined;
+            interactionCallback?: (() => unknown) | undefined;
+            groupAnnotator?: ((groupNumber: number, widgetId: string) => React.ReactNode) | undefined;
+            imagePlaceholder?: React.ReactNode;
+            widgetPlaceholder?: React.ReactNode;
+            baseElements?: {
+                Link: React.ComponentType<any>;
+            } | undefined;
+            imagePreloader?: ((dimensions: import("../types").Dimensions) => React.ReactNode) | undefined;
+            trackInteraction?: ((args: {
+                type: string;
+                id: string;
+                correct?: boolean | undefined;
+            } & Partial<import("../types").TrackingGradedGroupExtraArguments> & Partial<import("../types").TrackingSequenceExtraArguments>) => void) | undefined;
+            customKeypad?: boolean | undefined;
+            nativeKeypadProxy?: ((blur: () => void) => import("@khanacademy/math-input").KeypadAPI) | undefined;
+            isMobile?: boolean | undefined;
+            setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
+            useDraftEditor?: boolean | undefined;
+            hintProgressColor?: string | undefined;
+            canScrollPage?: boolean | undefined;
+            inModal?: boolean | undefined;
+            crossOutEnabled?: boolean | undefined;
+            editorChangeDelay?: number | undefined;
+        }>;
+        choices: readonly string[];
+        imageAlt: string;
+        imageUrl: string;
+        imageWidth: number;
+        imageHeight: number;
+        markers: readonly InteractiveMarkerType[];
+        multipleAnswers: boolean;
+        hideChoicesFromInstructions: boolean;
+        questionCompleted: boolean;
+        preferredPopoverDirection?: PreferredPopoverDirection | undefined;
+    }, "analytics"> & React.RefAttributes<LabelImage>>;
 }>;
 export default _default;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "16.0.0",
+    "version": "17.1.0",
     "publishConfig": {
         "access": "public"
     },
@@ -22,33 +22,36 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/kas": "^0.3.6",
-        "@khanacademy/kmath": "^0.1.7",
-        "@khanacademy/math-input": "^16.1.0",
-        "@khanacademy/perseus-core": "1.4.0",
-        "@khanacademy/perseus-linter": "^0.3.9",
-        "@khanacademy/pure-markdown": "^0.2.12",
-        "@khanacademy/simple-markdown": "^0.11.1"
+        "@khanacademy/kas": "^0.3.7",
+        "@khanacademy/kmath": "^0.1.8",
+        "@khanacademy/math-input": "^16.1.2",
+        "@khanacademy/perseus-core": "1.4.1",
+        "@khanacademy/perseus-linter": "^0.3.10",
+        "@khanacademy/pure-markdown": "^0.2.13",
+        "@khanacademy/simple-markdown": "^0.11.2"
     },
     "devDependencies": {
-        "@khanacademy/wonder-blocks-button": "^6.2.2",
+        "@khanacademy/wonder-blocks-button": "^6.2.4",
         "@khanacademy/wonder-blocks-clickable": "^4.0.11",
         "@khanacademy/wonder-blocks-color": "^3.0.0",
         "@khanacademy/wonder-blocks-core": "^6.3.0",
         "@khanacademy/wonder-blocks-data": "^13.0.5",
-        "@khanacademy/wonder-blocks-dropdown": "^3.1.8",
-        "@khanacademy/wonder-blocks-form": "^4.3.16",
+        "@khanacademy/wonder-blocks-dropdown": "^4.0.0",
+        "@khanacademy/wonder-blocks-form": "^4.3.18",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
         "@khanacademy/wonder-blocks-layout": "^2.0.24",
-        "@khanacademy/wonder-blocks-link": "^6.0.2",
-        "@khanacademy/wonder-blocks-modal": "^4.0.35",
-        "@khanacademy/wonder-blocks-popover": "^3.0.16",
+        "@khanacademy/wonder-blocks-link": "^6.0.4",
+        "@khanacademy/wonder-blocks-modal": "^4.0.38",
+        "@khanacademy/wonder-blocks-pill": "^1.0.14",
+        "@khanacademy/wonder-blocks-popover": "^3.0.19",
         "@khanacademy/wonder-blocks-progress-spinner": "^2.0.24",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-        "@khanacademy/wonder-blocks-tooltip": "^2.1.18",
+        "@khanacademy/wonder-blocks-switch": "^1.1.8",
+        "@khanacademy/wonder-blocks-tooltip": "^2.1.21",
         "@khanacademy/wonder-blocks-typography": "^2.1.9",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "@phosphor-icons/core": "^2.0.2",
+        "@popperjs/core": "^2.10.1",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",
@@ -63,27 +66,31 @@
         "prop-types": "^15.6.1",
         "react": "16.14.0",
         "react-dom": "16.14.0",
+        "react-popper": "^2.0.0",
         "underscore": "^1.4.4"
     },
     "peerDependencies": {
-        "@khanacademy/wonder-blocks-button": "^6.2.2",
+        "@khanacademy/wonder-blocks-button": "^6.2.4",
         "@khanacademy/wonder-blocks-clickable": "^4.0.11",
         "@khanacademy/wonder-blocks-color": "^3.0.0",
         "@khanacademy/wonder-blocks-core": "^6.3.0",
         "@khanacademy/wonder-blocks-data": "^13.0.5",
-        "@khanacademy/wonder-blocks-dropdown": "^3.1.8",
-        "@khanacademy/wonder-blocks-form": "^4.3.16",
+        "@khanacademy/wonder-blocks-dropdown": "^4.0.0",
+        "@khanacademy/wonder-blocks-form": "^4.3.18",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
         "@khanacademy/wonder-blocks-layout": "^2.0.24",
-        "@khanacademy/wonder-blocks-link": "^6.0.2",
-        "@khanacademy/wonder-blocks-modal": "^4.0.35",
-        "@khanacademy/wonder-blocks-popover": "^3.0.16",
+        "@khanacademy/wonder-blocks-link": "^6.0.4",
+        "@khanacademy/wonder-blocks-modal": "^4.0.38",
+        "@khanacademy/wonder-blocks-pill": "^1.0.14",
+        "@khanacademy/wonder-blocks-popover": "^3.0.19",
         "@khanacademy/wonder-blocks-progress-spinner": "^2.0.24",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-        "@khanacademy/wonder-blocks-tooltip": "^2.1.18",
+        "@khanacademy/wonder-blocks-switch": "^1.1.8",
+        "@khanacademy/wonder-blocks-tooltip": "^2.1.21",
         "@khanacademy/wonder-blocks-typography": "^2.1.9",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "@phosphor-icons/core": "^2.0.2",
+        "@popperjs/core": "^2.10.1",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",
@@ -93,6 +100,7 @@
         "prop-types": "^15.6.1",
         "react": "16.14.0",
         "react-dom": "16.14.0",
+        "react-popper": "^2.0.0",
         "underscore": "^1.4.4"
     },
     "keywords": []

package/src/__stories__/server-item-renderer.stories.tsx

@@ -1,10 +1,13 @@
 import * as React from "react";
 
 import {ServerItemRendererWithDebugUI} from "../../../../testing/server-item-renderer-with-debug-ui";
+import {testDependenciesV2} from "../../../../testing/test-dependencies";
 import {
     itemWithInput,
+    itemWithLintingError,
     labelImageItem,
-} from "../__testdata__/item-renderer.testdata";
+} from "../__testdata__/server-item-renderer.testdata";
+import {ServerItemRenderer} from "../server-item-renderer";
 
 type StoryArgs = Record<any, any>;
 
@@ -23,3 +26,19 @@ export const InputNumberItem = (args: StoryArgs): React.ReactElement => {
 export const LabelImageItem = (args: StoryArgs): React.ReactElement => {
     return <ServerItemRendererWithDebugUI item={labelImageItem} />;
 };
+
+export const WithLintingError = (args: StoryArgs): React.ReactElement => {
+    return (
+        <ServerItemRenderer
+            problemNum={0}
+            item={itemWithLintingError}
+            dependencies={testDependenciesV2}
+            linterContext={{
+                contentType: "",
+                highlightLint: true,
+                paths: [],
+                stack: [],
+            }}
+        />
+    );
+};