@pie-element/multiple-choice 9.16.5-next.0 → 9.16.5-next.6

package/module/element.js

@@ -12239,7 +12239,7 @@ const inputStyles = {
   }
 };
 const StyledCheckbox = styles$b.withStyles(inputStyles)(props => {
-  const {correctness, classes, checked, onChange, disabled, value, id} = props;
+  const {correctness, classes, checked, onChange, disabled, value, id, onKeyDown, inputRef} = props;
   const key = k => correctness ? `${correctness}-${k}` : k;
   const resolved = {
     root: classes[key('root')],
@@ -12254,7 +12254,9 @@ const StyledCheckbox = styles$b.withStyles(inputStyles)(props => {
   };
   return React$4.createElement(Checkbox, {
     id: id,
+    inputRef: inputRef,
     'aria-checked': checked,
+    onKeyDown: onKeyDown,
     focusVisibleClassName: checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked,
     disableRipple: true,
     ...miniProps,
@@ -12272,7 +12274,7 @@ const StyledCheckbox = styles$b.withStyles(inputStyles)(props => {
   });
 });
 const StyledRadio = styles$b.withStyles(inputStyles)(props => {
-  const {correctness, classes, checked, onChange, disabled, value, id, tagName} = props;
+  const {correctness, classes, checked, onChange, disabled, value, id, tagName, inputRef} = props;
   const key = k => correctness ? `${correctness}-${k}` : k;
   const resolved = {
     root: classes[key('root')],
@@ -12287,6 +12289,7 @@ const StyledRadio = styles$b.withStyles(inputStyles)(props => {
   };
   return React$4.createElement(Radio, {
     id: id,
+    inputRef: inputRef,
     'aria-checked': checked,
     focusVisibleClassName: checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked,
     disableRipple: true,
@@ -12301,7 +12304,7 @@ const StyledRadio = styles$b.withStyles(inputStyles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 165
+      lineNumber: 167
     }
   });
 });
@@ -12320,6 +12323,7 @@ class ChoiceInput extends React$4.Component {
       value: PropTypes$3.string.isRequired,
       classes: PropTypes$3.object,
       className: PropTypes$3.string,
+      tagName: PropTypes$3.string,
       hideTick: PropTypes$3.bool,
       isEvaluateMode: PropTypes$3.bool,
       choicesLayout: PropTypes$3.oneOf(['vertical', 'grid', 'horizontal']),
@@ -12335,6 +12339,7 @@ class ChoiceInput extends React$4.Component {
   }
   constructor(props) {
     super(props);
+    ChoiceInput.prototype.__init.call(this);
     this.onToggleChoice = this.onToggleChoice.bind(this);
     this.choiceId = this.generateChoiceId();
     this.descId = `${this.choiceId}-desc`;
@@ -12345,6 +12350,28 @@ class ChoiceInput extends React$4.Component {
   generateChoiceId() {
     return 'choice-' + (Math.random() * 10000).toFixed();
   }
+  __init() {
+    this.handleKeyDown = event => {
+      const {choiceMode} = this.props;
+      if (choiceMode !== 'checkbox') return;
+      const isArrowDown = event.key === 'ArrowDown';
+      const isArrowUp = event.key === 'ArrowUp';
+      if (!isArrowDown && !isArrowUp) return;
+      event.preventDefault();
+      const currentEl = document.getElementById(this.choiceId);
+      if (!currentEl) return;
+      const fieldset = currentEl.closest('fieldset');
+      if (!fieldset) return;
+      const groupCheckboxes = Array.from(fieldset.querySelectorAll('input[type="checkbox"]'));
+      const currentIndex = groupCheckboxes.findIndex(el => el === currentEl);
+      if (currentIndex === -1) return;
+      const nextIndex = isArrowDown ? currentIndex + 1 : currentIndex - 1;
+      const nextEl = groupCheckboxes[nextIndex];
+      if (nextEl) {
+        nextEl.focus();
+      }
+    };
+  }
   render() {
     const {choiceMode, disabled, displayKey, feedback, label, correctness, classes, className, rationale, hideTick, isEvaluateMode, choicesLayout, value, checked, tagName, isSelectionButtonBelow} = this.props;
     const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;
@@ -12359,7 +12386,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 255
+        lineNumber: 290
       }
     }, displayKey, ".", '\u00A0', React$4.createElement(PreviewPrompt$1, {
       className: "label",
@@ -12368,7 +12395,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 257
+        lineNumber: 292
       }
     })) : React$4.createElement(PreviewPrompt$1, {
       className: "label",
@@ -12377,7 +12404,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 260
+        lineNumber: 295
       }
     }));
     const screenReaderLabel = React$4.createElement('span', {
@@ -12386,7 +12413,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 266
+        lineNumber: 301
       }
     }, choiceMode === 'checkbox' ? 'Checkbox to select the answer below' : 'Radio button to select the answer below');
     const tagProps = {
@@ -12397,6 +12424,7 @@ class ChoiceInput extends React$4.Component {
       value,
       id: this.choiceId,
       onChange: this.onToggleChoice,
+      onKeyDown: this.handleKeyDown,
       'aria-describedby': this.descId
     };
     const hasMathOrImage = typeof label === 'string' && (label.includes('<math') || label.includes('\\(') || label.includes('\\[') || label.includes('<img') || label.includes('data-latex') || label.includes('data-raw') || label.includes('<mjx-container'));
@@ -12405,7 +12433,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 293
+        lineNumber: 329
       }
     }, hasMathOrImage && screenReaderLabel, React$4.createElement(Tag, {
       ...tagProps,
@@ -12415,14 +12443,15 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 295
+        lineNumber: 331
       }
     }), displayKey ? `${displayKey}.` : '') : React$4.createElement(React$4.Fragment, null, hasMathOrImage && screenReaderLabel, React$4.createElement(Tag, {
       ...tagProps,
+      inputRef: this.props.autoFocusRef,
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 301
+        lineNumber: 337
       }
     }));
     return React$4.createElement('div', {
@@ -12430,28 +12459,28 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 306
+        lineNumber: 342
       }
     }, React$4.createElement('div', {
       className: classes.row,
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 307
+        lineNumber: 343
       }
     }, !hideTick && isEvaluateMode && React$4.createElement(FeedbackTick$1, {
       correctness: correctness,
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 308
+        lineNumber: 344
       }
     }), React$4.createElement('div', {
       className: classNames$2(holderClassNames, 'checkbox-holder'),
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 309
+        lineNumber: 345
       }
     }, React$4.createElement(StyledFormControlLabel, {
       label: choicelabel,
@@ -12462,7 +12491,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 310
+        lineNumber: 346
       }
     }))), rationale && React$4.createElement(PreviewPrompt$1, {
       className: "rationale",
@@ -12471,7 +12500,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 319
+        lineNumber: 355
       }
     }), React$4.createElement(Feedback, {
       feedback: feedback,
@@ -12479,7 +12508,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 320
+        lineNumber: 356
       }
     }));
   }
@@ -12508,7 +12537,7 @@ class Choice extends React$3.Component {
     };
   }
   render() {
-    const {choice, index, choicesLength, showCorrect, isEvaluateMode, choiceMode, disabled, checked, correctness, displayKey, classes, choicesLayout, gridColumns, isSelectionButtonBelow, selectedAnswerBackgroundColor, tagName} = this.props;
+    const {choice, index, choicesLength, showCorrect, isEvaluateMode, choiceMode, disabled, checked, correctness, displayKey, classes, choicesLayout, gridColumns, isSelectionButtonBelow, selectedAnswerBackgroundColor, autoFocusRef, tagName} = this.props;
     const choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');
     const feedback = !isEvaluateMode || showCorrect ? '' : choice.feedback;
     const choiceProps = {
@@ -12541,15 +12570,16 @@ class Choice extends React$3.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 67
+        lineNumber: 68
       }
     }, React$3.createElement(ChoiceInput$1, {
       ...choiceProps,
       className: names,
+      autoFocusRef: autoFocusRef,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 68
+        lineNumber: 69
       }
     }));
   }
@@ -12572,7 +12602,8 @@ Choice.propTypes = {
   gridColumns: PropTypes$2.string,
   selectedAnswerBackgroundColor: PropTypes$2.string,
   tagName: PropTypes$2.string,
-  isSelectionButtonBelow: PropTypes$2.bool
+  isSelectionButtonBelow: PropTypes$2.bool,
+  autoFocusRef: PropTypes$2.object
 };
 var StyledChoice = styles$b.withStyles(theme => ({
   choice: {
@@ -12600,6 +12631,27 @@ const {color: color} = _dll_pie_lib__pie_toolbox_render_ui;
 const {Collapsible: Collapsible} = _dll_pie_lib__pie_toolbox_render_ui;
 const {PreviewPrompt: PreviewPrompt} = _dll_pie_lib__pie_toolbox_render_ui;
 const _jsxFileName$1 = "/home/circleci/repo/packages/multiple-choice/src/multiple-choice.jsx";
+function _optionalChain$1(ops) {
+  let lastAccessLHS = undefined;
+  let value = ops[0];
+  let i = 1;
+  while (i < ops.length) {
+    const op = ops[i];
+    const fn = ops[i + 1];
+    i += 2;
+    if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
+      return undefined;
+    }
+    if (op === 'access' || op === 'optionalAccess') {
+      lastAccessLHS = value;
+      value = fn(value);
+    } else if (op === 'call' || op === 'optionalCall') {
+      value = fn((...args) => value.call(lastAccessLHS, ...args));
+      lastAccessLHS = undefined;
+    }
+  }
+  return value;
+}
 const {translator} = Translator;
 const styles$1 = theme => ({
   main: {
@@ -12690,11 +12742,13 @@ class MultipleChoice$1 extends React$2.Component {
     MultipleChoice$1.prototype.__init.call(this);
     MultipleChoice$1.prototype.__init2.call(this);
     MultipleChoice$1.prototype.__init3.call(this);
+    MultipleChoice$1.prototype.__init4.call(this);
     this.state = {
       showCorrect: this.props.alwaysShowCorrect || false,
       maxSelectionsErrorState: false
     };
     this.onToggle = this.onToggle.bind(this);
+    this.firstInputRef = React$2.createRef();
   }
   isSelected(value) {
     const sessionValue = this.props.session && this.props.session.value;
@@ -12799,17 +12853,29 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 219
+        lineNumber: 220
       }
     }, "Multiple Choice Question") : React$2.createElement('h2', {
       className: classes.srOnly,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 221
+        lineNumber: 222
       }
     }, "Multiple Select Question");
   }
+  __init4() {
+    this.handleGroupFocus = e => {
+      const fieldset = e.currentTarget;
+      const activeEl = document.activeElement;
+      if (fieldset.contains(activeEl) && activeEl !== fieldset) {
+        return;
+      }
+      if (_optionalChain$1([this, 'access', _3 => _3.firstInputRef, 'optionalAccess', _4 => _4.current])) {
+        this.firstInputRef.current.focus();
+      }
+    };
+  }
   render() {
     const {mode, disabled, className, choices = [], choiceMode, gridColumns, partLabel, prompt, responseCorrect, teacherInstructions, classes, alwaysShowCorrect, animationsDisabled, language, isSelectionButtonBelow, minSelections, maxSelections, autoplayAudioEnabled, session, customAudioButton} = this.props;
     const {showCorrect, maxSelectionsErrorState} = this.state;
@@ -12827,7 +12893,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 255
+        lineNumber: 269
       }
     });
     const getMultipleChoiceMinSelectionErrorMessage = () => {
@@ -12855,21 +12921,21 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 278
+        lineNumber: 296
       }
     }, partLabel && React$2.createElement('h3', {
       className: classes.partLabel,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 279
+        lineNumber: 297
       }
     }, partLabel), this.renderHeading(), teacherInstructions && React$2.createElement('div', {
       className: classes.teacherInstructions,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 284
+        lineNumber: 302
       }
     }, !animationsDisabled ? React$2.createElement(Collapsible, {
       labels: {
@@ -12879,16 +12945,17 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 286
+        lineNumber: 304
       }
     }, teacherInstructionsDiv) : teacherInstructionsDiv), React$2.createElement('fieldset', {
       tabIndex: 0,
       className: classes.fieldset,
+      onFocus: this.handleGroupFocus,
       role: choiceMode === 'radio' ? 'radiogroup' : 'group',
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 300
+        lineNumber: 318
       }
     }, React$2.createElement(PreviewPrompt, {
       className: "prompt",
@@ -12900,7 +12967,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 301
+        lineNumber: 324
       }
     }), !alwaysShowCorrect && React$2.createElement(CorrectAnswerToggle, {
       show: showCorrectAnswerToggle,
@@ -12910,7 +12977,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 311
+        lineNumber: 334
       }
     }), React$2.createElement('div', {
       className: classNames({
@@ -12921,9 +12988,10 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 319
+        lineNumber: 342
       }
     }, choices.map((choice, index) => React$2.createElement(StyledChoice, {
+      autoFocusRef: index === 0 ? this.firstInputRef : null,
       choicesLayout: this.props.choicesLayout,
       selectedAnswerBackgroundColor: this.props.selectedAnswerBackgroundColor,
       gridColumns: gridColumns,
@@ -12945,21 +13013,21 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 327
+        lineNumber: 350
       }
     })))), choiceMode === 'checkbox' && selections < minSelections && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 352
+        lineNumber: 376
       }
     }, getMultipleChoiceMinSelectionErrorMessage()), choiceMode === 'checkbox' && maxSelectionsErrorState && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 357
+        lineNumber: 379
       }
     }, translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {
       lng: language,