antd-mobile 5.0.0-rc.27 → 5.0.0-rc.28

package/cjs/components/form/form-item.css

@@ -7,6 +7,7 @@
   line-height: 1.5;
   box-sizing: border-box;
   position: relative;
+  color: #666666;
 }
 .adm-form-item-label-required {
   position: absolute;
@@ -16,6 +17,9 @@
   color: var(--adm-color-danger);
   user-select: none;
 }
+.adm-form-item-label-help {
+  margin-left: 4px;
+}
 .adm-form-item-footer {
   color: var(--adm-color-danger);
   margin-top: 4px;
@@ -23,14 +27,18 @@
 .adm-form-item.adm-form-item-hidden {
   display: none;
 }
-.adm-form-vertical .adm-form-item-label {
-  font-size: 15px;
-  margin-bottom: 4px;
+.adm-form-item.adm-form-item-horizontal.adm-list-item {
+  --align-items: stretch;
+  --prefix-width: 6em;
 }
-.adm-form-horizontal .adm-list-item-content-prefix {
+.adm-form-item.adm-form-item-horizontal .adm-list-item-content-prefix {
   padding-top: 12px;
   padding-bottom: 12px;
 }
-.adm-form-item-label {
-  color: #666666;
+.adm-form-item.adm-form-item-horizontal .adm-list-item-content-extra {
+  align-self: center;
+}
+.adm-form-item.adm-form-item-vertical .adm-form-item-label {
+  font-size: 15px;
+  margin-bottom: 4px;
 }

package/cjs/components/form/form-item.d.ts

@@ -7,7 +7,7 @@ import type { FormLayout } from './index';
 declare type RenderChildren<Values = any> = (form: FormInstance<Values>) => React.ReactNode;
 declare type ChildrenType<Values = any> = RenderChildren<Values> | React.ReactNode;
 declare type RcFieldProps = Omit<FieldProps, 'children'>;
-export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePropName' | 'name' | 'rules' | 'messageVariables' | 'trigger' | 'validateTrigger' | 'shouldUpdate' | 'initialValue'> & Pick<ListItemProps, 'style' | 'onClick' | 'extra' | 'arrow'> & {
+export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePropName' | 'name' | 'rules' | 'messageVariables' | 'trigger' | 'validateTrigger' | 'shouldUpdate' | 'initialValue'> & Pick<ListItemProps, 'style' | 'onClick' | 'extra' | 'arrow' | 'description'> & {
     label?: React.ReactNode;
     help?: React.ReactNode;
     hasFeedback?: boolean;

package/cjs/components/form/form-item.js

@@ -23,6 +23,10 @@ var _utils = require("./utils");
 
 var _list = _interopRequireDefault(require("../list"));
 
+var _popover = _interopRequireDefault(require("../popover"));
+
+var _antdMobileIcons = require("antd-mobile-icons");
+
 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); }
@@ -49,7 +53,8 @@ const FormItemLayout = props => {
     htmlFor,
     hidden,
     errors,
-    arrow
+    arrow,
+    description
   } = props;
   const context = (0, _react.useContext)(_context.FormContext);
   const hasFeedback = props.hasFeedback !== undefined ? props.hasFeedback : context.hasFeedback;
@@ -62,19 +67,21 @@ const FormItemLayout = props => {
     className: `${classPrefix}-label-required`
   }, "*"), help && _react.default.createElement("span", {
     className: `${classPrefix}-label-help`
-  }, help)) : null;
-
-  const descriptionElement = feedback && _react.default.createElement("div", {
+  }, _react.default.createElement(_popover.default, {
+    content: help,
+    mode: 'dark',
+    trigger: 'click'
+  }, _react.default.createElement(_antdMobileIcons.QuestionCircleOutline, null)))) : null;
+  const descriptionElement = feedback || description ? _react.default.createElement(_react.default.Fragment, null, description, _react.default.createElement("div", {
     className: `${classPrefix}-footer`
-  }, feedback);
-
+  }, feedback)) : null;
   return _react.default.createElement(_list.default.Item, {
     style: style,
     title: layout === 'vertical' && labelElement,
     prefix: layout === 'horizontal' && labelElement,
     extra: extra,
     description: descriptionElement,
-    className: (0, _classnames.default)(classPrefix, className, {
+    className: (0, _classnames.default)(classPrefix, className, `${classPrefix}-${layout}`, {
       [`${classPrefix}-hidden`]: hidden
     }),
     disabled: disabled,
@@ -98,6 +105,7 @@ const FormItem = props => {
     noStyle,
     hidden,
     layout,
+    description,
     // Field 相关
     disabled,
     rules,
@@ -110,7 +118,7 @@ const FormItem = props => {
     dependencies,
     arrow
   } = props,
-        fieldProps = (0, _tslib.__rest)(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies", "arrow"]);
+        fieldProps = (0, _tslib.__rest)(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "description", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies", "arrow"]);
 
   const {
     validateTrigger: contextValidateTrigger
@@ -162,6 +170,7 @@ const FormItem = props => {
       label: label,
       extra: extra,
       help: help,
+      description: description,
       required: isRequired,
       disabled: disabled,
       hasFeedback: hasFeedback,

package/cjs/components/form/form.css

@@ -2,13 +2,6 @@
   --padding-left: 16px;
   --padding-right: 12px;
 }
-.adm-form-horizontal .adm-list.adm-list {
-  --prefix-width: 6em;
-  --align-items: stretch;
-}
-.adm-form-horizontal .adm-list.adm-list .adm-list-item-content-extra {
-  align-self: center;
-}
 .adm-form .adm-form-footer {
   padding: 20px 12px;
 }

package/cjs/components/form/form.js

@@ -71,7 +71,7 @@ const Form = (0, _react.forwardRef)((p, ref) => {
 
   collect();
   return _react.default.createElement(_rcFieldForm.default, Object.assign({
-    className: (0, _classnames.default)(classPrefix, `${classPrefix}-${layout}`, className),
+    className: (0, _classnames.default)(classPrefix, className),
     style: style,
     ref: ref
   }, formProps), _react.default.createElement(_context.FormContext.Provider, {

package/cjs/components/form/index.css

@@ -2,13 +2,6 @@
   --padding-left: 16px;
   --padding-right: 12px;
 }
-.adm-form-horizontal .adm-list.adm-list {
-  --prefix-width: 6em;
-  --align-items: stretch;
-}
-.adm-form-horizontal .adm-list.adm-list .adm-list-item-content-extra {
-  align-self: center;
-}
 .adm-form .adm-form-footer {
   padding: 20px 12px;
 }
@@ -21,6 +14,7 @@
   line-height: 1.5;
   box-sizing: border-box;
   position: relative;
+  color: #666666;
 }
 .adm-form-item-label-required {
   position: absolute;
@@ -30,6 +24,9 @@
   color: var(--adm-color-danger);
   user-select: none;
 }
+.adm-form-item-label-help {
+  margin-left: 4px;
+}
 .adm-form-item-footer {
   color: var(--adm-color-danger);
   margin-top: 4px;
@@ -37,14 +34,18 @@
 .adm-form-item.adm-form-item-hidden {
   display: none;
 }
-.adm-form-vertical .adm-form-item-label {
-  font-size: 15px;
-  margin-bottom: 4px;
+.adm-form-item.adm-form-item-horizontal.adm-list-item {
+  --align-items: stretch;
+  --prefix-width: 6em;
 }
-.adm-form-horizontal .adm-list-item-content-prefix {
+.adm-form-item.adm-form-item-horizontal .adm-list-item-content-prefix {
   padding-top: 12px;
   padding-bottom: 12px;
 }
-.adm-form-item-label {
-  color: #666666;
+.adm-form-item.adm-form-item-horizontal .adm-list-item-content-extra {
+  align-self: center;
+}
+.adm-form-item.adm-form-item-vertical .adm-form-item-label {
+  font-size: 15px;
+  margin-bottom: 4px;
 }

package/cjs/components/image-uploader/image-uploader.d.ts

@@ -19,7 +19,7 @@ export declare type ImageUploaderProps = {
     showUpload?: boolean;
     deletable?: boolean;
     capture?: InputHTMLAttributes<unknown>['capture'];
-    onPreview?: (index: number) => void;
+    onPreview?: (index: number, item: ImageUploadItem) => void;
     beforeUpload?: (file: File[]) => Promise<File[]> | File[];
     upload: (file: File) => Promise<ImageUploadItem>;
     onDelete?: (item: ImageUploadItem) => boolean | Promise<boolean> | void;

package/cjs/components/image-uploader/image-uploader.js

@@ -168,7 +168,7 @@ const ImageUploader = p => {
           previewImage(index);
         }
 
-        onPreview && onPreview(index);
+        onPreview && onPreview(index, fileItem);
       },
       onDelete: () => (0, _tslib.__awaiter)(void 0, void 0, void 0, function* () {
         var _c;

package/cjs/components/input/input.css

@@ -10,6 +10,7 @@
   width: 100%;
   max-width: 100%;
   max-height: 100%;
+  min-height: 24px;
   background-color: var(--background-color);
 }
 .adm-input-disabled {

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

@@ -13,7 +13,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     stopPropagation?: "click"[] | undefined;
     content: import("react").ReactNode;
 } & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "align" | "defaultVisible" | "onVisibleChange"> & import("../../utils/native-props").NativeProps<"--z-index"> & import("react").RefAttributes<import("./popover").PopoverRef>> & {
-    Menu: import("react").ForwardRefExoticComponent<Pick<import("./popover").PopoverProps, "children" | "style" | "visible" | "className" | "tabIndex" | "mode" | "align" | "getContainer" | "stopPropagation" | "trigger" | "defaultVisible" | "onVisibleChange" | "placement" | "destroyOnHide"> & {
+    Menu: import("react").ForwardRefExoticComponent<Pick<import("./popover").PopoverProps, "children" | "style" | "visible" | "className" | "tabIndex" | "mode" | "align" | "getContainer" | "stopPropagation" | "defaultVisible" | "onVisibleChange" | "trigger" | "placement" | "destroyOnHide"> & {
         actions: import("./popover-menu").Action[];
         onAction?: ((item: import("./popover-menu").Action) => void) | undefined;
     } & import("react").RefAttributes<import("./popover").PopoverRef>>;

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

@@ -11,7 +11,7 @@ export declare type PopoverMenuProps = Omit<PopoverProps, 'content'> & {
     actions: Action[];
     onAction?: (item: Action) => void;
 };
-export declare const PopoverMenu: React.ForwardRefExoticComponent<Pick<PopoverProps, "children" | "style" | "visible" | "className" | "tabIndex" | "mode" | "align" | "getContainer" | "stopPropagation" | "trigger" | "defaultVisible" | "onVisibleChange" | "placement" | "destroyOnHide"> & {
+export declare const PopoverMenu: React.ForwardRefExoticComponent<Pick<PopoverProps, "children" | "style" | "visible" | "className" | "tabIndex" | "mode" | "align" | "getContainer" | "stopPropagation" | "defaultVisible" | "onVisibleChange" | "trigger" | "placement" | "destroyOnHide"> & {
     actions: Action[];
     onAction?: ((item: Action) => void) | undefined;
 } & React.RefAttributes<PopoverRef>>;

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

@@ -1,7 +1,7 @@
 .adm-progress-bar {
   --track-width: var(--adm-progress-bar-track-width, 3px);
   --track-color: var(--adm-progress-bar-track-color, #e5e5e5);
-  --fill-color: var(--adm-progress-bar-fill-color, #1677ff);
+  --fill-color: var(--adm-progress-bar-fill-color, var(--adm-color-primary));
 }
 .adm-progress-bar-trail {
   background: var(--track-color);

package/cjs/components/progress-circle/progress-circle.css

@@ -1,9 +1,9 @@
 /*进度圈*/
 .adm-progress-circle {
-  --track-width: 3px;
-  --size: 50px;
-  --track-color: #e5e5e5;
-  --fill-color: #1677ff;
+  --track-width: var(--adm-progress-circle-track-width, 3px);
+  --size: var(--adm-progress-circle-size, 50px);
+  --track-color: var(--adm-progress-circle-track-color, #e5e5e5);
+  --fill-color: var(--adm-progress-circle-fill-color, var(--adm-color-primary));
   --percent: 0;
   --pi: 3.14159265;
   --radius: calc(var(--size) / 2 - var(--track-width) / 2);

package/cjs/components/progress-circle/progress-circle.js

@@ -17,8 +17,7 @@ const classPrefix = `adm-progress-circle`;
 
 const ProgressCircle = p => {
   const props = (0, _withDefaultProps.mergeProps)({
-    percent: 0,
-    strokeColor: '#1677FF'
+    percent: 0
   }, p);
   const style = {
     '--percent': props.percent.toString()

package/cjs/components/pull-to-refresh/pull-to-refresh.js

@@ -59,7 +59,13 @@ const PullToRefresh = p => {
     }
   }));
   const elementRef = (0, _react2.useRef)(null);
-  const pullingRef = (0, _react2.useRef)(false);
+  const pullingRef = (0, _react2.useRef)(false); //防止下拉时抖动
+
+  (0, _react2.useEffect)(() => {
+    var _a;
+
+    (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('touchmove', () => {});
+  }, []);
 
   function doRefresh() {
     return (0, _tslib.__awaiter)(this, void 0, void 0, function* () {

package/cjs/components/radio/radio.js

@@ -19,6 +19,10 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _checkIcon = require("../checkbox/check-icon");
 
+var _devLog = require("../../utils/dev-log");
+
+var _isDev = require("../../utils/is-dev");
+
 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); }
@@ -44,6 +48,16 @@ const Radio = p => {
   } = props;
 
   if (groupContext && value !== undefined) {
+    if (_isDev.isDev) {
+      if (p.checked !== undefined) {
+        (0, _devLog.devWarning)('Radio', 'When used within `Radio.Group`, the `checked` prop of `Radio` will not work.');
+      }
+
+      if (p.defaultChecked !== undefined) {
+        (0, _devLog.devWarning)('Radio', 'When used within `Radio.Group`, the `defaultChecked` prop of `Radio` will not work.');
+      }
+    }
+
     checked = groupContext.value.includes(value);
 
     setChecked = checked => {

package/cjs/components/rate/rate.css

@@ -1,6 +1,7 @@
 .adm-rate {
   --star-size: 24px;
   --active-color: #ffd21e;
+  --inactive-color: var(--adm-color-light);
   display: inline-flex;
 }
 .adm-rate-box {
@@ -10,7 +11,7 @@
   padding: calc(var(--star-size) / 8);
   line-height: var(--star-size);
   font-size: var(--star-size);
-  color: var(--adm-color-light);
+  color: var(--inactive-color);
   text-align: center;
   overflow: hidden;
   cursor: pointer;

package/cjs/components/rate/rate.d.ts

@@ -9,5 +9,5 @@ export declare type RateProps = {
     readOnly?: boolean;
     value?: number;
     onChange?: (value: number) => void;
-} & NativeProps<'--star-size' | '--active-color'>;
+} & NativeProps<'--star-size' | '--active-color' | '--inactive-color'>;
 export declare const Rate: FC<RateProps>;

package/cjs/components/slider/slider.css

@@ -15,6 +15,7 @@
 }
 .adm-slider-fill {
   position: absolute;
+  z-index: 1;
   height: 4px;
   background-color: var(--fill-color);
 }
@@ -37,24 +38,27 @@
   background-color: var(--fill-color);
 }
 .adm-slider-thumb {
-  touch-action: none;
-  position: absolute;
   width: 22px;
   height: 22px;
+  margin: 5px;
   border-radius: 50%;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  background: #fff url('../../assets/slider-thumb.svg') no-repeat center center;
-  background-size: 10px 10px;
+  background: var(--adm-color-white);
   box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.12), 0 1.5px 3px -2px rgba(0, 0, 0, 0.25);
 }
 .adm-slider-thumb:focus {
   outline: none;
 }
+.adm-slider-thumb-icon {
+  width: 10px;
+  height: 10px;
+  margin: 6px;
+  user-select: none;
+}
 .adm-slider-thumb-container {
+  cursor: grab;
   touch-action: none;
   position: absolute;
+  z-index: 2;
   width: 32px;
   height: 32px;
   border-radius: 50%;

package/cjs/components/slider/thumb-icon.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare const ThumbIcon: FC<NativeProps>;

package/cjs/components/slider/thumb-icon.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThumbIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _nativeProps = require("../../utils/native-props");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ThumbIcon = props => {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("svg", {
+    viewBox: '0 0 20 20'
+  }, _react.default.createElement("g", {
+    stroke: 'none',
+    strokeWidth: '1',
+    fill: 'none',
+    fillRule: 'evenodd'
+  }, _react.default.createElement("g", {
+    transform: 'translate(-604.000000, -656.000000)',
+    fill: '#999999'
+  }, _react.default.createElement("g", {
+    transform: 'translate(592.000000, 644.000000)'
+  }, _react.default.createElement("g", {
+    transform: 'translate(12.000000, 12.000000)'
+  }, _react.default.createElement("polygon", {
+    points: '0 3.33333333 2.22222222 3.33333333 2.22222222 17.7777778 0 17.7777778'
+  }), _react.default.createElement("polygon", {
+    points: '17.7777778 3.33333333 20 3.33333333 20 17.7777778 17.7777778 17.7777778'
+  }), _react.default.createElement("path", {
+    d: 'M10.8888889,0 L9.11111111,0 C8.98888889,0 8.88888889,0.107142857 8.88888889,0.238095238 L8.88888889,19.7619048 C8.88888889,19.8928571 8.98888889,20 9.11111111,20 L10.8888889,20 C11.0111111,20 11.1111111,19.8928571 11.1111111,19.7619048 L11.1111111,0.238095238 C11.1111111,0.107142857 11.0111111,0 10.8888889,0 Z'
+  })))))));
+};
+
+exports.ThumbIcon = ThumbIcon;

package/cjs/components/slider/thumb.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@use-gesture/react");
 
+var _thumbIcon = require("./thumb-icon");
+
 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; }
@@ -57,7 +59,9 @@ const Thumb = props => {
     style: currentPosition()
   }, bind()), _react.default.createElement("div", {
     className: `${classPrefix}-thumb`
-  }));
+  }, _react.default.createElement(_thumbIcon.ThumbIcon, {
+    className: `${classPrefix}-thumb-icon`
+  })));
 };
 
 var _default = Thumb;

package/cjs/components/tabs/tabs.js

@@ -164,16 +164,16 @@ const Tabs = p => {
   }
 
   (0, _ahooks.useIsomorphicLayoutEffect)(() => {
-    animate(true);
+    animate(!x.isAnimating);
   }, []);
   (0, _ahooks.useUpdateLayoutEffect)(() => {
     animate();
   }, [activeKey]);
   (0, _useResizeEffect.useResizeEffect)(() => {
-    animate(true);
+    animate(!x.isAnimating);
   }, tabListContainerRef);
   (0, _useMutationEffect.useMutationEffect)(() => {
-    animate(true);
+    animate(!x.isAnimating);
   }, tabListContainerRef, {
     subtree: true,
     childList: true,

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

@@ -13,6 +13,8 @@ var _usePropsValue = require("../../utils/use-props-value");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
+var _devLog = require("../../utils/dev-log");
+
 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; }
@@ -31,7 +33,14 @@ const TextArea = (0, _react.forwardRef)((p, ref) => {
     showCount,
     maxLength
   } = props;
-  const [value, setValue] = (0, _usePropsValue.usePropsValue)(props);
+  const [value, setValue] = (0, _usePropsValue.usePropsValue)(Object.assign(Object.assign({}, props), {
+    value: props.value === null ? '' : props.value
+  }));
+
+  if (props.value === null) {
+    (0, _devLog.devError)('TextArea', '`value` prop on `TextArea` should not be `null`. Consider using an empty string to clear the component.');
+  }
+
   const nativeTextAreaRef = (0, _react.useRef)(null);
   (0, _react.useImperativeHandle)(ref, () => ({
     clear: () => {

package/cjs/utils/is-dev.js

@@ -4,5 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isDev = void 0;
-const isDev = process.env.NODE_ENV === 'development';
+const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
 exports.isDev = isDev;

package/es/components/calendar/calendar.d.ts

@@ -3,6 +3,7 @@ import { NativeProps } from '../../utils/native-props';
 export declare type CalendarProps = {
     weekStartsOn?: 'Monday' | 'Sunday';
     renderLabel?: (date: Date) => string | null | undefined;
+    onPageChange?: (year: number, month: number) => void;
 } & ({
     selectionMode?: undefined;
     value?: undefined;

package/es/components/calendar/calendar.js

@@ -7,7 +7,7 @@ import { ArrowLeft } from './arrow-left';
 import { ArrowLeftDouble } from './arrow-left-double';
 import { useConfig } from '../config-provider';
 import isoWeek from 'dayjs/plugin/isoWeek';
-import { useIsomorphicLayoutEffect } from 'ahooks';
+import { useIsomorphicLayoutEffect, useUpdateEffect } from 'ahooks';
 dayjs.extend(isoWeek);
 const classPrefix = 'adm-calendar';
 const defaultProps = {
@@ -27,6 +27,11 @@ export const Calendar = p => {
   }
 
   const [current, setCurrent] = useState(() => dayjs().date(1));
+  useUpdateEffect(() => {
+    var _a;
+
+    (_a = props.onPageChange) === null || _a === void 0 ? void 0 : _a.call(props, current.year(), current.month() + 1);
+  }, [current]);
   const header = React.createElement("div", {
     className: `${classPrefix}-header`
   }, React.createElement("a", {

package/es/components/checkbox/checkbox.js

@@ -7,6 +7,7 @@ import { mergeProps } from '../../utils/with-default-props';
 import { devWarning } from '../../utils/dev-log';
 import { CheckIcon } from './check-icon';
 import { IndeterminateIcon } from './indeterminate-icon';
+import { isDev } from '../../utils/is-dev';
 const classPrefix = `adm-checkbox`;
 const defaultProps = {
   defaultChecked: false,
@@ -21,23 +22,21 @@ export const Checkbox = p => {
     onChange: props.onChange
   });
   let disabled = props.disabled;
-
-  const usageWarning = () => {
-    if (p.checked !== undefined) {
-      devWarning('Checkbox', 'When used with `Checkbox.Group`, the `checked` prop of `Checkbox` will not work if `value` prop of `Checkbox` is not undefined.');
-    }
-
-    if (p.defaultChecked !== undefined) {
-      devWarning('Checkbox', 'When used with `Checkbox.Group`, the `defaultChecked` prop of `Checkbox` will not work if `value` prop of `Checkbox` is not undefined.');
-    }
-  };
-
   const {
     value
   } = props;
 
   if (groupContext && value !== undefined) {
-    usageWarning();
+    if (isDev) {
+      if (p.checked !== undefined) {
+        devWarning('Checkbox', 'When used within `Checkbox.Group`, the `checked` prop of `Checkbox` will not work.');
+      }
+
+      if (p.defaultChecked !== undefined) {
+        devWarning('Checkbox', 'When used within `Checkbox.Group`, the `defaultChecked` prop of `Checkbox` will not work.');
+      }
+    }
+
     checked = groupContext.value.includes(value);
 
     setChecked = checked => {

package/es/components/form/form-item.css

@@ -7,6 +7,7 @@
   line-height: 1.5;
   box-sizing: border-box;
   position: relative;
+  color: #666666;
 }
 .adm-form-item-label-required {
   position: absolute;
@@ -16,6 +17,9 @@
   color: var(--adm-color-danger);
   user-select: none;
 }
+.adm-form-item-label-help {
+  margin-left: 4px;
+}
 .adm-form-item-footer {
   color: var(--adm-color-danger);
   margin-top: 4px;
@@ -23,14 +27,18 @@
 .adm-form-item.adm-form-item-hidden {
   display: none;
 }
-.adm-form-vertical .adm-form-item-label {
-  font-size: 15px;
-  margin-bottom: 4px;
+.adm-form-item.adm-form-item-horizontal.adm-list-item {
+  --align-items: stretch;
+  --prefix-width: 6em;
 }
-.adm-form-horizontal .adm-list-item-content-prefix {
+.adm-form-item.adm-form-item-horizontal .adm-list-item-content-prefix {
   padding-top: 12px;
   padding-bottom: 12px;
 }
-.adm-form-item-label {
-  color: #666666;
+.adm-form-item.adm-form-item-horizontal .adm-list-item-content-extra {
+  align-self: center;
+}
+.adm-form-item.adm-form-item-vertical .adm-form-item-label {
+  font-size: 15px;
+  margin-bottom: 4px;
 }