survey-react-ui 1.9.107 → 1.9.108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react-ui",
-  "version": "1.9.107",
+  "version": "1.9.108",
   "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.107",
+    "survey-core": "1.9.108",
     "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.107
+ * surveyjs - Survey JavaScript library v1.9.108
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -696,7 +696,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.107", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.108", "survey-react-ui");
 
 
 /***/ }),
@@ -3964,6 +3964,129 @@ var SurveyElementHeader = /** @class */ (function (_super) {
 
 
 
+/***/ }),
+
+/***/ "./src/react/element.tsx":
+/*!*******************************!*\
+  !*** ./src/react/element.tsx ***!
+  \*******************************/
+/*! exports provided: SurveyRowElement */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyRowElement", function() { return SurveyRowElement; });
+/* 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 _element_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+
+
+var SurveyRowElement = /** @class */ (function (_super) {
+    __extends(SurveyRowElement, _super);
+    function SurveyRowElement(props) {
+        var _this = _super.call(this, props) || this;
+        _this.element.cssClasses;
+        return _this;
+    }
+    SurveyRowElement.prototype.getStateElement = function () {
+        return this.element;
+    };
+    Object.defineProperty(SurveyRowElement.prototype, "element", {
+        get: function () {
+            return this.props.element;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyRowElement.prototype, "index", {
+        get: function () {
+            return this.props.index;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyRowElement.prototype, "row", {
+        get: function () {
+            return this.props.row;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyRowElement.prototype, "survey", {
+        get: function () {
+            return this.props.survey;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyRowElement.prototype, "creator", {
+        get: function () {
+            return this.props.creator;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyRowElement.prototype, "css", {
+        get: function () {
+            return this.props.css;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyRowElement.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+        if (!_super.prototype.shouldComponentUpdate.call(this, nextProps, nextState))
+            return false;
+        this.element.cssClasses;
+        return true;
+    };
+    SurveyRowElement.prototype.renderElement = function () {
+        var element = this.element;
+        var innerElement = this.createElement(element, this.index);
+        var css = element.cssClassesValue;
+        var focusIn = function () {
+            var el = element;
+            if (el && el.isQuestion) {
+                el.focusIn();
+            }
+        };
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: css.questionWrapper, style: element.rootStyle, "data-key": innerElement.key, key: innerElement.key, onFocus: focusIn }, this.row.isNeedRender ? innerElement : _element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.createElement(element.skeletonComponentName, { element: element, css: this.css, })));
+    };
+    SurveyRowElement.prototype.createElement = function (element, elementIndex) {
+        var index = elementIndex ? "-" + elementIndex : 0;
+        var elementType = element.getType();
+        if (!_element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.isElementRegistered(elementType)) {
+            elementType = "question";
+        }
+        return _element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.createElement(elementType, {
+            key: element.name + index,
+            element: element,
+            creator: this.creator,
+            survey: this.survey,
+            css: this.css,
+        });
+    };
+    return SurveyRowElement;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElementBase"]));
+
+
+
 /***/ }),
 
 /***/ "./src/react/flow-panel.tsx":
@@ -5536,7 +5659,7 @@ var SurveyProgressButtons = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("li", { key: "listelement" + index, className: this.getListElementCss(index), onClick: this.isListElementClickable(index)
                 ? function () { return _this.clickListElement(index); }
                 : undefined },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsPageTitle, title: page.navigationTitle || page.name }, page.navigationTitle || page.name),
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsPageTitle, title: page.renderedNavigationTitle }, page.renderedNavigationTitle),
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsPageDescription, title: page.navigationDescription }, page.navigationDescription)));
     };
     SurveyProgressButtons.prototype.isListElementClickable = function (index) {
@@ -6253,7 +6376,7 @@ var SurveyQuestionCheckbox = /** @class */ (function (_super) {
     SurveyQuestionCheckbox.prototype.renderElement = function () {
         var _this = this;
         var cssClasses = this.question.cssClasses;
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("fieldset", { role: "presentation", className: this.question.getSelectBaseRootCss(), ref: function (fieldset) { return (_this.setControl(fieldset)); } },
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("fieldset", { className: this.question.getSelectBaseRootCss(), ref: function (fieldset) { return (_this.setControl(fieldset)); }, role: this.question.a11y_input_ariaRole, "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 },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("legend", { role: "presentation", className: "sv-hidden" }),
             this.getHeader(),
             this.question.hasColumns
@@ -6433,8 +6556,8 @@ var SurveyQuestionCheckboxItem = /** @class */ (function (_super) {
             : this.handleOnChange;
         var itemLabel = !this.hideCaption ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.controlLabel }, this.renderLocString(this.item.locText, this.textStyle)) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: itemClass, role: "presentation" },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: labelClass, "aria-label": this.question.getAriaItemLabel(this.item) },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: this.cssClasses.itemControl, role: "option", type: "checkbox", name: this.question.name, value: this.item.value != "selectall" ? this.item.value : undefined, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), checked: isChecked, onChange: onItemChanged, "aria-describedby": this.question.ariaDescribedBy }),
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: labelClass },
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: this.cssClasses.itemControl, type: "checkbox", name: this.question.name, value: this.item.value != "selectall" ? this.item.value : undefined, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), checked: isChecked, onChange: onItemChanged }),
                 this.cssClasses.materialDecorator ?
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.cssClasses.itemDecorator },
@@ -6563,7 +6686,7 @@ var SurveyQuestionCommentItem = /** @class */ (function (_super) {
         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); }, "aria-required": question.isRequired, "aria-label": question.locTitle.renderedHtml, 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"]));
@@ -7324,7 +7447,7 @@ var SurveyQuestionFile = /** @class */ (function (_super) {
         var fileDecorator = this.renderFileDecorator();
         var clearButton = this.question.showRemoveButton ? this.renderClearButton(this.question.cssClasses.removeButton) : null;
         var clearButtonBottom = this.question.showRemoveButtonBottom ? this.renderClearButton(this.question.cssClasses.removeButtonBottom) : null;
-        var mobileFileNavigator = this.question.mobileFileNavigatorVisible ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__["SurveyActionBar"], { model: this.question.mobileFileNavigator })) : null;
+        var fileNavigator = this.question.fileNavigatorVisible ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__["SurveyActionBar"], { model: this.question.fileNavigator })) : null;
         fileInput = (this.isDisplayMode ?
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "file", disabled: this.isDisplayMode, className: !this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss(), id: this.question.inputId, ref: function (input) { return (_this.setControl(input)); }, style: !this.isDisplayMode ? {} : { color: "transparent" }, onChange: !this.isDisplayMode ? this.question.doChange : (function () { }), multiple: this.question.allowMultiple, placeholder: this.question.title, accept: this.question.acceptedTypes })
             :
@@ -7336,7 +7459,7 @@ var SurveyQuestionFile = /** @class */ (function (_super) {
                 clearButton,
                 preview,
                 clearButtonBottom,
-                mobileFileNavigator)));
+                fileNavigator)));
     };
     SurveyQuestionFile.prototype.renderFileDecorator = function () {
         var loadingIndicator = this.renderLoadingIndicator();
@@ -8297,7 +8420,7 @@ var SurveyQuestionMultipleText = /** @class */ (function (_super) {
                 rows.push(this.renderRow(i, tableRows[i].cells, cssClasses));
             }
         }
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("table", { className: cssClasses.root },
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("table", { className: this.question.getQuestionRootCss() },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tbody", null, rows)));
     };
     SurveyQuestionMultipleText.prototype.renderCell = function (cell, cssClasses, index) {
@@ -8677,7 +8800,7 @@ var SurveyQuestionRadiogroup = /** @class */ (function (_super) {
             clearButton = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null,
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "button", className: this.question.cssClasses.clearButton, onClick: function () { return _this.question.clearValue(); }, value: this.question.clearButtonCaption })));
         }
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("fieldset", { className: this.question.getSelectBaseRootCss(), role: "presentation", ref: function (fieldset) { return (_this.setControl(fieldset)); } },
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("fieldset", { className: this.question.getSelectBaseRootCss(), ref: function (fieldset) { return (_this.setControl(fieldset)); }, role: this.question.a11y_input_ariaRole, "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 },
             this.question.hasColumns
                 ? this.getColumnedBody(cssClasses)
                 : this.getBody(cssClasses),
@@ -8836,7 +8959,7 @@ var SurveyQuestionRadioItem = /** @class */ (function (_super) {
         var controlLabelClass = this.question.getControlLabelClass(this.item);
         var itemLabel = !this.hideCaption ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: controlLabelClass }, this.renderLocString(this.item.locText, this.textStyle)) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: itemClass, role: "presentation" },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { onMouseDown: this.handleOnMouseDown, className: labelClass, "aria-label": this.question.getAriaItemLabel(this.item) },
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { onMouseDown: this.handleOnMouseDown, className: labelClass },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { "aria-describedby": this.question.ariaDescribedBy, className: this.cssClasses.itemControl, id: this.question.getItemId(this.item), type: "radio", name: this.question.questionName, checked: this.isChecked, value: this.item.value, disabled: !this.question.getItemEnabled(this.item), onChange: this.handleOnChange }),
                 this.cssClasses.materialDecorator ?
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
@@ -9490,8 +9613,9 @@ __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 _element_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
-/* harmony import */ var _reactsurveymodel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactsurveymodel */ "./src/react/reactsurveymodel.tsx");
+/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./element */ "./src/react/element.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
+/* harmony import */ var _reactsurveymodel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./reactsurveymodel */ "./src/react/reactsurveymodel.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -9511,6 +9635,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyRow = /** @class */ (function (_super) {
     __extends(SurveyRow, _super);
     function SurveyRow(props) {
@@ -9558,23 +9683,17 @@ var SurveyRow = /** @class */ (function (_super) {
     };
     SurveyRow.prototype.renderElementContent = function () {
         var _this = this;
-        var elements = this.row.visibleElements.map(function (element, index) {
-            var innerElement = _this.createElement(element, index);
-            var css = element.cssClassesValue;
-            var focusIn = function () {
-                var el = element;
-                if (el && el.isQuestion) {
-                    el.focusIn();
-                }
-            };
-            return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: css.questionWrapper, style: element.rootStyle, "data-key": innerElement.key, key: innerElement.key, onFocus: focusIn }, _this.row.isNeedRender ? innerElement : _element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.createElement(element.skeletonComponentName, { element: element, css: _this.css, })));
+        var elements = this.row.visibleElements.map(function (element, elementIndex) {
+            var index = elementIndex ? "-" + elementIndex : 0;
+            var key = element.name + index;
+            return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_element__WEBPACK_IMPORTED_MODULE_2__["SurveyRowElement"], { element: element, index: elementIndex, row: _this.row, survey: _this.survey, creator: _this.creator, css: _this.css, key: key }));
         });
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { ref: this.rootRef, className: this.row.getRowCss() }, elements));
     };
     SurveyRow.prototype.renderElement = function () {
         var survey = this.survey;
         var content = this.renderElementContent();
-        var wrapper = _reactsurveymodel__WEBPACK_IMPORTED_MODULE_3__["ReactSurveyElementsWrapper"].wrapRow(survey, content, this.row);
+        var wrapper = _reactsurveymodel__WEBPACK_IMPORTED_MODULE_4__["ReactSurveyElementsWrapper"].wrapRow(survey, content, this.row);
         return wrapper || content;
     };
     SurveyRow.prototype.componentDidMount = function () {
@@ -9609,10 +9728,10 @@ var SurveyRow = /** @class */ (function (_super) {
     SurveyRow.prototype.createElement = function (element, elementIndex) {
         var index = elementIndex ? "-" + elementIndex : 0;
         var elementType = element.getType();
-        if (!_element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.isElementRegistered(elementType)) {
+        if (!_element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.isElementRegistered(elementType)) {
             elementType = "question";
         }
-        return _element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.createElement(elementType, {
+        return _element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.createElement(elementType, {
             key: element.name + index,
             element: element,
             creator: this.creator,
@@ -10832,7 +10951,11 @@ var ResponsivityManager = /** @class */ (function () {
             setTimeout(function () { _this.process(); }, 1);
         };
         if (typeof ResizeObserver !== "undefined") {
-            this.resizeObserver = new ResizeObserver(function (_) { return _this.process(); });
+            this.resizeObserver = new ResizeObserver(function (entries) {
+                window.requestAnimationFrame(function () {
+                    _this.process();
+                });
+            });
             this.resizeObserver.observe(this.container.parentElement);
         }
     }