survey-react-ui 1.9.80 → 1.9.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react-ui",
-  "version": "1.9.80",
+  "version": "1.9.82",
   "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.80",
+    "survey-core": "1.9.82",
     "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.d.ts

@@ -983,8 +983,8 @@ declare module "react/reactquestion_matrixdropdownbase" {
         renderHeader(): JSX.Element | null;
         renderFooter(): JSX.Element | null;
         renderRows(): JSX.Element;
-        renderRow(keyValue: any, row: QuestionMatrixDropdownRenderedRow, cssClasses: any): JSX.Element;
-        renderCell(cell: QuestionMatrixDropdownRenderedCell, index: number, cssClasses: any): JSX.Element;
+        renderRow(keyValue: any, row: QuestionMatrixDropdownRenderedRow, cssClasses: any, reason?: string): JSX.Element;
+        renderCell(cell: QuestionMatrixDropdownRenderedCell, index: number, cssClasses: any, reason?: string): JSX.Element;
         private renderCellContent;
     }
     export class SurveyQuestionMatrixDropdownCell extends SurveyQuestionAndErrorsCell {

package/survey-react-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.80
+ * surveyjs - Survey JavaScript library v1.9.82
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1189,7 +1189,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.80", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.82", "survey-react-ui");
 
 
 /***/ }),
@@ -3902,7 +3902,7 @@ var TitleElement = /** @class */ (function (_super) {
             };
         }
         var CustomTag = element.titleTagName;
-        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(CustomTag, { className: element.cssTitle, id: element.ariaTitleId, "aria-label": ariaLabel, tabIndex: element.titleTabIndex, "aria-expanded": element.titleAriaExpanded, role: "button", onClick: onClick, onKeyUp: onKeyUp }, titleContent));
+        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(CustomTag, { className: element.cssTitle, id: element.ariaTitleId, "aria-label": ariaLabel, tabIndex: element.titleTabIndex, "aria-expanded": element.titleAriaExpanded, role: element.titleAriaRole, onClick: onClick, onKeyUp: onKeyUp }, titleContent));
     };
     return TitleElement;
 }(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));
@@ -4375,8 +4375,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyElementHeader", function() { return SurveyElementHeader; });
 /* 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 _components_title_title_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/title/title-element */ "./src/react/components/title/title-element.tsx");
-/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
+/* harmony import */ var _components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/action-bar/action-bar */ "./src/react/components/action-bar/action-bar.tsx");
+/* harmony import */ var _components_title_title_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/title/title-element */ "./src/react/components/title/title-element.tsx");
+/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -4395,6 +4396,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyElementHeader = /** @class */ (function (_super) {
     __extends(SurveyElementHeader, _super);
     function SurveyElementHeader() {
@@ -4409,13 +4411,15 @@ var SurveyElementHeader = /** @class */ (function (_super) {
     });
     SurveyElementHeader.prototype.render = function () {
         var element = this.element;
-        var title = element.hasTitle ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_title_title_element__WEBPACK_IMPORTED_MODULE_1__["TitleElement"], { element: element })) : null;
+        var title = element.hasTitle ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_title_title_element__WEBPACK_IMPORTED_MODULE_2__["TitleElement"], { element: element })) : null;
         var description = element.hasDescriptionUnderTitle
-            ? _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"].renderQuestionDescription(this.element)
+            ? _reactquestion_element__WEBPACK_IMPORTED_MODULE_3__["SurveyElementBase"].renderQuestionDescription(this.element)
             : null;
+        var additionalTitleToolbarElement = !!element.additionalTitleToolbar ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__["SurveyActionBar"], { model: element.additionalTitleToolbar }) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: element.cssHeader, onClick: element.clickTitleFunction },
             title,
-            description));
+            description,
+            additionalTitleToolbarElement));
     };
     return SurveyElementHeader;
 }(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));
@@ -5551,8 +5555,14 @@ var Survey = /** @class */ (function (_super) {
         }
         var rootCss = this.survey.getRootCss();
         var cssClasses = this.rootNodeClassName ? this.rootNodeClassName + " " + rootCss : rootCss;
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.rootNodeId, ref: this.rootRef, className: cssClasses },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("form", { onSubmit: onSubmit },
+        var rootStyle = {
+            backgroundImage: this.survey.renderBackgroundImage
+        };
+        var formStyle = {
+            backgroundColor: this.survey.renderBackgroundOpacity
+        };
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.rootNodeId, ref: this.rootRef, className: cssClasses, style: rootStyle },
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("form", { onSubmit: onSubmit, style: formStyle },
                 customHeader,
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.container },
                     header,
@@ -5692,9 +5702,7 @@ var Survey = /** @class */ (function (_super) {
     };
     //ISurveyCreator
     Survey.prototype.createQuestionElement = function (question) {
-        return _reactquestion_factory__WEBPACK_IMPORTED_MODULE_6__["ReactQuestionFactory"].Instance.createQuestion(!question.isDefaultRendering || question.isDefaultRendering()
-            ? question.getTemplate()
-            : question.getComponentName(), {
+        return _reactquestion_factory__WEBPACK_IMPORTED_MODULE_6__["ReactQuestionFactory"].Instance.createQuestion(question.isDefaultRendering() ? question.getTemplate() : question.getComponentName(), {
             question: question,
             isDisplayMode: question.isInputReadOnly,
             creator: this,
@@ -6058,7 +6066,8 @@ var SurveyProgressToc = /** @class */ (function (_super) {
     }
     SurveyProgressToc.prototype.render = function () {
         var listModel = Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["createTOCListModel"])(this.props.model);
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.props.containerCss || "sv_progress-toc" },
+        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 })));
     };
     return SurveyProgressToc;
@@ -6470,7 +6479,7 @@ var SurveyQuestionAndErrorsCell = /** @class */ (function (_super) {
         var survey = this.question.survey;
         var wrapper = null;
         if (survey) {
-            wrapper = _reactsurveymodel__WEBPACK_IMPORTED_MODULE_2__["ReactSurveyElementsWrapper"].wrapMatrixCell(survey, element, cell);
+            wrapper = _reactsurveymodel__WEBPACK_IMPORTED_MODULE_2__["ReactSurveyElementsWrapper"].wrapMatrixCell(survey, element, cell, this.props.reason);
         }
         return wrapper !== null && wrapper !== void 0 ? wrapper : element;
     };
@@ -8275,7 +8284,7 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
         var table = this.question.renderedTable;
         if (!table.showFooter)
             return null;
-        var row = this.renderRow("footer", table.footerRow, this.question.cssClasses);
+        var row = this.renderRow("footer", table.footerRow, this.question.cssClasses, "row-footer");
         return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tfoot", null, row);
     };
     SurveyQuestionMatrixDropdownBase.prototype.renderRows = function () {
@@ -8287,23 +8296,26 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
         }
         return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tbody", null, rows);
     };
-    SurveyQuestionMatrixDropdownBase.prototype.renderRow = function (keyValue, row, cssClasses) {
+    SurveyQuestionMatrixDropdownBase.prototype.renderRow = function (keyValue, row, cssClasses, reason) {
         var matrixrow = [];
         var cells = row.cells;
         for (var i = 0; i < cells.length; i++) {
-            matrixrow.push(this.renderCell(cells[i], i, cssClasses));
+            matrixrow.push(this.renderCell(cells[i], i, cssClasses, reason));
         }
         var key = "row" + keyValue;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], { key: key },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_matrix_row__WEBPACK_IMPORTED_MODULE_7__["MatrixRow"], { model: row, parentMatrix: this.question }, matrixrow)));
     };
-    SurveyQuestionMatrixDropdownBase.prototype.renderCell = function (cell, index, cssClasses) {
+    SurveyQuestionMatrixDropdownBase.prototype.renderCell = function (cell, index, cssClasses, reason) {
         var key = "cell" + index;
         if (cell.hasQuestion) {
-            return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionMatrixDropdownCell, { key: key, cssClasses: cssClasses, cell: cell, creator: this.creator }));
+            return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionMatrixDropdownCell, { key: key, cssClasses: cssClasses, cell: cell, creator: this.creator, reason: reason }));
+        }
+        var calcReason = reason;
+        if (!calcReason) {
+            calcReason = cell.hasTitle ? "row-header" : "";
         }
-        var reason = cell.hasTitle ? "row-header" : "";
-        var cellContent = this.renderCellContent(cell, reason, cssClasses);
+        var cellContent = this.renderCellContent(cell, calcReason, cssClasses);
         var cellStyle = null;
         if (!!cell.width || !!cell.minWidth) {
             cellStyle = {};
@@ -8923,10 +8935,10 @@ var SurveyQuestionPanelDynamic = /** @class */ (function (_super) {
     SurveyQuestionPanelDynamic.prototype.renderNavigatorV2 = function () {
         if (this.question.panelCount === 0 || this.question["showLegacyNavigation"])
             return null;
-        var range = this.question.isRangeShowing && !this.question.isProgressTopShowing ? this.renderRange() : null;
         if (!this.question.cssClasses.footer) {
             return null;
         }
+        var range = this.question.isRangeShowing && this.question.isProgressBottomShowing ? this.renderRange() : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.footer },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("hr", { className: this.question.cssClasses.separator }),
             range,
@@ -10437,6 +10449,10 @@ var SurveyQuestionTagboxItem = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "settings", function() { return settings; });
+var columnWidthsByType = {
+    "file": { minWidth: "240px" },
+    "comment": { minWidth: "200px" }
+};
 /**
  * Global settings that apply to all surveys on the page. To specify one of the settings, use the code below:
  *
@@ -10447,6 +10463,16 @@ __webpack_require__.r(__webpack_exports__);
  * ```
  */
 var settings = {
+    /**
+     * Specifies an action to perform when users press the Enter key within a survey.
+     *
+     * Possible values:
+     *
+     * - `"moveToNextEditor"` - Moves focus to the next editor.
+     * - `"loseFocus"` - Removes focus from the current editor.
+     * - `"default"` - Behaves as a standard `<input>` element.
+     */
+    enterKeyAction: "default",
     /**
      * An object that configures string comparison.
      *
@@ -10883,6 +10909,18 @@ var settings = {
             "email",
             "impp",
         ]
+    },
+    /**
+     * Contains properties that apply to [Single-Choice](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-question-model), [Multiple-Choice](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list), and [Dynamic Matrix](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model) questions.
+     *
+     * Nested properties:
+     *
+     * - `columnWidthsByType`: `Object`\
+     * An object that specifies fixed and minimum column width based on the column type.\
+     * Example: `settings.matrix.columnWidthsByType = { "tagbox": { minWidth: "240px", width: "300px" } }`
+     */
+    matrix: {
+        columnWidthsByType: columnWidthsByType
     }
 };