survey-react-ui 1.9.78 → 1.9.79

package/package.json

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

package/survey-react-ui.d.ts

@@ -694,6 +694,7 @@ declare module "react/tagbox-filter" {
         onChange(e: any): void;
         keyhandler(e: any): void;
         onBlur(e: any): void;
+        onFocus(e: any): void;
         constructor(props: any);
         getStateElement(): DropdownMultiSelectListModel;
         render(): JSX.Element;
@@ -722,6 +723,8 @@ declare module "react/dropdown-base" {
         clear: (event: any) => void;
         keyhandler: (event: any) => void;
         blur: (event: any) => void;
+        focus: (event: any) => void;
+        protected getStateElement(): any;
         protected setValueCore(newValue: any): void;
         protected getValueCore(): any;
         protected renderSelect(cssClasses: any): JSX.Element;

package/survey-react-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.78
+ * surveyjs - Survey JavaScript library v1.9.79
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1183,7 +1183,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.78", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.79", "survey-react-ui");
 
 
 /***/ }),
@@ -2541,7 +2541,9 @@ var NotifierComponent = /** @class */ (function (_super) {
         return this.notifier;
     };
     NotifierComponent.prototype.renderElement = function () {
-        var style = { display: this.notifier.active ? "" : "none" };
+        if (!this.notifier.isDisplayed)
+            return null;
+        var style = { visibility: this.notifier.active ? "visible" : "hidden" };
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.notifier.css, style: style },
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", null, this.notifier.message),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_3__["SurveyActionBar"], { model: this.notifier.actionBar })));
@@ -3161,8 +3163,8 @@ var RatingItemStar = /** @class */ (function (_super) {
         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); } },
             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: 48, iconName: "icon-rating-star", 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: 48, iconName: "icon-rating-star-2", title: this.item.text })));
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { className: "sv-star", size: "auto", iconName: "icon-rating-star", 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: "icon-rating-star-2", title: this.item.text })));
     };
     return RatingItemStar;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"]));
@@ -3982,8 +3984,15 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
             (_a = _this.question.dropdownListModel) === null || _a === void 0 ? void 0 : _a.onBlur(event);
             _this.updateInputDomElement();
         };
+        _this.focus = function (event) {
+            var _a;
+            (_a = _this.question.dropdownListModel) === null || _a === void 0 ? void 0 : _a.onFocus(event);
+        };
         return _this;
     }
+    SurveyQuestionDropdownBase.prototype.getStateElement = function () {
+        return this.question["dropdownListModel"];
+    };
     SurveyQuestionDropdownBase.prototype.setValueCore = function (newValue) {
         this.questionBase.renderedValue = newValue;
     };
@@ -4025,16 +4034,23 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
         var valueElement = this.renderValueElement(dropdownListModel);
         var onInputChange = function (e) {
             if (e.target === document.activeElement) {
-                dropdownListModel.filterString = e.target.value;
+                dropdownListModel.inputStringRendered = e.target.value;
             }
         };
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.question.inputId, className: this.question.getControlClass(), tabIndex: dropdownListModel.inputReadOnly ? undefined : 0, onClick: this.click, 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             disabled: this.question.isInputReadOnly, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy },
+            dropdownListModel.showHintPrefix ?
+                (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.hintPrefix },
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, dropdownListModel.hintStringPrefix))) : null,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.controlValue },
+                dropdownListModel.showHintString ?
+                    (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.hintSuffix },
+                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { style: { visibility: "hidden" }, "data-bind": "text: model.filterString" }, dropdownListModel.inputStringRendered),
+                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, dropdownListModel.hintStringSuffix))) : null,
                 valueElement,
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, role: dropdownListModel.filterStringEnabled ? this.question.ariaRole : undefined, "aria-label": this.question.placeholder, placeholder: this.question.readOnlyText, readOnly: !dropdownListModel.searchEnabled ? true : undefined, tabIndex: dropdownListModel.inputReadOnly ? undefined : -1, disabled: this.question.isInputReadOnly, inputMode: dropdownListModel.inputMode, onChange: function (e) { onInputChange(e); }, onBlur: this.blur })),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, role: dropdownListModel.filterStringEnabled ? this.question.ariaRole : undefined, "aria-label": this.question.placeholder, placeholder: dropdownListModel.placeholderRendered, readOnly: !dropdownListModel.searchEnabled ? true : undefined, tabIndex: dropdownListModel.inputReadOnly ? undefined : -1, disabled: this.question.isInputReadOnly, inputMode: dropdownListModel.inputMode, onChange: function (e) { onInputChange(e); }, onBlur: this.blur, onFocus: this.focus })),
             this.createClearButton()));
     };
     SurveyQuestionDropdownBase.prototype.createClearButton = function () {
@@ -4059,9 +4075,9 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
     SurveyQuestionDropdownBase.prototype.updateInputDomElement = function () {
         if (!!this.inputElement) {
             var control = this.inputElement;
-            var newValue = this.question.dropdownListModel.filterString;
+            var newValue = this.question.dropdownListModel.inputStringRendered;
             if (!survey_core__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isTwoValueEquals(newValue, control.value)) {
-                control.value = this.question.dropdownListModel.filterString;
+                control.value = this.question.dropdownListModel.inputStringRendered;
             }
         }
     };
@@ -6716,6 +6732,8 @@ var SurveyQuestionCheckboxItem = /** @class */ (function (_super) {
     SurveyQuestionCheckboxItem.prototype.shouldComponentUpdate = function (nextProps, nextState) {
         if (!_super.prototype.shouldComponentUpdate.call(this, nextProps, nextState))
             return false;
+        if (!this.question)
+            return false;
         return (!this.question.customWidget ||
             !!this.question.customWidgetData.isNeedRender ||
             !!this.question.customWidget.widgetJson.isDefaultRender ||
@@ -9093,6 +9111,8 @@ var SurveyQuestionRadioItem = /** @class */ (function (_super) {
     SurveyQuestionRadioItem.prototype.shouldComponentUpdate = function (nextProps, nextState) {
         if (!_super.prototype.shouldComponentUpdate.call(this, nextProps, nextState))
             return false;
+        if (!this.question)
+            return false;
         return (!this.question.customWidget ||
             !!this.question.customWidgetData.isNeedRender ||
             !!this.question.customWidget.widgetJson.isDefaultRender ||
@@ -10209,15 +10229,15 @@ var TagboxFilterString = /** @class */ (function (_super) {
     TagboxFilterString.prototype.updateDomElement = function () {
         if (!!this.inputElement) {
             var control = this.inputElement;
-            var newValue = this.model.filterString;
+            var newValue = this.model.inputStringRendered;
             if (!survey_core__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isTwoValueEquals(newValue, control.value)) {
-                control.value = this.model.filterString;
+                control.value = this.model.inputStringRendered;
             }
         }
     };
     TagboxFilterString.prototype.onChange = function (e) {
         if (e.target === document.activeElement) {
-            this.model.filterString = e.target.value;
+            this.model.inputStringRendered = e.target.value;
         }
     };
     TagboxFilterString.prototype.keyhandler = function (e) {
@@ -10226,12 +10246,15 @@ var TagboxFilterString = /** @class */ (function (_super) {
     TagboxFilterString.prototype.onBlur = function (e) {
         this.model.onBlur(e);
     };
+    TagboxFilterString.prototype.onFocus = function (e) {
+        this.model.onFocus(e);
+    };
     TagboxFilterString.prototype.getStateElement = function () {
         return this.model;
     };
     TagboxFilterString.prototype.render = function () {
         var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), inputMode: this.model.inputMode, ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, disabled: this.question.isInputReadOnly, readOnly: !this.model.searchEnabled ? true : undefined, size: !this.model.filterString ? 1 : undefined, role: this.model.filterStringEnabled ? this.question.ariaRole : undefined, "aria-label": this.question.placeholder, placeholder: this.model.filterStringPlaceholder, onKeyDown: function (e) { _this.keyhandler(e); }, onChange: function (e) { _this.onChange(e); }, onBlur: function (e) { _this.onBlur(e); } }));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), inputMode: this.model.inputMode, ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, disabled: this.question.isInputReadOnly, readOnly: !this.model.searchEnabled ? true : undefined, size: !this.model.inputStringRendered ? 1 : undefined, role: this.model.filterStringEnabled ? this.question.ariaRole : undefined, "aria-label": this.question.placeholder, placeholder: this.model.filterStringPlaceholder, onKeyDown: function (e) { _this.keyhandler(e); }, onChange: function (e) { _this.onChange(e); }, onBlur: function (e) { _this.onBlur(e); }, onFocus: function (e) { _this.onFocus(e); } }));
     };
     return TagboxFilterString;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_3__["SurveyElementBase"]));