survey-js-ui 2.3.8 → 2.3.10

package/survey-js-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v2.3.8
+ * surveyjs - Survey JavaScript library v2.3.10
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -23,7 +23,7 @@ return /******/ (() => { // webpackBootstrap
 /***/ (function(module) {
 
 /*!
- * surveyjs - Survey JavaScript library v2.3.8
+ * surveyjs - Survey JavaScript library v2.3.10
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -39,7 +39,7 @@ return /******/ (() => { // webpackBootstrap
 /*!************************************!*\
   !*** ./src/images-v1/ sync \.svg$ ***!
   \************************************/
-/***/ ((module, __unused_webpack_exports, __nested_webpack_require_869__) => {
+/***/ ((module, __unused_webpack_exports, __nested_webpack_require_870__) => {
 
 var map = {
 	"./ModernBooleanCheckChecked.svg": "./src/images-v1/ModernBooleanCheckChecked.svg",
@@ -108,10 +108,10 @@ var map = {
 
 function webpackContext(req) {
 	var id = webpackContextResolve(req);
-	return __nested_webpack_require_869__(id);
+	return __nested_webpack_require_870__(id);
 }
 function webpackContextResolve(req) {
-	if(!__nested_webpack_require_869__.o(map, req)) {
+	if(!__nested_webpack_require_870__.o(map, req)) {
 		var e = new Error("Cannot find module '" + req + "'");
 		e.code = 'MODULE_NOT_FOUND';
 		throw e;
@@ -743,7 +743,7 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 /******/ 	var __webpack_module_cache__ = {};
 /******/ 	
 /******/ 	// The require function
-/******/ 	function __nested_webpack_require_51423__(moduleId) {
+/******/ 	function __nested_webpack_require_51424__(moduleId) {
 /******/ 		// Check if module is in cache
 /******/ 		var cachedModule = __webpack_module_cache__[moduleId];
 /******/ 		if (cachedModule !== undefined) {
@@ -757,7 +757,7 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 /******/ 		};
 /******/ 	
 /******/ 		// Execute the module function
-/******/ 		__webpack_modules__[moduleId](module, module.exports, __nested_webpack_require_51423__);
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __nested_webpack_require_51424__);
 /******/ 	
 /******/ 		// Return the exports of the module
 /******/ 		return module.exports;
@@ -767,9 +767,9 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 /******/ 	/* webpack/runtime/define property getters */
 /******/ 	(() => {
 /******/ 		// define getter functions for harmony exports
-/******/ 		__nested_webpack_require_51423__.d = (exports, definition) => {
+/******/ 		__nested_webpack_require_51424__.d = (exports, definition) => {
 /******/ 			for(var key in definition) {
-/******/ 				if(__nested_webpack_require_51423__.o(definition, key) && !__nested_webpack_require_51423__.o(exports, key)) {
+/******/ 				if(__nested_webpack_require_51424__.o(definition, key) && !__nested_webpack_require_51424__.o(exports, key)) {
 /******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
 /******/ 				}
 /******/ 			}
@@ -778,13 +778,13 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 /******/ 	
 /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
 /******/ 	(() => {
-/******/ 		__nested_webpack_require_51423__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 		__nested_webpack_require_51424__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/make namespace object */
 /******/ 	(() => {
 /******/ 		// define __esModule on exports
-/******/ 		__nested_webpack_require_51423__.r = (exports) => {
+/******/ 		__nested_webpack_require_51424__.r = (exports) => {
 /******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 /******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 /******/ 			}
@@ -800,13 +800,13 @@ var __nested_webpack_exports__ = {};
 /*!************************!*\
   !*** ./src/iconsV1.ts ***!
   \************************/
-__nested_webpack_require_51423__.r(__nested_webpack_exports__);
-/* harmony export */ __nested_webpack_require_51423__.d(__nested_webpack_exports__, {
+__nested_webpack_require_51424__.r(__nested_webpack_exports__);
+/* harmony export */ __nested_webpack_require_51424__.d(__nested_webpack_exports__, {
 /* harmony export */   icons: () => (/* binding */ icons)
 /* harmony export */ });
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 //@ts-ignore
-var path = __nested_webpack_require_51423__("./src/images-v1 sync recursive \\.svg$");
+var path = __nested_webpack_require_51424__("./src/images-v1 sync recursive \\.svg$");
 var icons = {};
 path.keys().forEach(function (key) {
     icons[key.substring(2, key.length - 4).toLowerCase()] = path(key);
@@ -830,7 +830,7 @@ path.keys().forEach(function (key) {
 /***/ (function(module) {
 
 /*!
- * surveyjs - Survey JavaScript library v2.3.8
+ * surveyjs - Survey JavaScript library v2.3.10
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -846,7 +846,7 @@ return /******/ (() => { // webpackBootstrap
 /*!************************************!*\
   !*** ./src/images-v2/ sync \.svg$ ***!
   \************************************/
-/***/ ((module, __unused_webpack_exports, __nested_webpack_require_869__) => {
+/***/ ((module, __unused_webpack_exports, __nested_webpack_require_870__) => {
 
 var map = {
 	"./ModernBooleanCheckChecked.svg": "./src/images-v2/ModernBooleanCheckChecked.svg",
@@ -915,10 +915,10 @@ var map = {
 
 function webpackContext(req) {
 	var id = webpackContextResolve(req);
-	return __nested_webpack_require_869__(id);
+	return __nested_webpack_require_870__(id);
 }
 function webpackContextResolve(req) {
-	if(!__nested_webpack_require_869__.o(map, req)) {
+	if(!__nested_webpack_require_870__.o(map, req)) {
 		var e = new Error("Cannot find module '" + req + "'");
 		e.code = 'MODULE_NOT_FOUND';
 		throw e;
@@ -1550,7 +1550,7 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 /******/ 	var __webpack_module_cache__ = {};
 /******/ 	
 /******/ 	// The require function
-/******/ 	function __nested_webpack_require_64535__(moduleId) {
+/******/ 	function __nested_webpack_require_64536__(moduleId) {
 /******/ 		// Check if module is in cache
 /******/ 		var cachedModule = __webpack_module_cache__[moduleId];
 /******/ 		if (cachedModule !== undefined) {
@@ -1564,7 +1564,7 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 /******/ 		};
 /******/ 	
 /******/ 		// Execute the module function
-/******/ 		__webpack_modules__[moduleId](module, module.exports, __nested_webpack_require_64535__);
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __nested_webpack_require_64536__);
 /******/ 	
 /******/ 		// Return the exports of the module
 /******/ 		return module.exports;
@@ -1574,9 +1574,9 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 /******/ 	/* webpack/runtime/define property getters */
 /******/ 	(() => {
 /******/ 		// define getter functions for harmony exports
-/******/ 		__nested_webpack_require_64535__.d = (exports, definition) => {
+/******/ 		__nested_webpack_require_64536__.d = (exports, definition) => {
 /******/ 			for(var key in definition) {
-/******/ 				if(__nested_webpack_require_64535__.o(definition, key) && !__nested_webpack_require_64535__.o(exports, key)) {
+/******/ 				if(__nested_webpack_require_64536__.o(definition, key) && !__nested_webpack_require_64536__.o(exports, key)) {
 /******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
 /******/ 				}
 /******/ 			}
@@ -1585,13 +1585,13 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 /******/ 	
 /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
 /******/ 	(() => {
-/******/ 		__nested_webpack_require_64535__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 		__nested_webpack_require_64536__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/make namespace object */
 /******/ 	(() => {
 /******/ 		// define __esModule on exports
-/******/ 		__nested_webpack_require_64535__.r = (exports) => {
+/******/ 		__nested_webpack_require_64536__.r = (exports) => {
 /******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 /******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 /******/ 			}
@@ -1607,13 +1607,13 @@ var __nested_webpack_exports__ = {};
 /*!************************!*\
   !*** ./src/iconsV2.ts ***!
   \************************/
-__nested_webpack_require_64535__.r(__nested_webpack_exports__);
-/* harmony export */ __nested_webpack_require_64535__.d(__nested_webpack_exports__, {
+__nested_webpack_require_64536__.r(__nested_webpack_exports__);
+/* harmony export */ __nested_webpack_require_64536__.d(__nested_webpack_exports__, {
 /* harmony export */   icons: () => (/* binding */ icons)
 /* harmony export */ });
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 //@ts-ignore
-var path = __nested_webpack_require_64535__("./src/images-v2 sync recursive \\.svg$");
+var path = __nested_webpack_require_64536__("./src/images-v2 sync recursive \\.svg$");
 var icons = {};
 path.keys().forEach(function (key) {
     icons[key.substring(2, key.length - 4).toLowerCase()] = path(key);
@@ -3504,11 +3504,12 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 var ListItem = /** @class */ (function (_super) {
     __extends(ListItem, _super);
-    function ListItem() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function ListItem(props) {
+        var _this = _super.call(this, props) || this;
         _this.handleKeydown = function (event) {
             _this.model.onKeyDown(event);
         };
+        _this.elementRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();
         return _this;
     }
     Object.defineProperty(ListItem.prototype, "model", {
@@ -3535,7 +3536,7 @@ var ListItem = /** @class */ (function (_super) {
         var className = this.model.getItemClass(this.item);
         var itemContent = this.item.component || this.model.itemComponent;
         var newElement = _element_factory__WEBPACK_IMPORTED_MODULE_1__.ReactElementFactory.Instance.createElement(itemContent, { item: this.item, key: this.item.id, model: this.model });
-        var contentWrap = react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { style: this.model.getItemStyle(this.item), className: this.model.cssClasses.itemBody, title: this.item.getTooltip(), onMouseOver: function (event) { _this.model.onItemHover(_this.item); }, onMouseLeave: function (event) { _this.model.onItemLeave(_this.item); } }, newElement);
+        var contentWrap = react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { ref: this.elementRef, style: this.model.getItemStyle(this.item), className: this.model.cssClasses.itemBody, title: this.item.getTooltip(), onMouseOver: function (event) { _this.model.onItemHover(_this.item); }, onMouseLeave: function (event) { _this.model.onItemLeave(_this.item); } }, newElement);
         var separator = this.item.needSeparator ? react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.model.cssClasses.itemSeparator }) : null;
         var isVisible = this.model.isItemVisible(this.item);
         var style = {
@@ -3549,8 +3550,9 @@ var ListItem = /** @class */ (function (_super) {
             contentWrap), this.item);
     };
     ListItem.prototype.componentDidMount = function () {
+        var _a;
         _super.prototype.componentDidMount.call(this);
-        this.model.onLastItemRended(this.item);
+        this.model.onItemRended(this.item, (_a = this.elementRef) === null || _a === void 0 ? void 0 : _a.current);
     };
     return ListItem;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
@@ -5294,9 +5296,20 @@ var SliderLabelItem = /** @class */ (function (_super) {
     SliderLabelItem.prototype.renderElement = function () {
         var _a = this.question, cssClasses = _a.cssClasses, handleLabelPointerUp = _a.handleLabelPointerUp, getLabelCss = _a.getLabelCss, getPercent = _a.getPercent;
         var _b = this.item, value = _b.value, locText = _b.locText;
+        var labelText = null;
+        var labelTextSecondary = null;
+        if (this.item.showValue) {
+            labelText = react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.labelText }, this.item.value);
+            labelTextSecondary = react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.labelTextSecondaryMode }, this.renderLocString(locText));
+        }
+        else {
+            labelText = react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.labelText }, this.renderLocString(locText));
+        }
         return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { key: this.item.id, className: getLabelCss(locText), style: { left: getPercent(value) + "%" }, onPointerUp: function (e) { handleLabelPointerUp(e.nativeEvent, value); } },
             react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.labelTick }),
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.labelText }, this.renderLocString(locText)));
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.labelTextContainer },
+                labelText,
+                labelTextSecondary));
     };
     return SliderLabelItem;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
@@ -7113,6 +7126,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _panel_base__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./panel-base */ "../survey-react-ui/src/panel-base.tsx");
 /* harmony import */ var _components_title_title_element__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/title/title-element */ "../survey-react-ui/src/components/title/title-element.tsx");
 /* harmony import */ var _reactquestion__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./reactquestion */ "../survey-react-ui/src/reactquestion.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./element-factory */ "../survey-react-ui/src/element-factory.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -7133,6 +7147,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyPage = /** @class */ (function (_super) {
     __extends(SurveyPage, _super);
     function SurveyPage(props) {
@@ -7171,6 +7186,9 @@ var SurveyPage = /** @class */ (function (_super) {
     return SurveyPage;
 }(_panel_base__WEBPACK_IMPORTED_MODULE_2__.SurveyPanelBase));
 
+_element_factory__WEBPACK_IMPORTED_MODULE_5__.ReactElementFactory.Instance.registerElement("sv-page", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyPage, props);
+});
 
 
 /***/ }),
@@ -7979,21 +7997,20 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/preact/compat/dist/compat.module.js");
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-core */ "survey-core");
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _page__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./page */ "../survey-react-ui/src/page.tsx");
-/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactquestion_element */ "../survey-react-ui/src/reactquestion_element.tsx");
-/* harmony import */ var _components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/survey-header/survey-header */ "../survey-react-ui/src/components/survey-header/survey-header.tsx");
-/* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./reactquestion_factory */ "../survey-react-ui/src/reactquestion_factory.tsx");
-/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./element-factory */ "../survey-react-ui/src/element-factory.tsx");
-/* harmony import */ var _components_brand_info__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./components/brand-info */ "../survey-react-ui/src/components/brand-info.tsx");
-/* harmony import */ var _components_notifier__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./components/notifier */ "../survey-react-ui/src/components/notifier.tsx");
-/* harmony import */ var _components_components_container__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./components/components-container */ "../survey-react-ui/src/components/components-container.tsx");
-/* harmony import */ var _svgbundle__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./svgbundle */ "../survey-react-ui/src/svgbundle.tsx");
-/* harmony import */ var _components_popup_popup_modal__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./components/popup/popup-modal */ "../survey-react-ui/src/components/popup/popup-modal.tsx");
-/* harmony import */ var survey_core_icons_iconsV1__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! survey-core/icons/iconsV1 */ "../survey-core/build/icons/iconsV1.js");
-/* harmony import */ var survey_core_icons_iconsV1__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(survey_core_icons_iconsV1__WEBPACK_IMPORTED_MODULE_12__);
-/* harmony import */ var survey_core_icons_iconsV2__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! survey-core/icons/iconsV2 */ "../survey-core/build/icons/iconsV2.js");
-/* harmony import */ var survey_core_icons_iconsV2__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(survey_core_icons_iconsV2__WEBPACK_IMPORTED_MODULE_13__);
-/* harmony import */ var _components_scroll__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./components/scroll */ "../survey-react-ui/src/components/scroll.tsx");
+/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactquestion_element */ "../survey-react-ui/src/reactquestion_element.tsx");
+/* harmony import */ var _components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/survey-header/survey-header */ "../survey-react-ui/src/components/survey-header/survey-header.tsx");
+/* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./reactquestion_factory */ "../survey-react-ui/src/reactquestion_factory.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./element-factory */ "../survey-react-ui/src/element-factory.tsx");
+/* harmony import */ var _components_brand_info__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/brand-info */ "../survey-react-ui/src/components/brand-info.tsx");
+/* harmony import */ var _components_notifier__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./components/notifier */ "../survey-react-ui/src/components/notifier.tsx");
+/* harmony import */ var _components_components_container__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./components/components-container */ "../survey-react-ui/src/components/components-container.tsx");
+/* harmony import */ var _svgbundle__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./svgbundle */ "../survey-react-ui/src/svgbundle.tsx");
+/* harmony import */ var _components_popup_popup_modal__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/popup/popup-modal */ "../survey-react-ui/src/components/popup/popup-modal.tsx");
+/* harmony import */ var survey_core_icons_iconsV1__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! survey-core/icons/iconsV1 */ "../survey-core/build/icons/iconsV1.js");
+/* harmony import */ var survey_core_icons_iconsV1__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(survey_core_icons_iconsV1__WEBPACK_IMPORTED_MODULE_11__);
+/* harmony import */ var survey_core_icons_iconsV2__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! survey-core/icons/iconsV2 */ "../survey-core/build/icons/iconsV2.js");
+/* harmony import */ var survey_core_icons_iconsV2__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(survey_core_icons_iconsV2__WEBPACK_IMPORTED_MODULE_12__);
+/* harmony import */ var _components_scroll__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./components/scroll */ "../survey-react-ui/src/components/scroll.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -8034,10 +8051,9 @@ var __assign = (undefined && undefined.__assign) || function () {
 
 
 
-
-(0,survey_core__WEBPACK_IMPORTED_MODULE_1__.addIconsToThemeSet)("v1", survey_core_icons_iconsV1__WEBPACK_IMPORTED_MODULE_12__.icons);
-(0,survey_core__WEBPACK_IMPORTED_MODULE_1__.addIconsToThemeSet)("v2", survey_core_icons_iconsV2__WEBPACK_IMPORTED_MODULE_13__.icons);
-survey_core__WEBPACK_IMPORTED_MODULE_1__.SvgRegistry.registerIcons(survey_core_icons_iconsV2__WEBPACK_IMPORTED_MODULE_13__.icons);
+(0,survey_core__WEBPACK_IMPORTED_MODULE_1__.addIconsToThemeSet)("v1", survey_core_icons_iconsV1__WEBPACK_IMPORTED_MODULE_11__.icons);
+(0,survey_core__WEBPACK_IMPORTED_MODULE_1__.addIconsToThemeSet)("v2", survey_core_icons_iconsV2__WEBPACK_IMPORTED_MODULE_12__.icons);
+survey_core__WEBPACK_IMPORTED_MODULE_1__.SvgRegistry.registerIcons(survey_core_icons_iconsV2__WEBPACK_IMPORTED_MODULE_12__.icons);
 var Survey = /** @class */ (function (_super) {
     __extends(Survey, _super);
     function Survey(props) {
@@ -8116,7 +8132,7 @@ var Survey = /** @class */ (function (_super) {
             renderResult = this.renderSurvey();
         }
         var backgroundImage = !!this.survey.backgroundImage ? react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.css.rootBackgroundImage, style: this.survey.backgroundImageStyle }) : null;
-        var header = this.survey.headerView === "basic" ? react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_4__.SurveyHeader, { survey: this.survey }) : null;
+        var header = this.survey.headerView === "basic" ? react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_3__.SurveyHeader, { survey: this.survey }) : null;
         var onSubmit = function (event) {
             event.preventDefault();
         };
@@ -8127,20 +8143,20 @@ 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, lang: this.survey.locale || "en", dir: this.survey.localeDir },
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_scroll__WEBPACK_IMPORTED_MODULE_14__.Scroll, { disabled: this.survey.rootScrollDisabled },
-                this.survey.needRenderIcons ? react__WEBPACK_IMPORTED_MODULE_0__.createElement(_svgbundle__WEBPACK_IMPORTED_MODULE_10__.SvgBundleComponent, null) : null,
-                react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_popup_popup_modal__WEBPACK_IMPORTED_MODULE_11__.PopupModal, null),
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_scroll__WEBPACK_IMPORTED_MODULE_13__.Scroll, { disabled: this.survey.rootScrollDisabled },
+                this.survey.needRenderIcons ? react__WEBPACK_IMPORTED_MODULE_0__.createElement(_svgbundle__WEBPACK_IMPORTED_MODULE_9__.SvgBundleComponent, null) : null,
+                react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_popup_popup_modal__WEBPACK_IMPORTED_MODULE_10__.PopupModal, null),
                 react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.survey.wrapperFormCss },
                     backgroundImage,
                     react__WEBPACK_IMPORTED_MODULE_0__.createElement("form", { onSubmit: onSubmit },
-                        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_scroll__WEBPACK_IMPORTED_MODULE_14__.Scroll, { disabled: this.survey.formScrollDisabled },
+                        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_scroll__WEBPACK_IMPORTED_MODULE_13__.Scroll, { disabled: this.survey.formScrollDisabled },
                             customHeader,
                             react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.css.container },
                                 header,
-                                react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_components_container__WEBPACK_IMPORTED_MODULE_9__.ComponentsContainer, { survey: this.survey, container: "header", needRenderWrapper: false }),
+                                react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_components_container__WEBPACK_IMPORTED_MODULE_8__.ComponentsContainer, { survey: this.survey, container: "header", needRenderWrapper: false }),
                                 renderResult,
-                                react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_components_container__WEBPACK_IMPORTED_MODULE_9__.ComponentsContainer, { survey: this.survey, container: "footer", needRenderWrapper: false })))),
-                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_notifier__WEBPACK_IMPORTED_MODULE_8__.NotifierComponent, { notifier: this.survey.notifier })))));
+                                react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_components_container__WEBPACK_IMPORTED_MODULE_8__.ComponentsContainer, { survey: this.survey, container: "footer", needRenderWrapper: false })))),
+                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_notifier__WEBPACK_IMPORTED_MODULE_7__.NotifierComponent, { notifier: this.survey.notifier })))));
     };
     Survey.prototype.renderElement = function () {
         return this.doRender();
@@ -8161,7 +8177,7 @@ var Survey = /** @class */ (function (_super) {
         var htmlValue = { __html: this.survey.processedCompletedHtml };
         return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,
             react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { dangerouslySetInnerHTML: htmlValue, className: this.survey.completedCss }),
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_components_container__WEBPACK_IMPORTED_MODULE_9__.ComponentsContainer, { survey: this.survey, container: "completePage", needRenderWrapper: false })));
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_components_container__WEBPACK_IMPORTED_MODULE_8__.ComponentsContainer, { survey: this.survey, container: "completePage", needRenderWrapper: false })));
     };
     Survey.prototype.renderCompletedBefore = function () {
         var htmlValue = { __html: this.survey.processedCompletedBeforeHtml };
@@ -8183,18 +8199,23 @@ var Survey = /** @class */ (function (_super) {
             style.maxWidth = this.survey.renderedWidth;
         }
         return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.survey.bodyContainerCss },
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_components_container__WEBPACK_IMPORTED_MODULE_9__.ComponentsContainer, { survey: this.survey, container: "left" }),
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_components_container__WEBPACK_IMPORTED_MODULE_8__.ComponentsContainer, { survey: this.survey, container: "left" }),
             react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: "sv-components-column sv-components-column--expandable" },
-                react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_components_container__WEBPACK_IMPORTED_MODULE_9__.ComponentsContainer, { survey: this.survey, container: "center" }),
+                react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_components_container__WEBPACK_IMPORTED_MODULE_8__.ComponentsContainer, { survey: this.survey, container: "center" }),
                 react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { id: pageId, className: className, style: style },
-                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_components_container__WEBPACK_IMPORTED_MODULE_9__.ComponentsContainer, { survey: this.survey, container: "contentTop" }),
+                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_components_container__WEBPACK_IMPORTED_MODULE_8__.ComponentsContainer, { survey: this.survey, container: "contentTop" }),
                     activePage,
-                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_components_container__WEBPACK_IMPORTED_MODULE_9__.ComponentsContainer, { survey: this.survey, container: "contentBottom" }),
-                    this.survey.showBrandInfo ? react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_brand_info__WEBPACK_IMPORTED_MODULE_7__.BrandInfo, null) : null)),
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_components_container__WEBPACK_IMPORTED_MODULE_9__.ComponentsContainer, { survey: this.survey, container: "right" })));
+                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_components_container__WEBPACK_IMPORTED_MODULE_8__.ComponentsContainer, { survey: this.survey, container: "contentBottom" }),
+                    this.survey.showBrandInfo ? react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_brand_info__WEBPACK_IMPORTED_MODULE_6__.BrandInfo, null) : null)),
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_components_container__WEBPACK_IMPORTED_MODULE_8__.ComponentsContainer, { survey: this.survey, container: "right" })));
     };
     Survey.prototype.renderPage = function (page) {
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_page__WEBPACK_IMPORTED_MODULE_2__.SurveyPage, { survey: this.survey, page: page, css: this.css, creator: this }));
+        return _element_factory__WEBPACK_IMPORTED_MODULE_5__.ReactElementFactory.Instance.createElement(this.survey.pageComponent || "sv-page", {
+            survey: this.survey,
+            page: page,
+            css: this.css,
+            creator: this,
+        });
     };
     Survey.prototype.renderEmptySurvey = function () {
         return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.css.bodyEmpty }, this.survey.emptySurveyText);
@@ -8271,14 +8292,14 @@ var Survey = /** @class */ (function (_super) {
     };
     //ISurveyCreator
     Survey.prototype.createQuestionElement = function (question) {
-        return _reactquestion_factory__WEBPACK_IMPORTED_MODULE_5__.ReactQuestionFactory.Instance.createQuestion(question.isDefaultRendering() ? question.getTemplate() : question.getComponentName(), {
+        return _reactquestion_factory__WEBPACK_IMPORTED_MODULE_4__.ReactQuestionFactory.Instance.createQuestion(question.isDefaultRendering() ? question.getTemplate() : question.getComponentName(), {
             question: question,
             isDisplayMode: question.isInputReadOnly,
             creator: this,
         });
     };
     Survey.prototype.renderError = function (key, error, cssClasses, element) {
-        return _element_factory__WEBPACK_IMPORTED_MODULE_6__.ReactElementFactory.Instance.createElement(this.survey.questionErrorComponent, { key: key, error: error, cssClasses: cssClasses, element: element });
+        return _element_factory__WEBPACK_IMPORTED_MODULE_5__.ReactElementFactory.Instance.createElement(this.survey.questionErrorComponent, { key: key, error: error, cssClasses: cssClasses, element: element });
     };
     Survey.prototype.questionTitleLocation = function () {
         return this.survey.questionTitleLocation;
@@ -8287,9 +8308,9 @@ var Survey = /** @class */ (function (_super) {
         return this.survey.questionErrorLocation;
     };
     return Survey;
-}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
 
-_element_factory__WEBPACK_IMPORTED_MODULE_6__.ReactElementFactory.Instance.registerElement("survey", function (props) {
+_element_factory__WEBPACK_IMPORTED_MODULE_5__.ReactElementFactory.Instance.registerElement("survey", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0__.createElement(Survey, props);
 });
 function attachKey2click(element, viewModel, options) {
@@ -8521,7 +8542,7 @@ var SurveyQuestion = /** @class */ (function (_super) {
         var descriptionUnderInput = question.hasDescriptionUnderInput
             ? this.renderDescription()
             : null;
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: question.cssContent || undefined, style: contentStyle, "aria-hidden": question.contentAriaHidden, role: "presentation" },
+        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: question.cssContent || undefined, style: contentStyle, "aria-hidden": question.contentAriaHidden, role: "presentation", "data-sv-drop-target-matrix": this.question.dragDropMatrixAttribute, "data-sv-drop-target-matrix-row": this.question.dragDropMatrixAttribute },
             questionRender,
             comment,
             descriptionUnderInput));
@@ -8963,11 +8984,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   SurveyQuestionCheckboxItem: () => (/* binding */ SurveyQuestionCheckboxItem)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/preact/compat/dist/compat.module.js");
-/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactquestion_element */ "../survey-react-ui/src/reactquestion_element.tsx");
-/* harmony import */ var _reactquestion_comment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactquestion_comment */ "../survey-react-ui/src/reactquestion_comment.tsx");
-/* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactquestion_factory */ "../survey-react-ui/src/reactquestion_factory.tsx");
-/* harmony import */ var _reactsurveymodel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./reactsurveymodel */ "../survey-react-ui/src/reactsurveymodel.tsx");
-/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./element-factory */ "../survey-react-ui/src/element-factory.tsx");
+/* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactquestion_factory */ "../survey-react-ui/src/reactquestion_factory.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./element-factory */ "../survey-react-ui/src/element-factory.tsx");
+/* harmony import */ var _reactquestion_selectbase__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactquestion_selectbase */ "../survey-react-ui/src/reactquestion_selectbase.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -8987,8 +9006,6 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
-
-
 var SurveyQuestionCheckbox = /** @class */ (function (_super) {
     __extends(SurveyQuestionCheckbox, _super);
     function SurveyQuestionCheckbox(props) {
@@ -9001,16 +9018,10 @@ var SurveyQuestionCheckbox = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    SurveyQuestionCheckbox.prototype.renderElement = function () {
-        var _this = this;
-        var cssClasses = this.question.cssClasses;
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("fieldset", { className: this.question.getSelectBaseRootCss(), ref: function (fieldset) { return (_this.setControl(fieldset)); }, role: this.question.a11y_input_ariaRole, "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 },
+    SurveyQuestionCheckbox.prototype.renderHeader = function () {
+        return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,
             react__WEBPACK_IMPORTED_MODULE_0__.createElement("legend", { className: "sv-hidden" }, this.question.locTitle.renderedHtml),
-            this.getHeader(),
-            this.question.hasColumns
-                ? this.getColumnedBody(cssClasses)
-                : this.getBody(cssClasses),
-            this.getFooter()));
+            this.getHeader());
     };
     SurveyQuestionCheckbox.prototype.getHeader = function () {
         var _this = this;
@@ -9019,163 +9030,22 @@ var SurveyQuestionCheckbox = /** @class */ (function (_super) {
                 return _this.renderItem(item, false, _this.question.cssClasses);
             });
         }
-    };
-    SurveyQuestionCheckbox.prototype.getFooter = function () {
-        var _this = this;
-        if (this.question.hasFootItems) {
-            return this.question.footItems.map(function (item, ii) {
-                return _this.renderItem(item, false, _this.question.cssClasses);
-            });
-        }
-    };
-    SurveyQuestionCheckbox.prototype.getColumnedBody = function (cssClasses) {
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.rootMultiColumn }, this.getColumns(cssClasses)));
-    };
-    SurveyQuestionCheckbox.prototype.getColumns = function (cssClasses) {
-        var _this = this;
-        return this.question.columns.map(function (column, ci) {
-            var items = column.map(function (item, ii) {
-                return _this.renderItem(item, ci === 0 && ii === 0, cssClasses, "" + ci + ii);
-            });
-            return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { key: "column" + ci + _this.question.getItemsColumnKey(column), className: _this.question.getColumnClass(), role: "presentation" }, items));
-        });
-    };
-    SurveyQuestionCheckbox.prototype.getBody = function (cssClasses) {
-        if (this.question.blockedRow) {
-            return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.rootRow }, this.getItems(cssClasses, this.question.dataChoices));
-        }
-        else {
-            return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, this.getItems(cssClasses, this.question.bodyItems));
-        }
-    };
-    SurveyQuestionCheckbox.prototype.getItems = function (cssClasses, choices) {
-        var renderedItems = [];
-        for (var i = 0; i < choices.length; i++) {
-            var item = choices[i];
-            var renderedItem = this.renderItem(item, i == 0, cssClasses, "" + i);
-            if (!!renderedItem) {
-                renderedItems.push(renderedItem);
-            }
-        }
-        return renderedItems;
-    };
-    Object.defineProperty(SurveyQuestionCheckbox.prototype, "textStyle", {
-        get: function () {
-            return null;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SurveyQuestionCheckbox.prototype.renderItem = function (item, isFirst, cssClasses, index) {
-        var renderedItem = _element_factory__WEBPACK_IMPORTED_MODULE_5__.ReactElementFactory.Instance.createElement(this.question.itemComponent, {
-            key: item.value,
-            question: this.question,
-            cssClasses: cssClasses,
-            isDisplayMode: this.isDisplayMode,
-            item: item,
-            textStyle: this.textStyle,
-            index: index,
-            isFirst: isFirst,
-        });
-        var survey = this.question.survey;
-        var wrappedItem = null;
-        if (!!survey && !!renderedItem) {
-            wrappedItem = _reactsurveymodel__WEBPACK_IMPORTED_MODULE_4__.ReactSurveyElementsWrapper.wrapItemValue(survey, renderedItem, this.question, item);
-        }
-        return wrappedItem !== null && wrappedItem !== void 0 ? wrappedItem : renderedItem;
+        return null;
     };
     return SurveyQuestionCheckbox;
-}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__.SurveyQuestionElementBase));
+}(_reactquestion_selectbase__WEBPACK_IMPORTED_MODULE_3__.SurveyQuestionSelectbase));
 
 var SurveyQuestionCheckboxItem = /** @class */ (function (_super) {
     __extends(SurveyQuestionCheckboxItem, _super);
     function SurveyQuestionCheckboxItem(props) {
-        var _this = _super.call(this, props) || this;
-        _this.handleOnChange = function (event) {
-            _this.question.clickItemHandler(_this.item, event.target.checked);
-        };
-        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();
-        return _this;
+        return _super.call(this, props) || this;
     }
-    SurveyQuestionCheckboxItem.prototype.getStateElement = function () {
-        return this.item;
-    };
-    Object.defineProperty(SurveyQuestionCheckboxItem.prototype, "question", {
-        get: function () {
-            return this.props.question;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SurveyQuestionCheckboxItem.prototype, "item", {
-        get: function () {
-            return this.props.item;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SurveyQuestionCheckboxItem.prototype, "textStyle", {
-        get: function () {
-            return this.props.textStyle;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SurveyQuestionCheckboxItem.prototype, "isFirst", {
-        get: function () {
-            return this.props.isFirst;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SurveyQuestionCheckboxItem.prototype, "index", {
-        get: function () {
-            return this.props.index;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SurveyQuestionCheckboxItem.prototype, "hideCaption", {
-        get: function () {
-            return this.props.hideCaption === true;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SurveyQuestionCheckboxItem.prototype, "ariaLabel", {
-        get: function () {
-            return this.props.ariaLabel || null;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SurveyQuestionCheckboxItem.prototype.componentDidUpdate = function (prevProps, prevState) {
-        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
-        if (prevProps.item !== this.props.item && !this.question.isDesignMode) {
-            if (this.props.item) {
-                this.props.item.setRootElement(this.rootRef.current);
-            }
-            if (prevProps.item) {
-                prevProps.item.setRootElement(undefined);
-            }
-        }
-    };
-    SurveyQuestionCheckboxItem.prototype.shouldComponentUpdate = function (nextProps, nextState) {
-        if (!_super.prototype.shouldComponentUpdate.call(this, nextProps, nextState))
-            return false;
-        return (!this.question.customWidget ||
-            !!this.question.customWidgetData.isNeedRender ||
-            !!this.question.customWidget.widgetJson.isDefaultRender ||
-            !!this.question.customWidget.widgetJson.render);
-    };
-    SurveyQuestionCheckboxItem.prototype.canRender = function () {
-        return !!this.item && !!this.question;
+    SurveyQuestionCheckboxItem.prototype.doOnItemChange = function (event) {
+        this.question.clickItemHandler(this.item, event.target.checked);
     };
-    SurveyQuestionCheckboxItem.prototype.renderElement = function () {
+    SurveyQuestionCheckboxItem.prototype.renderElementContent = function () {
         var isChecked = this.question.isItemSelected(this.item);
-        return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,
-            this.renderCheckbox(isChecked, null),
-            this.renderComment());
+        return this.renderCheckbox(isChecked);
     };
     Object.defineProperty(SurveyQuestionCheckboxItem.prototype, "inputStyle", {
         get: function () {
@@ -9184,13 +9054,7 @@ var SurveyQuestionCheckboxItem = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    SurveyQuestionCheckboxItem.prototype.renderComment = function () {
-        if (!this.item.isCommentShowing)
-            return null;
-        return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.getCommentAreaCss(true) },
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_reactquestion_comment__WEBPACK_IMPORTED_MODULE_2__.SurveyQuestionCommentValueItem, { question: this.question, item: this.item, cssClasses: this.question.cssClasses }));
-    };
-    SurveyQuestionCheckboxItem.prototype.renderCheckbox = function (isChecked, otherItem) {
+    SurveyQuestionCheckboxItem.prototype.renderCheckbox = function (isChecked) {
         var id = this.question.getItemId(this.item);
         var itemClass = this.question.getItemClass(this.item);
         var labelClass = this.question.getLabelClass(this.item);
@@ -9204,28 +9068,15 @@ var SurveyQuestionCheckboxItem = /** @class */ (function (_super) {
                             react__WEBPACK_IMPORTED_MODULE_0__.createElement("use", { xlinkHref: this.question.itemSvgIcon })) :
                         null) :
                     null,
-                itemLabel),
-            otherItem));
-    };
-    SurveyQuestionCheckboxItem.prototype.componentDidMount = function () {
-        _super.prototype.componentDidMount.call(this);
-        if (!this.question.isDesignMode) {
-            this.item.setRootElement(this.rootRef.current);
-        }
-    };
-    SurveyQuestionCheckboxItem.prototype.componentWillUnmount = function () {
-        _super.prototype.componentWillUnmount.call(this);
-        if (!this.question.isDesignMode) {
-            this.item.setRootElement(undefined);
-        }
+                itemLabel)));
     };
     return SurveyQuestionCheckboxItem;
-}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__.ReactSurveyElement));
+}(_reactquestion_selectbase__WEBPACK_IMPORTED_MODULE_3__.SurveyQuestionSelectBaseItem));
 
-_element_factory__WEBPACK_IMPORTED_MODULE_5__.ReactElementFactory.Instance.registerElement("survey-checkbox-item", function (props) {
+_element_factory__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("survey-checkbox-item", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionCheckboxItem, props);
 });
-_reactquestion_factory__WEBPACK_IMPORTED_MODULE_3__.ReactQuestionFactory.Instance.registerQuestion("checkbox", function (props) {
+_reactquestion_factory__WEBPACK_IMPORTED_MODULE_1__.ReactQuestionFactory.Instance.registerQuestion("checkbox", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionCheckbox, props);
 });
 
@@ -10797,7 +10648,7 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
     };
     SurveyQuestionMatrixDropdownBase.prototype.renderTableDiv = function () {
         var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.cssClasses.tableWrapper, "data-sv-drop-target-matrix-row": this.question.renderedTable.wrapperDropTargetId, ref: function (root) { return (_this.setControl(root)); } },
+        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.cssClasses.tableWrapper, ref: function (root) { return (_this.setControl(root)); } },
             react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionMatrixTable, { question: this.question, creator: this.creator, wrapCell: function (cell, element, reason) { return _this.wrapCell(cell, element, reason); } })));
     };
     return SurveyQuestionMatrixDropdownBase;
@@ -11109,7 +10960,8 @@ var SurveyQuestionMatrixDynamicAddButton = /** @class */ (function (_super) {
         var addRowText = this.renderLocString(this.matrix.locAddRowText);
         var addButton = (react__WEBPACK_IMPORTED_MODULE_0__.createElement("button", { className: this.matrix.getAddRowButtonCss(this.props.isEmptySection), type: "button", disabled: this.matrix.isInputReadOnly, onClick: this.matrix.isDesignMode ? undefined : this.handleOnRowAddClick },
             addRowText,
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", { className: this.props.cssClasses.iconAdd })));
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", { className: this.props.cssClasses.iconAdd }, this.cssClasses.iconAddId && react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", null,
+                react__WEBPACK_IMPORTED_MODULE_0__.createElement("use", { xlinkHref: this.cssClasses.iconAddId })))));
         return (this.props.isEmptySection ? addButton : react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.props.cssClasses.footer }, addButton));
     };
     return SurveyQuestionMatrixDynamicAddButton;
@@ -11507,11 +11359,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   SurveyQuestionRadiogroup: () => (/* binding */ SurveyQuestionRadiogroup)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/preact/compat/dist/compat.module.js");
-/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactquestion_element */ "../survey-react-ui/src/reactquestion_element.tsx");
-/* harmony import */ var _reactquestion_comment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactquestion_comment */ "../survey-react-ui/src/reactquestion_comment.tsx");
-/* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactquestion_factory */ "../survey-react-ui/src/reactquestion_factory.tsx");
-/* harmony import */ var _reactsurveymodel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./reactsurveymodel */ "../survey-react-ui/src/reactsurveymodel.tsx");
-/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./element-factory */ "../survey-react-ui/src/element-factory.tsx");
+/* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactquestion_factory */ "../survey-react-ui/src/reactquestion_factory.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./element-factory */ "../survey-react-ui/src/element-factory.tsx");
+/* harmony import */ var _reactquestion_selectbase__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactquestion_selectbase */ "../survey-react-ui/src/reactquestion_selectbase.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -11531,8 +11381,6 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
-
-
 var SurveyQuestionRadiogroup = /** @class */ (function (_super) {
     __extends(SurveyQuestionRadiogroup, _super);
     function SurveyQuestionRadiogroup(props) {
@@ -11545,97 +11393,29 @@ var SurveyQuestionRadiogroup = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    SurveyQuestionRadiogroup.prototype.renderElement = function () {
-        var _this = this;
-        var cssClasses = this.question.cssClasses;
-        var clearButton = null;
-        if (this.question.showClearButtonInContent) {
-            clearButton = (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", null,
-                react__WEBPACK_IMPORTED_MODULE_0__.createElement("input", { type: "button", className: this.question.cssClasses.clearButton, onClick: function () { return _this.question.clearValue(true); }, value: this.question.clearButtonCaption })));
-        }
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("fieldset", { className: this.question.getSelectBaseRootCss(), ref: function (fieldset) { return (_this.setControl(fieldset)); }, role: this.question.a11y_input_ariaRole, "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 },
-            this.question.hasColumns
-                ? this.getColumnedBody(cssClasses)
-                : this.getBody(cssClasses),
-            this.getFooter(),
-            clearButton));
-    };
     SurveyQuestionRadiogroup.prototype.getFooter = function () {
-        var _this = this;
-        if (this.question.hasFootItems) {
-            return this.question.footItems.map(function (item, ii) {
-                return _this.renderItem(item, false, _this.question.cssClasses);
-            });
-        }
-    };
-    SurveyQuestionRadiogroup.prototype.getColumnedBody = function (cssClasses) {
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.rootMultiColumn }, this.getColumns(cssClasses)));
+        return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,
+            _super.prototype.getFooter.call(this),
+            this.renderClearButton());
     };
-    SurveyQuestionRadiogroup.prototype.getColumns = function (cssClasses) {
+    SurveyQuestionRadiogroup.prototype.renderClearButton = function () {
         var _this = this;
-        var value = this.getStateValue();
-        return this.question.columns.map(function (column, ci) {
-            var items = column.map(function (item, ii) {
-                return _this.renderItem(item, value, cssClasses, "" + ci + ii);
-            });
-            return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { key: "column" + ci + _this.question.getItemsColumnKey(column), className: _this.question.getColumnClass(), role: "presentation" }, items));
-        });
-    };
-    SurveyQuestionRadiogroup.prototype.getBody = function (cssClasses) {
-        if (this.question.blockedRow) {
-            return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.rootRow }, this.getItems(cssClasses, this.question.dataChoices));
-        }
-        else {
-            return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, this.getItems(cssClasses, this.question.bodyItems));
-        }
-    };
-    SurveyQuestionRadiogroup.prototype.getItems = function (cssClasses, choices) {
-        var items = [];
-        var value = this.getStateValue();
-        for (var i = 0; i < choices.length; i++) {
-            var item = choices[i];
-            var renderedItem = this.renderItem(item, value, cssClasses, "" + i);
-            items.push(renderedItem);
-        }
-        return items;
-    };
-    Object.defineProperty(SurveyQuestionRadiogroup.prototype, "textStyle", {
-        get: function () {
-            return null; //{ display: "inline", position: "static" };
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SurveyQuestionRadiogroup.prototype.renderItem = function (item, value, cssClasses, index) {
-        var renderedItem = _element_factory__WEBPACK_IMPORTED_MODULE_5__.ReactElementFactory.Instance.createElement(this.question.itemComponent, {
-            key: item.value,
-            question: this.question,
-            cssClasses: cssClasses,
-            isDisplayMode: this.isDisplayMode,
-            item: item,
-            textStyle: this.textStyle,
-            index: index,
-            isChecked: value === item.value,
-        });
-        var survey = this.question.survey;
-        var wrappedItem = null;
-        if (!!survey) {
-            wrappedItem = _reactsurveymodel__WEBPACK_IMPORTED_MODULE_4__.ReactSurveyElementsWrapper.wrapItemValue(survey, renderedItem, this.question, item);
-        }
-        return wrappedItem !== null && wrappedItem !== void 0 ? wrappedItem : renderedItem;
+        if (!this.question.showClearButtonInContent)
+            return null;
+        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", null,
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement("input", { type: "button", className: this.question.cssClasses.clearButton, onClick: function () { return _this.question.clearValueFromUI(); }, value: this.question.clearButtonCaption })));
     };
     SurveyQuestionRadiogroup.prototype.getStateValue = function () {
         return !this.question.isEmpty() ? this.question.renderedValue : "";
     };
+    SurveyQuestionRadiogroup.prototype.isItemChecked = function (item, value) { return item.value === value; };
     return SurveyQuestionRadiogroup;
-}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__.SurveyQuestionElementBase));
+}(_reactquestion_selectbase__WEBPACK_IMPORTED_MODULE_3__.SurveyQuestionSelectbase));
 
 var SurveyQuestionRadioItem = /** @class */ (function (_super) {
     __extends(SurveyQuestionRadioItem, _super);
     function SurveyQuestionRadioItem(props) {
         var _this = _super.call(this, props) || this;
-        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();
-        _this.handleOnChange = _this.handleOnChange.bind(_this);
         _this.handleOnMouseDown = _this.handleOnMouseDown.bind(_this);
         return _this;
     }
@@ -11649,88 +11429,21 @@ var SurveyQuestionRadioItem = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(SurveyQuestionRadioItem.prototype, "item", {
-        get: function () {
-            return this.props.item;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SurveyQuestionRadioItem.prototype, "textStyle", {
+    Object.defineProperty(SurveyQuestionRadioItem.prototype, "isChecked", {
         get: function () {
-            return this.props.textStyle;
+            return this.props.isChecked;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(SurveyQuestionRadioItem.prototype, "index", {
-        get: function () {
-            return this.props.index;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SurveyQuestionRadioItem.prototype, "isChecked", {
-        get: function () {
-            return this.props.isChecked;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SurveyQuestionRadioItem.prototype, "hideCaption", {
-        get: function () {
-            return this.props.hideCaption === true;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SurveyQuestionRadioItem.prototype, "ariaLabel", {
-        get: function () {
-            return this.props.ariaLabel || null;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    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 ||
-            !!this.question.customWidget.widgetJson.render);
-    };
-    SurveyQuestionRadioItem.prototype.handleOnChange = function (event) {
+    SurveyQuestionRadioItem.prototype.doOnItemChange = function (event) {
         this.question.clickItemHandler(this.item);
     };
     SurveyQuestionRadioItem.prototype.handleOnMouseDown = function (event) {
         this.question.onMouseDown();
     };
-    SurveyQuestionRadioItem.prototype.canRender = function () {
-        return !!this.question && !!this.item;
-    };
-    SurveyQuestionRadioItem.prototype.componentDidUpdate = function (prevProps, prevState) {
-        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
-        if (prevProps.item !== this.props.item && !this.question.isDesignMode) {
-            if (this.props.item) {
-                this.props.item.setRootElement(this.rootRef.current);
-            }
-            if (prevProps.item) {
-                prevProps.item.setRootElement(undefined);
-            }
-        }
-    };
-    SurveyQuestionRadioItem.prototype.renderElement = function () {
-        return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,
-            this.renderRadioButton(),
-            this.renderComment());
-    };
-    SurveyQuestionRadioItem.prototype.renderComment = function () {
-        if (!this.item.isCommentShowing)
-            return null;
-        return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.getCommentAreaCss(true) },
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_reactquestion_comment__WEBPACK_IMPORTED_MODULE_2__.SurveyQuestionCommentValueItem, { question: this.question, item: this.item, cssClasses: this.question.cssClasses }));
+    SurveyQuestionRadioItem.prototype.renderElementContent = function () {
+        return this.renderRadioButton();
     };
     SurveyQuestionRadioItem.prototype.renderRadioButton = function () {
         var itemClass = this.question.getItemClass(this.item);
@@ -11748,25 +11461,13 @@ var SurveyQuestionRadioItem = /** @class */ (function (_super) {
                     null,
                 itemLabel)));
     };
-    SurveyQuestionRadioItem.prototype.componentDidMount = function () {
-        _super.prototype.componentDidMount.call(this);
-        if (!this.question.isDesignMode) {
-            this.item.setRootElement(this.rootRef.current);
-        }
-    };
-    SurveyQuestionRadioItem.prototype.componentWillUnmount = function () {
-        _super.prototype.componentWillUnmount.call(this);
-        if (!this.question.isDesignMode) {
-            this.item.setRootElement(undefined);
-        }
-    };
     return SurveyQuestionRadioItem;
-}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__.ReactSurveyElement));
+}(_reactquestion_selectbase__WEBPACK_IMPORTED_MODULE_3__.SurveyQuestionSelectBaseItem));
 
-_element_factory__WEBPACK_IMPORTED_MODULE_5__.ReactElementFactory.Instance.registerElement("survey-radiogroup-item", function (props) {
+_element_factory__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("survey-radiogroup-item", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionRadioItem, props);
 });
-_reactquestion_factory__WEBPACK_IMPORTED_MODULE_3__.ReactQuestionFactory.Instance.registerQuestion("radiogroup", function (props) {
+_reactquestion_factory__WEBPACK_IMPORTED_MODULE_1__.ReactQuestionFactory.Instance.registerQuestion("radiogroup", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionRadiogroup, props);
 });
 
@@ -12119,6 +11820,276 @@ _reactquestion_factory__WEBPACK_IMPORTED_MODULE_2__.ReactQuestionFactory.Instanc
 });
 
 
+/***/ }),
+
+/***/ "../survey-react-ui/src/reactquestion_selectbase.tsx":
+/*!***********************************************************!*\
+  !*** ../survey-react-ui/src/reactquestion_selectbase.tsx ***!
+  \***********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   SurveyQuestionSelectBaseItem: () => (/* binding */ SurveyQuestionSelectBaseItem),
+/* harmony export */   SurveyQuestionSelectbase: () => (/* binding */ SurveyQuestionSelectbase)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/preact/compat/dist/compat.module.js");
+/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactquestion_element */ "../survey-react-ui/src/reactquestion_element.tsx");
+/* harmony import */ var _reactquestion_comment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactquestion_comment */ "../survey-react-ui/src/reactquestion_comment.tsx");
+/* harmony import */ var _reactsurveymodel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactsurveymodel */ "../survey-react-ui/src/reactsurveymodel.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./element-factory */ "../survey-react-ui/src/element-factory.tsx");
+/* harmony import */ var _panel__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./panel */ "../survey-react-ui/src/panel.tsx");
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+
+
+
+
+
+var SurveyQuestionSelectbase = /** @class */ (function (_super) {
+    __extends(SurveyQuestionSelectbase, _super);
+    function SurveyQuestionSelectbase(props) {
+        return _super.call(this, props) || this;
+    }
+    Object.defineProperty(SurveyQuestionSelectbase.prototype, "question", {
+        get: function () {
+            return this.questionBase;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyQuestionSelectbase.prototype.renderElement = function () {
+        var _this = this;
+        var cssClasses = this.question.cssClasses;
+        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("fieldset", { className: this.question.getSelectBaseRootCss(), ref: function (fieldset) { return (_this.setControl(fieldset)); }, role: this.question.a11y_input_ariaRole, "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 },
+            this.renderHeader(),
+            this.question.hasColumns
+                ? this.getColumnedBody(cssClasses)
+                : this.getBody(cssClasses),
+            this.getFooter()));
+    };
+    SurveyQuestionSelectbase.prototype.renderHeader = function () { return null; };
+    SurveyQuestionSelectbase.prototype.getFooter = function () {
+        var _this = this;
+        if (this.question.hasFootItems) {
+            var items = this.question.footItems.map(function (item, ii) {
+                return _this.renderItem(item, false, _this.question.cssClasses);
+            });
+            return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, items);
+        }
+        return null;
+    };
+    SurveyQuestionSelectbase.prototype.getStateValue = function () { return undefined; };
+    SurveyQuestionSelectbase.prototype.isItemChecked = function (item, value) { return false; };
+    SurveyQuestionSelectbase.prototype.getColumnedBody = function (cssClasses) {
+        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.rootMultiColumn }, this.getColumns(cssClasses)));
+    };
+    SurveyQuestionSelectbase.prototype.getColumns = function (cssClasses) {
+        var _this = this;
+        var value = this.getStateValue();
+        return this.question.columns.map(function (column, ci) {
+            var items = column.map(function (item, ii) {
+                return _this.renderItem(item, ci === 0 && ii === 0, cssClasses, "" + ci + ii, _this.isItemChecked(item, value));
+            });
+            return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { key: "column" + ci + _this.question.getItemsColumnKey(column), className: _this.question.getColumnClass(), role: "presentation" }, items));
+        });
+    };
+    SurveyQuestionSelectbase.prototype.getBody = function (cssClasses) {
+        if (this.question.blockedRow) {
+            return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.rootRow }, this.getItems(cssClasses, this.question.dataChoices));
+        }
+        else {
+            return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, this.getItems(cssClasses, this.question.bodyItems));
+        }
+    };
+    SurveyQuestionSelectbase.prototype.getItems = function (cssClasses, choices) {
+        var items = [];
+        var value = this.getStateValue();
+        for (var i = 0; i < choices.length; i++) {
+            var item = choices[i];
+            var renderedItem = this.renderItem(item, i == 0, cssClasses, "" + i, this.isItemChecked(item, value));
+            if (!!renderedItem) {
+                items.push(renderedItem);
+            }
+        }
+        return items;
+    };
+    Object.defineProperty(SurveyQuestionSelectbase.prototype, "textStyle", {
+        get: function () {
+            return null;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyQuestionSelectbase.prototype.renderItem = function (item, isFirst, cssClasses, index, isChecked) {
+        var renderedItem = _element_factory__WEBPACK_IMPORTED_MODULE_4__.ReactElementFactory.Instance.createElement(this.question.itemComponent, {
+            key: item.value,
+            question: this.question,
+            cssClasses: cssClasses,
+            isDisplayMode: this.isDisplayMode,
+            item: item,
+            textStyle: this.textStyle,
+            index: index,
+            isFirst: isFirst,
+            isChecked: isChecked,
+            creator: this.props.creator,
+        });
+        var survey = this.question.survey;
+        var wrappedItem = null;
+        if (!!survey && !!renderedItem) {
+            wrappedItem = _reactsurveymodel__WEBPACK_IMPORTED_MODULE_3__.ReactSurveyElementsWrapper.wrapItemValue(survey, renderedItem, this.question, item);
+        }
+        return wrappedItem !== null && wrappedItem !== void 0 ? wrappedItem : renderedItem;
+    };
+    return SurveyQuestionSelectbase;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__.SurveyQuestionElementBase));
+
+var SurveyQuestionSelectBaseItem = /** @class */ (function (_super) {
+    __extends(SurveyQuestionSelectBaseItem, _super);
+    function SurveyQuestionSelectBaseItem(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleOnChange = function (event) {
+            _this.doOnItemChange(event);
+        };
+        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();
+        return _this;
+    }
+    SurveyQuestionSelectBaseItem.prototype.getStateElement = function () {
+        return this.item;
+    };
+    Object.defineProperty(SurveyQuestionSelectBaseItem.prototype, "question", {
+        get: function () {
+            return this.props.question;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyQuestionSelectBaseItem.prototype, "item", {
+        get: function () {
+            return this.props.item;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyQuestionSelectBaseItem.prototype, "textStyle", {
+        get: function () {
+            return this.props.textStyle;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyQuestionSelectBaseItem.prototype, "isFirst", {
+        get: function () {
+            return this.props.isFirst;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyQuestionSelectBaseItem.prototype, "index", {
+        get: function () {
+            return this.props.index;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyQuestionSelectBaseItem.prototype, "hideCaption", {
+        get: function () {
+            return this.props.hideCaption === true;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyQuestionSelectBaseItem.prototype, "ariaLabel", {
+        get: function () {
+            return this.props.ariaLabel || null;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyQuestionSelectBaseItem.prototype.componentDidUpdate = function (prevProps, prevState) {
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+        if (prevProps.item !== this.props.item && !this.question.isDesignMode) {
+            if (this.props.item) {
+                this.props.item.setRootElement(this.rootRef.current);
+            }
+            if (prevProps.item) {
+                prevProps.item.setRootElement(undefined);
+            }
+        }
+    };
+    SurveyQuestionSelectBaseItem.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+        if (!_super.prototype.shouldComponentUpdate.call(this, nextProps, nextState))
+            return false;
+        return (!this.question.customWidget ||
+            !!this.question.customWidgetData.isNeedRender ||
+            !!this.question.customWidget.widgetJson.isDefaultRender ||
+            !!this.question.customWidget.widgetJson.render);
+    };
+    SurveyQuestionSelectBaseItem.prototype.doOnItemChange = function (event) { };
+    SurveyQuestionSelectBaseItem.prototype.canRender = function () {
+        return !!this.item && !!this.question;
+    };
+    SurveyQuestionSelectBaseItem.prototype.renderElement = function () {
+        return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,
+            this.renderElementContent(),
+            this.renderPanel(),
+            this.renderComment());
+    };
+    SurveyQuestionSelectBaseItem.prototype.renderElementContent = function () {
+        return null;
+    };
+    Object.defineProperty(SurveyQuestionSelectBaseItem.prototype, "inputStyle", {
+        get: function () {
+            return null; //{ marginRight: "3px" };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyQuestionSelectBaseItem.prototype.renderComment = function () {
+        if (!this.item.isCommentShowing)
+            return null;
+        return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.getCommentAreaCss(true) },
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_reactquestion_comment__WEBPACK_IMPORTED_MODULE_2__.SurveyQuestionCommentValueItem, { question: this.question, item: this.item, cssClasses: this.question.cssClasses }));
+    };
+    SurveyQuestionSelectBaseItem.prototype.renderPanel = function () {
+        if (this.item.isPanelShowing) {
+            var panel = this.item.panel;
+            return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_panel__WEBPACK_IMPORTED_MODULE_5__.SurveyPanel, { key: panel.id, element: panel, survey: this.question.survey, cssClasses: this.props.cssClasses, isDisplayMode: this.isDisplayMode, creator: this.props.creator }));
+        }
+        return null;
+    };
+    SurveyQuestionSelectBaseItem.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        if (!this.question.isDesignMode) {
+            this.item.setRootElement(this.rootRef.current);
+        }
+    };
+    SurveyQuestionSelectBaseItem.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        if (!this.question.isDesignMode) {
+            this.item.setRootElement(undefined);
+        }
+    };
+    return SurveyQuestionSelectBaseItem;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__.ReactSurveyElement));
+
+
+
 /***/ }),
 
 /***/ "../survey-react-ui/src/reactquestion_singleinputsummary.tsx":
@@ -12899,7 +12870,7 @@ var SurveyQuestionSignaturePad = /** @class */ (function (_super) {
             return null;
         var cssClasses = this.question.cssClasses;
         return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.controls },
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement("button", { type: "button", className: cssClasses.clearButton, title: this.question.clearButtonCaption, onClick: function () { return _this.question.clearValue(true); } },
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement("button", { type: "button", className: cssClasses.clearButton, title: this.question.clearButtonCaption, onClick: function () { return _this.question.clearValueFromUI(); } },
                 this.question.cssClasses.clearButtonIconId ? react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { iconName: this.question.cssClasses.clearButtonIconId, size: "auto" }) : react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", null, "\u2716"),
                 " "));
     };
@@ -13818,7 +13789,7 @@ var preact = react__WEBPACK_IMPORTED_MODULE_0__;
 
 
 
-(0,survey_core__WEBPACK_IMPORTED_MODULE_2__.checkLibraryVersion)("".concat("2.3.8"), "survey-js-ui");
+(0,survey_core__WEBPACK_IMPORTED_MODULE_2__.checkLibraryVersion)("".concat("2.3.10"), "survey-js-ui");
 
 })();