@pie-element/math-inline 7.26.0 → 7.26.1-next.3

package/module/print.js

@@ -8138,7 +8138,9 @@ class SimpleQuestionBlockRaw extends React$2.Component {
       model: PropTypes$1.object.isRequired,
       emptyResponse: PropTypes$1.bool,
       session: PropTypes$1.object.isRequired,
-      showCorrect: PropTypes$1.bool
+      showCorrect: PropTypes$1.bool,
+      onSubFieldFocus: PropTypes$1.func.isRequired,
+      showKeypad: PropTypes$1.bool.isRequired
     };
   }
   constructor(props) {
@@ -8146,17 +8148,8 @@ class SimpleQuestionBlockRaw extends React$2.Component {
     SimpleQuestionBlockRaw.prototype.__init.call(this);
     SimpleQuestionBlockRaw.prototype.__init2.call(this);
     SimpleQuestionBlockRaw.prototype.__init3.call(this);
-    this.state = {
-      showKeypad: true
-    };
     this.mathToolBarId = `math-toolbar-${new Date().getTime()}`;
   }
-  componentDidMount() {
-    window.addEventListener('click', this.handleClick);
-  }
-  componentWillUnmount() {
-    window.removeEventListener('click', this.handleClick);
-  }
   __init() {
     this.mathToolBarContainsTarget = e => document.getElementById(this.mathToolBarId).contains(e.target);
   }
@@ -8172,12 +8165,13 @@ class SimpleQuestionBlockRaw extends React$2.Component {
     };
   }
   __init3() {
-    this.onFocus = () => this.setState({
-      showKeypad: true
-    });
+    this.onFocus = () => {
+      const {onSubFieldFocus} = this.props;
+      onSubFieldFocus(this.mathToolBarId);
+    };
   }
   render() {
-    const {classes, model, showCorrect, session, emptyResponse, onSimpleResponseChange} = this.props;
+    const {classes, model, showCorrect, session, emptyResponse, onSimpleResponseChange, showKeypad} = this.props;
     const {config, disabled, correctness} = model || ({});
     if (!config) {
       return;
@@ -8186,10 +8180,11 @@ class SimpleQuestionBlockRaw extends React$2.Component {
     const {responses, equationEditor} = config;
     return React$2.createElement('div', {
       className: classes.expression,
+      'data-keypad': true,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 62
+        lineNumber: 57
       }
     }, showCorrect || disabled ? React$2.createElement('div', {
       className: cx$1(classes.static, {
@@ -8199,21 +8194,21 @@ class SimpleQuestionBlockRaw extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 64
+        lineNumber: 59
       }
     }, React$2.createElement(mq$1.Static, {
       latex: showCorrect ? responses && responses.length && responses[0].answer : session.response || '',
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 70
+        lineNumber: 65
       }
     })) : React$2.createElement('div', {
       id: this.mathToolBarId,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 75
+        lineNumber: 70
       }
     }, React$2.createElement(MathToolbar, {
       classNames: {
@@ -8225,12 +8220,12 @@ class SimpleQuestionBlockRaw extends React$2.Component {
       onDone: () => {},
       onFocus: this.onFocus,
       controlledKeypad: true,
-      showKeypad: this.state.showKeypad,
+      showKeypad: showKeypad,
       hideDoneButton: true,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 76
+        lineNumber: 71
       }
     })));
   }
@@ -11614,6 +11609,9 @@ class Main extends React$1.Component {
     Main.prototype.__init11.call(this);
     Main.prototype.__init12.call(this);
     Main.prototype.__init13.call(this);
+    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;
@@ -11737,8 +11735,13 @@ class Main extends React$1.Component {
     this.updateAria();
     setTimeout(() => renderMath$1(this.root), 100);
   }
-  componentDidUpdate() {
+  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]);
+    if (prevResponseType !== currentResponseType) {
+      this.updateAria();
+    }
   }
   __init2() {
     this.updateAria = () => {
@@ -11757,7 +11760,7 @@ class Main extends React$1.Component {
               instructionsElement = document.createElement('span');
               instructionsElement.id = instructionsId;
               instructionsElement.className = classes.srOnly;
-              instructionsElement.textContent = 'This field automatically displays a math keypad. Both keypad and keyboard input are accepted, and keyboard entry accepts LaTeX markup.';
+              instructionsElement.textContent = 'This field supports both keypad and keyboard input. Use the keyboard to access and interact with the on-screen math keypad, which accepts LaTeX markup. Use the down arrow key to open the keypad and navigate its buttons. Use the escape key to close the keypad and return to the input field.';
               parent.insertBefore(instructionsElement, elem);
             }
             elem.setAttribute('aria-describedby', instructionsId);
@@ -11767,9 +11770,64 @@ class Main extends React$1.Component {
     };
   }
   __init3() {
-    this.onDone = () => {};
+    this.focusFirstKeypadElement = () => {
+      setTimeout(() => {
+        const keypadElement = document.querySelector('[data-keypad]');
+        if (keypadElement) {
+          const firstButton = keypadElement.querySelector("button, [role='button']");
+          if (firstButton) {
+            firstButton.focus();
+          }
+        }
+      }, 0);
+    };
   }
   __init4() {
+    this.handleKeyDown = (event, id) => {
+      const isAnswerInputFocused = document.activeElement.getAttribute('aria-label') === 'Enter answer.';
+      const isClickOrTouchEvent = event.type === 'click' || event.type === 'touchstart';
+      if (isAnswerInputFocused && (event.key === 'ArrowDown' || isClickOrTouchEvent)) {
+        this.setState({
+          activeAnswerBlock: id
+        }, () => {
+          if (event.key === 'ArrowDown') {
+            this.focusFirstKeypadElement();
+          }
+        });
+      }
+      if (!isAnswerInputFocused && isClickOrTouchEvent || event.key === 'Escape') {
+        this.setState({
+          activeAnswerBlock: ''
+        });
+      }
+    };
+  }
+  __init5() {
+    this.onSubFieldFocus = id => {
+      const handleEvent = event => {
+        this.handleKeyDown(event, id);
+      };
+      document.addEventListener('keydown', handleEvent);
+      document.addEventListener('click', handleEvent);
+      document.addEventListener('touchstart', handleEvent);
+    };
+  }
+  __init6() {
+    this.cleanupKeyDownListener = () => {
+      document.removeEventListener('keydown', this.handleEvent);
+      document.removeEventListener('click', this.handleEvent);
+      document.removeEventListener('touchstart', this.handleEvent);
+    };
+  }
+  componentWillUnmount() {
+    if (this.cleanupKeyDownListener) {
+      this.cleanupKeyDownListener();
+    }
+  }
+  __init7() {
+    this.onDone = () => {};
+  }
+  __init8() {
     this.onSimpleResponseChange = response => {
       this.setState(state => ({
         session: {
@@ -11779,14 +11837,7 @@ class Main extends React$1.Component {
       }), this.callOnSessionChange);
     };
   }
-  __init5() {
-    this.onSubFieldFocus = id => {
-      this.setState({
-        activeAnswerBlock: id
-      });
-    };
-  }
-  __init6() {
+  __init9() {
     this.toNodeData = data => {
       if (!data) {
         return;
@@ -11811,12 +11862,12 @@ class Main extends React$1.Component {
       }
     };
   }
-  __init7() {
+  __init10() {
     this.setInput = input => {
       this.input = input;
     };
   }
-  __init8() {
+  __init11() {
     this.onClick = data => {
       const c = this.toNodeData(data);
       if (c.type === 'clear') {
@@ -11837,7 +11888,7 @@ class Main extends React$1.Component {
       this.input.focus();
     };
   }
-  __init9() {
+  __init12() {
     this.callOnSessionChange = () => {
       const {onSessionChange} = this.props;
       if (onSessionChange) {
@@ -11845,14 +11896,14 @@ class Main extends React$1.Component {
       }
     };
   }
-  __init10() {
+  __init13() {
     this.toggleShowCorrect = show => {
       this.setState({
         showCorrect: show
       }, this.handleAnswerBlockDomUpdate);
     };
   }
-  __init11() {
+  __init14() {
     this.subFieldChanged = (name, subfieldValue) => {
       updateSpans();
       if (name) {
@@ -11871,7 +11922,7 @@ class Main extends React$1.Component {
       }
     };
   }
-  __init12() {
+  __init15() {
     this.getFieldName = (changeField, fields) => {
       const {answers} = this.state.session;
       if (Object.keys(answers || ({})).length) {
@@ -11883,7 +11934,7 @@ class Main extends React$1.Component {
       }
     };
   }
-  __init13() {
+  __init16() {
     this.onBlur = e => {
       const {relatedTarget, currentTarget} = e || ({});
       function getParentWithRoleTooltip(element, depth = 0) {
@@ -11897,7 +11948,7 @@ class Main extends React$1.Component {
       }
       function getDeepChildDataKeypad(element, depth = 0) {
         if (!element || depth >= 4) return null;
-        const child = _optionalChain([element, 'optionalAccess', _7 => _7.children, 'optionalAccess', _8 => _8[0]]);
+        const child = _optionalChain([element, 'optionalAccess', _14 => _14.children, 'optionalAccess', _15 => _15[0]]);
         if (!child) return null;
         if (child.attributes && child.attributes['data-keypad']) {
           return child;
@@ -11906,7 +11957,7 @@ class Main extends React$1.Component {
       }
       const parentWithTooltipRole = getParentWithRoleTooltip(relatedTarget);
       const childWithDataKeypad = parentWithTooltipRole ? getDeepChildDataKeypad(parentWithTooltipRole) : null;
-      if (!relatedTarget || !currentTarget || !_optionalChain([childWithDataKeypad, 'optionalAccess', _9 => _9.attributes, 'access', _10 => _10['data-keypad']])) {
+      if (!relatedTarget || !currentTarget || !_optionalChain([childWithDataKeypad, 'optionalAccess', _16 => _16.attributes, 'access', _17 => _17['data-keypad']])) {
         this.setState({
           activeAnswerBlock: ''
         });
@@ -11946,7 +11997,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 512
+        lineNumber: 568
       }
     }, React$1.createElement(mq.Static, {
       className: classes.static,
@@ -11960,7 +12011,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 513
+        lineNumber: 569
       }
     }));
     const midContent = React$1.createElement('div', {
@@ -11968,14 +12019,14 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 527
+        lineNumber: 583
       }
     }, mode === 'gather' && React$1.createElement('h2', {
       className: classes.srOnly,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 528
+        lineNumber: 584
       }
     }, "Math Equation Response Question"), viewMode && teacherInstructions && hasText(teacherInstructions) && (!animationsDisabled ? React$1.createElement(Collapsible, {
       className: classes.collapsible,
@@ -11986,7 +12037,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 534
+        lineNumber: 590
       }
     }, React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -11995,7 +12046,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 538
+        lineNumber: 594
       }
     })) : React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12004,28 +12055,28 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 541
+        lineNumber: 597
       }
     })), prompt && React$1.createElement('div', {
       className: classes.promptContainer,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 545
+        lineNumber: 601
       }
     }, React$1.createElement(PreviewPrompt, {
       prompt: prompt,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 546
+        lineNumber: 602
       }
     })), studentPrintMode ? printView : React$1.createElement(Readable, {
       false: true,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 553
+        lineNumber: 609
       }
     }, React$1.createElement('div', {
       className: classes.inputAndKeypadContainer,
@@ -12033,7 +12084,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 554
+        lineNumber: 610
       }
     }, responseType === ResponseTypes.simple && React$1.createElement(SimpleQuestionBlock, {
       onSimpleResponseChange: this.onSimpleResponseChange,
@@ -12041,10 +12092,12 @@ class Main extends React$1.Component {
       emptyResponse: emptyResponse,
       model: model,
       session: session,
+      onSubFieldFocus: this.onSubFieldFocus,
+      showKeypad: !!activeAnswerBlock,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 556
+        lineNumber: 612
       }
     }), responseType === ResponseTypes.advanced && React$1.createElement('div', {
       className: cx(classes.expression, {
@@ -12057,7 +12110,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 566
+        lineNumber: 624
       }
     }, React$1.createElement(Tooltip, {
       ref: ref => this.setTooltipRef(ref),
@@ -12078,7 +12131,7 @@ class Main extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 587
+          lineNumber: 645
         }
       }, React$1.createElement(HorizontalKeypad, {
         additionalKeys: additionalKeys,
@@ -12087,13 +12140,13 @@ class Main extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 596
+          lineNumber: 654
         }
       })) || null),
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 575
+        lineNumber: 633
       }
     }, React$1.createElement(mq.Static, {
       className: classes.static,
@@ -12107,7 +12160,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 606
+        lineNumber: 664
       }
     }))))), viewMode && displayNote && React$1.createElement('div', {
       className: classes.note,
@@ -12117,7 +12170,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 624
+        lineNumber: 682
       }
     }), viewMode && rationale && hasText(rationale) && (!animationsDisabled ? React$1.createElement(Collapsible, {
       labels: {
@@ -12127,7 +12180,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 631
+        lineNumber: 689
       }
     }, React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12136,7 +12189,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 632
+        lineNumber: 690
       }
     })) : React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12145,7 +12198,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 635
+        lineNumber: 693
       }
     })));
     if (tooltipModeEnabled && (showCorrectAnswerToggle || teacherInstructions && hasText(teacherInstructions) || rationale && hasText(rationale) || feedback)) {
@@ -12160,14 +12213,14 @@ class Main extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 656
+            lineNumber: 714
           }
         }, React$1.createElement('div', {
           className: classes.main,
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 657
+            lineNumber: 715
           }
         }, showCorrectAnswerToggle && React$1.createElement(CorrectAnswerToggle, {
           language: language,
@@ -12178,7 +12231,7 @@ class Main extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 659
+            lineNumber: 717
           }
         })), teacherInstructions && hasText(teacherInstructions) && React$1.createElement(Collapsible, {
           className: classes.collapsible,
@@ -12190,14 +12243,14 @@ class Main extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 670
+            lineNumber: 728
           }
         }, React$1.createElement(PreviewPrompt, {
           prompt: teacherInstructions,
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 678
+            lineNumber: 736
           }
         })), displayNote && hasText(note) && React$1.createElement(Collapsible, {
           className: classes.collapsible,
@@ -12213,14 +12266,14 @@ class Main extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 682
+            lineNumber: 740
           }
         }, React$1.createElement(PreviewPrompt, {
           prompt: note,
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 690
+            lineNumber: 748
           }
         })), rationale && hasText(rationale) && React$1.createElement(Collapsible, {
           className: classes.collapsible,
@@ -12232,14 +12285,14 @@ class Main extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 695
+            lineNumber: 753
           }
         }, React$1.createElement(PreviewPrompt, {
           prompt: rationale,
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 703
+            lineNumber: 761
           }
         })), feedback && React$1.createElement(Feedback, {
           correctness: correctness.correctness,
@@ -12247,13 +12300,13 @@ class Main extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 707
+            lineNumber: 765
           }
         })),
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 648
+          lineNumber: 706
         }
       }, React$1.createElement('div', {
         className: classes.mainContainer,
@@ -12261,7 +12314,7 @@ class Main extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 711
+          lineNumber: 769
         }
       }, midContent));
     }
@@ -12271,7 +12324,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 719
+        lineNumber: 777
       }
     }, midContent);
   }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "repository": "pie-framework/pie-elements",
-  "version": "7.26.0",
+  "version": "7.26.1-next.3+945172e40",
   "main": "lib/index.js",
   "description": "",
   "scripts": {
@@ -24,7 +24,7 @@
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "37cbcaab6c3bc738762797a20188e5a76199103e",
+  "gitHead": "945172e407948052eeb136653c857d8669f48fa0",
   "module": "src/index.js",
   "exports": {
     ".": "./src/index.js",