antd-mobile 5.0.0-rc.21 → 5.0.0-rc.25

package/cjs/components/popover/popover.d.ts

@@ -2,28 +2,29 @@ import React, { ReactElement } from 'react';
 import type { TooltipProps } from 'rc-tooltip/lib/Tooltip';
 import { NativeProps } from '../../utils/native-props';
 import { PropagationEvent } from '../../utils/with-stop-propagation';
-export declare type BasePopoverProps = {
-    getContainer?: () => HTMLElement;
+import { GetContainer } from '../../utils/render-to-container';
+export declare type PopoverProps = {
+    getContainer?: GetContainer;
     destroyOnHide?: boolean;
     children: ReactElement;
     mode?: 'light' | 'dark';
     trigger?: 'click';
-    placement: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
     stopPropagation?: PropagationEvent[];
-} & Pick<TooltipProps, 'defaultVisible' | 'visible' | 'onVisibleChange' | 'overlayStyle' | 'overlayClassName' | 'align' | 'zIndex'> & NativeProps<'--z-index'>;
+    content: React.ReactNode;
+} & Pick<TooltipProps, 'defaultVisible' | 'visible' | 'onVisibleChange' | 'align'> & NativeProps<'--z-index'>;
 export declare type PopoverRef = {
     show: () => void;
     hide: () => void;
     visible: boolean;
 };
 export declare const Popover: React.ForwardRefExoticComponent<{
-    getContainer?: (() => HTMLElement) | undefined;
+    getContainer?: HTMLElement | (() => HTMLElement) | null | undefined;
     destroyOnHide?: boolean | undefined;
     children: ReactElement;
     mode?: "dark" | "light" | undefined;
     trigger?: "click" | undefined;
-    placement: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    placement?: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | undefined;
     stopPropagation?: "click"[] | undefined;
-} & Pick<TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & NativeProps<"--z-index"> & {
     content: React.ReactNode;
-} & React.RefAttributes<PopoverRef>>;
+} & Pick<TooltipProps, "visible" | "align" | "defaultVisible" | "onVisibleChange"> & NativeProps<"--z-index"> & React.RefAttributes<PopoverRef>>;

package/cjs/components/popover/popover.js

@@ -17,6 +17,8 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _withStopPropagation = require("../../utils/with-stop-propagation");
 
+var _arrow = require("./arrow");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -24,11 +26,11 @@ 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-popover`;
-const enterClassName = 'entering';
-const leaveClassName = 'leaving';
 const defaultProps = {
+  placement: 'top',
   defaultVisible: false,
-  stopPropagation: ['click']
+  stopPropagation: ['click'],
+  getContainer: () => document.body
 };
 const Popover = (0, _react.forwardRef)((p, ref) => {
   var _a;
@@ -53,27 +55,19 @@ const Popover = (0, _react.forwardRef)((p, ref) => {
     className: `${classPrefix}-inner-content`
   }, props.content));
   return _react.default.createElement(_rcTooltip.default, Object.assign({}, props, {
-    overlayClassName: (0, _classnames.default)(`${classPrefix}-${mode}`, props.overlayClassName),
+    placement: props.placement,
+    align: props.align,
+    overlayClassName: (0, _classnames.default)(`${classPrefix}-${mode}`, props.className),
+    overlayStyle: props.style,
     destroyTooltipOnHide: props.destroyOnHide,
     prefixCls: classPrefix,
     getTooltipContainer: props.getContainer || (() => document.body),
     visible: visible,
-    arrowContent: _react.default.createElement("span", {
-      className: `${classPrefix}-arrow-content`
+    arrowContent: _react.default.createElement(_arrow.Arrow, {
+      className: `${classPrefix}-arrow-icon`
     }),
     onVisibleChange: setVisible,
     trigger: (_a = props.trigger) !== null && _a !== void 0 ? _a : [],
-    motion: {
-      motionName: {
-        appear: enterClassName,
-        appearActive: enterClassName,
-        enter: enterClassName,
-        enterActive: enterClassName,
-        leaveActive: leaveClassName,
-        leave: leaveClassName
-      },
-      motionDeadline: 200
-    },
     overlay: overlay
   }), props.children);
 });

package/cjs/components/radio/radio.css

@@ -13,20 +13,17 @@
 }
 .adm-radio .adm-radio-icon {
   flex: none;
-  border: 1px solid #ccc;
+  border: 1px solid var(--adm-color-light);
   border-radius: var(--icon-size);
   box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: var(--icon-size);
   height: var(--icon-size);
-  color: #ffffff;
+  color: var(--adm-color-white);
 }
-.adm-radio .adm-radio-icon-checked {
+.adm-radio .adm-radio-icon > svg {
   display: block;
-  width: 65%;
-  height: 65%;
+  width: 100%;
+  height: 100%;
 }
 .adm-radio.adm-radio-block {
   display: flex;
@@ -39,12 +36,12 @@
   cursor: not-allowed;
 }
 .adm-radio.adm-radio-disabled .adm-radio-content {
-  color: var(--adm-color-weak);
+  opacity: 0.4;
 }
 .adm-radio.adm-radio-disabled .adm-radio-icon {
-  color: #ccc;
-  border-color: #ccc;
-  background-color: #ebedf0;
+  color: #b7b7b7;
+  border-color: var(--adm-color-light);
+  background-color: #f5f5f5;
 }
 .adm-radio .adm-radio-custom-icon {
   font-size: var(--icon-size);

package/cjs/components/radio/radio.js

@@ -70,9 +70,7 @@ const Radio = p => {
 
     return _react.default.createElement("div", {
       className: `${classPrefix}-icon`
-    }, checked && _react.default.createElement(_checkIcon.CheckIcon, {
-      className: `${classPrefix}-icon-checked`
-    }));
+    }, checked && _react.default.createElement(_checkIcon.CheckIcon, null));
   };
 
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("label", {

package/cjs/components/result/result.css

@@ -1,9 +1,6 @@
 .adm-result {
-  --bg-color: var(--adm-color-white);
-  --color: var(--adm-color-text);
-  --adm-color-weak: var(--adm-color-weak);
   padding: 32px 12px;
-  background-color: var(--bg-color);
+  background-color: var(--adm-color-white);
 }
 .adm-result-icon {
   box-sizing: border-box;
@@ -16,7 +13,7 @@
   font-size: 52px;
 }
 .adm-result-title {
-  color: var(--color);
+  color: var(--adm-color-text);
   font-size: 18px;
   line-height: 1.4;
   text-align: center;

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

@@ -1,13 +1,14 @@
 .adm-search-bar {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  --height: 28px;
+  --height: 32px;
   --padding-left: 8px;
   --background: #f5f5f5;
   --border-radius: 6px;
   --placeholder-color: var(--adm-color-weak);
   ---placeholder-color: var(--placeholder-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--height);
 }
 .adm-search-bar .adm-search-bar-input-box {
   flex: auto;
@@ -21,20 +22,20 @@
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input-box-icon {
   flex: none;
-  color: var(---placeholder-color);
+  color: var(--adm-color-light);
   font-size: 16px;
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input {
   flex: auto;
   padding: 4px 8px 4px 4px;
-  height: var(--height);
+  height: calc(var(--height) - 2px);
   box-sizing: border-box;
 }
-.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input-wrapper {
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input {
   --placeholder-color: var(---placeholder-color);
+  --font-size: 15px;
 }
-.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input {
-  font-size: 13px;
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input-element {
   line-height: 19px;
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-search-bar-input-without-icon {
@@ -47,6 +48,9 @@
 .adm-search-bar .adm-search-bar-cancel-button.adm-button {
   padding: 3px 12px;
 }
+.adm-search-bar-active .adm-input.adm-input.adm-input {
+  --placeholder-color: var(--adm-color-light);
+}
 .adm-search-bar-active .adm-search-bar-input-box {
   border-color: var(--adm-color-primary);
   background: var(--adm-color-white);

package/cjs/components/selector/selector.css

@@ -5,6 +5,9 @@
   font-size: 15px;
   line-height: 1.4;
 }
+.adm-selector .adm-space.adm-space {
+  --gap: 12px;
+}
 .adm-selector-item {
   padding: 8px 16px;
   position: relative;

package/cjs/components/spin-loading/spin-loading.css

@@ -1,9 +1,8 @@
 .adm-spin-loading {
   --color: var(--adm-color-weak);
   --size: 32px;
-  --track-width: calc(var(--size) / 16);
   --pi: 3.14159265;
-  --radius: calc(var(--size) / 2 - var(--track-width) / 2);
+  --radius: 15;
   --circumference: calc(var(--radius) * var(--pi) * 2);
   width: var(--size);
   height: var(--size);
@@ -15,13 +14,6 @@
 }
 .adm-spin-loading-svg > .adm-spin-loading-fill {
   stroke: var(--color);
-  stroke-width: var(--track-width);
-  stroke-dasharray: var(--circumference);
-  stroke-linecap: square;
-  animation: adm-spin-loading-fill 1s infinite alternate-reverse linear;
-  r: var(--radius);
-  cx: calc(var(--size) / 2);
-  cy: calc(var(--size) / 2);
 }
 @keyframes adm-spin-loading-rotate {
   from {
@@ -31,11 +23,3 @@
     transform: rotate(360deg);
   }
 }
-@keyframes adm-spin-loading-fill {
-  from {
-    stroke-dashoffset: calc(var(--circumference) * (1 - 0.4));
-  }
-  to {
-    stroke-dashoffset: calc(var(--circumference) * (1 - 0.8));
-  }
-}

package/cjs/components/spin-loading/spin-loading.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type SpinLoadingProps = {
     color?: 'default' | 'primary' | 'white' | (string & {});
-} & NativeProps<'--color' | '--size' | '--track-width'>;
+} & NativeProps<'--color' | '--size'>;
 export declare const SpinLoading: React.NamedExoticComponent<SpinLoadingProps>;

package/cjs/components/spin-loading/spin-loading.js

@@ -11,6 +11,8 @@ var _nativeProps = require("../../utils/native-props");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
+var _web = require("@react-spring/web");
+
 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; }
@@ -24,20 +26,46 @@ const colorRecord = {
 const defaultProps = {
   color: 'default'
 };
+const circumference = 15 * 3.14159265358979 * 2;
 const SpinLoading = (0, _react.memo)(p => {
   var _a;
 
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+  const {
+    percent
+  } = (0, _web.useSpring)({
+    loop: {
+      reverse: true
+    },
+    from: {
+      percent: 30
+    },
+    to: {
+      percent: 80
+    },
+    config: {
+      duration: 1200
+    }
+  });
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement(_web.animated.div, {
     className: classPrefix,
     style: {
-      '--color': (_a = colorRecord[props.color]) !== null && _a !== void 0 ? _a : props.color
+      '--color': (_a = colorRecord[props.color]) !== null && _a !== void 0 ? _a : props.color,
+      '--percent': percent
     }
   }, _react.default.createElement("svg", {
-    className: `${classPrefix}-svg`
-  }, _react.default.createElement("circle", {
+    className: `${classPrefix}-svg`,
+    viewBox: '0 0 32 32'
+  }, _react.default.createElement(_web.animated.circle, {
     className: `${classPrefix}-fill`,
-    fill: 'transparent'
+    fill: 'transparent',
+    strokeWidth: '2',
+    strokeDasharray: circumference,
+    strokeDashoffset: percent,
+    strokeLinecap: 'square',
+    r: 15,
+    cx: 16,
+    cy: 16
   }))));
 });
 exports.SpinLoading = SpinLoading;

package/cjs/components/stepper/stepper.css

@@ -31,12 +31,10 @@
 }
 .adm-stepper .adm-stepper-input {
   height: var(--height);
-  background-color: var(--input-background-color);
-}
-.adm-stepper .adm-stepper-input > input {
-  text-align: center;
-  font-size: var(--input-font-size);
-  color: var(--input-font-color);
+  --background-color: var(--input-background-color);
+  --font-size: var(--input-font-size);
+  --color: var(--input-font-color);
+  --text-align: center;
 }
 .adm-stepper-minus,
 .adm-stepper-plus {

package/cjs/components/stepper/stepper.js

@@ -102,7 +102,6 @@ const Stepper = p => {
 
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: (0, _classnames.default)(classPrefix, {
-      [`${classPrefix}-disabled`]: disabled,
       [`${classPrefix}-active`]: hasFocus
     })
   }, _react.default.createElement(_button.default, {

package/cjs/components/swipe-action/swipe-action.d.ts

@@ -14,7 +14,7 @@ export declare type Action = {
 export declare type SwipeActionProps = {
     rightActions?: Action[];
     leftActions?: Action[];
-    onAction?: (action: Action) => void;
+    onAction?: (action: Action, e: React.MouseEvent) => void;
     closeOnTouchOutside?: boolean;
     closeOnAction?: boolean;
     children: ReactNode;
@@ -22,7 +22,7 @@ export declare type SwipeActionProps = {
 export declare const SwipeAction: React.ForwardRefExoticComponent<{
     rightActions?: Action[] | undefined;
     leftActions?: Action[] | undefined;
-    onAction?: ((action: Action) => void) | undefined;
+    onAction?: ((action: Action, e: React.MouseEvent) => void) | undefined;
     closeOnTouchOutside?: boolean | undefined;
     closeOnAction?: boolean | undefined;
     children: ReactNode;

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

@@ -167,7 +167,7 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
         }
 
         (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
-        (_b = props.onAction) === null || _b === void 0 ? void 0 : _b.call(props, action);
+        (_b = props.onAction) === null || _b === void 0 ? void 0 : _b.call(props, action, e);
       }
     }, action.text);
   }

package/cjs/components/swiper/swiper.js

@@ -29,6 +29,8 @@ var _useRefState = require("../../utils/use-ref-state");
 
 var _bound = require("../../utils/bound");
 
+var _ahooks = require("ahooks");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -98,6 +100,11 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
     }
 
     const [current, setCurrent] = (0, _react.useState)(props.defaultIndex);
+    (0, _ahooks.useUpdateEffect)(() => {
+      var _a;
+
+      (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, current);
+    }, [current]);
     const [dragging, setDragging, draggingRef] = (0, _useRefState.useRefState)(false);
 
     function boundIndex(current) {
@@ -183,25 +190,13 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
     });
 
     function swipeTo(index, immediate = false) {
-      var _a, _b;
-
-      if (loop) {
-        const i = modulus(index, count);
-        setCurrent(i);
-        (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, i);
-        api.start({
-          position: index * 100,
-          immediate
-        });
-      } else {
-        const i = (0, _bound.bound)(index, 0, count - 1);
-        setCurrent(i);
-        (_b = props.onIndexChange) === null || _b === void 0 ? void 0 : _b.call(props, i);
-        api.start({
-          position: boundIndex(i) * 100,
-          immediate
-        });
-      }
+      const roundedIndex = Math.round(index);
+      const targetIndex = loop ? modulus(roundedIndex, count) : (0, _bound.bound)(roundedIndex, 0, count - 1);
+      setCurrent(targetIndex);
+      api.start({
+        position: (loop ? roundedIndex : boundIndex(roundedIndex)) * 100,
+        immediate
+      });
     }
 
     function swipeNext() {

package/cjs/components/switch/switch.css

@@ -5,8 +5,8 @@
 }
 .adm-switch {
   --checked-color: var(--adm-color-primary);
-  --height: 30px;
-  --width: 50px;
+  --height: 31px;
+  --width: 51px;
   --border-width: 2px;
   display: inline-block;
   vertical-align: middle;
@@ -63,9 +63,14 @@
 .adm-switch-inner {
   position: relative;
   z-index: 1;
-  margin: 0 10px 0 calc(var(--height) - var(--border-width) + 5px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 8px 0 calc(var(--height) - var(--border-width) + 4px);
+  height: 100%;
   color: var(--adm-color-weak);
   transition: margin 200ms;
+  font-size: 15px;
 }
 .adm-switch.adm-switch-checked .adm-switch-checkbox {
   background: var(--checked-color);

package/cjs/components/tabs/tabs.css

@@ -2,7 +2,7 @@
   --title-font-size: 17px;
   --content-padding: 12px;
   --active-line-height: 2px;
-  --active-line-border-radius: 0;
+  --active-line-border-radius: var(--active-line-height);
   position: relative;
 }
 .adm-tabs-header {

package/cjs/components/tag/tag.css

@@ -1,7 +1,7 @@
 .adm-tag {
   --border-radius: var(--adm-tag-border-radius, 2px);
-  padding: 3px 5px;
-  font-size: 12px;
+  padding: 2px 4px;
+  font-size: 11px;
   line-height: 1;
   font-weight: normal;
   background: var(--background-color);
@@ -9,7 +9,7 @@
   display: inline-block;
   white-space: nowrap;
   border-radius: var(--border-radius);
-  border: 0.5px solid var(--border-color);
+  border: 1px solid var(--border-color);
   box-sizing: border-box;
 }
 .adm-tag-round {

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

@@ -1,4 +1,4 @@
-.adm-text-area-wrapper {
+.adm-text-area {
   --font-size: 17px;
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
@@ -7,7 +7,7 @@
   max-width: 100%;
   max-height: 100%;
 }
-.adm-text-area {
+.adm-text-area-element {
   font-family: var(--adm-font-family);
   resize: none;
   flex: auto;
@@ -27,29 +27,29 @@
   appearance: none;
   min-height: 1.5em;
 }
-.adm-text-area::placeholder {
+.adm-text-area-element::placeholder {
   color: var(--placeholder-color);
   font-family: inherit;
 }
-.adm-text-area:-webkit-autofill {
+.adm-text-area-element:-webkit-autofill {
   background-color: transparent;
 }
-.adm-text-area:disabled {
+.adm-text-area-element:disabled {
   color: var(--disabled-color);
   cursor: not-allowed;
   opacity: 1;
   -webkit-text-fill-color: var(--disabled-color);
 }
-.adm-text-area:read-only {
+.adm-text-area-element:read-only {
   cursor: default;
 }
-.adm-text-area:invalid {
+.adm-text-area-element:invalid {
   box-shadow: none;
 }
-.adm-text-area::-ms-clear {
+.adm-text-area-element::-ms-clear {
   display: none;
 }
-.adm-text-area[readonly] {
+.adm-text-area-element[readonly] {
   pointer-events: none;
 }
 .adm-text-area-count {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
-export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'autoComplete' | 'disabled' | 'readOnly' | 'onFocus' | 'onBlur'> & {
+export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'autoComplete' | 'disabled' | 'readOnly' | 'onFocus' | 'onBlur' | 'onCompositionStart' | 'onCompositionEnd'> & {
     onChange?: (val: string) => void;
     value?: string;
     defaultValue?: string;
@@ -20,7 +20,7 @@ export declare type TextAreaRef = {
     focus: () => void;
     blur: () => void;
 };
-export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "disabled" | "onFocus" | "onBlur" | "autoComplete" | "readOnly"> & {
+export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "disabled" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoComplete" | "readOnly"> & {
     onChange?: ((val: string) => void) | undefined;
     value?: string | undefined;
     defaultValue?: string | undefined;