survey-react-ui 2.5.16 → 3.0.0-beta.1

package/fesm/survey-react-ui.mjs

@@ -1,10 +1,10 @@
 /*!
- * surveyjs - Survey JavaScript library v2.5.16
+ * surveyjs - Survey JavaScript library v3.0.0-beta.1
  * Copyright (c) 2015-2026 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
 
-import { SurveyModel, Helpers, createSvg, LocalizableString, createPopupViewModel, CssClassBuilder, ActionDropdownViewModel, RendererFactory, doKey2ClickUp, SvgRegistry, PopupModalManager, settings, ScrollViewModel, addIconsToThemeSet, doKey2ClickBlur, doKey2ClickDown, Question, SurveyProgressModel, ProgressButtonsResponsivityManager, PopupSurveyModel, ButtonGroupItemModel, checkLibraryVersion } from 'survey-core';
+import { SurveyModel, Helpers, createSvg, LocalizableString, createPopupViewModel, CssClassBuilder, ActionDropdownViewModel, RendererFactory, doKey2ClickUp, SvgRegistry, PopupModalManager, settings, ScrollViewModel, addIconsToThemeSet, doKey2ClickBlur, doKey2ClickDown, ResizeManager, Question, SurveyProgressModel, ProgressButtonsResponsivityManager, PopupSurveyModel, ButtonGroupItemModel, checkLibraryVersion } from 'survey-core';
 export { SurveyModel as Model, SurveyModel, SurveyWindowModel, settings, surveyLocalization, surveyStrings } from 'survey-core';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -530,6 +530,10 @@ class SurveyAction extends SurveyElementBase {
     }
 }
 class SurveyActionBarItem extends SurveyElementBase {
+    constructor() {
+        super(...arguments);
+        this.ref = React.createRef();
+    }
     get item() {
         return this.props.item;
     }
@@ -556,9 +560,17 @@ class SurveyActionBarItem extends SurveyElementBase {
         const title = this.item.tooltip || this.item.title;
         const buttonContent = this.renderButtonContent();
         const tabIndex = this.item.disableTabStop ? -1 : undefined;
-        const button = attachKey2click(React.createElement("button", { className: className, type: "button", disabled: this.item.disabled, onMouseDown: (args) => this.item.doMouseDown(args), onFocus: (args) => this.item.doFocus(args), onClick: (args) => this.item.doAction(args), title: title, tabIndex: tabIndex, "aria-checked": this.item.ariaChecked, "aria-expanded": this.item.ariaExpanded, "aria-labelledby": this.item.ariaLabelledBy, role: this.item.ariaRole }, buttonContent), this.item, { processEsc: false });
+        const button = attachKey2click(React.createElement("button", { ref: this.ref, className: className, type: "button", disabled: this.item.disabled, onMouseDown: (args) => this.item.doMouseDown(args), onFocus: (args) => this.item.doFocus(args), onClick: (args) => this.item.doAction(args), title: title, tabIndex: tabIndex, "aria-checked": this.item.ariaChecked, "aria-expanded": this.item.ariaExpanded, "aria-controls": this.item.ariaControls, "aria-labelledby": this.item.ariaLabelledBy, role: this.item.ariaRole }, buttonContent), this.item, { processEsc: false });
         return button;
     }
+    componentDidMount() {
+        super.componentDidMount();
+        this.props.item.setInputElement(this.ref.current);
+    }
+    componentWillUnmount() {
+        super.componentWillUnmount();
+        this.props.item.setInputElement(undefined);
+    }
 }
 ReactElementFactory.Instance.registerElement("sv-action-bar-item", (props) => {
     return React.createElement(SurveyActionBarItem, props);
@@ -1174,6 +1186,8 @@ var folder_24x24$1 = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/
 
 var fullsize_16x16$1 = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 13H4C2.9 13 2 12.1 2 11V5C2 3.9 2.9 3 4 3H12C13.1 3 14 3.9 14 5V11C14 12.1 13.1 13 12 13ZM4 5V11H12V5H4Z\"/></svg>";
 
+var grip$1 = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_247_12)\"><path d=\"M13.8666 9.86954C14.1595 9.57665 14.6342 9.57665 14.9271 9.86954C15.22 10.1624 15.22 10.6372 14.9271 10.9301L10.9271 14.9301C10.6342 15.223 10.1595 15.223 9.86659 14.9301C9.5737 14.6372 9.5737 14.1624 9.86659 13.8695L13.8666 9.86954Z\"/><path d=\"M13.4657 5.46961C13.7586 5.17672 14.2334 5.17672 14.5263 5.46961C14.8191 5.7625 14.8192 6.23726 14.5263 6.53015L6.52626 14.5302C6.23339 14.8229 5.75858 14.8229 5.46571 14.5302C5.17286 14.2373 5.17292 13.7625 5.46571 13.4696L13.4657 5.46961Z\"/></g><defs><clipPath id=\"clip0_247_12\"><rect width=\"16\" height=\"16\" fill=\"white\"/></clipPath></defs></svg>";
+
 var image_48x48$1 = "<svg viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M36 8H12C9.79 8 8 9.79 8 12V36C8 38.21 9.79 40 12 40H36C38.21 40 40 38.21 40 36V12C40 9.79 38.21 8 36 8ZM38 36C38 37.1 37.1 38 36 38H12C10.9 38 10 37.1 10 36V12C10 10.9 10.9 10 12 10H36C37.1 10 38 10.9 38 12V36ZM14 17C14 15.34 15.34 14 17 14C18.66 14 20 15.34 20 17C20 18.66 18.66 20 17 20C15.34 20 14 18.66 14 17ZM27 24L36 36H12L19 27L23 29L27 24Z\"/></svg>";
 
 var loading_48x48$1 = "<svg viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_19679_369428)\"><path opacity=\"0.1\" d=\"M24 40C15.18 40 8 32.82 8 24C8 15.18 15.18 8 24 8C32.82 8 40 15.18 40 24C40 32.82 32.82 40 24 40ZM24 12C17.38 12 12 17.38 12 24C12 30.62 17.38 36 24 36C30.62 36 36 30.62 36 24C36 17.38 30.62 12 24 12Z\" fill=\"black\" fill-opacity=\"0.91\"/><path d=\"M10 26C8.9 26 8 25.1 8 24C8 15.18 15.18 8 24 8C25.1 8 26 8.9 26 10C26 11.1 25.1 12 24 12C17.38 12 12 17.38 12 24C12 25.1 11.1 26 10 26Z\"/></g><defs><clipPath id=\"clip0_19679_369428\"><rect width=\"32\" height=\"32\" fill=\"white\" transform=\"translate(8 8)\"/></clipPath></defs></svg>";
@@ -1262,6 +1276,7 @@ const icons$1 = {
   "flip-24x24": flip_24x24$1,
   "folder-24x24": folder_24x24$1,
   "fullsize-16x16": fullsize_16x16$1,
+  "grip": grip$1,
   "image-48x48": image_48x48$1,
   "loading-48x48": loading_48x48$1,
   "maximize-16x16": maximize_16x16$1,
@@ -1360,6 +1375,8 @@ var folder_24x24 = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/sv
 
 var fullsize_16x16 = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 3.25H4C3.04 3.25 2.25 4.04 2.25 5V11C2.25 11.96 3.04 12.75 4 12.75H12C12.96 12.75 13.75 11.96 13.75 11V5C13.75 4.04 12.96 3.25 12 3.25ZM12.25 11C12.25 11.14 12.14 11.25 12 11.25H4C3.86 11.25 3.75 11.14 3.75 11V5C3.75 4.86 3.86 4.75 4 4.75H12C12.14 4.75 12.25 4.86 12.25 5V11Z\"/></svg>";
 
+var grip = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_247_12)\"><path d=\"M13.8666 9.86954C14.1595 9.57665 14.6342 9.57665 14.9271 9.86954C15.22 10.1624 15.22 10.6372 14.9271 10.9301L10.9271 14.9301C10.6342 15.223 10.1595 15.223 9.86659 14.9301C9.5737 14.6372 9.5737 14.1624 9.86659 13.8695L13.8666 9.86954Z\"/><path d=\"M13.4657 5.46961C13.7586 5.17672 14.2334 5.17672 14.5263 5.46961C14.8191 5.7625 14.8192 6.23726 14.5263 6.53015L6.52626 14.5302C6.23339 14.8229 5.75858 14.8229 5.46571 14.5302C5.17286 14.2373 5.17292 13.7625 5.46571 13.4696L13.4657 5.46961Z\"/></g><defs><clipPath id=\"clip0_247_12\"><rect width=\"16\" height=\"16\" fill=\"white\"/></clipPath></defs></svg>";
+
 var image_48x48 = "<svg viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M33 10.25H15C12.38 10.25 10.25 12.38 10.25 15V33C10.25 35.62 12.38 37.75 15 37.75H33C35.62 37.75 37.75 35.62 37.75 33V15C37.75 12.38 35.62 10.25 33 10.25ZM36.25 33C36.25 34.79 34.79 36.25 33 36.25H15C13.21 36.25 11.75 34.79 11.75 33V15C11.75 13.21 13.21 11.75 15 11.75H33C34.79 11.75 36.25 13.21 36.25 15V33ZM30.5 14.25C28.71 14.25 27.25 15.71 27.25 17.5C27.25 19.29 28.71 20.75 30.5 20.75C32.29 20.75 33.75 19.29 33.75 17.5C33.75 15.71 32.29 14.25 30.5 14.25ZM30.5 19.25C29.54 19.25 28.75 18.46 28.75 17.5C28.75 16.54 29.54 15.75 30.5 15.75C31.46 15.75 32.25 16.54 32.25 17.5C32.25 18.46 31.46 19.25 30.5 19.25ZM29.26 26.28C28.94 25.92 28.49 25.71 28.01 25.7C27.54 25.68 27.07 25.87 26.73 26.2L24.95 27.94L22.28 25.23C21.94 24.89 21.5 24.71 21 24.71C20.52 24.71 20.06 24.93 19.74 25.28L14.74 30.78C14.25 31.3 14.12 32.06 14.41 32.72C14.69 33.36 15.28 33.75 15.95 33.75H32.07C32.74 33.75 33.33 33.35 33.61 32.72C33.89 32.06 33.77 31.31 33.29 30.79L29.27 26.29L29.26 26.28ZM32.22 32.12C32.18 32.2 32.13 32.25 32.06 32.25H15.94C15.87 32.25 15.81 32.21 15.78 32.12C15.77 32.09 15.71 31.93 15.83 31.8L20.84 26.29C20.9 26.22 20.99 26.21 21.02 26.21C21.06 26.21 21.14 26.22 21.2 26.29L24.4 29.54C24.69 29.83 25.16 29.84 25.46 29.54L27.77 27.27C27.83 27.21 27.9 27.2 27.94 27.2C28.01 27.2 28.06 27.21 28.13 27.28L32.16 31.79C32.16 31.79 32.16 31.79 32.17 31.8C32.29 31.93 32.23 32.09 32.22 32.12Z\"/></svg>";
 
 var loading_48x48 = "<svg viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_19679_369428)\"><path opacity=\"0.1\" d=\"M24 40C15.18 40 8 32.82 8 24C8 15.18 15.18 8 24 8C32.82 8 40 15.18 40 24C40 32.82 32.82 40 24 40ZM24 12C17.38 12 12 17.38 12 24C12 30.62 17.38 36 24 36C30.62 36 36 30.62 36 24C36 17.38 30.62 12 24 12Z\" fill=\"black\" fill-opacity=\"0.91\"/><path d=\"M10 26C8.9 26 8 25.1 8 24C8 15.18 15.18 8 24 8C25.1 8 26 8.9 26 10C26 11.1 25.1 12 24 12C17.38 12 12 17.38 12 24C12 25.1 11.1 26 10 26Z\"/></g><defs><clipPath id=\"clip0_19679_369428\"><rect width=\"32\" height=\"32\" fill=\"white\" transform=\"translate(8 8)\"/></clipPath></defs></svg>";
@@ -1448,6 +1465,7 @@ const icons = {
   "flip-24x24": flip_24x24,
   "folder-24x24": folder_24x24,
   "fullsize-16x16": fullsize_16x16,
+  "grip": grip,
   "image-48x48": image_48x48,
   "loading-48x48": loading_48x48,
   "maximize-16x16": maximize_16x16,
@@ -2111,23 +2129,12 @@ class SurveyPanelBase extends SurveyElementBase {
     }
 }
 
-class CharacterCounterComponent extends SurveyElementBase {
-    getStateElement() {
-        return this.props.counter;
-    }
-    renderElement() {
-        return (React.createElement("div", { className: this.props.remainingCharacterCounter }, this.props.counter.remainingCharacterCounter));
-    }
-}
-ReactElementFactory.Instance.registerElement("sv-character-counter", (props) => {
-    return React.createElement(CharacterCounterComponent, props);
-});
-
 class TextAreaComponent extends SurveyElementBase {
     constructor(props) {
         super(props);
-        this.initialValue = this.viewModel.getTextValue() || "";
         this.textareaRef = React.createRef();
+        this.anchorRef = React.createRef();
+        this.initialValue = this.viewModel.getTextValue() || "";
     }
     get viewModel() {
         return this.props.viewModel;
@@ -2137,17 +2144,37 @@ class TextAreaComponent extends SurveyElementBase {
     }
     componentDidMount() {
         super.componentDidMount();
+        if (this.anchorRef.current && this.textareaRef.current && this.viewModel.question.resizeStyle !== "none") {
+            this.resizeManager = new ResizeManager(this.anchorRef.current, this.textareaRef.current, this.viewModel.question.resizeStyle);
+        }
         let el = this.textareaRef.current;
         if (!!el) {
             this.viewModel.setElement(el);
         }
     }
     componentWillUnmount() {
+        var _a;
         super.componentWillUnmount();
+        (_a = this.resizeManager) === null || _a === void 0 ? void 0 : _a.dispose();
         this.viewModel.resetElement();
     }
+    onContainerClick(event) {
+        var _a;
+        if (event.target == event.currentTarget) {
+            (_a = this.textareaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    renderGroup() {
+        return this.viewModel.hasVisibleInputActions ? React.createElement(SurveyActionBar, { model: this.viewModel.inputActionsContainer }) : null;
+    }
     renderElement() {
-        return (React.createElement("textarea", { id: this.viewModel.id, className: this.viewModel.className, ref: this.textareaRef, disabled: this.viewModel.isDisabledAttr, readOnly: this.viewModel.isReadOnlyAttr, rows: this.viewModel.rows, cols: this.viewModel.cols, placeholder: this.viewModel.placeholder, maxLength: this.viewModel.maxLength, defaultValue: this.initialValue, onChange: (event) => { this.viewModel.onTextAreaInput(event); }, onFocus: (event) => { this.viewModel.onTextAreaFocus(event); }, onBlur: (event) => { this.viewModel.onTextAreaBlur(event); }, onKeyDown: (event) => { this.viewModel.onTextAreaKeyDown(event); }, "aria-required": this.viewModel.ariaRequired, "aria-label": this.viewModel.ariaLabel, "aria-labelledby": this.viewModel.ariaLabelledBy, "aria-describedby": this.viewModel.ariaDescribedBy, "aria-invalid": this.viewModel.ariaInvalid, "aria-errormessage": this.viewModel.ariaErrormessage, style: { resize: this.viewModel.question.resizeStyle } }));
+        const cssClasses = this.viewModel.getCssClasses();
+        return (React.createElement("div", { className: cssClasses.root, onClick: (event) => this.onContainerClick(event) },
+            React.createElement("textarea", { id: this.viewModel.id, className: cssClasses.control, ref: this.textareaRef, disabled: this.viewModel.isDisabledAttr, readOnly: this.viewModel.isReadOnlyAttr, rows: this.viewModel.rows, cols: this.viewModel.cols, placeholder: this.viewModel.placeholder, maxLength: this.viewModel.maxLength, defaultValue: this.initialValue, onChange: (event) => { this.viewModel.onTextAreaInput(event); }, onFocus: (event) => { this.viewModel.onTextAreaFocus(event); }, onBlur: (event) => { this.viewModel.onTextAreaBlur(event); }, onKeyDown: (event) => { this.viewModel.onTextAreaKeyDown(event); }, "aria-required": this.viewModel.ariaRequired, "aria-label": this.viewModel.ariaLabel, "aria-labelledby": this.viewModel.ariaLabelledBy, "aria-describedby": this.viewModel.ariaDescribedBy, "aria-invalid": this.viewModel.ariaInvalid, "aria-errormessage": this.viewModel.ariaErrormessage, style: { resize: "none" } }),
+            this.renderGroup(),
+            this.viewModel.question.resizeStyle !== "none" ?
+                React.createElement("div", { className: cssClasses.grip, ref: this.anchorRef },
+                    React.createElement(SvgIcon, { iconName: cssClasses.gripIconId, size: "auto" })) : null));
     }
 }
 ReactElementFactory.Instance.registerElement("sv-text-area", (props) => {
@@ -2155,13 +2182,6 @@ ReactElementFactory.Instance.registerElement("sv-text-area", (props) => {
 });
 
 class SurveyQuestionComment extends SurveyQuestionUncontrolledElement {
-    renderCharacterCounter() {
-        let counter = null;
-        if (!!this.question.getMaxLength()) {
-            counter = React.createElement(CharacterCounterComponent, { counter: this.question.characterCounter, remainingCharacterCounter: this.question.cssClasses.remainingCharacterCounter });
-        }
-        return counter;
-    }
     constructor(props) {
         super(props);
     }
@@ -2169,11 +2189,9 @@ class SurveyQuestionComment extends SurveyQuestionUncontrolledElement {
         if (this.question.isReadOnlyRenderDiv()) {
             return React.createElement("div", null, this.question.value);
         }
-        const counter = this.renderCharacterCounter();
         const textAreaModel = this.props.question.textAreaModel;
         return (React.createElement(React.Fragment, null,
-            React.createElement(TextAreaComponent, { viewModel: textAreaModel }),
-            counter));
+            React.createElement(TextAreaComponent, { viewModel: textAreaModel })));
     }
 }
 class SurveyQuestionCommentItem extends ReactSurveyElement {
@@ -3554,16 +3572,17 @@ class SurveyQuestionDropdownBase extends SurveyQuestionUncontrolledElement {
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             disabled: this.question.isDisabledAttr, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, onFocus: this.focus, role: dropdownListModel.ariaQuestionRole, "aria-required": dropdownListModel.ariaQuestionRequired, "aria-invalid": dropdownListModel.ariaQuestionInvalid, "aria-errormessage": dropdownListModel.ariaQuestionErrorMessage, "aria-expanded": dropdownListModel.ariaQuestionExpanded, "aria-label": dropdownListModel.ariaQuestionLabel, "aria-labelledby": dropdownListModel.ariaQuestionLabelledby, "aria-describedby": dropdownListModel.ariaQuestionDescribedby, "aria-controls": dropdownListModel.ariaQuestionControls, "aria-activedescendant": dropdownListModel.ariaQuestionActivedescendant, ref: (div) => (this.setControl(div)) },
-            dropdownListModel.showHintPrefix ?
-                (React.createElement("div", { className: this.question.cssClasses.hintPrefix },
-                    React.createElement("span", null, dropdownListModel.hintStringPrefix))) : null,
             React.createElement("div", { className: this.question.cssClasses.controlValue },
-                dropdownListModel.showHintString ?
-                    (React.createElement("div", { className: this.question.cssClasses.hintSuffix },
-                        React.createElement("span", { style: { visibility: "hidden" }, "data-bind": "text: model.filterString" }, dropdownListModel.inputStringRendered),
-                        React.createElement("span", null, dropdownListModel.hintStringSuffix))) : null,
-                valueElement,
-                dropdownListModel.needRenderInput ? this.renderFilterInput() : null),
+                dropdownListModel.showHintPrefix ?
+                    (React.createElement("div", { className: this.question.cssClasses.hintPrefix },
+                        React.createElement("span", null, dropdownListModel.hintStringPrefix))) : null,
+                React.createElement("div", { className: this.question.cssClasses.inputPrefixWrapper },
+                    dropdownListModel.showHintString ?
+                        (React.createElement("div", { className: this.question.cssClasses.hintSuffix },
+                            React.createElement("span", { style: { visibility: "hidden" }, "data-bind": "text: model.filterString" }, dropdownListModel.inputStringRendered),
+                            React.createElement("span", null, dropdownListModel.hintStringSuffix))) : null,
+                    valueElement,
+                    dropdownListModel.needRenderInput ? this.renderFilterInput() : null)),
             this.renderEditorButtons()));
     }
     renderFilterInput() {
@@ -3702,18 +3721,16 @@ class SurveyQuestionDropdownSelect extends SurveyQuestionDropdown {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         React.createElement("div", { id: this.question.inputId, className: this.question.getControlClass(), disabled: true }, this.question.readOnlyText)) :
-            (React.createElement("select", { id: this.question.inputId, className: this.question.getControlClass(), ref: (select) => (this.setControl(select)), autoComplete: this.question.autocomplete, onChange: this.updateValueOnEvent, onInput: this.updateValueOnEvent, onClick: click, onKeyUp: keyup, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage, required: this.question.isRequired },
+            (React.createElement("select", { id: this.question.inputId, className: cssClasses.controlValue, ref: (select) => (this.setControl(select)), autoComplete: this.question.autocomplete, onChange: this.updateValueOnEvent, onInput: this.updateValueOnEvent, onClick: click, onKeyUp: keyup, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage, required: this.question.isRequired },
                 this.question.allowClear ? (React.createElement("option", { value: "" }, this.question.placeholder)) : null,
                 this.question.visibleChoices.map((item) => React.createElement(SurveyQuestionOptionItem, { key: item.uniqueId, item: item }))));
         return (React.createElement("div", { className: cssClasses.selectWrapper },
-            selectElement,
-            this.createChevronButton()));
+            React.createElement("div", { className: this.question.getControlClass() },
+                selectElement,
+                this.renderEditorButtons())));
     }
-    createChevronButton() {
-        if (!this.question.cssClasses.chevronButtonIconId)
-            return null;
-        return (React.createElement("div", { className: this.question.cssClasses.chevronButton, "aria-hidden": "true", onPointerDown: this.chevronPointerDown },
-            React.createElement(SvgIcon, { className: this.question.cssClasses.chevronButtonSvg, iconName: this.question.cssClasses.chevronButtonIconId, size: "auto" })));
+    renderEditorButtons() {
+        return React.createElement(SurveyActionBar, { model: this.question.inputActionBar });
     }
 }
 ReactQuestionFactory.Instance.registerQuestion("sv-dropdown-select", (props) => {
@@ -4260,21 +4277,20 @@ class SurveyQuestionText extends SurveyQuestionUncontrolledElement {
         if (this.question.isReadOnlyRenderDiv()) {
             return React.createElement("div", null, this.question.inputValue);
         }
-        const counter = !!this.question.getMaxLength() ? (React.createElement(CharacterCounterComponent, { counter: this.question.characterCounter, remainingCharacterCounter: this.question.cssClasses.remainingCharacterCounter })) : null;
-        return (React.createElement(React.Fragment, null,
-            React.createElement("input", { id: this.question.inputId, 
-                // disabled={this.isDisplayMode}
-                disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, className: inputClass, type: this.question.inputType, 
-                //ref={this.controlRef}
-                ref: (input) => (this.setControl(input)), style: this.question.inputStyle, maxLength: this.question.getMaxLength(), min: this.question.renderedMin, max: this.question.renderedMax, step: this.question.renderedStep, size: this.question.inputSize, placeholder: placeholder, list: this.question.dataListId, autoComplete: this.question.autocomplete, onBlur: (event) => { this.question.onBlur(event); }, onFocus: (event) => { this.question.onFocus(event); }, onChange: this.question.onChange, onClick: this.question.readOnlyBlocker, onPointerDown: this.question.readOnlyBlocker, onKeyUp: this.question.onKeyUp, onKeyDown: this.question.onKeyDown, onCompositionUpdate: (event) => this.question.onCompositionUpdate(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 }),
-            counter));
+        return (React.createElement("input", { id: this.question.inputId, 
+            // disabled={this.isDisplayMode}
+            disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, className: inputClass, type: this.question.inputType, 
+            //ref={this.controlRef}
+            ref: (input) => (this.setControl(input)), style: this.question.inputStyle, maxLength: this.question.getMaxLength(), min: this.question.renderedMin, max: this.question.renderedMax, step: this.question.renderedStep, size: this.question.inputSize, placeholder: placeholder, list: this.question.dataListId, autoComplete: this.question.autocomplete, onBlur: (event) => { this.question.onBlur(event); }, onFocus: (event) => { this.question.onFocus(event); }, onChange: this.question.onChange, onClick: this.question.readOnlyBlocker, onPointerDown: this.question.readOnlyBlocker, onKeyUp: this.question.onKeyUp, onKeyDown: this.question.onKeyDown, onCompositionUpdate: (event) => this.question.onCompositionUpdate(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 }));
+    }
+    renderGroup() {
+        return this.question.hasVisibleInputActions ? React.createElement(SurveyActionBar, { model: this.question.inputActionsContainer }) : null;
     }
     renderElement() {
-        return (this.question.dataListId ?
-            React.createElement("div", null,
-                this.renderInput(),
-                this.renderDataList()) :
-            this.renderInput());
+        return (React.createElement("div", { className: this.question.getRootClass(), onClick: (event) => this.question.onContainerClick(event) },
+            this.renderInput(),
+            this.renderDataList(),
+            this.renderGroup()));
     }
     setValueCore(newValue) {
         this.question.inputValue = newValue;
@@ -4881,52 +4897,30 @@ class SurveyQuestionMatrixDynamic extends SurveyQuestionMatrixDropdownBase {
             ? this.renderTableDiv()
             : this.renderNoRowsContent(cssClasses);
         return (React.createElement("div", null,
-            this.renderAddRowButtonOnTop(cssClasses),
+            this.renderTopToolbar(),
             mainDiv,
-            this.renderAddRowButtonOnBottom(cssClasses)));
+            this.renderBottomToolbar()));
+    }
+    renderToolbar() {
+        return React.createElement("div", { className: this.matrix.cssClasses.footer }, ReactElementFactory.Instance.createElement("sv-action-bar", { model: this.matrix.toolbar }));
     }
-    renderAddRowButtonOnTop(cssClasses) {
-        if (!this.matrix.renderedTable.showAddRowOnTop)
+    renderTopToolbar() {
+        if (!this.matrix.getShowToolbar("top"))
             return null;
-        return this.renderAddRowButton(cssClasses);
+        return this.renderToolbar();
     }
-    renderAddRowButtonOnBottom(cssClasses) {
-        if (!this.matrix.renderedTable.showAddRowOnBottom)
+    renderBottomToolbar() {
+        if (!this.matrix.getShowToolbar("bottom"))
             return null;
-        return this.renderAddRowButton(cssClasses);
+        return this.renderToolbar();
     }
     renderNoRowsContent(cssClasses) {
         return ReactElementFactory.Instance.createElement("sv-placeholder-matrixdynamic", { cssClasses: cssClasses, question: this.matrix });
     }
-    renderAddRowButton(cssClasses, isEmptySection = false) {
-        return ReactElementFactory.Instance.createElement("sv-matrixdynamic-add-btn", {
-            question: this.question, cssClasses, isEmptySection
-        });
-    }
 }
 ReactQuestionFactory.Instance.registerQuestion("matrixdynamic", (props) => {
     return React.createElement(SurveyQuestionMatrixDynamic, props);
 });
-class SurveyQuestionMatrixDynamicAddButton extends ReactSurveyElement {
-    constructor(props) {
-        super(props);
-        this.handleOnRowAddClick = this.handleOnRowAddClick.bind(this);
-    }
-    get matrix() {
-        return this.props.question;
-    }
-    handleOnRowAddClick(event) {
-        this.matrix.addRowUI();
-    }
-    renderElement() {
-        const addRowText = this.renderLocString(this.matrix.locAddRowText);
-        const addButton = (React.createElement("button", { className: this.matrix.getAddRowButtonCss(this.props.isEmptySection), type: "button", disabled: this.matrix.isInputReadOnly, onClick: this.matrix.isDesignMode ? undefined : this.handleOnRowAddClick },
-            addRowText,
-            React.createElement("span", { className: this.props.cssClasses.iconAdd }, this.cssClasses.iconAddId && React.createElement("svg", null,
-                React.createElement("use", { xlinkHref: this.cssClasses.iconAddId })))));
-        return (this.props.isEmptySection ? addButton : React.createElement("div", { className: this.props.cssClasses.footer }, addButton));
-    }
-}
 class SurveyQuestionMatrixDynamicPlaceholder extends ReactSurveyElement {
     constructor(props) {
         super(props);
@@ -4934,21 +4928,14 @@ class SurveyQuestionMatrixDynamicPlaceholder extends ReactSurveyElement {
     renderElement() {
         const cssClasses = this.props.cssClasses;
         const matrix = this.props.question;
-        const showAddButton = matrix.renderedTable.showAddRow;
         const text = this.renderLocString(matrix.locNoRowsText);
         const textDiv = React.createElement("div", { className: cssClasses.noRowsText }, text);
-        const btn = showAddButton ? this.renderAddRowButton(cssClasses, matrix) : undefined;
+        const toolbar = matrix.getShowToolbar() ? ReactElementFactory.Instance.createElement("sv-action-bar", { model: matrix.toolbar }) : null;
         return (React.createElement("div", { className: cssClasses.noRowsSection },
             textDiv,
-            btn));
-    }
-    renderAddRowButton(cssClasses, question) {
-        return ReactElementFactory.Instance.createElement("sv-matrixdynamic-add-btn", {
-            question: question, cssClasses: cssClasses, isEmptySection: true
-        });
+            toolbar));
     }
 }
-ReactElementFactory.Instance.registerElement("sv-matrixdynamic-add-btn", (props) => { return React.createElement(SurveyQuestionMatrixDynamicAddButton, props); });
 ReactElementFactory.Instance.registerElement("sv-placeholder-matrixdynamic", (props) => { return React.createElement(SurveyQuestionMatrixDynamicPlaceholder, props); });
 
 class SurveyQuestionPanelDynamic extends SurveyQuestionElementBase {
@@ -4992,7 +4979,7 @@ class SurveyQuestionPanelDynamic extends SurveyQuestionElementBase {
         const rangeTop = this.question.isRangeShowing && this.question.isProgressTopShowing
             ? this.renderRange()
             : null;
-        const navV2 = this.renderNavigatorV2();
+        const navigation = this.renderNavigator();
         const noEntriesPlaceholder = this.renderPlaceholder(cssClasses);
         return (React.createElement("div", { className: cssClasses.root },
             this.question.hasTabbedMenu ? React.createElement("div", { className: this.question.getTabsContainerCss() },
@@ -5000,18 +4987,13 @@ class SurveyQuestionPanelDynamic extends SurveyQuestionElementBase {
             noEntriesPlaceholder,
             rangeTop,
             React.createElement("div", { className: this.question.cssClasses.panelsContainer }, panels),
-            navV2));
+            navigation));
     }
     renderRange() {
         return (React.createElement("div", { className: this.question.cssClasses.progress },
             React.createElement("div", { className: this.question.cssClasses.progressBar, style: { width: this.question.progress }, role: "progressbar", "aria-label": this.question.progressBarAriaLabel })));
     }
-    renderAddRowButton() {
-        return ReactElementFactory.Instance.createElement("sv-paneldynamic-add-btn", {
-            data: { question: this.question }
-        });
-    }
-    renderNavigatorV2() {
+    renderNavigator() {
         if (!this.question.showNavigation)
             return null;
         const range = this.question.isRangeShowing && this.question.isProgressBottomShowing ? this.renderRange() : null;
@@ -5055,9 +5037,7 @@ class SurveyQuestionPanelDynamicItem extends SurveyPanel {
     renderButton() {
         if (!this.question.canRenderRemovePanelOnRight(this.panel))
             return null;
-        return ReactElementFactory.Instance.createElement("sv-paneldynamic-remove-btn", {
-            data: { question: this.question, panel: this.panel }
-        });
+        return React.createElement(SurveyAction, { item: this.question.getRemovePanelAction(this.panel) });
     }
 }
 ReactQuestionFactory.Instance.registerQuestion("paneldynamic", props => {
@@ -5072,12 +5052,7 @@ class SurveyQuestionPanelDynamicPlaceholder extends ReactSurveyElement {
         const question = this.props.question;
         return (React.createElement("div", { className: cssClasses.noEntriesPlaceholder },
             React.createElement("span", null, this.renderLocString(question.locNoEntriesText)),
-            this.renderAddRowButton(question)));
-    }
-    renderAddRowButton(question) {
-        return ReactElementFactory.Instance.createElement("sv-paneldynamic-add-btn", {
-            data: { question: question }
-        });
+            React.createElement(SurveyActionBar, { model: this.props.question.footerToolbar })));
     }
 }
 ReactElementFactory.Instance.registerElement("sv-placeholder-paneldynamic", (props) => { return React.createElement(SurveyQuestionPanelDynamicPlaceholder, props); });
@@ -6078,145 +6053,13 @@ ReactElementFactory.Instance.registerElement("sv-logo-image", (props) => {
     return React.createElement(LogoImage, props);
 });
 
-class SurveyQuestionMatrixDynamicRemoveButton extends ReactSurveyElement {
-    constructor(props) {
-        super(props);
-        this.handleOnRowRemoveClick = this.handleOnRowRemoveClick.bind(this);
-    }
-    get question() {
-        return this.props.item.data.question;
-    }
-    get row() {
-        return this.props.item.data.row;
-    }
-    handleOnRowRemoveClick(event) {
-        this.question.removeRowUI(this.row);
-    }
-    renderElement() {
-        var removeRowText = this.renderLocString(this.question.locRemoveRowText);
-        return (React.createElement("button", { className: this.question.getRemoveRowButtonCss(), type: "button", onClick: this.handleOnRowRemoveClick, disabled: this.question.isInputReadOnly },
-            removeRowText,
-            React.createElement("span", { className: this.question.cssClasses.iconRemove })));
-    }
-}
-ReactElementFactory.Instance.registerElement("sv-matrix-remove-button", (props) => {
-    return React.createElement(SurveyQuestionMatrixDynamicRemoveButton, props);
-});
-
-class SurveyQuestionMatrixDetailButton extends ReactSurveyElement {
-    constructor(props) {
-        super(props);
-        this.handleOnShowHideClick = this.handleOnShowHideClick.bind(this);
-    }
-    getStateElement() {
-        return this.props.item;
-    }
-    get item() {
-        return this.props.item;
-    }
-    get question() {
-        return this.props.item.data.question;
-    }
-    get row() {
-        return this.props.item.data.row;
-    }
-    handleOnShowHideClick(event) {
-        this.row.showHideDetailPanelClick();
-    }
-    renderElement() {
-        var isExpanded = this.row.isDetailPanelShowing;
-        var ariaExpanded = isExpanded;
-        var ariaControls = isExpanded ? this.row.detailPanelId : undefined;
-        return (React.createElement("button", { type: "button", title: this.props.item.title, onClick: this.handleOnShowHideClick, className: this.question.getDetailPanelButtonCss(this.row), "aria-expanded": ariaExpanded, "aria-controls": ariaControls },
-            React.createElement(SvgIcon, { className: this.question.getDetailPanelIconCss(this.row), iconName: this.question.getDetailPanelIconId(this.row), size: "auto" })));
-    }
-}
-ReactElementFactory.Instance.registerElement("sv-matrix-detail-button", props => {
-    return React.createElement(SurveyQuestionMatrixDetailButton, props);
-});
-
-class SurveyQuestionPanelDynamicAction extends ReactSurveyElement {
-    constructor(props) {
-        super(props);
-    }
+class SurveyQuestionPanelDynamicProgressText extends ReactSurveyElement {
     get data() {
         return (this.props.item && this.props.item.data) || this.props.data;
     }
     get question() {
         return (this.props.item && this.props.item.data.question) || this.props.data.question;
     }
-}
-class SurveyQuestionPanelDynamicAddButton extends SurveyQuestionPanelDynamicAction {
-    constructor() {
-        super(...arguments);
-        this.handleClick = (event) => {
-            this.question.addPanelUI();
-        };
-    }
-    renderElement() {
-        if (!this.question.canAddPanel)
-            return null;
-        const btnText = this.renderLocString(this.question.locAddPanelText);
-        return (React.createElement("button", { type: "button", id: this.question.addButtonId, className: this.question.getAddButtonCss(), onClick: this.handleClick },
-            React.createElement("span", { className: this.question.cssClasses.buttonAddText }, btnText)));
-    }
-}
-ReactElementFactory.Instance.registerElement("sv-paneldynamic-add-btn", (props) => {
-    return React.createElement(SurveyQuestionPanelDynamicAddButton, props);
-});
-
-class SurveyQuestionPanelDynamicRemoveButton extends SurveyQuestionPanelDynamicAction {
-    constructor() {
-        super(...arguments);
-        this.handleClick = (event) => {
-            this.question.removePanelUI(this.data.panel);
-        };
-    }
-    renderElement() {
-        const btnText = this.renderLocString(this.question.locRemovePanelText);
-        const id = this.question.getPanelRemoveButtonId(this.data.panel);
-        return (React.createElement("button", { id: id, className: this.question.getPanelRemoveButtonCss(), onClick: this.handleClick, type: "button" },
-            React.createElement("span", { className: this.question.cssClasses.buttonRemoveText }, btnText),
-            React.createElement("span", { className: this.question.cssClasses.iconRemove })));
-    }
-}
-ReactElementFactory.Instance.registerElement("sv-paneldynamic-remove-btn", (props) => {
-    return React.createElement(SurveyQuestionPanelDynamicRemoveButton, props);
-});
-
-class SurveyQuestionPanelDynamicPrevButton extends SurveyQuestionPanelDynamicAction {
-    constructor() {
-        super(...arguments);
-        this.handleClick = (event) => {
-            this.question.goToPrevPanel();
-        };
-    }
-    renderElement() {
-        return (React.createElement("div", { title: this.question.panelPrevText, onClick: this.handleClick, className: this.question.getPrevButtonCss() },
-            React.createElement(SvgIcon, { iconName: this.question.cssClasses.progressBtnIcon, size: "auto" })));
-    }
-}
-ReactElementFactory.Instance.registerElement("sv-paneldynamic-prev-btn", (props) => {
-    return React.createElement(SurveyQuestionPanelDynamicPrevButton, props);
-});
-
-class SurveyQuestionPanelDynamicNextButton extends SurveyQuestionPanelDynamicAction {
-    constructor() {
-        super(...arguments);
-        this.handleClick = (event) => {
-            this.question.goToNextPanel();
-        };
-    }
-    renderElement() {
-        return (React.createElement("div", { title: this.question.panelNextText, onClick: this.handleClick, className: this.question.getNextButtonCss() },
-            React.createElement(SvgIcon, { iconName: this.question.cssClasses.progressBtnIcon, size: "auto" })));
-    }
-}
-ReactElementFactory.Instance.registerElement("sv-paneldynamic-next-btn", (props) => {
-    return React.createElement(SurveyQuestionPanelDynamicNextButton, props);
-});
-
-class SurveyQuestionPanelDynamicProgressText extends SurveyQuestionPanelDynamicAction {
     renderElement() {
         return (React.createElement("div", { className: this.question.cssClasses.progressText }, this.question.progressText));
     }
@@ -6225,21 +6068,6 @@ ReactElementFactory.Instance.registerElement("sv-paneldynamic-progress-text", (p
     return React.createElement(SurveyQuestionPanelDynamicProgressText, props);
 });
 
-class SurveyNavigationButton extends ReactSurveyElement {
-    get item() {
-        return this.props.item;
-    }
-    canRender() {
-        return this.item.isVisible;
-    }
-    renderElement() {
-        return (React.createElement("input", { className: this.item.innerCss, type: "button", disabled: this.item.disabled, onMouseDown: this.item.data && this.item.data.mouseDown, onClick: this.item.action, title: this.item.getTooltip(), value: this.item.title }));
-    }
-}
-ReactElementFactory.Instance.registerElement("sv-nav-btn", (props) => {
-    return React.createElement(SurveyNavigationButton, props);
-});
-
 class QuestionErrorComponent extends React.Component {
     render() {
         const error = this.props.error;
@@ -6300,6 +6128,36 @@ ReactElementFactory.Instance.registerElement("sv-skeleton", (props) => {
     return React.createElement(Skeleton, props);
 });
 
+class CharacterCounterComponent extends SurveyElementBase {
+    get counter() {
+        if (!!this.props.item) {
+            return this.props.item.data.counter;
+        }
+        else {
+            return this.props.counter;
+        }
+    }
+    get remainingCharacterCounter() {
+        if (!!this.props.item) {
+            return this.props.item.data.remainingCharacterCounter;
+        }
+        else {
+            return this.props.remainingCharacterCounter;
+        }
+    }
+    getStateElement() {
+        return this.counter;
+    }
+    renderElement() {
+        if (!this.counter)
+            return null;
+        return (React.createElement("div", { className: this.remainingCharacterCounter }, this.counter.remainingCharacterCounter));
+    }
+}
+ReactElementFactory.Instance.registerElement("sv-character-counter", (props) => {
+    return React.createElement(CharacterCounterComponent, props);
+});
+
 class HeaderMobile extends React.Component {
     get model() {
         return this.props.model;
@@ -6423,7 +6281,7 @@ ReactElementFactory.Instance.registerElement(LocalizableString.editableRenderer,
     return React.createElement(SurveyLocStringEditor, props);
 });
 
-checkLibraryVersion(`${"2.5.16"}`, "survey-react-ui");
+checkLibraryVersion(`${"3.0.0-beta.1"}`, "survey-react-ui");
 
-export { CharacterCounterComponent, ComponentsContainer, Header, HeaderCell, HeaderMobile, List, ListItemContent, ListItemGroup, LoadingIndicatorComponent, LogoImage, MatrixRow, NotifierComponent, Popup, PopupModal, PopupSurvey, QuestionErrorComponent, RatingDropdownItem, RatingItem, RatingItemSmiley, RatingItemStar, ReactElementFactory, ReactQuestionFactory, ReactSurveyElement, ReactSurveyElementsWrapper, Scroll, Skeleton, SliderLabelItem, Survey, SurveyActionBar, SurveyElementBase, SurveyElementErrors, SurveyFileChooseButton, SurveyFileItem, SurveyFilePreview, SurveyFlowPanel, SurveyHeader, SurveyLocStringEditor, SurveyLocStringViewer, SurveyNavigationBase, SurveyNavigationButton, SurveyPage, SurveyPanel, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestion, SurveyQuestionAndErrorsCell, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionButtonGroup, SurveyQuestionButtonGroupDropdown, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionComment, SurveyQuestionCommentItem, SurveyQuestionComposite, SurveyQuestionCustom, SurveyQuestionDropdown, SurveyQuestionDropdownBase, SurveyQuestionDropdownSelect, SurveyQuestionElementBase, SurveyQuestionEmpty, SurveyQuestionExpression, SurveyQuestionFile, SurveyQuestionHtml, SurveyQuestionImage, SurveyQuestionImageMap, SurveyQuestionImagePicker, SurveyQuestionMatrix, SurveyQuestionMatrixCell, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixRow, SurveyQuestionMultipleText, SurveyQuestionOptionItem, SurveyQuestionPanelDynamic, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicProgressText, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionRadioItem, SurveyQuestionRadiogroup, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionSignaturePad, SurveyQuestionSlider, SurveyQuestionTagbox, SurveyQuestionTagboxItem, SurveyQuestionText, SurveyRow, SurveyTimerPanel, SurveyWindow, SvgBundleComponent, SvgIcon, TagboxFilterString, TitleActions, TitleElement, attachKey2click };
+export { CharacterCounterComponent, ComponentsContainer, Header, HeaderCell, HeaderMobile, List, ListItemContent, ListItemGroup, LoadingIndicatorComponent, LogoImage, MatrixRow, NotifierComponent, Popup, PopupModal, PopupSurvey, QuestionErrorComponent, RatingDropdownItem, RatingItem, RatingItemSmiley, RatingItemStar, ReactElementFactory, ReactQuestionFactory, ReactSurveyElement, ReactSurveyElementsWrapper, Scroll, Skeleton, SliderLabelItem, Survey, SurveyActionBar, SurveyElementBase, SurveyElementErrors, SurveyFileChooseButton, SurveyFileItem, SurveyFilePreview, SurveyFlowPanel, SurveyHeader, SurveyLocStringEditor, SurveyLocStringViewer, SurveyNavigationBase, SurveyPage, SurveyPanel, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestion, SurveyQuestionAndErrorsCell, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionButtonGroup, SurveyQuestionButtonGroupDropdown, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionComment, SurveyQuestionCommentItem, SurveyQuestionComposite, SurveyQuestionCustom, SurveyQuestionDropdown, SurveyQuestionDropdownBase, SurveyQuestionDropdownSelect, SurveyQuestionElementBase, SurveyQuestionEmpty, SurveyQuestionExpression, SurveyQuestionFile, SurveyQuestionHtml, SurveyQuestionImage, SurveyQuestionImageMap, SurveyQuestionImagePicker, SurveyQuestionMatrix, SurveyQuestionMatrixCell, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionMatrixRow, SurveyQuestionMultipleText, SurveyQuestionOptionItem, SurveyQuestionPanelDynamic, SurveyQuestionPanelDynamicProgressText, SurveyQuestionRadioItem, SurveyQuestionRadiogroup, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionSignaturePad, SurveyQuestionSlider, SurveyQuestionTagbox, SurveyQuestionTagboxItem, SurveyQuestionText, SurveyRow, SurveyTimerPanel, SurveyWindow, SvgBundleComponent, SvgIcon, TagboxFilterString, TitleActions, TitleElement, attachKey2click };
 //# sourceMappingURL=survey-react-ui.mjs.map