survey-react-ui 3.0.0-beta.6 → 3.0.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react-ui",
-  "version": "3.0.0-beta.6",
+  "version": "3.0.0-beta.8",
   "license": "MIT",
   "author": "DevSoft Baltic OU <info@devsoftbaltic.com>",
   "homepage": "https://surveyjs.io/",
@@ -51,7 +51,7 @@
     }
   },
   "peerDependencies": {
-    "survey-core": "3.0.0-beta.6",
+    "survey-core": "3.0.0-beta.8",
     "react": "^16.5.0 || ^17.0.1 || ^18.1.0 || ^19.0.0",
     "react-dom": "^16.5.0 || ^17.0.1 || ^18.1.0 || ^19.0.0"
   }

package/survey-react-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v3.0.0-beta.6
+ * surveyjs - Survey JavaScript library v3.0.0-beta.8
  * Copyright (c) 2015-2026 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -588,8 +588,8 @@
             this.locStr.onStringChanged.remove(this.onChangedHandler);
         };
         SurveyLocStringViewer.prototype.componentDidUpdate = function (prevProps, prevState) {
-            if (!!prevProps.locStr) {
-                prevProps.locStr.onStringChanged.remove(this.onChangedHandler);
+            if (!!prevProps.model) {
+                prevProps.model.onStringChanged.remove(this.onChangedHandler);
             }
             this.reactOnStrChanged();
         };
@@ -1464,6 +1464,8 @@
 
     var noimage_48x48 = "<svg viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M30.4975 14.2475C28.7075 14.2475 27.2475 15.7075 27.2475 17.4975C27.2475 19.2875 28.7075 20.7475 30.4975 20.7475C32.2875 20.7475 33.7475 19.2875 33.7475 17.4975C33.7475 15.7075 32.2875 14.2475 30.4975 14.2475ZM30.4975 19.2475C29.5375 19.2475 28.7475 18.4575 28.7475 17.4975C28.7475 16.5375 29.5375 15.7475 30.4975 15.7475C31.4575 15.7475 32.2475 16.5375 32.2475 17.4975C32.2475 18.4575 31.4575 19.2475 30.4975 19.2475ZM13.5175 11.2175C13.4375 10.8075 13.7075 10.4175 14.1175 10.3375C14.4275 10.2775 14.7175 10.2475 14.9975 10.2475H32.9975C35.6175 10.2475 37.7475 12.3775 37.7475 14.9975V32.9975C37.7475 33.2775 37.7175 33.5675 37.6575 33.8775C37.5875 34.2375 37.2775 34.4875 36.9175 34.4875C36.8675 34.4875 36.8275 34.4875 36.7775 34.4775C36.3675 34.3975 36.1075 34.0075 36.1775 33.5975C36.2175 33.3775 36.2375 33.1775 36.2375 32.9975V14.9975C36.2375 13.2075 34.7775 11.7475 32.9875 11.7475H14.9975C14.8075 11.7475 14.6175 11.7675 14.3975 11.8075C13.9875 11.8875 13.5975 11.6175 13.5175 11.2075V11.2175ZM34.4775 36.7775C34.5575 37.1875 34.2875 37.5775 33.8775 37.6575C33.5675 37.7175 33.2775 37.7475 32.9975 37.7475H14.9975C12.3775 37.7475 10.2475 35.6175 10.2475 32.9975V14.9975C10.2475 14.7175 10.2775 14.4275 10.3375 14.1175C10.4175 13.7075 10.8075 13.4375 11.2175 13.5175C11.6275 13.5975 11.8875 13.9875 11.8175 14.3975C11.7775 14.6175 11.7575 14.8175 11.7575 14.9975V32.9975C11.7575 34.7875 13.2175 36.2475 15.0075 36.2475H33.0075C33.1975 36.2475 33.3875 36.2275 33.6075 36.1875C34.0075 36.1075 34.4075 36.3775 34.4875 36.7875L34.4775 36.7775ZM15.8275 31.7975C15.6975 31.9375 15.7575 32.0875 15.7775 32.1175C15.8175 32.1975 15.8675 32.2475 15.9375 32.2475H29.8175C30.2275 32.2475 30.5675 32.5875 30.5675 32.9975C30.5675 33.4075 30.2275 33.7475 29.8175 33.7475H15.9375C15.2675 33.7475 14.6775 33.3475 14.3975 32.7175C14.1075 32.0575 14.2375 31.2975 14.7275 30.7775L19.7275 25.2775C20.0475 24.9275 20.5075 24.7175 20.9875 24.7075C21.4875 24.7275 21.9375 24.8875 22.2675 25.2275L25.4675 28.4775C25.7575 28.7675 25.7575 29.2475 25.4675 29.5375C25.1675 29.8275 24.6975 29.8275 24.4075 29.5375L21.2075 26.2875C21.1475 26.2175 21.0675 26.1875 21.0275 26.2075C20.9875 26.2075 20.9075 26.2175 20.8475 26.2875L15.8375 31.7975H15.8275ZM38.5275 38.5275C38.3775 38.6775 38.1875 38.7475 37.9975 38.7475C37.8075 38.7475 37.6175 38.6775 37.4675 38.5275L9.4675 10.5275C9.1775 10.2375 9.1775 9.7575 9.4675 9.4675C9.7575 9.1775 10.2375 9.1775 10.5275 9.4675L38.5275 37.4675C38.8175 37.7575 38.8175 38.2375 38.5275 38.5275Z\"/></svg>";
 
+    var radio_16x16 = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><circle cx=\"8\" cy=\"8\" r=\"4\"/></svg>";
+
     var ranking_arrows = "<svg viewBox=\"0 0 10 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 5L5 0L0 5H4V9H6V5H10Z\"/><path d=\"M6 19V15H4V19H0L5 24L10 19H6Z\"/></svg>";
 
     var rankingundefined_16x16 = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.75 8C11.75 8.41 11.41 8.75 11 8.75H5C4.59 8.75 4.25 8.41 4.25 8C4.25 7.59 4.59 7.25 5 7.25H11C11.41 7.25 11.75 7.59 11.75 8Z\"/></svg>";
@@ -1547,6 +1549,7 @@
       "more-24x24": more_24x24,
       "navmenu-24x24": navmenu_24x24,
       "noimage-48x48": noimage_48x48,
+      "radio-16x16": radio_16x16,
       "ranking-arrows": ranking_arrows,
       "rankingundefined-16x16": rankingundefined_16x16,
       "rating-star-2": rating_star_2,
@@ -1698,6 +1701,11 @@
             var rootCss = this.survey.getRootCss();
             var cssClasses = this.rootNodeClassName ? this.rootNodeClassName + " " + rootCss : rootCss;
             return (React__namespace.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.generateStylesheet ?
+                    React__namespace.createElement(React__namespace.Fragment, null,
+                        React__namespace.createElement("style", null, this.survey.themeStyle),
+                        React__namespace.createElement("style", null, this.survey.resetVariablesStyle))
+                    : null,
                 React__namespace.createElement(Scroll, { disabled: this.survey.rootScrollDisabled },
                     this.survey.needRenderIcons ? React__namespace.createElement(SvgBundleComponent, null) : null,
                     React__namespace.createElement(PopupModal, null),
@@ -5003,6 +5011,13 @@
             }
             return React__namespace.createElement("datalist", { id: this.question.dataListId }, options);
         };
+        SurveyQuestionText.prototype.componentDidUpdate = function (prevProps, prevState) {
+            var _a;
+            _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+            if (this.question && this.question instanceof surveyCore.QuestionTextModel) {
+                (_a = this.question) === null || _a === void 0 ? void 0 : _a.updateInputValueFromMask();
+            }
+        };
         return SurveyQuestionText;
     }(SurveyQuestionUncontrolledElement));
     ReactQuestionFactory.Instance.registerQuestion("text", function (props) {
@@ -5129,11 +5144,13 @@
             var _this = this;
             var cssClasses = this.question.cssClasses;
             var handleOnChange = function () {
-                _this.question.value = value;
+                if (!_this.question.isInputReadOnly) {
+                    _this.question.value = value;
+                }
             };
             return (React__namespace.createElement("div", { role: "presentation", className: this.question.getRadioItemClass(cssClasses, value) },
                 React__namespace.createElement("label", { className: cssClasses.radioLabel },
-                    React__namespace.createElement("input", { type: "radio", name: this.question.name, value: value, "aria-errormessage": this.question.ariaErrormessage, checked: value === this.question.value, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, className: cssClasses.itemRadioControl, onChange: handleOnChange }),
+                    React__namespace.createElement("input", { type: "radio", name: this.question.questionName, value: value, "aria-errormessage": this.question.ariaErrormessage, checked: value === this.question.value, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, className: cssClasses.itemRadioControl, onChange: handleOnChange }),
                     this.question.cssClasses.materialRadioDecorator ?
                         (React__namespace.createElement("span", { className: cssClasses.materialRadioDecorator }, this.question.itemSvgIcon ?
                             (React__namespace.createElement("svg", { className: cssClasses.itemRadioDecorator },
@@ -5142,7 +5159,7 @@
         };
         SurveyQuestionBooleanRadio.prototype.renderElement = function () {
             var cssClasses = this.question.cssClasses;
-            return (React__namespace.createElement("div", { className: cssClasses.rootRadio },
+            return (React__namespace.createElement("div", { className: cssClasses.rootRadio, onKeyDown: this.handleOnKeyDown },
                 React__namespace.createElement("fieldset", { role: "presentation", className: cssClasses.radioFieldset }, !this.question.swapOrder ?
                     (React__namespace.createElement(React__namespace.Fragment, null,
                         this.renderRadioItem(this.question.getValueFalse(), this.question.locLabelFalse),
@@ -5159,6 +5176,32 @@
     });
     surveyCore.RendererFactory.Instance.registerRenderer("boolean", "radio", "sv-boolean-radio");
 
+    var SurveyQuestionBooleanSwitch = /** @class */ (function (_super) {
+        __extends(SurveyQuestionBooleanSwitch, _super);
+        function SurveyQuestionBooleanSwitch(props) {
+            return _super.call(this, props) || this;
+        }
+        SurveyQuestionBooleanSwitch.prototype.renderElement = function () {
+            var _this = this;
+            var cssClasses = this.question.cssClasses;
+            var buttonClass = this.question.getSwitchButtonCss();
+            var button = attachKey2click(React__namespace.createElement("div", { className: buttonClass, tabIndex: 0, role: "checkbox", "aria-checked": this.question.booleanValue || false, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage },
+                React__namespace.createElement("div", { className: cssClasses.switchThumb },
+                    React__namespace.createElement("div", { className: cssClasses.switchThumbCircle + " " + cssClasses.switchThumbLeft })),
+                React__namespace.createElement("div", { className: cssClasses.switchThumb },
+                    React__namespace.createElement("div", { className: cssClasses.switchThumbCircle + " " + cssClasses.switchThumbRight }))), this.question, { processEsc: false });
+            return (React__namespace.createElement("div", { className: cssClasses.rootSwitch, onClick: function () { return _this.question.booleanValue = !_this.question.booleanValue; } },
+                button,
+                React__namespace.createElement("div", { className: cssClasses.switchCaption },
+                    React__namespace.createElement("div", { className: cssClasses.switchTitle, id: this.question.labelRenderedAriaID }, SurveyElementBase.renderLocString(this.question.locTitle)))));
+        };
+        return SurveyQuestionBooleanSwitch;
+    }(SurveyQuestionBoolean));
+    ReactQuestionFactory.Instance.registerQuestion("sv-boolean-switch", function (props) {
+        return React__namespace.createElement(SurveyQuestionBooleanSwitch, props);
+    });
+    surveyCore.RendererFactory.Instance.registerRenderer("boolean", "switch", "sv-boolean-switch");
+
     var SurveyQuestionEmpty = /** @class */ (function (_super) {
         __extends(SurveyQuestionEmpty, _super);
         function SurveyQuestionEmpty(props) {
@@ -5907,23 +5950,33 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SurveyProgress.prototype, "model", {
+            get: function () {
+                return this.props.model;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SurveyProgress.prototype.getStateElement = function () {
+            return this.model;
+        };
         Object.defineProperty(SurveyProgress.prototype, "progress", {
             get: function () {
-                return this.survey.progressValue;
+                return this.model.progressValue;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(SurveyProgress.prototype, "progressText", {
             get: function () {
-                return this.survey.progressText;
+                return this.model.progressText;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(SurveyProgress.prototype, "progressBarAriaLabel", {
             get: function () {
-                return this.survey.progressBarAriaLabel;
+                return this.model.progressBarAriaLabel;
             },
             enumerable: false,
             configurable: true
@@ -5932,10 +5985,10 @@
             var progressStyle = {
                 width: this.progress + "%",
             };
-            return (React__namespace.createElement("div", { className: this.survey.getProgressCssClasses(this.props.container) },
-                React__namespace.createElement("div", { style: progressStyle, className: this.css.progressBar, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": this.progressBarAriaLabel },
-                    React__namespace.createElement("span", { className: surveyCore.SurveyProgressModel.getProgressTextInBarCss(this.css) }, this.progressText)),
-                React__namespace.createElement("span", { className: surveyCore.SurveyProgressModel.getProgressTextUnderBarCss(this.css) }, this.progressText)));
+            return (React__namespace.createElement("div", { className: this.model.getProgressCssClasses(this.props.container) },
+                React__namespace.createElement("div", { style: progressStyle, className: this.model.css.progressBar, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": this.progressBarAriaLabel },
+                    React__namespace.createElement("span", { className: surveyCore.SurveyProgressModel.getProgressTextInBarCss(this.model.css) }, this.progressText)),
+                React__namespace.createElement("span", { className: surveyCore.SurveyProgressModel.getProgressTextUnderBarCss(this.model.css) }, this.progressText)));
         };
         return SurveyProgress;
     }(SurveyNavigationBase));
@@ -5955,9 +6008,7 @@
     var SurveyProgressButtons = /** @class */ (function (_super) {
         __extends(SurveyProgressButtons, _super);
         function SurveyProgressButtons(props) {
-            var _this = _super.call(this, props) || this;
-            _this.listContainerRef = React__namespace.createRef();
-            return _this;
+            return _super.call(this, props) || this;
         }
         Object.defineProperty(SurveyProgressButtons.prototype, "model", {
             get: function () {
@@ -5976,34 +6027,12 @@
         SurveyProgressButtons.prototype.getStateElement = function () {
             return this.model;
         };
-        SurveyProgressButtons.prototype.onResize = function (canShowItemTitles) {
-            this.setState({ canShowItemTitles: canShowItemTitles });
-            this.setState({ canShowHeader: !canShowItemTitles });
-        };
-        SurveyProgressButtons.prototype.onUpdateScroller = function (hasScroller) {
-            this.setState({ hasScroller: hasScroller });
-        };
-        SurveyProgressButtons.prototype.onUpdateSettings = function () {
-            this.setState({ canShowItemTitles: this.model.showItemTitles });
-            this.setState({ canShowFooter: !this.model.showItemTitles });
-        };
         SurveyProgressButtons.prototype.render = function () {
-            var _a;
             var _this = this;
-            return (React__namespace.createElement("div", { className: this.model.getRootCss(this.props.container), style: (_a = { "maxWidth": this.model.progressWidth }, _a["--sd-progress-buttons-pages-count"] = this.model.visiblePages.length, _a), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": this.model.progressBarAriaLabel },
-                this.state.canShowHeader ? React__namespace.createElement("div", { className: this.css.progressButtonsHeader },
-                    React__namespace.createElement("div", { className: this.css.progressButtonsPageTitle, title: this.model.headerText }, this.model.headerText)) : null,
-                React__namespace.createElement("div", { className: this.css.progressButtonsContainer },
-                    React__namespace.createElement("div", { className: this.model.getScrollButtonCss(this.state.hasScroller, true), role: "button", onClick: function () {
-                            return _this.clickScrollButton(_this.listContainerRef.current, true);
-                        } }),
-                    React__namespace.createElement("div", { className: this.css.progressButtonsListContainer, ref: this.listContainerRef },
-                        React__namespace.createElement("ul", { className: this.css.progressButtonsList }, this.getListElements())),
-                    React__namespace.createElement("div", { className: this.model.getScrollButtonCss(this.state.hasScroller, false), role: "button", onClick: function () {
-                            return _this.clickScrollButton(_this.listContainerRef.current, false);
-                        } })),
-                this.state.canShowFooter ? React__namespace.createElement("div", { className: this.css.progressButtonsFooter },
-                    React__namespace.createElement("div", { className: this.css.progressButtonsPageTitle, title: this.model.footerText }, this.model.footerText)) : null));
+            return (React__namespace.createElement("div", { className: this.model.getRootCss(this.props.container), style: { "maxWidth": this.model.progressWidth }, role: "tablist", "aria-label": this.model.progressBarAriaLabel, onKeyDown: function (event) { return _this.model.onKeyDown(event.nativeEvent); } },
+                React__namespace.createElement("div", { className: this.css.progressButtonsContainer, role: "presentation" },
+                    React__namespace.createElement("div", { className: this.css.progressButtonsListContainer, role: "presentation" },
+                        React__namespace.createElement("ul", { className: this.css.progressButtonsList, role: "presentation" }, this.getListElements())))));
         };
         SurveyProgressButtons.prototype.getListElements = function () {
             var _this = this;
@@ -6016,32 +6045,16 @@
         SurveyProgressButtons.prototype.renderListElement = function (page, index) {
             var _this = this;
             var text = SurveyElementBase.renderLocString(page.locNavigationTitle);
-            return (React__namespace.createElement("li", { key: "listelement" + index, className: this.model.getListElementCss(index), onClick: this.model.isListElementClickable(index)
-                    ? function () { return _this.model.clickListElement(page); }
-                    : undefined, "data-page-number": this.model.getItemNumber(page) },
-                React__namespace.createElement("div", { className: this.css.progressButtonsConnector }),
-                this.state.canShowItemTitles ? React__namespace.createElement(React__namespace.Fragment, null,
-                    React__namespace.createElement("div", { className: this.css.progressButtonsPageTitle, title: page.renderedNavigationTitle }, text),
-                    React__namespace.createElement("div", { className: this.css.progressButtonsPageDescription, title: page.navigationDescription }, page.navigationDescription)) : null,
-                React__namespace.createElement("div", { className: this.css.progressButtonsButton },
-                    React__namespace.createElement("div", { className: this.css.progressButtonsButtonBackground }),
-                    React__namespace.createElement("div", { className: this.css.progressButtonsButtonContent }),
-                    React__namespace.createElement("span", null, this.model.getItemNumber(page)))));
-        };
-        SurveyProgressButtons.prototype.clickScrollButton = function (listContainerElement, isLeftScroll) {
-            if (!!listContainerElement) {
-                listContainerElement.scrollLeft += (isLeftScroll ? -1 : 1) * 70;
-            }
-        };
-        SurveyProgressButtons.prototype.componentDidMount = function () {
-            _super.prototype.componentDidMount.call(this);
-            this.respManager = new surveyCore.ProgressButtonsResponsivityManager(this.model, this.listContainerRef.current, this);
-        };
-        SurveyProgressButtons.prototype.componentWillUnmount = function () {
-            if (!!this.respManager) {
-                this.respManager.dispose();
-            }
-            _super.prototype.componentWillUnmount.call(this);
+            var onClickHandler = this.model.isListElementClickable(index) ? function () { return _this.model.clickListElement(page); } : undefined;
+            return (React__namespace.createElement("li", { key: page.uniqueId, className: this.model.getListElementCss(index), "data-page-number": this.model.getItemNumber(page), role: "presentation" },
+                this.model.showItemTitles ? React__namespace.createElement("div", { className: this.css.progressButtonsPageTitle, title: page.renderedNavigationTitle, onClick: onClickHandler }, text) : null,
+                this.model.showItemDescriptions ? React__namespace.createElement("div", { className: this.css.progressButtonsPageDescription, title: page.navigationDescription, onClick: onClickHandler }, page.navigationDescription) : null,
+                React__namespace.createElement("button", { className: this.css.progressButtonsButton, onClick: onClickHandler, role: "tab", type: "button", "aria-selected": this.model.isPageSelected(index), "aria-label": this.model.getButtonAriaLabel(page), tabIndex: this.model.getTabIndex(index), "data-page-index": index }, this.model.showItemNumbers ?
+                    this.model.getItemNumber(page) :
+                    this.model.isListElementPassed(index) ?
+                        React__namespace.createElement("svg", { className: this.css.progressButtonsCheckIcon },
+                            React__namespace.createElement("use", { xlinkHref: "#icon-".concat(this.css.progressButtonsCheckIconId) })) :
+                        React__namespace.createElement("div", { className: this.css.progressButtonsDot }))));
         };
         return SurveyProgressButtons;
     }(SurveyNavigationBase));
@@ -7420,7 +7433,7 @@
         return React__namespace.createElement(SurveyLocStringEditor, props);
     });
 
-    surveyCore.checkLibraryVersion("".concat("3.0.0-beta.6"), "survey-react-ui");
+    surveyCore.checkLibraryVersion("".concat("3.0.0-beta.8"), "survey-react-ui");
 
     Object.defineProperty(exports, "Model", {
         enumerable: true,
@@ -7495,6 +7508,7 @@
     exports.SurveyQuestionBoolean = SurveyQuestionBoolean;
     exports.SurveyQuestionBooleanCheckbox = SurveyQuestionBooleanCheckbox;
     exports.SurveyQuestionBooleanRadio = SurveyQuestionBooleanRadio;
+    exports.SurveyQuestionBooleanSwitch = SurveyQuestionBooleanSwitch;
     exports.SurveyQuestionButtonGroup = SurveyQuestionButtonGroup;
     exports.SurveyQuestionButtonGroupDropdown = SurveyQuestionButtonGroupDropdown;
     exports.SurveyQuestionCheckbox = SurveyQuestionCheckbox;