antd-mobile 5.0.0-beta.9 → 5.0.0-rc.3

package/cjs/components/dialog/dialog.css

@@ -1,61 +1,69 @@
-.adm-dialog-mask .adm-dialog-wrap {
-  position: relative;
+.adm-dialog {
+  --z-index: var(--adm-dialog-z-index, 1000);
+  position: fixed;
+  z-index: var(--z-index);
+}
+.adm-dialog .adm-dialog-mask {
+  z-index: 0;
+}
+.adm-dialog-wrap {
+  position: fixed;
+  z-index: 1;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
-  width: 75%;
+  width: 75vw;
   max-width: 500px;
+  transform: translate(-50%, -50%);
+}
+.adm-dialog-main {
+  width: 100%;
   font-size: 14px;
   background-color: white;
   border-radius: 8px;
   overflow: hidden;
 }
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-body {
+.adm-dialog-main .adm-dialog-body {
   padding: 20px 12px;
 }
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-body-header-wrapper {
+.adm-dialog-main .adm-dialog-body-header-wrapper {
   display: flex;
   justify-content: center;
 }
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-body-title {
+.adm-dialog-main .adm-dialog-body-title {
   font-weight: bold;
   font-size: 18px;
   line-height: 25px;
   text-align: center;
 }
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-body-message-wrapper {
-  display: flex;
-  justify-content: center;
-}
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-body-message {
-  max-height: 75vh;
+.adm-dialog-main .adm-dialog-body-content {
+  max-height: 70vh;
   overflow-x: hidden;
   overflow-y: auto;
-  font-size: var(--adm-font-size-main);
+  font-size: 15px;
   line-height: 1.4;
   color: #333;
 }
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-footer {
+.adm-dialog-main .adm-dialog-footer {
   user-select: none;
 }
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-footer .adm-dialog-action-row {
+.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row {
   display: flex;
   align-items: stretch;
   border-top: 0.5px solid var(--adm-border-color);
 }
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-footer .adm-dialog-action-row > * {
+.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > * {
   flex: 1;
 }
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
+.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
   padding: 10px;
   font-size: 18px;
   line-height: 25px;
   border-radius: 0;
   border-right: solid 0.5px var(--adm-border-color);
 }
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
+.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
   font-weight: bold;
 }
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button :last-child {
+.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
   border-right: none;
 }

package/cjs/components/dialog/dialog.d.ts

@@ -1,6 +1,9 @@
 import React, { FC, ReactNode } from 'react';
 import { Action } from './dialog-action-button';
-export interface DialogProps {
+import { GetContainer } from '../../utils/render-to-container';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
+import { NativeProps } from '../../utils/native-props';
+export declare type DialogProps = {
     afterClose?: () => void;
     image?: string;
     header?: ReactNode;
@@ -12,10 +15,11 @@ export interface DialogProps {
     onClose?: () => void;
     closeOnMaskClick?: boolean;
     visible?: boolean;
-    getContainer?: HTMLElement | (() => HTMLElement) | undefined;
+    getContainer?: GetContainer;
     bodyStyle?: React.CSSProperties;
     bodyClassName?: string;
     maskStyle?: React.CSSProperties;
     maskClassName?: string;
-}
+    stopPropagation?: PropagationEvent[];
+} & NativeProps;
 export declare const Dialog: FC<DialogProps>;

package/cjs/components/dialog/dialog.js

@@ -5,12 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Dialog = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _ahooks = require("ahooks");
+
 var _mask = _interopRequireDefault(require("../mask"));
 
 var _dialogActionButton = require("./dialog-action-button");
@@ -19,8 +21,20 @@ var _image = _interopRequireDefault(require("../image"));
 
 var _space = _interopRequireDefault(require("../space"));
 
+var _withStopPropagation = require("../../utils/with-stop-propagation");
+
+var _autoCenter = _interopRequireDefault(require("../auto-center"));
+
+var _web = require("@react-spring/web");
+
+var _nativeProps = require("../../utils/native-props");
+
 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 _getRequireWildcardCache(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; }
+
 var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
   function adopt(value) {
     return value instanceof P ? value : new P(function (resolve) {
@@ -55,26 +69,66 @@ var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P
 
 var classPrefix = "adm-dialog";
 var defaultProps = {
+  visible: false,
   actions: [],
   closeOnAction: false,
-  closeOnMaskClick: false
+  closeOnMaskClick: false,
+  stopPropagation: ['click']
 };
 
 var Dialog = function Dialog(p) {
   var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-  return /*#__PURE__*/_react["default"].createElement(_mask["default"], {
+  var unmountedRef = (0, _ahooks.useUnmountedRef)();
+  var style = (0, _web.useSpring)({
+    scale: props.visible ? 1 : 0.8,
+    opacity: props.visible ? 1 : 0,
+    config: {
+      mass: 1,
+      tension: 200,
+      friction: 30,
+      clamp: true
+    },
+    onStart: function onStart() {
+      setActive(true);
+    },
+    onRest: function onRest() {
+      var _a;
+
+      if (unmountedRef.current) return;
+      setActive(props.visible);
+
+      if (!props.visible) {
+        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      }
+    }
+  });
+
+  var _useState = (0, _react.useState)(props.visible),
+      active = _useState[0],
+      setActive = _useState[1];
+
+  return (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix,
+    style: {
+      display: active ? 'unset' : 'none'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_mask["default"], {
     visible: props.visible,
-    destroyOnClose: true,
     getContainer: props.getContainer,
-    afterClose: props.afterClose,
     onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
     style: props.maskStyle,
     className: (0, _classnames["default"])(classPrefix + "-mask", props.maskClassName)
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix + "-wrap",
+    style: {
+      pointerEvents: props.visible ? 'unset' : 'none'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_web.animated.div, {
+    style: Object.assign({}, style),
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
-    className: classPrefix + "-wrap"
+    className: classPrefix + "-main"
   }, !!props.image && /*#__PURE__*/_react["default"].createElement(_image["default"], {
     src: props.image,
     alt: 'dialog header image',
@@ -92,10 +146,8 @@ var Dialog = function Dialog(p) {
   }, props.header)), !!props.title && /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-body-title"
   }, props.title), !!props.content && /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-body-message-wrapper"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-body-message"
-  }, props.content)))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix + "-body-content"
+  }, typeof props.content === 'string' ? /*#__PURE__*/_react["default"].createElement(_autoCenter["default"], null, props.content) : props.content))), /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-footer"
   }, props.actions.map(function (row, index) {
     var actions = Array.isArray(row) ? row : [row];
@@ -108,18 +160,18 @@ var Dialog = function Dialog(p) {
         action: action,
         onAction: function onAction() {
           return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-            var _a, _b;
+            var _a, _b, _c;
 
             return regeneratorRuntime.wrap(function _callee$(_context) {
               while (1) {
                 switch (_context.prev = _context.next) {
                   case 0:
                     _context.next = 2;
-                    return (_a = props.onAction) === null || _a === void 0 ? void 0 : _a.call(props, action, index);
+                    return Promise.all([(_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action), (_b = props.onAction) === null || _b === void 0 ? void 0 : _b.call(props, action, index)]);
 
                   case 2:
                     if (props.closeOnAction) {
-                      (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+                      (_c = props.onClose) === null || _c === void 0 ? void 0 : _c.call(props);
                     }
 
                   case 3:
@@ -132,7 +184,7 @@ var Dialog = function Dialog(p) {
         }
       });
     }));
-  }))));
+  })))))));
 };
 
 exports.Dialog = Dialog;

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

@@ -5,7 +5,7 @@ import { alert } from './alert';
 import { confirm } from './confirm';
 export type { DialogProps } from './dialog';
 export type { Action } from './dialog-action-button';
-export type { DialogShowProps } from './show';
+export type { DialogShowProps, DialogShowRef } from './show';
 export type { DialogAlertProps } from './alert';
 export type { DialogConfirmProps } from './confirm';
 declare const _default: import("react").FC<import("./dialog").DialogProps> & {

package/cjs/components/dialog/show.d.ts

@@ -1,5 +1,8 @@
 import { DialogProps } from './dialog';
 export declare type DialogShowProps = Omit<DialogProps, 'visible'>;
+export declare type DialogShowRef = {
+    close: () => void;
+};
 export declare function show(props: DialogShowProps): {
     close: () => void;
 };

package/cjs/components/dialog/show.js

@@ -24,21 +24,22 @@ function show(props) {
     (0, _react.useEffect)(function () {
       setVisible(true);
     }, []);
+
+    function handleClose() {
+      var _a;
+
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      setVisible(false);
+    }
+
     (0, _react.useImperativeHandle)(ref, function () {
       return {
-        close: function close() {
-          setVisible(false);
-        }
+        close: handleClose
       };
     });
     return /*#__PURE__*/_react["default"].createElement(_dialog.Dialog, Object.assign({}, props, {
       visible: visible,
-      onClose: function onClose() {
-        var _a;
-
-        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        setVisible(false);
-      },
+      onClose: handleClose,
       afterClose: function afterClose() {
         var _a;
 

package/cjs/components/dropdown/dropdown.css

@@ -49,6 +49,13 @@
   margin-top: -1px;
   transform: rotate(135deg);
 }
+.adm-dropdown-item-content {
+  width: 100%;
+  background: white;
+}
+.adm-dropdown-item-content-hidden {
+  display: none;
+}
 .adm-dropdown-popup {
   position: fixed;
   overflow: hidden;
@@ -63,10 +70,3 @@
 .adm-dropdown-popup .adm-dropdown-popup-body {
   position: absolute;
 }
-.adm-dropdown-content {
-  width: 100%;
-  background: white;
-}
-.adm-dropdown-content-hidden {
-  display: none;
-}

package/cjs/components/dropdown/dropdown.d.ts

@@ -1,13 +1,20 @@
-import React, { FC } from 'react';
-import { DropdownItemProps } from './item';
-export interface DropdownProps {
-    forceRender?: boolean;
-    activeKey?: string;
-    onChange?: (key?: string) => void;
-    className?: string;
-    style?: React.CSSProperties;
-}
-declare const Dropdown: FC<DropdownProps> & {
-    Item: React.FC<DropdownItemProps>;
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type DropdownProps = {
+    activeKey?: string | null;
+    defaultActiveKey?: string | null;
+    closeOnMaskClick?: boolean;
+    onChange?: (key: string | null) => void;
+} & NativeProps;
+export declare type DropdownRef = {
+    close: () => void;
 };
+declare const Dropdown: React.ForwardRefExoticComponent<{
+    activeKey?: string | null | undefined;
+    defaultActiveKey?: string | null | undefined;
+    closeOnMaskClick?: boolean | undefined;
+    onChange?: ((key: string | null) => void) | undefined;
+} & NativeProps<never> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<DropdownRef>>;
 export default Dropdown;

package/cjs/components/dropdown/dropdown.js

@@ -13,7 +13,13 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _popup = _interopRequireDefault(require("../popup"));
 
-var _item = _interopRequireDefault(require("./item"));
+var _item = require("./item");
+
+var _nativeProps = require("../../utils/native-props");
+
+var _withDefaultProps = require("../../utils/with-default-props");
+
+var _usePropsValue2 = require("../../utils/use-props-value");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -22,21 +28,28 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var classPrefix = "adm-dropdown";
-
-var Dropdown = function Dropdown(props) {
+var defaultProps = {
+  defaultActiveKey: null,
+  closeOnMaskClick: true
+};
+var Dropdown = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
   var _classNames;
 
-  var _useControllableValue = (0, _ahooks.useControllableValue)(props, {
-    valuePropName: 'activeKey'
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+
+  var _usePropsValue = (0, _usePropsValue2.usePropsValue)({
+    value: props.activeKey,
+    defaultValue: props.defaultActiveKey,
+    onChange: props.onChange
   }),
-      value = _useControllableValue[0],
-      onChange = _useControllableValue[1];
+      value = _usePropsValue[0],
+      setValue = _usePropsValue[1];
 
   var navRef = (0, _react.useRef)(null);
   var contentRef = (0, _react.useRef)(null); // 点击外部区域，关闭
 
   (0, _ahooks.useClickAway)(function () {
-    onChange(undefined);
+    setValue(null);
   }, [navRef, contentRef]); // 计算 navs 的 top 值
 
   var _useState = (0, _react.useState)(),
@@ -45,21 +58,25 @@ var Dropdown = function Dropdown(props) {
 
   var containerRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
+    var container = containerRef.current;
+    if (!container) return;
+
     if (value) {
-      var rect = containerRef.current.getBoundingClientRect();
+      var rect = container.getBoundingClientRect();
       setTop(rect.bottom);
     }
   }, [value]);
 
   var changeActive = function changeActive(key) {
     if (value === key) {
-      onChange(undefined);
+      setValue(null);
     } else {
-      onChange(key);
+      setValue(key);
     }
   };
 
-  var contents = {};
+  var popupForceRender = false;
+  var items = [];
 
   var navs = _react["default"].Children.map(props.children, function (child) {
     if ( /*#__PURE__*/_react["default"].isValidElement(child)) {
@@ -69,16 +86,23 @@ var Dropdown = function Dropdown(props) {
         },
         active: child.key === value
       });
-      contents[child.key] = child.props.children;
+      items.push(child);
+      if (child.props.forceRender) popupForceRender = true;
       return /*#__PURE__*/(0, _react.cloneElement)(child, childProps);
     } else {
       return child;
     }
   });
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classPrefix, props.className, (_classNames = {}, _classNames[classPrefix + "-open"] = !!value, _classNames)),
-    style: props.style,
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      close: function close() {
+        setValue(null);
+      }
+    };
+  }, [setValue]);
+  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])(classPrefix, (_classNames = {}, _classNames[classPrefix + "-open"] = !!value, _classNames)),
     ref: containerRef
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-nav",
@@ -92,26 +116,21 @@ var Dropdown = function Dropdown(props) {
     style: {
       top: top
     },
-    forceRender: props.forceRender
+    forceRender: popupForceRender,
+    onMaskClick: props.closeOnMaskClick ? function () {
+      changeActive(null);
+    } : undefined
   }, /*#__PURE__*/_react["default"].createElement("div", {
     ref: contentRef
-  }, Object.keys(contents).map(function (key) {
-    var _classNames2;
-
-    var isActive = key === value;
-    var cls = (0, _classnames["default"])(classPrefix + "-content", (_classNames2 = {}, _classNames2[classPrefix + "-content-hidden"] = !isActive, _classNames2));
-
-    if (!props.forceRender && !isActive) {
-      return null;
-    }
-
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: cls,
-      key: key
-    }, contents[key]);
-  }))));
-};
-
-Dropdown.Item = _item["default"];
+  }, items.map(function (item) {
+    var isActive = item.key === value;
+    return /*#__PURE__*/_react["default"].createElement(_item.ItemChildrenWrap, {
+      key: item.key,
+      active: isActive,
+      forceRender: item.props.forceRender,
+      destroyOnClose: item.props.destroyOnClose
+    }, item.props.children);
+  })))));
+});
 var _default = Dropdown;
 exports["default"] = _default;

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

@@ -1,5 +1,15 @@
+/// <reference types="react" />
 import './dropdown.less';
-import Dropdown from './dropdown';
-export type { DropdownProps } from './dropdown';
+export type { DropdownProps, DropdownRef } from './dropdown';
 export type { DropdownItemProps } from './item';
-export default Dropdown;
+declare const _default: import("react").ForwardRefExoticComponent<{
+    activeKey?: string | null | undefined;
+    defaultActiveKey?: string | null | undefined;
+    closeOnMaskClick?: boolean | undefined;
+    onChange?: ((key: string | null) => void) | undefined;
+} & import("../../utils/native-props").NativeProps<never> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("./dropdown").DropdownRef>> & {
+    Item: import("react").FC<import("./item").DropdownItemProps>;
+};
+export default _default;

package/cjs/components/dropdown/index.js

@@ -9,7 +9,14 @@ require("./dropdown.css");
 
 var _dropdown2 = _interopRequireDefault(require("./dropdown"));
 
+var _attachPropertiesToComponent = require("../../utils/attach-properties-to-component");
+
+var _item = _interopRequireDefault(require("./item"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = _dropdown2["default"];
+var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_dropdown2["default"], {
+  Item: _item["default"]
+});
+
 exports["default"] = _default;

package/cjs/components/dropdown/item.d.ts

@@ -1,12 +1,17 @@
 import React, { FC } from 'react';
-export interface DropdownItemProps {
+import { NativeProps } from '../../utils/native-props';
+export declare type DropdownItemProps = {
     key: string;
     title: React.ReactNode;
     active?: boolean;
     highlight?: boolean;
+    forceRender?: boolean;
+    destroyOnClose?: boolean;
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    className?: string;
-    style?: React.CSSProperties;
-}
+} & NativeProps;
 declare const Item: FC<DropdownItemProps>;
 export default Item;
+declare type DropdownItemChildrenWrapProps = {
+    onClick?: () => void;
+} & Pick<DropdownItemProps, 'active' | 'forceRender' | 'destroyOnClose'>;
+export declare const ItemChildrenWrap: FC<DropdownItemChildrenWrapProps>;

package/cjs/components/dropdown/item.js

@@ -3,12 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.ItemChildrenWrap = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _nativeProps = require("../../utils/native-props");
+
+var _useShouldRender = require("../../utils/use-should-render");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var classPrefix = "adm-dropdown-item";
@@ -16,15 +20,29 @@ var classPrefix = "adm-dropdown-item";
 var Item = function Item(props) {
   var _classNames;
 
-  var cls = (0, _classnames["default"])(classPrefix, props.className, (_classNames = {}, _classNames[classPrefix + "-active"] = props.active, _classNames[classPrefix + "-highlight"] = props.highlight, _classNames));
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  var cls = (0, _classnames["default"])(classPrefix, (_classNames = {}, _classNames[classPrefix + "-active"] = props.active, _classNames[classPrefix + "-highlight"] = props.highlight, _classNames));
+  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
     className: cls,
-    style: props.style,
     onClick: props.onClick
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-title"
-  }, /*#__PURE__*/_react["default"].createElement("span", null, props.title)));
+  }, /*#__PURE__*/_react["default"].createElement("span", null, props.title))));
 };
 
 var _default = Item;
-exports["default"] = _default;
+exports["default"] = _default;
+
+var ItemChildrenWrap = function ItemChildrenWrap(props) {
+  var _classNames2;
+
+  var _props$active = props.active,
+      active = _props$active === void 0 ? false : _props$active;
+  var shouldRender = (0, _useShouldRender.useShouldRender)(active, props.forceRender, props.destroyOnClose);
+  var cls = (0, _classnames["default"])(classPrefix + "-content", (_classNames2 = {}, _classNames2[classPrefix + "-content-hidden"] = !active, _classNames2));
+  return shouldRender ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: cls,
+    onClick: props.onClick
+  }, props.children) : null;
+};
+
+exports.ItemChildrenWrap = ItemChildrenWrap;

package/cjs/components/ellipsis/ellipsis.d.ts

@@ -1,8 +1,10 @@
-import React from 'react';
+import { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type EllipsisProps = {
     content: string;
-    direction?: 'start' | 'end';
+    direction?: 'start' | 'end' | 'middle';
     rows?: number;
+    expandText?: string;
+    collapseText?: string;
 } & NativeProps;
-export declare const Ellipsis: React.FC<EllipsisProps>;
+export declare const Ellipsis: FC<EllipsisProps>;