@pie-element/math-inline 8.4.7-next.7 → 8.4.7

package/module/print.js

@@ -1,5 +1,5 @@
-import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_pie_lib__pie_toolbox_math_rendering, _dll_lodash, _dll_pie_framework__mathquill, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.3.5/module/index.js";
-import {_dll_pie_lib__pie_toolbox_math_toolbar, _dll_pie_lib__pie_toolbox_math_input, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.10.5/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_pie_lib__pie_toolbox_math_rendering, _dll_lodash, _dll_pie_framework__mathquill, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.4.0/module/index.js";
+import {_dll_pie_lib__pie_toolbox_math_toolbar, _dll_pie_lib__pie_toolbox_math_input, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.11.0/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -11579,7 +11579,7 @@ function generateAdditionalKeys(keyData = []) {
 function isChildOfCurrentPieElement(child, parent) {
   let node = child;
   while (node !== null) {
-    if (node === parent) {
+    if (parent && node === parent) {
       return true;
     }
     node = node.parentNode;
@@ -11611,6 +11611,19 @@ function prepareForStatic(model, state) {
     }).replace(NEWLINE_LATEX, '\\embed{newLine}[]');
   }
 }
+function parseAnswers(session, model) {
+  const answers = {};
+  if (model.config && model.config.expression) {
+    let answerBlocks = 1;
+    (model.config.expression || '').replace(REGEX, () => {
+      answers[`r${answerBlocks}`] = {
+        value: session && session.answers && session.answers[`r${answerBlocks}`] && session.answers[`r${answerBlocks}`].value || ''
+      };
+      answerBlocks += 1;
+    });
+  }
+  return answers;
+}
 class Main extends React$1.Component {
   static __initStatic() {
     this.propTypes = {
@@ -11638,16 +11651,8 @@ class Main extends React$1.Component {
     Main.prototype.__init14.call(this);
     Main.prototype.__init15.call(this);
     Main.prototype.__init16.call(this);
-    const answers = {};
-    if (props.model.config && props.model.config.expression) {
-      let answerBlocks = 1;
-      (props.model.config.expression || '').replace(REGEX, () => {
-        answers[`r${answerBlocks}`] = {
-          value: props.session && props.session.answers && props.session.answers[`r${answerBlocks}`] && props.session.answers[`r${answerBlocks}`].value || ''
-        };
-        answerBlocks += 1;
-      });
-    }
+    const {model, session} = props;
+    const answers = parseAnswers(session, model);
     this.state = {
       session: {
         ...props.session,
@@ -11706,12 +11711,22 @@ class Main extends React$1.Component {
   }
   countResponseOccurrences(expression) {
     const pattern = /\{\{response\}\}/g;
-    const matches = _optionalChain([expression, 'optionalAccess', _5 => _5.match, 'call', _6 => _6(pattern)]);
+    const matches = _optionalChain([expression, 'optionalAccess', _10 => _10.match, 'call', _11 => _11(pattern)]);
     return matches ? matches.length : 0;
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
     const {config} = this.props.model;
     const {config: nextConfig = {}} = nextProps.model || ({});
+    const {session} = this.props;
+    const {session: nextSession = {}} = nextProps || ({});
+    if (session && nextSession && !isEqual(session.answers, nextSession.answers)) {
+      this.setState({
+        session: {
+          ...nextSession,
+          answers: parseAnswers(nextSession, this.props.model)
+        }
+      });
+    }
     if (config.note && config.language && config.language !== nextConfig.language && config.note === translator.t('mathInline.primaryCorrectWithAlternates', {
       lng: config.language
     })) {
@@ -11764,8 +11779,8 @@ class Main extends React$1.Component {
   }
   componentDidUpdate(prevProps, prevState) {
     this.handleAnswerBlockDomUpdate();
-    const prevResponseType = _optionalChain([prevProps, 'access', _7 => _7.model, 'optionalAccess', _8 => _8.config, 'optionalAccess', _9 => _9.responseType]);
-    const currentResponseType = _optionalChain([this, 'access', _10 => _10.props, 'access', _11 => _11.model, 'optionalAccess', _12 => _12.config, 'optionalAccess', _13 => _13.responseType]);
+    const prevResponseType = _optionalChain([prevProps, 'access', _12 => _12.model, 'optionalAccess', _13 => _13.config, 'optionalAccess', _14 => _14.responseType]);
+    const currentResponseType = _optionalChain([this, 'access', _15 => _15.props, 'access', _16 => _16.model, 'optionalAccess', _17 => _17.config, 'optionalAccess', _18 => _18.responseType]);
     if (prevResponseType !== currentResponseType) {
       this.updateAria();
     }
@@ -11811,22 +11826,21 @@ class Main extends React$1.Component {
   }
   __init4() {
     this.handleKeyDown = (event, id) => {
-      const {config} = this.props.model;
-      const myElement = document.getElementById(config.id);
-      let isTrigerredFromActualPieElement = true;
-      isTrigerredFromActualPieElement = isChildOfCurrentPieElement(event.target, myElement);
-      const isAnswerInputFocused = document.activeElement.getAttribute('aria-label') === 'Enter answer.';
-      const isClickOrTouchEvent = event.type === 'click' || event.type === 'touchstart';
-      if (isAnswerInputFocused && (event.key === 'ArrowDown' || isClickOrTouchEvent)) {
+      const isTrigerredFromActualPieElement = isChildOfCurrentPieElement(event.target, this.root);
+      const isAnswerInputFocused = this.mqStatic && _optionalChain([this, 'access', _19 => _19.mqStatic, 'access', _20 => _20.inputRef, 'optionalAccess', _21 => _21.current, 'access', _22 => _22.contains, 'call', _23 => _23(document.activeElement)]);
+      const {key, type} = event;
+      const isClickOrTouchEvent = type === 'click' || type === 'touchstart';
+      if (isAnswerInputFocused && (key === 'ArrowDown' || isClickOrTouchEvent)) {
         if (this.state.activeAnswerBlock !== id && isTrigerredFromActualPieElement) {
           this.cleanupKeyDownListener();
           this.setState({
             activeAnswerBlock: id
+          }, () => {
+            this.onSubFieldFocus(id);
+            if (key === 'ArrowDown') {
+              this.focusFirstKeypadElement();
+            }
           });
-          this.onSubFieldFocus(id);
-        }
-        if (event.key === 'ArrowDown') {
-          this.focusFirstKeypadElement();
         }
       } else if (event.key === 'Escape') {
         this.setState({
@@ -11986,7 +12000,7 @@ class Main extends React$1.Component {
       }
       function getDeepChildDataKeypad(element, depth = 0) {
         if (!element || depth >= 4) return null;
-        const child = _optionalChain([element, 'optionalAccess', _14 => _14.children, 'optionalAccess', _15 => _15[0]]);
+        const child = _optionalChain([element, 'optionalAccess', _24 => _24.children, 'optionalAccess', _25 => _25[0]]);
         if (!child) return null;
         if (child.attributes && child.attributes['data-keypad']) {
           return child;
@@ -11995,7 +12009,7 @@ class Main extends React$1.Component {
       }
       const parentWithTooltipRole = getParentWithRoleTooltip(relatedTarget);
       const childWithDataKeypad = parentWithTooltipRole ? getDeepChildDataKeypad(parentWithTooltipRole) : null;
-      if (!relatedTarget || !currentTarget || !_optionalChain([childWithDataKeypad, 'optionalAccess', _16 => _16.attributes, 'access', _17 => _17['data-keypad']])) {
+      if (!relatedTarget || !currentTarget || !_optionalChain([childWithDataKeypad, 'optionalAccess', _26 => _26.attributes, 'access', _27 => _27['data-keypad']])) {
         if (!isKeypadOpen) {
           this.setState({
             activeAnswerBlock: ''
@@ -12037,7 +12051,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 604
+        lineNumber: 616
       }
     }, React$1.createElement(mq.Static, {
       className: classes.static,
@@ -12051,7 +12065,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 605
+        lineNumber: 617
       }
     }));
     const midContent = React$1.createElement('div', {
@@ -12059,14 +12073,14 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 619
+        lineNumber: 631
       }
     }, mode === 'gather' && React$1.createElement('h2', {
       className: classes.srOnly,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 620
+        lineNumber: 632
       }
     }, "Math Equation Response Question"), viewMode && teacherInstructions && hasText(teacherInstructions) && (!animationsDisabled ? React$1.createElement(Collapsible, {
       className: classes.collapsible,
@@ -12077,7 +12091,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 626
+        lineNumber: 638
       }
     }, React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12086,7 +12100,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 630
+        lineNumber: 642
       }
     })) : React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12095,28 +12109,28 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 633
+        lineNumber: 645
       }
     })), prompt && React$1.createElement('div', {
       className: classes.promptContainer,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 637
+        lineNumber: 649
       }
     }, React$1.createElement(PreviewPrompt, {
       prompt: prompt,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 638
+        lineNumber: 650
       }
     })), studentPrintMode ? printView : React$1.createElement(Readable, {
       false: true,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 645
+        lineNumber: 657
       }
     }, React$1.createElement('div', {
       className: classes.inputAndKeypadContainer,
@@ -12124,7 +12138,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 646
+        lineNumber: 658
       }
     }, responseType === ResponseTypes.simple && React$1.createElement(SimpleQuestionBlock, {
       onSimpleResponseChange: this.onSimpleResponseChange,
@@ -12137,7 +12151,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 648
+        lineNumber: 660
       }
     }), responseType === ResponseTypes.advanced && React$1.createElement('div', {
       ref: tooltipContainerRef,
@@ -12151,7 +12165,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 660
+        lineNumber: 672
       }
     }, React$1.createElement(Tooltip, {
       ref: ref => this.setTooltipRef(ref),
@@ -12163,7 +12177,7 @@ class Main extends React$1.Component {
         popper: classes.keypadTooltipPopper
       },
       PopperProps: {
-        container: _optionalChain([tooltipContainerRef, 'optionalAccess', _18 => _18.current]) || undefined,
+        container: _optionalChain([tooltipContainerRef, 'optionalAccess', _28 => _28.current]) || undefined,
         placement: 'bottom-start',
         modifiers: {
           preventOverflow: {
@@ -12185,7 +12199,7 @@ class Main extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 695
+          lineNumber: 707
         }
       }, React$1.createElement(HorizontalKeypad, {
         additionalKeys: additionalKeys,
@@ -12194,13 +12208,13 @@ class Main extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 704
+          lineNumber: 716
         }
       })) || null),
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 670
+        lineNumber: 682
       }
     }, React$1.createElement(mq.Static, {
       className: classes.static,
@@ -12214,7 +12228,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 714
+        lineNumber: 726
       }
     }))))), viewMode && displayNote && React$1.createElement('div', {
       className: classes.note,
@@ -12224,7 +12238,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 732
+        lineNumber: 744
       }
     }), viewMode && rationale && hasText(rationale) && (!animationsDisabled ? React$1.createElement(Collapsible, {
       labels: {
@@ -12234,7 +12248,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 739
+        lineNumber: 751
       }
     }, React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12243,7 +12257,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 740
+        lineNumber: 752
       }
     })) : React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12252,17 +12266,16 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 743
+        lineNumber: 755
       }
     })));
     if (tooltipModeEnabled && (showCorrectAnswerToggle || teacherInstructions && hasText(teacherInstructions) || rationale && hasText(rationale) || feedback)) {
       return React$1.createElement(UiLayout, {
         extraCSSRules: extraCSSRules,
-        id: id,
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 756
+          lineNumber: 768
         }
       }, React$1.createElement(Tooltip, {
         interactive: true,
@@ -12275,14 +12288,14 @@ class Main extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 765
+            lineNumber: 777
           }
         }, React$1.createElement('div', {
           className: classes.main,
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 766
+            lineNumber: 778
           }
         }, showCorrectAnswerToggle && React$1.createElement(CorrectAnswerToggle, {
           language: language,
@@ -12293,7 +12306,7 @@ class Main extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 768
+            lineNumber: 780
           }
         })), teacherInstructions && hasText(teacherInstructions) && React$1.createElement(Collapsible, {
           className: classes.collapsible,
@@ -12305,14 +12318,14 @@ class Main extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 779
+            lineNumber: 791
           }
         }, React$1.createElement(PreviewPrompt, {
           prompt: teacherInstructions,
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 787
+            lineNumber: 799
           }
         })), displayNote && hasText(note) && React$1.createElement(Collapsible, {
           className: classes.collapsible,
@@ -12328,14 +12341,14 @@ class Main extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 791
+            lineNumber: 803
           }
         }, React$1.createElement(PreviewPrompt, {
           prompt: note,
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 799
+            lineNumber: 811
           }
         })), rationale && hasText(rationale) && React$1.createElement(Collapsible, {
           className: classes.collapsible,
@@ -12347,14 +12360,14 @@ class Main extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 804
+            lineNumber: 816
           }
         }, React$1.createElement(PreviewPrompt, {
           prompt: rationale,
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 812
+            lineNumber: 824
           }
         })), feedback && React$1.createElement(Feedback, {
           correctness: correctness.correctness,
@@ -12362,13 +12375,13 @@ class Main extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 816
+            lineNumber: 828
           }
         })),
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 757
+          lineNumber: 769
         }
       }, React$1.createElement('div', {
         className: classes.mainContainer,
@@ -12376,7 +12389,7 @@ class Main extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 820
+          lineNumber: 832
         }
       }, midContent)));
     }
@@ -12391,7 +12404,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 829
+        lineNumber: 841
       }
     }, midContent);
   }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "repository": "pie-framework/pie-elements",
-  "version": "8.4.7-next.7+fa996579e",
+  "version": "8.4.7",
   "main": "lib/index.js",
   "description": "",
   "scripts": {
@@ -14,7 +14,7 @@
     "@material-ui/core": "^3.9.2",
     "@pie-framework/mathquill": "^1.1.3",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/pie-toolbox": "2.10.0",
+    "@pie-lib/pie-toolbox": "2.10.1",
     "classnames": "^2.2.5",
     "debug": "^4.1.1",
     "lodash": "^4.17.10",
@@ -24,7 +24,7 @@
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "fa996579e3be43d638e8d2a434ba6a40c8052cf5",
+  "gitHead": "451b0779d505a4f14d70141cd4df7e8f25df67d6",
   "module": "src/index.js",
   "exports": {
     ".": "./src/index.js",