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

package/README.md

@@ -4,7 +4,7 @@
 <video src="https://github.com/surveyjs/survey-library/assets/22315929/b24a68bf-d703-4096-835b-752f5f610aa6"></video>
 
 
-[![Build Status](https://dev.azure.com/SurveyJS/SurveyJS%20Integration%20Tests/_apis/build/status/SurveyJS%20Library?branchName=master)](https://dev.azure.com/SurveyJS/SurveyJS%20Integration%20Tests/_build/latest?definitionId=7&branchName=master)
+[![Build Status](https://dev.azure.com/SurveyJS/V2%20Libraries/_apis/build/status%2Flibrary%2FLibrary%20Main?repoName=surveyjs%2Fsurvey-library&branchName=master)](https://dev.azure.com/SurveyJS/V2%20Libraries/_build/latest?definitionId=130&repoName=surveyjs%2Fsurvey-library&branchName=master)
 [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat)](LICENSE)
 [![Tested with Playwright](https://img.shields.io/badge/tested%20with-Playwright-2fa4cf.svg)](https://playwright.dev)
 <a href="https://github.com/surveyjs/survey-library/issues">

package/fesm/survey-react-ui.mjs

@@ -1,10 +1,10 @@
 /*!
- * surveyjs - Survey JavaScript library v3.0.0-beta.0
+ * 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';
@@ -1186,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>";
@@ -1274,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,
@@ -1372,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>";
@@ -1460,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,
@@ -2123,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;
@@ -2149,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) => {
@@ -2167,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);
     }
@@ -2181,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 {
@@ -3566,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() {
@@ -3714,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) => {
@@ -4272,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;
@@ -6124,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;
@@ -6247,7 +6281,7 @@ ReactElementFactory.Instance.registerElement(LocalizableString.editableRenderer,
     return React.createElement(SurveyLocStringEditor, props);
 });
 
-checkLibraryVersion(`${"3.0.0-beta.0"}`, "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, 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