@pie-element/math-inline 8.4.7-next.9 → 8.4.8-next.0

package/module/element.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;
@@ -11842,7 +11842,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;
@@ -11874,6 +11874,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 = {
@@ -11901,16 +11914,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,
@@ -11969,12 +11974,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
     })) {
@@ -12027,8 +12042,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();
     }
@@ -12074,22 +12089,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({
@@ -12249,7 +12263,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;
@@ -12258,7 +12272,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: ''
@@ -12300,7 +12314,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 604
+        lineNumber: 616
       }
     }, React$1.createElement(mq.Static, {
       className: classes.static,
@@ -12314,7 +12328,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 605
+        lineNumber: 617
       }
     }));
     const midContent = React$1.createElement('div', {
@@ -12322,14 +12336,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,
@@ -12340,7 +12354,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 626
+        lineNumber: 638
       }
     }, React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12349,7 +12363,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 630
+        lineNumber: 642
       }
     })) : React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12358,28 +12372,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,
@@ -12387,7 +12401,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,
@@ -12400,7 +12414,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,
@@ -12414,7 +12428,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),
@@ -12426,7 +12440,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: {
@@ -12448,7 +12462,7 @@ class Main extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 695
+          lineNumber: 707
         }
       }, React$1.createElement(HorizontalKeypad, {
         additionalKeys: additionalKeys,
@@ -12457,13 +12471,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,
@@ -12477,7 +12491,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,
@@ -12487,7 +12501,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: {
@@ -12497,7 +12511,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 739
+        lineNumber: 751
       }
     }, React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12506,7 +12520,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 740
+        lineNumber: 752
       }
     })) : React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12515,17 +12529,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,
@@ -12538,14 +12551,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,
@@ -12556,7 +12569,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,
@@ -12568,14 +12581,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,
@@ -12591,14 +12604,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,
@@ -12610,14 +12623,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,
@@ -12625,13 +12638,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,
@@ -12639,7 +12652,7 @@ class Main extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 820
+          lineNumber: 832
         }
       }, midContent)));
     }
@@ -12654,7 +12667,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 829
+        lineNumber: 841
       }
     }, midContent);
   }

package/module/index.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/math-inline@8.4.6</title>
+      <title>@pie-element/math-inline@8.4.7</title>
       <script
         type="module"
         src="https://cdn.jsdelivr.net/npm/@pslb/demo-el@^1.0.0/dist/demo-el/demo-el.esm.js"></script>

package/module/manifest.json

@@ -1,14 +1,14 @@
 {
   "name": "@pie-element/math-inline",
-  "version": "8.4.6",
+  "version": "8.4.7",
   "modules": [
     {
       "name": "@pie-lib/pie-toolbox-math-rendering-module",
-      "version": "3.3.5"
+      "version": "3.4.0"
     },
     {
       "name": "@pie-lib/pie-toolbox-module",
-      "version": "5.10.5"
+      "version": "5.11.0"
     }
   ]
 }

package/module/print.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/math-inline@8.4.6</title>
+      <title>@pie-element/math-inline@8.4.7</title>
       <link
         href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
         rel="stylesheet"