survey-react-ui 1.9.117 → 1.9.118

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react-ui",
-  "version": "1.9.117",
+  "version": "1.9.118",
   "description": "survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.",
   "keywords": [
     "Survey",
@@ -21,7 +21,7 @@
   },
   "typings": "survey-react-ui.d.ts",
   "dependencies": {
-    "survey-core": "1.9.117",
+    "survey-core": "1.9.118",
     "react": "^16.5.0 || ^17.0.1 || ^18.1.0",
     "react-dom": "^16.5.0 || ^17.0.1 || ^18.1.0"
   }

package/survey-react-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.117
+ * surveyjs - Survey JavaScript library v1.9.118
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -2564,7 +2564,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.117", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.118", "survey-react-ui");
 
 
 /***/ }),
@@ -7510,6 +7510,11 @@ var JsonObjectProperty = /** @class */ (function () {
         return ((value === false && (this.type == "boolean" || this.type == "switch")) ||
             value === "" || _helpers__WEBPACK_IMPORTED_MODULE_2__["Helpers"].isValueEmpty(value));
     };
+    JsonObjectProperty.prototype.getSerializableValue = function (obj) {
+        if (!!this.onSerializeValue)
+            return this.onSerializeValue(obj);
+        return this.getValue(obj);
+    };
     JsonObjectProperty.prototype.getValue = function (obj) {
         if (this.onGetValue)
             return this.onGetValue(obj);
@@ -8101,6 +8106,9 @@ var JsonMetadataClass = /** @class */ (function () {
             if (!!propInfo.baseValue) {
                 prop.setBaseValue(propInfo.baseValue);
             }
+            if (propInfo.onSerializeValue) {
+                prop.onSerializeValue = propInfo.onSerializeValue;
+            }
             if (propInfo.onGetValue) {
                 prop.onGetValue = propInfo.onGetValue;
             }
@@ -8895,7 +8903,7 @@ var JsonObject = /** @class */ (function () {
         if (property.isSerializable === false ||
             (property.isLightSerializable === false && this.lightSerializing))
             return;
-        var value = property.getValue(obj);
+        var value = property.getSerializableValue(obj);
         if (!storeDefaults && property.isDefaultValueByObj(obj, value))
             return;
         if (this.isValueArray(value)) {
@@ -9736,8 +9744,8 @@ var englishStrings = {
     textMaxLength: "Please enter no more than {0} character(s).",
     textMinMaxLength: "Please enter at least {0} and no more than {1} characters.",
     minRowCountError: "Please fill in at least {0} row(s).",
-    minSelectError: "Please select at least {0} variant(s).",
-    maxSelectError: "Please select no more than {0} variant(s).",
+    minSelectError: "Please select at least {0} option(s).",
+    maxSelectError: "Please select no more than {0} option(s).",
     numericMinMax: "The '{0}' should be at least {1} and at most {2}",
     numericMin: "The '{0}' should be at least {1}",
     numericMax: "The '{0}' should be at most {1}",
@@ -15999,8 +16007,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
-/* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactquestion_factory */ "./src/react/reactquestion_factory.tsx");
-/* harmony import */ var _components_character_counter__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/character-counter */ "./src/react/components/character-counter.tsx");
+/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-core */ "survey-core");
+/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactquestion_factory */ "./src/react/reactquestion_factory.tsx");
+/* harmony import */ var _components_character_counter__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/character-counter */ "./src/react/components/character-counter.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -16020,6 +16030,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyQuestionComment = /** @class */ (function (_super) {
     __extends(SurveyQuestionComment, _super);
     function SurveyQuestionComment(props) {
@@ -16042,7 +16053,7 @@ var SurveyQuestionComment = /** @class */ (function (_super) {
         if (this.question.isReadOnlyRenderDiv()) {
             return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null, this.question.value);
         }
-        var counter = !!this.question.getMaxLength() ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_character_counter__WEBPACK_IMPORTED_MODULE_3__["CharacterCounterComponent"], { counter: this.question.characterCounter, remainingCharacterCounter: this.question.cssClasses.remainingCharacterCounter })) : null;
+        var counter = !!this.question.getMaxLength() ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_character_counter__WEBPACK_IMPORTED_MODULE_4__["CharacterCounterComponent"], { counter: this.question.characterCounter, remainingCharacterCounter: this.question.cssClasses.remainingCharacterCounter })) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("textarea", { id: this.question.inputId, className: this.question.className, disabled: this.question.isInputReadOnly, readOnly: this.question.isInputReadOnly, ref: function (textarea) { return (_this.setControl(textarea)); }, maxLength: this.question.getMaxLength(), placeholder: placeholder, onBlur: onBlur, onInput: onInput, onKeyDown: function (event) { _this.question.onKeyDown(event); }, cols: this.question.cols, rows: this.question.rows, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy, style: { resize: this.question.resizeStyle } }),
             counter));
@@ -16052,9 +16063,19 @@ var SurveyQuestionComment = /** @class */ (function (_super) {
 
 var SurveyQuestionCommentItem = /** @class */ (function (_super) {
     __extends(SurveyQuestionCommentItem, _super);
-    function SurveyQuestionCommentItem() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function SurveyQuestionCommentItem(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = { comment: _this.getComment() || "" };
+        return _this;
     }
+    SurveyQuestionCommentItem.prototype.getStateComment = function () {
+        var comment = this.getComment();
+        var stateComment = this.state.comment;
+        if (stateComment !== undefined && stateComment.trim() !== comment) {
+            stateComment = comment;
+        }
+        return stateComment !== undefined ? stateComment : comment || "";
+    };
     SurveyQuestionCommentItem.prototype.canRender = function () {
         return !!this.props.question;
     };
@@ -16064,12 +16085,12 @@ var SurveyQuestionCommentItem = /** @class */ (function (_super) {
     SurveyQuestionCommentItem.prototype.onCommentInput = function (event) {
         this.props.question.onCommentInput(event);
     };
-    SurveyQuestionCommentItem.prototype.onCommentCompositionUpdate = function (event) {
-        this.props.question.onCompositionUpdateComment(event);
-    };
     SurveyQuestionCommentItem.prototype.getComment = function () {
         return this.props.question.comment;
     };
+    SurveyQuestionCommentItem.prototype.setComment = function (value) {
+        this.props.question.comment = value;
+    };
     SurveyQuestionCommentItem.prototype.getId = function () {
         return this.props.question.commentId;
     };
@@ -16082,18 +16103,16 @@ var SurveyQuestionCommentItem = /** @class */ (function (_super) {
         var className = this.props.otherCss || this.cssClasses.comment;
         var handleOnChange = function (event) {
             _this.setState({ comment: event.target.value });
-            _this.onCommentChange(event);
+            // https://github.com/surveyjs/survey-library/issues/7252
+            if (!survey_core__WEBPACK_IMPORTED_MODULE_2__["Helpers"].isTwoValueEquals(_this.getComment(), event.target.value, false, true, false)) {
+                _this.setComment(event.target.value);
+            }
         };
-        var questionComment = this.getComment();
-        var stateComment = !!this.state ? this.state.comment : undefined;
-        if (stateComment !== undefined && stateComment.trim() !== questionComment) {
-            stateComment = questionComment;
-        }
-        var comment = stateComment !== undefined ? stateComment : questionComment || "";
+        var comment = this.getStateComment();
         if (question.isReadOnlyRenderDiv()) {
             return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null, comment);
         }
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("textarea", { id: this.getId(), className: className, value: comment, disabled: this.isDisplayMode, maxLength: question.getOthersMaxLength(), placeholder: this.getPlaceholder(), onChange: handleOnChange, onBlur: function (e) { _this.onCommentChange(e); handleOnChange(e); }, onInput: function (e) { return _this.onCommentInput(e); }, onCompositionUpdate: function (e) { return _this.onCommentCompositionUpdate(e); }, "aria-required": question.isRequired || question.a11y_input_ariaRequired, "aria-label": question.ariaLabel || question.a11y_input_ariaLabel, style: { resize: question.resizeStyle } }));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("textarea", { id: this.getId(), className: className, value: comment, disabled: this.isDisplayMode, maxLength: question.getOthersMaxLength(), placeholder: this.getPlaceholder(), onChange: handleOnChange, onBlur: function (e) { _this.onCommentChange(e); handleOnChange(e); }, onInput: function (e) { return _this.onCommentInput(e); }, "aria-required": question.isRequired || question.a11y_input_ariaRequired, "aria-label": question.ariaLabel || question.a11y_input_ariaLabel, style: { resize: question.resizeStyle } }));
     };
     return SurveyQuestionCommentItem;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
@@ -16109,12 +16128,12 @@ var SurveyQuestionOtherValueItem = /** @class */ (function (_super) {
     SurveyQuestionOtherValueItem.prototype.onCommentInput = function (event) {
         this.props.question.onOtherValueInput(event);
     };
-    SurveyQuestionOtherValueItem.prototype.onCommentCompositionUpdate = function (event) {
-        this.props.question.onCompositionUpdateOtherValue(event);
-    };
     SurveyQuestionOtherValueItem.prototype.getComment = function () {
         return this.props.question.otherValue;
     };
+    SurveyQuestionOtherValueItem.prototype.setComment = function (value) {
+        this.props.question.otherValue = value;
+    };
     SurveyQuestionOtherValueItem.prototype.getId = function () {
         return this.props.question.otherId;
     };
@@ -16124,7 +16143,7 @@ var SurveyQuestionOtherValueItem = /** @class */ (function (_super) {
     return SurveyQuestionOtherValueItem;
 }(SurveyQuestionCommentItem));
 
-_reactquestion_factory__WEBPACK_IMPORTED_MODULE_2__["ReactQuestionFactory"].Instance.registerQuestion("comment", function (props) {
+_reactquestion_factory__WEBPACK_IMPORTED_MODULE_3__["ReactQuestionFactory"].Instance.registerQuestion("comment", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionComment, props);
 });
 
@@ -17171,7 +17190,7 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
             else {
                 td = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { key: key, "data-responsive-title": column.locText.renderedHtml, className: this.question.cssClasses.cell },
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { onMouseDown: this.handleOnMouseDown, className: itemClass },
-                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { id: inputId, type: "radio", className: this.cssClasses.itemValue, name: row.fullName, value: column.value, disabled: this.isDisplayMode, checked: isChecked, onChange: this.handleOnChange, "aria-required": this.question.ariaRequired, "aria-label": this.question.getCellAriaLabel(row.locText.renderedHtml, column.locText.renderedHtml), "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy }),
+                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { id: inputId, type: "radio", className: this.cssClasses.itemValue, name: row.fullName, value: column.value, disabled: this.isDisplayMode, checked: isChecked, onChange: this.handleOnChange, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.getCellAriaLabel(row.locText.renderedHtml, column.locText.renderedHtml), "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy }),
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
                             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.cssClasses.itemDecorator },
                                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("use", { xlinkHref: this.question.itemSvgIcon })) :
@@ -20167,6 +20186,27 @@ var settings = {
      * Default value: `"none"`
      */
     noneItemValue: "none",
+    /**
+     * An object whose properties specify the order of the special choice items (None, Other, Select All) in select-based questions.
+     *
+     * Default value: `{ selectAllItem: [-1], noneItem: [1], otherItem: [2] }`
+     *
+     * Use this object to reorder special choices. Each property accepts an array of integer numbers. Negative numbers place a special choice item above regular choice items, positive numbers place it below them. For instance, the code below specifies the following order of choices: None, Select All, regular choices, Other.
+     *
+     * ```js
+     * import { settings } from "survey-core";
+     *
+     * settings.specialChoicesOrder.noneItem = [-2];
+     * settings.specialChoicesOrder.selectAllItem = [-1];
+     * settings.specialChoicesOrder.otherItem = [1];
+     * ```
+     *
+     * If you want to duplicate a special choice item above and below other choices, add two numbers to the corresponding array:
+     *
+     * ```js
+     * settings.specialChoicesOrder.selectAllItem = [-1, 3] // Displays Select All above and below other choices
+     * ```
+     */
     specialChoicesOrder: {
         selectAllItem: [-1],
         noneItem: [1],
@@ -20534,19 +20574,36 @@ var ResponsivityManager = /** @class */ (function () {
         configurable: true
     });
     ResponsivityManager.prototype.process = function () {
-        var _a;
+        var _this = this;
         if (this.isContainerVisible && !this.model.isResponsivenessDisabled) {
             if (!this.isInitialized) {
                 this.model.setActionsMode("large");
-                this.calcItemsSizes();
-                this.isInitialized = true;
+                var recalcItemSizes = function () {
+                    _this.calcItemsSizes();
+                    _this.isInitialized = true;
+                };
+                if (queueMicrotask) {
+                    queueMicrotask(recalcItemSizes);
+                }
+                else {
+                    recalcItemSizes();
+                }
             }
-            var dotsItemSize = this.dotsItemSize;
-            if (!this.dotsItemSize) {
-                var dotsItemElement = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector(".sv-dots");
-                dotsItemSize = dotsItemElement && this.calcItemSize(dotsItemElement) || this.dotsSizeConst;
+            var processResponsiveness = function () {
+                var _a;
+                var dotsItemSize = _this.dotsItemSize;
+                if (!_this.dotsItemSize) {
+                    var dotsItemElement = (_a = _this.container) === null || _a === void 0 ? void 0 : _a.querySelector(".sv-dots");
+                    dotsItemSize = dotsItemElement && _this.calcItemSize(dotsItemElement) || _this.dotsSizeConst;
+                }
+                _this.model.fit(_this.getAvailableSpace(), dotsItemSize);
+            };
+            if (queueMicrotask) {
+                queueMicrotask(processResponsiveness);
+            }
+            else {
+                processResponsiveness();
             }
-            this.model.fit(this.getAvailableSpace(), dotsItemSize);
         }
     };
     ResponsivityManager.prototype.dispose = function () {
@@ -20968,6 +21025,9 @@ function findParentByClassNames(element, classNames) {
 function sanitizeEditableContent(element) {
     if (window.getSelection && document.createRange && element.childNodes.length > 0) {
         var selection = document.getSelection();
+        if (selection.rangeCount == 0) {
+            return;
+        }
         var range = selection.getRangeAt(0);
         range.setStart(range.endContainer, range.endOffset);
         range.setEndAfter(element.lastChild);