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

package/2x/es/components/selector/selector.d.ts

@@ -16,5 +16,6 @@ export declare type SelectorProps<V> = {
     onChange?: (v: V[], extend: {
         items: SelectorOption<V>[];
     }) => void;
-} & NativeProps<'--checked-color'>;
+    showCheckMark?: boolean;
+} & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding'>;
 export declare const Selector: <V extends string | number>(p: SelectorProps<V>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;

package/2x/es/components/selector/selector.js

@@ -10,7 +10,8 @@ import { CheckMark } from './check-mark';
 const classPrefix = `adm-selector`;
 const defaultProps = {
   multiple: false,
-  defaultValue: []
+  defaultValue: [],
+  showCheckMark: true
 };
 export const Selector = p => {
   const props = mergeProps(defaultProps, p);
@@ -55,7 +56,7 @@ export const Selector = p => {
       }
     }, option.label, option.description && React.createElement("div", {
       className: `${classPrefix}-item-description`
-    }, option.description), active && React.createElement("div", {
+    }, option.description), active && props.showCheckMark && React.createElement("div", {
       className: `${classPrefix}-check-mark-wrapper`
     }, React.createElement(CheckMark, null)));
   });

package/2x/es/components/swiper/swiper.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import classNames from 'classnames';
@@ -10,7 +10,7 @@ import PageIndicator from '../page-indicator';
 import { staged } from 'staged-components';
 import { useRefState } from '../../utils/use-ref-state';
 import { bound } from '../../utils/bound';
-import { useUpdateEffect } from 'ahooks';
+import { useIsomorphicLayoutEffect, useUpdateEffect } from 'ahooks';
 const defaultProps = {
   defaultIndex: 0,
   allowTouchMove: true,
@@ -184,7 +184,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
       swipeNext,
       swipePrev
     }));
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       const maxIndex = validChildren.length - 1;
 
       if (current > maxIndex) {

package/2x/es/components/tabs/tabs.js

@@ -1,10 +1,10 @@
-import React, { useRef, useLayoutEffect } from 'react';
+import React, { useRef } from 'react';
 import classNames from 'classnames';
 import { useSpring, animated } from '@react-spring/web';
 import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { bound } from '../../utils/bound';
-import { useUpdateLayoutEffect, useThrottleFn } from 'ahooks';
+import { useUpdateLayoutEffect, useThrottleFn, useIsomorphicLayoutEffect } from 'ahooks';
 import { useMutationEffect } from '../../utils/use-mutation-effect';
 import { useResizeEffect } from '../../utils/use-resize-effect';
 import { mergeProps } from '../../utils/with-default-props';
@@ -134,7 +134,7 @@ export const Tabs = p => {
     });
   }
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     animate(true);
   }, []);
   useUpdateLayoutEffect(() => {
@@ -168,7 +168,7 @@ export const Tabs = p => {
     trailing: true,
     leading: true
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     updateMask(true);
   }, []);
   return withNativeProps(props, React.createElement("div", {

package/2x/es/components/text-area/text-area.css

@@ -1,4 +1,4 @@
-.adm-text-area-wrapper {
+.adm-text-area {
   --font-size: 34px;
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
@@ -8,7 +8,7 @@
   max-height: 100%;
 }
 
-.adm-text-area {
+.adm-text-area-element {
   font-family: var(--adm-font-family);
   resize: none;
   flex: auto;
@@ -29,35 +29,35 @@
   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;
 }
 

package/2x/es/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;

package/2x/es/components/text-area/text-area.js

@@ -1,6 +1,5 @@
-import { __rest } from "tslib";
 import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
-import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
 const classPrefix = 'adm-text-area';
@@ -12,19 +11,11 @@ const defaultProps = {
 };
 export const TextArea = forwardRef((p, ref) => {
   const props = mergeProps(defaultProps, p);
-
   const {
-    className,
-    style,
-    defaultValue: outerDefaultValue,
-    value: outerValue,
-    onChange: outerOnChange,
-    rows: rows,
-    autoSize: autoSize,
-    showCount
-  } = props,
-        textAreaProps = __rest(props, ["className", "style", "defaultValue", "value", "onChange", "rows", "autoSize", "showCount"]);
-
+    autoSize,
+    showCount,
+    maxLength
+  } = props;
   const [value, setValue] = usePropsValue(props);
   const nativeTextAreaRef = useRef(null);
   useImperativeHandle(ref, () => ({
@@ -64,39 +55,58 @@ export const TextArea = forwardRef((p, ref) => {
 
     textArea.style.height = `${height}px`;
   }, [value, autoSize]);
+  const compositingRef = useRef(false);
   let count;
+  const valueLength = [...value].length;
 
   if (typeof showCount === 'function') {
-    count = showCount(value.length, props.maxLength);
+    count = showCount(valueLength, maxLength);
   } else if (showCount) {
     count = React.createElement("div", {
       className: `${classPrefix}-count`
-    }, props.maxLength === undefined ? value.length : value.length + '/' + props.maxLength);
+    }, maxLength === undefined ? valueLength : valueLength + '/' + maxLength);
   }
 
-  return React.createElement("div", {
-    className: classNames(`${classPrefix}-wrapper`, className),
-    style: style
-  }, React.createElement("textarea", Object.assign({
-    ref: nativeTextAreaRef
-  }, textAreaProps, {
-    className: classPrefix,
-    rows: rows,
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix
+  }, React.createElement("textarea", {
+    ref: nativeTextAreaRef,
+    className: `${classPrefix}-element`,
+    rows: props.rows,
     value: value,
+    placeholder: props.placeholder,
     onChange: e => {
-      setValue(e.target.value);
+      let v = e.target.value;
+
+      if (maxLength && !compositingRef.current) {
+        v = [...v].slice(0, maxLength).join('');
+      }
+
+      setValue(v);
     },
-    onFocus: e => {
+    id: props.id,
+    onCompositionStart: e => {
       var _a;
 
-      (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+      compositingRef.current = true;
+      (_a = props.onCompositionStart) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
-    onBlur: e => {
+    onCompositionEnd: e => {
       var _a;
 
-      (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+      compositingRef.current = false;
+
+      if (maxLength) {
+        setValue([...value].slice(0, maxLength).join(''));
+      }
+
+      (_a = props.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
-    id: props.id
-  })), count);
+    autoComplete: props.autoComplete,
+    disabled: props.disabled,
+    readOnly: props.readOnly,
+    onFocus: props.onFocus,
+    onBlur: props.onBlur
+  }), count));
 });
 TextArea.defaultProps = defaultProps;

package/2x/es/components/virtual-input/virtual-input.js

@@ -1,9 +1,10 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import classNames from 'classnames';
 import { CloseCircleFill } from 'antd-mobile-icons';
+import { useIsomorphicLayoutEffect } from 'ahooks';
 const classPrefix = 'adm-virtual-input';
 const defaultProps = {
   defaultValue: ''
@@ -28,7 +29,7 @@ export const VirtualInput = forwardRef((p, ref) => {
     content.scrollLeft = content.clientWidth;
   }
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     scrollToEnd();
   }, [value]);
   useEffect(() => {

package/2x/es/utils/get-scroll-parent.js

@@ -4,7 +4,7 @@ const defaultRoot = canUseDom ? window : undefined;
 
 function isElement(node) {
   const ELEMENT_NODE_TYPE = 1;
-  return node.tagName !== 'HTML' && node.tagName !== 'BODY' && node.nodeType === ELEMENT_NODE_TYPE;
+  return node.nodeType === ELEMENT_NODE_TYPE;
 } // https://github.com/youzan/vant/issues/3823
 
 

package/2x/es/utils/use-ref-state.js

@@ -1,8 +1,8 @@
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 export function useRefState(initialState) {
   const [state, setState] = useState(initialState);
   const ref = useRef(state);
-  useLayoutEffect(() => {
+  useEffect(() => {
     ref.current = state;
   }, [state]);
   return [state, setState, ref];

package/2x/es/utils/use-resize-effect.js

@@ -1,8 +1,7 @@
-import { useLayoutEffect } from 'react';
-import { useMemoizedFn } from 'ahooks';
+import { useIsomorphicLayoutEffect, useMemoizedFn } from 'ahooks';
 export function useResizeEffect(effect, targetRef) {
   const fn = useMemoizedFn(effect);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const target = targetRef.current;
     if (!target) return;
 

package/2x/es/utils/use-tab-list-scroll.js

@@ -1,8 +1,7 @@
-import { useLayoutEffect } from 'react';
 import { useSpring } from '@react-spring/web';
 import { useMutationEffect } from './use-mutation-effect';
 import { bound } from './bound';
-import { useUpdateLayoutEffect } from 'ahooks';
+import { useIsomorphicLayoutEffect, useUpdateLayoutEffect } from 'ahooks';
 export const useTabListScroll = (targetRef, activeIndex) => {
   const [{
     scrollLeft
@@ -37,7 +36,7 @@ export const useTabListScroll = (targetRef, activeIndex) => {
     });
   }
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     animate(true);
   }, []);
   useUpdateLayoutEffect(() => {

package/2x/package.json

@@ -1,11 +1,11 @@
 {
   "name": "antd-mobile",
-  "version": "5.0.0-rc.23",
+  "version": "5.0.0-rc.27",
   "dependencies": {
-    "@react-spring/web": "^9.4.2",
-    "@types/resize-observer-browser": "^0.1.6",
-    "@use-gesture/react": "^10.2.4",
-    "ahooks": "^3.1.8",
+    "@react-spring/web": "^9.4.3",
+    "@types/resize-observer-browser": "^0.1.7",
+    "@use-gesture/react": "^10.2.6",
+    "ahooks": "^3.1.9",
     "antd-mobile-icons": "^0.2.2",
     "antd-mobile-v5-count": "^1.0.1",
     "classnames": "^2.3.1",

package/README.md

@@ -1,8 +1,9 @@
-<img src="https://gw.alipayobjects.com/mdn/rms_ee68a8/afts/img/A*1Ps5R4QVn28AAAAAAAAAAAAAARQnAQ" alt="logo" width="100%" />
+<img src="https://gw.alipayobjects.com/mdn/rms_ee68a8/afts/img/A*8HtNS4uMKkAAAAAAAAAAAAAAARQnAQ" alt="logo" width="100%" />
 
 ![npm (tag)](https://img.shields.io/npm/v/antd-mobile/next)
 ![GitHub (Pre-)Release Date](https://img.shields.io/github/release-date-pre/ant-design/ant-design-mobile)
-![npm](https://img.shields.io/npm/dw/antd-mobile-v5-count)
+![npm](https://img.shields.io/npm/dw/antd-mobile)
+![npm](https://img.shields.io/npm/dw/antd-mobile-v5-count?label=downloads%285.x%29)
 ![gzip size](https://img.badgesize.io/https:/unpkg.com/antd-mobile@next/umd/antd-mobile.js?label=gzip%20size&compression=gzip)
 [![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/ant-design/ant-design-mobile.svg)](http://isitmaintained.com/project/ant-design/ant-design-mobile 'Average time to resolve an issue')
 [![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design-mobile.svg)](http://isitmaintained.com/project/ant-design/ant-design-mobile 'Percentage of issues still open')
@@ -21,17 +22,16 @@ $ yarn add antd-mobile@next
 - **Atomic**: The function of each component, neither more nor less, is exactly what you need.
 - **Fluent**: With smooth gestures and delicate animation, it helps the product create the ultimate experience.
 
-v5(Poplar) is the next major version of antd-mobile, we recommend using it instead of v2.
-
 You can also play with antd-mobile just in browser with [Codesandbox](https://codesandbox.io/s/antd-mobile-snrxr?file=/package.json). No need to prepare development environment.
 
 If you found bugs or would like to request some new features, please consider opening an [issue](https://github.com/ant-design/ant-design-mobile/issues/new).
 
 If you have some question about how to use ant-mobile, you can start a [discussion thread](https://github.com/ant-design/ant-design-mobile/discussions).
 
-Feel free to join our DingDing group:
+And we also have some community groups here. Feel free to join us:
 
-<img src="https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*hBjlR4nUWjkAAAAAAAAAAAAAARQnAQ" alt="ding-group" width="250" />
+- [DingDing](https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*hBjlR4nUWjkAAAAAAAAAAAAAARQnAQ)
+- [Discord](https://discord.gg/jmNvw4WFYn)
 
 ---
 

package/cjs/components/button/button.css

@@ -12,9 +12,9 @@
   display: inline-block;
   box-sizing: border-box;
   height: auto;
-  padding: 8px 12px;
+  padding: 7px 12px;
   margin: 0;
-  font-size: 15px;
+  font-size: 17px;
   line-height: 1.4;
   text-align: center;
   border: var(--border-width) var(--border-style) var(--border-color);

package/cjs/components/calendar/calendar.js

@@ -23,6 +23,8 @@ var _configProvider = require("../config-provider");
 
 var _isoWeek = _interopRequireDefault(require("dayjs/plugin/isoWeek"));
 
+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); }
@@ -91,7 +93,7 @@ const Calendar = p => {
   }, [props.selectionMode, props.value, props.defaultValue]);
   const [begin, setBegin] = (0, _react.useState)(null);
   const [end, setEnd] = (0, _react.useState)(null);
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     setBegin(dateRange[0] ? (0, _dayjs.default)(dateRange[0]) : null);
     setEnd(dateRange[1] ? (0, _dayjs.default)(dateRange[1]) : null);
   }, [dateRange[0], dateRange[1]]);

package/cjs/components/cascade-picker-view/cascade-picker-view.d.ts

@@ -1,8 +1,7 @@
 import { FC } from 'react';
-import { NativeProps } from '../../utils/native-props';
 import type { PickerViewProps } from '../picker-view';
 import type { CascadePickerOption } from '../cascade-picker';
 export declare type CascadePickerViewProps = Omit<PickerViewProps, 'columns'> & {
     options: CascadePickerOption[];
-} & NativeProps<'--height'>;
+};
 export declare const CascadePickerView: FC<CascadePickerViewProps>;

package/cjs/components/date-picker/date-picker.d.ts

@@ -2,7 +2,7 @@ import { FC, ReactNode } from 'react';
 import type { PickerProps } from '../picker';
 import { NativeProps } from '../../utils/native-props';
 import type { Precision, DatePickerFilter } from './date-picker-utils';
-export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' | 'visible' | 'confirmText' | 'cancelText' | 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'title' | 'stopPropagation'> & {
+export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' | 'closeOnMaskClick' | 'visible' | 'confirmText' | 'cancelText' | 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'title' | 'stopPropagation' | 'style'> & {
     value?: Date | null;
     defaultValue?: Date | null;
     onSelect?: (value: Date) => void;

package/cjs/components/date-picker-view/date-picker-view.d.ts

@@ -1,7 +1,8 @@
 import { FC, ReactNode } from 'react';
+import type { PickerViewProps } from '../picker-view';
 import { NativeProps } from '../../utils/native-props';
 import type { Precision, DatePickerFilter } from '../date-picker/date-picker-utils';
-export declare type DatePickerViewProps = {
+export declare type DatePickerViewProps = Pick<PickerViewProps, 'style'> & {
     value?: Date;
     defaultValue?: Date;
     onChange?: (value: Date) => void;
@@ -10,5 +11,5 @@ export declare type DatePickerViewProps = {
     precision?: Precision;
     renderLabel?: (type: Precision, data: number) => ReactNode;
     filter?: DatePickerFilter;
-} & NativeProps<'--height'>;
+} & NativeProps;
 export declare const DatePickerView: FC<DatePickerViewProps>;

package/cjs/components/dialog/dialog.css

@@ -31,6 +31,9 @@
 .adm-dialog-main > .adm-dialog-image-container {
   flex: auto;
 }
+.adm-dialog-main > .adm-dialog-image-container + .adm-dialog-body {
+  padding-top: 12px;
+}
 .adm-dialog-main .adm-dialog-body {
   padding: 20px 12px;
 }

package/cjs/components/dropdown/dropdown.css

@@ -43,9 +43,6 @@
 .adm-dropdown-item-highlight {
   color: var(--adm-color-primary);
 }
-.adm-dropdown-item-active {
-  color: var(--adm-color-primary);
-}
 .adm-dropdown-item-active .adm-dropdown-item-title:after {
   margin-top: -1px;
   transform: rotate(135deg);

package/cjs/components/dropdown/item.js

@@ -20,9 +20,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const classPrefix = `adm-dropdown-item`;
 
 const Item = props => {
+  var _a;
+
   const cls = (0, _classnames.default)(classPrefix, {
     [`${classPrefix}-active`]: props.active,
-    [`${classPrefix}-highlight`]: props.highlight
+    [`${classPrefix}-highlight`]: (_a = props.highlight) !== null && _a !== void 0 ? _a : props.active
   });
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: cls,

package/cjs/components/ellipsis/ellipsis.js

@@ -13,6 +13,8 @@ var _nativeProps = require("../../utils/native-props");
 
 var _useResizeEffect = require("../../utils/use-resize-effect");
 
+var _ahooks = require("ahooks");
+
 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; }
@@ -129,7 +131,7 @@ const Ellipsis = p => {
   }
 
   (0, _useResizeEffect.useResizeEffect)(calcEllipsised, rootRef);
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     calcEllipsised();
   }, [props.content, props.direction, props.rows, props.expandText, props.collapseText]);
   const expandActionElement = exceeded && props.expandText ? _react.default.createElement("a", {

package/cjs/components/empty/empty.css

@@ -9,7 +9,7 @@
   display: flex;
   justify-content: center;
 }
-.adm-empty-image-container-image {
+.adm-empty-image-container .adm-empty-image {
   width: 64px;
 }
 .adm-empty-description {

package/cjs/components/floating-bubble/floating-bubble.css

@@ -15,6 +15,7 @@
   width: 100vw;
   height: 100vh;
   padding: var(--edge-distance);
+  box-sizing: border-box;
   pointer-events: none;
 }
 .adm-floating-bubble-boundary {

package/cjs/components/floating-panel/floating-panel.d.ts

@@ -1,17 +1,19 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
-export declare type FloatingPanelProps = {
-    anchors: number[];
-    children: ReactNode;
-    onHeightChange?: (height: number, animating: boolean) => void;
-} & NativeProps<'--border-radius' | '--z-index'>;
 export declare type FloatingPanelRef = {
     setHeight: (height: number, options?: {
         immediate?: boolean;
     }) => void;
 };
+export declare type FloatingPanelProps = {
+    anchors: number[];
+    children: ReactNode;
+    onHeightChange?: (height: number, animating: boolean) => void;
+    handleDraggingOfContent?: boolean;
+} & NativeProps<'--border-radius' | '--z-index'>;
 export declare const FloatingPanel: React.ForwardRefExoticComponent<{
     anchors: number[];
     children: ReactNode;
     onHeightChange?: ((height: number, animating: boolean) => void) | undefined;
+    handleDraggingOfContent?: boolean | undefined;
 } & NativeProps<"--z-index" | "--border-radius"> & React.RefAttributes<FloatingPanelRef>>;

package/cjs/components/floating-panel/floating-panel.js

@@ -17,13 +17,21 @@ var _supportsPassive = require("../../utils/supports-passive");
 
 var _nearest = require("../../utils/nearest");
 
+var _withDefaultProps = require("../../utils/with-default-props");
+
+var _useLockScroll = require("../../utils/use-lock-scroll");
+
 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; }
 
-const FloatingPanel = (0, _react.forwardRef)((props, ref) => {
+const defaultProps = {
+  handleDraggingOfContent: true
+};
+const FloatingPanel = (0, _react.forwardRef)((p, ref) => {
   var _a;
 
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const {
     anchors
   } = props;
@@ -61,6 +69,7 @@ const FloatingPanel = (0, _react.forwardRef)((props, ref) => {
       if (header === target || (header === null || header === void 0 ? void 0 : header.contains(target))) {
         pullingRef.current = true;
       } else {
+        if (!props.handleDraggingOfContent) return;
         const reachedTop = y.goal <= bounds.top;
         const content = contentRef.current;
         if (!content) return;
@@ -118,6 +127,7 @@ const FloatingPanel = (0, _react.forwardRef)((props, ref) => {
       });
     }
   }), [api]);
+  (0, _useLockScroll.useLockScroll)(elementRef, true);
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement(_web.animated.div, {
     ref: elementRef,
     className: 'adm-floating-panel',

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

@@ -11,22 +11,21 @@
 .adm-form-item-label-required {
   position: absolute;
   left: -0.6em;
-  top: 0.2em;
+  top: 0;
+  font-family: SimSun, sans-serif;
   color: var(--adm-color-danger);
   user-select: none;
 }
 .adm-form-item-footer {
   color: var(--adm-color-danger);
+  margin-top: 4px;
 }
 .adm-form-item.adm-form-item-hidden {
   display: none;
 }
 .adm-form-vertical .adm-form-item-label {
-  margin-bottom: 4px;
   font-size: 15px;
-}
-.adm-form-vertical .adm-form-item-footer {
-  margin-top: 4px;
+  margin-bottom: 4px;
 }
 .adm-form-horizontal .adm-list-item-content-prefix {
   padding-top: 12px;