@khanacademy/perseus 4.0.2 → 6.0.0

package/dist/widgets/radio/base-radio.js.flow

@@ -40,5 +40,11 @@ declare type Props = {|
   registerFocusFunction?: (arg1: FocusFunction) => void,
   isLastUsedWidget?: boolean,
 |};
-declare var BaseRadio: React.StatelessFunctionalComponent<Props>;
+declare var BaseRadio: {|
+  (props: Props): React.Element<any>,
+  defaultProps: {|
+    editMode: boolean,
+    multipleSelect: boolean,
+  |},
+|};
 declare export default typeof BaseRadio;

package/dist/widgets/radio/choice-icon/choice-icon.d.ts

@@ -12,5 +12,5 @@ type ChoiceIconProps = {
     reviewMode: boolean;
     previouslyAnswered: boolean;
 };
-declare const ChoiceIcon: React.FC<ChoiceIconProps>;
+declare const ChoiceIcon: (props: ChoiceIconProps) => React.ReactElement;
 export default ChoiceIcon;

package/dist/widgets/radio/choice-icon/choice-icon.js.flow

@@ -18,5 +18,5 @@ declare type ChoiceIconProps = {|
   reviewMode: boolean,
   previouslyAnswered: boolean,
 |};
-declare var ChoiceIcon: React.StatelessFunctionalComponent<ChoiceIconProps>;
+declare var ChoiceIcon: (props: ChoiceIconProps) => React.Element<any>;
 declare export default typeof ChoiceIcon;

package/dist/widgets/radio/choice-icon/cross-out-line.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
  * The "cross-out line" that appears over the icon when the choice has been
  * `crossedOut`.
  */
-declare const CrossOutLine: React.FC<{
+declare const CrossOutLine: (props: {
     color: string;
-}>;
+}) => React.ReactElement;
 export default CrossOutLine;

package/dist/widgets/radio/choice-icon/cross-out-line.js.flow

@@ -10,7 +10,7 @@ import * as React from "react";
  * The "cross-out line" that appears over the icon when the choice has been
  * `crossedOut`.
  */
-declare var CrossOutLine: React.StatelessFunctionalComponent<{|
+declare var CrossOutLine: (props: {|
   color: string,
-|}>;
+|}) => React.Element<any>;
 declare export default typeof CrossOutLine;

package/dist/widgets/radio/focus-ring.d.ts

@@ -8,5 +8,12 @@ type Props = {
     color: string;
     multipleSelect: boolean;
 };
-declare const FocusRing: React.FC<Props>;
+declare const FocusRing: {
+    (props: Props): React.ReactElement;
+    defaultProps: {
+        visible: boolean;
+        color: string;
+        multipleSelect: boolean;
+    };
+};
 export default FocusRing;

package/dist/widgets/radio/focus-ring.js.flow

@@ -11,5 +11,12 @@ declare type Props = {|
   color: string,
   multipleSelect: boolean,
 |};
-declare var FocusRing: React.StatelessFunctionalComponent<Props>;
+declare var FocusRing: {|
+  (props: Props): React.Element<any>,
+  defaultProps: {|
+    visible: boolean,
+    color: string,
+    multipleSelect: boolean,
+  |},
+|};
 declare export default typeof FocusRing;

package/dist/widgets/radio/option-status.d.ts

@@ -6,12 +6,12 @@
  * between the states more immediately clear to users.
  */
 import * as React from "react";
-type OptionStatusProps = {
+type Props = {
     correct: boolean;
     checked: boolean;
     crossedOut: boolean;
     previouslyAnswered: boolean;
     reviewMode: boolean;
 };
-declare const OptionStatus: React.FC<OptionStatusProps>;
+declare const OptionStatus: (props: Props) => React.ReactElement;
 export default OptionStatus;

package/dist/widgets/radio/option-status.js.flow

@@ -5,12 +5,12 @@
  * @flow
  */
 import * as React from "react";
-declare type OptionStatusProps = {|
+declare type Props = {|
   correct: boolean,
   checked: boolean,
   crossedOut: boolean,
   previouslyAnswered: boolean,
   reviewMode: boolean,
 |};
-declare var OptionStatus: React.StatelessFunctionalComponent<OptionStatusProps>;
+declare var OptionStatus: (props: Props) => React.Element<any>;
 declare export default typeof OptionStatus;

package/dist/widgets/video-transcript-link.d.ts

@@ -8,5 +8,5 @@ type Props = {
 /**
  * Video Transcript Link Component.
  */
-declare const VideoTranscriptLink: React.FC<Props>;
+declare const VideoTranscriptLink: (props: Props) => React.ReactElement;
 export default VideoTranscriptLink;

package/dist/widgets/video-transcript-link.js.flow

@@ -11,5 +11,5 @@ declare type Props = {|
 /**
  * Video Transcript Link Component.
  */
-declare var VideoTranscriptLink: React.StatelessFunctionalComponent<Props>;
+declare var VideoTranscriptLink: (props: Props) => React.Element<any>;
 declare export default typeof VideoTranscriptLink;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "4.0.2",
+    "version": "6.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -23,10 +23,10 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.1",
-        "@khanacademy/math-input": "^0.7.2",
+        "@khanacademy/math-input": "^2.0.0",
         "@khanacademy/perseus-linter": "^0.3.1",
-        "@khanacademy/pure-markdown": "^0.2.2",
-        "@khanacademy/simple-markdown": "^0.9.2",
+        "@khanacademy/pure-markdown": "^0.2.3",
+        "@khanacademy/simple-markdown": "^0.9.3",
         "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992"
     },
     "devDependencies": {

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

@@ -16,14 +16,10 @@ export default {
     title: "Perseus/Renderers/Item Renderer",
 } as Story;
 
-export const InputNumberItem: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const InputNumberItem = (args: StoryArgs): React.ReactElement => {
     return <ItemRendererWithDebugUI item={itemWithInput} />;
 };
 
-export const LabelImageItem: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const LabelImageItem = (args: StoryArgs): React.ReactElement => {
     return <ItemRendererWithDebugUI item={labelImageItem} />;
 };

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

@@ -16,14 +16,10 @@ export default {
     title: "Perseus/Renderers/Server Item Renderer",
 } as Story;
 
-export const InputNumberItem: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const InputNumberItem = (args: StoryArgs): React.ReactElement => {
     return <ServerItemRendererWithDebugUI item={itemWithInput} />;
 };
 
-export const LabelImageItem: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const LabelImageItem = (args: StoryArgs): React.ReactElement => {
     return <ServerItemRendererWithDebugUI item={labelImageItem} />;
 };

package/src/__tests__/__snapshots__/item-renderer.test.tsx.snap

@@ -6,191 +6,183 @@ exports[`item renderer should snapshot: initial render 1`] = `
   <div
     id="workarea"
   >
-    <span
-      class="mock-KatexProvider"
+    <div
+      class="perseus-renderer perseus-renderer-responsive"
     >
       <div
-        class="perseus-renderer perseus-renderer-responsive"
+        class="paragraph"
+        data-perseus-paragraph-index="0"
       >
         <div
           class="paragraph"
-          data-perseus-paragraph-index="0"
         >
-          <div
-            class="paragraph"
+          Enter the number 
+          <span
+            style="white-space: nowrap;"
           >
-            Enter the number 
+            <span />
             <span
-              style="white-space: nowrap;"
-            >
-              <span />
-              <span
-                class="mock-TeX"
-              />
-              <span />
-            </span>
-            -42
+              class="mock-TeX"
+            />
+            <span />
+          </span>
+          -42
+          <span
+            style="white-space: nowrap;"
+          >
+            <span />
             <span
-              style="white-space: nowrap;"
-            >
-              <span />
-              <span
-                class="mock-TeX"
-              />
-              <span />
-            </span>
-             in the box: 
-            <div
-              class="perseus-widget-container widget-nohighlight widget-inline-block"
-            >
-              <span>
-                <div>
-                  <input
-                    autocapitalize="off"
-                    autocomplete="off"
-                    autocorrect="off"
-                    class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-default_1gznapd-o_O-leftAlign_7jg4r4"
-                    id="input-with-examples-aW5wdXQtbnVtYmVyIDE"
-                    type="text"
-                    value=""
-                  />
-                </div>
+              class="mock-TeX"
+            />
+            <span />
+          </span>
+           in the box: 
+          <div
+            class="perseus-widget-container widget-nohighlight widget-inline-block"
+          >
+            <span>
+              <div>
+                <input
+                  autocapitalize="off"
+                  autocomplete="off"
+                  autocorrect="off"
+                  class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-default_1gznapd-o_O-leftAlign_7jg4r4"
+                  id="input-with-examples-aW5wdXQtbnVtYmVyIDE"
+                  type="text"
+                  value=""
+                />
+              </div>
+              <div
+                style="position: relative; height: 0px; display: none;"
+              >
                 <div
-                  style="position: relative; height: 0px; display: none;"
+                  class="tooltipContainer"
+                  style="position: absolute; left: 0px;"
                 >
                   <div
-                    class="tooltipContainer"
-                    style="position: absolute; left: 0px;"
+                    style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
                   >
                     <div
-                      style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
-                    >
-                      <div
-                        style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
-                      />
-                      <div
-                        style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
-                      />
-                    </div>
+                      style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
+                    />
+                    <div
+                      style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
+                    />
+                  </div>
+                  <div
+                    class="perseus-formats-tooltip preview-measure"
+                    style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
+                  >
                     <div
-                      class="perseus-formats-tooltip preview-measure"
-                      style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
+                      id="input-with-examples-aW5wdXQtbnVtYmVyIDE"
                     >
                       <div
-                        id="input-with-examples-aW5wdXQtbnVtYmVyIDE"
+                        class="perseus-renderer perseus-renderer-responsive"
                       >
-                        <span
-                          class="mock-KatexProvider"
+                        <div
+                          class="paragraph"
+                          data-perseus-paragraph-index="0"
                         >
-                          <div
-                            class="perseus-renderer perseus-renderer-responsive"
-                          >
-                            <div
-                              class="paragraph"
-                              data-perseus-paragraph-index="0"
-                            >
-                              <ul>
-                                <li>
-                                  <strong>
-                                    Your answer should be
-                                  </strong>
-                                </li>
-                                <li>
-                                  an integer, like 
-                                  <span
-                                    style="white-space: nowrap;"
-                                  >
-                                    <span />
-                                    <span
-                                      class="mock-TeX"
-                                    >
-                                      6
-                                    </span>
-                                    <span />
-                                  </span>
-                                </li>
-                                <li>
-                                  an 
-                                  <em>
-                                    exact
-                                  </em>
-                                   decimal, like 
-                                  <span
-                                    style="white-space: nowrap;"
-                                  >
-                                    <span />
-                                    <span
-                                      class="mock-TeX"
-                                    >
-                                      0.75
-                                    </span>
-                                    <span />
-                                  </span>
-                                </li>
-                                <li>
-                                  a 
-                                  <em>
-                                    simplified proper
-                                  </em>
-                                   fraction, like 
-                                  <span
-                                    style="white-space: nowrap;"
-                                  >
-                                    <span />
-                                    <span
-                                      class="mock-TeX"
-                                    >
-                                      3/5
-                                    </span>
-                                    <span />
-                                  </span>
-                                </li>
-                                <li>
-                                  a 
-                                  <em>
-                                    simplified improper
-                                  </em>
-                                   fraction, like 
-                                  <span
-                                    style="white-space: nowrap;"
-                                  >
-                                    <span />
-                                    <span
-                                      class="mock-TeX"
-                                    >
-                                      7/4
-                                    </span>
-                                    <span />
-                                  </span>
-                                </li>
-                                <li>
-                                  a mixed number, like 
-                                  <span
-                                    style="white-space: nowrap;"
-                                  >
-                                    <span />
-                                    <span
-                                      class="mock-TeX"
-                                    >
-                                      1\\ 3/4
-                                    </span>
-                                    <span />
-                                  </span>
-                                </li>
-                              </ul>
-                            </div>
-                          </div>
-                        </span>
+                          <ul>
+                            <li>
+                              <strong>
+                                Your answer should be
+                              </strong>
+                            </li>
+                            <li>
+                              an integer, like 
+                              <span
+                                style="white-space: nowrap;"
+                              >
+                                <span />
+                                <span
+                                  class="mock-TeX"
+                                >
+                                  6
+                                </span>
+                                <span />
+                              </span>
+                            </li>
+                            <li>
+                              an 
+                              <em>
+                                exact
+                              </em>
+                               decimal, like 
+                              <span
+                                style="white-space: nowrap;"
+                              >
+                                <span />
+                                <span
+                                  class="mock-TeX"
+                                >
+                                  0.75
+                                </span>
+                                <span />
+                              </span>
+                            </li>
+                            <li>
+                              a 
+                              <em>
+                                simplified proper
+                              </em>
+                               fraction, like 
+                              <span
+                                style="white-space: nowrap;"
+                              >
+                                <span />
+                                <span
+                                  class="mock-TeX"
+                                >
+                                  3/5
+                                </span>
+                                <span />
+                              </span>
+                            </li>
+                            <li>
+                              a 
+                              <em>
+                                simplified improper
+                              </em>
+                               fraction, like 
+                              <span
+                                style="white-space: nowrap;"
+                              >
+                                <span />
+                                <span
+                                  class="mock-TeX"
+                                >
+                                  7/4
+                                </span>
+                                <span />
+                              </span>
+                            </li>
+                            <li>
+                              a mixed number, like 
+                              <span
+                                style="white-space: nowrap;"
+                              >
+                                <span />
+                                <span
+                                  class="mock-TeX"
+                                >
+                                  1\\ 3/4
+                                </span>
+                                <span />
+                              </span>
+                            </li>
+                          </ul>
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </span>
-            </div>
+              </div>
+            </span>
           </div>
         </div>
       </div>
-    </span>
+    </div>
   </div>
   <div
     id="hintsarea"