survey-react 1.11.4 → 1.11.5

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.11.4
+ * surveyjs - Survey JavaScript library v1.11.5
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -909,6 +909,13 @@ var BaseAction = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(BaseAction.prototype, "hasSubItems", {
+        get: function () {
+            return !!this.items && this.items.length > 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
     BaseAction.prototype.getActionBarItemTitleCss = function () {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__["CssClassBuilder"]()
             .append(this.cssClasses.itemTitle)
@@ -1095,11 +1102,13 @@ var Action = /** @class */ (function (_super) {
     Action.prototype.createLocTitle = function () {
         return this.createLocalizableString("title", this, true);
     };
-    Action.prototype.setItems = function (items, onSelectionChanged) {
+    Action.prototype.setSubItems = function (options) {
         this.markerIconName = "icon-next_16x16";
         this.component = "sv-list-item-group";
-        this.items = __spreadArray([], items);
-        var popupModel = createPopupModelWithListModel({ items: items, onSelectionChanged: onSelectionChanged, searchEnabled: false }, { horizontalPosition: "right", showPointer: false, canShrink: false });
+        this.items = __spreadArray([], options.items);
+        var listOptions = Object.assign({}, options);
+        listOptions.searchEnabled = false;
+        var popupModel = createPopupModelWithListModel(listOptions, { horizontalPosition: "right", showPointer: false, canShrink: false });
         popupModel.cssClass = "sv-popup-inner";
         this.popupModel = popupModel;
     };
@@ -1650,9 +1659,6 @@ var ActionContainer = /** @class */ (function (_super) {
                 itemValue.showPopupDelayed(_this.subItemsShowDelay);
                 _this.popupAfterShowCallback(itemValue);
             }
-            else if (!!action.popupModel && action.popupModel.isVisible) {
-                action.hidePopupDelayed(_this.subItemsHideDelay);
-            }
         });
     };
     ActionContainer.prototype.initResponsivityManager = function (container, delayedUpdateFunction) {
@@ -6943,12 +6949,12 @@ var DragDropChoices = /** @class */ (function (_super) {
         if (!draggedElementShortcut)
             return;
         // draggedElementShortcut.innerText = text;
-        draggedElementShortcut.style.cssText = " \n          cursor: grabbing;\n          position: absolute;\n          z-index: 10000;\n          font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));\n        ";
+        draggedElementShortcut.className = "sv-drag-drop-choices-shortcut";
         var isDeepClone = true;
         var clone = (draggedElementNode
             .closest("[data-sv-drop-target-item-value]")
             .cloneNode(isDeepClone));
-        clone.style.cssText = "\n      min-width: 100px;\n      box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));\n      background-color: var(--sjs-general-backcolor, var(--background, #fff));\n      border-radius: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));\n      padding-right: calc(2* var(--sjs-base-unit, var(--base-unit, 8px)));\n      margin-left: 0;\n    ";
+        clone.classList.add("sv-drag-drop-choices-shortcut__content");
         var dragIcon = clone.querySelector(".svc-item-value-controls__drag-icon");
         dragIcon.style.visibility = "visible";
         var removeIcon = clone.querySelector(".svc-item-value-controls__remove");
@@ -6962,6 +6968,9 @@ var DragDropChoices = /** @class */ (function (_super) {
         draggedElementShortcut.shortcutXOffset = event.clientX - rect.x;
         draggedElementShortcut.shortcutYOffset = event.clientY - rect.y;
         this.isBottom = null;
+        if (typeof this.onShortcutCreated === "function") {
+            this.onShortcutCreated(draggedElementShortcut);
+        }
         return draggedElementShortcut;
     };
     DragDropChoices.prototype.createImagePickerShortcut = function (item, text, draggedElementNode, event) {
@@ -7916,9 +7925,13 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
         }
         return _super.prototype.calculateIsBottom.call(this, clientY);
     };
-    DragDropRankingChoices.prototype.getIndixies = function (model, fromChoicesArray, toChoicesArray) {
+    DragDropRankingChoices.prototype.getIndices = function (model, fromChoicesArray, toChoicesArray) {
         var fromIndex = fromChoicesArray.indexOf(this.draggedElement);
         var toIndex = toChoicesArray.indexOf(this.dropTarget);
+        if (fromIndex < 0 && !!this.draggedElement) {
+            this.draggedElement = _itemvalue__WEBPACK_IMPORTED_MODULE_0__["ItemValue"].getItemByValue(fromChoicesArray, this.draggedElement.value) || this.draggedElement;
+            fromIndex = fromChoicesArray.indexOf(this.draggedElement);
+        }
         if (toIndex === -1) {
             var length_1 = model.value.length;
             toIndex = length_1;
@@ -7936,7 +7949,7 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
         return { fromIndex: fromIndex, toIndex: toIndex };
     };
     DragDropRankingChoices.prototype.afterDragOver = function (dropTargetNode) {
-        var _a = this.getIndixies(this.parentElement, this.parentElement.rankingChoices, this.parentElement.rankingChoices), fromIndex = _a.fromIndex, toIndex = _a.toIndex;
+        var _a = this.getIndices(this.parentElement, this.parentElement.rankingChoices, this.parentElement.rankingChoices), fromIndex = _a.fromIndex, toIndex = _a.toIndex;
         this.reorderRankedItem(this.parentElement, fromIndex, toIndex);
     };
     DragDropRankingChoices.prototype.updateDraggedElementShortcut = function (newIndex) {
@@ -8066,7 +8079,7 @@ var DragDropRankingSelectToRank = /** @class */ (function (_super) {
     };
     DragDropRankingSelectToRank.prototype.doRankBetween = function (dropTargetNode, fromChoicesArray, toChoicesArray, rankFunction) {
         var questionModel = this.parentElement;
-        var _a = this.getIndixies(questionModel, fromChoicesArray, toChoicesArray), fromIndex = _a.fromIndex, toIndex = _a.toIndex;
+        var _a = this.getIndices(questionModel, fromChoicesArray, toChoicesArray), fromIndex = _a.fromIndex, toIndex = _a.toIndex;
         rankFunction(questionModel, fromIndex, toIndex, dropTargetNode);
     };
     Object.defineProperty(DragDropRankingSelectToRank.prototype, "isDraggedElementRanked", {
@@ -8599,7 +8612,7 @@ var DropdownListModel = /** @class */ (function (_super) {
         this.listModel.setItems(this.getAvailableItems());
     };
     DropdownListModel.prototype.onClick = function (event) {
-        if (this.question.readOnly || this.question.isDesignMode || this.question.isPreviewStyle)
+        if (this.question.readOnly || this.question.isDesignMode || this.question.isPreviewStyle || this.question.isReadOnlyAttr)
             return;
         this._popupModel.toggleVisibility();
         this.focusItemOnClickAndPopup();
@@ -9924,8 +9937,8 @@ __webpack_require__.r(__webpack_exports__);
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.11.4";
-ReleaseDate = "" + "2024-06-25";
+Version = "" + "1.11.5";
+ReleaseDate = "" + "2024-07-03";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -18681,7 +18694,7 @@ module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = "<svg viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\"><g><path d=\"M24 39.5057L11.7226 45.9839C10.4095 46.6739 8.87606 45.5622 9.12525 44.096L11.4734 30.373L1.54411 20.6556C0.480254 19.6207 1.06489 17.8095 2.53128 17.5986L16.2559 15.5957L22.3994 3.10891C23.0512 1.77685 24.9488 1.77685 25.6102 3.10891L31.7441 15.5957L45.4687 17.5986C46.9351 17.8095 47.5197 19.6207 46.4559 20.6556L36.5266 30.373L38.8748 44.096C39.1239 45.5622 37.5905 46.6835 36.2774 45.9839L24 39.5057Z\" fill=\"none\"></path><path d=\"M24.4663 34.6154L24 34.3695L23.5336 34.6154L14.4788 39.389L16.2156 29.2691L16.3044 28.7517L15.9289 28.3848L8.57358 21.1966L18.7249 19.7094L19.245 19.6332L19.4772 19.1616L24 9.97413L28.5228 19.1616L28.755 19.6332L29.275 19.7094L39.4264 21.1966L32.0711 28.3848L31.6956 28.7517L31.7844 29.2691L33.5211 39.389L24.4663 34.6154Z\"></path></g></svg>"
+module.exports = "<svg viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M24 39.5057L11.7226 45.9839C10.4095 46.6739 8.87606 45.5622 9.12525 44.096L11.4734 30.373L1.54411 20.6556C0.480254 19.6207 1.06489 17.8095 2.53128 17.5986L16.2559 15.5957L22.3994 3.10891C23.0512 1.77685 24.9488 1.77685 25.6102 3.10891L31.7441 15.5957L45.4687 17.5986C46.9351 17.8095 47.5197 19.6207 46.4559 20.6556L36.5266 30.373L38.8748 44.096C39.1239 45.5622 37.5905 46.6835 36.2774 45.9839L24 39.5057Z\" fill=\"none\" stroke-width=\"2\"></path><path d=\"M24.3981 33.1305L24 32.9206L23.6019 33.1305L15.8715 37.2059L17.3542 28.5663L17.43 28.1246L17.1095 27.8113L10.83 21.6746L19.4965 20.4049L19.9405 20.3399L20.1387 19.9373L24 12.0936L27.8613 19.9373L28.0595 20.3399L28.5035 20.4049L37.17 21.6746L30.8905 27.8113L30.57 28.1246L30.6458 28.5663L32.1285 37.2059L24.3981 33.1305Z\" stroke-width=\"1.70746\"></path></svg>"
 
 /***/ }),
 
@@ -21546,6 +21559,7 @@ var defaultListCss = {
     searchClearButtonIcon: "sv-list__filter-clear-button",
     loadingIndicator: "sv-list__loading-indicator",
     itemSelected: "sv-list__item--selected",
+    itemGroup: "sv-list__item--group",
     itemWithIcon: "sv-list__item--with-icon",
     itemDisabled: "sv-list__item--disabled",
     itemFocused: "sv-list__item--focused",
@@ -21611,6 +21625,7 @@ var ListModel = /** @class */ (function (_super) {
                 .append(_this.cssClasses.itemDisabled, _this.isItemDisabled(itemValue))
                 .append(_this.cssClasses.itemFocused, _this.isItemFocused(itemValue))
                 .append(_this.cssClasses.itemSelected, _this.isItemSelected(itemValue))
+                .append(_this.cssClasses.itemGroup, itemValue.hasSubItems)
                 .append(_this.cssClasses.itemHovered, itemValue.isHovered)
                 .append(_this.cssClasses.itemTextWrap, _this.textWrapEnabled)
                 .append(itemValue.css)
@@ -22715,6 +22730,7 @@ var arabicSurveyStrings = {
 };
 survey_core__WEBPACK_IMPORTED_MODULE_0__["surveyLocalization"].locales["ar"] = arabicSurveyStrings;
 survey_core__WEBPACK_IMPORTED_MODULE_0__["surveyLocalization"].localeNames["ar"] = "العربية";
+survey_core__WEBPACK_IMPORTED_MODULE_0__["surveyLocalization"].localeDirections["ar"] = "rtl";
 // The following strings have been translated by a machine translation service
 // Remove those strings that you have corrected manually
 // indexText: "{0} of {1}" => "{0} من {1}"
@@ -30515,11 +30531,15 @@ var QuestionMatrixBaseModel = /** @class */ (function (_super) {
     };
     QuestionMatrixBaseModel.prototype.updateVisibilityBasedOnRows = function () {
         if (this.hideIfRowsEmpty) {
-            this.visible =
-                this.rows.length > 0 &&
-                    (!this.filteredRows || this.filteredRows.length > 0);
+            this.onVisibleChanged();
         }
     };
+    QuestionMatrixBaseModel.prototype.isVisibleCore = function () {
+        var res = _super.prototype.isVisibleCore.call(this);
+        if (!res || !this.hideIfRowsEmpty)
+            return res;
+        return this.rows.length > 0 && (!this.filteredRows || this.filteredRows.length > 0);
+    };
     QuestionMatrixBaseModel.prototype.shouldRunColumnExpression = function () {
         return !this.survey || !this.survey.areInvisibleElementsShowing;
     };
@@ -30562,6 +30582,7 @@ var QuestionMatrixBaseModel = /** @class */ (function (_super) {
             : null;
         this.filteredRows = [];
         var hasChanged = _itemvalue__WEBPACK_IMPORTED_MODULE_0__["ItemValue"].runConditionsForItems(this.rows, this.filteredRows, runner, values, properties, !showInvisibile);
+        _itemvalue__WEBPACK_IMPORTED_MODULE_0__["ItemValue"].runEnabledConditionsForItems(this.rows, undefined, values, properties);
         if (this.filteredRows.length === this.rows.length) {
             this.filteredRows = null;
         }
@@ -34196,6 +34217,23 @@ var PanelModelBase = /** @class */ (function (_super) {
             return this.parent.getQuestionTitleLocation();
         return this.survey ? this.survey.questionTitleLocation : "top";
     };
+    PanelModelBase.prototype.availableQuestionTitleWidth = function () {
+        var questionTitleLocation = this.getQuestionTitleLocation();
+        if (questionTitleLocation === "left")
+            return true;
+        return this.hasElementWithTitleLocationLeft();
+    };
+    PanelModelBase.prototype.hasElementWithTitleLocationLeft = function () {
+        var result = this.elements.some(function (el) {
+            if (el instanceof PanelModelBase) {
+                return el.hasElementWithTitleLocationLeft();
+            }
+            else if (el instanceof _question__WEBPACK_IMPORTED_MODULE_4__["Question"]) {
+                return el.getTitleLocation() === "left";
+            }
+        });
+        return result;
+    };
     PanelModelBase.prototype.getQuestionTitleWidth = function () {
         return this.questionTitleWidth || this.parent && this.parent.getQuestionTitleWidth();
     };
@@ -35406,7 +35444,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("panelbase", [
     {
         name: "questionTitleWidth",
         visibleIf: function (obj) {
-            return !!obj && obj["getQuestionTitleLocation"]() === "left";
+            return !!obj && obj["availableQuestionTitleWidth"]();
         }
     },
     {
@@ -38510,7 +38548,7 @@ var ProgressButtons = /** @class */ (function (_super) {
     Object.defineProperty(ProgressButtons.prototype, "progressWidth", {
         get: function () {
             if (this.isFitToSurveyWidth) {
-                return this.survey.width;
+                return this.survey.renderedWidth;
             }
             return "";
         },
@@ -38690,6 +38728,9 @@ var TriggerExpressionInfo = /** @class */ (function () {
     }
     return TriggerExpressionInfo;
 }());
+function querySelectorIncludingSelf(el, selector) {
+    return el.querySelector(selector) || el != _global_variables_utils__WEBPACK_IMPORTED_MODULE_14__["DomWindowHelper"].getWindow() && el.matches(selector) && el;
+}
 /**
  * A base class for all questions.
  */
@@ -39193,9 +39234,7 @@ var Question = /** @class */ (function (_super) {
         if (!this.setValueExpressionRunner) {
             this.setValueExpressionRunner = new _conditions__WEBPACK_IMPORTED_MODULE_6__["ExpressionRunner"](this.setValueExpression);
             this.setValueExpressionRunner.onRunComplete = function (res) {
-                if (!_this.isTwoValueEquals(_this.value, res)) {
-                    _this.value = res;
-                }
+                _this.runExpressionSetValue(res);
             };
         }
         else {
@@ -40254,7 +40293,8 @@ var Question = /** @class */ (function (_super) {
             var isParentReadOnly = !!this.parent && this.parent.isReadOnly;
             var isPareQuestionReadOnly = !!this.parentQuestion && this.parentQuestion.isReadOnly;
             var isSurveyReadOnly = !!this.survey && this.survey.isDisplayMode;
-            return this.readOnly || isParentReadOnly || isSurveyReadOnly || isPareQuestionReadOnly;
+            var callbackVal = !!this.readOnlyCallback && this.readOnlyCallback();
+            return this.readOnly || isParentReadOnly || isSurveyReadOnly || isPareQuestionReadOnly || callbackVal;
         },
         enumerable: false,
         configurable: true
@@ -40413,6 +40453,13 @@ var Question = /** @class */ (function (_super) {
             return undefined;
         return this.survey.runExpression(expression);
     };
+    Object.defineProperty(Question.prototype, "commentAreaRows", {
+        get: function () {
+            return this.survey && this.survey.commentAreaRows;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Question.prototype, "autoGrowComment", {
         get: function () {
             return this.survey && this.survey.autoGrowComment;
@@ -40967,7 +41014,7 @@ var Question = /** @class */ (function (_super) {
         if (values === void 0) { values = null; }
         if (properties === void 0) { properties = null; }
         var func = function (val) {
-            _this.runExpressionSetValue(val, setFunc);
+            _this.runExpressionSetValueCore(val, setFunc);
         };
         if (!this.runDefaultValueExpression(runner, values, properties, func)) {
             func(defaultValue);
@@ -40976,9 +41023,17 @@ var Question = /** @class */ (function (_super) {
     Question.prototype.convertFuncValuetoQuestionValue = function (val) {
         return _helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].convertValToQuestionVal(val);
     };
-    Question.prototype.runExpressionSetValue = function (val, setFunc) {
+    Question.prototype.runExpressionSetValueCore = function (val, setFunc) {
         setFunc(this.convertFuncValuetoQuestionValue(val));
     };
+    Question.prototype.runExpressionSetValue = function (val) {
+        var _this = this;
+        this.runExpressionSetValueCore(val, function (val) {
+            if (!_this.isTwoValueEquals(_this.value, val)) {
+                _this.value = val;
+            }
+        });
+    };
     Question.prototype.runDefaultValueExpression = function (runner, values, properties, setFunc) {
         var _this = this;
         if (values === void 0) { values = null; }
@@ -40987,11 +41042,7 @@ var Question = /** @class */ (function (_super) {
             return false;
         if (!setFunc) {
             setFunc = function (val) {
-                _this.runExpressionSetValue(val, function (val) {
-                    if (!_this.isTwoValueEquals(_this.value, val)) {
-                        _this.value = val;
-                    }
-                });
+                _this.runExpressionSetValue(val);
             };
         }
         if (!values)
@@ -41608,7 +41659,7 @@ var Question = /** @class */ (function (_super) {
             var scrollableSelector_1 = this.getObservedElementSelector();
             if (!scrollableSelector_1)
                 return;
-            var defaultRootEl = el.querySelector(scrollableSelector_1);
+            var defaultRootEl = querySelectorIncludingSelf(el, scrollableSelector_1);
             if (!defaultRootEl)
                 return;
             var isProcessed_1 = false;
@@ -41620,7 +41671,7 @@ var Question = /** @class */ (function (_super) {
                     isProcessed_1 = false;
                 }
                 var callback = function () {
-                    var rootEl = el.querySelector(scrollableSelector_1);
+                    var rootEl = querySelectorIncludingSelf(el, scrollableSelector_1);
                     if (!requiredWidth_1 && _this.isDefaultRendering()) {
                         requiredWidth_1 = rootEl.scrollWidth;
                     }
@@ -41645,8 +41696,10 @@ var Question = /** @class */ (function (_super) {
             });
             this.onMobileChangedCallback = function () {
                 setTimeout(function () {
-                    var rootEl = el.querySelector(scrollableSelector_1);
-                    _this.processResponsiveness(requiredWidth_1, Object(_utils_utils__WEBPACK_IMPORTED_MODULE_11__["getElementWidth"])(rootEl));
+                    var rootEl = querySelectorIncludingSelf(el, scrollableSelector_1);
+                    if (rootEl) {
+                        _this.processResponsiveness(requiredWidth_1, Object(_utils_utils__WEBPACK_IMPORTED_MODULE_11__["getElementWidth"])(rootEl));
+                    }
                 }, 0);
             };
             this.resizeObserver.observe(el);
@@ -42279,6 +42332,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         _this.isUpdatingChoicesDependedQuestions = false;
         _this.headItemsCount = 0;
         _this.footItemsCount = 0;
+        _this.allowMultiColumns = true;
         _this.prevIsOtherSelected = false;
         _this.noneItemValue = _this.createDefaultItem(_settings__WEBPACK_IMPORTED_MODULE_9__["settings"].noneItemValue, "noneText", "noneItemText");
         _this.refuseItemValue = _this.createDefaultItem(_settings__WEBPACK_IMPORTED_MODULE_9__["settings"].refuseItemValue, "refuseText", "refuseItemText");
@@ -44299,9 +44353,23 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionSelectBase.prototype.getObservedElementSelector = function () {
+        return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_11__["classesToSelector"])(this.cssClasses.mainRoot);
+    };
+    QuestionSelectBase.prototype.supportResponsiveness = function () {
+        return true;
+    };
+    QuestionSelectBase.prototype.onBeforeSetCompactRenderer = function () {
+        _super.prototype.onBeforeSetDesktopRenderer.call(this);
+        this.allowMultiColumns = false;
+    };
+    QuestionSelectBase.prototype.onBeforeSetDesktopRenderer = function () {
+        _super.prototype.onBeforeSetDesktopRenderer.call(this);
+        this.allowMultiColumns = true;
+    };
     Object.defineProperty(QuestionSelectBase.prototype, "hasColumns", {
         get: function () {
-            return !this.isMobile &&
+            return !this.isMobile && this.allowMultiColumns &&
                 (this.getCurrentColCount() > 1);
         },
         enumerable: false,
@@ -44418,6 +44486,10 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     Object.defineProperty(QuestionSelectBase.prototype, "itemComponent", {
         /**
          * The name of a component used to render items.
+         *
+         * [View Dropdown Demo](https://surveyjs.io/form-library/examples/dropdown-box-with-custom-items/ (linkStyle))
+         *
+         * [View Ranking Demo](https://surveyjs.io/form-library/examples/dropdown-box-with-custom-items/ (linkStyle))
          */
         get: function () {
             return this.getPropertyValue("itemComponent", this.getDefaultItemComponent());
@@ -44455,6 +44527,9 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ localizable: true })
     ], QuestionSelectBase.prototype, "otherPlaceholder", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
+    ], QuestionSelectBase.prototype, "allowMultiColumns", void 0);
     return QuestionSelectBase;
 }(_question__WEBPACK_IMPORTED_MODULE_2__["Question"]));
 
@@ -45684,7 +45759,8 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
             if (!itemValues.length && !selectedItemValues) {
                 this.updateSelectedItemValues();
             }
-            return this.validateItemValues(itemValues);
+            var validValues = this.validateItemValues(itemValues);
+            return validValues;
         },
         enumerable: false,
         configurable: true
@@ -46142,7 +46218,14 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionCheckboxModel.prototype, "a11y_input_ariaRole", {
         get: function () {
-            return "listbox";
+            return "group";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionCheckboxModel.prototype, "a11y_input_ariaRequired", {
+        get: function () {
+            return null;
         },
         enumerable: false,
         configurable: true
@@ -46494,9 +46577,12 @@ var ComponentQuestionJSON = /** @class */ (function () {
         this.json.onUpdateQuestionCssClasses(question, element, css);
     };
     ComponentQuestionJSON.prototype.onSetQuestionValue = function (question, newValue) {
-        if (!this.json.onSetQuestionValue)
-            return;
-        this.json.onSetQuestionValue(question, newValue);
+        if (this.json.onSetQuestionValue) {
+            this.json.onSetQuestionValue(question, newValue);
+        }
+        if (this.json.onValueSet) {
+            this.json.onValueSet(question, newValue);
+        }
     };
     ComponentQuestionJSON.prototype.onPropertyChanged = function (question, propertyName, newValue) {
         if (!this.json.onPropertyChanged)
@@ -47887,7 +47973,7 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
         return _super.prototype.hasUnknownValue.call(this, val, true, false);
     };
     QuestionDropdownModel.prototype.getItemIfChoicesNotContainThisValue = function (value, text) {
-        if (this.choicesLazyLoadEnabled && !this.dropdownListModel.isAllDataLoaded) {
+        if (this.choicesLazyLoadEnabled) {
             return this.createItemValue(value, text);
         }
         else {
@@ -51986,6 +52072,8 @@ var MatrixDropdownRowModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    MatrixDropdownRowModel.prototype.isRowEnabled = function () { return this.item.isEnabled; };
+    MatrixDropdownRowModel.prototype.isRowHasEnabledCondition = function () { return !!this.item.enableIf; };
     return MatrixDropdownRowModel;
 }(_question_matrixdropdownbase__WEBPACK_IMPORTED_MODULE_0__["MatrixDropdownRowModelBase"]));
 
@@ -52284,7 +52372,9 @@ var MatrixDropdownCell = /** @class */ (function () {
         this.question.locStrsChanged();
     };
     MatrixDropdownCell.prototype.createQuestion = function (column, row, data) {
+        var _this = this;
         var res = data.createQuestion(this.row, this.column);
+        res.readOnlyCallback = function () { return !_this.row.isRowEnabled(); };
         res.validateValueCallback = function () {
             return data.validateCell(row, column.name, row.value);
         };
@@ -52470,6 +52560,8 @@ var MatrixDropdownRowModelBase = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    MatrixDropdownRowModelBase.prototype.isRowEnabled = function () { return true; };
+    MatrixDropdownRowModelBase.prototype.isRowHasEnabledCondition = function () { return false; };
     Object.defineProperty(MatrixDropdownRowModelBase.prototype, "value", {
         get: function () {
             var result = {};
@@ -52646,6 +52738,9 @@ var MatrixDropdownRowModelBase = /** @class */ (function () {
         if (!!this.detailPanel) {
             this.detailPanel.runCondition(values, newProps);
         }
+        if (this.isRowHasEnabledCondition()) {
+            this.onQuestionReadOnlyChanged();
+        }
     };
     MatrixDropdownRowModelBase.prototype.getNamesWithDefaultValues = function () {
         var res = [];
@@ -52900,14 +52995,15 @@ var MatrixDropdownRowModelBase = /** @class */ (function () {
             return;
         this.updateCellOnColumnItemValueChanged(cell, propertyName, obj, name, newValue, oldValue);
     };
-    MatrixDropdownRowModelBase.prototype.onQuestionReadOnlyChanged = function (parentIsReadOnly) {
+    MatrixDropdownRowModelBase.prototype.onQuestionReadOnlyChanged = function () {
         var questions = this.questions;
         for (var i = 0; i < questions.length; i++) {
             var q = questions[i];
             q.setPropertyValue("isReadOnly", q.isReadOnly);
         }
         if (!!this.detailPanel) {
-            this.detailPanel.readOnly = parentIsReadOnly;
+            var parentIsReadOnly = !!this.data && this.data.isMatrixReadOnly();
+            this.detailPanel.readOnly = parentIsReadOnly || !this.isRowEnabled();
         }
     };
     MatrixDropdownRowModelBase.prototype.hasErrors = function (fireCallback, rec, raiseOnCompletedAsyncValidators) {
@@ -54170,7 +54266,8 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
         return questionPlainData;
     };
     QuestionMatrixDropdownModelBase.prototype.addConditionObjectsByContext = function (objects, context) {
-        var hasContext = !!context ? context === true || this.columns.indexOf(context) > -1 : false;
+        var hasColumnContext = !!context && this.columns.indexOf(context) > -1;
+        var hasContext = context === true || hasColumnContext;
         var rowsIndeces = this.getConditionObjectsRowIndeces();
         if (hasContext) {
             rowsIndeces.push(-1);
@@ -54197,6 +54294,11 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
                 if (index === -1 && context === true) {
                     obj.context = this;
                 }
+                else {
+                    if (hasColumnContext && prefixName.startsWith("row.")) {
+                        obj.context = context;
+                    }
+                }
                 objects.push(obj);
             }
         }
@@ -54531,7 +54633,7 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
         if (!this.generateRows)
             return;
         for (var i = 0; i < this.visibleRows.length; i++) {
-            this.visibleRows[i].onQuestionReadOnlyChanged(this.isReadOnly);
+            this.visibleRows[i].onQuestionReadOnlyChanged();
         }
     };
     //IMatrixDropdownData
@@ -54757,7 +54859,7 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
         if (this.isDesignMode)
             return this.detailPanel;
         var panel = this.createNewDetailPanel();
-        panel.readOnly = this.isReadOnly;
+        panel.readOnly = this.isReadOnly || !row.isRowEnabled();
         panel.setSurveyImpl(row);
         var json = this.detailPanel.toJSON();
         new _jsonobject__WEBPACK_IMPORTED_MODULE_0__["JsonObject"]().toObject(json, panel);
@@ -54797,6 +54899,7 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
             return data.getTextProcessor();
         return null;
     };
+    QuestionMatrixDropdownModelBase.prototype.isMatrixReadOnly = function () { return this.isReadOnly; };
     QuestionMatrixDropdownModelBase.prototype.getQuestionFromArray = function (name, index) {
         if (index >= this.visibleRows.length)
             return null;
@@ -54875,6 +54978,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("matrixdropdownb
         visible: false,
         isLightSerializable: false,
     },
+    { name: "columnsVisibleIf", visible: false },
     {
         name: "detailPanelMode",
         choices: ["none", "underRow", "underRowSingle"],
@@ -62990,13 +63094,14 @@ var QuestionRankingModel = /** @class */ (function (_super) {
             if (_this.allowStartDrag &&
                 _this.canStartDragDueMaxSelectedChoices(target) &&
                 _this.canStartDragDueItemEnabled(choice)) {
-                _this.draggedChoise = choice;
+                _this.draggedChoiceValue = choice.value;
                 _this.draggedTargetNode = node;
                 _this.dragOrClickHelper.onPointerDown(event);
             }
         };
         _this.startDrag = function (event) {
-            _this.dragDropRankingChoices.startDrag(event, _this.draggedChoise, _this, _this.draggedTargetNode);
+            var choice = _itemvalue__WEBPACK_IMPORTED_MODULE_2__["ItemValue"].getItemByValue(_this.activeChoices, _this.draggedChoiceValue);
+            _this.dragDropRankingChoices.startDrag(event, choice, _this, _this.draggedTargetNode);
         };
         _this.handlePointerUp = function (event, choice, node) {
             if (!_this.selectToRankEnabled)
@@ -63474,9 +63579,6 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    /**
-     * The name of a component used to render items.
-     */
     QuestionRankingModel.prototype.getDefaultItemComponent = function () {
         return "sv-ranking-item";
     };
@@ -64441,20 +64543,11 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         if (this.scaleColorMode === "monochrome" && this.rateColorMode == "default" ||
             this.isPreviewStyle ||
             this.isReadOnlyStyle)
-            return { borderColor: null, fill: null, backgroundColor: null };
+            return {};
         var index = this.visibleRateValues.indexOf(item);
         var color = this.getRenderedItemColor(index, false);
-        if (this.value != this.renderedRateItems[index].value) {
-            var colorLight = this.getRenderedItemColor(index, true);
-            if (highlight == "highlighted" && this.scaleColorMode === "colored")
-                return { borderColor: color, fill: color, backgroundColor: colorLight };
-            if (this.scaleColorMode === "colored" && this.errors.length == 0)
-                return { borderColor: color, fill: color, backgroundColor: null };
-            return { borderColor: null, fill: null, backgroundColor: null };
-        }
-        else {
-            return { borderColor: color, fill: null, backgroundColor: color };
-        }
+        var colorLight = highlight == "highlighted" && this.scaleColorMode === "colored" && this.getRenderedItemColor(index, true);
+        return colorLight ? { "--sd-rating-item-color": color, "--sd-rating-item-color-light": colorLight } : { "--sd-rating-item-color": color };
     };
     QuestionRatingModel.prototype.getItemClass = function (item, highlight) {
         var _this = this;
@@ -65640,8 +65733,7 @@ var QuestionTagboxModel = /** @class */ (function (_super) {
         }
     };
     QuestionTagboxModel.prototype.getItemIfChoicesNotContainThisValue = function (value, text) {
-        var _a;
-        if (this.choicesLazyLoadEnabled && !((_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.isAllDataLoaded)) {
+        if (this.choicesLazyLoadEnabled) {
             return this.createItemValue(value, text);
         }
         else {
@@ -66464,7 +66556,7 @@ var QuestionTextModel = /** @class */ (function (_super) {
         if (this.inputTextAlignment !== "auto") {
             style.textAlign = this.inputTextAlignment;
         }
-        else if (this.maskSettings.getTextAlignment() !== "auto") {
+        else if (!this.maskTypeIsEmpty && this.maskSettings.getTextAlignment() !== "auto") {
             style.textAlign = this.maskSettings.getTextAlignment();
         }
     };
@@ -69955,7 +70047,7 @@ var RatingItem = /** @class */ (function (_super) {
         var itemText = this.renderLocString(this.item.locText);
         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.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, 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-errormessage": this.question.ariaErrormessage }),
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.question.cssClasses.itemText }, itemText)));
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.question.cssClasses.itemText, "data-text": this.item.text }, itemText)));
     };
     RatingItem.prototype.componentDidMount = function () {
         _super.prototype.componentDidMount.call(this);
@@ -72696,7 +72788,7 @@ var Survey = /** @class */ (function (_super) {
         }
         var rootCss = this.survey.getRootCss();
         var cssClasses = this.rootNodeClassName ? this.rootNodeClassName + " " + rootCss : rootCss;
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.rootNodeId, ref: this.rootRef, className: cssClasses, style: this.survey.themeVariables },
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.rootNodeId, ref: this.rootRef, className: cssClasses, style: this.survey.themeVariables, lang: this.survey.locale || "en", dir: this.survey.localeDir },
             this.survey.needRenderIcons ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_svgbundle__WEBPACK_IMPORTED_MODULE_10__["SvgBundleComponent"], null) : null,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.survey.wrapperFormCss },
                 backgroundImage,
@@ -73732,7 +73824,7 @@ var SurveyQuestionCheckboxItem = /** @class */ (function (_super) {
         var itemLabel = !this.hideCaption ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.controlLabel }, 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 },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: this.cssClasses.itemControl, type: "checkbox", role: "option", name: this.question.name + this.item.id, value: this.item.value, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), readOnly: this.question.isReadOnlyAttr, checked: isChecked, onChange: this.handleOnChange }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: this.cssClasses.itemControl, type: "checkbox", name: this.question.name + this.item.id, value: this.item.value, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), readOnly: this.question.isReadOnlyAttr, checked: isChecked, onChange: this.handleOnChange, required: this.question.hasRequiredError() }),
                 this.cssClasses.materialDecorator ?
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.cssClasses.itemDecorator },
@@ -73881,7 +73973,7 @@ var SurveyQuestionCommentItem = /** @class */ (function (_super) {
             var comment = this.getComment() || "";
             return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null, comment);
         }
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("textarea", { id: this.getId(), className: className, ref: function (textarea) { return (_this.setControl(textarea)); }, disabled: this.isDisplayMode, maxLength: question.getOthersMaxLength(), placeholder: this.getPlaceholder(), onBlur: function (e) { _this.onCommentChange(e); }, onInput: function (e) { return _this.onCommentInput(e); }, "aria-required": question.isRequired || question.a11y_input_ariaRequired, "aria-label": question.ariaLabel || question.a11y_input_ariaLabel, style: { resize: question.resizeStyle } }));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("textarea", { id: this.getId(), className: className, ref: function (textarea) { return (_this.setControl(textarea)); }, disabled: this.isDisplayMode, maxLength: question.getOthersMaxLength(), rows: question.commentAreaRows, placeholder: this.getPlaceholder(), onBlur: function (e) { _this.onCommentChange(e); }, onInput: function (e) { return _this.onCommentInput(e); }, "aria-required": question.isRequired || question.a11y_input_ariaRequired, "aria-label": question.ariaLabel || question.a11y_input_ariaLabel, style: { resize: question.resizeStyle } }));
     };
     return SurveyQuestionCommentItem;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
@@ -78098,11 +78190,18 @@ var settings = {
      */
     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.
+     * Specifies whether to close the drop-down menu of a [Multi-Select Dropdown (Tag Box)](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 setting applies to all Multi-Select Dropdown questions on a web 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 Multi-Select Dropdown question.
      */
     tagboxCloseOnSelect: false,
+    /**
+     * A time interval in milliseconds between the last entered character and the beginning of search in [Single-](https://surveyjs.io/form-library/examples/create-dropdown-menu-in-javascript/) and [Multi-Select Dropdown](https://surveyjs.io/form-library/examples/how-to-create-multiselect-tag-box/) questions. Applies only to questions with the [`choicesLazyLoadEnabled`](https://surveyjs.io/form-library/documentation/api-reference/dropdown-menu-model#choicesLazyLoadEnabled) property set to `true`.
+     *
+     * Default value: 500
+     *
+     * [View Demo](https://surveyjs.io/form-library/examples/lazy-loading-dropdown/ (linkStyle))
+     */
     dropdownSearchDelay: 500,
     /**
      * A function that activates a browser confirm dialog.
@@ -82216,6 +82315,7 @@ var SurveyModel = /** @class */ (function (_super) {
          *
          * You can override this property for individual Long Text questions: [`autoGrow`](https://surveyjs.io/form-library/documentation/api-reference/comment-field-model#autoGrow).
          * @see allowResizeComment
+         * @see commentAreaRows
          */
         get: function () {
             return this.getPropertyValue("autoGrowComment");
@@ -82234,6 +82334,7 @@ var SurveyModel = /** @class */ (function (_super) {
          *
          * You can override this property for individual Long Text questions: [`allowResize`](https://surveyjs.io/form-library/documentation/api-reference/comment-field-model#allowResize).
          * @see autoGrowComment
+         * @see commentAreaRows
          */
         get: function () {
             return this.getPropertyValue("allowResizeComment");
@@ -82244,6 +82345,25 @@ var SurveyModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyModel.prototype, "commentAreaRows", {
+        /**
+         * Specifies the visible height of comment areas, measured in lines. Applies to the questions with the [`showCommentArea`](https://surveyjs.io/form-library/documentation/api-reference/question#showCommentArea) or [`showOtherItem`](https://surveyjs.io/form-library/documentation/api-reference/question#showOtherItem) property enabled.
+         *
+         * Default value: 2
+         *
+         * The value of this property is passed on to the `rows` attribute of the underlying `<textarea>` element.
+         * @see autoGrowComment
+         * @see allowResizeComment
+         */
+        get: function () {
+            return this.getPropertyValue("commentAreaRows");
+        },
+        set: function (val) {
+            this.setPropertyValue("commentAreaRows", val);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SurveyModel.prototype, "textUpdateMode", {
         /**
          * Specifies when to update the question value in questions with a text input field.
@@ -82375,6 +82495,13 @@ var SurveyModel = /** @class */ (function (_super) {
         this.localeChanged();
         this.onLocaleChangedEvent.fire(this, this.locale);
     };
+    Object.defineProperty(SurveyModel.prototype, "localeDir", {
+        get: function () {
+            return _surveyStrings__WEBPACK_IMPORTED_MODULE_8__["surveyLocalization"].localeDirections[this.locale];
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * Returns an array of locales whose translations are used in the survey.
      *
@@ -88996,6 +89123,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("survey", [
     },
     { name: "autoGrowComment:boolean", default: false },
     { name: "allowResizeComment:boolean", default: true },
+    { name: "commentAreaRows:number", minValue: 1 },
     {
         name: "startSurveyText",
         serializationProperty: "locStartSurveyText",
@@ -89147,6 +89275,7 @@ var surveyLocalization = {
     defaultLocaleValue: "en",
     locales: {},
     localeNames: {},
+    localeDirections: {},
     supportedLocales: [],
     get currentLocale() {
         return this.currentLocaleValue === this.defaultLocaleValue ? "" : this.currentLocaleValue;