@pie-element/math-inline 7.26.1-next.0 → 7.26.1-next.7

package/module/element.js

@@ -8398,7 +8398,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) {
@@ -8406,17 +8408,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);
   }
@@ -8432,12 +8425,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;
@@ -8446,10 +8440,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, {
@@ -8459,21 +8454,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: {
@@ -8485,12 +8480,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
       }
     })));
   }
@@ -11874,6 +11869,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;
@@ -11890,7 +11888,8 @@ class Main extends React$1.Component {
         answers
       },
       activeAnswerBlock: '',
-      showCorrect: this.props.model.config.alwaysShowCorrect || false
+      showCorrect: this.props.model.config.alwaysShowCorrect || false,
+      tooltipContainerRef: React$1.createRef()
     };
   }
   UNSAFE_componentWillMount() {
@@ -11997,8 +11996,13 @@ class Main extends React$1.Component {
     this.updateAria();
     setTimeout(() => renderMath(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 = () => {
@@ -12017,7 +12021,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);
@@ -12027,9 +12031,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: {
@@ -12039,14 +12098,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;
@@ -12071,12 +12123,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') {
@@ -12097,7 +12149,7 @@ class Main extends React$1.Component {
       this.input.focus();
     };
   }
-  __init9() {
+  __init12() {
     this.callOnSessionChange = () => {
       const {onSessionChange} = this.props;
       if (onSessionChange) {
@@ -12105,14 +12157,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) {
@@ -12131,7 +12183,7 @@ class Main extends React$1.Component {
       }
     };
   }
-  __init12() {
+  __init15() {
     this.getFieldName = (changeField, fields) => {
       const {answers} = this.state.session;
       if (Object.keys(answers || ({})).length) {
@@ -12143,7 +12195,7 @@ class Main extends React$1.Component {
       }
     };
   }
-  __init13() {
+  __init16() {
     this.onBlur = e => {
       const {relatedTarget, currentTarget} = e || ({});
       function getParentWithRoleTooltip(element, depth = 0) {
@@ -12157,7 +12209,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;
@@ -12166,7 +12218,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: ''
         });
@@ -12186,7 +12238,7 @@ class Main extends React$1.Component {
   }
   render() {
     const {model, classes} = this.props;
-    const {activeAnswerBlock, showCorrect, session} = this.state;
+    const {activeAnswerBlock, showCorrect, session, tooltipContainerRef} = this.state;
     const {config, correctness, disabled, view, teacherInstructions, rationale, feedback, animationsDisabled, printMode, alwaysShowCorrect, language} = model || ({});
     if (!config) {
       return null;
@@ -12206,7 +12258,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 512
+        lineNumber: 569
       }
     }, React$1.createElement(mq.Static, {
       className: classes.static,
@@ -12220,7 +12272,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 513
+        lineNumber: 570
       }
     }));
     const midContent = React$1.createElement('div', {
@@ -12228,14 +12280,14 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 527
+        lineNumber: 584
       }
     }, mode === 'gather' && React$1.createElement('h2', {
       className: classes.srOnly,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 528
+        lineNumber: 585
       }
     }, "Math Equation Response Question"), viewMode && teacherInstructions && hasText(teacherInstructions) && (!animationsDisabled ? React$1.createElement(Collapsible, {
       className: classes.collapsible,
@@ -12246,7 +12298,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 534
+        lineNumber: 591
       }
     }, React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12255,7 +12307,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 538
+        lineNumber: 595
       }
     })) : React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12264,28 +12316,28 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 541
+        lineNumber: 598
       }
     })), prompt && React$1.createElement('div', {
       className: classes.promptContainer,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 545
+        lineNumber: 602
       }
     }, React$1.createElement(PreviewPrompt, {
       prompt: prompt,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 546
+        lineNumber: 603
       }
     })), studentPrintMode ? printView : React$1.createElement(Readable, {
       false: true,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 553
+        lineNumber: 610
       }
     }, React$1.createElement('div', {
       className: classes.inputAndKeypadContainer,
@@ -12293,7 +12345,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 554
+        lineNumber: 611
       }
     }, responseType === ResponseTypes.simple && React$1.createElement(SimpleQuestionBlock, {
       onSimpleResponseChange: this.onSimpleResponseChange,
@@ -12301,12 +12353,15 @@ 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: 613
       }
     }), responseType === ResponseTypes.advanced && React$1.createElement('div', {
+      ref: tooltipContainerRef,
       className: cx(classes.expression, {
         [classes.incorrect]: !emptyResponse && !correct && !showCorrect,
         [classes.correct]: !emptyResponse && (correct || showCorrect),
@@ -12317,7 +12372,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 566
+        lineNumber: 625
       }
     }, React$1.createElement(Tooltip, {
       ref: ref => this.setTooltipRef(ref),
@@ -12328,6 +12383,9 @@ class Main extends React$1.Component {
         tooltip: classes.keypadTooltip,
         popper: classes.keypadTooltipPopper
       },
+      PopperProps: {
+        container: _optionalChain([tooltipContainerRef, 'optionalAccess', _18 => _18.current]) || undefined
+      },
       title: Object.keys(session.answers).map(answerId => answerId === activeAnswerBlock && !(showCorrect || disabled) && React$1.createElement('div', {
         'data-keypad': true,
         key: answerId,
@@ -12338,7 +12396,7 @@ class Main extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 587
+          lineNumber: 650
         }
       }, React$1.createElement(HorizontalKeypad, {
         additionalKeys: additionalKeys,
@@ -12347,13 +12405,13 @@ class Main extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 596
+          lineNumber: 659
         }
       })) || null),
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 575
+        lineNumber: 635
       }
     }, React$1.createElement(mq.Static, {
       className: classes.static,
@@ -12367,7 +12425,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 606
+        lineNumber: 669
       }
     }))))), viewMode && displayNote && React$1.createElement('div', {
       className: classes.note,
@@ -12377,7 +12435,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 624
+        lineNumber: 687
       }
     }), viewMode && rationale && hasText(rationale) && (!animationsDisabled ? React$1.createElement(Collapsible, {
       labels: {
@@ -12387,7 +12445,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 631
+        lineNumber: 694
       }
     }, React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12396,7 +12454,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 632
+        lineNumber: 695
       }
     })) : React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12405,7 +12463,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 635
+        lineNumber: 698
       }
     })));
     if (tooltipModeEnabled && (showCorrectAnswerToggle || teacherInstructions && hasText(teacherInstructions) || rationale && hasText(rationale) || feedback)) {
@@ -12420,14 +12478,14 @@ class Main extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 656
+            lineNumber: 719
           }
         }, React$1.createElement('div', {
           className: classes.main,
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 657
+            lineNumber: 720
           }
         }, showCorrectAnswerToggle && React$1.createElement(CorrectAnswerToggle, {
           language: language,
@@ -12438,7 +12496,7 @@ class Main extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 659
+            lineNumber: 722
           }
         })), teacherInstructions && hasText(teacherInstructions) && React$1.createElement(Collapsible, {
           className: classes.collapsible,
@@ -12450,14 +12508,14 @@ class Main extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 670
+            lineNumber: 733
           }
         }, React$1.createElement(PreviewPrompt, {
           prompt: teacherInstructions,
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 678
+            lineNumber: 741
           }
         })), displayNote && hasText(note) && React$1.createElement(Collapsible, {
           className: classes.collapsible,
@@ -12473,14 +12531,14 @@ class Main extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 682
+            lineNumber: 745
           }
         }, React$1.createElement(PreviewPrompt, {
           prompt: note,
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 690
+            lineNumber: 753
           }
         })), rationale && hasText(rationale) && React$1.createElement(Collapsible, {
           className: classes.collapsible,
@@ -12492,14 +12550,14 @@ class Main extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 695
+            lineNumber: 758
           }
         }, React$1.createElement(PreviewPrompt, {
           prompt: rationale,
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 703
+            lineNumber: 766
           }
         })), feedback && React$1.createElement(Feedback, {
           correctness: correctness.correctness,
@@ -12507,13 +12565,13 @@ class Main extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 707
+            lineNumber: 770
           }
         })),
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 648
+          lineNumber: 711
         }
       }, React$1.createElement('div', {
         className: classes.mainContainer,
@@ -12521,7 +12579,7 @@ class Main extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 711
+          lineNumber: 774
         }
       }, midContent));
     }
@@ -12531,7 +12589,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 719
+        lineNumber: 782
       }
     }, midContent);
   }