@khanacademy/perseus 4.0.2 → 5.0.0

package/src/components/highlighting/highlightable-content.tsx

@@ -31,7 +31,7 @@ import type {
     DOMRange,
 } from "./types";
 
-type HighlightableContentProps = {
+type Props = {
     // The highlightable content itself. Highlights will be defined relative to
     // the content specified here.
     children?: React.ReactElement<any>;
@@ -57,21 +57,18 @@ type HighlightableContentProps = {
     serializedHighlights: SerializedHighlightSet;
 };
 
-type HighlightableContentState = {
+type State = {
     // A cached list of DOMRanges, each representing one of the content's
     // semantic words. Sorted in document order.
     wordRanges: ReadonlyArray<DOMRange>;
 };
 
-class HighlightableContent extends React.PureComponent<
-    HighlightableContentProps,
-    HighlightableContentState
-> {
+class HighlightableContent extends React.PureComponent<Props, State> {
     // References to the mounted container and content divs.
     _container: HTMLElement | null | undefined;
     _content: HTMLElement | null | undefined;
 
-    state: HighlightableContentState = {
+    state: State = {
         wordRanges: [],
     };
 

package/src/components/highlighting/ui/highlight-renderer.tsx

@@ -21,7 +21,7 @@ import {
 
 import type {DOMHighlight, Position, Rect, ZIndexes} from "./types";
 
-type HighlightRendererProps = {
+type Props = {
     // The DOMHighlight to render.
     highlight: DOMHighlight;
     // A unique key corresponding to the given `highlight`.
@@ -36,7 +36,7 @@ type HighlightRendererProps = {
     zIndexes: ZIndexes;
 };
 
-type HighlightRendererState = {
+type State = {
     // The set of rectangles that cover this highlight's content, relative to
     // the offset parent. This cache is updated on mount and on changes to
     // the `highlight` and `offsetParent` props.
@@ -50,17 +50,14 @@ type HighlightRendererState = {
     cachedHighlightRects: ReadonlyArray<Rect>;
 };
 
-class HighlightRenderer extends React.PureComponent<
-    HighlightRendererProps,
-    HighlightRendererState
-> {
-    state: HighlightRendererState = {
+class HighlightRenderer extends React.PureComponent<Props, State> {
+    state: State = {
         cachedHighlightRects: this._computeRects(this.props),
         // @ts-expect-error [FEI-5003] - TS2322 - Type '{ cachedHighlightRects: readonly Rect[]; tooltipIsHovered: boolean; }' is not assignable to type 'HighlightRendererState'.
         tooltipIsHovered: false,
     };
 
-    UNSAFE_componentWillReceiveProps(nextProps: HighlightRendererProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: Props) {
         if (
             this.props.highlight !== nextProps.highlight ||
             this.props.offsetParent !== nextProps.offsetParent
@@ -76,7 +73,7 @@ class HighlightRenderer extends React.PureComponent<
      * coordinates relative to the offset parent. That way, we can use them
      * for CSS positioning.
      */
-    _computeRects(props: HighlightRendererProps): ReadonlyArray<Rect> {
+    _computeRects(props: Props): ReadonlyArray<Rect> {
         const {highlight, offsetParent} = props;
 
         // Get the set of rectangles that covers the range's text, relative to

package/src/components/highlighting/ui/highlight-set-renderer.tsx

@@ -15,7 +15,7 @@ import HighlightTooltip from "./highlight-tooltip";
 
 import type {DOMHighlightSet, Position, ZIndexes} from "./types";
 
-type HighlightSetRendererProps = {
+type Props = {
     // Whether the highlights are user-editable. If false, highlights are
     // read-only.
     editable: boolean;
@@ -33,7 +33,7 @@ type HighlightSetRendererProps = {
     // highlights below content.
     zIndexes: ZIndexes;
 };
-type HighlightSetRendererState = {
+type State = {
     // If the user is currently hovering over a highlight, this field contains
     // its key.
     hoveredHighlightKey: string | null | undefined;
@@ -42,11 +42,8 @@ type HighlightSetRendererState = {
     hoveringTooltipFor: string | null | undefined;
 };
 
-class HighlightSetRenderer extends React.PureComponent<
-    HighlightSetRendererProps,
-    HighlightSetRendererState
-> {
-    state: HighlightSetRendererState = {
+class HighlightSetRenderer extends React.PureComponent<Props, State> {
+    state: State = {
         hoveredHighlightKey: null,
         hoveringTooltipFor: null,
     };
@@ -60,7 +57,7 @@ class HighlightSetRenderer extends React.PureComponent<
         this._updateEditListeners(false, this.props.editable);
     }
 
-    UNSAFE_componentWillReceiveProps(nextProps: HighlightSetRendererProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: Props) {
         this._updateEditListeners(this.props.editable, nextProps.editable);
 
         // If we were previously hovering over a highlight that has been

package/src/components/highlighting/ui/highlight-tooltip.tsx

@@ -23,7 +23,7 @@ import {getRelativeRect} from "./util";
 
 import type {Rect} from "./types";
 
-type HighlightTooltipProps = {
+type Props = {
     label: string;
     onClick: () => unknown;
     onMouseEnter?: () => unknown;
@@ -33,7 +33,7 @@ type HighlightTooltipProps = {
     offsetParent: Element;
 };
 
-class HighlightTooltip extends React.PureComponent<HighlightTooltipProps> {
+class HighlightTooltip extends React.PureComponent<Props> {
     _getFocusRect(): Rect | null | undefined {
         const {focusNode, focusOffset, offsetParent} = this.props;
 

package/src/components/highlighting/ui/highlighting-ui.tsx

@@ -21,7 +21,7 @@ import SelectionTracker from "./selection-tracker";
 import type {TrackedSelection} from "./selection-tracker";
 import type {DOMHighlight, DOMHighlightSet, DOMRange, ZIndexes} from "./types";
 
-type HighlightingUIProps = {
+type Props = {
     // A function that builds a DOMHighlight from the given DOMRange, if
     // possible. If it would not currently be valid to add a highlight over the
     // given DOMRange, returns null.
@@ -49,7 +49,7 @@ type HighlightingUIProps = {
     zIndexes: ZIndexes;
 };
 
-class HighlightingUI extends React.PureComponent<HighlightingUIProps> {
+class HighlightingUI extends React.PureComponent<Props> {
     _handleAddHighlight(highlightToAdd: DOMHighlight) {
         this.props.onAddHighlight(highlightToAdd);
 

package/src/components/highlighting/ui/selection-tracker.tsx

@@ -22,7 +22,7 @@ export type TrackedSelection = {
     proposedHighlight: DOMHighlight;
 };
 
-type SelectionTrackerProps = {
+type Props = {
     // A function that builds a DOMHighlight from the given DOMRange, if
     // possible. If it would not currently be valid to add a highlight over the
     // given DOMRange, returns null.
@@ -38,7 +38,7 @@ type SelectionTrackerProps = {
     enabled: boolean;
 };
 
-type SelectionTrackerState = {
+type State = {
     // The current state of the mouse button. We distinguish between down,
     // down and the selection has changed since going down, and up.
     mouseState: "down" | "down-and-selecting" | "up";
@@ -46,11 +46,8 @@ type SelectionTrackerState = {
     trackedSelection: TrackedSelection | null | undefined;
 };
 
-class SelectionTracker extends React.PureComponent<
-    SelectionTrackerProps,
-    SelectionTrackerState
-> {
-    state: SelectionTrackerState = {
+class SelectionTracker extends React.PureComponent<Props, State> {
+    state: State = {
         mouseState: "up",
         trackedSelection: null,
     };
@@ -59,7 +56,7 @@ class SelectionTracker extends React.PureComponent<
         this._updateListeners(false, this.props.enabled);
     }
 
-    componentDidUpdate(prevProps: SelectionTrackerProps) {
+    componentDidUpdate(prevProps: Props) {
         if (this.props.buildHighlight !== prevProps.buildHighlight) {
             // The highlight-building function changed, so the
             // proposedHighlight we built with it might be different, or no

package/src/components/highlighting/word-indexer.tsx

@@ -18,7 +18,7 @@ import {PerseusError} from "../../perseus-error";
 
 import type {DOMRange} from "./types";
 
-type WordIndexerProps = {
+type Props = {
     // The content to display and traverse in search of words.
     children?: React.ReactElement<any>;
     // After each mount and update, this callback is called with the list of
@@ -26,7 +26,7 @@ type WordIndexerProps = {
     onWordsUpdate: (wordRanges: ReadonlyArray<DOMRange>) => unknown;
 };
 
-class WordIndexer extends React.PureComponent<WordIndexerProps> {
+class WordIndexer extends React.PureComponent<Props> {
     _container: HTMLElement | null | undefined;
     /* eslint-enable react/sort-comp */
 

package/src/components/inline-icon.tsx

@@ -26,13 +26,13 @@
 import PropTypes from "prop-types";
 import * as React from "react";
 
-const InlineIcon: React.FC<InlineIconProps> = ({
+const InlineIcon = ({
     path,
     width,
     height,
     style = {},
     title,
-}): React.ReactElement => (
+}: InlineIconProps): React.ReactElement => (
     <svg
         role="img"
         aria-hidden={!title}

package/src/components/simple-keypad-input.tsx

@@ -17,6 +17,8 @@ import PropTypes from "prop-types";
 import * as React from "react";
 
 export default class SimpleKeypadInput extends React.Component<any> {
+    _isMounted = false;
+
     componentDidMount() {
         // TODO(scottgrant): This is a hack to remove the deprecated call to
         // this.isMounted() but is still considered an anti-pattern.
@@ -27,8 +29,6 @@ export default class SimpleKeypadInput extends React.Component<any> {
         this._isMounted = false;
     }
 
-    _isMounted = false;
-
     focus() {
         // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
         this.refs.input.focus(); // eslint-disable-line react/no-string-refs

package/src/components/tex-buttons.tsx

@@ -253,7 +253,7 @@ const buttonSets: ButtonSets = {
 
 export type ButtonSetsType = ReadonlyArray<keyof typeof buttonSets>;
 
-type TexButtonProps = {
+type Props = {
     sets: ButtonSetsType;
     onInsert: (arg1: Inserter) => void;
     className?: string;
@@ -264,7 +264,7 @@ const buttonSetsPropType = PropTypes.arrayOf(
     PropTypes.oneOf(_(buttonSets).keys()),
 );
 
-class TexButtons extends React.Component<TexButtonProps> {
+class TexButtons extends React.Component<Props> {
     static buttonSets: typeof buttonSets = buttonSets;
     static buttonSetsType: any = buttonSetsPropType;
 

package/src/components/visibility-observer/__stories__/visibility-observer.stories.tsx

@@ -136,8 +136,6 @@ class VisibilityTest extends React.Component<Props, State> {
     }
 }
 
-export const AlertWhenNotVisible: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const AlertWhenNotVisible = (args: StoryArgs): React.ReactElement => {
     return <VisibilityTest />;
 };

package/src/error-boundary.tsx

@@ -2,18 +2,15 @@ import * as React from "react";
 
 import {Errors, Log} from "./logging/log";
 
-type ErrorBoundaryProps = {
+type Props = {
     children: React.ReactNode;
 };
-type ErrorBoundaryState = {
+type State = {
     error: string;
 };
 
-class ErrorBoundary extends React.Component<
-    ErrorBoundaryProps,
-    ErrorBoundaryState
-> {
-    constructor(props: ErrorBoundaryProps) {
+class ErrorBoundary extends React.Component<Props, State> {
+    constructor(props: Props) {
         super(props);
         this.state = {error: ""};
     }

package/src/multi-items/__stories__/multi-renderer.stories.tsx

@@ -13,7 +13,7 @@ type Story = {
     title: string;
 };
 
-export const SingleItem: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const SingleItem = (args: StoryArgs): React.ReactElement => {
     const item = {
         _multi: {
             ...question1._multi,

package/src/multi-items/__tests__/multi-renderer.test.tsx

@@ -23,9 +23,8 @@ import type {Item} from "../item-types";
 import type {Tree} from "../tree-types";
 
 // A little helper used in the render callback of a MultiRenderer.
-const SimpleLayout: React.FC<{
-    renderers: any;
-}> = ({renderers}): React.ReactElement => {
+type Props = {renderers: any};
+const SimpleLayout = ({renderers}: Props): React.ReactElement => {
     if (renderers == null) {
         throw new Error("renderers was null");
     }

package/src/perseus-types.ts

@@ -732,9 +732,6 @@ export type PerseusNumericInputWidgetOptions = {
     size: string;
     // A coefficient style number allows the student to use - for -1 and an empty string to mean 1.
     coefficient: boolean;
-    // Whether we're asking for all correct solutions or only one
-    // NOTE: perseus_data.go says this is required even though it isn't necessary.
-    multipleNumberInput?: boolean;
     // Whether to right-align the text or not
     // NOTE: perseus_data.go says this is required even though it isn't necessary.
     rightAlign?: boolean;

package/src/util/graphie.ts

@@ -1034,7 +1034,7 @@ GraphUtils.createGraphie = function (el: any) {
          *                         the function at i
          * @param  {[]} rangeArray array of ranges over which the
          *                         corresponding functions are defined
-         * @return {Raphael set}
+         * @return {Set<any>}      set of paths
          */
         plotPiecewise: function (fnArray, rangeArray) {
             const paths = raphael.set();
@@ -1058,8 +1058,8 @@ GraphUtils.createGraphie = function (el: any) {
          * return a Raphael set of Raphael circle objects at those
          * coordinates
          *
-         * @param  {Array of arrays} endpointArray
-         * @return {Raphael set}
+         * @param  {Array<[number, number]>} endpointArray
+         * @return {Set<any>} set of circles
          */
         plotEndpointCircles: function (endpointArray) {
             const circles = raphael.set();

package/src/widgets/__stories__/categorizer.stories.tsx

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };

package/src/widgets/__stories__/cs-program.stories.tsx

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };

package/src/widgets/__stories__/definition.stories.tsx

@@ -94,18 +94,14 @@ const article = {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };
 
-export const MultipleDefinitions: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const MultipleDefinitions = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question2} />;
 };
 
-export const ArticleDefintion: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ArticleDefintion = (args: StoryArgs): React.ReactElement => {
     return <ArticleRenderer json={article} useNewStyles />;
 };

package/src/widgets/__stories__/dropdown.stories.tsx

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };

package/src/widgets/__stories__/explanation.stories.tsx

@@ -9,10 +9,10 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };
 
-export const Question2: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question2 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question2} />;
 };

package/src/widgets/__stories__/expression.stories.tsx

@@ -45,9 +45,7 @@ const WrappedKeypadContext = (props: WrappedKeypadContextProps) => {
     );
 };
 
-export const DesktopKitchenSink: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const DesktopKitchenSink = (args: StoryArgs): React.ReactElement => {
     const reviewModeRubric = {
         functions: ["f", "g", "h"],
         times: true,
@@ -88,11 +86,11 @@ export const DesktopKitchenSink: React.FC<StoryArgs> = (
     );
 };
 
-export const Desktop: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Desktop = (args: StoryArgs): React.ReactElement => {
     return <WrappedKeypadContext item={expressionItem3} customKeypad={false} />;
 };
 
-export const Mobile: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Mobile = (args: StoryArgs): React.ReactElement => {
     return (
         <div>
             <p>
@@ -107,9 +105,7 @@ export const Mobile: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const ExpressionItem2: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ExpressionItem2 = (args: StoryArgs): React.ReactElement => {
     return (
         <WrappedKeypadContext
             item={expressionItem2}
@@ -118,9 +114,7 @@ export const ExpressionItem2: React.FC<StoryArgs> = (
     );
 };
 
-export const ExpressionItem3: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ExpressionItem3 = (args: StoryArgs): React.ReactElement => {
     return (
         <WrappedKeypadContext
             item={expressionItem3}

package/src/widgets/__stories__/graded-group-set.stories.tsx

@@ -12,7 +12,7 @@ type GradedGroupSetStory = {
     args: StoryArgs;
 };
 
-export const Article1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Article1 = (args: StoryArgs): React.ReactElement => {
     return (
         <RendererWithDebugUI
             apiOptions={{

package/src/widgets/__stories__/graded-group.stories.tsx

@@ -12,7 +12,7 @@ type Story = {
     args: StoryArgs;
 };
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return (
         <RendererWithDebugUI
             question={question1}

package/src/widgets/__stories__/grapher.stories.tsx

@@ -17,44 +17,30 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const AbsoluteValueQuestion: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const AbsoluteValueQuestion = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={absoluteValueQuestion} />;
 };
 
-export const ExponentialQuestion: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ExponentialQuestion = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={exponentialQuestion} />;
 };
 
-export const LinearQuestion: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const LinearQuestion = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={linearQuestion} />;
 };
 
-export const LogarithmQuestion: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const LogarithmQuestion = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={logarithmQuestion} />;
 };
 
-export const QuadraticQuestion: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const QuadraticQuestion = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={quadraticQuestion} />;
 };
 
-export const SinusoidQuestion: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const SinusoidQuestion = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={sinusoidQuestion} />;
 };
 
-export const ComplexQuestion: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ComplexQuestion = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={multipleAvailableTypesQuestion} />;
 };

package/src/widgets/__stories__/group.stories.tsx

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };

package/src/widgets/__stories__/iframe.stories.tsx

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };

package/src/widgets/__stories__/image.stories.tsx

@@ -16,7 +16,7 @@ type ImageStory = {
     args: StoryArgs;
 };
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     const apiOptions: APIOptions = {
         isMobile: args.isMobile,
     };

package/src/widgets/__stories__/input-number.stories.tsx

@@ -82,29 +82,20 @@ const updateWidgetOptions = (
     };
 };
 
-export const Rational: React.FC<InputNumberOptions> = (
-    args,
-): React.ReactElement => {
+export const Rational = (args: InputNumberOptions): React.ReactElement => {
     const question = updateWidgetOptions(question1, "input-number 1", args);
     return <RendererWithDebugUI question={question} />;
 };
-// @ts-expect-error [FEI-5003] - TS2339 - Property 'args' does not exist on type 'FC<PerseusInputNumberWidgetOptions>'.
 Rational.args = question1.widgets["input-number 1"].options;
 
-export const PiSimplify: React.FC<InputNumberOptions> = (
-    args,
-): React.ReactElement => {
+export const PiSimplify = (args: InputNumberOptions): React.ReactElement => {
     const question = updateWidgetOptions(question2, "input-number 1", args);
     return <RendererWithDebugUI question={question} />;
 };
-// @ts-expect-error [FEI-5003] - TS2339 - Property 'args' does not exist on type 'FC<PerseusInputNumberWidgetOptions>'.
 PiSimplify.args = question2.widgets["input-number 1"].options;
 
-export const Percent: React.FC<InputNumberOptions> = (
-    args,
-): React.ReactElement => {
+export const Percent = (args: InputNumberOptions): React.ReactElement => {
     const question = updateWidgetOptions(question3, "input-number 1", args);
     return <RendererWithDebugUI question={question} />;
 };
-// @ts-expect-error [FEI-5003] - TS2339 - Property 'args' does not exist on type 'FC<PerseusInputNumberWidgetOptions>'.
 Percent.args = question3.widgets["input-number 1"].options;

package/src/widgets/__stories__/interaction.stories.tsx

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const Question1 = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={question1} />
 );