@pie-element/math-inline 8.4.7-next.9 → 8.4.7

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.4.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/math-inline@8.4.6...@pie-element/math-inline@8.4.7) (2025-03-13)
+
+
+### Bug Fixes
+
+* update pie-lib/pie-toolbox PD-4872, PD-4093, PD-4588, PD-4812, PD-4867 ([2386fb5](https://github.com/pie-framework/pie-elements/commit/2386fb5f84cadb42305ab5a0e6248bd2b2279e0a))
+* **math-inline:** avoid using hardcoded ids, use refs PD-4156 ([fba26df](https://github.com/pie-framework/pie-elements/commit/fba26df6641d0d59f42d31b2f779fd5ad2e2c9d0))
+* **math-inline:** Refactor handleKeyDown for improved readability & fix arrow key behavior in math editor PD-4882 ([cf6b3fd](https://github.com/pie-framework/pie-elements/commit/cf6b3fd0aad4cce72068ecb9c0450e5204068090))
+* **math-inline:** update local state based on session PD-4156 ([4836ac4](https://github.com/pie-framework/pie-elements/commit/4836ac4d4a7ac8e03a506631489a3aed44823225))
+* **math-inline:** verify avtive Element by id not by aria label PD-4156 ([96a5197](https://github.com/pie-framework/pie-elements/commit/96a51973b342356c8f25f380f878dae9f98c1891))
+
+
+
+
+
 ## [8.4.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/math-inline@8.4.5...@pie-element/math-inline@8.4.6) (2025-03-03)
 
 

package/configure/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.3.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/math-inline-configure@8.3.6...@pie-element/math-inline-configure@8.3.7) (2025-03-13)
+
+
+### Bug Fixes
+
+* update pie-lib/pie-toolbox PD-4872, PD-4093, PD-4588, PD-4812, PD-4867 ([2386fb5](https://github.com/pie-framework/pie-elements/commit/2386fb5f84cadb42305ab5a0e6248bd2b2279e0a))
+
+
+
+
+
 ## [8.3.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/math-inline-configure@8.3.5...@pie-element/math-inline-configure@8.3.6) (2025-03-03)
 
 

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/math-inline-configure",
   "private": true,
-  "version": "8.3.6",
+  "version": "8.3.7",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -11,7 +11,7 @@
     "@material-ui/icons": "^3.0.1",
     "@pie-framework/mathquill": "^1.1.3",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/pie-toolbox": "2.10.0",
+    "@pie-lib/pie-toolbox": "2.10.1",
     "classnames": "^2.2.5",
     "debug": "^3.1.0",
     "prop-types": "^15.6.2",

package/controller/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.1.18](https://github.com/pie-framework/pie-elements/compare/@pie-element/math-inline-controller@7.1.17...@pie-element/math-inline-controller@7.1.18) (2025-03-13)
+
+
+### Bug Fixes
+
+* update pie-lib/pie-toolbox PD-4872, PD-4093, PD-4588, PD-4812, PD-4867 ([2386fb5](https://github.com/pie-framework/pie-elements/commit/2386fb5f84cadb42305ab5a0e6248bd2b2279e0a))
+
+
+
+
+
 ## [7.1.17](https://github.com/pie-framework/pie-elements/compare/@pie-element/math-inline-controller@7.1.16...@pie-element/math-inline-controller@7.1.17) (2025-03-03)
 
 

package/controller/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/math-inline-controller",
   "private": true,
-  "version": "7.1.17",
+  "version": "7.1.18",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@pie-framework/math-validation": "^1.2.3",
-    "@pie-lib/pie-toolbox": "2.10.0",
+    "@pie-lib/pie-toolbox": "2.10.1",
     "debug": "^3.1.0",
     "lodash": "^4.17.15"
   },

package/lib/main.js

@@ -90,7 +90,7 @@ function isChildOfCurrentPieElement(child, parent) {
   var node = child;
 
   while (node !== null) {
-    if (node === parent) {
+    if (parent && node === parent) {
       return true;
     }
 
@@ -144,6 +144,24 @@ function prepareForStatic(model, state) {
   }
 }
 
+function parseAnswers(session, model) {
+  var answers = {};
+
+  if (model.config && model.config.expression) {
+    var answerBlocks = 1; // assume one at least
+    // build out local state model using responses declared in expression
+
+    (model.config.expression || '').replace(REGEX, function () {
+      answers["r".concat(answerBlocks)] = {
+        value: session && session.answers && session.answers["r".concat(answerBlocks)] && session.answers["r".concat(answerBlocks)].value || ''
+      };
+      answerBlocks += 1;
+    });
+  }
+
+  return answers;
+}
+
 var Main = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(Main, _React$Component);
 
@@ -248,28 +266,27 @@ var Main = /*#__PURE__*/function (_React$Component) {
       }, 0);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleKeyDown", function (event, id) {
-      // main layout has as id the actual pie-element id
-      // needed this to know if the event was triggered from the actual pie-element
-      var config = _this.props.model.config;
-      var myElement = document.getElementById(config.id);
-      var isTrigerredFromActualPieElement = true;
-      isTrigerredFromActualPieElement = isChildOfCurrentPieElement(event.target, myElement);
-      var isAnswerInputFocused = document.activeElement.getAttribute('aria-label') === 'Enter answer.';
-      var isClickOrTouchEvent = event.type === 'click' || event.type === 'touchstart';
-
-      if (isAnswerInputFocused && (event.key === 'ArrowDown' || isClickOrTouchEvent)) {
+      var _this$mqStatic$inputR;
+
+      var isTrigerredFromActualPieElement = isChildOfCurrentPieElement(event.target, _this.root);
+      var isAnswerInputFocused = _this.mqStatic && ((_this$mqStatic$inputR = _this.mqStatic.inputRef) === null || _this$mqStatic$inputR === void 0 ? void 0 : _this$mqStatic$inputR.current.contains(document.activeElement));
+      var key = event.key,
+          type = event.type;
+      var isClickOrTouchEvent = type === 'click' || type === 'touchstart';
+
+      if (isAnswerInputFocused && (key === 'ArrowDown' || isClickOrTouchEvent)) {
         if (_this.state.activeAnswerBlock !== id && isTrigerredFromActualPieElement) {
           _this.cleanupKeyDownListener();
 
           _this.setState({
             activeAnswerBlock: id
-          });
+          }, function () {
+            _this.onSubFieldFocus(id);
 
-          _this.onSubFieldFocus(id);
-        }
-
-        if (event.key === 'ArrowDown') {
-          _this.focusFirstKeypadElement();
+            if (key === 'ArrowDown') {
+              _this.focusFirstKeypadElement();
+            }
+          });
         }
       } else if (event.key === 'Escape') {
         _this.setState({
@@ -456,19 +473,10 @@ var Main = /*#__PURE__*/function (_React$Component) {
       // }
 
     });
-    var _answers = {};
+    var _model = props.model,
+        _session = props.session;
 
-    if (props.model.config && props.model.config.expression) {
-      var answerBlocks = 1; // assume one at least
-      // build out local state model using responses declared in expression
-
-      (props.model.config.expression || '').replace(REGEX, function () {
-        _answers["r".concat(answerBlocks)] = {
-          value: props.session && props.session.answers && props.session.answers["r".concat(answerBlocks)] && props.session.answers["r".concat(answerBlocks)].value || ''
-        };
-        answerBlocks += 1;
-      });
-    }
+    var _answers = parseAnswers(_session, _model);
 
     _this.state = {
       session: _objectSpread(_objectSpread({}, props.session), {}, {
@@ -521,7 +529,23 @@ var Main = /*#__PURE__*/function (_React$Component) {
 
       var _ref4 = nextProps.model || {},
           _ref4$config = _ref4.config,
-          nextConfig = _ref4$config === void 0 ? {} : _ref4$config; // check if the note is the default one for prev language and change to the default one for new language
+          nextConfig = _ref4$config === void 0 ? {} : _ref4$config;
+
+      var session = this.props.session;
+
+      var _ref5 = nextProps || {},
+          _ref5$session = _ref5.session,
+          nextSession = _ref5$session === void 0 ? {} : _ref5$session; // in case session props changed in parent, we need to catch this and update local state
+      // example: when env is changing in pieoneer
+
+
+      if (session && nextSession && !(0, _isEqual["default"])(session.answers, nextSession.answers)) {
+        this.setState({
+          session: _objectSpread(_objectSpread({}, nextSession), {}, {
+            answers: parseAnswers(nextSession, this.props.model)
+          })
+        });
+      } // check if the note is the default one for prev language and change to the default one for new language
       // this check is necessary in order to diferanciate between default and authour defined note
       // and only change between languages for default ones
 
@@ -642,38 +666,38 @@ var Main = /*#__PURE__*/function (_React$Component) {
           session = _this$state2.session,
           tooltipContainerRef = _this$state2.tooltipContainerRef;
 
-      var _ref5 = model || {},
-          config = _ref5.config,
-          correctness = _ref5.correctness,
-          disabled = _ref5.disabled,
-          extraCSSRules = _ref5.extraCSSRules,
-          view = _ref5.view,
-          teacherInstructions = _ref5.teacherInstructions,
-          rationale = _ref5.rationale,
-          feedback = _ref5.feedback,
-          animationsDisabled = _ref5.animationsDisabled,
-          printMode = _ref5.printMode,
-          alwaysShowCorrect = _ref5.alwaysShowCorrect,
-          language = _ref5.language;
+      var _ref6 = model || {},
+          config = _ref6.config,
+          correctness = _ref6.correctness,
+          disabled = _ref6.disabled,
+          extraCSSRules = _ref6.extraCSSRules,
+          view = _ref6.view,
+          teacherInstructions = _ref6.teacherInstructions,
+          rationale = _ref6.rationale,
+          feedback = _ref6.feedback,
+          animationsDisabled = _ref6.animationsDisabled,
+          printMode = _ref6.printMode,
+          alwaysShowCorrect = _ref6.alwaysShowCorrect,
+          language = _ref6.language;
 
       if (!config) {
         return null;
       }
 
-      var _ref6 = config || {},
-          showNote = _ref6.showNote,
-          note = _ref6.note,
-          prompt = _ref6.prompt,
-          responses = _ref6.responses,
-          responseType = _ref6.responseType,
-          equationEditor = _ref6.equationEditor,
-          customKeys = _ref6.customKeys,
-          id = _ref6.id,
-          _ref6$env = _ref6.env;
-
-      _ref6$env = _ref6$env === void 0 ? {} : _ref6$env;
-      var mode = _ref6$env.mode,
-          role = _ref6$env.role;
+      var _ref7 = config || {},
+          showNote = _ref7.showNote,
+          note = _ref7.note,
+          prompt = _ref7.prompt,
+          responses = _ref7.responses,
+          responseType = _ref7.responseType,
+          equationEditor = _ref7.equationEditor,
+          customKeys = _ref7.customKeys,
+          id = _ref7.id,
+          _ref7$env = _ref7.env;
+
+      _ref7$env = _ref7$env === void 0 ? {} : _ref7$env;
+      var mode = _ref7$env.mode,
+          role = _ref7$env.role;
       var displayNote = (showCorrect || mode === 'view' && role === 'instructor') && showNote && note;
       var emptyResponse = (0, _isEmpty["default"])(responses);
       var showCorrectAnswerToggle = !emptyResponse && correctness && correctness.correctness !== 'correct';
@@ -738,8 +762,8 @@ var Main = /*#__PURE__*/function (_React$Component) {
         ref: tooltipContainerRef,
         className: (0, _classnames["default"])(classes.expression, (_cx = {}, (0, _defineProperty2["default"])(_cx, classes.incorrect, !emptyResponse && !correct && !showCorrect), (0, _defineProperty2["default"])(_cx, classes.correct, !emptyResponse && (correct || showCorrect)), (0, _defineProperty2["default"])(_cx, classes.showCorrectness, !emptyResponse && disabled && correctness && !view), (0, _defineProperty2["default"])(_cx, classes.correctAnswerShown, showCorrect), (0, _defineProperty2["default"])(_cx, classes.printCorrect, printMode && alwaysShowCorrect), _cx))
       }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-        ref: function ref(_ref7) {
-          return _this4.setTooltipRef(_ref7);
+        ref: function ref(_ref8) {
+          return _this4.setTooltipRef(_ref8);
         },
         enterTouchDelay: 0,
         interactive: true,
@@ -809,8 +833,7 @@ var Main = /*#__PURE__*/function (_React$Component) {
 
       if (tooltipModeEnabled && (showCorrectAnswerToggle || teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) || rationale && (0, _renderUi.hasText)(rationale) || feedback)) {
         return /*#__PURE__*/_react["default"].createElement(_renderUi.UiLayout, {
-          extraCSSRules: extraCSSRules,
-          id: id
+          extraCSSRules: extraCSSRules
         }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
           interactive: true,
           enterTouchDelay: 0,