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

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;
@@ -11630,7 +11628,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() {
@@ -11737,8 +11736,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 +11761,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 +11771,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 +11838,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 +11863,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 +11889,7 @@ class Main extends React$1.Component {
       this.input.focus();
     };
   }
-  __init9() {
+  __init12() {
     this.callOnSessionChange = () => {
       const {onSessionChange} = this.props;
       if (onSessionChange) {
@@ -11845,14 +11897,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 +11923,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 +11935,7 @@ class Main extends React$1.Component {
       }
     };
   }
-  __init13() {
+  __init16() {
     this.onBlur = e => {
       const {relatedTarget, currentTarget} = e || ({});
       function getParentWithRoleTooltip(element, depth = 0) {
@@ -11897,7 +11949,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 +11958,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: ''
         });
@@ -11926,7 +11978,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;
@@ -11946,7 +11998,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 512
+        lineNumber: 569
       }
     }, React$1.createElement(mq.Static, {
       className: classes.static,
@@ -11960,7 +12012,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 513
+        lineNumber: 570
       }
     }));
     const midContent = React$1.createElement('div', {
@@ -11968,14 +12020,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,
@@ -11986,7 +12038,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 534
+        lineNumber: 591
       }
     }, React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -11995,7 +12047,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 538
+        lineNumber: 595
       }
     })) : React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12004,28 +12056,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,
@@ -12033,7 +12085,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,
@@ -12041,12 +12093,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),
@@ -12057,7 +12112,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),
@@ -12068,6 +12123,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,
@@ -12078,7 +12136,7 @@ class Main extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 587
+          lineNumber: 650
         }
       }, React$1.createElement(HorizontalKeypad, {
         additionalKeys: additionalKeys,
@@ -12087,13 +12145,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,
@@ -12107,7 +12165,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,
@@ -12117,7 +12175,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: {
@@ -12127,7 +12185,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 631
+        lineNumber: 694
       }
     }, React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12136,7 +12194,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 632
+        lineNumber: 695
       }
     })) : React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12145,7 +12203,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)) {
@@ -12160,14 +12218,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,
@@ -12178,7 +12236,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,
@@ -12190,14 +12248,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,
@@ -12213,14 +12271,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,
@@ -12232,14 +12290,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,
@@ -12247,13 +12305,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,
@@ -12261,7 +12319,7 @@ class Main extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 711
+          lineNumber: 774
         }
       }, midContent));
     }
@@ -12271,7 +12329,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 719
+        lineNumber: 782
       }
     }, midContent);
   }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "repository": "pie-framework/pie-elements",
-  "version": "7.26.1-next.0+38ced5340",
+  "version": "7.26.1-next.7+9d14615fc",
   "main": "lib/index.js",
   "description": "",
   "scripts": {
@@ -24,7 +24,7 @@
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "38ced5340848ae14e27c36cf6d0a30eecebda77a",
+  "gitHead": "9d14615fc9d273d061c33e8cc55850f8671226a1",
   "module": "src/index.js",
   "exports": {
     ".": "./src/index.js",