survey-react-ui 1.9.95 → 1.9.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react-ui",
-  "version": "1.9.95",
+  "version": "1.9.97",
   "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.95",
+    "survey-core": "1.9.97",
     "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.95
+ * surveyjs - Survey JavaScript library v1.9.97
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -690,7 +690,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.95", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.97", "survey-react-ui");
 
 
 /***/ }),
@@ -3563,7 +3563,9 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
                 this.renderInput(this.question["dropdownListModel"]),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_popup_popup__WEBPACK_IMPORTED_MODULE_2__["Popup"], { model: (_b = (_a = this.question) === null || _a === void 0 ? void 0 : _a.dropdownListModel) === null || _b === void 0 ? void 0 : _b.popupModel }));
         }
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.selectWrapper }, selectElement));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.selectWrapper, onClick: this.click },
+            selectElement,
+            this.createChevronButton()));
     };
     SurveyQuestionDropdownBase.prototype.renderValueElement = function (dropdownListModel) {
         if (this.question.showInputFieldComponent) {
@@ -3583,7 +3585,7 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
                 dropdownListModel.inputStringRendered = e.target.value;
             }
         };
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.question.inputId, className: this.question.getControlClass(), tabIndex: dropdownListModel.inputReadOnly ? undefined : 0, onClick: this.click, 
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.question.inputId, className: this.question.getControlClass(), tabIndex: dropdownListModel.inputReadOnly ? undefined : 0, 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             disabled: this.question.isInputReadOnly, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy, "aria-expanded": this.question.ariaExpanded === null ? undefined : this.question.ariaExpanded === "true", "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant },
@@ -3606,6 +3608,12 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.cleanButton, style: style, onClick: this.clear },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { className: this.question.cssClasses.cleanButtonSvg, iconName: this.question.cssClasses.cleanButtonIconId, title: this.question.clearCaption, size: "auto" })));
     };
+    SurveyQuestionDropdownBase.prototype.createChevronButton = function () {
+        if (!this.question.cssClasses.chevronButtonIconId)
+            return null;
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.chevronButton },
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { className: this.question.cssClasses.chevronButtonSvg, iconName: this.question.cssClasses.chevronButtonIconId, size: 24 })));
+    };
     SurveyQuestionDropdownBase.prototype.renderOther = function (cssClasses) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getCommentAreaCss(true) },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_reactquestion_comment__WEBPACK_IMPORTED_MODULE_5__["SurveyQuestionOtherValueItem"], { question: this.question, otherCss: cssClasses.other, cssClasses: cssClasses, isDisplayMode: this.isDisplayMode, isOther: true })));
@@ -3770,7 +3778,9 @@ var SurveyQuestionDropdownSelect = /** @class */ (function (_super) {
             (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("select", { id: this.question.inputId, className: this.question.getControlClass(), ref: function (select) { return (_this.setControl(select)); }, autoComplete: this.question.autocomplete, onChange: this.updateValueOnEvent, onInput: this.updateValueOnEvent, onClick: click, onKeyUp: keyup, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy, required: this.question.isRequired },
                 this.question.allowClear ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("option", { value: "" }, this.question.placeholder)) : null,
                 this.question.visibleChoices.map(function (item, i) { return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_dropdown_item__WEBPACK_IMPORTED_MODULE_4__["SurveyQuestionOptionItem"], { key: "item" + i, item: item }); })));
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.selectWrapper }, selectElement));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.selectWrapper },
+            selectElement,
+            this.createChevronButton()));
     };
     return SurveyQuestionDropdownSelect;
 }(_reactquestion_dropdown__WEBPACK_IMPORTED_MODULE_3__["SurveyQuestionDropdown"]));
@@ -4844,7 +4854,8 @@ var PopupSurvey = /** @class */ (function (_super) {
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.popup.cssHeaderTitle, style: styleTitle }, "X"))) : null));
     };
     PopupSurvey.prototype.renderBody = function () {
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.popup.cssBody }, this.doRender());
+        var _this = this;
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.popup.cssBody, onScroll: function () { return _this.popup.onScroll(); } }, this.doRender());
     };
     PopupSurvey.prototype.createSurvey = function (newProps) {
         if (!newProps)
@@ -5021,6 +5032,7 @@ var Survey = /** @class */ (function (_super) {
         else {
             renderResult = this.renderSurvey();
         }
+        var backgroundImage = !!this.survey.renderBackgroundImage ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.rootBackgroundImage, style: this.survey.backgroundImageStyle }) : null;
         var header = react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_5__["SurveyHeader"], { survey: this.survey });
         var onSubmit = function (event) {
             event.preventDefault();
@@ -5031,11 +5043,9 @@ var Survey = /** @class */ (function (_super) {
         }
         var rootCss = this.survey.getRootCss();
         var cssClasses = this.rootNodeClassName ? this.rootNodeClassName + " " + rootCss : rootCss;
-        var formStyle = {
-            backgroundColor: this.survey.renderBackgroundOpacity
-        };
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.rootNodeId, ref: this.rootRef, className: cssClasses, style: this.survey.themeVariables },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("form", { onSubmit: onSubmit, style: formStyle },
+            backgroundImage,
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("form", { onSubmit: onSubmit },
                 customHeader,
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.container },
                     header,
@@ -5513,6 +5523,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _reactSurveyNavigationBase__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactSurveyNavigationBase */ "./src/react/reactSurveyNavigationBase.tsx");
 /* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
 /* harmony import */ var _components_list_list__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/list/list */ "./src/react/components/list/list.tsx");
+/* harmony import */ var _components_popup_popup__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/popup/popup */ "./src/react/components/popup/popup.tsx");
+/* harmony import */ var _components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -5533,16 +5545,25 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
+
 var SurveyProgressToc = /** @class */ (function (_super) {
     __extends(SurveyProgressToc, _super);
     function SurveyProgressToc() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     SurveyProgressToc.prototype.render = function () {
-        var listModel = Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["createTOCListModel"])(this.props.model);
-        var rootCss = Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["getTocRootCss"])(this.props.model);
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: rootCss },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_list_list__WEBPACK_IMPORTED_MODULE_4__["List"], { model: listModel })));
+        var tocModel = new survey_core__WEBPACK_IMPORTED_MODULE_1__["TOCModel"](this.props.model);
+        var content;
+        if (tocModel.isMobile) {
+            content = react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { onClick: tocModel.togglePopup },
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_6__["SvgIcon"], { iconName: tocModel.icon, size: 24 }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_popup_popup__WEBPACK_IMPORTED_MODULE_5__["Popup"], { model: tocModel.popupModel }));
+        }
+        else {
+            content = react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_list_list__WEBPACK_IMPORTED_MODULE_4__["List"], { model: tocModel.listModel });
+        }
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: tocModel.containerCss }, content));
     };
     return SurveyProgressToc;
 }(_reactSurveyNavigationBase__WEBPACK_IMPORTED_MODULE_2__["SurveyNavigationBase"]));
@@ -7221,7 +7242,7 @@ var SurveyQuestionFile = /** @class */ (function (_super) {
         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 })
             :
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "file", disabled: this.isDisplayMode, tabIndex: -1, 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 () { }), "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy, multiple: this.question.allowMultiple, title: this.question.inputTitle, accept: this.question.acceptedTypes }));
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "file", disabled: this.isDisplayMode, tabIndex: -1, 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 () { }), "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy, multiple: this.question.allowMultiple, title: this.question.inputTitle, accept: this.question.acceptedTypes, capture: this.question.renderCapture }));
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.fileRootCss },
             fileInput,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.dragArea, onDrop: this.question.onDrop, onDragOver: this.question.onDragOver, onDragLeave: this.question.onDragLeave, onDragEnter: this.question.onDragEnter },
@@ -8790,12 +8811,12 @@ var SurveyQuestionRanking = /** @class */ (function (_super) {
                     this.getItems(this.question.unRankingChoices, unrankedItem),
                     this.question.unRankingChoices.length === 0 ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containerPlaceholder },
                         " ",
-                        this.question.selectToRankFromContainerPlaceholder,
+                        this.question.selectToRankEmptyRankedAreaText,
                         " ") : null),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containersDivider }),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getContainerClasses("to"), "data-ranking": "to-container" },
                     this.getItems(),
-                    this.question.rankingChoices.length === 0 ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containerPlaceholder }, this.question.selectToRankToContainerPlaceholder) : null)));
+                    this.question.rankingChoices.length === 0 ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containerPlaceholder }, this.question.selectToRankEmptyUnrankedAreaText) : null)));
         }
     };
     SurveyQuestionRanking.prototype.getItems = function (choices, unrankedItem) {
@@ -9079,7 +9100,7 @@ var SurveyQuestionTagbox = /** @class */ (function (_super) {
         var _this = this;
         var dropdownMultiSelectListModel = dropdownListModel;
         var items = this.question.selectedChoices.map(function (choice, index) { return _this.renderItem("item" + index, choice); });
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.question.inputId, className: this.question.getControlClass(), tabIndex: dropdownListModel.inputReadOnly ? undefined : 0, onClick: this.click, 
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.question.inputId, className: this.question.getControlClass(), tabIndex: dropdownListModel.inputReadOnly ? undefined : 0, 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             disabled: this.question.isInputReadOnly, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy, "aria-expanded": this.question.ariaExpanded === null ? undefined : this.question.ariaExpanded === "true", "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant },