survey-react-ui 1.9.92 → 1.9.94

package/survey-react-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.92
+ * surveyjs - Survey JavaScript library v1.9.94
  * 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.92", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.94", "survey-react-ui");
 
 
 /***/ }),
@@ -1002,11 +1002,11 @@ var SurveyActionBarItemDropdown = /** @class */ (function (_super) {
         _this.viewModel = new survey_core__WEBPACK_IMPORTED_MODULE_1__["ActionDropdownViewModel"](_this.item);
         return _this;
     }
-    SurveyActionBarItemDropdown.prototype.renderButtonContent = function () {
-        var buttonContent = _super.prototype.renderButtonContent.call(this);
+    SurveyActionBarItemDropdown.prototype.renderInnerButton = function () {
+        var button = _super.prototype.renderInnerButton.call(this);
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null,
-            buttonContent,
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_popup_popup__WEBPACK_IMPORTED_MODULE_3__["Popup"], { model: this.item.popupModel })));
+            button,
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_popup_popup__WEBPACK_IMPORTED_MODULE_3__["Popup"], { model: this.item.popupModel, getTarget: survey_core__WEBPACK_IMPORTED_MODULE_1__["getActionDropdownButtonTarget"] })));
     };
     SurveyActionBarItemDropdown.prototype.componentWillUnmount = function () {
         _super.prototype.componentWillUnmount.call(this);
@@ -1655,7 +1655,7 @@ var List = /** @class */ (function (_super) {
             return null;
         var items = this.renderItems();
         var ulStyle = { display: this.model.isEmpty ? "none" : null };
-        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", { className: this.model.cssClasses.itemsContainer, style: ulStyle, role: "listbox", id: this.model.elementId, onMouseDown: function (e) {
+        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", { className: this.model.getListClass(), style: ulStyle, role: "listbox", id: this.model.elementId, onMouseDown: function (e) {
                 e.preventDefault();
             }, onKeyDown: this.handleKeydown, onMouseMove: this.handleMouseMove }, items));
     };
@@ -2435,30 +2435,19 @@ var Popup = /** @class */ (function (_super) {
     };
     Popup.prototype.createModel = function () {
         this.popup = Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["createPopupViewModel"])(this.props.model, undefined);
-        this.popup.initializePopupContainer();
     };
     Popup.prototype.setTargetElement = function () {
-        if (!!this.containerRef.current && !this.popup.isModal) {
-            var popupDropdownModel = this.popup;
-            if (!popupDropdownModel)
-                return;
-            if (!!this.containerRef.current.parentElement) {
-                popupDropdownModel.targetElement = this.containerRef.current.parentElement;
-            }
-        }
+        var container = this.containerRef.current;
+        this.popup.setComponentElement(container, this.props.getTarget ? this.props.getTarget(container) : undefined);
     };
     Popup.prototype.componentDidMount = function () {
         _super.prototype.componentDidMount.call(this);
-        this.popup.initializePopupContainer();
         this.setTargetElement();
     };
     Popup.prototype.componentDidUpdate = function (prevProps, prevState) {
         _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
         this.setTargetElement();
     };
-    Popup.prototype.componentWillUnmount = function () {
-        this.popup.unmountPopupContainer();
-    };
     Popup.prototype.shouldComponentUpdate = function (nextProps, nextState) {
         var _a;
         if (!_super.prototype.shouldComponentUpdate.call(this, nextProps, nextState))
@@ -2474,10 +2463,10 @@ var Popup = /** @class */ (function (_super) {
         this.popup.model = this.model;
         var popupContainer;
         if (this.model.isModal) {
-            popupContainer = react_dom__WEBPACK_IMPORTED_MODULE_0___default.a.createPortal(react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(PopupContainer, { model: this.popup }), this.popup.container);
+            popupContainer = react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(PopupContainer, { model: this.popup });
         }
         else {
-            popupContainer = react_dom__WEBPACK_IMPORTED_MODULE_0___default.a.createPortal(react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(PopupDropdownContainer, { model: this.popup }), this.popup.container);
+            popupContainer = react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(PopupDropdownContainer, { model: this.popup });
         }
         return react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { ref: this.containerRef }, popupContainer);
     };
@@ -2562,8 +2551,7 @@ var PopupContainer = /** @class */ (function (_super) {
             .toString();
         var style = { display: this.model.isVisible ? "" : "none", };
         return (react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { tabIndex: -1, className: className, style: style, onClick: function (e) {
-                _this.model.clickOutside();
-                e.stopPropagation();
+                _this.model.clickOutside(e);
             }, onKeyDown: this.handleKeydown }, container));
     };
     return PopupContainer;
@@ -2592,14 +2580,12 @@ 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) {
+function showDialog(dialogOptions, container) {
     dialogOptions.onHide = function () {
-        {
-            react_dom__WEBPACK_IMPORTED_MODULE_0___default.a.unmountComponentAtNode(popupViewModel.container);
-            popupViewModel.unmountPopupContainer();
-        }
+        react_dom__WEBPACK_IMPORTED_MODULE_0___default.a.unmountComponentAtNode(popupViewModel.container);
+        popupViewModel.dispose();
     };
-    var popupViewModel = Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["createPopupModalViewModel"])(dialogOptions);
+    var popupViewModel = Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["createPopupModalViewModel"])(dialogOptions, container);
     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;
@@ -2622,8 +2608,8 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
+/* harmony import */ var _rating_item__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./rating-item */ "./src/react/components/rating/rating-item.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -2648,38 +2634,14 @@ var RatingItemSmiley = /** @class */ (function (_super) {
     function RatingItemSmiley() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    Object.defineProperty(RatingItemSmiley.prototype, "question", {
-        get: function () {
-            return this.props.question;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(RatingItemSmiley.prototype, "item", {
-        get: function () {
-            return this.props.item;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(RatingItemSmiley.prototype, "index", {
-        get: function () {
-            return this.props.index;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    RatingItemSmiley.prototype.getStateElement = function () {
-        return this.item;
-    };
     RatingItemSmiley.prototype.render = function () {
         var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { style: this.question.getItemStyle(this.item.itemValue, this.item.highlight), 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); } },
+        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { onMouseDown: this.handleOnMouseDown, style: this.question.getItemStyle(this.item.itemValue, this.item.highlight), 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"], { size: "auto", iconName: this.question.getItemSmileyIconName(this.item.itemValue), title: this.item.text })));
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { size: "auto", iconName: this.question.getItemSmileyIconName(this.item.itemValue), title: this.item.text })));
     };
     return RatingItemSmiley;
-}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"]));
+}(_rating_item__WEBPACK_IMPORTED_MODULE_3__["RatingItemBase"]));
 
 _element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.registerElement("sv-rating-item-smiley", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(RatingItemSmiley, props);
@@ -2701,8 +2663,8 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
+/* harmony import */ var _rating_item__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./rating-item */ "./src/react/components/rating/rating-item.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -2727,39 +2689,15 @@ var RatingItemStar = /** @class */ (function (_super) {
     function RatingItemStar() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    Object.defineProperty(RatingItemStar.prototype, "question", {
-        get: function () {
-            return this.props.question;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(RatingItemStar.prototype, "item", {
-        get: function () {
-            return this.props.item;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(RatingItemStar.prototype, "index", {
-        get: function () {
-            return this.props.index;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    RatingItemStar.prototype.getStateElement = function () {
-        return this.item;
-    };
     RatingItemStar.prototype.render = function () {
         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); } },
+        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { onMouseDown: this.handleOnMouseDown, 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: 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 })));
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["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_2__["SvgIcon"], { className: "sv-star-2", size: "auto", iconName: this.question.itemStarIconAlt, title: this.item.text })));
     };
     return RatingItemStar;
-}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"]));
+}(_rating_item__WEBPACK_IMPORTED_MODULE_3__["RatingItemBase"]));
 
 _element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.registerElement("sv-rating-item-star", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(RatingItemStar, props);
@@ -2772,11 +2710,12 @@ _element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.re
 /*!*****************************************************!*\
   !*** ./src/react/components/rating/rating-item.tsx ***!
   \*****************************************************/
-/*! exports provided: RatingItem */
+/*! exports provided: RatingItemBase, RatingItem */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RatingItemBase", function() { return RatingItemBase; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RatingItem", function() { return RatingItem; });
 /* 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__);
@@ -2800,38 +2739,51 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
-var RatingItem = /** @class */ (function (_super) {
-    __extends(RatingItem, _super);
-    function RatingItem() {
-        return _super !== null && _super.apply(this, arguments) || this;
+var RatingItemBase = /** @class */ (function (_super) {
+    __extends(RatingItemBase, _super);
+    function RatingItemBase(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleOnMouseDown = _this.handleOnMouseDown.bind(_this);
+        return _this;
     }
-    Object.defineProperty(RatingItem.prototype, "question", {
+    Object.defineProperty(RatingItemBase.prototype, "question", {
         get: function () {
             return this.props.question;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(RatingItem.prototype, "item", {
+    Object.defineProperty(RatingItemBase.prototype, "item", {
         get: function () {
             return this.props.item;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(RatingItem.prototype, "index", {
+    Object.defineProperty(RatingItemBase.prototype, "index", {
         get: function () {
             return this.props.index;
         },
         enumerable: false,
         configurable: true
     });
-    RatingItem.prototype.getStateElement = function () {
+    RatingItemBase.prototype.getStateElement = function () {
         return this.item;
     };
+    RatingItemBase.prototype.handleOnMouseDown = function (event) {
+        this.question.onMouseDown();
+    };
+    return RatingItemBase;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"]));
+
+var RatingItem = /** @class */ (function (_super) {
+    __extends(RatingItem, _super);
+    function RatingItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
     RatingItem.prototype.render = function () {
         var itemText = this.renderLocString(this.item.locText);
-        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { className: this.question.getItemClassByText(this.item.itemValue, this.item.text) },
+        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { onMouseDown: this.handleOnMouseDown, className: this.question.getItemClassByText(this.item.itemValue, this.item.text) },
             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("span", { className: this.question.cssClasses.itemText }, itemText)));
     };
@@ -2839,7 +2791,7 @@ var RatingItem = /** @class */ (function (_super) {
         _super.prototype.componentDidMount.call(this);
     };
     return RatingItem;
-}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"]));
+}(RatingItemBase));
 
 _element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.registerElement("sv-rating-item", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(RatingItem, props);
@@ -7520,6 +7472,7 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
     function SurveyQuestionMatrixRow(props) {
         var _this = _super.call(this, props) || this;
         _this.handleOnChange = _this.handleOnChange.bind(_this);
+        _this.handleOnMouseDown = _this.handleOnMouseDown.bind(_this);
         return _this;
     }
     Object.defineProperty(SurveyQuestionMatrixRow.prototype, "question", {
@@ -7540,6 +7493,9 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
         this.row.value = event.target.value;
         this.setState({ value: this.row.value });
     };
+    SurveyQuestionMatrixRow.prototype.handleOnMouseDown = function (event) {
+        this.question.onMouseDown();
+    };
     SurveyQuestionMatrixRow.prototype.wrapCell = function (cell, element, reason) {
         if (!reason) {
             return element;
@@ -7590,7 +7546,7 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
             }
             else {
                 td = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { key: key, "data-responsive-title": column.locText.renderedHtml, className: this.question.cssClasses.cell },
-                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: itemClass },
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { onMouseDown: this.handleOnMouseDown, className: itemClass },
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { id: inputId, type: "radio", className: this.cssClasses.itemValue, name: row.fullName, value: column.value, disabled: this.isDisplayMode, checked: isChecked, onChange: this.handleOnChange, "aria-required": this.question.ariaRequired, "aria-label": column.locText.renderedHtml, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy }),
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
                             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.cssClasses.itemDecorator },
@@ -8679,6 +8635,7 @@ var SurveyQuestionRadioItem = /** @class */ (function (_super) {
     function SurveyQuestionRadioItem(props) {
         var _this = _super.call(this, props) || this;
         _this.handleOnChange = _this.handleOnChange.bind(_this);
+        _this.handleOnMouseDown = _this.handleOnMouseDown.bind(_this);
         return _this;
     }
     SurveyQuestionRadioItem.prototype.getStateElement = function () {
@@ -8739,6 +8696,9 @@ var SurveyQuestionRadioItem = /** @class */ (function (_super) {
     SurveyQuestionRadioItem.prototype.handleOnChange = function (event) {
         this.question.clickItemHandler(this.item);
     };
+    SurveyQuestionRadioItem.prototype.handleOnMouseDown = function (event) {
+        this.question.onMouseDown();
+    };
     SurveyQuestionRadioItem.prototype.canRender = function () {
         return !!this.question && !!this.item;
     };
@@ -8748,7 +8708,7 @@ var SurveyQuestionRadioItem = /** @class */ (function (_super) {
         var controlLabelClass = this.question.getControlLabelClass(this.item);
         var itemLabel = !this.hideCaption ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: controlLabelClass }, this.renderLocString(this.item.locText, this.textStyle)) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: itemClass, role: "presentation" },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: labelClass, "aria-label": this.question.getAriaItemLabel(this.item) },
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { onMouseDown: this.handleOnMouseDown, className: labelClass, "aria-label": this.question.getAriaItemLabel(this.item) },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { "aria-describedby": this.question.ariaDescribedBy, className: this.cssClasses.itemControl, id: this.question.getItemId(this.item), type: "radio", name: this.question.questionName, checked: this.isChecked, value: this.item.value, disabled: !this.question.getItemEnabled(this.item), onChange: this.handleOnChange }),
                 this.cssClasses.materialDecorator ?
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
@@ -8820,35 +8780,51 @@ var SurveyQuestionRanking = /** @class */ (function (_super) {
     });
     SurveyQuestionRanking.prototype.renderElement = function () {
         var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.rootClass, ref: function (root) { return (_this.setControl(root)); } }, this.getItems()));
-    };
-    SurveyQuestionRanking.prototype.getItems = function () {
+        if (!this.question.selectToRankEnabled) {
+            return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.rootClass, ref: function (root) { return (_this.setControl(root)); } }, this.getItems()));
+        }
+        else {
+            var unrankedItem = true;
+            return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.rootClass, ref: function (root) { return (_this.setControl(root)); } },
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getContainerClasses("from"), "data-ranking": "from-container" },
+                    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,
+                        " ") : 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)));
+        }
+    };
+    SurveyQuestionRanking.prototype.getItems = function (choices, unrankedItem) {
         var _this = this;
+        if (choices === void 0) { choices = this.question.rankingChoices; }
         var items = [];
-        var rankingChoices = this.question.rankingChoices;
         var _loop_1 = function (i) {
-            var item = rankingChoices[i];
+            var item = choices[i];
             items.push(this_1.renderItem(item, i, function (event) {
                 _this.question.handleKeydown.call(_this.question, event, item);
             }, function (event) {
                 event.persist();
                 //event.preventDefault();
                 _this.question.handlePointerDown.call(_this.question, event, item, event.currentTarget);
-            }, this_1.question.cssClasses, this_1.question.getItemClass(item), this_1.question));
+            }, this_1.question.cssClasses, this_1.question.getItemClass(item), this_1.question, unrankedItem));
         };
         var this_1 = this;
-        for (var i = 0; i < rankingChoices.length; i++) {
+        for (var i = 0; i < choices.length; i++) {
             _loop_1(i);
         }
         return items;
     };
-    SurveyQuestionRanking.prototype.renderItem = function (item, i, handleKeydown, handlePointerDown, cssClasses, itemClass, question) {
+    SurveyQuestionRanking.prototype.renderItem = function (item, i, handleKeydown, handlePointerDown, cssClasses, itemClass, question, unrankedItem) {
         var key = item.value + "-" + i + "-item";
         var text = this.renderLocString(item.locText);
         var index = i;
         var indexText = this.question.getNumberByIndex(i);
         var tabIndex = this.question.getItemTabIndex(item);
-        var renderedItem = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionRankingItem, { key: key, text: text, index: index, indexText: indexText, itemTabIndex: tabIndex, handleKeydown: handleKeydown, handlePointerDown: handlePointerDown, cssClasses: cssClasses, itemClass: itemClass, question: question }));
+        var renderedItem = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionRankingItem, { key: key, text: text, index: index, indexText: indexText, itemTabIndex: tabIndex, handleKeydown: handleKeydown, handlePointerDown: handlePointerDown, cssClasses: cssClasses, itemClass: itemClass, question: question, unrankedItem: unrankedItem, item: item }));
         var survey = this.question.survey;
         var wrappedItem = null;
         if (!!survey) {
@@ -8927,6 +8903,20 @@ var SurveyQuestionRankingItem = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyQuestionRankingItem.prototype, "unrankedItem", {
+        get: function () {
+            return this.props.unrankedItem;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyQuestionRankingItem.prototype, "item", {
+        get: function () {
+            return this.props.item;
+        },
+        enumerable: false,
+        configurable: true
+    });
     SurveyQuestionRankingItem.prototype.renderElement = function () {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { tabIndex: this.itemTabIndex, className: this.itemClass, onKeyDown: this.handleKeydown, onPointerDown: this.handlePointerDown, "data-sv-drop-target-ranking-item": this.index },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { tabIndex: -1, style: { outline: "none" } },
@@ -8938,7 +8928,7 @@ var SurveyQuestionRankingItem = /** @class */ (function (_super) {
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { width: "10", height: "24", viewBox: "0 0 10 24", className: this.question.getIconFocusCss(), xmlns: "http://www.w3.org/2000/svg" },
                             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("path", { d: "M10 5L5 0L0 5H4V9H6V5H10Z" }),
                             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("path", { d: "M6 19V15H4V19H0L5 24L10 19H6Z" }))),
-                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getItemIndexClasses() }, this.indexText),
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getItemIndexClasses(this.item) }, this.unrankedItem ? "" : this.indexText),
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.cssClasses.controlLabel }, this.text)))));
     };
     return SurveyQuestionRankingItem;
@@ -10014,254 +10004,438 @@ var columnWidthsByType = {
  */
 var settings = {
     /**
-     * Specifies an action to perform when users press the Enter key within a survey.
+     * An object that configures survey appearance when the survey is being designed in Survey Creator.
      *
-     * Possible values:
+     * Nested properties:
      *
-     * - `"moveToNextEditor"` - Moves focus to the next editor.
-     * - `"loseFocus"` - Removes focus from the current editor.
-     * - `"default"` - Behaves as a standard `<input>` element.
+     * - `showEmptyDescriptions`: `Boolean`\
+     * Specifies whether to display an empty description for pages and panels. Default value: `true`.
+     *
+     * - `showEmptyTitles`: `Boolean`\
+     * Specifies whether to display an empty title for pages and panels. Default value: `true`.
      */
-    enterKeyAction: "default",
+    designMode: {
+        showEmptyDescriptions: true,
+        showEmptyTitles: true
+    },
+    //#region designMode section, Obsolete properties
     /**
-     * An object that configures string comparison.
+     * This property is obsolete. Use the [`settings.designMode.showEmptyDescriptions`](https://surveyjs.io/form-library/documentation/api-reference/settings#designMode) property instead.
+     */
+    get allowShowEmptyDescriptionInDesignMode() { return this.designMode.showEmptyDescriptions; },
+    set allowShowEmptyDescriptionInDesignMode(val) { this.designMode.showEmptyDescriptions = val; },
+    /**
+     * This property is obsolete. Use the [`settings.designMode.showEmptyTitles`](https://surveyjs.io/form-library/documentation/api-reference/settings#designMode) property instead.
+     */
+    get allowShowEmptyTitleInDesignMode() { return this.designMode.showEmptyTitles; },
+    set allowShowEmptyTitleInDesignMode(val) { this.designMode.showEmptyTitles = val; },
+    //#endregion
+    /**
+     * An object that contains properties related to localization.
      *
      * Nested properties:
      *
-     * - `trimStrings`: `Boolean`\
-     * Specifies whether to remove whitespace from both ends of a string before the comparison. Default value: `true`.
+     * - `useLocalTimeZone`: `Boolean`\
+     * Disable this property if you want internal SurveyJS functions to use methods that work with UTC date and time (`setUTCDate()` `setUTCHours()`, etc.) instead of methods that work with local date and time (`setYear`, `setHours()`, etc.). Default value: `true`.
      *
-     * - `caseSensitive`: `Boolean`\
-     * Specifies whether to differentiate between capital and lower-case letters. Default value: `false`.
+     * - `defaultLocaleName`: `String`\
+     * A property key that stores a translation for the default locale. Default value: `"default"`.
+     *
+     * - `storeDuplicatedTranslations`: `Boolean`\
+     * Specifies whether surveys should store translation strings that equal the translation strings in the default locale. Default value: `false`.
      */
-    comparator: {
-        trimStrings: true,
-        caseSensitive: false
+    localization: {
+        useLocalTimeZone: true,
+        storeDuplicatedTranslations: false,
+        defaultLocaleName: "default"
     },
-    expressionDisableConversionChar: "#",
+    //#region localization section, obsolete properties
     /**
-     * Disable this property if you want internal SurveyJS functions to use methods that work with UTC date and time (`setUTCDate()` `setUTCHours()`, etc.) instead of methods that work with local date and time (`setYear`, `setHours()`, etc.).
-     *
-     * Default value: `true`
+     * This property is obsolete. Use the [`settings.localization.useLocalTimeZone`](https://surveyjs.io/form-library/documentation/api-reference/settings#localization) property instead.
      */
-    useLocalTimeZone: true,
-    get commentPrefix() { return settings.commentSuffix; },
-    set commentPrefix(val) { settings.commentSuffix = val; },
+    get useLocalTimeZone() { return this.localization.useLocalTimeZone; },
+    set useLocalTimeZone(val) { this.localization.useLocalTimeZone = val; },
     /**
-     * A suffix added to the name of the property that stores comments.
-     *
-     * Default value: "-Comment"
-     *
-     * You can specify this setting for an individual survey: [`commentSuffix`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#commentSuffix).
+     * This property is obsolete. Use the [`settings.localization.storeDuplicatedTranslations`](https://surveyjs.io/form-library/documentation/api-reference/settings#localization) property instead.
      */
-    commentSuffix: "-Comment",
+    get storeDuplicatedTranslations() { return this.localization.storeDuplicatedTranslations; },
+    set storeDuplicatedTranslations(val) { this.localization.storeDuplicatedTranslations = val; },
     /**
-     * Specifies whether to encode URL parameters when you access a web service.
-     *
-     * Default value: `true`
+     * This property is obsolete. Use the [`settings.localization.defaultLocaleName`](https://surveyjs.io/form-library/documentation/api-reference/settings#localization) property instead.
      */
-    webserviceEncodeParameters: true,
+    get defaultLocaleName() { return this.localization.defaultLocaleName; },
+    set defaultLocaleName(val) { this.localization.defaultLocaleName = val; },
+    //#endregion
     /**
-     * Specifies whether to cache choices loaded from a web service.
+     * An object with properties that configure surveys when they work with a web service.
+     *
+     * Nested properties:
+     *
+     * - `encodeUrlParams`: `Boolean`\
+     * Specifies whether to encode URL parameters when you access a web service. Default value: `true`.
+     *
+     * - `cacheLoadedChoices`: `Boolean`\
+     * Specifies whether to cache [choices](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#choicesByUrl) loaded from a web service. Default value: `true`.
      *
-     * Default value: `true`
-     * @see settings.disableOnGettingChoicesFromWeb
+     * - `disableQuestionWhileLoadingChoices`: `Boolean`\
+     * Disables a question while its choices are being loaded from a web service. Default value: `false`.
+     *
+     * - `surveyServiceUrl`: `String`\
+     * The URL of the SurveyJS Service API endpoint.
      */
-    useCachingForChoicesRestful: true,
-    get useCachingForChoicesRestfull() {
-        return settings.useCachingForChoicesRestful;
-    },
-    set useCachingForChoicesRestfull(val) {
-        settings.useCachingForChoicesRestful = val;
+    web: {
+        encodeUrlParams: true,
+        cacheLoadedChoices: true,
+        disableQuestionWhileLoadingChoices: false,
+        surveyServiceUrl: "https://api.surveyjs.io/public/v1/Survey"
     },
+    //#region web section, obsolete properties
     /**
-     * The URL of the SurveyJS Service API endpoint.
+     * This property is obsolete. Use the [`settings.web.encodeUrlParams`](https://surveyjs.io/form-library/documentation/api-reference/settings#web) property instead.
      */
-    surveyServiceUrl: "https://api.surveyjs.io/public/v1/Survey",
+    get webserviceEncodeParameters() { return this.web.encodeUrlParams; },
+    set webserviceEncodeParameters(val) { this.web.encodeUrlParams = val; },
     /**
-     * A separator used in a shorthand notation that specifies a value and display text for an [`ItemValue`](https://surveyjs.io/form-library/documentation/api-reference/itemvalue) object: `"value|text"`.
-     *
-     * Default value: `"|"`
+     * This property is obsolete. Use the [`settings.web.cacheLoadedChoices`](https://surveyjs.io/form-library/documentation/api-reference/settings#web) property instead.
      */
-    itemValueSeparator: "|",
+    get useCachingForChoicesRestful() { return this.web.cacheLoadedChoices; },
+    set useCachingForChoicesRestful(val) { this.web.cacheLoadedChoices = val; },
+    get useCachingForChoicesRestfull() { return this.web.cacheLoadedChoices; },
+    set useCachingForChoicesRestfull(val) { this.web.cacheLoadedChoices = val; },
     /**
-     * Enable this property if you want to serialize [`ItemValue`](https://surveyjs.io/form-library/documentation/api-reference/itemvalue) instances as objects even when they include only the `value` property.
+     * This property is obsolete. Use the [`settings.web.disableQuestionWhileLoadingChoices`](https://surveyjs.io/form-library/documentation/api-reference/settings#web) property instead.
+     */
+    get disableOnGettingChoicesFromWeb() { return this.web.disableQuestionWhileLoadingChoices; },
+    set disableOnGettingChoicesFromWeb(val) { this.web.disableQuestionWhileLoadingChoices = val; },
+    /**
+     * This property is obsolete. Use the [`settings.web.surveyServiceUrl`](https://surveyjs.io/form-library/documentation/api-reference/settings#web) property instead.
+     */
+    get surveyServiceUrl() { return this.web.surveyServiceUrl; },
+    set surveyServiceUrl(val) { this.web.surveyServiceUrl = val; },
+    //#endregion
+    /**
+     * An object that contains properties related to [triggers](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#conditional-survey-logic-triggers).
      *
-     * ```js
-     * import { ItemValue, settings } from "survey-core";
+     * Nested properties:
      *
-     * settings.itemValueAlwaysSerializeAsObject = true;
-     * const item = new ItemValue(5);
-     * const itemString = item.toJSON(); // Produces { value: 5 } instead of 5
-     * ```
+     * - `changeNavigationButtonsOnComplete`: `Boolean`\
+     * Specifies whether to re-evaluate an expression associated with the [Complete trigger](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#complete) immediately when a question value changes. If the expression evaluates to `true`, the trigger is executed. Default value: `false`.\
+     * Keep this property set to `false` if you want to re-evaluate the Complete trigger's expression only when the respondents navigate to another page.
+     *
+     * - `executeCompleteOnValueChanged`: `Boolean`\
+     * Specifies whether to replace the Next button with the Complete button when the [Complete trigger](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#complete) is going to be executed. Default value: `true`.
      *
-     * @see settings.serializeLocalizableStringAsObject
+     * - `executeSkipOnValueChanged`: `Boolean`\
+     * Specifies whether to re-evaluate an expression associated with the [Skip trigger](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#skip) immediately when a question value changes. If the expression evaluates to `true`, the trigger is executed. Default value: `true`.\
+     * Disable this property if you want to re-evaluate the Skip trigger's expression only when respondents navigate to another page.
+     */
+    triggers: {
+        changeNavigationButtonsOnComplete: true,
+        executeCompleteOnValueChanged: false,
+        executeSkipOnValueChanged: true
+    },
+    //#region triggers section, Obsolete properties
+    /**
+     * This property is obsolete. Use the [`settings.triggers.executeCompleteOnValueChanged`](https://surveyjs.io/form-library/documentation/api-reference/settings#triggers) property instead.
+     */
+    get executeCompleteTriggerOnValueChanged() { return this.triggers.executeCompleteOnValueChanged; },
+    set executeCompleteTriggerOnValueChanged(val) { this.triggers.executeCompleteOnValueChanged = val; },
+    /**
+     * This property is obsolete. Use the [`settings.triggers.changeNavigationButtonsOnComplete`](https://surveyjs.io/form-library/documentation/api-reference/settings#triggers) property instead.
+     */
+    get changeNavigationButtonsOnCompleteTrigger() { return this.triggers.changeNavigationButtonsOnComplete; },
+    set changeNavigationButtonsOnCompleteTrigger(val) { this.triggers.changeNavigationButtonsOnComplete = val; },
+    /**
+     * This property is obsolete. Use the [`settings.triggers.executeSkipOnValueChanged`](https://surveyjs.io/form-library/documentation/api-reference/settings#triggers) property instead.
      */
-    itemValueAlwaysSerializeAsObject: false,
+    get executeSkipTriggerOnValueChanged() { return this.triggers.executeSkipOnValueChanged; },
+    set executeSkipTriggerOnValueChanged(val) { this.triggers.executeSkipOnValueChanged = val; },
+    //#endregion
     /**
-     * Enable this property if you want to serialize the `text` property of [`ItemValue`](https://surveyjs.io/form-library/documentation/api-reference/itemvalue) objects even when it is empty or equal to the `value` property.
+     * An object that contains properties related to JSON serialization.
+     *
+     * Nested properties:
+     *
+     * - `itemValueSerializeAsObject`: `Boolean`\
+     * Enable this property if you want to serialize [`ItemValue`](https://surveyjs.io/form-library/documentation/api-reference/itemvalue) instances as objects even when they include only the `value` property. Default value: `false`. View an example below.
+     *
+     * - `itemValueSerializeDisplayText`: `Boolean`\
+     * Enable this property if you want to serialize the `text` property of [`ItemValue`](https://surveyjs.io/form-library/documentation/api-reference/itemvalue) objects even when it is empty or equal to the `value` property. Default value: `false`. View an example below.
+     *
+     * - `localizableStringSerializeAsObject`: `Boolean`\
+     * Enable this property if you want to serialize [`LocalizableString`](https://surveyjs.io/form-library/documentation/api-reference/localizablestring) instances as objects even when they include only a translation string for the default locale. For example, `"Custom String"` will be serialized as `{ default: "Custom String" }`. Default value: `false`.
      *
      * ```js
      * import { ItemValue, settings } from "survey-core";
      *
-     * settings.itemValueAlwaysSerializeText = true;
+     * // `itemValueSerializeAsObject` example
+     * settings.localization.itemValueSerializeAsObject = true;
+     * const item = new ItemValue(5);
+     * const itemString = item.toJSON(); // Produces { value: 5 } instead of 5
+     *
+     * // `itemValueSerializeDisplayText` example
+     * settings.localization.itemValueSerializeDisplayText = true;
      * const item = new ItemValue("item1");
      * const itemString = item.toJSON(); // Produces { value: "item1", text: "item1" } instead of "item1"
      * ```
      */
-    itemValueAlwaysSerializeText: false,
+    serialization: {
+        itemValueSerializeAsObject: false,
+        itemValueSerializeDisplayText: false,
+        localizableStringSerializeAsObject: false
+    },
+    //#region serialization section, Obsolete properties
     /**
-     * Specifies a property key that stores a translation for the default locale.
-     *
-     * Default value: `"default"`
-     * @see storeDuplicatedTranslations
+     * This property is obsolete. Use the [`settings.serialization.itemValueSerializeAsObject`](https://surveyjs.io/form-library/documentation/api-reference/settings#serialization) property instead.
      */
-    defaultLocaleName: "default",
+    get itemValueAlwaysSerializeAsObject() { return this.serialization.itemValueSerializeAsObject; },
+    set itemValueAlwaysSerializeAsObject(val) { this.serialization.itemValueSerializeAsObject = val; },
     /**
-     * Specifies whether surveys should store translation strings that equal the translation string specified by the `"default"` key.
-     *
-     * Default value: `false`
-     * @see settings.defaultLocaleName
+     * This property is obsolete. Use the [`settings.serialization.itemValueSerializeDisplayText`](https://surveyjs.io/form-library/documentation/api-reference/settings#serialization) property instead.
      */
-    storeDuplicatedTranslations: false,
+    get itemValueAlwaysSerializeText() { return this.serialization.itemValueSerializeDisplayText; },
+    set itemValueAlwaysSerializeText(val) { this.serialization.itemValueSerializeDisplayText = val; },
     /**
-     * Specifies a property key that stores an object with default cell values in [Single-Choice Matrix](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-question-model) questions.
-     *
-     * Default value: "default"
+     * This property is obsolete. Use the [`settings.serialization.localizableStringSerializeAsObject`](https://surveyjs.io/form-library/documentation/api-reference/settings#serialization) property instead.
      */
-    matrixDefaultRowName: "default",
+    get serializeLocalizableStringAsObject() { return this.serialization.localizableStringSerializeAsObject; },
+    set serializeLocalizableStringAsObject(val) { this.serialization.localizableStringSerializeAsObject = val; },
+    //#endregion
     /**
-     * The default type of matrix cells in the [Multiple-Choice Matrix](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) question types.
+     * An object that configures lazy rendering.
      *
-     * Default value: `"dropdown"`
+     * Nested properties:
      *
-     * You can specify this setting for individual questions or matrix columns: [`cellType`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model#cellType). Refer to the `cellType` property description for information on possible values.
+     * - `enabled`: `Boolean`\
+     * Specifies whether to add questions to the DOM only when they get into the viewport. Default value: `false`.
+     *
+     * > Lazy rendering is an experimental feature that may not work as expected in all use cases.
      */
-    matrixDefaultCellType: "dropdown",
+    lazyRender: {
+        enabled: false,
+        firstBatchSize: 3
+    },
+    //#region lazyRender section, Obsolete properties
     /**
-     * A suffix added to the name of the property that stores total values. The resulting property name consists of the matrix name and the suffix.
-     *
-     * Default value: `"-total"`
+     * This property is obsolete. Use the [`settings.lazyRender.enabled`](https://surveyjs.io/form-library/documentation/api-reference/settings#lazyRender) property instead.
      */
-    matrixTotalValuePostFix: "-total",
+    get lazyRowsRendering() { return this.lazyRender.enabled; },
+    set lazyRowsRendering(val) { this.lazyRender.enabled = val; },
+    get lazyRowsRenderingStartRow() { return this.lazyRender.firstBatchSize; },
+    set lazyRowsRenderingStartRow(val) { this.lazyRender.firstBatchSize = val; },
+    //#endregion
     /**
-     * A maximum number of rows in a [Dynamic Matrix](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model).
+     * An object with 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.
      *
-     * Default value: 1000
+     * Nested properties:
      *
-     * You can specify this setting for an individual Dynamic Matrix: [`maxRowCount`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model#maxRowCount).
-     */
-    matrixMaximumRowCount: 1000,
-    /**
-     * A maximum number of matrix rows included in the Condition drop-down menu in Survey Creator. This menu is used to configure conditional survey logic.
+     * - `defaultRowName`: `String`\
+     * A property key that stores an object with default cell values. Default value: "default".
      *
-     * Default value: 1
+     * - `defaultCellType`: `String`\
+     * The default type of matrix cells. Default value: `"dropdown"`.\
+     * You can specify this setting for individual questions or matrix columns: [`cellType`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model#cellType). Refer to the `cellType` property description for information on possible values.
+     *
+     * - `totalsSuffix`: `String`\
+     * A suffix added to the name of the property that stores total values. The resulting property name consists of the matrix name and the suffix. Default value: `"-total"`.
+     *
+     * - `maxRowCount`: `Number`\
+     * A maximum number of rows in a Dynamic Matrix. Default value: 1000.\
+     * You can specify this setting for an individual Dynamic Matrix: [`maxRowCount`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model#maxRowCount).
      *
+     * - `maxRowCountInCondition`: `Number`\
+     * A maximum number of matrix rows included in the Condition drop-down menu in Survey Creator. This menu is used to configure conditional survey logic. Default value: 1.\
      * If you set this property to 0, the Condition menu does not include any matrix rows. Users still can specify conditions that use matrix rows but only with Manual Entry.
-     */
-    matrixMaxRowCountInCondition: 1,
-    /**
-     * A maximum number of panels from [Dynamic Panel](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model) included in the Condition drop-down menu in Survey Creator. This menu is used to configure conditional survey logic.
      *
-     * Default value: 1
+     * - `renderRemoveAsIcon`: `Boolean`\
+     * Disable this property if you want to render the Remove action in Dynamic Matrix as a button. Otherwise, the action is rendered as an icon. Default value: `true`.
      *
-     * If you set this property to 0, the Condition menu does not include any panel questions. Users still can specify conditions that use panel questions but only with Manual Entry.
+     * - `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.
      */
-    panelDynamicMaxPanelCountInCondition: 1,
+    matrix: {
+        defaultCellType: "dropdown",
+        defaultRowName: "default",
+        totalsSuffix: "-total",
+        maxRowCount: 1000,
+        maxRowCountInCondition: 1,
+        renderRemoveAsIcon: true,
+        columnWidthsByType: columnWidthsByType,
+        rateSize: "small",
+    },
+    //#region matrix section, Obsolete properties
     /**
-     * Disable this property if you want to render the Remove action in Dynamic Matrix as a button. Otherwise, the action is rendered as an icon.
-     *
-     * Default value: `true`
+     * This property is obsolete. Use the [`settings.matrix.defaultRowName`](https://surveyjs.io/form-library/documentation/api-reference/settings#matrix) property instead.
+     */
+    get matrixDefaultRowName() { return this.matrix.defaultRowName; },
+    set matrixDefaultRowName(val) { this.matrix.defaultRowName = val; },
+    /**
+     * This property is obsolete. Use the [`settings.matrix.defaultCellType`](https://surveyjs.io/form-library/documentation/api-reference/settings#matrix) property instead.
+     */
+    get matrixDefaultCellType() { return this.matrix.defaultCellType; },
+    set matrixDefaultCellType(val) { this.matrix.defaultCellType = val; },
+    /**
+     * This property is obsolete. Use the [`settings.matrix.totalsSuffix`](https://surveyjs.io/form-library/documentation/api-reference/settings#matrix) property instead.
      */
-    matrixRenderRemoveAsIcon: true,
+    get matrixTotalValuePostFix() { return this.matrix.totalsSuffix; },
+    set matrixTotalValuePostFix(val) { this.matrix.totalsSuffix = val; },
     /**
-     * A maximum number of panels in [Dynamic Panel](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model).
+     * This property is obsolete. Use the [`settings.matrix.maxRowCount`](https://surveyjs.io/form-library/documentation/api-reference/settings#matrix) property instead.
+     */
+    get matrixMaximumRowCount() { return this.matrix.maxRowCount; },
+    set matrixMaximumRowCount(val) { this.matrix.maxRowCount = val; },
+    /**
+     * This property is obsolete. Use the [`settings.matrix.maxRowCountInCondition`](https://surveyjs.io/form-library/documentation/api-reference/settings#matrix) property instead.
+     */
+    get matrixMaxRowCountInCondition() { return this.matrix.maxRowCountInCondition; },
+    set matrixMaxRowCountInCondition(val) { this.matrix.maxRowCountInCondition = val; },
+    /**
+     * This property is obsolete. Use the [`settings.matrix.renderRemoveAsIcon`](https://surveyjs.io/form-library/documentation/api-reference/settings#matrix) property instead.
+     */
+    get matrixRenderRemoveAsIcon() { return this.matrix.renderRemoveAsIcon; },
+    set matrixRenderRemoveAsIcon(val) { this.matrix.renderRemoveAsIcon = val; },
+    //#endregion
+    /**
+     * An object with properties that apply to [Dynamic Panel](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model) questions.
      *
-     * Default value: 100
+     * Nested properties:
      *
+     * - `maxPanelCount`: `Number`\
+     * A maximum number of panels in Dynamic Panel. Default value: 100.\
      * You can specify this setting for an individual Dynamic Panel: [`maxPanelCount`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#maxPanelCount).
+     *
+     * - `maxPanelCountInCondition`: `Number`\
+     * A maximum number of Dynamic Panel panels included in the Condition drop-down menu in Survey Creator. This menu is used to configure conditional survey logic. Default value: 1.\
+     * If you set this property to 0, the Condition menu does not include any panel questions. Users still can specify conditions that use panel questions but only with Manual Entry.
      */
-    panelMaximumPanelCount: 100,
+    panel: {
+        maxPanelCount: 100,
+        maxPanelCountInCondition: 1
+    },
+    //#region panel section, Obsolete properties
     /**
-     * A maximum number of rate values in a [Rating](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model) question.
-     *
-     * Default value: 20
+     * This property is obsolete. Use the [`settings.panel.maxPanelCountInCondition`](https://surveyjs.io/form-library/documentation/api-reference/settings#panel) property instead.
      */
-    ratingMaximumRateValueCount: 20,
+    get panelDynamicMaxPanelCountInCondition() { return this.panel.maxPanelCountInCondition; },
+    set panelDynamicMaxPanelCountInCondition(val) { this.panel.maxPanelCountInCondition = val; },
     /**
-     * Specifies whether to close the drop-down menu of a [TagBox](https://surveyjs.io/form-library/examples/how-to-create-multiselect-tag-box/) question after a user selects a value.
-     *
-     * This setting applies to all TagBox questions on a page. You can use the [closeOnSelect](https://surveyjs.io/form-library/documentation/api-reference/dropdown-tag-box-model#closeOnSelect) property to specify the same setting for an individual TagBox question.
+     * This property is obsolete. Use the [`settings.panel.maxPanelCount`](https://surveyjs.io/form-library/documentation/api-reference/settings#panel) property instead.
      */
-    tagboxCloseOnSelect: false,
+    get panelMaximumPanelCount() { return this.panel.maxPanelCount; },
+    set panelMaximumPanelCount(val) { this.panel.maxPanelCount = val; },
+    //#endregion
     /**
-     * Disables the question while choices are being loaded from a web service.
+     * An object with properties that configure questions in read-only mode.
      *
-     * Default value: `false`
-     * @see settings.useCachingForChoicesRestful
+     * Nested properties:
+     *
+     * - `commentRenderMode`: `"textarea"` (default) | `"div"`\
+     * Specifies how to render the input field of [Comment](https://surveyjs.io/form-library/documentation/api-reference/comment-field-model) questions in [read-only](https://surveyjs.io/form-library/documentation/api-reference/comment-field-model#readOnly) mode: as a disabled `<textarea>` element or as a `<div>` element with a non-editable question value within it.
+     *
+     * - `textRenderMode`: `"input"` (default) | `"div"`\
+     * Specifies how to render the input field of [Text](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model) questions in [read-only](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#readOnly) mode: as a disabled `<input>` element or as a `<div>` element with a non-editable question value within it.
      */
-    disableOnGettingChoicesFromWeb: false,
+    readOnly: {
+        commentRenderMode: "textarea",
+        textRenderMode: "input"
+    },
+    //#region readOnly section, Obsolete properties
     /**
-     * Enable this property if you want to serialize [`LocalizableString`](https://surveyjs.io/form-library/documentation/api-reference/localizablestring) instances as objects even when they include only a translation string for the default locale. For example, `"Custom String"` will be serialized as `{ default: "Custom String" }`.
-     *
-     * Default value: `false`
-     * @see settings.itemValueAlwaysSerializeAsObject
+     * This property is obsolete. Use the [`settings.readOnly.commentRenderMode`](https://surveyjs.io/form-library/documentation/api-reference/settings#readOnly) property instead.
      */
-    serializeLocalizableStringAsObject: false,
+    get readOnlyCommentRenderMode() { return this.readOnly.commentRenderMode; },
+    set readOnlyCommentRenderMode(val) { this.readOnly.commentRenderMode = val; },
     /**
-     * Specifies whether to display an empty title for pages and panels when they are being designed in Survey Creator.
-     *
-     * Default value: `true`
+     * This property is obsolete. Use the [`settings.readOnly.textRenderMode`](https://surveyjs.io/form-library/documentation/api-reference/settings#readOnly) property instead.
      */
-    allowShowEmptyTitleInDesignMode: true,
+    get readOnlyTextRenderMode() { return this.readOnly.textRenderMode; },
+    set readOnlyTextRenderMode(val) { this.readOnly.textRenderMode = val; },
+    //#endregion
     /**
-     * Specifies whether to display an empty description for pages and panels when they are being designed in Survey Creator.
+     * An object with properties that configure question numbering.
+     *
+     * Nested properties:
+     *
+     * - `includeQuestionsWithHiddenNumber`: `Boolean`\
+     * Specifies whether to number questions whose [`hideNumber`](https://surveyjs.io/form-library/documentation/api-reference/question#hideNumber) property is enabled. Default value: `false`.
      *
-     * Default value: `true`
+     * - `includeQuestionsWithHiddenTitle`: `Boolean`\
+     * Specifies whether to number questions whose [`titleLocation`](https://surveyjs.io/form-library/documentation/api-reference/question#titleLocation) property is set to `"hidden"`. Default value: `false`.
      */
-    allowShowEmptyDescriptionInDesignMode: true,
+    numbering: {
+        includeQuestionsWithHiddenNumber: false,
+        includeQuestionsWithHiddenTitle: false
+    },
+    //#region numbering section, Obsolete properties
+    /**
+     * This property is obsolete. Use the [`settings.numbering.includeQuestionsWithHiddenTitle`](https://surveyjs.io/form-library/documentation/api-reference/settings#numbering) property instead.
+     */
+    get setQuestionVisibleIndexForHiddenTitle() { return this.numbering.includeQuestionsWithHiddenTitle; },
+    set setQuestionVisibleIndexForHiddenTitle(val) { this.numbering.includeQuestionsWithHiddenTitle = val; },
+    /**
+     * This property is obsolete. Use the [`settings.numbering.includeQuestionsWithHiddenNumber`](https://surveyjs.io/form-library/documentation/api-reference/settings#numbering) property instead.
+     */
+    get setQuestionVisibleIndexForHiddenNumber() { return this.numbering.includeQuestionsWithHiddenNumber; },
+    set setQuestionVisibleIndexForHiddenNumber(val) { this.numbering.includeQuestionsWithHiddenNumber = val; },
+    //#endregion
     /**
-     * Specifies whether to re-evaluate an expression associated with the [Complete trigger](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#complete) immediately when a question value changes. If the expression evaluates to `true`, the trigger is executed.
+     * Specifies an action to perform when users press the Enter key within a survey.
      *
-     * Keep this property set to `false` if you want to re-evaluate the Complete trigger's expression only when the respondents navigate to another page.
+     * Possible values:
      *
-     * Default value: `false`
-     * @see settings.changeNavigationButtonsOnCompleteTrigger
+     * - `"moveToNextEditor"` - Moves focus to the next editor.
+     * - `"loseFocus"` - Removes focus from the current editor.
+     * - `"default"` - Behaves as a standard `<input>` element.
      */
-    executeCompleteTriggerOnValueChanged: false,
+    enterKeyAction: "default",
     /**
-     * Specifies whether to replace the Next button with the Complete button when the [Complete trigger](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#complete) is going to be executed.
+     * An object that configures string comparison.
+     *
+     * Nested properties:
      *
-     * Default value: `true`
-     * @see settings.executeCompleteTriggerOnValueChanged
+     * - `trimStrings`: `Boolean`\
+     * Specifies whether to remove whitespace from both ends of a string before the comparison. Default value: `true`.
+     *
+     * - `caseSensitive`: `Boolean`\
+     * Specifies whether to differentiate between capital and lower-case letters. Default value: `false`.
      */
-    changeNavigationButtonsOnCompleteTrigger: true,
+    comparator: {
+        trimStrings: true,
+        caseSensitive: false
+    },
+    expressionDisableConversionChar: "#",
+    get commentPrefix() { return settings.commentSuffix; },
+    set commentPrefix(val) { settings.commentSuffix = val; },
     /**
-     * Specifies whether to re-evaluate an expression associated with the [Skip trigger](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#skip) immediately when a question value changes. If the expression evaluates to `true`, the trigger is executed.
+     * A suffix added to the name of the property that stores comments.
      *
-     * Disable this property if you want to re-evaluate the Skip trigger's expression only when the respondents navigate to another page.
+     * Default value: "-Comment"
      *
-     * Default value: `true`
+     * You can specify this setting for an individual survey: [`commentSuffix`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#commentSuffix).
      */
-    executeSkipTriggerOnValueChanged: true,
+    commentSuffix: "-Comment",
     /**
-     * Specifies how to render the input field of [Comment](https://surveyjs.io/form-library/documentation/api-reference/comment-field-model) questions in [read-only](https://surveyjs.io/form-library/documentation/api-reference/comment-field-model#readOnly) mode.
-     *
-     * Possible values:
+     * A separator used in a shorthand notation that specifies a value and display text for an [`ItemValue`](https://surveyjs.io/form-library/documentation/api-reference/itemvalue) object: `"value|text"`.
      *
-     * - `"textarea"` (default) - Renders the input field as a disabled `<textarea>` element.
-     * - `"div"` - Renders the input field as a `<div>` element with a non-editable question value within it.
+     * Default value: `"|"`
      */
-    readOnlyCommentRenderMode: "textarea",
+    itemValueSeparator: "|",
     /**
-     * Specifies how to render the input field of [Text](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model) questions in [read-only](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#readOnly) mode.
+     * A maximum number of rate values in a [Rating](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model) question.
      *
-     * Possible values:
+     * Default value: 20
+     */
+    ratingMaximumRateValueCount: 20,
+    /**
+     * Specifies whether to close the drop-down menu of a [TagBox](https://surveyjs.io/form-library/examples/how-to-create-multiselect-tag-box/) question after a user selects a value.
      *
-     * - `"input"` (default) - Renders the input field as a disabled `<input>` element.
-     * - `"div"` - Renders the input field as a `<div>` element with a non-editable question value within it.
+     * This setting applies to all TagBox questions on a page. You can use the [closeOnSelect](https://surveyjs.io/form-library/documentation/api-reference/dropdown-tag-box-model#closeOnSelect) property to specify the same setting for an individual TagBox question.
      */
-    readOnlyTextRenderMode: "input",
+    tagboxCloseOnSelect: false,
     /**
      * A property that allows you to display a custom confirm dialog instead of the standard browser dialog. Set this property to a function that renders your custom dialog window.
      * @param message A message to be displayed in the confirm dialog window.
@@ -10290,28 +10464,7 @@ var settings = {
      *
      * Default value: 10
      */
-    maximumConditionRunCountOnValueChanged: 10,
-    /**
-     * Specifies whether to number questions whose [`titleLocation`](https://surveyjs.io/form-library/documentation/api-reference/question#titleLocation) property is set to `"hidden"`.
-     *
-     * Default value: `false`
-     */
-    setQuestionVisibleIndexForHiddenTitle: false,
-    /**
-     * Specifies whether to number questions whose [`hideNumber`](https://surveyjs.io/form-library/documentation/api-reference/question#hideNumber) property is enabled.
-     *
-     * Default value: `false`
-     */
-    setQuestionVisibleIndexForHiddenNumber: false,
-    /**
-     * Specifies whether to add questions to the DOM only when they get into the viewport.
-     *
-     * Default value: `false`
-     *
-     * > This is an experimental feature that may not work as expected in all use cases.
-     */
-    lazyRowsRendering: false,
-    lazyRowsRenderingStartRow: 3,
+    maxConditionRunCountOnValueChanged: 10,
     /**
      * An object that configures notifications.
      *
@@ -10384,6 +10537,7 @@ var settings = {
      * Specifies environment in which SurveyJS will exist
      */
     environment: defaultEnvironment,
+    showMaxLengthIndicator: true,
     titleTags: {
         survey: "h3",
         page: "h4",
@@ -10462,22 +10616,6 @@ 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" } }`
-     *
-     * - `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,
-        rateSize: "small",
     }
 };
 
@@ -10532,8 +10670,7 @@ var ResponsivityManager = /** @class */ (function () {
         this.model.updateCallback = function (isResetInitialized) {
             if (isResetInitialized)
                 _this.isInitialized = false;
-            else
-                setTimeout(function () { _this.process(); }, 1);
+            setTimeout(function () { _this.process(); }, 1);
         };
         if (typeof ResizeObserver !== "undefined") {
             this.resizeObserver = new ResizeObserver(function (_) { return _this.process(); });
@@ -10570,9 +10707,8 @@ var ResponsivityManager = /** @class */ (function () {
     ResponsivityManager.prototype.calcItemsSizes = function () {
         var _this = this;
         var actions = this.model.actions;
-        this.container
-            .querySelectorAll(this.itemsSelector)
-            .forEach(function (item, index) {
+        var _items = this.container.querySelectorAll(this.itemsSelector);
+        (_items || []).forEach(function (item, index) {
             var currentAction = actions[index];
             _this.calcActionDimensions(currentAction, item);
         });
@@ -10654,7 +10790,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, isShadowDOM, getElement, 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, getFirstVisibleChild */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -10688,6 +10824,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getOriginalEvent", function() { return getOriginalEvent; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "preventDefaults", function() { return preventDefaults; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "findParentByClassNames", function() { return findParentByClassNames; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getFirstVisibleChild", function() { return getFirstVisibleChild; });
 /* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./../settings */ "./src/settings.ts");
 
 function compareVersions(a, b) {
@@ -10952,6 +11089,15 @@ function isContainerVisible(el) {
         el.offsetHeight ||
         el.getClientRects().length);
 }
+function getFirstVisibleChild(el) {
+    var result;
+    for (var index = 0; index < el.children.length; index++) {
+        if (!result && getComputedStyle(el.children[index]).display !== "none") {
+            result = el.children[index];
+        }
+    }
+    return result;
+}
 function findParentByClassNames(element, classNames) {
     if (!!element) {
         if (classNames.every(function (className) { return !className || element.classList.contains(className); })) {