antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.bc248f5c7

package/cjs/components/swipe-action/swipe-action.js

@@ -27,6 +27,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const classPrefix = `adm-swipe-action`;
 const defaultProps = {
   rightActions: [],
   leftActions: [],
@@ -65,6 +66,8 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
   }), []);
   const draggingRef = (0, _react.useRef)(false);
   const bind = (0, _react2.useDrag)(state => {
+    var _a;
+
     draggingRef.current = true;
     const [offsetX] = state.offset;
 
@@ -81,9 +84,15 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
         position = 0;
       }
 
+      const targetX = (0, _nearest.nearest)([-rightWidth, 0, leftWidth], position);
       api.start({
-        x: (0, _nearest.nearest)([-rightWidth, 0, leftWidth], position)
+        x: targetX
       });
+
+      if (targetX !== 0) {
+        (_a = p.onActionsReveal) === null || _a === void 0 ? void 0 : _a.call(p, targetX > 0 ? 'left' : 'right');
+      }
+
       window.setTimeout(() => {
         draggingRef.current = false;
       });
@@ -119,6 +128,8 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
 
   (0, _react.useImperativeHandle)(ref, () => ({
     show: (side = 'right') => {
+      var _a;
+
       if (side === 'right') {
         api.start({
           x: -getRightWidth()
@@ -128,6 +139,8 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
           x: getLeftWidth()
         });
       }
+
+      (_a = p.onActionsReveal) === null || _a === void 0 ? void 0 : _a.call(p, side);
     },
     close
   }));
@@ -158,7 +171,7 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
     const color = (_a = action.color) !== null && _a !== void 0 ? _a : 'light';
     return _react.default.createElement(_button.default, {
       key: action.key,
-      className: 'adm-swipe-action-action-button',
+      className: `${classPrefix}-action-button`,
       style: {
         '--background-color': (_b = colorRecord[color]) !== null && _b !== void 0 ? _b : color
       },
@@ -176,7 +189,7 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
   }
 
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", Object.assign({
-    className: 'adm-swipe-action'
+    className: classPrefix
   }, bind(), {
     ref: rootRef,
     onClickCapture: e => {
@@ -186,15 +199,15 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
       }
     }
   }), _react.default.createElement(_web.animated.div, {
-    className: 'adm-swipe-action-track',
+    className: `${classPrefix}-track`,
     style: {
       x
     }
   }, (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, _react.default.createElement("div", {
-    className: 'adm-swipe-action-actions adm-swipe-action-actions-left',
+    className: `${classPrefix}-actions ${classPrefix}-actions-left`,
     ref: leftRef
   }, props.leftActions.map(renderAction))), _react.default.createElement("div", {
-    className: 'adm-swipe-action-content',
+    className: `${classPrefix}-content`,
     onClickCapture: e => {
       if (x.goal !== 0) {
         e.preventDefault();
@@ -209,7 +222,7 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
       pointerEvents: x.to(v => v !== 0 && x.goal !== 0 ? 'none' : 'auto')
     }
   }, props.children)), (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, _react.default.createElement("div", {
-    className: 'adm-swipe-action-actions adm-swipe-action-actions-right',
+    className: `${classPrefix}-actions ${classPrefix}-actions-right`,
     ref: rightRef
   }, props.rightActions.map(renderAction))))));
 });

package/cjs/components/swiper/index.d.ts

@@ -16,10 +16,18 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     stuckAtBoundary?: boolean | undefined;
     rubberband?: boolean | undefined;
     children?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[] | undefined;
-} & import("../../utils/native-props").NativeProps<"--border-radius" | "--width" | "--height" | "--track-padding"> & import("react").RefAttributes<import("./swiper").SwiperRef>> & {
+} & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--width" | "--height" | "--border-radius" | "--track-padding", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./swiper").SwiperRef>> & {
     Item: import("react").FC<{
         onClick?: ((e: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
         children?: import("react").ReactNode;
-    } & import("../../utils/native-props").NativeProps<never>>;
+    } & {
+        className?: string | undefined;
+        style?: (import("react").CSSProperties & Partial<Record<never, string>>) | undefined;
+        tabIndex?: number | undefined;
+    } & import("react").AriaAttributes>;
 };
 export default _default;

package/cjs/components/swiper/swiper.css

@@ -20,6 +20,7 @@
   padding: var(--track-padding);
 }
 .adm-swiper-track-allow-touch-move {
+  cursor: -webkit-grab;
   cursor: grab;
 }
 .adm-swiper-track-inner {

package/cjs/components/swiper/swiper.d.ts

@@ -37,4 +37,8 @@ export declare const Swiper: React.ForwardRefExoticComponent<{
     stuckAtBoundary?: boolean | undefined;
     rubberband?: boolean | undefined;
     children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
-} & NativeProps<"--border-radius" | "--width" | "--height" | "--track-padding"> & React.RefAttributes<SwiperRef>>;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--width" | "--height" | "--border-radius" | "--track-padding", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<SwiperRef>>;

package/cjs/components/swiper/swiper.js

@@ -37,6 +37,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const classPrefix = `adm-swiper`;
 const defaultProps = {
   defaultIndex: 0,
   allowTouchMove: true,
@@ -140,7 +141,14 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
         });
       }
     }), [count]);
+    const forceDragCancelRef = (0, _react.useRef)(() => {});
     const bind = (0, _react2.useDrag)(state => {
+      forceDragCancelRef.current = () => {
+        state.cancel();
+        setDragging(false);
+      };
+
+      if (!state.intentional) return;
       const slidePixels = getSlidePixels();
       if (!slidePixels) return;
       const paramIndex = isVertical ? 1 : 0;
@@ -169,6 +177,7 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
         const slidePixels = getSlidePixels();
         return [position.get() / 100 * slidePixels, position.get() / 100 * slidePixels];
       },
+      triggerAllEvents: true,
       bounds: () => {
         if (loop) return {};
         const slidePixels = getSlidePixels();
@@ -237,10 +246,10 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
     function renderTrackInner() {
       if (loop) {
         return _react.default.createElement("div", {
-          className: 'adm-swiper-track-inner'
+          className: `${classPrefix}-track-inner`
         }, _react.default.Children.map(validChildren, (child, index) => {
           return _react.default.createElement(_web.animated.div, {
-            className: 'adm-swiper-slide',
+            className: `${classPrefix}-slide`,
             style: {
               [isVertical ? 'y' : 'x']: position.to(position => {
                 let finalPosition = -position + index * 100;
@@ -255,13 +264,13 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
         }));
       } else {
         return _react.default.createElement(_web.animated.div, {
-          className: 'adm-swiper-track-inner',
+          className: `${classPrefix}-track-inner`,
           style: {
             [isVertical ? 'y' : 'x']: position.to(position => `${-position}%`)
           }
         }, _react.default.Children.map(validChildren, child => {
           return _react.default.createElement("div", {
-            className: 'adm-swiper-slide'
+            className: `${classPrefix}-slide`
           }, child);
         }));
       }
@@ -272,20 +281,22 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
       '--track-offset': `${props.trackOffset}%`
     };
     return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
-      className: (0, _classnames.default)('adm-swiper', `adm-swiper-${props.direction}`),
+      className: (0, _classnames.default)(classPrefix, `${classPrefix}-${props.direction}`),
       style: style
     }, _react.default.createElement("div", Object.assign({
       ref: trackRef,
-      className: (0, _classnames.default)('adm-swiper-track', {
-        'adm-swiper-track-allow-touch-move': props.allowTouchMove
+      className: (0, _classnames.default)(`${classPrefix}-track`, {
+        [`${classPrefix}-track-allow-touch-move`]: props.allowTouchMove
       }),
       onClickCapture: e => {
         if (draggingRef.current) {
           e.stopPropagation();
         }
+
+        forceDragCancelRef.current();
       }
     }, props.allowTouchMove ? bind() : {}), renderTrackInner()), props.indicator === undefined ? _react.default.createElement("div", {
-      className: 'adm-swiper-indicator'
+      className: `${classPrefix}-indicator`
     }, _react.default.createElement(_pageIndicator.default, Object.assign({}, props.indicatorProps, {
       total: count,
       current: current,

package/cjs/components/swiper/swiper.patch.css

@@ -0,0 +1,21 @@
+.adm-swiper {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 0;
+}
+.adm-swiper-track {
+  padding: 0;
+}
+.adm-swiper-horizontal .adm-swiper-track {
+  transform: translateX(0%);
+}
+.adm-swiper-horizontal .adm-swiper-track-inner {
+  width: 100%;
+}
+.adm-swiper-vertical .adm-swiper-track {
+  transform: translateY(0%);
+}
+.adm-swiper-vertical .adm-swiper-track-inner {
+  height: 100%;
+}

package/cjs/components/switch/switch.css

@@ -26,7 +26,7 @@
   height: var(--height);
   box-sizing: border-box;
   border-radius: 31px;
-  background: #e5e5e5;
+  background: var(--adm-color-border);
   z-index: 0;
   overflow: hidden;
   line-height: var(--height);
@@ -40,7 +40,7 @@
   height: calc(var(--height) - 2 * var(--border-width));
   border-radius: calc(var(--height) - 2 * var(--border-width));
   box-sizing: border-box;
-  background: #fff;
+  background: var(--adm-color-background);
   z-index: 1;
   transition: all 200ms;
   transform: scale(1);
@@ -52,7 +52,7 @@
   width: calc(var(--height) - 2 * var(--border-width));
   height: calc(var(--height) - 2 * var(--border-width));
   border-radius: calc(var(--height) - 2 * var(--border-width));
-  background: #fff;
+  background: var(--adm-color-white);
   position: absolute;
   z-index: 2;
   top: var(--border-width);
@@ -70,7 +70,7 @@
   height: 100%;
   color: var(--adm-color-weak);
   transition: margin 200ms;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
 }
 .adm-switch.adm-switch-checked .adm-switch-checkbox {
   background: var(--checked-color);

package/cjs/components/switch/switch.d.ts

@@ -5,8 +5,9 @@ export declare type SwitchProps = {
     disabled?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;
+    /** @deprecated use `onChange` instead */
     beforeChange?: (val: boolean) => Promise<void>;
-    onChange?: (checked: boolean) => void;
+    onChange?: (checked: boolean) => void | Promise<void>;
     checkedText?: ReactNode;
     uncheckedText?: ReactNode;
 } & NativeProps<'--checked-color' | '--width' | '--height' | '--border-width'>;

package/cjs/components/switch/switch.js

@@ -19,6 +19,10 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _spinIcon = require("./spin-icon");
 
+var _configProvider = require("../config-provider");
+
+var _validate = require("../../utils/validate");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -34,6 +38,9 @@ const Switch = p => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const disabled = props.disabled || props.loading || false;
   const [changing, setChanging] = (0, _react.useState)(false);
+  const {
+    locale
+  } = (0, _configProvider.useConfig)();
   const [checked, setChecked] = (0, _usePropsValue.usePropsValue)({
     value: props.checked,
     defaultValue: props.defaultChecked,
@@ -53,14 +60,25 @@ const Switch = p => {
 
         try {
           yield props.beforeChange(nextChecked);
-          setChecked(nextChecked);
           setChanging(false);
         } catch (e) {
           setChanging(false);
           throw e;
         }
-      } else {
-        setChecked(nextChecked);
+      }
+
+      const result = setChecked(nextChecked);
+
+      if ((0, _validate.isPromise)(result)) {
+        setChanging(true);
+
+        try {
+          yield result;
+          setChanging(false);
+        } catch (e) {
+          setChanging(false);
+          throw e;
+        }
       }
     });
   }
@@ -70,7 +88,11 @@ const Switch = p => {
     className: (0, _classnames.default)(classPrefix, {
       [`${classPrefix}-checked`]: checked,
       [`${classPrefix}-disabled`]: disabled || changing
-    })
+    }),
+    role: 'switch',
+    "aria-label": locale.Switch.name,
+    "aria-checked": checked,
+    "aria-disabled": disabled
   }, _react.default.createElement("div", {
     className: `${classPrefix}-checkbox`
   }, _react.default.createElement("div", {

package/cjs/components/tab-bar/tab-bar.css

@@ -4,13 +4,14 @@
   justify-content: flex-start;
   align-items: stretch;
   overflow: hidden;
-  min-height: 50px;
+  min-height: 48px;
 }
 .adm-tab-bar-item {
   flex: 1;
   color: var(--adm-color-weak);
   white-space: nowrap;
   padding: 4px 8px;
+  width: -webkit-min-content;
   width: min-content;
   position: relative;
   cursor: pointer;
@@ -20,15 +21,17 @@
   flex-direction: column;
 }
 .adm-tab-bar-item-icon {
-  font-size: 20px;
-  height: 22px;
+  font-size: 24px;
+  height: 24px;
   line-height: 1;
-  margin: 4px 0 1px;
 }
 .adm-tab-bar-item-title {
-  font-size: 11px;
+  font-size: var(--adm-font-size-3);
   line-height: 15px;
 }
+.adm-tab-bar-item-title-with-icon {
+  margin-top: 2px;
+}
 .adm-tab-bar-item-active {
   color: var(--adm-color-primary);
 }

package/cjs/components/tab-bar/tab-bar.js

@@ -23,6 +23,7 @@ var _traverseReactNode = require("../../utils/traverse-react-node");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+/* istanbul ignore next */
 const TabBarItem = () => {
   return null;
 };
@@ -73,7 +74,7 @@ const TabBar = p => {
       }, typeof item.props.icon === 'function' ? item.props.icon(active) : item.props.icon);
 
       const titleElement = item.props.title && _react.default.createElement("div", {
-        className: `${classPrefix}-item-title`
+        className: (0, _classnames.default)(`${classPrefix}-item-title`, Boolean(iconElement) && `${classPrefix}-item-title-with-icon`)
       }, typeof item.props.title === 'function' ? item.props.title(active) : item.props.title);
 
       if (iconElement) {

package/cjs/components/tabs/tabs.css

@@ -1,14 +1,16 @@
 .adm-tabs {
-  --title-font-size: 17px;
+  --title-font-size: var(--adm-font-size-9);
   --content-padding: 12px;
   --active-line-height: 2px;
   --active-line-border-radius: var(--active-line-height);
+  --active-line-color: var(--adm-color-primary);
+  --active-title-color: var(--adm-color-primary);
   position: relative;
   min-width: 0;
 }
 .adm-tabs-header {
   position: relative;
-  border-bottom: solid 1px var(--adm-border-color);
+  border-bottom: solid 1px var(--adm-color-border);
 }
 .adm-tabs-tab-list {
   display: flex;
@@ -31,6 +33,7 @@
 .adm-tabs-tab {
   white-space: nowrap;
   padding: 8px 0 10px;
+  width: -webkit-min-content;
   width: min-content;
   margin: 0 auto;
   font-size: var(--title-font-size);
@@ -38,7 +41,7 @@
   cursor: pointer;
 }
 .adm-tabs-tab-active {
-  color: var(--adm-color-primary);
+  color: var(--active-title-color);
 }
 .adm-tabs-tab-disabled {
   opacity: 0.5;
@@ -48,8 +51,7 @@
   position: absolute;
   bottom: 0;
   height: var(--active-line-height);
-  color: var(--adm-color-primary);
-  background: var(--adm-color-primary);
+  background: var(--active-line-color);
   border-radius: var(--active-line-border-radius);
 }
 .adm-tabs-content {
@@ -66,9 +68,9 @@
 }
 .adm-tabs-header-mask-left {
   left: 0;
-  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+  background: linear-gradient(to right, var(--adm-color-background), rgba(255, 255, 255, 0));
 }
 .adm-tabs-header-mask-right {
   right: 0;
-  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
+  background: linear-gradient(to left, var(--adm-color-background), rgba(255, 255, 255, 0));
 }

package/cjs/components/tabs/tabs.d.ts

@@ -15,5 +15,5 @@ export declare type TabsProps = {
     stretch?: boolean;
     onChange?: (key: string) => void;
     children?: React.ReactNode;
-} & NativeProps<'--fixed-active-line-width' | '--active-line-height' | '--active-line-border-radius' | '--title-font-size' | '--content-padding'>;
+} & NativeProps<'--fixed-active-line-width' | '--active-line-height' | '--active-line-border-radius' | '--title-font-size' | '--content-padding' | '--active-title-color' | '--active-line-color'>;
 export declare const Tabs: FC<TabsProps>;

package/cjs/components/tabs/tabs.patch.css

@@ -0,0 +1,23 @@
+.adm-tabs-header {
+  border-bottom: solid 1px #eeeeee;
+}
+.adm-tabs-tab {
+  font-size: 17px;
+}
+.adm-tabs-tab-active {
+  color: #1677ff;
+}
+.adm-tabs-tab-line {
+  height: 2px;
+  background: #1677ff;
+  border-radius: 2px;
+}
+.adm-tabs-content {
+  padding: 12px;
+}
+.adm-tabs-header-mask-left {
+  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
+}
+.adm-tabs-header-mask-right {
+  background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
+}

package/cjs/components/tag/tag.css

@@ -1,7 +1,7 @@
 .adm-tag {
   --border-radius: var(--adm-tag-border-radius, 2px);
   padding: 2px 4px;
-  font-size: 11px;
+  font-size: var(--adm-font-size-3);
   line-height: 1;
   font-weight: normal;
   background: var(--background-color);

package/cjs/components/text-area/text-area.css

@@ -1,5 +1,5 @@
 .adm-text-area {
-  --font-size: 17px;
+  --font-size: var(--adm-font-size-9);
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
   --disabled-color: var(--adm-color-weak);
@@ -26,10 +26,15 @@
   background: transparent;
   border: 0;
   outline: none;
-  appearance: none;
+  -webkit-appearance: none;
+          appearance: none;
   min-height: 1.5em;
   text-align: var(--text-align);
 }
+.adm-text-area-element::-webkit-input-placeholder {
+  color: var(--placeholder-color);
+  font-family: inherit;
+}
 .adm-text-area-element::placeholder {
   color: var(--placeholder-color);
   font-family: inherit;
@@ -58,6 +63,6 @@
 .adm-text-area-count {
   text-align: var(--count-text-align);
   color: var(--adm-color-weak);
-  font-size: 17px;
+  font-size: var(--adm-font-size-9);
   padding-top: 8px;
 }

package/cjs/components/text-area/text-area.d.ts

@@ -19,6 +19,7 @@ export declare type TextAreaRef = {
     clear: () => void;
     focus: () => void;
     blur: () => void;
+    nativeElement: HTMLTextAreaElement | null;
 };
 export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "onClick" | "disabled" | "name" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoComplete" | "autoFocus" | "readOnly"> & {
     onChange?: ((val: string) => void) | undefined;
@@ -33,4 +34,8 @@ export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.Detail
         maxRows?: number | undefined;
     } | undefined;
     id?: string | undefined;
-} & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--count-text-align"> & React.RefAttributes<TextAreaRef>>;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--count-text-align", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<TextAreaRef>>;

package/cjs/components/text-area/text-area.js

@@ -57,7 +57,12 @@ const TextArea = (0, _react.forwardRef)((p, ref) => {
       var _a;
 
       (_a = nativeTextAreaRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    },
+
+    get nativeElement() {
+      return nativeTextAreaRef.current;
     }
+
   }));
   (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     if (!autoSize) return;
@@ -123,7 +128,8 @@ const TextArea = (0, _react.forwardRef)((p, ref) => {
       compositingRef.current = false;
 
       if (maxLength) {
-        setValue([...value].slice(0, maxLength).join(''));
+        const v = e.target.value;
+        setValue([...v].slice(0, maxLength).join(''));
       }
 
       (_a = props.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(props, e);