survey-creator-react 2.0.2 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-creator-react",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "Use SurveyJS Creator to create or edit JSON for SurveyJS Form Library.",
   "keywords": [
     "Survey",
@@ -16,7 +16,7 @@
   "files": [
     "**/*"
   ],
-  "module": "fesm/survey-creator-react.js",
+  "module": "fesm/survey-creator-react.mjs",
   "main": "survey-creator-react.js",
   "repository": {
     "type": "git",
@@ -29,7 +29,7 @@
   "exports": {
     ".": {
       "types": "./typings/entries/index.d.ts",
-      "import": "./fesm/survey-creator-react.js",
+      "import": "./fesm/survey-creator-react.mjs",
       "require": "./survey-creator-react.js"
     }
   },
@@ -37,9 +37,9 @@
     "ace-builds": "^1.4.12",
     "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",
-    "survey-core": "2.0.2",
-    "survey-react-ui": "2.0.2",
-    "survey-creator-core": "2.0.2"
+    "survey-core": "2.0.4",
+    "survey-react-ui": "2.0.4",
+    "survey-creator-core": "2.0.4"
   },
   "peerDependenciesMeta": {
     "ace-builds": {

package/survey-creator-react.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator React v2.0.2
+ * SurveyJS Creator React v2.0.4
  * (c) 2015-2025 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -1643,7 +1643,7 @@ var TabbedMenuComponent = /** @class */ (function (_super) {
     };
     TabbedMenuComponent.prototype.renderElement = function () {
         var items = this.model.renderedActions.map(function (item) { return react__WEBPACK_IMPORTED_MODULE_1__.createElement(TabbedMenuItemWrapper, { item: item, key: item.renderedId }); });
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { ref: this.rootRef, className: "svc-tabbed-menu" }, items));
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { ref: this.rootRef, className: "svc-tabbed-menu", role: "tablist" }, items));
     };
     TabbedMenuComponent.prototype.componentDidMount = function () {
         _super.prototype.componentDidMount.call(this);
@@ -2664,63 +2664,6 @@ survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.regist
 });
 
 
-/***/ }),
-
-/***/ "./src/components/Scroll.tsx":
-/*!***********************************!*\
-  !*** ./src/components/Scroll.tsx ***!
-  \***********************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   ScrollComponent: () => (/* binding */ ScrollComponent)
-/* harmony export */ });
-/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
-/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
-/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__);
-
-
-
-
-var ScrollComponent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(ScrollComponent, _super);
-    function ScrollComponent(props) {
-        var _this = _super.call(this, props) || this;
-        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
-        _this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_2__.ScrollViewModel();
-        return _this;
-    }
-    ScrollComponent.prototype.componentDidMount = function () {
-        var container = this.rootRef.current;
-        if (!container)
-            return;
-        this.model.setRootElement(container);
-    };
-    ScrollComponent.prototype.componentWillUnmount = function () {
-        this.model.unsubscribeRootElement();
-        this.model.setRootElement(undefined);
-    };
-    ScrollComponent.prototype.render = function () {
-        var _this = this;
-        return react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { ref: this.rootRef, className: "svc-scroll__wrapper" },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-scroll__scroller sv-drag-target-skipped", onScroll: function () { return _this.model.onScrollContainer(); } },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-scroll__container" }, this.props.children)),
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-scroll__scrollbar", onScroll: function () { return _this.model.onScrollScrollbar(); } },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-scroll__scrollbar-sizer" })));
-    };
-    return ScrollComponent;
-}(react__WEBPACK_IMPORTED_MODULE_1__.Component));
-
-survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-scroll", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(ScrollComponent, props);
-});
-
-
 /***/ }),
 
 /***/ "./src/components/Search.tsx":
@@ -2859,7 +2802,7 @@ var SurveyQuestionBooleanSwitch = /** @class */ (function (_super) {
     }
     SurveyQuestionBooleanSwitch.prototype.renderElement = function () {
         var _this = this;
-        var button = (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__button" + (this.questionBase.value ? " spg-boolean-switch__button--checked" : ""), tabIndex: 0, role: "checkbox", "aria-required": this.questionBase.ariaRequired, "aria-label": this.questionBase.ariaLabel, "aria-invalid": this.questionBase.ariaInvalid, "aria-errormessage": this.questionBase.ariaErrormessage },
+        var button = (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__button" + (this.questionBase.value ? " spg-boolean-switch__button--checked" : ""), tabIndex: 0, role: "checkbox", "aria-checked": this.questionBase.booleanValue || false, "aria-required": this.questionBase.a11y_input_ariaRequired, "aria-label": this.questionBase.a11y_input_ariaLabel, "aria-labelledby": this.questionBase.a11y_input_ariaLabelledBy, "aria-invalid": this.questionBase.a11y_input_ariaInvalid, "aria-errormessage": this.questionBase.a11y_input_ariaErrormessage },
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__thumb" },
                 react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left" })),
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__thumb" },
@@ -2867,7 +2810,7 @@ var SurveyQuestionBooleanSwitch = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch", onClick: function () { return _this.questionBase.value = !_this.questionBase.value; } },
             button,
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__caption" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__title" }, survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase.renderLocString(this.questionBase.locTitle)))));
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__title", id: this.questionBase.labelRenderedAriaID }, survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase.renderLocString(this.questionBase.locTitle)))));
     };
     return SurveyQuestionBooleanSwitch;
 }(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyQuestionElementBase));
@@ -2948,7 +2891,7 @@ var SurveyQuestionColor = /** @class */ (function (_super) {
     SurveyQuestionColor.prototype.renderInput = function () {
         var _this = this;
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("input", { id: this.question.inputId, disabled: this.isDisplayMode, className: this.question.cssClasses.control, ref: function (input) { return (_this.setControl(input)); }, placeholder: this.question.renderedPlaceholder, autoComplete: "off", onKeyUp: function (event) { return _this.question.onKeyUp(event.nativeEvent); }, onBlur: function (event) { return _this.question.onBlur(event.nativeEvent); }, onChange: this.question.onChange, onBeforeInput: function (event) { return _this.question.onBeforeInput(event.nativeEvent); }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy })));
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("input", { id: this.question.inputId, disabled: this.isDisplayMode, className: this.question.cssClasses.control, ref: function (input) { return (_this.setControl(input)); }, placeholder: this.question.renderedPlaceholder, autoComplete: "off", onKeyUp: function (event) { return _this.question.onKeyUp(event.nativeEvent); }, onBlur: function (event) { return _this.question.onBlur(event.nativeEvent); }, onChange: this.question.onChange, onBeforeInput: function (event) { return _this.question.onBeforeInput(event.nativeEvent); }, "aria-required": this.question.a11y_input_ariaRequired, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-label": this.question.a11y_input_ariaLabel, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy })));
     };
     SurveyQuestionColor.prototype.renderElement = function () {
         var _this = this;
@@ -2964,11 +2907,11 @@ var SurveyQuestionColor = /** @class */ (function (_super) {
         var _this = this;
         return react__WEBPACK_IMPORTED_MODULE_1__.createElement("label", { className: this.question.getSwatchCss(), style: this.question.getSwatchStyle() },
             react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.question.cssClasses.swatchIcon, size: "auto" }),
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("input", { type: "color", disabled: this.isDisplayMode, value: this.question.renderedColorValue, className: this.question.cssClasses.colorInput, onChange: function (event) { return _this.question.onColorInputChange(event.nativeEvent); }, tabIndex: -1 }));
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("input", { type: "color", disabled: this.isDisplayMode, value: this.question.renderedColorValue, className: this.question.cssClasses.colorInput, onChange: function (event) { return _this.question.onColorInputChange(event.nativeEvent); }, tabIndex: -1, "aria-required": this.question.a11y_input_ariaRequired, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-label": this.question.a11y_input_ariaLabel, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy }));
     };
     SurveyQuestionColor.prototype.renderDropdownAction = function () {
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
-            survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.createElement("sv-action-bar-item", { item: this.question.dropdownAction }),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { "aria-hidden": "true", className: this.question.cssClasses.choicesButtonWrapper }, survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.createElement("sv-action-bar-item", { item: this.question.dropdownAction })),
             this.renderPopup()));
     };
     SurveyQuestionColor.prototype.renderPopup = function () {
@@ -3032,12 +2975,12 @@ var SurveyQuestionFileEditor = /** @class */ (function (_super) {
             this.renderChooseButton()));
     };
     SurveyQuestionFileEditor.prototype.renderClearButton = function () {
-        return (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)((react__WEBPACK_IMPORTED_MODULE_1__.createElement("button", { type: "button", className: this.questionFile.cssClasses.clearButton, disabled: this.questionFile.getIsClearButtonDisabled(), onClick: this.questionFile.doClean },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.questionFile.cssClasses.clearButtonIcon, size: "auto", title: this.questionFile.clearButtonCaption }))));
+        return (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)((react__WEBPACK_IMPORTED_MODULE_1__.createElement("button", { className: this.questionFile.cssClasses.clearButton, title: this.questionFile.clearButtonCaption, disabled: this.questionFile.getIsClearButtonDisabled(), onClick: this.questionFile.doClean },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.questionFile.cssClasses.clearButtonIcon, size: "auto" }))));
     };
     SurveyQuestionFileEditor.prototype.renderChooseButton = function () {
         var _this = this;
-        return ((0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("label", { role: "button", onClick: function (event) { return _this.questionFile.chooseFiles(event.nativeEvent); }, className: this.questionFile.getChooseButtonCss(), htmlFor: this.questionFile.inputId, "aria-label": this.questionFile.chooseButtonCaption },
+        return ((0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("label", { onClick: function (event) { return _this.questionFile.chooseFiles(event.nativeEvent); }, className: this.questionFile.getChooseButtonCss(), htmlFor: this.questionFile.inputId, "aria-label": this.questionFile.chooseButtonCaption },
             react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.questionFile.cssClasses.chooseButtonIcon, size: "auto", title: this.questionFile.chooseButtonCaption }))));
     };
     SurveyQuestionFileEditor.prototype.renderElement = function () {
@@ -3090,7 +3033,7 @@ var SurveyQuestionSpinEditor = /** @class */ (function (_super) {
     SurveyQuestionSpinEditor.prototype.renderInput = function () {
         var _this = this;
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("input", { id: this.question.inputId, disabled: this.isDisplayMode, className: this.question.cssClasses.control, ref: function (input) { return (_this.setControl(input)); }, placeholder: this.question.renderedPlaceholder, autoComplete: "off", onBlur: function (event) { return _this.question.onBlur(event.nativeEvent); }, onFocus: function (event) { return _this.question.onFocus(event.nativeEvent); }, onChange: this.question.onChange, onBeforeInput: function (event) { return _this.question.onBeforeInput(event.nativeEvent); }, onKeyUp: function (event) { return _this.question.onKeyUp(event.nativeEvent); }, onKeyDown: function (event) { return _this.question.onInputKeyDown(event.nativeEvent); }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy })));
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("input", { role: "spinbutton", id: this.question.inputId, disabled: this.isDisplayMode, className: this.question.cssClasses.control, ref: function (input) { return (_this.setControl(input)); }, placeholder: this.question.renderedPlaceholder, autoComplete: "off", onBlur: function (event) { return _this.question.onBlur(event.nativeEvent); }, onFocus: function (event) { return _this.question.onFocus(event.nativeEvent); }, onChange: this.question.onChange, onBeforeInput: function (event) { return _this.question.onBeforeInput(event.nativeEvent); }, onKeyUp: function (event) { return _this.question.onKeyUp(event.nativeEvent); }, onKeyDown: function (event) { return _this.question.onInputKeyDown(event.nativeEvent); }, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage })));
     };
     SurveyQuestionSpinEditor.prototype.renderElement = function () {
         var _this = this;
@@ -3104,9 +3047,9 @@ var SurveyQuestionSpinEditor = /** @class */ (function (_super) {
     SurveyQuestionSpinEditor.prototype.renderButtons = function () {
         var _this = this;
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: this.question.cssClasses.buttonsContainer },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("button", { tabIndex: -1, className: this.question.cssClasses.arrowButton, disabled: this.isDisplayMode, onClick: this.question.onDownButtonClick, onMouseDown: this.question.onDownButtonMouseDown, onMouseUp: this.question.onButtonMouseUp, onMouseLeave: this.question.onButtonMouseLeave, onBlur: function (event) { return _this.question.onBlur(event.nativeEvent); }, onFocus: function (event) { return _this.question.onFocus(event.nativeEvent); } },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("button", { tabIndex: -1, "aria-hidden": "true", className: this.question.cssClasses.arrowButton, disabled: this.isDisplayMode, onClick: this.question.onDownButtonClick, onMouseDown: this.question.onDownButtonMouseDown, onMouseUp: this.question.onButtonMouseUp, onMouseLeave: this.question.onButtonMouseLeave, onBlur: function (event) { return _this.question.onBlur(event.nativeEvent); }, onFocus: function (event) { return _this.question.onFocus(event.nativeEvent); } },
                 react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.question.cssClasses.decreaseButtonIcon, size: "auto" })),
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("button", { tabIndex: -1, className: this.question.cssClasses.arrowButton, disabled: this.isDisplayMode, onClick: this.question.onUpButtonClick, onMouseDown: this.question.onUpButtonMouseDown, onMouseUp: this.question.onButtonMouseUp, onMouseLeave: this.question.onButtonMouseLeave, onBlur: function (event) { return _this.question.onBlur(event.nativeEvent); }, onFocus: function (event) { return _this.question.onFocus(event.nativeEvent); } },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("button", { tabIndex: -1, "aria-hidden": "true", className: this.question.cssClasses.arrowButton, disabled: this.isDisplayMode, onClick: this.question.onUpButtonClick, onMouseDown: this.question.onUpButtonMouseDown, onMouseUp: this.question.onButtonMouseUp, onMouseLeave: this.question.onButtonMouseLeave, onBlur: function (event) { return _this.question.onBlur(event.nativeEvent); }, onFocus: function (event) { return _this.question.onFocus(event.nativeEvent); } },
                 react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.question.cssClasses.increaseButtonIcon, size: "auto" }))));
     };
     return SurveyQuestionSpinEditor;
@@ -3406,8 +3349,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _components_Search__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../components/Search */ "./src/components/Search.tsx");
-/* harmony import */ var _components_Scroll__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/Scroll */ "./src/components/Scroll.tsx");
-
 
 
 
@@ -3435,8 +3376,7 @@ var PropertyGridComponent = /** @class */ (function (_super) {
     PropertyGridComponent.prototype.renderElement = function () {
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.model.rootCss },
             react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_Search__WEBPACK_IMPORTED_MODULE_3__.SearchComponent, { model: this.model.searchManager }),
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_Scroll__WEBPACK_IMPORTED_MODULE_4__.ScrollComponent, null,
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Survey, { model: this.model.survey }))));
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Survey, { model: this.model.survey })));
     };
     return PropertyGridComponent;
 }(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
@@ -3805,8 +3745,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _TabButton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./TabButton */ "./src/side-bar/TabButton.tsx");
-/* harmony import */ var _components_Scroll__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/Scroll */ "./src/components/Scroll.tsx");
-
 
 
 
@@ -3831,7 +3769,7 @@ var TabControl = /** @class */ (function (_super) {
                     react__WEBPACK_IMPORTED_MODULE_1__.createElement(_TabButton__WEBPACK_IMPORTED_MODULE_3__.TabButtonComponent, { model: this.props.model.expandCollapseAction })),
                 react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar-tabs__separator" },
                     react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", null)),
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_Scroll__WEBPACK_IMPORTED_MODULE_4__.ScrollComponent, null,
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Scroll, null,
                     react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar-tabs__items" },
                         react__WEBPACK_IMPORTED_MODULE_1__.createElement(TabsComponent, { model: this.props.model.topToolbar })))),
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar-tabs__bottom-container" },
@@ -3877,8 +3815,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _PageNavigator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../PageNavigator */ "./src/PageNavigator.tsx");
 /* harmony import */ var _components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/SurfacePlaceholder */ "./src/components/SurfacePlaceholder.tsx");
-/* harmony import */ var _components_Scroll__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../components/Scroll */ "./src/components/Scroll.tsx");
-
 
 
 
@@ -3964,7 +3900,7 @@ var TabDesignerComponent = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-flex-column" }, this.model.isToolboxVisible ? survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.createElement("svc-toolbox", { model: this.creator }) : null),
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: designerTabClassName, onClick: function () { return _this.model.clickDesigner(); } },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_Scroll__WEBPACK_IMPORTED_MODULE_5__.ScrollComponent, null,
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Scroll, null,
                     react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-tab-designer_content" }, this.model.showPlaceholder ? this.renderPlaceHolder() : this.renderTabContent())))));
     };
     TabDesignerComponent.prototype.renderHeader = function (condition) {
@@ -4577,7 +4513,7 @@ var SurveyLogicOpertor = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { id: this.question.inputId, className: q.getControlClass(), tabIndex: this.question.isInputReadOnly ? undefined : 0, 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            disabled: this.question.isInputReadOnly, required: this.question.isRequired, onChange: this.updateValueOnEvent, onInput: this.updateValueOnEvent, onKeyUp: this.keyhandler, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy },
+            disabled: this.question.isInputReadOnly, required: this.question.isRequired, onChange: this.updateValueOnEvent, onInput: this.updateValueOnEvent, onKeyUp: this.keyhandler, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-labelledby": this.question.ariaLabelledBy, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, "aria-expanded": this.question.ariaExpanded },
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.question.cssClasses.controlValue },
                 text,
                 react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", null, q.readOnlyText)),
@@ -4761,9 +4697,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _ToolboxItem__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./ToolboxItem */ "./src/toolbox/ToolboxItem.tsx");
 /* harmony import */ var _components_Search__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../components/Search */ "./src/components/Search.tsx");
-/* harmony import */ var _components_Scroll__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../components/Scroll */ "./src/components/Scroll.tsx");
-/* harmony import */ var _ToolboxCategory__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./ToolboxCategory */ "./src/toolbox/ToolboxCategory.tsx");
-
+/* harmony import */ var _ToolboxCategory__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./ToolboxCategory */ "./src/toolbox/ToolboxCategory.tsx");
 
 
 
@@ -4818,7 +4752,7 @@ var AdaptiveToolbox = /** @class */ (function (_super) {
     AdaptiveToolbox.prototype.renderCategories = function () {
         var _this = this;
         return this.toolbox.categories.map(function (category, index) {
-            return react__WEBPACK_IMPORTED_MODULE_1__.createElement(_ToolboxCategory__WEBPACK_IMPORTED_MODULE_7__.SurveyCreatorToolboxCategory, { category: category, toolbox: _this.toolbox, key: "category" + index });
+            return react__WEBPACK_IMPORTED_MODULE_1__.createElement(_ToolboxCategory__WEBPACK_IMPORTED_MODULE_6__.SurveyCreatorToolboxCategory, { category: category, toolbox: _this.toolbox, key: "category" + index });
         });
     };
     AdaptiveToolbox.prototype.renderSearch = function () {
@@ -4841,7 +4775,7 @@ var AdaptiveToolbox = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { onBlur: function (e) { return _this.toolbox.focusOut(e); }, className: "svc-toolbox__panel" },
                 search,
                 placeholder,
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_Scroll__WEBPACK_IMPORTED_MODULE_6__.ScrollComponent, null, (this.toolbox.showInSingleCategory) ?
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.Scroll, null, (this.toolbox.showInSingleCategory) ?
                     (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__category" }, this.renderItems(this.toolbox.renderedActions, this.toolbox.isCompactRendered)))
                     : this.renderCategories()))));
     };
@@ -4926,11 +4860,9 @@ var SurveyCreatorToolboxCategory = /** @class */ (function (_super) {
     SurveyCreatorToolboxCategory.prototype.renderButton = function () {
         if (!this.toolbox.canCollapseCategories)
             return null;
-        var iconName = this.category.collapsed ? "arrow-down" : "arrow-up";
-        var suffixName = this.category.collapsed ? "expand" : "collapse";
-        var svgIconClassName = "svc-toolbox__category-header__button svc-string-editor__button--" + suffixName;
+        var iconName = this.category.iconName;
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__category-header__controls" },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: svgIconClassName, iconName: "icon-" + iconName, size: "auto" })));
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: this.category.iconClassName, iconName: iconName, size: "auto" })));
     };
     SurveyCreatorToolboxCategory.prototype.renderCategoryContent = function () {
         return this.renderItems(this.category.items);
@@ -5546,7 +5478,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_63__ = __webpack_require__(/*! survey-core */ "survey-core");
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_63___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_63__);
 var Version;
-Version = "".concat("2.0.2");
+Version = "".concat("2.0.4");
 // import "@survey/creator/survey-creator-core.css";
 
 
@@ -5618,7 +5550,7 @@ Version = "".concat("2.0.2");
 
 
 
-(0,survey_core__WEBPACK_IMPORTED_MODULE_63__.checkLibraryVersion)("".concat("2.0.2"), "survey-creator-react");
+(0,survey_core__WEBPACK_IMPORTED_MODULE_63__.checkLibraryVersion)("".concat("2.0.4"), "survey-creator-react");
 
 })();