survey-react-ui 1.12.4 → 1.12.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react-ui",
-  "version": "1.12.4",
+  "version": "1.12.6",
   "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": "./typings/src/entries/react-ui.d.ts",
   "peerDependencies": {
-    "survey-core": "1.12.4",
+    "survey-core": "1.12.6",
     "react": "^16.5.0 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.5.0 || ^17.0.1 || ^18.2.0"
   }

package/survey-react-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.4
+ * surveyjs - Survey JavaScript library v1.12.6
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -103,7 +103,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "./src/entries/react-ui.ts":
 /*!**********************************************!*\
-  !*** ./src/entries/react-ui.ts + 96 modules ***!
+  !*** ./src/entries/react-ui.ts + 98 modules ***!
   \**********************************************/
 /*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, ListItemContent, ListItemGroup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, QuestionErrorComponent, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent, SurveyModel, SurveyWindowModel, Model, settings, surveyLocalization, surveyStrings */
 /*! ModuleConcatenation bailout: Cannot concat with external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"} (<- Module is not an ECMAScript module) */
@@ -448,7 +448,7 @@ var reactquestion_element_SurveyElementBase = /** @class */ (function (_super) {
     SurveyElementBase.prototype.makeBaseElementsReact = function () {
         var els = this.getStateElements();
         for (var i = 0; i < els.length; i++) {
-            els[i].enableOnElementRenderedEvent();
+            els[i].enableOnElementRerenderedEvent();
             this.makeBaseElementReact(els[i]);
         }
     };
@@ -460,7 +460,7 @@ var reactquestion_element_SurveyElementBase = /** @class */ (function (_super) {
     };
     SurveyElementBase.prototype.disableStateElementsRerenderEvent = function (els) {
         els.forEach(function (el) {
-            el.disableOnElementRenderedEvent();
+            el.disableOnElementRerenderedEvent();
         });
     };
     SurveyElementBase.prototype.getStateElements = function () {
@@ -1047,7 +1047,7 @@ var panel_base_SurveyPanelBase = /** @class */ (function (_super) {
         var el = this.rootRef.current;
         if (el && this.survey) {
             if (this.panelBase.isPanel) {
-                this.survey.afterRenderPanel(this.panelBase, el);
+                this.panelBase.afterRender(el);
             }
             else {
                 this.survey.afterRenderPage(el);
@@ -1423,6 +1423,12 @@ var popup_PopupContainer = /** @class */ (function (_super) {
                 _this.model.clickOutside(e);
             }, onKeyDown: this.handleKeydown }, container));
     };
+    PopupContainer.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        if (this.model.isVisible) {
+            this.model.updateOnShowing();
+        }
+    };
     return PopupContainer;
 }(reactquestion_element_SurveyElementBase));
 
@@ -1453,12 +1459,26 @@ function showDialog(dialogOptions, rootElement) {
     var popupViewModel = Object(external_root_Survey_commonjs2_survey_core_commonjs_survey_core_amd_survey_core_["createPopupModalViewModel"])(dialogOptions, rootElement);
     var onVisibilityChangedCallback = function (_, options) {
         if (!options.isVisible) {
-            external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default.a.unmountComponentAtNode(popupViewModel.container);
+            if (typeof external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default.a.createRoot == "function") {
+                if (!!root) {
+                    root.unmount();
+                }
+            }
+            else {
+                external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default.a.unmountComponentAtNode(popupViewModel.container);
+            }
             popupViewModel.dispose();
         }
     };
     popupViewModel.onVisibilityChanged.add(onVisibilityChangedCallback);
-    external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default.a.render(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(popup_PopupContainer, { model: popupViewModel }), popupViewModel.container);
+    var root;
+    if (typeof external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default.a.createRoot == "function") {
+        root = external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default.a.createRoot(popupViewModel.container);
+        root.render(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(popup_PopupContainer, { model: popupViewModel }));
+    }
+    else {
+        external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default.a.render(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(popup_PopupContainer, { model: popupViewModel }), popupViewModel.container);
+    }
     popupViewModel.model.isVisible = true;
     return popupViewModel;
 }
@@ -1489,9 +1509,7 @@ var action_bar_item_dropdown_extends = (undefined && undefined.__extends) || (fu
 var action_bar_item_dropdown_SurveyActionBarItemDropdown = /** @class */ (function (_super) {
     action_bar_item_dropdown_extends(SurveyActionBarItemDropdown, _super);
     function SurveyActionBarItemDropdown(props) {
-        var _this = _super.call(this, props) || this;
-        _this.viewModel = new external_root_Survey_commonjs2_survey_core_commonjs_survey_core_amd_survey_core_["ActionDropdownViewModel"](_this.item);
-        return _this;
+        return _super.call(this, props) || this;
     }
     SurveyActionBarItemDropdown.prototype.renderInnerButton = function () {
         var button = _super.prototype.renderInnerButton.call(this);
@@ -1499,6 +1517,9 @@ var action_bar_item_dropdown_SurveyActionBarItemDropdown = /** @class */ (functi
             button,
             external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(popup_Popup, { model: this.item.popupModel, getTarget: external_root_Survey_commonjs2_survey_core_commonjs_survey_core_amd_survey_core_["getActionDropdownButtonTarget"] })));
     };
+    SurveyActionBarItemDropdown.prototype.componentDidMount = function () {
+        this.viewModel = new external_root_Survey_commonjs2_survey_core_commonjs_survey_core_amd_survey_core_["ActionDropdownViewModel"](this.item);
+    };
     SurveyActionBarItemDropdown.prototype.componentWillUnmount = function () {
         _super.prototype.componentWillUnmount.call(this);
         this.viewModel.dispose();
@@ -1889,9 +1910,6 @@ var text_area_TextAreaComponent = /** @class */ (function (_super) {
         var _this = this;
         return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("textarea", { id: this.viewModel.id, className: this.viewModel.className, ref: function (textarea) { return (_this.viewModel.setElement(textarea)); }, disabled: this.viewModel.isDisabledAttr, readOnly: this.viewModel.isReadOnlyAttr, rows: this.viewModel.rows, cols: this.viewModel.cols, placeholder: this.viewModel.placeholder, maxLength: this.viewModel.maxLength, defaultValue: this.initialValue, onChange: function (event) { _this.viewModel.onTextAreaInput(event); }, onFocus: function (event) { _this.viewModel.onTextAreaFocus(event); }, onBlur: function (event) { _this.viewModel.onTextAreaBlur(event); }, onKeyDown: function (event) { _this.viewModel.onTextAreaKeyDown(event); }, "aria-required": this.viewModel.ariaRequired, "aria-label": this.viewModel.ariaLabel, "aria-labelledby": this.viewModel.ariaLabelledBy, "aria-describedby": this.viewModel.ariaDescribedBy, "aria-invalid": this.viewModel.ariaInvalid, "aria-errormessage": this.viewModel.ariaErrormessage, style: { resize: this.viewModel.question.resizeStyle } }));
     };
-    TextAreaComponent.prototype.componentWillUnmount = function () {
-        this.viewModel.dispose();
-    };
     return TextAreaComponent;
 }(reactquestion_element_SurveyElementBase));
 
@@ -2906,6 +2924,7 @@ var reactSurvey_Survey = /** @class */ (function (_super) {
             if (!!el)
                 this.survey.afterRenderSurvey(el);
             this.survey.startTimerFromUI();
+            this.setSurveyEvents();
         }
     };
     Survey.prototype.shouldComponentUpdate = function (nextProps, nextState) {
@@ -3062,7 +3081,6 @@ var reactSurvey_Survey = /** @class */ (function (_super) {
         if (!!newProps.css) {
             this.survey.css = this.css;
         }
-        this.setSurveyEvents();
     };
     Survey.prototype.isModelJSONChanged = function (newProps) {
         if (!!newProps["model"]) {
@@ -4366,6 +4384,10 @@ var dropdown_item_SurveyQuestionOptionItem = /** @class */ (function (_super) {
         _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
         this.setupModel();
     };
+    SurveyQuestionOptionItem.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        this.setupModel();
+    };
     SurveyQuestionOptionItem.prototype.componentWillUnmount = function () {
         _super.prototype.componentWillUnmount.call(this);
         if (!!this.item) {
@@ -5275,6 +5297,120 @@ ReactQuestionFactory.Instance.registerQuestion("file", function (props) {
     return external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"](reactquestion_file_SurveyQuestionFile, props);
 });
 
+// CONCATENATED MODULE: ./packages/survey-react-ui/src/components/file/file-item.tsx
+var file_item_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 file_item_SurveyFileItem = /** @class */ (function (_super) {
+    file_item_extends(SurveyFileItem, _super);
+    function SurveyFileItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(SurveyFileItem.prototype, "question", {
+        get: function () {
+            return this.props.question;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyFileItem.prototype, "item", {
+        get: function () {
+            return this.props.item;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyFileItem.prototype.renderFileSign = function (className, val) {
+        var _this = this;
+        if (!className || !val.name)
+            return null;
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: className },
+            external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("a", { href: val.content, onClick: function (event) {
+                    _this.question.doDownloadFile(event, val);
+                }, title: val.name, download: val.name, style: { width: this.question.imageWidth } }, val.name)));
+    };
+    SurveyFileItem.prototype.renderElement = function () {
+        var _this = this;
+        var val = this.item;
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { className: this.question.cssClasses.previewItem, onClick: function (event) { return _this.question.doDownloadFileFromContainer(event); } },
+            this.renderFileSign(this.question.cssClasses.fileSign, val),
+            external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: this.question.getImageWrapperCss(val) },
+                this.question.canPreviewImage(val) ? (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("img", { src: val.content, style: { height: this.question.imageHeight, width: this.question.imageWidth }, alt: "File preview" })) : (this.question.cssClasses.defaultImage ? (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(svg_icon_SvgIcon, { iconName: this.question.cssClasses.defaultImageIconId, size: "auto", className: this.question.cssClasses.defaultImage })) : null),
+                val.name && !this.question.isReadOnly ? (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: this.question.getRemoveButtonCss(), onClick: function (event) { return _this.question.doRemoveFile(val, event); } },
+                    external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { className: this.question.cssClasses.removeFile }, this.question.removeFileCaption),
+                    (this.question.cssClasses.removeFileSvgIconId) ?
+                        (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(svg_icon_SvgIcon, { title: this.question.removeFileCaption, iconName: this.question.cssClasses.removeFileSvgIconId, size: "auto", className: this.question.cssClasses.removeFileSvg })) : null)) : null),
+            this.renderFileSign(this.question.cssClasses.fileSignBottom, val)));
+    };
+    SurveyFileItem.prototype.canRender = function () {
+        return this.question.showPreviewContainer;
+    };
+    return SurveyFileItem;
+}(reactquestion_element_SurveyElementBase));
+
+
+// CONCATENATED MODULE: ./packages/survey-react-ui/src/components/file/file-page.tsx
+var file_page_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 file_page_SurveyFilePage = /** @class */ (function (_super) {
+    file_page_extends(SurveyFilePage, _super);
+    function SurveyFilePage() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(SurveyFilePage.prototype, "question", {
+        get: function () {
+            return this.props.question;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyFilePage.prototype, "page", {
+        get: function () {
+            return this.props.page;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyFilePage.prototype.renderElement = function () {
+        var _this = this;
+        var items = this.page.items.map(function (item, index) { return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(file_item_SurveyFileItem, { item: item, question: _this.question, key: index })); });
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: this.page.css, id: this.page.id }, items));
+    };
+    return SurveyFilePage;
+}(reactquestion_element_SurveyElementBase));
+
+
 // CONCATENATED MODULE: ./packages/survey-react-ui/src/components/file/file-preview.tsx
 var file_preview_extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -5295,6 +5431,7 @@ var file_preview_extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var file_preview_SurveyFilePreview = /** @class */ (function (_super) {
     file_preview_extends(SurveyFilePreview, _super);
     function SurveyFilePreview() {
@@ -5318,20 +5455,9 @@ var file_preview_SurveyFilePreview = /** @class */ (function (_super) {
     };
     SurveyFilePreview.prototype.renderElement = function () {
         var _this = this;
-        var previews = this.question.previewValue.map(function (val, index) {
-            if (!val)
-                return null;
-            return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { key: _this.question.inputId + "_" + index, className: _this.question.cssClasses.previewItem, onClick: function (event) { return _this.question.doDownloadFileFromContainer(event); }, style: { display: _this.question.isPreviewVisible(index) ? undefined : "none" } },
-                _this.renderFileSign(_this.question.cssClasses.fileSign, val),
-                external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: _this.question.getImageWrapperCss(val) },
-                    _this.question.canPreviewImage(val) ? (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("img", { src: val.content, style: { height: _this.question.imageHeight, width: _this.question.imageWidth }, alt: "File preview" })) : (_this.question.cssClasses.defaultImage ? (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(svg_icon_SvgIcon, { iconName: _this.question.cssClasses.defaultImageIconId, size: "auto", className: _this.question.cssClasses.defaultImage })) : null),
-                    val.name && !_this.question.isReadOnly ? (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: _this.question.getRemoveButtonCss(), onClick: function (event) { return _this.question.doRemoveFile(val, event); } },
-                        external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { className: _this.question.cssClasses.removeFile }, _this.question.removeFileCaption),
-                        (_this.question.cssClasses.removeFileSvgIconId) ?
-                            (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(svg_icon_SvgIcon, { title: _this.question.removeFileCaption, iconName: _this.question.cssClasses.removeFileSvgIconId, size: "auto", className: _this.question.cssClasses.removeFileSvg })) : null)) : null),
-                _this.renderFileSign(_this.question.cssClasses.fileSignBottom, val)));
-        });
-        return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: this.question.cssClasses.fileList || undefined }, previews);
+        var content = this.question.supportFileNavigator ? this.question.renderedPages.map(function (page, index) { return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(file_page_SurveyFilePage, { page: page, question: _this.question, key: page.id })); })
+            : this.question.previewValue.map(function (item, index) { return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(file_item_SurveyFileItem, { item: item, question: _this.question, key: index })); });
+        return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: this.question.cssClasses.fileList || undefined }, content);
     };
     SurveyFilePreview.prototype.canRender = function () {
         return this.question.showPreviewContainer;
@@ -9212,7 +9338,7 @@ ReactElementFactory.Instance.registerElement(external_root_Survey_commonjs2_surv
 
 
 
-Object(external_root_Survey_commonjs2_survey_core_commonjs_survey_core_amd_survey_core_["checkLibraryVersion"])("" + "1.12.4", "survey-react-ui");
+Object(external_root_Survey_commonjs2_survey_core_commonjs_survey_core_amd_survey_core_["checkLibraryVersion"])("" + "1.12.6", "survey-react-ui");
 
 
 /***/ }),