survey-react-ui 1.11.3 → 1.11.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react-ui",
-  "version": "1.11.3",
+  "version": "1.11.5",
   "description": "survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.",
   "keywords": [
     "Survey",
@@ -21,7 +21,7 @@
   },
   "typings": "survey-react-ui.d.ts",
   "peerDependencies": {
-    "survey-core": "1.11.3",
+    "survey-core": "1.11.5",
     "react": "^16.5.0 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.5.0 || ^17.0.1 || ^18.2.0"
   }

package/survey-react-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.11.3
+ * 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)
  */
@@ -328,6 +328,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)
@@ -514,11 +521,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;
     };
@@ -1069,9 +1078,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) {
@@ -2344,7 +2350,8 @@ var Base = /** @class */ (function () {
         configurable: true
     });
     Base.prototype.afterRerender = function () {
-        this.onElementRerendered.fire(this, undefined);
+        var _a;
+        (_a = this.onElementRerendered) === null || _a === void 0 ? void 0 : _a.fire(this, undefined);
     };
     Base.currentDependencis = undefined;
     return Base;
@@ -3776,7 +3783,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.11.3", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.11.5", "survey-react-ui");
 
 
 /***/ }),
@@ -8074,6 +8081,11 @@ var DomWindowHelper = /** @class */ (function () {
             return;
         window.removeEventListener(type, listener);
     };
+    DomWindowHelper.matchMedia = function (mediaQueryString) {
+        if (!DomWindowHelper.isAvailable() || typeof window.matchMedia === "undefined")
+            return null;
+        return window.matchMedia(mediaQueryString);
+    };
     return DomWindowHelper;
 }());
 
@@ -10711,6 +10723,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",
@@ -10776,6 +10789,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)
@@ -12315,7 +12329,7 @@ var SurveyQuestionBoolean = /** @class */ (function (_super) {
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.sliderGhost, onClick: function (event) { return _this.handleOnLabelClick(event, _this.question.swapOrder); } },
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.getLabelCss(this.question.swapOrder) }, this.renderLocString(this.question.locLabelLeft))),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.switch, onClick: this.handleOnSwitchClick },
-                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: cssClasses.slider, style: { marginLeft: this.question.thumbMargin } }, this.question.isDeterminated && cssClasses.sliderText ?
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: cssClasses.slider }, this.question.isDeterminated && cssClasses.sliderText ?
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: cssClasses.sliderText }, this.renderLocString(this.question.getCheckedLabel()))
                         : null)),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.sliderGhost, onClick: function (event) { return _this.handleOnLabelClick(event, !_this.question.swapOrder); } },
@@ -12830,7 +12844,7 @@ var ComponentsContainer = /** @class */ (function (_super) {
                 return _element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.createElement(component.component, { survey: _this.props.survey, model: component.data, container: _this.props.container, key: component.id });
             }));
         }
-        return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "sv-components-column" }, components.map(function (component) {
+        return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "sv-components-column" + " sv-components-container-" + this.props.container }, components.map(function (component) {
             return _element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.createElement(component.component, { survey: _this.props.survey, model: component.data, container: _this.props.container, key: component.id });
         }));
     };
@@ -14810,7 +14824,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);
@@ -17562,7 +17576,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,
@@ -18599,7 +18613,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 },
@@ -18749,7 +18763,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"]));
@@ -21350,7 +21364,7 @@ var SurveyQuestionRankingItem = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("use", { xlinkHref: this.question.dashSvgIcon })));
     };
     SurveyQuestionRankingItem.prototype.renderElement = function () {
-        var itemContentComponent = _element_factory__WEBPACK_IMPORTED_MODULE_4__["ReactElementFactory"].Instance.createElement(this.question.itemContentComponent, { item: this.item, cssClasses: this.cssClasses });
+        var itemContent = _element_factory__WEBPACK_IMPORTED_MODULE_4__["ReactElementFactory"].Instance.createElement(this.question.itemComponent, { item: this.item, cssClasses: this.cssClasses });
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { tabIndex: this.itemTabIndex, className: this.itemClass, onKeyDown: this.handleKeydown, onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, "data-sv-drop-target-ranking-item": this.index },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { tabIndex: -1, style: { outline: "none" } },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.cssClasses.itemGhostNode }),
@@ -21361,7 +21375,7 @@ var SurveyQuestionRankingItem = /** @class */ (function (_super) {
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.question.getIconFocusCss() },
                             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("use", { xlinkHref: this.question.arrowsSvgIcon }))),
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getItemIndexClasses(this.item) }, (!this.unrankedItem && this.indexText) ? this.indexText : this.renderEmptyIcon()),
-                    itemContentComponent))));
+                    itemContent))));
     };
     return SurveyQuestionRankingItem;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
@@ -21391,7 +21405,7 @@ var SurveyQuestionRankingItemContent = /** @class */ (function (_super) {
     return SurveyQuestionRankingItemContent;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
 
-_element_factory__WEBPACK_IMPORTED_MODULE_4__["ReactElementFactory"].Instance.registerElement("sv-ranking-item-content", function (props) {
+_element_factory__WEBPACK_IMPORTED_MODULE_4__["ReactElementFactory"].Instance.registerElement("sv-ranking-item", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionRankingItemContent, props);
 });
 _reactquestion_factory__WEBPACK_IMPORTED_MODULE_2__["ReactQuestionFactory"].Instance.registerQuestion("ranking", function (props) {
@@ -22916,11 +22930,19 @@ 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.
      *
@@ -24734,6 +24756,7 @@ var surveyLocalization = {
     defaultLocaleValue: "en",
     locales: {},
     localeNames: {},
+    localeDirections: {},
     supportedLocales: [],
     get currentLocale() {
         return this.currentLocaleValue === this.defaultLocaleValue ? "" : this.currentLocaleValue;