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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +1 -1
  2. package/fesm/survey-react-ui.mjs +91 -57
  3. package/fesm/survey-react-ui.mjs.map +1 -1
  4. package/index.html +3 -0
  5. package/package.json +2 -2
  6. package/survey-react-ui.js +104 -61
  7. package/survey-react-ui.js.map +1 -1
  8. package/survey-react-ui.min.js +4 -3
  9. package/typings/src/components/character-counter.d.ts +8 -4
  10. package/typings/src/components/text-area.d.ts +4 -0
  11. package/typings/src/dropdown-select.d.ts +1 -1
  12. package/typings/src/reactquestion_comment.d.ts +0 -1
  13. package/typings/src/reactquestion_text.d.ts +1 -0
  14. package/survey-react-ui.min.js.LICENSE.txt +0 -15
package/index.html CHANGED
@@ -10,7 +10,10 @@
10
10
  <script src="https://unpkg.com/react-dom@16.5.0/umd/react-dom.development.js"></script>
11
11
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
12
12
  <script src="./node_modules/survey-core/survey.core.js"></script>
13
+ <script src="./node_modules/survey-core/themes/index.js"></script>
14
+ <script src="./node_modules/survey-core/themes/test.js"></script>
13
15
  <link rel="stylesheet" href="./node_modules/survey-core/survey-core.css" />
16
+ <script src="./build/survey-react-ui.js"></script>
14
17
  </head>
15
18
 
16
19
  <body spellcheck="false">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "survey-react-ui",
3
- "version": "3.0.0-beta.0",
3
+ "version": "3.0.0-beta.1",
4
4
  "license": "MIT",
5
5
  "author": "DevSoft Baltic OU <info@devsoftbaltic.com>",
6
6
  "homepage": "https://surveyjs.io/",
@@ -51,7 +51,7 @@
51
51
  }
52
52
  },
53
53
  "peerDependencies": {
54
- "survey-core": "3.0.0-beta.0",
54
+ "survey-core": "3.0.0-beta.1",
55
55
  "react": "^16.5.0 || ^17.0.1 || ^18.1.0 || ^19.0.0",
56
56
  "react-dom": "^16.5.0 || ^17.0.1 || ^18.1.0 || ^19.0.0"
57
57
  }
package/survey-react-ui.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v3.0.0-beta.0
2
+ * surveyjs - Survey JavaScript library v3.0.0-beta.1
3
3
  * Copyright (c) 2015-2026 Devsoft Baltic OÜ - http://surveyjs.io/
4
4
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
5
5
  */
@@ -1447,6 +1447,8 @@
1447
1447
 
1448
1448
  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>";
1449
1449
 
1450
+ 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>";
1451
+
1450
1452
  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>";
1451
1453
 
1452
1454
  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>";
@@ -1535,6 +1537,7 @@
1535
1537
  "flip-24x24": flip_24x24$1,
1536
1538
  "folder-24x24": folder_24x24$1,
1537
1539
  "fullsize-16x16": fullsize_16x16$1,
1540
+ "grip": grip$1,
1538
1541
  "image-48x48": image_48x48$1,
1539
1542
  "loading-48x48": loading_48x48$1,
1540
1543
  "maximize-16x16": maximize_16x16$1,
@@ -1633,6 +1636,8 @@
1633
1636
 
1634
1637
  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>";
1635
1638
 
1639
+ 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>";
1640
+
1636
1641
  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>";
1637
1642
 
1638
1643
  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>";
@@ -1721,6 +1726,7 @@
1721
1726
  "flip-24x24": flip_24x24,
1722
1727
  "folder-24x24": folder_24x24,
1723
1728
  "fullsize-16x16": fullsize_16x16,
1729
+ "grip": grip,
1724
1730
  "image-48x48": image_48x48,
1725
1731
  "loading-48x48": loading_48x48,
1726
1732
  "maximize-16x16": maximize_16x16,
@@ -2486,29 +2492,13 @@
2486
2492
  return SurveyPanelBase;
2487
2493
  }(SurveyElementBase));
2488
2494
 
2489
- var CharacterCounterComponent = /** @class */ (function (_super) {
2490
- __extends(CharacterCounterComponent, _super);
2491
- function CharacterCounterComponent() {
2492
- return _super !== null && _super.apply(this, arguments) || this;
2493
- }
2494
- CharacterCounterComponent.prototype.getStateElement = function () {
2495
- return this.props.counter;
2496
- };
2497
- CharacterCounterComponent.prototype.renderElement = function () {
2498
- return (React__namespace.createElement("div", { className: this.props.remainingCharacterCounter }, this.props.counter.remainingCharacterCounter));
2499
- };
2500
- return CharacterCounterComponent;
2501
- }(SurveyElementBase));
2502
- ReactElementFactory.Instance.registerElement("sv-character-counter", function (props) {
2503
- return React__namespace.createElement(CharacterCounterComponent, props);
2504
- });
2505
-
2506
2495
  var TextAreaComponent = /** @class */ (function (_super) {
2507
2496
  __extends(TextAreaComponent, _super);
2508
2497
  function TextAreaComponent(props) {
2509
2498
  var _this = _super.call(this, props) || this;
2510
- _this.initialValue = _this.viewModel.getTextValue() || "";
2511
2499
  _this.textareaRef = React__namespace.createRef();
2500
+ _this.anchorRef = React__namespace.createRef();
2501
+ _this.initialValue = _this.viewModel.getTextValue() || "";
2512
2502
  return _this;
2513
2503
  }
2514
2504
  Object.defineProperty(TextAreaComponent.prototype, "viewModel", {
@@ -2523,18 +2513,38 @@
2523
2513
  };
2524
2514
  TextAreaComponent.prototype.componentDidMount = function () {
2525
2515
  _super.prototype.componentDidMount.call(this);
2516
+ if (this.anchorRef.current && this.textareaRef.current && this.viewModel.question.resizeStyle !== "none") {
2517
+ this.resizeManager = new surveyCore.ResizeManager(this.anchorRef.current, this.textareaRef.current, this.viewModel.question.resizeStyle);
2518
+ }
2526
2519
  var el = this.textareaRef.current;
2527
2520
  if (!!el) {
2528
2521
  this.viewModel.setElement(el);
2529
2522
  }
2530
2523
  };
2531
2524
  TextAreaComponent.prototype.componentWillUnmount = function () {
2525
+ var _a;
2532
2526
  _super.prototype.componentWillUnmount.call(this);
2527
+ (_a = this.resizeManager) === null || _a === void 0 ? void 0 : _a.dispose();
2533
2528
  this.viewModel.resetElement();
2534
2529
  };
2530
+ TextAreaComponent.prototype.onContainerClick = function (event) {
2531
+ var _a;
2532
+ if (event.target == event.currentTarget) {
2533
+ (_a = this.textareaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
2534
+ }
2535
+ };
2536
+ TextAreaComponent.prototype.renderGroup = function () {
2537
+ return this.viewModel.hasVisibleInputActions ? React__namespace.createElement(SurveyActionBar, { model: this.viewModel.inputActionsContainer }) : null;
2538
+ };
2535
2539
  TextAreaComponent.prototype.renderElement = function () {
2536
2540
  var _this = this;
2537
- return (React__namespace.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: function (event) { _this.viewModel.onTextAreaInput(event); }, onFocus: function (event) { _this.viewModel.onTextAreaFocus(event); }, onBlur: function (event) { _this.viewModel.onTextAreaBlur(event); }, onKeyDown: function (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 } }));
2541
+ var cssClasses = this.viewModel.getCssClasses();
2542
+ return (React__namespace.createElement("div", { className: cssClasses.root, onClick: function (event) { return _this.onContainerClick(event); } },
2543
+ React__namespace.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: function (event) { _this.viewModel.onTextAreaInput(event); }, onFocus: function (event) { _this.viewModel.onTextAreaFocus(event); }, onBlur: function (event) { _this.viewModel.onTextAreaBlur(event); }, onKeyDown: function (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" } }),
2544
+ this.renderGroup(),
2545
+ this.viewModel.question.resizeStyle !== "none" ?
2546
+ React__namespace.createElement("div", { className: cssClasses.grip, ref: this.anchorRef },
2547
+ React__namespace.createElement(SvgIcon, { iconName: cssClasses.gripIconId, size: "auto" })) : null));
2538
2548
  };
2539
2549
  return TextAreaComponent;
2540
2550
  }(SurveyElementBase));
@@ -2547,22 +2557,13 @@
2547
2557
  function SurveyQuestionComment(props) {
2548
2558
  return _super.call(this, props) || this;
2549
2559
  }
2550
- SurveyQuestionComment.prototype.renderCharacterCounter = function () {
2551
- var counter = null;
2552
- if (!!this.question.getMaxLength()) {
2553
- counter = React__namespace.createElement(CharacterCounterComponent, { counter: this.question.characterCounter, remainingCharacterCounter: this.question.cssClasses.remainingCharacterCounter });
2554
- }
2555
- return counter;
2556
- };
2557
2560
  SurveyQuestionComment.prototype.renderElement = function () {
2558
2561
  if (this.question.isReadOnlyRenderDiv()) {
2559
2562
  return React__namespace.createElement("div", null, this.question.value);
2560
2563
  }
2561
- var counter = this.renderCharacterCounter();
2562
2564
  var textAreaModel = this.props.question.textAreaModel;
2563
2565
  return (React__namespace.createElement(React__namespace.Fragment, null,
2564
- React__namespace.createElement(TextAreaComponent, { viewModel: textAreaModel }),
2565
- counter));
2566
+ React__namespace.createElement(TextAreaComponent, { viewModel: textAreaModel })));
2566
2567
  };
2567
2568
  return SurveyQuestionComment;
2568
2569
  }(SurveyQuestionUncontrolledElement));
@@ -4271,16 +4272,17 @@
4271
4272
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
4272
4273
  // @ts-ignore
4273
4274
  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: function (div) { return (_this.setControl(div)); } },
4274
- dropdownListModel.showHintPrefix ?
4275
- (React__namespace.createElement("div", { className: this.question.cssClasses.hintPrefix },
4276
- React__namespace.createElement("span", null, dropdownListModel.hintStringPrefix))) : null,
4277
4275
  React__namespace.createElement("div", { className: this.question.cssClasses.controlValue },
4278
- dropdownListModel.showHintString ?
4279
- (React__namespace.createElement("div", { className: this.question.cssClasses.hintSuffix },
4280
- React__namespace.createElement("span", { style: { visibility: "hidden" }, "data-bind": "text: model.filterString" }, dropdownListModel.inputStringRendered),
4281
- React__namespace.createElement("span", null, dropdownListModel.hintStringSuffix))) : null,
4282
- valueElement,
4283
- dropdownListModel.needRenderInput ? this.renderFilterInput() : null),
4276
+ dropdownListModel.showHintPrefix ?
4277
+ (React__namespace.createElement("div", { className: this.question.cssClasses.hintPrefix },
4278
+ React__namespace.createElement("span", null, dropdownListModel.hintStringPrefix))) : null,
4279
+ React__namespace.createElement("div", { className: this.question.cssClasses.inputPrefixWrapper },
4280
+ dropdownListModel.showHintString ?
4281
+ (React__namespace.createElement("div", { className: this.question.cssClasses.hintSuffix },
4282
+ React__namespace.createElement("span", { style: { visibility: "hidden" }, "data-bind": "text: model.filterString" }, dropdownListModel.inputStringRendered),
4283
+ React__namespace.createElement("span", null, dropdownListModel.hintStringSuffix))) : null,
4284
+ valueElement,
4285
+ dropdownListModel.needRenderInput ? this.renderFilterInput() : null)),
4284
4286
  this.renderEditorButtons()));
4285
4287
  };
4286
4288
  SurveyQuestionDropdownBase.prototype.renderFilterInput = function () {
@@ -4439,18 +4441,16 @@
4439
4441
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
4440
4442
  // @ts-ignore
4441
4443
  React__namespace.createElement("div", { id: this.question.inputId, className: this.question.getControlClass(), disabled: true }, this.question.readOnlyText)) :
4442
- (React__namespace.createElement("select", { id: this.question.inputId, className: this.question.getControlClass(), ref: function (select) { return (_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 },
4444
+ (React__namespace.createElement("select", { id: this.question.inputId, className: cssClasses.controlValue, ref: function (select) { return (_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 },
4443
4445
  this.question.allowClear ? (React__namespace.createElement("option", { value: "" }, this.question.placeholder)) : null,
4444
4446
  this.question.visibleChoices.map(function (item) { return React__namespace.createElement(SurveyQuestionOptionItem, { key: item.uniqueId, item: item }); })));
4445
4447
  return (React__namespace.createElement("div", { className: cssClasses.selectWrapper },
4446
- selectElement,
4447
- this.createChevronButton()));
4448
+ React__namespace.createElement("div", { className: this.question.getControlClass() },
4449
+ selectElement,
4450
+ this.renderEditorButtons())));
4448
4451
  };
4449
- SurveyQuestionDropdownSelect.prototype.createChevronButton = function () {
4450
- if (!this.question.cssClasses.chevronButtonIconId)
4451
- return null;
4452
- return (React__namespace.createElement("div", { className: this.question.cssClasses.chevronButton, "aria-hidden": "true", onPointerDown: this.chevronPointerDown },
4453
- React__namespace.createElement(SvgIcon, { className: this.question.cssClasses.chevronButtonSvg, iconName: this.question.cssClasses.chevronButtonIconId, size: "auto" })));
4452
+ SurveyQuestionDropdownSelect.prototype.renderEditorButtons = function () {
4453
+ return React__namespace.createElement(SurveyActionBar, { model: this.question.inputActionBar });
4454
4454
  };
4455
4455
  return SurveyQuestionDropdownSelect;
4456
4456
  }(SurveyQuestionDropdown));
@@ -5154,21 +5154,21 @@
5154
5154
  if (this.question.isReadOnlyRenderDiv()) {
5155
5155
  return React__namespace.createElement("div", null, this.question.inputValue);
5156
5156
  }
5157
- var counter = !!this.question.getMaxLength() ? (React__namespace.createElement(CharacterCounterComponent, { counter: this.question.characterCounter, remainingCharacterCounter: this.question.cssClasses.remainingCharacterCounter })) : null;
5158
- return (React__namespace.createElement(React__namespace.Fragment, null,
5159
- React__namespace.createElement("input", { id: this.question.inputId,
5160
- // disabled={this.isDisplayMode}
5161
- disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, className: inputClass, type: this.question.inputType,
5162
- //ref={this.controlRef}
5163
- ref: function (input) { return (_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: function (event) { _this.question.onBlur(event); }, onFocus: function (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: function (event) { return _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 }),
5164
- counter));
5157
+ return (React__namespace.createElement("input", { id: this.question.inputId,
5158
+ // disabled={this.isDisplayMode}
5159
+ disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, className: inputClass, type: this.question.inputType,
5160
+ //ref={this.controlRef}
5161
+ ref: function (input) { return (_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: function (event) { _this.question.onBlur(event); }, onFocus: function (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: function (event) { return _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 }));
5162
+ };
5163
+ SurveyQuestionText.prototype.renderGroup = function () {
5164
+ return this.question.hasVisibleInputActions ? React__namespace.createElement(SurveyActionBar, { model: this.question.inputActionsContainer }) : null;
5165
5165
  };
5166
5166
  SurveyQuestionText.prototype.renderElement = function () {
5167
- return (this.question.dataListId ?
5168
- React__namespace.createElement("div", null,
5169
- this.renderInput(),
5170
- this.renderDataList()) :
5171
- this.renderInput());
5167
+ var _this = this;
5168
+ return (React__namespace.createElement("div", { className: this.question.getRootClass(), onClick: function (event) { return _this.question.onContainerClick(event); } },
5169
+ this.renderInput(),
5170
+ this.renderDataList(),
5171
+ this.renderGroup()));
5172
5172
  };
5173
5173
  SurveyQuestionText.prototype.setValueCore = function (newValue) {
5174
5174
  this.question.inputValue = newValue;
@@ -7401,6 +7401,49 @@
7401
7401
  return React__namespace.createElement(Skeleton, props);
7402
7402
  });
7403
7403
 
7404
+ var CharacterCounterComponent = /** @class */ (function (_super) {
7405
+ __extends(CharacterCounterComponent, _super);
7406
+ function CharacterCounterComponent() {
7407
+ return _super !== null && _super.apply(this, arguments) || this;
7408
+ }
7409
+ Object.defineProperty(CharacterCounterComponent.prototype, "counter", {
7410
+ get: function () {
7411
+ if (!!this.props.item) {
7412
+ return this.props.item.data.counter;
7413
+ }
7414
+ else {
7415
+ return this.props.counter;
7416
+ }
7417
+ },
7418
+ enumerable: false,
7419
+ configurable: true
7420
+ });
7421
+ Object.defineProperty(CharacterCounterComponent.prototype, "remainingCharacterCounter", {
7422
+ get: function () {
7423
+ if (!!this.props.item) {
7424
+ return this.props.item.data.remainingCharacterCounter;
7425
+ }
7426
+ else {
7427
+ return this.props.remainingCharacterCounter;
7428
+ }
7429
+ },
7430
+ enumerable: false,
7431
+ configurable: true
7432
+ });
7433
+ CharacterCounterComponent.prototype.getStateElement = function () {
7434
+ return this.counter;
7435
+ };
7436
+ CharacterCounterComponent.prototype.renderElement = function () {
7437
+ if (!this.counter)
7438
+ return null;
7439
+ return (React__namespace.createElement("div", { className: this.remainingCharacterCounter }, this.counter.remainingCharacterCounter));
7440
+ };
7441
+ return CharacterCounterComponent;
7442
+ }(SurveyElementBase));
7443
+ ReactElementFactory.Instance.registerElement("sv-character-counter", function (props) {
7444
+ return React__namespace.createElement(CharacterCounterComponent, props);
7445
+ });
7446
+
7404
7447
  var HeaderMobile = /** @class */ (function (_super) {
7405
7448
  __extends(HeaderMobile, _super);
7406
7449
  function HeaderMobile() {
@@ -7562,7 +7605,7 @@
7562
7605
  return React__namespace.createElement(SurveyLocStringEditor, props);
7563
7606
  });
7564
7607
 
7565
- surveyCore.checkLibraryVersion("".concat("3.0.0-beta.0"), "survey-react-ui");
7608
+ surveyCore.checkLibraryVersion("".concat("3.0.0-beta.1"), "survey-react-ui");
7566
7609
 
7567
7610
  Object.defineProperty(exports, "Model", {
7568
7611
  enumerable: true,