@khanacademy/math-input 20.1.1 → 21.0.0

package/dist/components/keypad/button-assets.d.ts

@@ -3,5 +3,5 @@ import type Key from "../../data/keys";
 type Props = {
     id: Key;
 };
-export default function ButtonAsset({ id }: Props): React.ReactElement;
+export default function ButtonAsset({ id }: Props): React.ReactNode;
 export {};

package/dist/es/index.js

@@ -1,9 +1,10 @@
 import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
+import { KeypadContext } from '@khanacademy/keypad-context';
 import { color } from '@khanacademy/wonder-blocks-tokens';
 import { entries } from '@khanacademy/wonder-stuff-core';
 import { StyleSheet, css } from 'aphrodite';
 import * as React from 'react';
-import { useContext, useState, useMemo, useRef, useEffect } from 'react';
+import { useContext, useRef, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { SpeechRuleEngine } from '@khanacademy/mathjax-renderer';
 import MathQuill from 'mathquill';
@@ -15,7 +16,7 @@ import PropTypes from 'prop-types';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/math-input";
-const libVersion = "20.1.1";
+const libVersion = "21.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -163,8 +164,11 @@ const mockStrings = {
   logBase10: "Logarithm with base 10",
   logCustomBase: "Logarithm with custom base",
   sine: "Sine",
+  sin: "sin",
   cosine: "Cosine",
+  cos: "cos",
   tangent: "Tangent",
+  tan: "tan",
   pi: "Pi",
   theta: "Theta",
   upArrow: "Up arrow",
@@ -209,49 +213,6 @@ function MathInputI18nContextProvider({
 }
 const useMathInputI18n = () => useContext(MathInputI18nContext);
 
-/**
- * KeypadContext provides a way to the Keypad and Perseus Renderers to
- * communicate.
- *
- * The StatefulKeypadContextProvider wraps the application
- * while KeypadContext.Consumer wraps things that need this state:
- * - mobile keypad usages
- * - Perseus Renderers (Server/Item/Article)
- */
-// @ts-expect-error - TS2322 - Type 'Context<{ setKeypadElement: (keypadElement: HTMLElement | null | undefined) => void; keypadElement: null; setRenderer: (renderer: RendererInterface | null | undefined) => void; renderer: null; setScrollableElement: (scrollableElement: HTMLElement | ... 1 more ... | undefined) => void; scrollableElement: null; }>' is not assignable to type 'Context<KeypadContext>'.
-const KeypadContext = /*#__PURE__*/React.createContext({
-  setKeypadActive: keypadActive => {},
-  keypadActive: false,
-  setKeypadElement: keypadElement => {},
-  keypadElement: null,
-  setRenderer: renderer => {},
-  renderer: null,
-  setScrollableElement: scrollableElement => {},
-  scrollableElement: null
-});
-function StatefulKeypadContextProvider(props) {
-  // whether or not to display the keypad
-  const [keypadActive, setKeypadActive] = useState(false);
-  // used to communicate between the keypad and the Renderer
-  const [keypadElement, setKeypadElement] = useState();
-  // this is a KeypadContextRendererInterface from Perseus
-  const [renderer, setRenderer] = useState();
-  const [scrollableElement, setScrollableElement] = useState();
-  const memoizedValue = useMemo(() => ({
-    keypadActive,
-    setKeypadActive,
-    keypadElement,
-    setKeypadElement,
-    renderer,
-    setRenderer,
-    scrollableElement,
-    setScrollableElement
-  }), [keypadActive, setKeypadActive, keypadElement, setKeypadElement, renderer, setRenderer, scrollableElement, setScrollableElement]);
-  return /*#__PURE__*/React.createElement(KeypadContext.Provider, {
-    value: memoizedValue
-  }, props.children);
-}
-
 /**
  * Common parameters used to style components.
  */
@@ -2528,7 +2489,6 @@ const styles$6 = StyleSheet.create({
     marginLeft: 1
   },
   hovered: {
-    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${color.white}`,
     border: "1px solid #1865F2"
   },
   pressed: {
@@ -3155,7 +3115,8 @@ function ButtonAsset({
   id
 }) {
   const {
-    locale
+    locale,
+    strings
   } = useMathInputI18n();
   switch (id) {
     case "NUM_0":
@@ -3540,38 +3501,11 @@ function ButtonAsset({
         clipRule: "evenodd"
       }));
     case "TAN":
-      return /*#__PURE__*/React.createElement("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "40",
-        height: "40",
-        fill: "none",
-        viewBox: "0 0 40 40"
-      }, /*#__PURE__*/React.createElement("path", {
-        fill: "#21242C",
-        d: "M12.157 26.128c-.714 0-1.264-.2-1.648-.6-.378-.405-.568-.962-.568-1.672v-4.584h-.84a.385.385 0 0 1-.272-.104c-.074-.07-.112-.173-.112-.312v-.784l1.32-.216.416-2.24a.439.439 0 0 1 .152-.248.452.452 0 0 1 .288-.088h1.024v2.584h2.192v1.408h-2.192v4.448c0 .256.062.456.184.6a.66.66 0 0 0 .52.216.978.978 0 0 0 .304-.04 1.63 1.63 0 0 0 .216-.096c.064-.032.12-.061.168-.088a.258.258 0 0 1 .144-.048c.059 0 .107.016.144.048.038.027.078.07.12.128l.592.96c-.288.24-.618.422-.992.544-.373.123-.76.184-1.16.184Zm7.553-3.632c-.57.027-1.05.078-1.44.152-.389.07-.7.16-.936.272-.234.112-.402.243-.504.392a.852.852 0 0 0-.152.488c0 .347.102.595.304.744.208.15.478.224.808.224.406 0 .755-.072 1.048-.216.3-.15.59-.373.872-.672v-1.384Zm-4.528-3.56c.944-.864 2.08-1.296 3.408-1.296.48 0 .91.08 1.288.24a2.696 2.696 0 0 1 1.552 1.656c.14.39.208.816.208 1.28V26h-.896c-.186 0-.33-.026-.432-.08-.1-.058-.18-.173-.24-.344l-.176-.592c-.208.187-.41.352-.608.496a3.743 3.743 0 0 1-.616.352 3.14 3.14 0 0 1-.688.216 3.65 3.65 0 0 1-.8.08 3.24 3.24 0 0 1-.96-.136 2.159 2.159 0 0 1-.76-.424 1.886 1.886 0 0 1-.496-.696 2.47 2.47 0 0 1-.176-.968 1.892 1.892 0 0 1 .44-1.208c.16-.186.366-.362.616-.528a4 4 0 0 1 .92-.432 7.836 7.836 0 0 1 1.28-.296c.486-.08 1.04-.128 1.664-.144v-.48c0-.55-.117-.954-.352-1.216-.234-.266-.573-.4-1.016-.4-.32 0-.586.038-.8.112-.208.075-.392.16-.552.256-.16.09-.306.174-.44.248a.842.842 0 0 1-.432.112.585.585 0 0 1-.352-.104.956.956 0 0 1-.232-.256l-.352-.632Zm10.165-.136a5.2 5.2 0 0 1 .52-.456 3.194 3.194 0 0 1 1.248-.592 3.2 3.2 0 0 1 .768-.088c.448 0 .846.078 1.192.232.347.15.635.363.864.64.235.272.411.6.528.984.123.379.184.798.184 1.256V26h-1.976v-5.224c0-.501-.114-.888-.344-1.16-.229-.277-.578-.416-1.048-.416-.34 0-.66.078-.96.232a3.438 3.438 0 0 0-.848.632V26H23.5v-8.208h1.208c.256 0 .424.12.504.36l.136.648Z"
-      }));
+      return strings.tan;
     case "COS":
-      return /*#__PURE__*/React.createElement("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "40",
-        height: "40",
-        fill: "none",
-        viewBox: "0 0 40 40"
-      }, /*#__PURE__*/React.createElement("path", {
-        fill: "#21242C",
-        d: "M14.957 19.528a.918.918 0 0 1-.176.176c-.053.043-.133.064-.24.064-.1 0-.2-.03-.296-.088a5.242 5.242 0 0 0-.343-.208 2.237 2.237 0 0 0-.48-.208 2.066 2.066 0 0 0-.68-.096c-.347 0-.651.064-.913.192-.26.123-.48.301-.655.536-.171.235-.3.52-.384.856-.086.33-.128.707-.128 1.128 0 .437.045.827.135 1.168.096.341.232.63.409.864.176.23.389.405.64.528.25.117.533.176.848.176.314 0 .567-.037.76-.112.197-.08.362-.165.495-.256.134-.096.248-.181.345-.256a.53.53 0 0 1 .335-.12.4.4 0 0 1 .36.184l.568.72a3.68 3.68 0 0 1-.712.648c-.256.17-.522.31-.8.416a4.126 4.126 0 0 1-.848.216 5.897 5.897 0 0 1-.863.064c-.507 0-.984-.093-1.432-.28a3.43 3.43 0 0 1-1.177-.832 4.014 4.014 0 0 1-.8-1.328c-.192-.528-.288-1.128-.288-1.8 0-.603.086-1.16.256-1.672.176-.517.432-.963.768-1.336a3.479 3.479 0 0 1 1.248-.888c.496-.213 1.067-.32 1.712-.32.614 0 1.15.099 1.608.296.465.197.88.48 1.248.848l-.52.72Zm5.331-1.864c.608 0 1.16.099 1.656.296.5.197.928.477 1.28.84.357.363.632.805.824 1.328a5.05 5.05 0 0 1 .288 1.752 5.08 5.08 0 0 1-.288 1.76 3.742 3.742 0 0 1-.824 1.336c-.352.368-.78.65-1.28.848a4.445 4.445 0 0 1-1.656.296 4.53 4.53 0 0 1-1.672-.296 3.616 3.616 0 0 1-1.288-.848 3.897 3.897 0 0 1-.824-1.336 5.077 5.077 0 0 1-.288-1.76c0-.645.096-1.23.288-1.752a3.81 3.81 0 0 1 .824-1.328 3.668 3.668 0 0 1 1.288-.84 4.528 4.528 0 0 1 1.672-.296Zm0 6.936c.682 0 1.186-.23 1.512-.688.33-.459.496-1.13.496-2.016 0-.885-.166-1.56-.496-2.024-.326-.464-.83-.696-1.512-.696-.694 0-1.208.235-1.544.704-.331.464-.496 1.136-.496 2.016 0 .88.165 1.552.496 2.016.336.459.85.688 1.544.688Zm10.563-5.208a.574.574 0 0 1-.168.184.465.465 0 0 1-.224.048.731.731 0 0 1-.312-.08 9.204 9.204 0 0 0-.376-.176 3.15 3.15 0 0 0-.496-.184 2.311 2.311 0 0 0-.648-.08c-.39 0-.696.083-.92.248a.775.775 0 0 0-.328.648.64.64 0 0 0 .168.448c.117.117.27.221.456.312.192.09.408.173.648.248.24.07.483.147.728.232.25.085.496.184.736.296.24.107.453.245.64.416.192.165.344.365.456.6.117.235.176.517.176.848 0 .395-.072.76-.216 1.096-.139.33-.347.619-.624.864-.277.24-.621.43-1.032.568a4.51 4.51 0 0 1-1.408.2c-.283 0-.56-.027-.832-.08a4.527 4.527 0 0 1-1.464-.528 3.417 3.417 0 0 1-.552-.4l.456-.752a.644.644 0 0 1 .208-.208.583.583 0 0 1 .304-.072.62.62 0 0 1 .344.104c.112.07.24.144.384.224.144.08.312.155.504.224.197.07.445.104.744.104.235 0 .435-.027.6-.08.17-.059.31-.133.416-.224a.783.783 0 0 0 .24-.312.935.935 0 0 0 .08-.376.655.655 0 0 0-.176-.472 1.44 1.44 0 0 0-.456-.32 3.935 3.935 0 0 0-.648-.24c-.24-.075-.488-.155-.744-.24a8.006 8.006 0 0 1-.744-.296 2.725 2.725 0 0 1-.648-.44 2.054 2.054 0 0 1-.456-.648c-.112-.256-.168-.565-.168-.928 0-.336.067-.656.2-.96.133-.304.328-.568.584-.792.261-.23.584-.41.968-.544a3.99 3.99 0 0 1 1.344-.208c.565 0 1.08.093 1.544.28a3.5 3.5 0 0 1 1.16.736l-.448.712Z"
-      }));
+      return strings.cos;
     case "SIN":
-      return /*#__PURE__*/React.createElement("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "40",
-        height: "40",
-        fill: "none",
-        viewBox: "0 0 40 40"
-      }, /*#__PURE__*/React.createElement("path", {
-        fill: "#21242C",
-        d: "M16.422 19.392a.57.57 0 0 1-.168.184.465.465 0 0 1-.224.048.73.73 0 0 1-.312-.08 9.34 9.34 0 0 0-.376-.176 3.15 3.15 0 0 0-.496-.184 2.314 2.314 0 0 0-.648-.08c-.39 0-.696.082-.92.248a.775.775 0 0 0-.328.648.64.64 0 0 0 .168.448c.117.117.269.221.456.312.192.09.408.173.648.248.24.07.482.146.728.232.25.085.496.184.736.296.24.106.453.245.64.416.192.165.344.365.456.6.117.234.176.517.176.848 0 .394-.072.76-.216 1.096-.14.33-.347.618-.624.864-.278.24-.622.43-1.032.568-.406.133-.875.2-1.408.2-.283 0-.56-.027-.832-.08a4.512 4.512 0 0 1-1.464-.528 3.41 3.41 0 0 1-.552-.4l.456-.752a.646.646 0 0 1 .208-.208.583.583 0 0 1 .304-.072.62.62 0 0 1 .344.104c.112.07.24.144.384.224.144.08.312.154.504.224.197.07.445.104.744.104.234 0 .434-.027.6-.08.17-.059.309-.134.416-.224a.782.782 0 0 0 .24-.312.935.935 0 0 0 .08-.376.655.655 0 0 0-.176-.472 1.443 1.443 0 0 0-.456-.32 3.953 3.953 0 0 0-.648-.24 37.95 37.95 0 0 1-.744-.24 7.978 7.978 0 0 1-.744-.296 2.722 2.722 0 0 1-.648-.44 2.054 2.054 0 0 1-.456-.648c-.112-.256-.168-.566-.168-.928 0-.336.066-.656.2-.96.133-.304.328-.568.584-.792.26-.23.584-.41.968-.544a3.985 3.985 0 0 1 1.344-.208c.565 0 1.08.093 1.544.28.464.186.85.432 1.16.736l-.448.712Zm4.071-1.6V26h-1.984v-8.208h1.984Zm.272-2.392c0 .17-.035.33-.104.48-.07.15-.163.28-.28.392a1.326 1.326 0 0 1-.4.272c-.155.064-.32.096-.496.096-.17 0-.334-.032-.488-.096a1.357 1.357 0 0 1-.664-.664 1.284 1.284 0 0 1 0-.976c.07-.155.16-.288.272-.4.112-.112.242-.2.392-.264a1.18 1.18 0 0 1 .488-.104c.176 0 .341.034.496.104.154.064.288.152.4.264.117.112.21.245.28.4.07.154.104.32.104.496Zm3.59 3.4c.166-.166.339-.318.52-.456a3.197 3.197 0 0 1 1.248-.592 3.15 3.15 0 0 1 .768-.088 2.9 2.9 0 0 1 1.192.232c.347.15.635.362.864.64.235.272.411.6.528.984.123.378.184.797.184 1.256V26h-1.976v-5.224c0-.502-.114-.888-.344-1.16-.229-.278-.578-.416-1.048-.416-.341 0-.661.077-.96.232a3.445 3.445 0 0 0-.848.632V26h-1.976v-8.208h1.208c.256 0 .424.12.504.36l.136.648Z"
-      }));
+      return strings.sin;
     case "EQUAL":
       return /*#__PURE__*/React.createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
@@ -4616,7 +4550,8 @@ const styles$4 = StyleSheet.create({
     flex: 1,
     minHeight: 42,
     minWidth: 42,
-    padding: 1
+    padding: 1,
+    fontFamily: 'Lato, "Noto Sans", sans-serif'
   },
   hovered: {
     borderColor: color.blue,
@@ -5820,5 +5755,5 @@ let KeypadType = /*#__PURE__*/function (KeypadType) {
   return KeypadType;
 }({});
 
-export { CursorContext, Keypad as DesktopKeypad, KeyArray, KeyConfigs, KeypadContext, MathInput as KeypadInput, KeypadType, MathInputI18nContext, MathInputI18nContextProvider, MobileKeypad, StatefulKeypadContextProvider, convertDotToTimesByLocale, createMathField, getCursorContext, getKeyTranslator, keypadElementPropType, libVersion, mathQuillInstance, useMathInputI18n };
+export { CursorContext, Keypad as DesktopKeypad, KeyArray, KeyConfigs, MathInput as KeypadInput, KeypadType, MathInputI18nContext, MathInputI18nContextProvider, MobileKeypad, convertDotToTimesByLocale, createMathField, getCursorContext, getKeyTranslator, keypadElementPropType, libVersion, mathQuillInstance, useMathInputI18n };
 //# sourceMappingURL=index.js.map