survey-react-ui 1.9.98 → 1.9.100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react-ui",
-  "version": "1.9.98",
+  "version": "1.9.100",
   "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.98",
+    "survey-core": "1.9.100",
     "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.98
+ * surveyjs - Survey JavaScript library v1.9.100
  * 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.98", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.100", "survey-react-ui");
 
 
 /***/ }),
@@ -1532,7 +1532,7 @@ var ListItem = /** @class */ (function (_super) {
         if (!this.item.component) {
             var text = this.renderLocString(this.item.locTitle, undefined, "locString");
             if (this.item.iconName) {
-                var icon = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__["SvgIcon"], { key: 1, className: this.model.cssClasses.itemIcon, iconName: this.item.iconName, size: 24, "aria-label": this.item.title });
+                var icon = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__["SvgIcon"], { key: 1, className: this.model.cssClasses.itemIcon, iconName: this.item.iconName, size: this.item.iconSize, "aria-label": this.item.title });
                 content.push(icon);
                 content.push(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { key: 2 }, text));
             }
@@ -2580,17 +2580,18 @@ function showModal(componentName, data, onApply, onCancel, cssClass, title, disp
     var options = Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["createDialogOptions"])(componentName, data, onApply, onCancel, undefined, undefined, cssClass, title, displayMode);
     return showDialog(options);
 }
-function showDialog(dialogOptions, container) {
+function showDialog(dialogOptions, rootElement) {
     dialogOptions.onHide = function () {
         react_dom__WEBPACK_IMPORTED_MODULE_0___default.a.unmountComponentAtNode(popupViewModel.container);
         popupViewModel.dispose();
     };
-    var popupViewModel = Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["createPopupModalViewModel"])(dialogOptions, container);
+    var popupViewModel = Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["createPopupModalViewModel"])(dialogOptions, rootElement);
     react_dom__WEBPACK_IMPORTED_MODULE_0___default.a.render(react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(PopupContainer, { model: popupViewModel }), popupViewModel.container);
     popupViewModel.model.isVisible = true;
     return popupViewModel;
 }
 survey_core__WEBPACK_IMPORTED_MODULE_2__["settings"].showModal = showModal;
+survey_core__WEBPACK_IMPORTED_MODULE_2__["settings"].showDialog = showDialog;
 
 
 /***/ }),
@@ -2954,7 +2955,7 @@ var LogoImage = /** @class */ (function (_super) {
     LogoImage.prototype.render = function () {
         var content = [];
         content.push(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { key: "logo-image", className: this.survey.logoClassNames },
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("img", { className: this.survey.css.logoImage, src: this.survey.locLogo.renderedHtml, alt: this.survey.locTitle.renderedHtml, width: this.survey.logoWidth ? this.survey.logoWidth : undefined, height: this.survey.logoHeight ? this.survey.logoHeight : undefined, style: { objectFit: this.survey.logoFit } })));
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("img", { className: this.survey.css.logoImage, src: this.survey.locLogo.renderedHtml, alt: this.survey.locTitle.renderedHtml, width: this.survey.renderedLogoWidth, height: this.survey.renderedLogoHeight, style: { objectFit: this.survey.logoFit, width: this.survey.renderedStyleLogoWidth, height: this.survey.renderedStyleLogoHeight } })));
         return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, content);
     };
     return LogoImage;
@@ -3006,6 +3007,7 @@ var SurveyHeader = /** @class */ (function (_super) {
     function SurveyHeader(props) {
         var _this = _super.call(this, props) || this;
         _this.state = { changed: 0 };
+        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_0___default.a.createRef();
         return _this;
     }
     Object.defineProperty(SurveyHeader.prototype, "survey", {
@@ -3024,6 +3026,7 @@ var SurveyHeader = /** @class */ (function (_super) {
     });
     SurveyHeader.prototype.componentDidMount = function () {
         var self = this;
+        this.survey.afterRenderHeader(this.rootRef.current);
         this.survey.locLogo.onChanged = function () {
             self.setState({ changed: self.state.changed + 1 });
         };
@@ -3051,7 +3054,7 @@ var SurveyHeader = /** @class */ (function (_super) {
     SurveyHeader.prototype.render = function () {
         if (!this.survey.renderedHasHeader)
             return null;
-        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.css.header },
+        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.css.header, ref: this.rootRef },
             this.renderLogoImage(this.survey.isLogoBefore),
             this.renderTitle(),
             this.renderLogoImage(this.survey.isLogoAfter),
@@ -4126,7 +4129,7 @@ var SurveyQuestionImage = /** @class */ (function (_super) {
     SurveyQuestionImage.prototype.renderElement = function () {
         var _this = this;
         var cssClasses = this.question.getImageCss();
-        var style = { objectFit: this.question.imageFit };
+        var style = { objectFit: this.question.imageFit, width: this.question.renderedStyleWidth, height: this.question.renderedStyleHeight };
         if (!this.question.imageLink || this.question.contentNotLoaded) {
             style["display"] = "none";
         }
@@ -4541,7 +4544,7 @@ var SurveyPanelBase = /** @class */ (function (_super) {
         if (!!prevProps.page &&
             !!this.survey &&
             !!this.survey.currentPage &&
-            prevProps.page.name === this.survey.currentPage.name)
+            prevProps.page.id === this.survey.currentPage.id)
             return;
         this.doAfterRender();
     };
@@ -4789,6 +4792,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! survey-core */ "survey-core");
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__ = __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 ||
@@ -4808,6 +4812,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var PopupSurvey = /** @class */ (function (_super) {
     __extends(PopupSurvey, _super);
     function PopupSurvey(props) {
@@ -4841,6 +4846,7 @@ var PopupSurvey = /** @class */ (function (_super) {
             body));
     };
     PopupSurvey.prototype.renderWindowHeader = function () {
+        var _this = this;
         var styleA = { width: "100%", cursor: "pointer" };
         var styleTitle = { paddingRight: "10px" };
         var glyphClassName = this.popup.cssButton;
@@ -4850,8 +4856,10 @@ var PopupSurvey = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { onClick: this.handleOnExpanded, style: styleA },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.popup.cssHeaderTitle, style: styleTitle }, title),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: glyphClassName, "aria-hidden": "true" })),
-            this.popup.isExpanded ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { onClick: this.handleOnExpanded, style: { float: "right", cursor: "pointer" } },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.popup.cssHeaderTitle, style: styleTitle }, "X"))) : null));
+            this.popup.allowClose ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.popup.cssHeaderButton, onClick: function () { _this.popup.hide(); }, style: { transform: "rotate(45deg)", float: "right", cursor: "pointer", width: "24px", height: "24px" } },
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__["SvgIcon"], { iconName: "icon-expanddetail", size: 16 }))) : null,
+            this.popup.isExpanded ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.popup.cssHeaderButton, onClick: this.handleOnExpanded, style: { float: "right", cursor: "pointer", width: "24px", height: "24px" } },
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__["SvgIcon"], { iconName: "icon-collapsedetail", size: 16 }))) : null));
     };
     PopupSurvey.prototype.renderBody = function () {
         var _this = this;
@@ -4865,6 +4873,7 @@ var PopupSurvey = /** @class */ (function (_super) {
         if (newProps.closeOnCompleteTimeout) {
             this.popup.closeOnCompleteTimeout = newProps.closeOnCompleteTimeout;
         }
+        this.popup.allowClose = newProps.allowClose;
         this.popup.isShowing = true;
         if (!this.popup.isExpanded && (newProps.expanded || newProps.isExpanded))
             this.popup.expand();
@@ -10422,10 +10431,17 @@ var settings = {
      *
      * - `caseSensitive`: `Boolean`\
      * Specifies whether to differentiate between capital and lower-case letters. Default value: `false`.
+     *
+     * - `normalizedTextCallback`: `(str: string, reason: string) => string`
+     * Use the following function { str.normalize("NFD").replace(/[\u0300-\u036f]/g, ""); }
+     * If you want to 'Brouillé' to be equal to 'Brouille'.
+     * Use the following function { return reason === "filter" ? str.normalize("NFD").replace(/[\u0300-\u036f]/g, ""): ""; }
+     * If you want to use this functionality during filtering only, for example in list.
      */
     comparator: {
         trimStrings: true,
-        caseSensitive: false
+        caseSensitive: false,
+        normalizeTextCallback: function (str, reason) { return str; }
     },
     expressionDisableConversionChar: "#",
     get commentPrefix() { return settings.commentSuffix; },
@@ -10530,6 +10546,7 @@ var settings = {
      */
     maxDate: "",
     showModal: undefined,
+    showDialog: undefined,
     supportCreatorV2: false,
     showDefaultItemsInCreatorV2: true,
     /**
@@ -10810,13 +10827,14 @@ 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, isShadowDOM, getElement, isElementVisible, findScrollableParent, scrollElementByChildId, navigateToUrl, createSvg, getIconNameFromProxy, increaseHeightByContent, getOriginalEvent, preventDefaults, findParentByClassNames, getFirstVisibleChild */
+/*! exports provided: unwrap, getRenderedSize, getRenderedStyleSize, 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, getFirstVisibleChild */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "unwrap", function() { return unwrap; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getSize", function() { return getSize; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getRenderedSize", function() { return getRenderedSize; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getRenderedStyleSize", function() { return getRenderedStyleSize; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "doKey2ClickBlur", function() { return doKey2ClickBlur; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "doKey2ClickUp", function() { return doKey2ClickUp; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "doKey2ClickDown", function() { return doKey2ClickDown; });
@@ -11014,21 +11032,43 @@ function unwrap(value) {
         return value();
     }
 }
-function getSize(value) {
-    if (typeof value === "number") {
-        return "" + value + "px";
-    }
-    if (!!value && typeof value === "string" && value.length > 0) {
-        var lastSymbol = value[value.length - 1];
-        if ((lastSymbol >= "0" && lastSymbol <= "9") || lastSymbol == ".") {
-            try {
-                var num = parseFloat(value);
-                return "" + num + "px";
-            }
-            catch (_a) { }
-        }
+// export function getSize(value: any): number {
+//   if (typeof value === "number") {
+//     return value;
+//   }
+//   if (typeof value === "string" && value.includes("px")) {
+//     return parseInt(value);
+//   }
+//   if (!!value && typeof value === "string" && value.length > 0) {
+//     const lastSymbol: string = value[value.length - 1];
+//     if ((lastSymbol >= "0" && lastSymbol <= "9") || lastSymbol == ".") {
+//       try {
+//         const num: number = parseInt(value);
+//         return num;
+//       } catch { }
+//     }
+//   }
+//   return value;
+// }
+function getRenderedSize(val) {
+    if (typeof val == "string") {
+        if (!isNaN(Number(val))) {
+            return Number(val);
+        }
+        else if (val.includes("px")) {
+            return parseFloat(val);
+        }
+    }
+    if (typeof val == "number") {
+        return val;
+    }
+    return undefined;
+}
+function getRenderedStyleSize(val) {
+    if (getRenderedSize(val) !== undefined) {
+        return undefined;
     }
-    return value;
+    return val;
 }
 var keyFocusedClassName = "sv-focused--by-key";
 function doKey2ClickBlur(evt) {