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

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;
@@ -11997,8 +11995,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 +12020,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 +12030,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 +12097,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 +12122,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 +12148,7 @@ class Main extends React$1.Component {
       this.input.focus();
     };
   }
-  __init9() {
+  __init12() {
     this.callOnSessionChange = () => {
       const {onSessionChange} = this.props;
       if (onSessionChange) {
@@ -12105,14 +12156,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 +12182,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 +12194,7 @@ class Main extends React$1.Component {
       }
     };
   }
-  __init13() {
+  __init16() {
     this.onBlur = e => {
       const {relatedTarget, currentTarget} = e || ({});
       function getParentWithRoleTooltip(element, depth = 0) {
@@ -12157,7 +12208,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 +12217,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: ''
         });
@@ -12206,7 +12257,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 512
+        lineNumber: 568
       }
     }, React$1.createElement(mq.Static, {
       className: classes.static,
@@ -12220,7 +12271,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 513
+        lineNumber: 569
       }
     }));
     const midContent = React$1.createElement('div', {
@@ -12228,14 +12279,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,
@@ -12246,7 +12297,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 534
+        lineNumber: 590
       }
     }, React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12255,7 +12306,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 538
+        lineNumber: 594
       }
     })) : React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12264,28 +12315,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,
@@ -12293,7 +12344,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,
@@ -12301,10 +12352,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, {
@@ -12317,7 +12370,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),
@@ -12338,7 +12391,7 @@ class Main extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 587
+          lineNumber: 645
         }
       }, React$1.createElement(HorizontalKeypad, {
         additionalKeys: additionalKeys,
@@ -12347,13 +12400,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,
@@ -12367,7 +12420,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,
@@ -12377,7 +12430,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: {
@@ -12387,7 +12440,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 631
+        lineNumber: 689
       }
     }, React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12396,7 +12449,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 632
+        lineNumber: 690
       }
     })) : React$1.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -12405,7 +12458,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)) {
@@ -12420,14 +12473,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,
@@ -12438,7 +12491,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,
@@ -12450,14 +12503,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,
@@ -12473,14 +12526,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,
@@ -12492,14 +12545,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,
@@ -12507,13 +12560,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,
@@ -12521,7 +12574,7 @@ class Main extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 711
+          lineNumber: 769
         }
       }, midContent));
     }
@@ -12531,7 +12584,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 719
+        lineNumber: 777
       }
     }, midContent);
   }

package/module/index.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/math-inline@7.25.4</title>
+      <title>@pie-element/math-inline@7.26.0</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,6 +1,6 @@
 {
   "name": "@pie-element/math-inline",
-  "version": "7.25.4",
+  "version": "7.26.0",
   "modules": [
     {
       "name": "@pie-lib/pie-toolbox-math-rendering-module",

package/module/print.html

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