@pie-element/match 12.1.2-next.1 → 12.1.2

package/lib/answer-grid.js

@@ -0,0 +1,166 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AnswerGrid = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Radio = _interopRequireDefault(require("@mui/material/Radio"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _styles = require("@mui/material/styles");
+var _renderUi = require("@pie-lib/render-ui");
+const ControlsContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginLeft: 'auto',
+  marginRight: 'auto',
+  marginTop: theme.spacing(1),
+  marginBottom: theme.spacing(1)
+}));
+const Column = (0, _styles.styled)('td')({
+  padding: '5px 0'
+});
+const EmptyTypography = (0, _styles.styled)(_Typography.default)(({
+  theme
+}) => ({
+  margin: theme.spacing(2)
+}));
+const RowHeader = (0, _styles.styled)('th')({
+  padding: 0
+});
+const RowItem = (0, _styles.styled)('div')(({
+  theme,
+  isQuestionText
+}) => ({
+  padding: theme.spacing(1.5),
+  textAlign: isQuestionText ? 'left' : 'center'
+}));
+const Separator = (0, _styles.styled)('tr')({
+  border: 0,
+  borderTop: `2.5px solid ${_renderUi.color.primaryLight()}`,
+  width: '100%'
+});
+const Table = (0, _styles.styled)('table')({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background(),
+  borderCollapse: 'collapse',
+  borderSpacing: 0,
+  marginBottom: 0
+});
+class AnswerGrid extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "onRowValueChange", (rowId, answerIndex) => event => {
+      const {
+        onAnswerChange,
+        choiceMode,
+        answers
+      } = this.props;
+      const newAnswers = {
+        ...answers
+      };
+      if (choiceMode === 'radio') {
+        for (let i = 0; i < newAnswers[rowId].length; i++) {
+          newAnswers[rowId][i] = false;
+        }
+      }
+      newAnswers[rowId][answerIndex] = event.target.checked;
+      onAnswerChange(newAnswers);
+    });
+    (0, _defineProperty2.default)(this, "answerIsCorrect", (rowId, rowValue, rowValueIndex) => {
+      const {
+        correctAnswers
+      } = this.props;
+      return correctAnswers[rowId][rowValueIndex] === rowValue && rowValue === true;
+    });
+    // needs a separate method because what isn't correct isn't necessarily incorrect
+    (0, _defineProperty2.default)(this, "answerIsIncorrect", (rowId, rowValue, rowValueIndex) => {
+      const {
+        correctAnswers
+      } = this.props;
+      return correctAnswers[rowId][rowValueIndex] === true && rowValue === false || correctAnswers[rowId][rowValueIndex] === false && rowValue === true;
+    });
+  }
+  render() {
+    const {
+      showCorrect,
+      headers,
+      rows,
+      choiceMode,
+      answers,
+      disabled,
+      view
+    } = this.props;
+    const Tag = choiceMode === 'radio' ? _Radio.default : _Checkbox.default;
+    const evaluate = disabled && !view;
+    if (!rows || rows.length === 0) {
+      return /*#__PURE__*/_react.default.createElement(ControlsContainer, null, /*#__PURE__*/_react.default.createElement(EmptyTypography, {
+        component: "div"
+      }, "There are currently no questions to show."));
+    }
+    return /*#__PURE__*/_react.default.createElement(ControlsContainer, null, /*#__PURE__*/_react.default.createElement(Table, null, /*#__PURE__*/_react.default.createElement("colgroup", null, (headers || []).map((header, idx) => /*#__PURE__*/_react.default.createElement("col", {
+      key: `col-${idx}`
+    }))), /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, (headers || []).map((header, idx) => /*#__PURE__*/_react.default.createElement(RowHeader, {
+      key: `th-${idx}`,
+      "data-colno": `${idx}`,
+      scope: "row"
+    }, /*#__PURE__*/_react.default.createElement(RowItem, {
+      isQuestionText: idx === 0,
+      dangerouslySetInnerHTML: {
+        __html: header
+      }
+    }))))), (rows || []).map((row, idx) => /*#__PURE__*/_react.default.createElement("tbody", {
+      key: `row-${idx}`,
+      role: "group"
+    }, /*#__PURE__*/_react.default.createElement(Separator, null, /*#__PURE__*/_react.default.createElement("td", {
+      key: `td-title-${idx}`,
+      "data-colno": '0'
+    }, /*#__PURE__*/_react.default.createElement(RowItem, {
+      isQuestionText: true,
+      dangerouslySetInnerHTML: {
+        __html: row.title
+      }
+    })), (answers[row.id] || []).map((rowItem, answerIndex) => /*#__PURE__*/_react.default.createElement(Column, {
+      key: `td-${idx}-${answerIndex}`,
+      "data-colno": `${answerIndex + 1}`
+    }, /*#__PURE__*/_react.default.createElement(RowItem, null, /*#__PURE__*/_react.default.createElement(Tag, {
+      sx: {
+        padding: '6px',
+        color: showCorrect && rowItem === true || evaluate && this.answerIsCorrect(row.id, rowItem, answerIndex) ? _renderUi.color.correct() : evaluate && this.answerIsIncorrect(row.id, rowItem, answerIndex) ? _renderUi.color.incorrect() : rowItem === true && !evaluate ? _renderUi.color.primary() : disabled ? _renderUi.color.disabled() : _renderUi.color.text(),
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        pointerEvents: disabled ? 'initial' : 'auto',
+        opacity: disabled ? 0.7 : 1,
+        '& input': {
+          width: '100% !important'
+        },
+        '&:hover': {
+          color: disabled ? _renderUi.color.disabled() : _renderUi.color.primaryLight()
+        },
+        '&.Mui-disabled': {
+          color: `${showCorrect && rowItem === true || evaluate && this.answerIsCorrect(row.id, rowItem, answerIndex) ? _renderUi.color.correct() : evaluate && this.answerIsIncorrect(row.id, rowItem, answerIndex) ? _renderUi.color.incorrect() : rowItem === true && !evaluate ? _renderUi.color.primary() : _renderUi.color.disabled()}`
+        }
+      },
+      disabled: disabled,
+      onChange: this.onRowValueChange(row.id, answerIndex),
+      checked: rowItem === true
+    })))))))));
+  }
+}
+exports.AnswerGrid = AnswerGrid;
+(0, _defineProperty2.default)(AnswerGrid, "propTypes", {
+  correctAnswers: _propTypes.default.object,
+  view: _propTypes.default.bool.isRequired,
+  showCorrect: _propTypes.default.bool.isRequired,
+  disabled: _propTypes.default.bool.isRequired,
+  onAnswerChange: _propTypes.default.func.isRequired,
+  choiceMode: _propTypes.default.string.isRequired,
+  rows: _propTypes.default.array.isRequired,
+  headers: _propTypes.default.array.isRequired,
+  answers: _propTypes.default.object.isRequired
+});
+var _default = exports.default = AnswerGrid;
+//# sourceMappingURL=answer-grid.js.map

package/lib/answer-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"answer-grid.js","names":["_react","_interopRequireDefault","require","_propTypes","_Radio","_Checkbox","_Typography","_styles","_renderUi","ControlsContainer","styled","theme","marginLeft","marginRight","marginTop","spacing","marginBottom","Column","padding","EmptyTypography","Typography","margin","RowHeader","RowItem","isQuestionText","textAlign","Separator","border","borderTop","color","primaryLight","width","Table","text","backgroundColor","background","borderCollapse","borderSpacing","AnswerGrid","React","Component","constructor","args","_defineProperty2","default","rowId","answerIndex","event","onAnswerChange","choiceMode","answers","props","newAnswers","i","length","target","checked","rowValue","rowValueIndex","correctAnswers","render","showCorrect","headers","rows","disabled","view","Tag","Radio","Checkbox","evaluate","createElement","component","map","header","idx","key","scope","dangerouslySetInnerHTML","__html","row","role","title","id","rowItem","sx","answerIsCorrect","correct","answerIsIncorrect","incorrect","primary","cursor","pointerEvents","opacity","onChange","onRowValueChange","exports","PropTypes","object","bool","isRequired","func","string","array","_default"],"sources":["../src/answer-grid.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Radio from '@mui/material/Radio';\nimport Checkbox from '@mui/material/Checkbox';\nimport Typography from '@mui/material/Typography';\nimport { styled } from '@mui/material/styles';\nimport { color } from '@pie-lib/render-ui';\n\nconst ControlsContainer = styled('div')(({ theme }) => ({\n  marginLeft: 'auto',\n  marginRight: 'auto',\n  marginTop: theme.spacing(1),\n  marginBottom: theme.spacing(1),\n}));\n\nconst Column = styled('td')({\n  padding: '5px 0',\n});\n\nconst EmptyTypography = styled(Typography)(({ theme }) => ({\n  margin: theme.spacing(2),\n}));\n\nconst RowHeader = styled('th')({\n  padding: 0,\n});\n\nconst RowItem = styled('div')(({ theme, isQuestionText }) => ({\n  padding: theme.spacing(1.5),\n  textAlign: isQuestionText ? 'left' : 'center',\n}));\n\nconst Separator = styled('tr')({\n  border: 0,\n  borderTop: `2.5px solid ${color.primaryLight()}`,\n  width: '100%',\n});\n\nconst Table = styled('table')({\n  color: color.text(),\n  backgroundColor: color.background(),\n  borderCollapse: 'collapse',\n  borderSpacing: 0,\n  marginBottom: 0,\n});\n\nexport class AnswerGrid extends React.Component {\n  static propTypes = {\n    correctAnswers: PropTypes.object,\n    view: PropTypes.bool.isRequired,\n    showCorrect: PropTypes.bool.isRequired,\n    disabled: PropTypes.bool.isRequired,\n    onAnswerChange: PropTypes.func.isRequired,\n    choiceMode: PropTypes.string.isRequired,\n    rows: PropTypes.array.isRequired,\n    headers: PropTypes.array.isRequired,\n    answers: PropTypes.object.isRequired,\n  };\n\n  onRowValueChange = (rowId, answerIndex) => (event) => {\n    const { onAnswerChange, choiceMode, answers } = this.props;\n    const newAnswers = { ...answers };\n\n    if (choiceMode === 'radio') {\n      for (let i = 0; i < newAnswers[rowId].length; i++) {\n        newAnswers[rowId][i] = false;\n      }\n    }\n\n    newAnswers[rowId][answerIndex] = event.target.checked;\n\n    onAnswerChange(newAnswers);\n  };\n\n  answerIsCorrect = (rowId, rowValue, rowValueIndex) => {\n    const { correctAnswers } = this.props;\n\n    return correctAnswers[rowId][rowValueIndex] === rowValue && rowValue === true;\n  };\n\n  // needs a separate method because what isn't correct isn't necessarily incorrect\n  answerIsIncorrect = (rowId, rowValue, rowValueIndex) => {\n    const { correctAnswers } = this.props;\n\n    return (\n      (correctAnswers[rowId][rowValueIndex] === true && rowValue === false) ||\n      (correctAnswers[rowId][rowValueIndex] === false && rowValue === true)\n    );\n  };\n\n  render() {\n    const { showCorrect, headers, rows, choiceMode, answers, disabled, view } = this.props;\n    const Tag = choiceMode === 'radio' ? Radio : Checkbox;\n    const evaluate = disabled && !view;\n\n    if (!rows || rows.length === 0) {\n      return (\n        <ControlsContainer>\n          <EmptyTypography component=\"div\">\n            There are currently no questions to show.\n          </EmptyTypography>\n        </ControlsContainer>\n      );\n    }\n\n    return (\n      <ControlsContainer>\n        <Table>\n          <colgroup>\n            {(headers || []).map((header, idx) => (\n              <col key={`col-${idx}`} />\n            ))}\n          </colgroup>\n\n          <thead>\n            <tr>\n              {(headers || []).map((header, idx) => (\n                <RowHeader key={`th-${idx}`} data-colno={`${idx}`} scope=\"row\">\n                  <RowItem\n                    isQuestionText={idx === 0}\n                    dangerouslySetInnerHTML={{ __html: header }}\n                  />\n                </RowHeader>\n              ))}\n            </tr>\n          </thead>\n\n          {(rows || []).map((row, idx) => (\n            <tbody key={`row-${idx}`} role=\"group\">\n              <Separator>\n                <td key={`td-title-${idx}`} data-colno={'0'}>\n                  <RowItem\n                    isQuestionText={true}\n                    dangerouslySetInnerHTML={{ __html: row.title }}\n                  />\n                </td>\n\n                {(answers[row.id] || []).map((rowItem, answerIndex) => (\n                  <Column key={`td-${idx}-${answerIndex}`} data-colno={`${answerIndex + 1}`}>\n                    <RowItem>\n                      <Tag\n                        sx={{\n                          padding: '6px',\n                          color: (showCorrect && rowItem === true) ||\n                                (evaluate && this.answerIsCorrect(row.id, rowItem, answerIndex)) \n                                ? color.correct() :\n                                evaluate && this.answerIsIncorrect(row.id, rowItem, answerIndex)\n                                ? color.incorrect() :\n                                rowItem === true && !evaluate\n                                ? color.primary() :\n                                disabled \n                                ? color.disabled() : color.text(),\n                          cursor: disabled ? 'not-allowed' : 'pointer',\n                          pointerEvents: disabled ? 'initial' : 'auto',\n                          opacity: disabled ? 0.7 : 1,\n                          '& input': {\n                            width: '100% !important',\n                          },\n                          '&:hover': {\n                            color: disabled ? color.disabled() : color.primaryLight(),\n                          },\n                          '&.Mui-disabled': {\n                            color: `${(showCorrect && rowItem === true) ||\n                                  (evaluate && this.answerIsCorrect(row.id, rowItem, answerIndex)) \n                                  ? color.correct() :\n                                  evaluate && this.answerIsIncorrect(row.id, rowItem, answerIndex)\n                                  ? color.incorrect() :\n                                  rowItem === true && !evaluate\n                                  ? color.primary() :\n                                  color.disabled()}`,\n                          },\n                        }}\n                        disabled={disabled}\n                        onChange={this.onRowValueChange(row.id, answerIndex)}\n                        checked={rowItem === true}\n                      />\n                    </RowItem>\n                  </Column>\n                ))}\n              </Separator>\n            </tbody>\n          ))}\n        </Table>\n      </ControlsContainer>\n    );\n  }\n}\n\nexport default AnswerGrid;\n"],"mappings":"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","ignoreList":[]}

package/lib/index.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Component", {
+  enumerable: true,
+  get: function () {
+    return _main.default;
+  }
+});
+exports.isComplete = exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _client = require("react-dom/client");
+var _main = _interopRequireDefault(require("./main"));
+var _piePlayerEvents = require("@pie-framework/pie-player-events");
+var _mathRendering = require("@pie-lib/math-rendering");
+const isComplete = (session, model) => {
+  const ids = model?.rows?.map(r => r.id) || [];
+  return ids.reduce((acc, id) => {
+    if (!acc) {
+      return false;
+    }
+    const arr = session.answers && session.answers[id];
+    const hasChoice = Array.isArray(arr) && arr.includes(true);
+    return hasChoice && acc;
+  }, true);
+};
+exports.isComplete = isComplete;
+class Match extends HTMLElement {
+  constructor() {
+    super();
+    this._root = null;
+  }
+  set model(m) {
+    // config object props should be part of the model props
+    // model.config should be no longer used
+    this._model = {
+      ...m,
+      ...(m?.config || {})
+    };
+    this._render();
+  }
+  set session(s) {
+    this._session = s;
+    this._render();
+  }
+  get session() {
+    return this._session;
+  }
+  sessionChanged(s) {
+    this._session.answers = s.answers;
+    const complete = isComplete(this._session, this._model);
+    this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), complete));
+    this._render();
+  }
+  connectedCallback() {
+    this._render();
+  }
+  _render() {
+    if (!this._model || !this._session) {
+      return;
+    }
+    const el = /*#__PURE__*/_react.default.createElement(_main.default, {
+      model: this._model,
+      session: this._session,
+      onSessionChange: this.sessionChanged.bind(this)
+    });
+    if (!this._root) {
+      this._root = (0, _client.createRoot)(this);
+    }
+    this._root.render(el);
+    queueMicrotask(() => {
+      (0, _mathRendering.renderMath)(this);
+    });
+  }
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}
+exports.default = Match;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_main","_piePlayerEvents","_mathRendering","isComplete","session","model","ids","rows","map","r","id","reduce","acc","arr","answers","hasChoice","Array","isArray","includes","exports","Match","HTMLElement","constructor","_root","m","_model","config","_render","s","_session","sessionChanged","complete","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","connectedCallback","el","React","createElement","Main","onSessionChange","bind","createRoot","render","queueMicrotask","renderMath","disconnectedCallback","unmount","default"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport Main from './main';\nimport { SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nexport { Main as Component };\n\nexport const isComplete = (session, model) => {\n  const ids = model?.rows?.map((r) => r.id) || [];\n\n  return ids.reduce((acc, id) => {\n    if (!acc) {\n      return false;\n    }\n\n    const arr = session.answers && session.answers[id];\n    const hasChoice = Array.isArray(arr) && arr.includes(true);\n\n    return hasChoice && acc;\n  }, true);\n};\n\nexport default class Match extends HTMLElement {\n  constructor() {\n    super();\n    this._root = null;\n  }\n\n  set model(m) {\n    // config object props should be part of the model props\n    // model.config should be no longer used\n    this._model = { ...m, ...(m?.config || {}) };\n    this._render();\n  }\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  sessionChanged(s) {\n    this._session.answers = s.answers;\n    const complete = isComplete(this._session, this._model);\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), complete));\n\n    this._render();\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (!this._model || !this._session) {\n      return;\n    }\n\n    const el = React.createElement(Main, {\n      model: this._model,\n      session: this._session,\n      onSessionChange: this.sessionChanged.bind(this),\n    });\n\n    if (!this._root) {\n      this._root = createRoot(this);\n    }\n    this._root.render(el);\n    queueMicrotask(() => {\n      renderMath(this);\n    });\n  }\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/main.js

@@ -0,0 +1,163 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Main = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
+var _renderUi = require("@pie-lib/render-ui");
+var _answerGrid = _interopRequireDefault(require("./answer-grid"));
+var _styles = require("@mui/material/styles");
+const StyledPrompt = (0, _styles.styled)('div')({
+  verticalAlign: 'middle'
+});
+const StyledCollapsible = (0, _styles.styled)(_renderUi.Collapsible)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+class Main extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "generateAnswers", model => {
+      const answers = {};
+      model.rows?.forEach(row => {
+        answers[row.id] = new Array(model.layout - 1).fill(false);
+      });
+      return answers;
+    });
+    (0, _defineProperty2.default)(this, "isAnswerRegenerationRequired", nextProps => {
+      const {
+        model: {
+          choiceMode,
+          layout,
+          rows
+        } = {}
+      } = this.props;
+      const {
+        session: {
+          answers
+        } = {}
+      } = nextProps;
+      let isRequired = false;
+      if (choiceMode !== nextProps.model.choiceMode) {
+        isRequired = true;
+      }
+      if (layout !== nextProps.model.layout) {
+        isRequired = true;
+      }
+      if (rows.length !== nextProps.model.rows.length || answers && nextProps.model.rows.length !== Object.keys(answers).length) {
+        isRequired = true;
+      }
+      return isRequired || !answers;
+    });
+    (0, _defineProperty2.default)(this, "callOnSessionChange", () => {
+      const {
+        onSessionChange
+      } = this.props;
+      if (onSessionChange) {
+        onSessionChange(this.state.session);
+      }
+    });
+    (0, _defineProperty2.default)(this, "toggleShowCorrect", show => {
+      this.setState({
+        showCorrect: show
+      });
+    });
+    (0, _defineProperty2.default)(this, "onAnswerChange", newAnswers => {
+      this.setState(state => ({
+        session: {
+          ...state.session,
+          answers: newAnswers
+        }
+      }), this.callOnSessionChange);
+    });
+    this.state = {
+      session: {
+        ...props.session,
+        answers: props.session && props.session.answers || this.generateAnswers(props.model)
+      },
+      showCorrect: false
+    };
+    this.callOnSessionChange();
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const regenAnswers = this.isAnswerRegenerationRequired(nextProps);
+    this.setState(state => ({
+      session: {
+        ...nextProps.session,
+        // regenerate answers if layout or choiceMode change
+        answers: regenAnswers ? this.generateAnswers(nextProps.model) : nextProps.session.answers
+      },
+      showCorrect: this.props.model.disabled && !nextProps.model.disabled && state.showCorrect ? false : state.showCorrect
+    }), () => {
+      if (regenAnswers) this.callOnSessionChange();
+    });
+  }
+  render() {
+    const {
+      model
+    } = this.props;
+    const {
+      showCorrect,
+      session
+    } = this.state;
+    const {
+      correctness = {},
+      extraCSSRules,
+      language
+    } = model;
+    const showCorrectAnswerToggle = correctness.correctness && correctness.correctness !== 'correct';
+    const showRationale = model.rationale && ((0, _renderUi.hasText)(model.rationale) || (0, _renderUi.hasMedia)(model.rationale));
+    const showTeacherInstructions = model.teacherInstructions && ((0, _renderUi.hasText)(model.teacherInstructions) || (0, _renderUi.hasMedia)(model.teacherInstructions));
+    return /*#__PURE__*/_react.default.createElement(_renderUi.UiLayout, {
+      extraCSSRules: extraCSSRules
+    }, showTeacherInstructions && /*#__PURE__*/_react.default.createElement(StyledCollapsible, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: model.teacherInstructions
+    })), model.prompt && /*#__PURE__*/_react.default.createElement(StyledPrompt, null, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: model.prompt
+    })), /*#__PURE__*/_react.default.createElement(_correctAnswerToggle.default, {
+      language: language,
+      show: showCorrectAnswerToggle,
+      toggled: showCorrect,
+      onToggle: this.toggleShowCorrect
+    }), /*#__PURE__*/_react.default.createElement(_answerGrid.default, {
+      showCorrect: showCorrect,
+      correctAnswers: model.correctResponse,
+      disabled: model.disabled,
+      view: model.view,
+      onAnswerChange: this.onAnswerChange,
+      choiceMode: model.choiceMode,
+      answers: showCorrect ? model.correctResponse || {} : session.answers,
+      headers: model.headers,
+      rows: model.rows
+    }), showRationale && /*#__PURE__*/_react.default.createElement(_renderUi.Collapsible, {
+      labels: {
+        hidden: 'Show Rationale',
+        visible: 'Hide Rationale'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: model.rationale
+    })), model.feedback && /*#__PURE__*/_react.default.createElement(_renderUi.Feedback, {
+      correctness: correctness.correctness,
+      feedback: model.feedback
+    }));
+  }
+}
+exports.Main = Main;
+(0, _defineProperty2.default)(Main, "propTypes", {
+  session: _propTypes.default.object.isRequired,
+  onSessionChange: _propTypes.default.func,
+  model: _propTypes.default.object.isRequired
+});
+var _default = exports.default = Main;
+//# sourceMappingURL=main.js.map

package/lib/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","names":["_react","_interopRequireDefault","require","_propTypes","_correctAnswerToggle","_renderUi","_answerGrid","_styles","StyledPrompt","styled","verticalAlign","StyledCollapsible","Collapsible","theme","marginBottom","spacing","Main","React","Component","constructor","props","_defineProperty2","default","model","answers","rows","forEach","row","id","Array","layout","fill","nextProps","choiceMode","session","isRequired","length","Object","keys","onSessionChange","state","show","setState","showCorrect","newAnswers","callOnSessionChange","generateAnswers","UNSAFE_componentWillReceiveProps","regenAnswers","isAnswerRegenerationRequired","disabled","render","correctness","extraCSSRules","language","showCorrectAnswerToggle","showRationale","rationale","hasText","hasMedia","showTeacherInstructions","teacherInstructions","createElement","UiLayout","labels","hidden","visible","PreviewPrompt","prompt","toggled","onToggle","toggleShowCorrect","correctAnswers","correctResponse","view","onAnswerChange","headers","feedback","Feedback","exports","PropTypes","object","func","_default"],"sources":["../src/main.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { Collapsible, Feedback, hasText, PreviewPrompt, UiLayout, hasMedia } from '@pie-lib/render-ui';\nimport AnswerGrid from './answer-grid';\nimport { styled } from '@mui/material/styles';\n\nconst StyledPrompt = styled('div')({\n  verticalAlign: 'middle',\n});\n\nconst StyledCollapsible = styled(Collapsible)(({ theme }) => ({\n  marginBottom: theme.spacing(2),\n}));\n\nexport class Main extends React.Component {\n  static propTypes = {\n    session: PropTypes.object.isRequired,\n    onSessionChange: PropTypes.func,\n    model: PropTypes.object.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      session: {\n        ...props.session,\n        answers: (props.session && props.session.answers) || this.generateAnswers(props.model),\n      },\n      showCorrect: false,\n    };\n\n    this.callOnSessionChange();\n  }\n\n  generateAnswers = (model) => {\n    const answers = {};\n\n    model.rows?.forEach((row) => {\n      answers[row.id] = new Array(model.layout - 1).fill(false);\n    });\n\n    return answers;\n  };\n\n  isAnswerRegenerationRequired = (nextProps) => {\n    const { model: { choiceMode, layout, rows } = {} } = this.props;\n    const { session: { answers } = {} } = nextProps;\n    let isRequired = false;\n\n    if (choiceMode !== nextProps.model.choiceMode) {\n      isRequired = true;\n    }\n\n    if (layout !== nextProps.model.layout) {\n      isRequired = true;\n    }\n\n    if (\n      rows.length !== nextProps.model.rows.length ||\n      (answers && nextProps.model.rows.length !== Object.keys(answers).length)\n    ) {\n      isRequired = true;\n    }\n\n    return isRequired || !answers;\n  };\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    const regenAnswers = this.isAnswerRegenerationRequired(nextProps);\n\n    this.setState(\n      (state) => ({\n        session: {\n          ...nextProps.session,\n          // regenerate answers if layout or choiceMode change\n          answers: regenAnswers ? this.generateAnswers(nextProps.model) : nextProps.session.answers,\n        },\n        showCorrect:\n          this.props.model.disabled && !nextProps.model.disabled && state.showCorrect ? false : state.showCorrect,\n      }),\n      () => {\n        if (regenAnswers) this.callOnSessionChange();\n      },\n    );\n  }\n\n  callOnSessionChange = () => {\n    const { onSessionChange } = this.props;\n\n    if (onSessionChange) {\n      onSessionChange(this.state.session);\n    }\n  };\n\n  toggleShowCorrect = (show) => {\n    this.setState({ showCorrect: show });\n  };\n\n  onAnswerChange = (newAnswers) => {\n    this.setState(\n      (state) => ({\n        session: {\n          ...state.session,\n          answers: newAnswers,\n        },\n      }),\n      this.callOnSessionChange,\n    );\n  };\n\n  render() {\n    const { model } = this.props;\n    const { showCorrect, session } = this.state;\n    const { correctness = {}, extraCSSRules, language } = model;\n    const showCorrectAnswerToggle = correctness.correctness && correctness.correctness !== 'correct';\n\n    const showRationale = model.rationale && (hasText(model.rationale) || hasMedia(model.rationale));\n    const showTeacherInstructions =\n      model.teacherInstructions && (hasText(model.teacherInstructions) || hasMedia(model.teacherInstructions));\n\n    return (\n      <UiLayout extraCSSRules={extraCSSRules}>\n        {showTeacherInstructions && (\n          <StyledCollapsible\n            labels={{\n              hidden: 'Show Teacher Instructions',\n              visible: 'Hide Teacher Instructions',\n            }}\n          >\n            <PreviewPrompt prompt={model.teacherInstructions} />\n          </StyledCollapsible>\n        )}\n\n        {model.prompt && (\n          <StyledPrompt>\n            <PreviewPrompt prompt={model.prompt} />\n          </StyledPrompt>\n        )}\n\n        <CorrectAnswerToggle\n          language={language}\n          show={showCorrectAnswerToggle}\n          toggled={showCorrect}\n          onToggle={this.toggleShowCorrect}\n        />\n\n        <AnswerGrid\n          showCorrect={showCorrect}\n          correctAnswers={model.correctResponse}\n          disabled={model.disabled}\n          view={model.view}\n          onAnswerChange={this.onAnswerChange}\n          choiceMode={model.choiceMode}\n          answers={showCorrect ? model.correctResponse || {} : session.answers}\n          headers={model.headers}\n          rows={model.rows}\n        />\n\n        {showRationale && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt prompt={model.rationale} />\n          </Collapsible>\n        )}\n\n        {model.feedback && <Feedback correctness={correctness.correctness} feedback={model.feedback} />}\n      </UiLayout>\n    );\n  }\n}\n\nexport default Main;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,101 +1,34 @@
 {
   "name": "@pie-element/match",
-  "version": "12.1.2-next.1",
+  "repository": "pie-framework/pie-elements",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "12.1.2",
+  "main": "lib/index.js",
   "description": "",
+  "scripts": {
+    "postpublish": "../../scripts/postpublish"
+  },
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/style": "^0.8.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/correct-answer-toggle": "4.0.3-next.0",
-    "@pie-lib/render-ui": "6.1.1-next.0",
+    "@pie-framework/pie-player-events": "^0.1.0",
+    "@pie-lib/correct-answer-toggle": "4.0.3",
+    "@pie-lib/math-rendering": "5.0.2",
+    "@pie-lib/render-ui": "6.1.1",
     "@pie-lib/test-utils": "2.0.2",
+    "classnames": "^2.2.6",
     "debug": "^4.1.1",
+    "lodash-es": "^4.17.23",
     "prop-types": "^15.8.1",
-    "clsx": "^2.1.1",
-    "@pie-element/shared-lodash": "0.1.1-next.0",
-    "@pie-lib/editable-html-tip-tap": "2.1.2-next.0",
-    "@pie-lib/drag": "4.0.3-next.0",
-    "@pie-lib/config-ui": "13.0.4-next.0",
-    "@pie-element/shared-configure-events": "0.1.0",
-    "@dnd-kit/core": "^6.3.1",
-    "@pie-element/shared-feedback": "0.1.0",
-    "@pie-element/shared-controller-utils": "0.1.1-next.1",
-    "@pie-element/shared-player-events": "0.1.0",
-    "@pie-element/shared-math-rendering-mathjax": "0.1.0",
-    "@emotion/core": "0.x.x"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./delivery": {
-      "types": "./dist/delivery/index.d.ts",
-      "default": "./dist/delivery/index.js"
-    },
-    "./browser/delivery": {
-      "default": "./dist/browser/delivery/index.js"
-    },
-    "./author": {
-      "types": "./dist/author/index.d.ts",
-      "default": "./dist/author/index.js"
-    },
-    "./browser/author": {
-      "default": "./dist/browser/author/index.js"
-    },
-    "./configure": {
-      "types": "./dist/author/index.d.ts",
-      "default": "./dist/author/index.js"
-    },
-    "./controller": {
-      "types": "./dist/controller/index.d.ts",
-      "default": "./dist/controller/index.js"
-    },
-    "./controller.js": {
-      "types": "./dist/controller/index.d.ts",
-      "default": "./dist/controller/index.js"
-    },
-    "./browser/controller": {
-      "default": "./dist/browser/controller/index.js"
-    },
-    "./runtime-support": {
-      "types": "./dist/runtime-support.d.ts",
-      "default": "./dist/runtime-support.js"
-    }
-  },
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "configure.js",
-    "controller.js",
-    "dist"
-  ],
-  "sideEffects": false,
-  "devDependencies": {
-    "vite": "^8.0.1",
-    "typescript": "^5.9.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0"
-  },
-  "scripts": {
-    "build": "bun x vite build && bun x vite build --config ../../../tools/vite/element-browser.config.ts && bun x vite build --config vite.config.iife.ts && bun x tsc --emitDeclarationOnly",
-    "dev": "bun x vite",
-    "demo": "bun x vite --mode demo",
-    "test": "bun x vitest run"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
-  "pie": {
-    "controller": "@pie-element/match/controller",
-    "configure": "@pie-element/match/configure",
-    "browserSharedDependencies": {
-      "react": "18.2.0",
-      "react-dom": "18.2.0"
-    }
-  }
+  "author": "",
+  "license": "ISC",
+  "gitHead": "206ff17a94e8e197744d059f97ad2b9a1bc9145d",
+  "module": "src/index.js"
 }

package/configure.js

@@ -1,2 +0,0 @@
-export { default } from './dist/author/index.js';
-export * from './dist/author/index.js';

package/controller.js

@@ -1 +0,0 @@
-export * from './dist/controller/index.js';

package/dist/author/add-row.d.ts

@@ -1,17 +0,0 @@
-/**
- * @synced-from pie-elements/packages/match/configure/src/add-row.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-export declare class AddRowButton extends React.Component {
-    static propTypes: {
-        onAddClick: PropTypes.Validator<(...args: any[]) => any>;
-    };
-    render(): React.JSX.Element;
-}
-export default AddRowButton;