@khanacademy/perseus 13.1.0 → 14.0.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @khanacademy/perseus
 
+## 14.0.0
+
+### Major Changes
+
+-   [#825](https://github.com/Khan/perseus/pull/825) [`7cb40e4c`](https://github.com/Khan/perseus/commit/7cb40e4c919be50e5ced41e4937178bbf849ec74) Thanks [@benchristel](https://github.com/benchristel)! - We've removed the deprecated `useV2Keypad` prop from the MobileKeypad component.
+
+    The V2 keypad is now the default, and the old keypad has been removed.
+
+    Additionally, the mobile keypad no longer accepts the `keypadActive` or
+    `setKeypadActive` props. It now gets those values itself from the `KeypadContext`.
+
+### Minor Changes
+
+-   [#816](https://github.com/Khan/perseus/pull/816) [`cdcd162e`](https://github.com/Khan/perseus/commit/cdcd162ea0902d3ff1d77b1b66ad15f2d55a86cd) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Wrap all SvgImage instances in AssetContext (ensures that host applications can correctly wait for all images to load in a renderer before proceeding).
+
+*   [#788](https://github.com/Khan/perseus/pull/788) [`8f1f0208`](https://github.com/Khan/perseus/commit/8f1f0208fcc08e137053bfd05d330b6f8bf3522d) Thanks [@jeanettehead](https://github.com/jeanettehead)! - create randomized storybook stories for some widgets
+
+### Patch Changes
+
+-   Updated dependencies [[`7cb40e4c`](https://github.com/Khan/perseus/commit/7cb40e4c919be50e5ced41e4937178bbf849ec74)]:
+    -   @khanacademy/math-input@16.0.0
+
+## 13.2.0
+
+### Minor Changes
+
+-   [#797](https://github.com/Khan/perseus/pull/797) [`021f9462`](https://github.com/Khan/perseus/commit/021f946255f423de8df13f6872b0664f79408484) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Change the rational color in radio widget
+
+*   [#811](https://github.com/Khan/perseus/pull/811) [`bca527ab`](https://github.com/Khan/perseus/commit/bca527abc4d8b29942efec12509f9cf8be401e75) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Bump all Wonder Blocks dependencies to latest
+
+### Patch Changes
+
+-   [#808](https://github.com/Khan/perseus/pull/808) [`8358da80`](https://github.com/Khan/perseus/commit/8358da8010dcb8976d8cfb542afa7e303ce4971a) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Removing unnecessary conflicting CSS for #problemarea.
+
+*   [#813](https://github.com/Khan/perseus/pull/813) [`691d29b4`](https://github.com/Khan/perseus/commit/691d29b4224a523a3dd8d53a7aab28c80118e7ac) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Removing unused CSS from #problemarea.
+
+-   [#812](https://github.com/Khan/perseus/pull/812) [`6d31e044`](https://github.com/Khan/perseus/commit/6d31e044d6f5b304e63602795e9bbd7ba443dac5) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Fix 'focus' parameter on Renderer's setInputValue function to be optional.
+
+-   Updated dependencies [[`57e0e18b`](https://github.com/Khan/perseus/commit/57e0e18bd3729cde2e35cfa4ec40b67a5700049c), [`57e0e18b`](https://github.com/Khan/perseus/commit/57e0e18bd3729cde2e35cfa4ec40b67a5700049c), [`bca527ab`](https://github.com/Khan/perseus/commit/bca527abc4d8b29942efec12509f9cf8be401e75)]:
+    -   @khanacademy/simple-markdown@0.11.0
+    -   @khanacademy/math-input@15.1.0
+    -   @khanacademy/pure-markdown@0.2.11
+
 ## 13.1.0
 
 ### Minor Changes

package/dist/components/svg-image.d.ts

@@ -24,6 +24,15 @@ type Props = {
     zoomToFullSizeOnMobile?: boolean;
     setAssetStatus: (assetKey: string, loaded: boolean) => void;
 };
+type DefaultProps = {
+    constrainHeight: NonNullable<Props["constrainHeight"]>;
+    onUpdate: NonNullable<Props["onUpdate"]>;
+    responsive: NonNullable<Props["responsive"]>;
+    scale: NonNullable<Props["scale"]>;
+    setAssetStatus: NonNullable<Props["setAssetStatus"]>;
+    src: NonNullable<Props["src"]>;
+    zoomToFullSizeOnMobile: NonNullable<Props["zoomToFullSizeOnMobile"]>;
+};
 type Label = {
     coordinates: ReadonlyArray<any>;
     content: string;
@@ -44,15 +53,7 @@ type State = {
 };
 declare class SvgImage extends React.Component<Props, State> {
     _isMounted: boolean;
-    static defaultProps: {
-        constrainHeight: boolean;
-        onUpdate: () => void;
-        responsive: boolean;
-        scale: number;
-        setAssetStatus: (src: string, status: boolean) => void;
-        src: string;
-        zoomToFullSizeOnMobile: boolean;
-    };
+    static defaultProps: DefaultProps;
     constructor(props: Props);
     componentDidMount(): void;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;

package/dist/es/index.css

@@ -130,8 +130,6 @@ div.definition {
 
 #problemarea {
     font-size: 14px;
-    width: 70%;
-    min-height: 378px;
     position: relative;
     float: left;
     padding-bottom: 38px;
@@ -2366,11 +2364,6 @@ img.zoom-img {
 .framework-perseus.perseus-mobile .perseus-input-right-align .keypad-input {
   text-align: right;
 }
-.framework-perseus #problemarea input,
-.framework-perseus #problemarea button {
-  position: relative;
-  z-index: 3;
-}
 .framework-perseus div.paragraph {
   font-family: "Lato", sans-serif;
   font-weight: 400;

package/dist/es/index.js

@@ -16521,7 +16521,7 @@ const doJSONP = function doJSONP(url, options) {
 // system (with file://). We replace urls that start with `web+graphie`
 // in the perseus json with this `file+graphie` prefix to indicate that
 // they should have the `file://` protocol instead of `https://`.
-const svgLocalLabelsRegex = /^file\+graphie\:/;
+const svgLocalLabelsRegex = /^file\+graphie:/;
 const hashRegex = /\/([^/]+)$/;
 function isImageProbablyPhotograph(imageUrl) {
   // TODO(david): Do an inventory to refine this heuristic. For example, what
@@ -22900,6 +22900,7 @@ const styles$r = StyleSheet.create({
     padding: intermediateCheckboxPadding,
     paddingTop: 0,
     marginLeft: 54,
+    color: Color.offBlack64,
     [mediaQueries.smOrSmaller]: {
       padding: intermediateCheckboxPaddingPhone,
       paddingTop: 0
@@ -26696,29 +26697,32 @@ class ImageWidget extends React.Component {
     } = this.props;
     const backgroundImage = this.props.backgroundImage;
     if (backgroundImage.url) {
-      image = /*#__PURE__*/React.createElement(SvgImage, {
-        src: backgroundImage.url,
+      const url = backgroundImage.url;
+      image = /*#__PURE__*/React.createElement(context$1.Consumer, null, ({
+        setAssetStatus
+      }) => /*#__PURE__*/React.createElement(SvgImage, {
+        src: url,
         alt:
         /* alt text is formatted in a sr-only
-               div next to the image in addition to
-               the alt attribute.
-               If there is no alt text at all,
-               we don't put an alt attribute on
-               the image, so that screen readers
-               know there's something they can't
-               read there :(.
-               NOTE: React <=0.13 (maybe later)
-               has a bug where it won't ever
-               remove an attribute, so if this
-               alt node is ever defined it's
-               not removed. This is sort of
-               dangerous, but we usually re-key
-               new renderers so that they're
-               rendered from scratch anyways,
-               so this shouldn't be a problem
-               in practice right now, although
-               it will exhibit weird behaviour
-               while editing. */
+        div next to the image in addition to
+        the alt attribute.
+        If there is no alt text at all,
+        we don't put an alt attribute on
+        the image, so that screen readers
+        know there's something they can't
+        read there :(.
+        NOTE: React <=0.13 (maybe later)
+        has a bug where it won't ever
+        remove an attribute, so if this
+        alt node is ever defined it's
+        not removed. This is sort of
+        dangerous, but we usually re-key
+        new renderers so that they're
+        rendered from scratch anyways,
+        so this shouldn't be a problem
+        in practice right now, although
+        it will exhibit weird behaviour
+        while editing. */
         this.props.alt,
         overrideAriaHidden: true,
         width: backgroundImage.width,
@@ -26732,8 +26736,9 @@ class ImageWidget extends React.Component {
         trackInteraction: this.props.trackInteraction,
         zoomToFullSizeOnMobile: apiOptions.isMobile,
         constrainHeight: apiOptions.isMobile,
-        allowFullBleed: apiOptions.isMobile
-      });
+        allowFullBleed: apiOptions.isMobile,
+        setAssetStatus: setAssetStatus
+      }));
     }
     if (this.props.alt) {
       alt = /*#__PURE__*/React.createElement("span", {
@@ -27733,16 +27738,18 @@ class Graph extends React.Component {
     const imageData = this.props.backgroundImage;
     if (imageData.url) {
       const scale = this.props.box[0] / interactiveSizes$1.defaultBoxSize;
-      image =
-      /*#__PURE__*/
+      image = /*#__PURE__*/React.createElement(context$1.Consumer, null, ({
+        setAssetStatus
+      }) => /*#__PURE__*/React.createElement(SvgImage
       // @ts-expect-error - TS2741 - Property 'alt' is missing in type '{ src: any; width: any; height: any; scale: number; responsive: false; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'.
-      React.createElement(SvgImage, {
+      , {
         src: imageData.url,
         width: imageData.width,
         height: imageData.height,
         scale: scale,
-        responsive: false
-      });
+        responsive: false,
+        setAssetStatus: setAssetStatus
+      }));
     } else {
       image = null;
     }
@@ -44082,7 +44089,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "13.1.0";
+const libVersion = "14.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44637,7 +44644,6 @@ const ProvideKeypad = {
         // @ts-expect-error - TS2339 - Property 'props' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'.
         ,
         style: _this.props.keypadStyle,
-        useV2Keypad: apiOptions.useV2Keypad,
         onAnalyticsEvent: async () => {
           // Intentionally left empty. This component is
           // deprecated and so we don't want/need to instrument