@khanacademy/perseus 43.1.0 → 44.0.0

package/dist/all-widgets.d.ts

@@ -1,24 +1,3 @@
-/// <reference types="react" />
-declare const _default: readonly Readonly<{
-    name: string;
-    displayName: string;
-    getWidget?: (() => import("react").ComponentType<any>) | undefined;
-    widget: import("react").ComponentType<any>;
-    accessible?: boolean | ((props: any) => boolean) | undefined;
-    hidden?: boolean | undefined;
-    version?: import("./types").Version | undefined;
-    supportedAlignments?: readonly import("./types").Alignment[] | undefined;
-    defaultAlignment?: import("./types").Alignment | undefined;
-    getDefaultAlignment?: (() => import("./types").Alignment) | undefined;
-    isLintable?: boolean | undefined;
-    tracking?: import("./types").Tracking | undefined;
-    traverseChildWidgets?: any;
-    transform?: import("./types").WidgetTransform | undefined;
-    staticTransform?: import("./types").WidgetTransform | undefined;
-    scorer?: import("./types").WidgetScorerFunction | undefined;
-    getOneCorrectAnswerFromRubric?: ((rubric: import("./validation.types").Rubric) => string | null | undefined) | undefined;
-    propUpgrades?: {
-        [key: string]: (arg1: any) => any;
-    } | undefined;
-}>[];
+import type { WidgetExports } from "./types";
+declare const _default: ReadonlyArray<WidgetExports>;
 export default _default;

package/dist/basic-widgets.d.ts

@@ -1,24 +1,3 @@
-/// <reference types="react" />
-declare const _default: readonly Readonly<{
-    name: string;
-    displayName: string;
-    getWidget?: (() => import("react").ComponentType<any>) | undefined;
-    widget: import("react").ComponentType<any>;
-    accessible?: boolean | ((props: any) => boolean) | undefined;
-    hidden?: boolean | undefined;
-    version?: import("./types").Version | undefined;
-    supportedAlignments?: readonly import("./types").Alignment[] | undefined;
-    defaultAlignment?: import("./types").Alignment | undefined;
-    getDefaultAlignment?: (() => import("./types").Alignment) | undefined;
-    isLintable?: boolean | undefined;
-    tracking?: import("./types").Tracking | undefined;
-    traverseChildWidgets?: any;
-    transform?: import("./types").WidgetTransform | undefined;
-    staticTransform?: import("./types").WidgetTransform | undefined;
-    scorer?: import("./types").WidgetScorerFunction | undefined;
-    getOneCorrectAnswerFromRubric?: ((rubric: import("./validation.types").Rubric) => string | null | undefined) | undefined;
-    propUpgrades?: {
-        [key: string]: (arg1: any) => any;
-    } | undefined;
-}>[];
+import type { WidgetExports } from "./types";
+declare const _default: ReadonlyArray<WidgetExports>;
 export default _default;

package/dist/components/graph.d.ts

@@ -38,6 +38,7 @@ type DefaultProps = {
     isMobile: Props["isMobile"];
 };
 declare class Graph extends React.Component<Props> {
+    graphieDivRef: React.RefObject<HTMLDivElement>;
     protractor: any;
     ruler: any;
     _graphie: any;

package/dist/components/icon.d.ts

@@ -1,4 +1,3 @@
-/// <reference path="../../types/aphrodite.d.ts" />
 import * as React from "react";
 import type { CSSProperties } from "aphrodite";
 export type IconType = {

package/dist/components/multi-button-group.d.ts

@@ -47,6 +47,7 @@ type DefaultProps = {
  * this component allows multiple selection!
  */
 declare class MultiButtonGroup extends React.Component<Props> {
+    buttonContainerRef: React.RefObject<HTMLDivElement>;
     static defaultProps: DefaultProps;
     focus(): boolean;
     toggleSelect: (arg1?: any) => void;

package/dist/components/tooltip.d.ts

@@ -72,6 +72,7 @@ type State = {
  * ```
  */
 declare class Tooltip extends React.Component<Props, State> {
+    tooltipContainerRef: React.RefObject<HTMLDivElement>;
     static defaultProps: DefaultProps;
     state: State;
     componentDidMount(): void;

package/dist/es/index.js

@@ -4,7 +4,7 @@ import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule } from '@khanacademy/perseus-linter';
 import { View, RenderStateRoot, UniqueIDProvider, useOnMountEffect, useLatestRef, useUniqueIdWithMock, Text as Text$2 } from '@khanacademy/wonder-blocks-core';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
-import { HeadingMedium, LabelSmall, Body, LabelMedium } from '@khanacademy/wonder-blocks-typography';
+import { HeadingMedium, LabelSmall, LabelLarge, Body, LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import { StyleSheet, css } from 'aphrodite';
 import classNames$1 from 'classnames';
 import * as React from 'react';
@@ -249,7 +249,8 @@ const mockStrings = {
   srInteractiveElements: ({
     elements
   }) => `Interactive elements: ${elements}`,
-  srNoInteractiveElements: "No interactive elements"
+  srNoInteractiveElements: "No interactive elements",
+  selectAnAnswer: "Select an answer"
 };
 
 /**
@@ -16629,7 +16630,7 @@ class Graphie extends React.Component {
     };
     this._setupGraphie = () => {
       this._removeMovables();
-      const graphieDiv = ReactDOM__default.findDOMNode(this.graphieDivRef.current);
+      const graphieDiv = this.graphieDivRef.current;
       if (graphieDiv == null || graphieDiv instanceof Text) {
         throw new Error("No graphie container div found");
       }
@@ -21135,6 +21136,7 @@ const HORIZONTAL_ALIGNMNENTS = {
 class Tooltip extends React.Component {
   constructor(...args) {
     super(...args);
+    this.tooltipContainerRef = /*#__PURE__*/React.createRef();
     this.state = {
       height: null // used for offsetting "top" positioned tooltips
     };
@@ -21209,8 +21211,7 @@ class Tooltip extends React.Component {
         display: this.props.show ? "block" : "none"
       }
     }, /*#__PURE__*/React.createElement("div", {
-      // eslint-disable-next-line react/no-string-refs
-      ref: "tooltipContainer",
+      ref: this.tooltipContainerRef,
       className: "tooltipContainer",
       style: {
         position: "absolute",
@@ -21237,10 +21238,8 @@ class Tooltip extends React.Component {
     }, this.props.children.slice(1)), arrowBelow));
   }
   _updateHeight() {
-    const tooltipContainer = ReactDOM__default.findDOMNode(
-    // eslint-disable-next-line react/no-string-refs
-    this.refs.tooltipContainer);
-    const height = tooltipContainer.offsetHeight;
+    const tooltipContainer = this.tooltipContainerRef.current;
+    const height = (tooltipContainer == null ? void 0 : tooltipContainer.offsetHeight) || 0;
     if (height !== this.state.height) {
       this.setState({
         height
@@ -27224,23 +27223,40 @@ class Dropdown extends React.Component {
       value: String(i + 1),
       label: choice
     }))];
-    return /*#__PURE__*/React.createElement("div", {
-      // NOTE(jared): These are required to prevent weird behavior
-      // When there's a dropdown in a zoomable table.
+    return /*#__PURE__*/React.createElement(UniqueIDProvider, {
+      scope: "dropdown-widget",
+      mockOnFirstRender: true
+    }, ids => /*#__PURE__*/React.createElement(View
+    // NOTE(jared): These are required to prevent weird behavior
+    // When there's a dropdown in a zoomable table.
+    , {
       onClick: e => {
         e.stopPropagation();
       },
       onTouchStart: e => {
         e.stopPropagation();
       }
-    }, /*#__PURE__*/React.createElement(SingleSelect, {
+    }, this.props.visibleLabel && /*#__PURE__*/React.createElement(LabelLarge, {
+      tag: "label",
+      id: ids.get("dropdown-label")
+    }, this.props.visibleLabel), /*#__PURE__*/React.createElement(SingleSelect, {
+      id: ids.get("dropdown"),
       placeholder: "",
       onChange: value => this._handleChange(parseInt(value)),
       selectedValue: String(this.props.selected),
-      disabled: this.props.apiOptions.readOnly
-    }, children));
+      disabled: this.props.apiOptions.readOnly,
+      "aria-label": this.props.ariaLabel || this.context.strings.selectAnAnswer,
+      "aria-labelledby": ids.get("dropdown-label")
+      // This is currently necessary for SRs to read the labels properly.
+      // However, WB is working on a change to add the "combobox" role to
+      // all dropdowns.
+      // See https://khanacademy.atlassian.net/browse/WB-1671
+      ,
+      role: "combobox"
+    }, children)));
   }
 }
+Dropdown.contextType = PerseusI18nContext;
 Dropdown.defaultProps = {
   choices: [],
   selected: 0,
@@ -27250,6 +27266,8 @@ Dropdown.defaultProps = {
 const optionsTransform = widgetOptions => {
   return {
     placeholder: widgetOptions.placeholder,
+    visibleLabel: widgetOptions.visibleLabel,
+    ariaLabel: widgetOptions.ariaLabel,
     choices: widgetOptions.choices.map(choice => choice.content)
   };
 };
@@ -30345,6 +30363,7 @@ function numSteps$1(range, step) {
 class Graph extends React.Component {
   constructor(...args) {
     super(...args);
+    this.graphieDivRef = /*#__PURE__*/React.createRef();
     this.protractor = void 0;
     this.ruler = void 0;
     this._graphie = void 0;
@@ -30388,9 +30407,7 @@ class Graph extends React.Component {
       if (this._hasSetupGraphieThisUpdate) {
         return;
       }
-
-      // eslint-disable-next-line react/no-string-refs
-      const graphieDiv = ReactDOM__default.findDOMNode(this.refs.graphieDiv);
+      const graphieDiv = this.graphieDivRef.current;
       // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
       $(graphieDiv).empty();
 
@@ -30598,7 +30615,7 @@ class Graph extends React.Component {
       onClick: this.onClick
     }, image, /*#__PURE__*/React.createElement("div", {
       className: "graphie",
-      ref: "graphieDiv"
+      ref: this.graphieDivRef
     }));
   }
 }
@@ -31686,6 +31703,7 @@ class InfoTip extends React.Component {
 class MultiButtonGroup extends React.Component {
   constructor(...args) {
     super(...args);
+    this.buttonContainerRef = /*#__PURE__*/React.createRef();
     this.toggleSelect = newValue => {
       const values = (this.props.values || []).slice(0);
       const allowEmpty = this.props.allowEmpty;
@@ -31702,9 +31720,8 @@ class MultiButtonGroup extends React.Component {
     };
   }
   focus() {
-    var _ReactDOM$findDOMNode;
-    // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-    (_ReactDOM$findDOMNode = ReactDOM.findDOMNode(this)) == null || _ReactDOM$findDOMNode.focus();
+    var _this$buttonContainer;
+    (_this$buttonContainer = this.buttonContainerRef.current) == null || _this$buttonContainer.focus();
     return true;
   }
   render() {
@@ -31725,7 +31742,8 @@ class MultiButtonGroup extends React.Component {
       display: "inline-block"
     };
     return /*#__PURE__*/React.createElement("div", {
-      style: outerStyle
+      style: outerStyle,
+      ref: this.buttonContainerRef
     }, buttons);
   }
 }
@@ -44843,7 +44861,7 @@ const init = function init() {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "43.1.0";
+const libVersion = "44.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -48513,6 +48531,8 @@ const parseDefinitionWidget = parseWidget(constant("definition"), object({
 
 const parseDropdownWidget = parseWidget(constant("dropdown"), object({
   placeholder: string,
+  ariaLabel: optional(string),
+  visibleLabel: optional(string),
   static: defaulted(boolean, () => false),
   choices: array(object({
     content: string,