@pie-element/multiple-choice 9.6.1-next.0 → 9.6.1-next.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -146,7 +146,15 @@ var inputStyles = {
146
146
  opacity: 0.6,
147
147
  cursor: 'not-allowed !important',
148
148
  pointerEvents: 'initial !important'
149
- })
149
+ }),
150
+ focusVisibleUnchecked: {
151
+ outline: "1px solid ".concat(_renderUi.color.focusUncheckedBorder()),
152
+ backgroundColor: _renderUi.color.focusUnchecked()
153
+ },
154
+ focusVisibleChecked: {
155
+ outline: "1px solid ".concat(_renderUi.color.focusCheckedBorder()),
156
+ backgroundColor: _renderUi.color.focusChecked()
157
+ }
150
158
  };
151
159
  var StyledCheckbox = (0, _styles.withStyles)(inputStyles)(function (props) {
152
160
  var correctness = props.correctness,
@@ -176,7 +184,9 @@ var StyledCheckbox = (0, _styles.withStyles)(inputStyles)(function (props) {
176
184
  return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], (0, _extends2["default"])({
177
185
  id: id,
178
186
  "aria-label": accessibility,
179
- "aria-checked": checked
187
+ "aria-checked": checked,
188
+ focusVisibleClassName: checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked,
189
+ disableRipple: true
180
190
  }, miniProps, {
181
191
  className: CLASS_NAME,
182
192
  classes: {
@@ -215,7 +225,9 @@ var StyledRadio = (0, _styles.withStyles)(inputStyles)(function (props) {
215
225
  return /*#__PURE__*/_react["default"].createElement(_Radio["default"], (0, _extends2["default"])({
216
226
  id: id,
217
227
  "aria-label": accessibility,
218
- "aria-checked": checked
228
+ "aria-checked": checked,
229
+ focusVisibleClassName: checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked,
230
+ disableRipple: true
219
231
  }, miniProps, {
220
232
  className: CLASS_NAME,
221
233
  classes: {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/choice-input.jsx"],"names":["CLASS_NAME","styleSheet","theme","row","display","alignItems","backgroundColor","color","background","checkboxHolder","flex","text","fontSize","horizontalLayout","paddingRight","spacing","unit","belowLayout","belowLayoutCenter","justifyContent","belowSelectionComponent","paddingLeft","formStyleSheet","label","letterSpacing","disabled","cursor","StyledFormControlLabel","name","props","classes","colorStyle","varName","fallback","inputStyles","correct","incorrect","root","primaryLight","checked","primary","opacity","pointerEvents","StyledCheckbox","correctness","onChange","accessibility","value","id","key","k","resolved","miniProps","StyledRadio","ChoiceInput","onToggleChoice","bind","choiceId","generateChoiceId","event","Math","random","toFixed","choiceMode","displayKey","feedback","className","rationale","hideTick","isEvaluateMode","choicesLayout","isSelectionButtonBelow","Tag","classSuffix","holderClassNames","choicelabel","padding","React","Component","PropTypes","oneOf","string","isRequired","bool","func","object"],"mappings":"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","sourcesContent":["import FormControlLabel from '@material-ui/core/FormControlLabel';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport { Feedback, color, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport Radio from '@material-ui/core/Radio';\nimport classNames from 'classnames';\n\nimport FeedbackTick from './feedback-tick';\n\nconst CLASS_NAME = 'multiple-choice-component';\n\nconst styleSheet = (theme) => ({\n row: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n },\n checkboxHolder: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n flex: 1,\n '& label': {\n color: color.text(),\n '& > span': {\n fontSize: 'inherit',\n },\n },\n },\n horizontalLayout: {\n [`& .${CLASS_NAME}`]: {\n paddingRight: theme.spacing.unit,\n },\n },\n belowLayout: {\n '& > label': {\n alignItems: 'flex-start',\n },\n },\n belowLayoutCenter: {\n justifyContent: 'center',\n '& > label': {\n alignItems: 'center',\n },\n },\n belowSelectionComponent: {\n display: 'flex',\n alignItems: 'center',\n '& > span': {\n paddingLeft: 0,\n },\n },\n});\n\nconst formStyleSheet = {\n label: {\n color: `${color.text()} !important`, //'var(--choice-input-color, black)'\n backgroundColor: color.background(),\n letterSpacing: 'normal',\n },\n disabled: {\n // apply to all children\n '& *': {\n cursor: 'not-allowed !important',\n },\n },\n};\n\nexport const StyledFormControlLabel = withStyles(formStyleSheet, {\n name: 'FormControlLabel',\n})((props) => (\n <FormControlLabel {...props} classes={{ label: props.classes.label, disabled: props.classes.disabled }} />\n));\n\nconst colorStyle = (varName, fallback) => ({\n [`&.${CLASS_NAME}`]: {\n color: `var(--choice-input-${varName}, ${fallback}) !important`,\n },\n});\n\nconst inputStyles = {\n 'correct-root': colorStyle('correct-color', color.text()),\n 'correct-checked': colorStyle('correct-selected-color', color.correct()), //green[500]),\n 'correct-disabled': colorStyle('correct-disabled-color', color.disabled()), //'grey'),\n 'incorrect-root': colorStyle('incorrect-color', color.incorrect()),\n 'incorrect-checked': colorStyle('incorrect-checked', color.incorrect()), //orange[500]),\n 'incorrect-disabled': colorStyle('incorrect-disabled-color', color.disabled()),\n root: {\n ...colorStyle('color', color.text()),\n '&:hover': { color: `${color.primaryLight()} !important` },\n },\n checked: colorStyle('selected-color', color.primary()),\n disabled: {\n ...colorStyle('disabled-color', color.text()),\n opacity: 0.6,\n cursor: 'not-allowed !important',\n pointerEvents: 'initial !important',\n },\n};\n\nexport const StyledCheckbox = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled, accessibility, value, id } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled, value };\n\n return (\n <Checkbox\n id={id}\n aria-label={accessibility}\n aria-checked={checked}\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport const StyledRadio = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled, accessibility, value, id } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled, value };\n\n return (\n <Radio\n id={id}\n aria-label={accessibility}\n aria-checked={checked}\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport class ChoiceInput extends React.Component {\n static propTypes = {\n choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n displayKey: PropTypes.string.isRequired,\n checked: PropTypes.bool.isRequired,\n correctness: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n feedback: PropTypes.string,\n label: PropTypes.string.isRequired,\n rationale: PropTypes.string,\n accessibility: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n value: PropTypes.string.isRequired,\n classes: PropTypes.object,\n className: PropTypes.string,\n hideTick: PropTypes.bool,\n isEvaluateMode: PropTypes.bool,\n choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n isSelectionButtonBelow: PropTypes.bool,\n };\n\n static defaultProps = {\n rationale: null,\n accessibility: null,\n checked: false,\n isEvaluateMode: false,\n };\n\n constructor(props) {\n super(props);\n this.onToggleChoice = this.onToggleChoice.bind(this);\n this.choiceId = this.generateChoiceId();\n }\n\n onToggleChoice(event) {\n this.props.onChange(event);\n }\n\n generateChoiceId() {\n return 'choice-' + (Math.random() * 10000).toFixed();\n }\n\n render() {\n const {\n choiceMode,\n disabled,\n displayKey,\n feedback,\n label,\n correctness,\n classes,\n className,\n rationale,\n accessibility,\n hideTick,\n isEvaluateMode,\n choicesLayout,\n value,\n checked,\n isSelectionButtonBelow,\n } = this.props;\n\n const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;\n const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';\n\n const holderClassNames = classNames(classes.checkboxHolder, {\n [classes.horizontalLayout]: choicesLayout === 'horizontal',\n [classes.belowLayout]: isSelectionButtonBelow && choicesLayout !== 'grid',\n [classes.belowLayoutCenter]: isSelectionButtonBelow && choicesLayout === 'grid',\n });\n\n const choicelabel = (\n <>\n {displayKey && !isSelectionButtonBelow ? (\n <span className={classes.row}>\n {displayKey}.{'\\u00A0'}\n <PreviewPrompt className=\"label\" prompt={label} tagName=\"span\" />\n </span>\n ) : (\n <PreviewPrompt className=\"label\" prompt={label} tagName=\"span\" />\n )}\n </>\n );\n\n return (\n <div className={classNames(className, 'corespring-' + classSuffix, 'choice-input')}>\n <div className={classes.row}>\n {!hideTick && isEvaluateMode && <FeedbackTick correctness={correctness} />}\n <div className={classNames(holderClassNames, 'checkbox-holder')}>\n {isSelectionButtonBelow ? (\n <StyledFormControlLabel\n label={choicelabel}\n value={value}\n htmlFor={this.choiceId}\n labelPlacement={'top'}\n control={\n <span className={classes.belowSelectionComponent}>\n <Tag\n accessibility={accessibility}\n disabled={disabled}\n checked={checked}\n correctness={correctness}\n value={value}\n id={this.choiceId}\n onChange={this.onToggleChoice}\n style={{ padding: 0 }}\n />\n {displayKey}.\n </span>\n }\n />\n ) : (\n <StyledFormControlLabel\n label={choicelabel}\n value={value}\n htmlFor={this.choiceId}\n control={\n <Tag\n accessibility={accessibility}\n disabled={disabled}\n checked={checked}\n correctness={correctness}\n value={value}\n id={this.choiceId}\n onChange={this.onToggleChoice}\n />\n }\n />\n )}\n </div>\n </div>\n {rationale && <PreviewPrompt className=\"rationale\" defaultClassName=\"rationale\" prompt={rationale} />}\n <Feedback feedback={feedback} correctness={correctness} />\n </div>\n );\n }\n}\n\nexport default withStyles(styleSheet)(ChoiceInput);\n"],"file":"choice-input.js"}
1
+ {"version":3,"sources":["../src/choice-input.jsx"],"names":["CLASS_NAME","styleSheet","theme","row","display","alignItems","backgroundColor","color","background","checkboxHolder","flex","text","fontSize","horizontalLayout","paddingRight","spacing","unit","belowLayout","belowLayoutCenter","justifyContent","belowSelectionComponent","paddingLeft","formStyleSheet","label","letterSpacing","disabled","cursor","StyledFormControlLabel","name","props","classes","colorStyle","varName","fallback","inputStyles","correct","incorrect","root","primaryLight","checked","primary","opacity","pointerEvents","focusVisibleUnchecked","outline","focusUncheckedBorder","focusUnchecked","focusVisibleChecked","focusCheckedBorder","focusChecked","StyledCheckbox","correctness","onChange","accessibility","value","id","key","k","resolved","miniProps","StyledRadio","ChoiceInput","onToggleChoice","bind","choiceId","generateChoiceId","event","Math","random","toFixed","choiceMode","displayKey","feedback","className","rationale","hideTick","isEvaluateMode","choicesLayout","isSelectionButtonBelow","Tag","classSuffix","holderClassNames","choicelabel","padding","React","Component","PropTypes","oneOf","string","isRequired","bool","func","object"],"mappings":"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","sourcesContent":["import FormControlLabel from '@material-ui/core/FormControlLabel';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport { Feedback, color, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport Radio from '@material-ui/core/Radio';\nimport classNames from 'classnames';\n\nimport FeedbackTick from './feedback-tick';\n\nconst CLASS_NAME = 'multiple-choice-component';\n\nconst styleSheet = (theme) => ({\n row: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n },\n checkboxHolder: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n flex: 1,\n '& label': {\n color: color.text(),\n '& > span': {\n fontSize: 'inherit',\n },\n },\n },\n horizontalLayout: {\n [`& .${CLASS_NAME}`]: {\n paddingRight: theme.spacing.unit,\n },\n },\n belowLayout: {\n '& > label': {\n alignItems: 'flex-start',\n },\n },\n belowLayoutCenter: {\n justifyContent: 'center',\n '& > label': {\n alignItems: 'center',\n },\n },\n belowSelectionComponent: {\n display: 'flex',\n alignItems: 'center',\n '& > span': {\n paddingLeft: 0,\n },\n },\n});\n\nconst formStyleSheet = {\n label: {\n color: `${color.text()} !important`, //'var(--choice-input-color, black)'\n backgroundColor: color.background(),\n letterSpacing: 'normal',\n },\n disabled: {\n // apply to all children\n '& *': {\n cursor: 'not-allowed !important',\n },\n },\n};\n\nexport const StyledFormControlLabel = withStyles(formStyleSheet, {\n name: 'FormControlLabel',\n})((props) => (\n <FormControlLabel {...props} classes={{ label: props.classes.label, disabled: props.classes.disabled }} />\n));\n\nconst colorStyle = (varName, fallback) => ({\n [`&.${CLASS_NAME}`]: {\n color: `var(--choice-input-${varName}, ${fallback}) !important`,\n },\n});\n\nconst inputStyles = {\n 'correct-root': colorStyle('correct-color', color.text()),\n 'correct-checked': colorStyle('correct-selected-color', color.correct()), //green[500]),\n 'correct-disabled': colorStyle('correct-disabled-color', color.disabled()), //'grey'),\n 'incorrect-root': colorStyle('incorrect-color', color.incorrect()),\n 'incorrect-checked': colorStyle('incorrect-checked', color.incorrect()), //orange[500]),\n 'incorrect-disabled': colorStyle('incorrect-disabled-color', color.disabled()),\n root: {\n ...colorStyle('color', color.text()),\n '&:hover': { color: `${color.primaryLight()} !important` },\n },\n checked: colorStyle('selected-color', color.primary()),\n disabled: {\n ...colorStyle('disabled-color', color.text()),\n opacity: 0.6,\n cursor: 'not-allowed !important',\n pointerEvents: 'initial !important',\n },\n focusVisibleUnchecked: {\n outline: `1px solid ${color.focusUncheckedBorder()}`,\n backgroundColor: color.focusUnchecked(),\n },\n focusVisibleChecked: {\n outline: `1px solid ${color.focusCheckedBorder()}`,\n backgroundColor: color.focusChecked(),\n },\n};\n\nexport const StyledCheckbox = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled, accessibility, value, id } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled, value };\n\n return (\n <Checkbox\n id={id}\n aria-label={accessibility}\n aria-checked={checked}\n focusVisibleClassName={checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked}\n disableRipple\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport const StyledRadio = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled, accessibility, value, id } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled, value };\n\n return (\n <Radio\n id={id}\n aria-label={accessibility}\n aria-checked={checked}\n focusVisibleClassName={checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked}\n disableRipple\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport class ChoiceInput extends React.Component {\n static propTypes = {\n choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n displayKey: PropTypes.string.isRequired,\n checked: PropTypes.bool.isRequired,\n correctness: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n feedback: PropTypes.string,\n label: PropTypes.string.isRequired,\n rationale: PropTypes.string,\n accessibility: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n value: PropTypes.string.isRequired,\n classes: PropTypes.object,\n className: PropTypes.string,\n hideTick: PropTypes.bool,\n isEvaluateMode: PropTypes.bool,\n choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n isSelectionButtonBelow: PropTypes.bool,\n };\n\n static defaultProps = {\n rationale: null,\n accessibility: null,\n checked: false,\n isEvaluateMode: false,\n };\n\n constructor(props) {\n super(props);\n this.onToggleChoice = this.onToggleChoice.bind(this);\n this.choiceId = this.generateChoiceId();\n }\n\n onToggleChoice(event) {\n this.props.onChange(event);\n }\n\n generateChoiceId() {\n return 'choice-' + (Math.random() * 10000).toFixed();\n }\n\n render() {\n const {\n choiceMode,\n disabled,\n displayKey,\n feedback,\n label,\n correctness,\n classes,\n className,\n rationale,\n accessibility,\n hideTick,\n isEvaluateMode,\n choicesLayout,\n value,\n checked,\n isSelectionButtonBelow,\n } = this.props;\n\n const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;\n const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';\n\n const holderClassNames = classNames(classes.checkboxHolder, {\n [classes.horizontalLayout]: choicesLayout === 'horizontal',\n [classes.belowLayout]: isSelectionButtonBelow && choicesLayout !== 'grid',\n [classes.belowLayoutCenter]: isSelectionButtonBelow && choicesLayout === 'grid',\n });\n\n const choicelabel = (\n <>\n {displayKey && !isSelectionButtonBelow ? (\n <span className={classes.row}>\n {displayKey}.{'\\u00A0'}\n <PreviewPrompt className=\"label\" prompt={label} tagName=\"span\" />\n </span>\n ) : (\n <PreviewPrompt className=\"label\" prompt={label} tagName=\"span\" />\n )}\n </>\n );\n\n return (\n <div className={classNames(className, 'corespring-' + classSuffix, 'choice-input')}>\n <div className={classes.row}>\n {!hideTick && isEvaluateMode && <FeedbackTick correctness={correctness} />}\n <div className={classNames(holderClassNames, 'checkbox-holder')}>\n {isSelectionButtonBelow ? (\n <StyledFormControlLabel\n label={choicelabel}\n value={value}\n htmlFor={this.choiceId}\n labelPlacement={'top'}\n control={\n <span className={classes.belowSelectionComponent}>\n <Tag\n accessibility={accessibility}\n disabled={disabled}\n checked={checked}\n correctness={correctness}\n value={value}\n id={this.choiceId}\n onChange={this.onToggleChoice}\n style={{ padding: 0 }}\n />\n {displayKey}.\n </span>\n }\n />\n ) : (\n <StyledFormControlLabel\n label={choicelabel}\n value={value}\n htmlFor={this.choiceId}\n control={\n <Tag\n accessibility={accessibility}\n disabled={disabled}\n checked={checked}\n correctness={correctness}\n value={value}\n id={this.choiceId}\n onChange={this.onToggleChoice}\n />\n }\n />\n )}\n </div>\n </div>\n {rationale && <PreviewPrompt className=\"rationale\" defaultClassName=\"rationale\" prompt={rationale} />}\n <Feedback feedback={feedback} correctness={correctness} />\n </div>\n );\n }\n}\n\nexport default withStyles(styleSheet)(ChoiceInput);\n"],"file":"choice-input.js"}
package/lib/index.js CHANGED
@@ -63,7 +63,7 @@ var isComplete = function isComplete(session, model) {
63
63
  return false;
64
64
  }
65
65
 
66
- return true; // !!(session && session.value && session.value.length);
66
+ return true;
67
67
  };
68
68
 
69
69
  exports.isComplete = isComplete;
@@ -108,6 +108,7 @@ var MultipleChoice = /*#__PURE__*/function (_HTMLElement) {
108
108
  trailing: true
109
109
  });
110
110
  _this._dispatchResponseChanged = (0, _debounce["default"])(function () {
111
+ console.log('>> dispatch event');
111
112
  var event = new CustomEvent('session-changed', {
112
113
  bubbles: true,
113
114
  composed: true,
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.js"],"names":["log","isComplete","session","model","value","choiceMode","minSelections","maxSelections","selections","length","MultipleChoice","_model","_session","_rerender","element","React","createElement","Main","onChoiceChanged","_onChange","bind","onShowCorrectToggle","setAttribute","setLangAttribute","ReactDOM","render","leading","trailing","_dispatchResponseChanged","event","CustomEvent","bubbles","composed","detail","complete","component","tagName","toLowerCase","dispatchEvent","_dispatchModelSet","hasModel","undefined","language","lang","slice","s","data","HTMLElement"],"mappings":"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","sourcesContent":["import Main from './main';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport debounce from 'lodash/debounce';\nimport debug from 'debug';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering-accessible';\nimport { updateSessionValue } from './session-updater';\n\nconst log = debug('pie-ui:multiple-choice');\n\nexport const isComplete = (session, model) => {\n if (!session || !session.value) {\n return false;\n }\n\n const { choiceMode, minSelections, maxSelections } = model || {};\n const selections = session.value.length || 0;\n\n if (choiceMode === 'radio') {\n return !!selections;\n }\n\n if (selections < minSelections || selections > maxSelections) {\n return false;\n }\n\n return true;\n\n // !!(session && session.value && session.value.length);\n};\n\nexport default class MultipleChoice extends HTMLElement {\n constructor() {\n super();\n this._model = null;\n this._session = null;\n\n this._rerender = debounce(\n () => {\n if (this._model && this._session) {\n var element = React.createElement(Main, {\n model: this._model,\n session: this._session,\n onChoiceChanged: this._onChange.bind(this),\n onShowCorrectToggle: this.onShowCorrectToggle.bind(this),\n });\n\n //TODO: aria-label is set in the _rerender because we need to change it when the model.choiceMode is updated. Consider revisiting the placement of the aria-label setting in the _rerender\n this.setAttribute(\n 'aria-label',\n this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question',\n );\n this.setAttribute('role', 'region');\n this.setLangAttribute();\n\n ReactDOM.render(element, this, () => {\n log('render complete - render math');\n renderMath(this);\n });\n } else {\n log('skip');\n }\n },\n 50,\n { leading: false, trailing: true },\n );\n\n this._dispatchResponseChanged = debounce(() => {\n var event = new CustomEvent('session-changed', {\n bubbles: true,\n composed: true,\n detail: {\n complete: isComplete(this._session, this._model),\n component: this.tagName.toLowerCase(),\n },\n });\n\n this.dispatchEvent(event);\n });\n\n this._dispatchModelSet = debounce(\n () => {\n this.dispatchEvent(\n new CustomEvent('model-set', {\n bubbles: true,\n composed: true,\n detail: {\n complete: isComplete(this._session, this._model),\n component: this.tagName.toLowerCase(),\n hasModel: this._model !== undefined,\n },\n }),\n );\n },\n 50,\n { leading: false, trailing: true },\n );\n }\n\n onShowCorrectToggle() {\n renderMath(this);\n }\n\n setLangAttribute() {\n const language = this._model && typeof this._model.language ? this._model.language : '';\n const lang = language ? language.slice(0, 2) : 'en';\n this.setAttribute('lang', lang);\n }\n\n set model(s) {\n this._model = s;\n this._rerender();\n this._dispatchModelSet();\n }\n\n get session() {\n return this._session;\n }\n\n set session(s) {\n this._session = s;\n this._rerender();\n //TODO: remove this session-changed should only be emit on user change\n this._dispatchResponseChanged();\n }\n\n _onChange(data) {\n updateSessionValue(this._session, this._model.choiceMode, data);\n this._dispatchResponseChanged();\n this._rerender();\n }\n\n connectedCallback() {\n this._rerender();\n }\n}\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../src/index.js"],"names":["log","isComplete","session","model","value","choiceMode","minSelections","maxSelections","selections","length","MultipleChoice","_model","_session","_rerender","element","React","createElement","Main","onChoiceChanged","_onChange","bind","onShowCorrectToggle","setAttribute","setLangAttribute","ReactDOM","render","leading","trailing","_dispatchResponseChanged","console","event","CustomEvent","bubbles","composed","detail","complete","component","tagName","toLowerCase","dispatchEvent","_dispatchModelSet","hasModel","undefined","language","lang","slice","s","data","HTMLElement"],"mappings":"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","sourcesContent":["import Main from './main';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport debounce from 'lodash/debounce';\nimport debug from 'debug';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering-accessible';\nimport { updateSessionValue } from './session-updater';\n\nconst log = debug('pie-ui:multiple-choice');\n\nexport const isComplete = (session, model) => {\n if (!session || !session.value) {\n return false;\n }\n\n const { choiceMode, minSelections, maxSelections } = model || {};\n const selections = session.value.length || 0;\n\n if (choiceMode === 'radio') {\n return !!selections;\n }\n\n if (selections < minSelections || selections > maxSelections) {\n return false;\n }\n\n return true;\n};\n\nexport default class MultipleChoice extends HTMLElement {\n constructor() {\n super();\n this._model = null;\n this._session = null;\n\n this._rerender = debounce(\n () => {\n if (this._model && this._session) {\n var element = React.createElement(Main, {\n model: this._model,\n session: this._session,\n onChoiceChanged: this._onChange.bind(this),\n onShowCorrectToggle: this.onShowCorrectToggle.bind(this),\n });\n\n //TODO: aria-label is set in the _rerender because we need to change it when the model.choiceMode is updated. Consider revisiting the placement of the aria-label setting in the _rerender\n this.setAttribute(\n 'aria-label',\n this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question',\n );\n this.setAttribute('role', 'region');\n this.setLangAttribute();\n\n ReactDOM.render(element, this, () => {\n log('render complete - render math');\n renderMath(this);\n });\n } else {\n log('skip');\n }\n },\n 50,\n { leading: false, trailing: true },\n );\n\n this._dispatchResponseChanged = debounce(() => {\n console.log('>> dispatch event');\n var event = new CustomEvent('session-changed', {\n bubbles: true,\n composed: true,\n detail: {\n complete: isComplete(this._session, this._model),\n component: this.tagName.toLowerCase(),\n },\n });\n\n this.dispatchEvent(event);\n });\n\n this._dispatchModelSet = debounce(\n () => {\n this.dispatchEvent(\n new CustomEvent('model-set', {\n bubbles: true,\n composed: true,\n detail: {\n complete: isComplete(this._session, this._model),\n component: this.tagName.toLowerCase(),\n hasModel: this._model !== undefined,\n },\n }),\n );\n },\n 50,\n { leading: false, trailing: true },\n );\n }\n\n onShowCorrectToggle() {\n renderMath(this);\n }\n\n setLangAttribute() {\n const language = this._model && typeof this._model.language ? this._model.language : '';\n const lang = language ? language.slice(0, 2) : 'en';\n this.setAttribute('lang', lang);\n }\n\n set model(s) {\n this._model = s;\n this._rerender();\n this._dispatchModelSet();\n }\n\n get session() {\n return this._session;\n }\n\n set session(s) {\n this._session = s;\n this._rerender();\n //TODO: remove this session-changed should only be emit on user change\n this._dispatchResponseChanged();\n }\n\n _onChange(data) {\n updateSessionValue(this._session, this._model.choiceMode, data);\n this._dispatchResponseChanged();\n this._rerender();\n }\n\n connectedCallback() {\n this._rerender();\n }\n}\n"],"file":"index.js"}
@@ -1,4 +1,4 @@
1
- import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_lodash, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@2.4.1/module/index.js";
1
+ import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_lodash, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@2.5.0/module/index.js";
2
2
  import {_dll_pie_lib__pie_toolbox_editable_html, _dll_pie_lib__pie_toolbox_config_ui, _dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@5.4.1/module/index.js";
3
3
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
4
4
  function getDefaultExportFromCjs(x) {
package/module/element.js CHANGED
@@ -1,4 +1,4 @@
1
- import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug, _dll_pie_lib__pie_toolbox_math_rendering_accessible} from "../../../@pie-lib/pie-toolbox-math-rendering-module@2.4.1/module/index.js";
1
+ import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug, _dll_pie_lib__pie_toolbox_math_rendering_accessible} from "../../../@pie-lib/pie-toolbox-math-rendering-module@2.5.0/module/index.js";
2
2
  import {_dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.4.1/module/index.js";
3
3
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
4
4
  function getDefaultExportFromCjs(x) {
@@ -12217,6 +12217,14 @@ const inputStyles = {
12217
12217
  opacity: 0.6,
12218
12218
  cursor: 'not-allowed !important',
12219
12219
  pointerEvents: 'initial !important'
12220
+ },
12221
+ focusVisibleUnchecked: {
12222
+ outline: `1px solid ${color$1.focusUncheckedBorder()}`,
12223
+ backgroundColor: color$1.focusUnchecked()
12224
+ },
12225
+ focusVisibleChecked: {
12226
+ outline: `1px solid ${color$1.focusCheckedBorder()}`,
12227
+ backgroundColor: color$1.focusChecked()
12220
12228
  }
12221
12229
  };
12222
12230
  const StyledCheckbox = styles$b.withStyles(inputStyles)(props => {
@@ -12237,6 +12245,8 @@ const StyledCheckbox = styles$b.withStyles(inputStyles)(props => {
12237
12245
  id: id,
12238
12246
  'aria-label': accessibility,
12239
12247
  'aria-checked': checked,
12248
+ focusVisibleClassName: checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked,
12249
+ disableRipple: true,
12240
12250
  ...miniProps,
12241
12251
  className: CLASS_NAME,
12242
12252
  classes: {
@@ -12247,7 +12257,7 @@ const StyledCheckbox = styles$b.withStyles(inputStyles)(props => {
12247
12257
  __self: undefined,
12248
12258
  __source: {
12249
12259
  fileName: _jsxFileName$3,
12250
- lineNumber: 116
12260
+ lineNumber: 124
12251
12261
  }
12252
12262
  });
12253
12263
  });
@@ -12269,6 +12279,8 @@ const StyledRadio = styles$b.withStyles(inputStyles)(props => {
12269
12279
  id: id,
12270
12280
  'aria-label': accessibility,
12271
12281
  'aria-checked': checked,
12282
+ focusVisibleClassName: checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked,
12283
+ disableRipple: true,
12272
12284
  ...miniProps,
12273
12285
  className: CLASS_NAME,
12274
12286
  classes: {
@@ -12279,7 +12291,7 @@ const StyledRadio = styles$b.withStyles(inputStyles)(props => {
12279
12291
  __self: undefined,
12280
12292
  __source: {
12281
12293
  fileName: _jsxFileName$3,
12282
- lineNumber: 144
12294
+ lineNumber: 154
12283
12295
  }
12284
12296
  });
12285
12297
  });
@@ -12338,7 +12350,7 @@ class ChoiceInput extends React$4.Component {
12338
12350
  __self: this,
12339
12351
  __source: {
12340
12352
  fileName: _jsxFileName$3,
12341
- lineNumber: 233
12353
+ lineNumber: 245
12342
12354
  }
12343
12355
  }, displayKey, ".", '\u00A0', React$4.createElement(PreviewPrompt$1, {
12344
12356
  className: "label",
@@ -12347,7 +12359,7 @@ class ChoiceInput extends React$4.Component {
12347
12359
  __self: this,
12348
12360
  __source: {
12349
12361
  fileName: _jsxFileName$3,
12350
- lineNumber: 235
12362
+ lineNumber: 247
12351
12363
  }
12352
12364
  })) : React$4.createElement(PreviewPrompt$1, {
12353
12365
  className: "label",
@@ -12356,7 +12368,7 @@ class ChoiceInput extends React$4.Component {
12356
12368
  __self: this,
12357
12369
  __source: {
12358
12370
  fileName: _jsxFileName$3,
12359
- lineNumber: 238
12371
+ lineNumber: 250
12360
12372
  }
12361
12373
  }));
12362
12374
  return React$4.createElement('div', {
@@ -12364,28 +12376,28 @@ class ChoiceInput extends React$4.Component {
12364
12376
  __self: this,
12365
12377
  __source: {
12366
12378
  fileName: _jsxFileName$3,
12367
- lineNumber: 244
12379
+ lineNumber: 256
12368
12380
  }
12369
12381
  }, React$4.createElement('div', {
12370
12382
  className: classes.row,
12371
12383
  __self: this,
12372
12384
  __source: {
12373
12385
  fileName: _jsxFileName$3,
12374
- lineNumber: 245
12386
+ lineNumber: 257
12375
12387
  }
12376
12388
  }, !hideTick && isEvaluateMode && React$4.createElement(FeedbackTick$1, {
12377
12389
  correctness: correctness,
12378
12390
  __self: this,
12379
12391
  __source: {
12380
12392
  fileName: _jsxFileName$3,
12381
- lineNumber: 246
12393
+ lineNumber: 258
12382
12394
  }
12383
12395
  }), React$4.createElement('div', {
12384
12396
  className: classNames$2(holderClassNames, 'checkbox-holder'),
12385
12397
  __self: this,
12386
12398
  __source: {
12387
12399
  fileName: _jsxFileName$3,
12388
- lineNumber: 247
12400
+ lineNumber: 259
12389
12401
  }
12390
12402
  }, isSelectionButtonBelow ? React$4.createElement(StyledFormControlLabel, {
12391
12403
  label: choicelabel,
@@ -12397,7 +12409,7 @@ class ChoiceInput extends React$4.Component {
12397
12409
  __self: this,
12398
12410
  __source: {
12399
12411
  fileName: _jsxFileName$3,
12400
- lineNumber: 255
12412
+ lineNumber: 267
12401
12413
  }
12402
12414
  }, React$4.createElement(Tag, {
12403
12415
  accessibility: accessibility,
@@ -12413,13 +12425,13 @@ class ChoiceInput extends React$4.Component {
12413
12425
  __self: this,
12414
12426
  __source: {
12415
12427
  fileName: _jsxFileName$3,
12416
- lineNumber: 256
12428
+ lineNumber: 268
12417
12429
  }
12418
12430
  }), displayKey, "."),
12419
12431
  __self: this,
12420
12432
  __source: {
12421
12433
  fileName: _jsxFileName$3,
12422
- lineNumber: 249
12434
+ lineNumber: 261
12423
12435
  }
12424
12436
  }) : React$4.createElement(StyledFormControlLabel, {
12425
12437
  label: choicelabel,
@@ -12436,13 +12448,13 @@ class ChoiceInput extends React$4.Component {
12436
12448
  __self: this,
12437
12449
  __source: {
12438
12450
  fileName: _jsxFileName$3,
12439
- lineNumber: 276
12451
+ lineNumber: 288
12440
12452
  }
12441
12453
  }),
12442
12454
  __self: this,
12443
12455
  __source: {
12444
12456
  fileName: _jsxFileName$3,
12445
- lineNumber: 271
12457
+ lineNumber: 283
12446
12458
  }
12447
12459
  }))), rationale && React$4.createElement(PreviewPrompt$1, {
12448
12460
  className: "rationale",
@@ -12451,7 +12463,7 @@ class ChoiceInput extends React$4.Component {
12451
12463
  __self: this,
12452
12464
  __source: {
12453
12465
  fileName: _jsxFileName$3,
12454
- lineNumber: 290
12466
+ lineNumber: 302
12455
12467
  }
12456
12468
  }), React$4.createElement(Feedback, {
12457
12469
  feedback: feedback,
@@ -12459,7 +12471,7 @@ class ChoiceInput extends React$4.Component {
12459
12471
  __self: this,
12460
12472
  __source: {
12461
12473
  fileName: _jsxFileName$3,
12462
- lineNumber: 291
12474
+ lineNumber: 303
12463
12475
  }
12464
12476
  }));
12465
12477
  }
@@ -13077,6 +13089,7 @@ class MultipleChoice extends HTMLElement {
13077
13089
  trailing: true
13078
13090
  });
13079
13091
  this._dispatchResponseChanged = debounce(() => {
13092
+ console.log('>> dispatch event');
13080
13093
  var event = new CustomEvent('session-changed', {
13081
13094
  bubbles: true,
13082
13095
  composed: true,
@@ -4,7 +4,7 @@
4
4
  "modules": [
5
5
  {
6
6
  "name": "@pie-lib/pie-toolbox-math-rendering-module",
7
- "version": "2.4.1"
7
+ "version": "2.5.0"
8
8
  },
9
9
  {
10
10
  "name": "@pie-lib/pie-toolbox-module",
package/module/print.js CHANGED
@@ -1,4 +1,4 @@
1
- import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_pie_lib__pie_toolbox_math_rendering_accessible, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@2.4.1/module/index.js";
1
+ import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_pie_lib__pie_toolbox_math_rendering_accessible, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@2.5.0/module/index.js";
2
2
  import {_dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.4.1/module/index.js";
3
3
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
4
4
  function getDefaultExportFromCjs(x) {
@@ -12217,6 +12217,14 @@ const inputStyles = {
12217
12217
  opacity: 0.6,
12218
12218
  cursor: 'not-allowed !important',
12219
12219
  pointerEvents: 'initial !important'
12220
+ },
12221
+ focusVisibleUnchecked: {
12222
+ outline: `1px solid ${color$1.focusUncheckedBorder()}`,
12223
+ backgroundColor: color$1.focusUnchecked()
12224
+ },
12225
+ focusVisibleChecked: {
12226
+ outline: `1px solid ${color$1.focusCheckedBorder()}`,
12227
+ backgroundColor: color$1.focusChecked()
12220
12228
  }
12221
12229
  };
12222
12230
  const StyledCheckbox = styles$b.withStyles(inputStyles)(props => {
@@ -12237,6 +12245,8 @@ const StyledCheckbox = styles$b.withStyles(inputStyles)(props => {
12237
12245
  id: id,
12238
12246
  'aria-label': accessibility,
12239
12247
  'aria-checked': checked,
12248
+ focusVisibleClassName: checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked,
12249
+ disableRipple: true,
12240
12250
  ...miniProps,
12241
12251
  className: CLASS_NAME,
12242
12252
  classes: {
@@ -12247,7 +12257,7 @@ const StyledCheckbox = styles$b.withStyles(inputStyles)(props => {
12247
12257
  __self: undefined,
12248
12258
  __source: {
12249
12259
  fileName: _jsxFileName$3,
12250
- lineNumber: 116
12260
+ lineNumber: 124
12251
12261
  }
12252
12262
  });
12253
12263
  });
@@ -12269,6 +12279,8 @@ const StyledRadio = styles$b.withStyles(inputStyles)(props => {
12269
12279
  id: id,
12270
12280
  'aria-label': accessibility,
12271
12281
  'aria-checked': checked,
12282
+ focusVisibleClassName: checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked,
12283
+ disableRipple: true,
12272
12284
  ...miniProps,
12273
12285
  className: CLASS_NAME,
12274
12286
  classes: {
@@ -12279,7 +12291,7 @@ const StyledRadio = styles$b.withStyles(inputStyles)(props => {
12279
12291
  __self: undefined,
12280
12292
  __source: {
12281
12293
  fileName: _jsxFileName$3,
12282
- lineNumber: 144
12294
+ lineNumber: 154
12283
12295
  }
12284
12296
  });
12285
12297
  });
@@ -12338,7 +12350,7 @@ class ChoiceInput extends React$4.Component {
12338
12350
  __self: this,
12339
12351
  __source: {
12340
12352
  fileName: _jsxFileName$3,
12341
- lineNumber: 233
12353
+ lineNumber: 245
12342
12354
  }
12343
12355
  }, displayKey, ".", '\u00A0', React$4.createElement(PreviewPrompt$1, {
12344
12356
  className: "label",
@@ -12347,7 +12359,7 @@ class ChoiceInput extends React$4.Component {
12347
12359
  __self: this,
12348
12360
  __source: {
12349
12361
  fileName: _jsxFileName$3,
12350
- lineNumber: 235
12362
+ lineNumber: 247
12351
12363
  }
12352
12364
  })) : React$4.createElement(PreviewPrompt$1, {
12353
12365
  className: "label",
@@ -12356,7 +12368,7 @@ class ChoiceInput extends React$4.Component {
12356
12368
  __self: this,
12357
12369
  __source: {
12358
12370
  fileName: _jsxFileName$3,
12359
- lineNumber: 238
12371
+ lineNumber: 250
12360
12372
  }
12361
12373
  }));
12362
12374
  return React$4.createElement('div', {
@@ -12364,28 +12376,28 @@ class ChoiceInput extends React$4.Component {
12364
12376
  __self: this,
12365
12377
  __source: {
12366
12378
  fileName: _jsxFileName$3,
12367
- lineNumber: 244
12379
+ lineNumber: 256
12368
12380
  }
12369
12381
  }, React$4.createElement('div', {
12370
12382
  className: classes.row,
12371
12383
  __self: this,
12372
12384
  __source: {
12373
12385
  fileName: _jsxFileName$3,
12374
- lineNumber: 245
12386
+ lineNumber: 257
12375
12387
  }
12376
12388
  }, !hideTick && isEvaluateMode && React$4.createElement(FeedbackTick$1, {
12377
12389
  correctness: correctness,
12378
12390
  __self: this,
12379
12391
  __source: {
12380
12392
  fileName: _jsxFileName$3,
12381
- lineNumber: 246
12393
+ lineNumber: 258
12382
12394
  }
12383
12395
  }), React$4.createElement('div', {
12384
12396
  className: classNames$2(holderClassNames, 'checkbox-holder'),
12385
12397
  __self: this,
12386
12398
  __source: {
12387
12399
  fileName: _jsxFileName$3,
12388
- lineNumber: 247
12400
+ lineNumber: 259
12389
12401
  }
12390
12402
  }, isSelectionButtonBelow ? React$4.createElement(StyledFormControlLabel, {
12391
12403
  label: choicelabel,
@@ -12397,7 +12409,7 @@ class ChoiceInput extends React$4.Component {
12397
12409
  __self: this,
12398
12410
  __source: {
12399
12411
  fileName: _jsxFileName$3,
12400
- lineNumber: 255
12412
+ lineNumber: 267
12401
12413
  }
12402
12414
  }, React$4.createElement(Tag, {
12403
12415
  accessibility: accessibility,
@@ -12413,13 +12425,13 @@ class ChoiceInput extends React$4.Component {
12413
12425
  __self: this,
12414
12426
  __source: {
12415
12427
  fileName: _jsxFileName$3,
12416
- lineNumber: 256
12428
+ lineNumber: 268
12417
12429
  }
12418
12430
  }), displayKey, "."),
12419
12431
  __self: this,
12420
12432
  __source: {
12421
12433
  fileName: _jsxFileName$3,
12422
- lineNumber: 249
12434
+ lineNumber: 261
12423
12435
  }
12424
12436
  }) : React$4.createElement(StyledFormControlLabel, {
12425
12437
  label: choicelabel,
@@ -12436,13 +12448,13 @@ class ChoiceInput extends React$4.Component {
12436
12448
  __self: this,
12437
12449
  __source: {
12438
12450
  fileName: _jsxFileName$3,
12439
- lineNumber: 276
12451
+ lineNumber: 288
12440
12452
  }
12441
12453
  }),
12442
12454
  __self: this,
12443
12455
  __source: {
12444
12456
  fileName: _jsxFileName$3,
12445
- lineNumber: 271
12457
+ lineNumber: 283
12446
12458
  }
12447
12459
  }))), rationale && React$4.createElement(PreviewPrompt$1, {
12448
12460
  className: "rationale",
@@ -12451,7 +12463,7 @@ class ChoiceInput extends React$4.Component {
12451
12463
  __self: this,
12452
12464
  __source: {
12453
12465
  fileName: _jsxFileName$3,
12454
- lineNumber: 290
12466
+ lineNumber: 302
12455
12467
  }
12456
12468
  }), React$4.createElement(Feedback, {
12457
12469
  feedback: feedback,
@@ -12459,7 +12471,7 @@ class ChoiceInput extends React$4.Component {
12459
12471
  __self: this,
12460
12472
  __source: {
12461
12473
  fileName: _jsxFileName$3,
12462
- lineNumber: 291
12474
+ lineNumber: 303
12463
12475
  }
12464
12476
  }));
12465
12477
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pie-element/multiple-choice",
3
3
  "repository": "pie-framework/pie-elements",
4
- "version": "9.6.1-next.0+cf87049dc",
4
+ "version": "9.6.1-next.13+dbabd3fa1",
5
5
  "publishConfig": {
6
6
  "access": "public"
7
7
  },
@@ -18,7 +18,7 @@
18
18
  "react-test-renderer": "^16.3.2",
19
19
  "react-transition-group": "^2.3.1"
20
20
  },
21
- "gitHead": "cf87049dcfad134d8b329c46239cb695874bc5ef",
21
+ "gitHead": "dbabd3fa1ba04369f80cc9e15b5e5bb08a48fd6c",
22
22
  "scripts": {
23
23
  "postpublish": "../../scripts/postpublish"
24
24
  },