@khanacademy/math-input 15.0.0 → 15.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/math-input
 
+## 15.1.0
+
+### Minor Changes
+
+-   [#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
+
+## 15.0.1
+
+### Patch Changes
+
+-   [#800](https://github.com/Khan/perseus/pull/800) [`1d58b887`](https://github.com/Khan/perseus/commit/1d58b887179b129b5027e20484fde5169170f052) Thanks [@handeyeco](https://github.com/handeyeco)! - Bugfix: conditionally switch between period/comma for decimal separator
+
 ## 15.0.0
 
 ### Major Changes

package/dist/components/aphrodite-css-transition-group/transition-child.d.ts

@@ -1,11 +1,14 @@
 import * as React from "react";
 import type { AnimationStyles } from "./types";
-declare const _default: (props: {
-    children: React.ReactNode;
-    transitionStyles: AnimationStyles | (() => AnimationStyles);
-    appearTimeout?: number | undefined;
-    enterTimeout?: number | undefined;
-    leaveTimeout?: number | undefined;
-    in?: boolean | undefined;
-}) => JSX.Element;
+declare const _default: {
+    (props: {
+        children: React.ReactNode;
+        transitionStyles: AnimationStyles | (() => AnimationStyles);
+        appearTimeout?: number | undefined;
+        enterTimeout?: number | undefined;
+        leaveTimeout?: number | undefined;
+        in?: boolean | undefined;
+    }): JSX.Element;
+    displayName: string;
+};
 export default _default;

package/dist/enums.d.ts

@@ -31,10 +31,6 @@ export declare enum IconType {
     SVG = "SVG",
     TEXT = "TEXT"
 }
-export declare enum DecimalSeparator {
-    COMMA = "COMMA",
-    PERIOD = "PERIOD"
-}
 export declare enum EchoAnimationType {
     SLIDE_AND_FADE = "SLIDE_AND_FADE",
     FADE_ONLY = "FADE_ONLY",

package/dist/es/index.js

@@ -20,7 +20,7 @@ import * as Redux from 'redux';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/math-input";
-const libVersion = "15.0.0";
+const libVersion = "15.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -826,70 +826,10 @@ function handleBackspace(mathField) {
   }
 }
 
-/**
- * Constants that are shared between multiple files.
- */
-
-let KeypadType = /*#__PURE__*/function (KeypadType) {
-  KeypadType["FRACTION"] = "FRACTION";
-  KeypadType["EXPRESSION"] = "EXPRESSION";
-  return KeypadType;
-}({});
-const KeyTypes = ["EMPTY",
-// For numerals, variables, and any other characters that themselves
-// compose 'values'.
-"VALUE",
-// For buttons that insert or adjust math in an input.
-"OPERATOR",
-// For buttons that move the cursor in an input (including via
-// deletion).
-"INPUT_NAVIGATION",
-// For buttons that modify the broader keypad state (e.g., by changing
-// the visible pane).
-"KEYPAD_NAVIGATION",
-// For buttons that house multiple buttons and have no action
-// themselves.
-"MANY",
-// For the echo animation that appears on press.
-"ECHO"];
-let DeviceOrientation = /*#__PURE__*/function (DeviceOrientation) {
-  DeviceOrientation["LANDSCAPE"] = "LANDSCAPE";
-  DeviceOrientation["PORTRAIT"] = "PORTRAIT";
-  return DeviceOrientation;
-}({});
-let LayoutMode = /*#__PURE__*/function (LayoutMode) {
-  LayoutMode["FULLSCREEN"] = "FULLSCREEN";
-  LayoutMode["COMPACT"] = "COMPACT";
-  return LayoutMode;
-}({});
-let BorderDirection = /*#__PURE__*/function (BorderDirection) {
-  BorderDirection["LEFT"] = "LEFT";
-  BorderDirection["BOTTOM"] = "BOTTOM";
-  return BorderDirection;
-}({});
-const BorderStyles = {
-  LEFT: [BorderDirection.LEFT],
-  BOTTOM: [BorderDirection.BOTTOM],
-  ALL: [BorderDirection.LEFT, BorderDirection.BOTTOM],
-  NONE: []
+const DecimalSeparator = {
+  COMMA: ",",
+  PERIOD: "."
 };
-let IconType = /*#__PURE__*/function (IconType) {
-  IconType["MATH"] = "MATH";
-  IconType["SVG"] = "SVG";
-  IconType["TEXT"] = "TEXT";
-  return IconType;
-}({});
-let DecimalSeparator = /*#__PURE__*/function (DecimalSeparator) {
-  DecimalSeparator["COMMA"] = "COMMA";
-  DecimalSeparator["PERIOD"] = "PERIOD";
-  return DecimalSeparator;
-}({});
-let EchoAnimationType = /*#__PURE__*/function (EchoAnimationType) {
-  EchoAnimationType["SLIDE_AND_FADE"] = "SLIDE_AND_FADE";
-  EchoAnimationType["FADE_ONLY"] = "FADE_ONLY";
-  EchoAnimationType["LONG_FADE_ONLY"] = "LONG_FADE_ONLY";
-  return EchoAnimationType;
-}({});
 
 // NOTES(kevinb):
 // - In order to get the correct decimal separator for the current locale,
@@ -1076,7 +1016,6 @@ var ActionType = /*#__PURE__*/function (ActionType) {
   ActionType[ActionType["MQ_END"] = 0] = "MQ_END";
   return ActionType;
 }(ActionType || {});
-const decimalSymbol = decimalSeparator === DecimalSeparator.COMMA ? "," : ".";
 function buildGenericCallback(str, type = ActionType.WRITE) {
   return function (mathQuill) {
     switch (type) {
@@ -1122,7 +1061,7 @@ const keyToMathquillMap = {
   COS: buildNormalFunctionCallback("cos"),
   TAN: buildNormalFunctionCallback("tan"),
   CDOT: buildGenericCallback("\\cdot"),
-  DECIMAL: buildGenericCallback(decimalSymbol),
+  DECIMAL: buildGenericCallback(decimalSeparator),
   DIVIDE: buildGenericCallback("\\div"),
   EQUAL: buildGenericCallback("="),
   GEQ: buildGenericCallback("\\geq"),
@@ -2474,6 +2413,66 @@ function Tabbar(props) {
   })));
 }
 
+/**
+ * Constants that are shared between multiple files.
+ */
+
+let KeypadType = /*#__PURE__*/function (KeypadType) {
+  KeypadType["FRACTION"] = "FRACTION";
+  KeypadType["EXPRESSION"] = "EXPRESSION";
+  return KeypadType;
+}({});
+const KeyTypes = ["EMPTY",
+// For numerals, variables, and any other characters that themselves
+// compose 'values'.
+"VALUE",
+// For buttons that insert or adjust math in an input.
+"OPERATOR",
+// For buttons that move the cursor in an input (including via
+// deletion).
+"INPUT_NAVIGATION",
+// For buttons that modify the broader keypad state (e.g., by changing
+// the visible pane).
+"KEYPAD_NAVIGATION",
+// For buttons that house multiple buttons and have no action
+// themselves.
+"MANY",
+// For the echo animation that appears on press.
+"ECHO"];
+let DeviceOrientation = /*#__PURE__*/function (DeviceOrientation) {
+  DeviceOrientation["LANDSCAPE"] = "LANDSCAPE";
+  DeviceOrientation["PORTRAIT"] = "PORTRAIT";
+  return DeviceOrientation;
+}({});
+let LayoutMode = /*#__PURE__*/function (LayoutMode) {
+  LayoutMode["FULLSCREEN"] = "FULLSCREEN";
+  LayoutMode["COMPACT"] = "COMPACT";
+  return LayoutMode;
+}({});
+let BorderDirection = /*#__PURE__*/function (BorderDirection) {
+  BorderDirection["LEFT"] = "LEFT";
+  BorderDirection["BOTTOM"] = "BOTTOM";
+  return BorderDirection;
+}({});
+const BorderStyles = {
+  LEFT: [BorderDirection.LEFT],
+  BOTTOM: [BorderDirection.BOTTOM],
+  ALL: [BorderDirection.LEFT, BorderDirection.BOTTOM],
+  NONE: []
+};
+let IconType = /*#__PURE__*/function (IconType) {
+  IconType["MATH"] = "MATH";
+  IconType["SVG"] = "SVG";
+  IconType["TEXT"] = "TEXT";
+  return IconType;
+}({});
+let EchoAnimationType = /*#__PURE__*/function (EchoAnimationType) {
+  EchoAnimationType["SLIDE_AND_FADE"] = "SLIDE_AND_FADE";
+  EchoAnimationType["FADE_ONLY"] = "FADE_ONLY";
+  EchoAnimationType["LONG_FADE_ONLY"] = "LONG_FADE_ONLY";
+  return EchoAnimationType;
+}({});
+
 const getDefaultOperatorFields = ({
   key,
   keyType: _keyType = "OPERATOR",
@@ -2551,17 +2550,7 @@ const KeyConfigs = {
     keyType: "VALUE",
     // I18N: A label for a 'decimal' sign (represented as '.' or ',').
     ariaLabel: i18n._("Decimal")
-  }), {
-    icon: decimalSeparator === DecimalSeparator.COMMA ? {
-      // TODO(charlie): Get an SVG icon for the comma, or verify with
-      // design that the text-rendered version is acceptable.
-      type: IconType.TEXT,
-      data: ","
-    } : {
-      type: IconType.SVG,
-      data: "PERIOD"
-    }
-  }),
+  })),
   PERIOD: _extends({}, getDefaultOperatorFields({
     key: "PERIOD",
     keyType: "VALUE",
@@ -3126,16 +3115,32 @@ function ButtonAsset({
         d: "M16.735 16.8558c0 1.024.272 1.812.816 2.364.552.544 1.32.816 2.304.816.528 0 .992-.084 1.392-.252.408-.168.752-.392 1.032-.672.28-.288.492-.62.636-.996.144-.384.216-.792.216-1.224 0-.504-.08-.952-.24-1.344-.152-.4-.372-.74-.66-1.02-.28-.28-.616-.492-1.008-.636-.392-.152-.82-.228-1.284-.228-.488 0-.928.08-1.32.24-.392.16-.728.384-1.008.672-.28.28-.496.616-.648 1.008-.152.384-.228.808-.228 1.272zm4.428 5.364c.16-.2.308-.388.444-.564.136-.184.264-.368.384-.552-.416.296-.88.524-1.392.684-.512.152-1.056.228-1.632.228-.624 0-1.224-.104-1.8-.312-.576-.216-1.088-.532-1.536-.948-.448-.424-.808-.944-1.08-1.56-.264-.624-.396-1.34-.396-2.148 0-.76.14-1.476.42-2.148.288-.672.688-1.256 1.2-1.752.512-.504 1.124-.9 1.836-1.188.712-.288 1.5-.432 2.364-.432.856 0 1.632.14 2.328.42.696.272 1.288.66 1.776 1.164.488.496.864 1.092 1.128 1.788.264.688.396 1.448.396 2.28 0 .52-.048 1.012-.144 1.476-.088.464-.22.916-.396 1.356-.168.432-.376.86-.624 1.284-.24.416-.512.84-.816 1.272l-4.068 5.832c-.12.176-.3.32-.54.432-.232.112-.496.168-.792.168h-2.364l5.304-6.78z",
         fill: "#21242C"
       }));
-    // TODO(ned): Per the notes in `KeyConfigs`, shouldn't this be a comma
-    // that we replace with the period icon for i18n? Duplicating for now.
     case "DECIMAL":
     case "PERIOD":
+      // Different locales use different symbols for the decimal separator
+      // (, vs .)
+      if (id === "DECIMAL" && decimalSeparator === DecimalSeparator.COMMA) {
+        // comma decimal separator
+        return /*#__PURE__*/React.createElement("svg", {
+          width: "40",
+          height: "40",
+          viewBox: "0 0 32 32",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          "data-test-id": "comma-decimal"
+        }, /*#__PURE__*/React.createElement("path", {
+          d: "M11.5559 25.3544C11.8679 24.661 12.1799 23.933 12.4919 23.1704C12.8039 22.425 13.0986 21.6884 13.3759 20.9604C13.6706 20.2324 13.9219 19.5737 14.1299 18.9844H16.6259L16.7299 19.2704C16.4526 19.877 16.1232 20.5357 15.7419 21.2464C15.3606 21.9397 14.9619 22.633 14.5459 23.3264C14.1299 24.037 13.7139 24.713 13.2979 25.3544H11.5559Z",
+          fill: "#21242C"
+        }));
+      }
+      // period / US decimal separator
       return /*#__PURE__*/React.createElement("svg", {
         width: "40",
         height: "40",
         viewBox: "0 0 40 40",
         fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+        xmlns: "http://www.w3.org/2000/svg",
+        "data-test-id": "period-decimal"
       }, /*#__PURE__*/React.createElement("path", {
         d: "M18.3401 27.512c0-.232.04-.448.12-.648.088-.208.204-.388.348-.54.152-.152.328-.272.528-.36.208-.088.428-.132.66-.132.232 0 .448.044.648.132.208.088.388.208.54.36.152.152.272.332.36.54.088.2.132.416.132.648 0 .24-.044.46-.132.66-.088.2-.208.376-.36.528-.152.152-.332.268-.54.348-.2.088-.416.132-.648.132-.232 0-.452-.044-.66-.132-.2-.08-.376-.196-.528-.348-.144-.152-.26-.328-.348-.528-.08-.2-.12-.42-.12-.66z",
         fill: "#21242C"