@nutui/nutui-react-taro 3.0.19-cpp.15 → 3.0.19-cpp.17

package/dist/cjs/packages/checkbox/checkbox.js

@@ -29,12 +29,13 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     icon: null,
     activeIcon: null,
     indeterminateIcon: null,
+    timeout: 300,
     onChange: function onChange(value) {}
 });
 var classPrefix = 'nut-checkbox';
 var Checkbox = function Checkbox(props) {
     var children = (0, _object_spread._)({}, defaultProps, props).children;
-    var icon = props.icon, label = props.label, className = props.className, activeIcon = props.activeIcon, checked = props.checked, value = props.value, defaultChecked = props.defaultChecked, shape = props.shape, disabled = props.disabled, onChange = props.onChange, indeterminate = props.indeterminate, indeterminateIcon = props.indeterminateIcon, others = (0, _object_without_properties._)(props, [
+    var icon = props.icon, label = props.label, className = props.className, activeIcon = props.activeIcon, checked = props.checked, value = props.value, defaultChecked = props.defaultChecked, shape = props.shape, disabled = props.disabled, onChange = props.onChange, indeterminate = props.indeterminate, indeterminateIcon = props.indeterminateIcon, timeout = props.timeout, others = (0, _object_without_properties._)(props, [
         "icon",
         "label",
         "className",
@@ -46,7 +47,8 @@ var Checkbox = function Checkbox(props) {
         "disabled",
         "onChange",
         "indeterminate",
-        "indeterminateIcon"
+        "indeterminateIcon",
+        "timeout"
     ]);
     // eslint-disable-next-line prefer-const
     var labelPosition = others.labelPosition, rest = (0, _object_without_properties._)(others, [
@@ -140,9 +142,15 @@ var Checkbox = function Checkbox(props) {
             className: (0, _classnames.default)("".concat(classPrefix, "-label "), (0, _define_property._)({}, "".concat(classPrefix, "-label-disabled"), innerDisabled))
         }, children || label);
     };
+    var loadingRef = (0, _react.useRef)(false);
     var handleClick = function handleClick() {
         // 禁用的时候直接返回
         if (disabled) return;
+        if (loadingRef.current) return;
+        loadingRef.current = true;
+        setTimeout(function() {
+            loadingRef.current = false;
+        }, timeout);
         // 先转换状态
         var latestChecked = !innerChecked;
         setChecked(latestChecked);

package/dist/cjs/packages/dialog/style/dialog.scss

@@ -141,14 +141,14 @@
       }
     }
 
-    &-ok-container{
+    &-ok-container {
       position: relative;
       display: flex;
       align-items: center;
       width: 100%;
       justify-content: space-around;
 
-      .nut-dialog-footer-ok-badge{
+      .nut-dialog-footer-ok-badge {
         position: absolute;
         right: 0;
         top: $dialog-footer-badge-top;
@@ -161,7 +161,6 @@
         font-size: $dialog-footer-badge-fontsize;
         color: $dialog-footer-badge-color-ok;
       }
-
     }
 
     &-ok {
@@ -170,7 +169,6 @@
       .nut-button-children {
         font-weight: $font-weight-medium;
       }
-
     }
 
     &-block {
@@ -179,14 +177,14 @@
       }
     }
 
-    &-cancel-container{
+    &-cancel-container {
       position: relative;
       display: flex;
       align-items: center;
       width: 100%;
       justify-content: space-around;
 
-      .nut-dialog-footer-cancel-badge{
+      .nut-dialog-footer-cancel-badge {
         position: absolute;
         right: $dialog-footer-cancel-margin-right;
         top: $dialog-footer-badge-top;

package/dist/cjs/packages/dialog/style-jmapp/dialog.scss

@@ -141,14 +141,14 @@
       }
     }
 
-    &-ok-container{
+    &-ok-container {
       position: relative;
       display: flex;
       align-items: center;
       width: 100%;
       justify-content: space-around;
 
-      .nut-dialog-footer-ok-badge{
+      .nut-dialog-footer-ok-badge {
         position: absolute;
         right: 0;
         top: $dialog-footer-badge-top;
@@ -161,7 +161,6 @@
         font-size: $dialog-footer-badge-fontsize;
         color: $dialog-footer-badge-color-ok;
       }
-
     }
 
     &-ok {
@@ -170,7 +169,6 @@
       .nut-button-children {
         font-weight: $font-weight-medium;
       }
-
     }
 
     &-block {
@@ -179,14 +177,14 @@
       }
     }
 
-    &-cancel-container{
+    &-cancel-container {
       position: relative;
       display: flex;
       align-items: center;
       width: 100%;
       justify-content: space-around;
 
-      .nut-dialog-footer-cancel-badge{
+      .nut-dialog-footer-cancel-badge {
         position: absolute;
         right: $dialog-footer-cancel-margin-right;
         top: $dialog-footer-badge-top;

package/dist/cjs/packages/dialog/style-jrkf/dialog.scss

@@ -141,14 +141,14 @@
       }
     }
 
-    &-ok-container{
+    &-ok-container {
       position: relative;
       display: flex;
       align-items: center;
       width: 100%;
       justify-content: space-around;
 
-      .nut-dialog-footer-ok-badge{
+      .nut-dialog-footer-ok-badge {
         position: absolute;
         right: 0;
         top: $dialog-footer-badge-top;
@@ -161,7 +161,6 @@
         font-size: $dialog-footer-badge-fontsize;
         color: $dialog-footer-badge-color-ok;
       }
-
     }
 
     &-ok {
@@ -170,7 +169,6 @@
       .nut-button-children {
         font-weight: $font-weight-medium;
       }
-
     }
 
     &-block {
@@ -179,14 +177,14 @@
       }
     }
 
-    &-cancel-container{
+    &-cancel-container {
       position: relative;
       display: flex;
       align-items: center;
       width: 100%;
       justify-content: space-around;
 
-      .nut-dialog-footer-cancel-badge{
+      .nut-dialog-footer-cancel-badge {
         position: absolute;
         right: $dialog-footer-cancel-margin-right;
         top: $dialog-footer-badge-top;

package/dist/cjs/packages/tabs/tabs.js

@@ -27,6 +27,7 @@ var _useforceupdate = require("../../hooks/use-force-update");
 var _raf = /*#__PURE__*/ _interop_require_default._(require("../../utils/raf"));
 var _useuuid = require("../../hooks/use-uuid");
 var _configprovider = require("../configprovider/configprovider");
+var _platform = require("../../utils/taro/platform");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     tabStyle: {},
     activeColor: '',
@@ -162,6 +163,13 @@ var Tabs = function Tabs(props) {
             return String(t.value) === String(value);
         });
         index = index < 0 ? 0 : index;
+        // 适配 安卓 处理，临时方案，hack
+        if ((0, _platform.td)()) {
+            return {
+                transform: direction === 'horizontal' ? "translate3d(".concat(rtl ? '' : '-').concat(index * 50, "%, 0, 0)") : "translate3d( 0, -".concat(index * 50, "%, 0)"),
+                transitionDuration: "".concat(duration, "ms")
+            };
+        }
         return {
             transform: direction === 'horizontal' ? "translate3d(".concat(rtl ? '' : '-').concat(index * 100, "%, 0, 0)") : "translate3d( 0, -".concat(index * 100, "%, 0)"),
             transitionDuration: "".concat(duration, "ms")

package/dist/cjs/packages/textarea/textarea.js

@@ -34,7 +34,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
 });
 var TextArea = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
     var locale = (0, _index.useConfig)().locale;
-    var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, value = _ref.value, defaultValue = _ref.defaultValue, showCount = _ref.showCount, maxLength = _ref.maxLength, rows = _ref.rows, placeholder = _ref.placeholder, readOnly = _ref.readOnly, disabled = _ref.disabled, autoSize = _ref.autoSize, style = _ref.style, plain = _ref.plain, status = _ref.status, onChange = _ref.onChange, onBlur = _ref.onBlur, onFocus = _ref.onFocus, rest = (0, _object_without_properties._)(_ref, [
+    var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, value = _ref.value, defaultValue = _ref.defaultValue, showCount = _ref.showCount, maxLength = _ref.maxLength, rows = _ref.rows, placeholder = _ref.placeholder, readOnly = _ref.readOnly, disabled = _ref.disabled, autoSize = _ref.autoSize, style = _ref.style, plain = _ref.plain, status = _ref.status, viewId = _ref.viewId, onChange = _ref.onChange, onBlur = _ref.onBlur, onFocus = _ref.onFocus, rest = (0, _object_without_properties._)(_ref, [
         "className",
         "value",
         "defaultValue",
@@ -48,6 +48,7 @@ var TextArea = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
         "style",
         "plain",
         "status",
+        "viewId",
         "onChange",
         "onBlur",
         "onFocus"
@@ -109,6 +110,7 @@ var TextArea = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
     });
     var _obj;
     return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_components.View, {
+        id: viewId,
         className: (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-disabled"), disabled), (0, _define_property._)(_obj, "".concat(classPrefix, "-readonly"), readOnly), (0, _define_property._)(_obj, "".concat(classPrefix, "-rtl"), rtl), (0, _define_property._)(_obj, "".concat(classPrefix, "-plain"), plain), (0, _define_property._)(_obj, "".concat(classPrefix, "-container"), !plain), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(status), status), _obj), className)
     }, /*#__PURE__*/ _react.default.createElement(_components.Textarea, (0, _object_spread_props._)((0, _object_spread._)({}, rest), {
         ref: textareaRef,

package/dist/cjs/types/spec/checkbox/base.d.ts

@@ -22,6 +22,7 @@ export interface BaseCheckbox extends BaseProps {
     value: string | number;
     indeterminate: boolean;
     label: ReactNode;
+    timeout: number;
     onChange: (value: boolean) => void;
 }
 export interface BaseCheckboxGroup extends BaseProps {

package/dist/cjs/types/spec/textarea/base.d.ts

@@ -1,5 +1,6 @@
 import { BaseProps } from '../../base/props';
 export interface BaseTextArea<EVENT = any> extends BaseProps {
+    viewId: string;
     value: string;
     defaultValue: string;
     showCount: boolean;

package/dist/es/packages/checkbox/checkbox.js

@@ -3,7 +3,7 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { CheckDisabled, Checked, CheckNormal } from "@nutui/icons-react-taro";
 import classNames from "classnames";
 import { View } from "@tarojs/components";
@@ -17,12 +17,13 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     icon: null,
     activeIcon: null,
     indeterminateIcon: null,
+    timeout: 300,
     onChange: function(value) {}
 });
 var classPrefix = 'nut-checkbox';
 export var Checkbox = function(props) {
     var children = _object_spread({}, defaultProps, props).children;
-    var icon = props.icon, label = props.label, className = props.className, activeIcon = props.activeIcon, checked = props.checked, value = props.value, defaultChecked = props.defaultChecked, shape = props.shape, disabled = props.disabled, onChange = props.onChange, indeterminate = props.indeterminate, indeterminateIcon = props.indeterminateIcon, others = _object_without_properties(props, [
+    var icon = props.icon, label = props.label, className = props.className, activeIcon = props.activeIcon, checked = props.checked, value = props.value, defaultChecked = props.defaultChecked, shape = props.shape, disabled = props.disabled, onChange = props.onChange, indeterminate = props.indeterminate, indeterminateIcon = props.indeterminateIcon, timeout = props.timeout, others = _object_without_properties(props, [
         "icon",
         "label",
         "className",
@@ -34,7 +35,8 @@ export var Checkbox = function(props) {
         "disabled",
         "onChange",
         "indeterminate",
-        "indeterminateIcon"
+        "indeterminateIcon",
+        "timeout"
     ]);
     // eslint-disable-next-line prefer-const
     var labelPosition = others.labelPosition, rest = _object_without_properties(others, [
@@ -128,9 +130,15 @@ export var Checkbox = function(props) {
             className: classNames("".concat(classPrefix, "-label "), _define_property({}, "".concat(classPrefix, "-label-disabled"), innerDisabled))
         }, children || label);
     };
+    var loadingRef = useRef(false);
     var handleClick = function() {
         // 禁用的时候直接返回
         if (disabled) return;
+        if (loadingRef.current) return;
+        loadingRef.current = true;
+        setTimeout(function() {
+            loadingRef.current = false;
+        }, timeout);
         // 先转换状态
         var latestChecked = !innerChecked;
         setChecked(latestChecked);

package/dist/es/packages/dialog/style/dialog.scss

@@ -141,14 +141,14 @@
       }
     }
 
-    &-ok-container{
+    &-ok-container {
       position: relative;
       display: flex;
       align-items: center;
       width: 100%;
       justify-content: space-around;
 
-      .nut-dialog-footer-ok-badge{
+      .nut-dialog-footer-ok-badge {
         position: absolute;
         right: 0;
         top: $dialog-footer-badge-top;
@@ -161,7 +161,6 @@
         font-size: $dialog-footer-badge-fontsize;
         color: $dialog-footer-badge-color-ok;
       }
-
     }
 
     &-ok {
@@ -170,7 +169,6 @@
       .nut-button-children {
         font-weight: $font-weight-medium;
       }
-
     }
 
     &-block {
@@ -179,14 +177,14 @@
       }
     }
 
-    &-cancel-container{
+    &-cancel-container {
       position: relative;
       display: flex;
       align-items: center;
       width: 100%;
       justify-content: space-around;
 
-      .nut-dialog-footer-cancel-badge{
+      .nut-dialog-footer-cancel-badge {
         position: absolute;
         right: $dialog-footer-cancel-margin-right;
         top: $dialog-footer-badge-top;

package/dist/es/packages/dialog/style-jmapp/dialog.scss

@@ -141,14 +141,14 @@
       }
     }
 
-    &-ok-container{
+    &-ok-container {
       position: relative;
       display: flex;
       align-items: center;
       width: 100%;
       justify-content: space-around;
 
-      .nut-dialog-footer-ok-badge{
+      .nut-dialog-footer-ok-badge {
         position: absolute;
         right: 0;
         top: $dialog-footer-badge-top;
@@ -161,7 +161,6 @@
         font-size: $dialog-footer-badge-fontsize;
         color: $dialog-footer-badge-color-ok;
       }
-
     }
 
     &-ok {
@@ -170,7 +169,6 @@
       .nut-button-children {
         font-weight: $font-weight-medium;
       }
-
     }
 
     &-block {
@@ -179,14 +177,14 @@
       }
     }
 
-    &-cancel-container{
+    &-cancel-container {
       position: relative;
       display: flex;
       align-items: center;
       width: 100%;
       justify-content: space-around;
 
-      .nut-dialog-footer-cancel-badge{
+      .nut-dialog-footer-cancel-badge {
         position: absolute;
         right: $dialog-footer-cancel-margin-right;
         top: $dialog-footer-badge-top;

package/dist/es/packages/dialog/style-jrkf/dialog.scss

@@ -141,14 +141,14 @@
       }
     }
 
-    &-ok-container{
+    &-ok-container {
       position: relative;
       display: flex;
       align-items: center;
       width: 100%;
       justify-content: space-around;
 
-      .nut-dialog-footer-ok-badge{
+      .nut-dialog-footer-ok-badge {
         position: absolute;
         right: 0;
         top: $dialog-footer-badge-top;
@@ -161,7 +161,6 @@
         font-size: $dialog-footer-badge-fontsize;
         color: $dialog-footer-badge-color-ok;
       }
-
     }
 
     &-ok {
@@ -170,7 +169,6 @@
       .nut-button-children {
         font-weight: $font-weight-medium;
       }
-
     }
 
     &-block {
@@ -179,14 +177,14 @@
       }
     }
 
-    &-cancel-container{
+    &-cancel-container {
       position: relative;
       display: flex;
       align-items: center;
       width: 100%;
       justify-content: space-around;
 
-      .nut-dialog-footer-cancel-badge{
+      .nut-dialog-footer-cancel-badge {
         position: absolute;
         right: $dialog-footer-cancel-margin-right;
         top: $dialog-footer-badge-top;

package/dist/es/packages/tabs/tabs.js

@@ -15,6 +15,7 @@ import { useForceUpdate } from "../../hooks/use-force-update";
 import raf from "../../utils/raf";
 import { useUuid } from "../../hooks/use-uuid";
 import { useRtl } from "../configprovider/configprovider";
+import { td } from "../../utils/taro/platform";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     tabStyle: {},
     activeColor: '',
@@ -150,6 +151,13 @@ export var Tabs = function(props) {
             return String(t.value) === String(value);
         });
         index = index < 0 ? 0 : index;
+        // 适配 安卓 处理，临时方案，hack
+        if (td()) {
+            return {
+                transform: direction === 'horizontal' ? "translate3d(".concat(rtl ? '' : '-').concat(index * 50, "%, 0, 0)") : "translate3d( 0, -".concat(index * 50, "%, 0)"),
+                transitionDuration: "".concat(duration, "ms")
+            };
+        }
         return {
             transform: direction === 'horizontal' ? "translate3d(".concat(rtl ? '' : '-').concat(index * 100, "%, 0, 0)") : "translate3d( 0, -".concat(index * 100, "%, 0)"),
             transitionDuration: "".concat(duration, "ms")

package/dist/es/packages/textarea/textarea.js

@@ -22,7 +22,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 });
 export var TextArea = /*#__PURE__*/ forwardRef(function(props, ref) {
     var locale = useConfig().locale;
-    var _ref = _object_spread({}, defaultProps, props), className = _ref.className, value = _ref.value, defaultValue = _ref.defaultValue, showCount = _ref.showCount, maxLength = _ref.maxLength, rows = _ref.rows, placeholder = _ref.placeholder, readOnly = _ref.readOnly, disabled = _ref.disabled, autoSize = _ref.autoSize, style = _ref.style, plain = _ref.plain, status = _ref.status, onChange = _ref.onChange, onBlur = _ref.onBlur, onFocus = _ref.onFocus, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps, props), className = _ref.className, value = _ref.value, defaultValue = _ref.defaultValue, showCount = _ref.showCount, maxLength = _ref.maxLength, rows = _ref.rows, placeholder = _ref.placeholder, readOnly = _ref.readOnly, disabled = _ref.disabled, autoSize = _ref.autoSize, style = _ref.style, plain = _ref.plain, status = _ref.status, viewId = _ref.viewId, onChange = _ref.onChange, onBlur = _ref.onBlur, onFocus = _ref.onFocus, rest = _object_without_properties(_ref, [
         "className",
         "value",
         "defaultValue",
@@ -36,6 +36,7 @@ export var TextArea = /*#__PURE__*/ forwardRef(function(props, ref) {
         "style",
         "plain",
         "status",
+        "viewId",
         "onChange",
         "onBlur",
         "onFocus"
@@ -97,6 +98,7 @@ export var TextArea = /*#__PURE__*/ forwardRef(function(props, ref) {
     });
     var _obj;
     return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, {
+        id: viewId,
         className: classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-disabled"), disabled), _define_property(_obj, "".concat(classPrefix, "-readonly"), readOnly), _define_property(_obj, "".concat(classPrefix, "-rtl"), rtl), _define_property(_obj, "".concat(classPrefix, "-plain"), plain), _define_property(_obj, "".concat(classPrefix, "-container"), !plain), _define_property(_obj, "".concat(classPrefix, "-").concat(status), status), _obj), className)
     }, /*#__PURE__*/ React.createElement(Textarea, _object_spread_props(_object_spread({}, rest), {
         ref: textareaRef,

package/dist/es/types/spec/checkbox/base.d.ts

@@ -52,6 +52,7 @@ export interface BaseCheckbox extends BaseProps {
     * 复选框的文本内容
     */
     label: ReactNode
+    timeout: number;
     /**
     * 值变化时触发
     */

package/dist/es/types/spec/textarea/base.d.ts

@@ -1,5 +1,6 @@
 import { BaseProps } from '../../base/props';
 export interface BaseTextArea<EVENT = any> extends BaseProps {
+    viewId: string;
     /**
     * 输入框内容，受控
     */

package/dist/nutui.react.umd.js

@@ -4303,6 +4303,12 @@
         return String(t.value) === String(value2);
       });
       index2 = index2 < 0 ? 0 : index2;
+      if (td()) {
+        return {
+          transform: direction === "horizontal" ? "translate3d(".concat(rtl ? "" : "-").concat(index2 * 50, "%, 0, 0)") : "translate3d( 0, -".concat(index2 * 50, "%, 0)"),
+          transitionDuration: "".concat(duration, "ms")
+        };
+      }
       return {
         transform: direction === "horizontal" ? "translate3d(".concat(rtl ? "" : "-").concat(index2 * 100, "%, 0, 0)") : "translate3d( 0, -".concat(index2 * 100, "%, 0)"),
         transitionDuration: "".concat(duration, "ms")
@@ -6907,13 +6913,14 @@
     icon: null,
     activeIcon: null,
     indeterminateIcon: null,
+    timeout: 300,
     onChange: function(value2) {
     }
   });
   var classPrefix$j = "nut-checkbox";
   var Checkbox = function(props) {
     var children = _object_spread({}, defaultProps$14, props).children;
-    var icon = props.icon, label = props.label, className = props.className, activeIcon = props.activeIcon, checked = props.checked, value2 = props.value, defaultChecked = props.defaultChecked, shape = props.shape, disabled = props.disabled, onChange = props.onChange, indeterminate = props.indeterminate, indeterminateIcon = props.indeterminateIcon, others = _object_without_properties(props, [
+    var icon = props.icon, label = props.label, className = props.className, activeIcon = props.activeIcon, checked = props.checked, value2 = props.value, defaultChecked = props.defaultChecked, shape = props.shape, disabled = props.disabled, onChange = props.onChange, indeterminate = props.indeterminate, indeterminateIcon = props.indeterminateIcon, timeout = props.timeout, others = _object_without_properties(props, [
       "icon",
       "label",
       "className",
@@ -6925,7 +6932,8 @@
       "disabled",
       "onChange",
       "indeterminate",
-      "indeterminateIcon"
+      "indeterminateIcon",
+      "timeout"
     ]);
     var labelPosition = others.labelPosition, rest = _object_without_properties(others, [
       "labelPosition"
@@ -7017,8 +7025,14 @@
         className: classNames("".concat(classPrefix$j, "-label "), _define_property({}, "".concat(classPrefix$j, "-label-disabled"), innerDisabled))
       }, children || label);
     };
+    var loadingRef = React.useRef(false);
     var handleClick = function() {
       if (disabled) return;
+      if (loadingRef.current) return;
+      loadingRef.current = true;
+      setTimeout(function() {
+        loadingRef.current = false;
+      }, timeout);
       var latestChecked = !innerChecked;
       setChecked(latestChecked);
     };
@@ -14163,7 +14177,7 @@
   });
   var TextArea = /* @__PURE__ */ React.forwardRef(function(props, ref) {
     var locale = useConfig().locale;
-    var _ref = _object_spread({}, defaultProps$L, props), className = _ref.className, value2 = _ref.value, defaultValue = _ref.defaultValue, showCount = _ref.showCount, maxLength = _ref.maxLength, rows = _ref.rows, placeholder = _ref.placeholder, readOnly = _ref.readOnly, disabled = _ref.disabled, autoSize = _ref.autoSize, style = _ref.style, plain = _ref.plain, status = _ref.status, onChange = _ref.onChange, onBlur = _ref.onBlur, onFocus = _ref.onFocus, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps$L, props), className = _ref.className, value2 = _ref.value, defaultValue = _ref.defaultValue, showCount = _ref.showCount, maxLength = _ref.maxLength, rows = _ref.rows, placeholder = _ref.placeholder, readOnly = _ref.readOnly, disabled = _ref.disabled, autoSize = _ref.autoSize, style = _ref.style, plain = _ref.plain, status = _ref.status, viewId = _ref.viewId, onChange = _ref.onChange, onBlur = _ref.onBlur, onFocus = _ref.onFocus, rest = _object_without_properties(_ref, [
       "className",
       "value",
       "defaultValue",
@@ -14177,6 +14191,7 @@
       "style",
       "plain",
       "status",
+      "viewId",
       "onChange",
       "onBlur",
       "onFocus"
@@ -14238,6 +14253,7 @@
     });
     var _obj;
     return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(components.View, {
+      id: viewId,
       className: classNames(classPrefix2, (_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-disabled"), disabled), _define_property(_obj, "".concat(classPrefix2, "-readonly"), readOnly), _define_property(_obj, "".concat(classPrefix2, "-rtl"), rtl), _define_property(_obj, "".concat(classPrefix2, "-plain"), plain), _define_property(_obj, "".concat(classPrefix2, "-container"), !plain), _define_property(_obj, "".concat(classPrefix2, "-").concat(status), status), _obj), className)
     }, /* @__PURE__ */ React.createElement(components.Textarea, _object_spread_props(_object_spread({}, rest), {
       ref: textareaRef,