survey-react-ui 1.9.85 → 1.9.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react-ui",
-  "version": "1.9.85",
+  "version": "1.9.87",
   "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.85",
+    "survey-core": "1.9.87",
     "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.85
+ * surveyjs - Survey JavaScript library v1.9.87
  * 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.85", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.87", "survey-react-ui");
 
 
 /***/ }),
@@ -2084,10 +2084,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "List", function() { return List; });
 /* 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 _element_factory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../element-factory */ "./src/react/element-factory.tsx");
-/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../reactquestion_element */ "./src/react/reactquestion_element.tsx");
-/* harmony import */ var _svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
-/* harmony import */ var _list_item__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./list-item */ "./src/react/components/list/list-item.tsx");
+/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-core */ "survey-core");
+/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../element-factory */ "./src/react/element-factory.tsx");
+/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../reactquestion_element */ "./src/react/reactquestion_element.tsx");
+/* harmony import */ var _svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
+/* harmony import */ var _list_item__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./list-item */ "./src/react/components/list/list-item.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -2108,6 +2110,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var List = /** @class */ (function (_super) {
     __extends(List, _super);
     function List(props) {
@@ -2165,7 +2168,7 @@ var List = /** @class */ (function (_super) {
             return null;
         }
         return items.map(function (item, itemIndex) {
-            return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_list_item__WEBPACK_IMPORTED_MODULE_4__["ListItem"], { model: _this.model, item: item, key: "item" + itemIndex }));
+            return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_list_item__WEBPACK_IMPORTED_MODULE_5__["ListItem"], { model: _this.model, item: item, key: "item" + itemIndex }));
         });
     };
     List.prototype.searchElementContent = function () {
@@ -2174,7 +2177,8 @@ var List = /** @class */ (function (_super) {
             return null;
         else {
             var onChange = function (e) {
-                if (e.target === document.activeElement) {
+                var root = survey_core__WEBPACK_IMPORTED_MODULE_1__["settings"].environment.root;
+                if (e.target === root.activeElement) {
                     _this.model.filterString = e.target.value;
                 }
             };
@@ -2183,10 +2187,10 @@ var List = /** @class */ (function (_super) {
             };
             var clearButton = this.model.showSearchClearButton && !!this.model.filterString ?
                 react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { className: this.model.cssClasses.searchClearButtonIcon, onClick: function (event) { _this.model.onClickSearchClearButton(event); } },
-                    react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: "icon-searchclear", size: "auto" })) : null;
+                    react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__["SvgIcon"], { iconName: "icon-searchclear", size: "auto" })) : null;
             return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.model.cssClasses.filter },
                 react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.model.cssClasses.filterIcon },
-                    react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: "icon-search", size: "auto" })),
+                    react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__["SvgIcon"], { iconName: "icon-search", size: "auto" })),
                 react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "text", className: this.model.cssClasses.filterInput, "aria-label": this.model.filterStringPlaceholder, placeholder: this.model.filterStringPlaceholder, value: this.state.filterString, onKeyUp: onKeyUp, onChange: onChange }),
                 clearButton));
         }
@@ -2197,9 +2201,9 @@ var List = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.model.cssClasses.emptyText, "aria-label": this.model.emptyMessage }, this.model.emptyMessage)));
     };
     return List;
-}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"]));
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_3__["SurveyElementBase"]));
 
-_element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.registerElement("sv-list", function (props) {
+_element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.registerElement("sv-list", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(List, props);
 });
 
@@ -3250,8 +3254,8 @@ var RatingItemStar = /** @class */ (function (_super) {
         var _this = this;
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { className: this.question.getItemClass(this.item.itemValue), onMouseOver: function (e) { return _this.question.onItemMouseIn(_this.item); }, onMouseOut: function (e) { return _this.question.onItemMouseOut(_this.item); } },
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.name, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy }),
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { className: "sv-star", size: "auto", iconName: "icon-rating-star", title: this.item.text }),
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { className: "sv-star-2", size: "auto", iconName: "icon-rating-star-2", title: this.item.text })));
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { className: "sv-star", size: "auto", iconName: this.question.itemStarIcon, title: this.item.text }),
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { className: "sv-star-2", size: "auto", iconName: this.question.itemStarIconAlt, title: this.item.text })));
     };
     return RatingItemStar;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"]));
@@ -3821,7 +3825,8 @@ var TitleContent = /** @class */ (function (_super) {
         }
         var questionNumber = element.no;
         if (questionNumber) {
-            spans.push(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { "data-key": "q_num", key: "q_num", className: cssClasses.number || cssClasses.panel.number, style: { position: "static" }, "aria-hidden": true }, questionNumber));
+            var panelNumber = !!cssClasses.panel ? cssClasses.panel.number : undefined;
+            spans.push(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { "data-key": "q_num", key: "q_num", className: cssClasses.number || panelNumber, style: { position: "static" }, "aria-hidden": true }, questionNumber));
             spans.push(getSpaceSpan("num-sp"));
         }
         if (element.isRequireTextBeforeTitle) {
@@ -4119,8 +4124,9 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
     SurveyQuestionDropdownBase.prototype.renderInput = function (dropdownListModel) {
         var _this = this;
         var valueElement = this.renderValueElement(dropdownListModel);
+        var root = survey_core__WEBPACK_IMPORTED_MODULE_1__["settings"].environment.root;
         var onInputChange = function (e) {
-            if (e.target === document.activeElement) {
+            if (e.target === root.activeElement) {
                 dropdownListModel.inputStringRendered = e.target.value;
             }
         };
@@ -5192,8 +5198,9 @@ var SurveyPanel = /** @class */ (function (_super) {
                 _this.panelBase.focusIn();
         };
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { ref: this.rootRef, className: this.panelBase.getContainerCss(), onFocus: focusIn, id: this.panelBase.id },
+            this.panel.showErrorsAbovePanel ? errors : null,
             header,
-            errors,
+            this.panel.showErrorsAbovePanel ? null : errors,
             content));
     };
     SurveyPanel.prototype.renderHeader = function () {
@@ -5558,7 +5565,8 @@ var Survey = /** @class */ (function (_super) {
         var rootCss = this.survey.getRootCss();
         var cssClasses = this.rootNodeClassName ? this.rootNodeClassName + " " + rootCss : rootCss;
         var rootStyle = {
-            backgroundImage: this.survey.renderBackgroundImage
+            backgroundImage: this.survey.renderBackgroundImage,
+            backgroundSize: this.survey.backgroundImageFit
         };
         var formStyle = {
             backgroundColor: this.survey.renderBackgroundOpacity
@@ -10335,7 +10343,8 @@ var TagboxFilterString = /** @class */ (function (_super) {
         }
     };
     TagboxFilterString.prototype.onChange = function (e) {
-        if (e.target === document.activeElement) {
+        var root = survey_core__WEBPACK_IMPORTED_MODULE_1__["settings"].environment.root;
+        if (e.target === root.activeElement) {
             this.model.inputStringRendered = e.target.value;
         }
     };
@@ -10353,7 +10362,16 @@ var TagboxFilterString = /** @class */ (function (_super) {
     };
     TagboxFilterString.prototype.render = function () {
         var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), inputMode: this.model.inputMode, ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, disabled: this.question.isInputReadOnly, readOnly: !this.model.searchEnabled ? true : undefined, size: !this.model.inputStringRendered ? 1 : undefined, role: this.model.filterStringEnabled ? this.question.ariaRole : undefined, "aria-label": this.question.placeholder, "aria-expanded": this.question.ariaExpanded ? "true" : "false", "aria-controls": this.model.listElementId, "aria-activedescendant": this.model.ariaActivedescendant, placeholder: this.model.filterStringPlaceholder, onKeyDown: function (e) { _this.keyhandler(e); }, onChange: function (e) { _this.onChange(e); }, onBlur: function (e) { _this.onBlur(e); }, onFocus: function (e) { _this.onFocus(e); } }));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.hint },
+            this.model.showHintPrefix ?
+                (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.hintPrefix },
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, this.model.hintStringPrefix))) : null,
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.hintSuffixWrapper },
+                this.model.showHintString ?
+                    (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.hintSuffix },
+                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { style: { visibility: "hidden" }, "data-bind": "text: model.filterString" }, this.model.inputStringRendered),
+                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, this.model.hintStringSuffix))) : null,
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), inputMode: this.model.inputMode, ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, disabled: this.question.isInputReadOnly, readOnly: !this.model.searchEnabled ? true : undefined, size: !this.model.inputStringRendered ? 1 : undefined, role: this.model.filterStringEnabled ? this.question.ariaRole : undefined, "aria-label": this.question.placeholder, "aria-expanded": this.question.ariaExpanded ? "true" : "false", "aria-controls": this.model.listElementId, "aria-activedescendant": this.model.ariaActivedescendant, placeholder: this.model.filterStringPlaceholder, onKeyDown: function (e) { _this.keyhandler(e); }, onChange: function (e) { _this.onChange(e); }, onBlur: function (e) { _this.onBlur(e); }, onFocus: function (e) { _this.onFocus(e); } }))));
     };
     return TagboxFilterString;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_3__["SurveyElementBase"]));
@@ -10450,7 +10468,29 @@ var SurveyQuestionTagboxItem = /** @class */ (function (_super) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "settings", function() { return settings; });
+/* WEBPACK VAR INJECTION */(function(global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "settings", function() { return settings; });
+var document = global.document;
+var defaultEnvironment = (!!document ? {
+    root: document,
+    _rootElement: document.body,
+    get rootElement() {
+        var _a;
+        return (_a = this._rootElement) !== null && _a !== void 0 ? _a : document.body;
+    },
+    set rootElement(rootElement) {
+        this._rootElement = rootElement;
+    },
+    _popupMountContainer: document.body,
+    get popupMountContainer() {
+        var _a;
+        return (_a = this._popupMountContainer) !== null && _a !== void 0 ? _a : document.body;
+    },
+    set popupMountContainer(popupMountContainer) {
+        this._popupMountContainer = popupMountContainer;
+    },
+    svgMountContainer: document.head,
+    stylesSheetsMountContainer: document.head,
+} : undefined);
 var columnWidthsByType = {
     "file": { minWidth: "240px" },
     "comment": { minWidth: "200px" }
@@ -10832,6 +10872,10 @@ var settings = {
      * - `"icon"` - Users can only use the choice item icon as a drag handle.
      */
     rankingDragHandleArea: "entireItem",
+    /**
+     * Specifies environment in which SurveyJS will exist
+     */
+    environment: defaultEnvironment,
     titleTags: {
         survey: "h3",
         page: "h4",
@@ -10919,12 +10963,17 @@ var settings = {
      * - `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" } }`
+     *
+     * - `rateSize`: `"small"` (default) | `"normal"`\
+     * Specifies the size of rate values. Applies to [Rating Scale](https://surveyjs.io/form-library/examples/rating-scale/) questions within matrixes.
      */
     matrix: {
-        columnWidthsByType: columnWidthsByType
+        columnWidthsByType: columnWidthsByType,
+        rateSize: "small",
     }
 };
 
+/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../node_modules/webpack/buildin/global.js */ "./node_modules/webpack/buildin/global.js")))
 
 /***/ }),
 
@@ -11101,7 +11150,7 @@ var VerticalResponsivityManager = /** @class */ (function (_super) {
 /*!****************************!*\
   !*** ./src/utils/utils.ts ***!
   \****************************/
-/*! exports provided: unwrap, getSize, doKey2ClickBlur, doKey2ClickUp, doKey2ClickDown, sanitizeEditableContent, Logger, mergeValues, getElementWidth, isContainerVisible, classesToSelector, compareVersions, confirmAction, detectIEOrEdge, detectIEBrowser, loadFileFromBase64, isMobile, isElementVisible, findScrollableParent, scrollElementByChildId, navigateToUrl, createSvg, getIconNameFromProxy, increaseHeightByContent, getOriginalEvent, preventDefaults, findParentByClassNames */
+/*! exports provided: unwrap, getSize, doKey2ClickBlur, doKey2ClickUp, doKey2ClickDown, sanitizeEditableContent, Logger, mergeValues, getElementWidth, isContainerVisible, classesToSelector, compareVersions, confirmAction, detectIEOrEdge, detectIEBrowser, loadFileFromBase64, isMobile, isShadowDOM, getElement, isElementVisible, findScrollableParent, scrollElementByChildId, navigateToUrl, createSvg, getIconNameFromProxy, increaseHeightByContent, getOriginalEvent, preventDefaults, findParentByClassNames */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -11123,6 +11172,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "detectIEBrowser", function() { return detectIEBrowser; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "loadFileFromBase64", function() { return loadFileFromBase64; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isMobile", function() { return isMobile; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isShadowDOM", function() { return isShadowDOM; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getElement", function() { return getElement; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isElementVisible", function() { return isElementVisible; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "findScrollableParent", function() { return findScrollableParent; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "scrollElementByChildId", function() { return scrollElementByChildId; });
@@ -11200,13 +11251,24 @@ function loadFileFromBase64(b64Data, fileName) {
 function isMobile() {
     return (typeof window !== "undefined" && typeof window.orientation !== "undefined");
 }
+var isShadowDOM = function (rootElement) {
+    return !!rootElement && !!("host" in rootElement && rootElement.host);
+};
+var getElement = function (element) {
+    var root = _settings__WEBPACK_IMPORTED_MODULE_0__["settings"].environment.root;
+    return typeof element === "string" ? root.getElementById(element) : element;
+};
 function isElementVisible(element, threshold) {
     if (threshold === void 0) { threshold = 0; }
-    if (typeof document === "undefined") {
+    if (typeof _settings__WEBPACK_IMPORTED_MODULE_0__["settings"].environment === "undefined") {
         return false;
     }
+    var root = _settings__WEBPACK_IMPORTED_MODULE_0__["settings"].environment.root;
+    var clientHeight = isShadowDOM(root)
+        ? root.host.clientHeight
+        : root.documentElement.clientHeight;
     var elementRect = element.getBoundingClientRect();
-    var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
+    var viewHeight = Math.max(clientHeight, window.innerHeight);
     var topWin = -threshold;
     var bottomWin = viewHeight + threshold;
     var topEl = elementRect.top;
@@ -11216,8 +11278,11 @@ function isElementVisible(element, threshold) {
     return maxTop <= minBottom;
 }
 function findScrollableParent(element) {
+    var root = _settings__WEBPACK_IMPORTED_MODULE_0__["settings"].environment.root;
     if (!element) {
-        return document.documentElement;
+        return isShadowDOM(root)
+            ? root.host
+            : root.documentElement;
     }
     if (element.scrollHeight > element.clientHeight &&
         (getComputedStyle(element).overflowY === "scroll" ||
@@ -11232,9 +11297,11 @@ function findScrollableParent(element) {
     return findScrollableParent(element.parentElement);
 }
 function scrollElementByChildId(id) {
-    if (!document)
+    var environment = _settings__WEBPACK_IMPORTED_MODULE_0__["settings"].environment;
+    if (!environment)
         return;
-    var el = document.getElementById(id);
+    var root = environment.root;
+    var el = root.getElementById(id);
     if (!el)
         return;
     var scrollableEl = findScrollableParent(el);