@fle-ui/next 2.0.0-alpha.9 → 3.0.0-alpha.1

package/lib/upload/UploadList/ListItem.js

@@ -34,8 +34,6 @@ var _progress = _interopRequireDefault(require("../../progress"));
 var _tooltip = _interopRequireDefault(require("../../tooltip"));
 
 var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _classNames3;
-
   var prefixCls = _ref.prefixCls,
       className = _ref.className,
       style = _ref.style,
@@ -89,20 +87,17 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         clearTimeout(progressRafRef.current);
       }
     };
-  }, []); // This is used for legacy span make scrollHeight the wrong value.
-  // We will force these to be `display: block` with non `picture-card`
-
-  var spanClassName = "".concat(prefixCls, "-span");
+  }, []);
   var iconNode = iconRender(file);
   var icon = /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-text-icon")
+    className: prefixCls + "-icon"
   }, iconNode);
 
   if (listType === 'picture' || listType === 'picture-card') {
     if (mergedStatus === 'uploading' || !file.thumbUrl && !file.url) {
       var _classNames;
 
-      var uploadingClassName = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-list-item-thumbnail"), true), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-list-item-file"), mergedStatus !== 'uploading'), _classNames));
+      var uploadingClassName = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, prefixCls + "-list-item-thumbnail", true), (0, _defineProperty2["default"])(_classNames, prefixCls + "-list-item-file", mergedStatus !== 'uploading'), _classNames));
       icon = /*#__PURE__*/React.createElement("div", {
         className: uploadingClassName
       }, iconNode);
@@ -112,10 +107,10 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       var thumbnail = (isImgUrl === null || isImgUrl === void 0 ? void 0 : isImgUrl(file)) ? /*#__PURE__*/React.createElement("img", {
         src: file.thumbUrl || file.url,
         alt: file.name,
-        className: "".concat(prefixCls, "-list-item-image"),
+        className: prefixCls + "-list-item-image",
         crossOrigin: file.crossOrigin
       }) : iconNode;
-      var aClassName = (0, _classnames["default"])((_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-list-item-thumbnail"), true), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-list-item-file"), isImgUrl && !isImgUrl(file)), _classNames2));
+      var aClassName = (0, _classnames["default"])((_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, prefixCls + "-list-item-thumbnail", true), (0, _defineProperty2["default"])(_classNames2, prefixCls + "-list-item-file", isImgUrl && !isImgUrl(file)), _classNames2));
       icon = /*#__PURE__*/React.createElement("a", {
         className: aClassName,
         onClick: function onClick(e) {
@@ -128,7 +123,7 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }
 
-  var infoUploadingClass = (0, _classnames["default"])((_classNames3 = {}, (0, _defineProperty2["default"])(_classNames3, "".concat(prefixCls, "-list-item"), true), (0, _defineProperty2["default"])(_classNames3, "".concat(prefixCls, "-list-item-").concat(mergedStatus), true), (0, _defineProperty2["default"])(_classNames3, "".concat(prefixCls, "-list-item-list-type-").concat(listType), true), _classNames3));
+  var listItemClassName = (0, _classnames["default"])(prefixCls + "-list-item", prefixCls + "-list-item-" + mergedStatus);
   var linkProps = typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps;
   var removeIcon = showRemoveIcon ? actionIconRender((typeof customRemoveIcon === 'function' ? customRemoveIcon(file) : customRemoveIcon) || /*#__PURE__*/React.createElement(_DeleteOutlined["default"], null), function () {
     return onClose(file);
@@ -138,12 +133,12 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, prefixCls, locale.downloadFile) : null;
   var downloadOrDelete = listType !== 'picture-card' && /*#__PURE__*/React.createElement("span", {
     key: "download-delete",
-    className: (0, _classnames["default"])("".concat(prefixCls, "-list-item-card-actions"), {
+    className: (0, _classnames["default"])(prefixCls + "-list-item-actions", {
       picture: listType === 'picture'
     })
   }, downloadIcon, removeIcon);
-  var listItemNameClass = (0, _classnames["default"])("".concat(prefixCls, "-list-item-name"));
-  var preview = file.url ? [/*#__PURE__*/React.createElement("a", (0, _extends2["default"])({
+  var listItemNameClass = (0, _classnames["default"])(prefixCls + "-list-item-name");
+  var fileName = file.url ? [/*#__PURE__*/React.createElement("a", (0, _extends2["default"])({
     key: "view",
     target: "_blank",
     rel: "noopener noreferrer",
@@ -176,31 +171,18 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     },
     title: locale.previewFile
   }, typeof customPreviewIcon === 'function' ? customPreviewIcon(file) : customPreviewIcon || /*#__PURE__*/React.createElement(_EyeOutlined["default"], null)) : null;
-  var actions = listType === 'picture-card' && mergedStatus !== 'uploading' && /*#__PURE__*/React.createElement("span", {
-    className: "".concat(prefixCls, "-list-item-actions")
+  var pictureCardActions = listType === 'picture-card' && mergedStatus !== 'uploading' && /*#__PURE__*/React.createElement("span", {
+    className: prefixCls + "-list-item-actions"
   }, previewIcon, mergedStatus === 'done' && downloadIcon, removeIcon);
-  var message;
-
-  if (file.response && typeof file.response === 'string') {
-    message = file.response;
-  } else {
-    message = ((_a = file.error) === null || _a === void 0 ? void 0 : _a.statusText) || ((_b = file.error) === null || _b === void 0 ? void 0 : _b.message) || locale.uploadError;
-  }
-
-  var iconAndPreview = /*#__PURE__*/React.createElement("span", {
-    className: spanClassName
-  }, icon, preview);
 
   var _React$useContext = React.useContext(_configProvider.ConfigContext),
       getPrefixCls = _React$useContext.getPrefixCls;
 
   var rootPrefixCls = getPrefixCls();
   var dom = /*#__PURE__*/React.createElement("div", {
-    className: infoUploadingClass
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-list-item-info")
-  }, iconAndPreview), actions, showProgress && /*#__PURE__*/React.createElement(_rcMotion["default"], {
-    motionName: "".concat(rootPrefixCls, "-fade"),
+    className: listItemClassName
+  }, icon, fileName, pictureCardActions, showProgress && /*#__PURE__*/React.createElement(_rcMotion["default"], {
+    motionName: rootPrefixCls + "-fade",
     visible: mergedStatus === 'uploading',
     motionDeadline: 2000
   }, function (_ref2) {
@@ -211,10 +193,10 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       percent: file.percent
     })) : null;
     return /*#__PURE__*/React.createElement("div", {
-      className: (0, _classnames["default"])("".concat(prefixCls, "-list-item-progress"), motionClassName)
+      className: (0, _classnames["default"])(prefixCls + "-list-item-progress", motionClassName)
     }, loadingProgress);
   }));
-  var listContainerNameClass = (0, _classnames["default"])("".concat(prefixCls, "-list-").concat(listType, "-container"), className);
+  var message = file.response && typeof file.response === 'string' ? file.response : ((_a = file.error) === null || _a === void 0 ? void 0 : _a.statusText) || ((_b = file.error) === null || _b === void 0 ? void 0 : _b.message) || locale.uploadError;
   var item = mergedStatus === 'error' ? /*#__PURE__*/React.createElement(_tooltip["default"], {
     title: message,
     getPopupContainer: function getPopupContainer(node) {
@@ -222,7 +204,7 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, dom) : dom;
   return /*#__PURE__*/React.createElement("div", {
-    className: listContainerNameClass,
+    className: (0, _classnames["default"])(prefixCls + "-list-item-container", className),
     style: style,
     ref: ref
   }, itemRender ? itemRender(item, file, items, {

package/lib/upload/UploadList/index.js

@@ -13,10 +13,10 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _FileTwoTone = _interopRequireDefault(require("@ant-design/icons/FileTwoTone"));
 
 var _LoadingOutlined = _interopRequireDefault(require("@ant-design/icons/LoadingOutlined"));
@@ -45,11 +45,6 @@ var _utils = require("../utils");
 
 var _ListItem = _interopRequireDefault(require("./ListItem"));
 
-var listItemMotion = (0, _extends2["default"])({}, _motion["default"]);
-delete listItemMotion.onAppearEnd;
-delete listItemMotion.onEnterEnd;
-delete listItemMotion.onLeaveEnd;
-
 var InternalUploadList = function InternalUploadList(props, ref) {
   var _classNames;
 
@@ -169,7 +164,7 @@ var InternalUploadList = function InternalUploadList(props, ref) {
           customIcon.props.onClick(e);
         }
       },
-      className: "".concat(prefixCls, "-list-item-card-actions-btn")
+      className: prefixCls + "-list-item-action"
     };
 
     if ((0, _reactNode.isValidElement)(customIcon)) {
@@ -194,12 +189,12 @@ var InternalUploadList = function InternalUploadList(props, ref) {
   });
 
   var _React$useContext = React.useContext(_configProvider.ConfigContext),
-      getPrefixCls = _React$useContext.getPrefixCls,
-      direction = _React$useContext.direction; // ============================= Render =============================
+      getPrefixCls = _React$useContext.getPrefixCls; // ============================= Render =============================
 
 
   var prefixCls = getPrefixCls('upload', customizePrefixCls);
-  var listClassNames = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-list"), true), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-list-").concat(listType), true), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-list-rtl"), direction === 'rtl'), _classNames)); // >>> Motion config
+  var rootPrefixCls = getPrefixCls();
+  var listClassNames = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, prefixCls + "-list", true), (0, _defineProperty2["default"])(_classNames, prefixCls + "-list-" + listType, true), _classNames)); // >>> Motion config
 
   var motionKeyList = (0, _toConsumableArray2["default"])(items.map(function (file) {
     return {
@@ -211,10 +206,17 @@ var InternalUploadList = function InternalUploadList(props, ref) {
 
   var motionConfig = {
     motionDeadline: 2000,
-    motionName: "".concat(prefixCls, "-").concat(animationDirection),
+    motionName: prefixCls + "-" + animationDirection,
     keys: motionKeyList,
     motionAppear: motionAppear
   };
+  var listItemMotion = (0, React.useMemo)(function () {
+    var motion = (0, _extends2["default"])({}, (0, _motion["default"])(rootPrefixCls));
+    delete motion.onAppearEnd;
+    delete motion.onEnterEnd;
+    delete motion.onLeaveEnd;
+    return motion;
+  }, [rootPrefixCls]);
 
   if (listType !== 'picture-card') {
     motionConfig = (0, _extends2["default"])((0, _extends2["default"])({}, listItemMotion), motionConfig);

package/lib/upload/index.d.ts

@@ -2,13 +2,13 @@
 import Dragger from './Dragger';
 import type { UploadProps } from './Upload';
 import InternalUpload from './Upload';
-export { DraggerProps } from './Dragger';
-export { RcFile, UploadChangeParam, UploadFile, UploadListProps, UploadProps } from './interface';
+export type { DraggerProps } from './Dragger';
+export type { RcFile, UploadChangeParam, UploadFile, UploadListProps, UploadProps, } from './interface';
 type InternalUploadType = typeof InternalUpload;
-interface UploadInterface<T = any> extends InternalUploadType {
+type CompoundedComponent<T = any> = InternalUploadType & {
     <U extends T>(props: React.PropsWithChildren<UploadProps<U>> & React.RefAttributes<any>): React.ReactElement;
     Dragger: typeof Dragger;
     LIST_IGNORE: string;
-}
-declare const Upload: UploadInterface<any>;
+};
+declare const Upload: CompoundedComponent<any>;
 export default Upload;

package/lib/upload/interface.d.ts

@@ -117,6 +117,7 @@ export interface UploadListProps<T = any> {
     items?: Array<UploadFile<T>>;
     progress?: UploadListProgressProps;
     prefixCls?: string;
+    className?: string;
     showRemoveIcon?: boolean;
     showDownloadIcon?: boolean;
     showPreviewIcon?: boolean;

package/lib/upload/style/dragger.d.ts

@@ -0,0 +1,4 @@
+import type { UploadToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+declare const genDraggerStyle: GenerateStyle<UploadToken>;
+export default genDraggerStyle;

package/lib/upload/style/dragger.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var genDraggerStyle = function genDraggerStyle(token) {
+  var _ref3;
+
+  var componentCls = token.componentCls,
+      iconCls = token.iconCls;
+  return (0, _defineProperty2["default"])({}, componentCls + "-wrapper", (0, _defineProperty2["default"])({}, componentCls + "-drag", (_ref3 = {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    textAlign: 'center',
+    background: token.colorFillAlter,
+    border: token.lineWidth + "px dashed " + token.colorBorder,
+    borderRadius: token.borderRadiusLG,
+    cursor: 'pointer',
+    transition: "border-color " + token.motionDurationSlow
+  }, (0, _defineProperty2["default"])(_ref3, componentCls, {
+    padding: token.padding + "px 0"
+  }), (0, _defineProperty2["default"])(_ref3, componentCls + "-btn", {
+    display: 'table',
+    width: '100%',
+    height: '100%',
+    outline: 'none'
+  }), (0, _defineProperty2["default"])(_ref3, componentCls + "-drag-container", {
+    display: 'table-cell',
+    verticalAlign: 'middle'
+  }), (0, _defineProperty2["default"])(_ref3, "&:not(" + componentCls + "-disabled):hover", {
+    borderColor: token.colorPrimaryHover
+  }), (0, _defineProperty2["default"])(_ref3, "p" + componentCls + "-drag-icon", (0, _defineProperty2["default"])({
+    marginBottom: token.margin
+  }, iconCls, {
+    color: token.colorPrimary,
+    fontSize: token.uploadThumbnailSize
+  })), (0, _defineProperty2["default"])(_ref3, "p" + componentCls + "-text", {
+    margin: "0 0 " + token.marginXXS + "px",
+    color: token.colorTextHeading,
+    fontSize: token.fontSizeLG
+  }), (0, _defineProperty2["default"])(_ref3, "p" + componentCls + "-hint", {
+    color: token.colorTextDescription,
+    fontSize: token.fontSize
+  }), (0, _defineProperty2["default"])(_ref3, "&" + componentCls + "-disabled", (0, _defineProperty2["default"])({
+    cursor: 'not-allowed'
+  }, "p" + componentCls + "-drag-icon " + iconCls + ",\n            p" + componentCls + "-text,\n            p" + componentCls + "-hint\n          ", {
+    color: token.colorTextDisabled
+  })), _ref3)));
+};
+
+var _default = genDraggerStyle;
+exports["default"] = _default;

package/lib/upload/style/index.d.ts

@@ -1,5 +1,10 @@
-import '../../style/default.less';
-import './index.less';
-import '../../button/style';
-import '../../progress/style';
-import '../../tooltip/style';
+import type { FullToken } from '../../theme/internal';
+export interface ComponentToken {
+}
+export interface UploadToken extends FullToken<'Upload'> {
+    uploadThumbnailSize: number;
+    uploadProgressOffset: number;
+    uploadPicCardSize: number;
+}
+declare const _default: (prefixCls: string) => import("../../theme/internal").UseComponentStyleResult;
+export default _default;

package/lib/upload/style/index.js

@@ -1,11 +1,64 @@
 "use strict";
 
-require("../../style/default.less");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 
-require("./index.less");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
 
-require("../../button/style");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-require("../../progress/style");
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-require("../../tooltip/style");
+var _internal = require("../../theme/internal");
+
+var _dragger = _interopRequireDefault(require("./dragger"));
+
+var _list = _interopRequireDefault(require("./list"));
+
+var _motion = _interopRequireDefault(require("./motion"));
+
+var _picture = require("./picture");
+
+var _rtl = _interopRequireDefault(require("./rtl"));
+
+var _style = require("../../style");
+
+var _motion2 = require("../../style/motion");
+
+var genBaseStyle = function genBaseStyle(token) {
+  var _extends2;
+
+  var componentCls = token.componentCls,
+      colorTextDisabled = token.colorTextDisabled;
+  return (0, _defineProperty2["default"])({}, componentCls + "-wrapper", (0, _extends3["default"])((0, _extends3["default"])({}, (0, _style.resetComponent)(token)), (_extends2 = {}, (0, _defineProperty2["default"])(_extends2, componentCls, {
+    outline: 0,
+    "input[type='file']": {
+      cursor: 'pointer'
+    }
+  }), (0, _defineProperty2["default"])(_extends2, componentCls + "-select", {
+    display: 'inline-block'
+  }), (0, _defineProperty2["default"])(_extends2, componentCls + "-disabled", {
+    color: colorTextDisabled,
+    cursor: 'not-allowed'
+  }), _extends2)));
+}; // ============================== Export ==============================
+
+
+var _default = (0, _internal.genComponentStyleHook)('Upload', function (token) {
+  var fontSizeHeading3 = token.fontSizeHeading3,
+      fontSize = token.fontSize,
+      lineHeight = token.lineHeight,
+      lineWidth = token.lineWidth,
+      controlHeightLG = token.controlHeightLG;
+  var listItemHeightSM = Math.round(fontSize * lineHeight);
+  var uploadToken = (0, _internal.mergeToken)(token, {
+    uploadThumbnailSize: fontSizeHeading3 * 2,
+    uploadProgressOffset: listItemHeightSM / 2 + lineWidth,
+    uploadPicCardSize: controlHeightLG * 2.55
+  });
+  return [genBaseStyle(uploadToken), (0, _dragger["default"])(uploadToken), (0, _picture.genPictureStyle)(uploadToken), (0, _picture.genPictureCardStyle)(uploadToken), (0, _list["default"])(uploadToken), (0, _motion["default"])(uploadToken), (0, _rtl["default"])(uploadToken), (0, _motion2.genCollapseMotion)(uploadToken)];
+});
+
+exports["default"] = _default;

package/lib/upload/style/list.d.ts

@@ -0,0 +1,4 @@
+import type { UploadToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+declare const genListStyle: GenerateStyle<UploadToken>;
+export default genListStyle;

package/lib/upload/style/list.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _style = require("../../style");
+
+var genListStyle = function genListStyle(token) {
+  var _actionsCls, _itemCls, _actionsCls2, _ref, _extends2;
+
+  var componentCls = token.componentCls,
+      antCls = token.antCls,
+      iconCls = token.iconCls,
+      fontSize = token.fontSize,
+      lineHeight = token.lineHeight;
+  var itemCls = componentCls + "-list-item";
+  var actionsCls = itemCls + "-actions";
+  var actionCls = itemCls + "-action";
+  var listItemHeightSM = Math.round(fontSize * lineHeight);
+  return (0, _defineProperty2["default"])({}, componentCls + "-wrapper", (0, _defineProperty2["default"])({}, componentCls + "-list", (0, _extends3["default"])((0, _extends3["default"])({}, (0, _style.clearFix)()), (_extends2 = {
+    lineHeight: token.lineHeight
+  }, (0, _defineProperty2["default"])(_extends2, itemCls, (_itemCls = {
+    position: 'relative',
+    height: token.lineHeight * fontSize,
+    marginTop: token.marginXS,
+    fontSize: fontSize,
+    display: 'flex',
+    alignItems: 'center',
+    transition: "background-color " + token.motionDurationSlow,
+    '&:hover': {
+      backgroundColor: token.controlItemBgHover
+    }
+  }, (0, _defineProperty2["default"])(_itemCls, itemCls + "-name", (0, _extends3["default"])((0, _extends3["default"])({}, _style.textEllipsis), {
+    padding: "0 " + token.paddingXS + "px",
+    lineHeight: lineHeight,
+    flex: 'auto',
+    transition: "all " + token.motionDurationSlow
+  })), (0, _defineProperty2["default"])(_itemCls, actionsCls, (_actionsCls = {}, (0, _defineProperty2["default"])(_actionsCls, actionCls, {
+    opacity: 0
+  }), (0, _defineProperty2["default"])(_actionsCls, "" + actionCls + antCls + "-btn-sm", {
+    height: listItemHeightSM,
+    border: 0,
+    lineHeight: 1,
+    // FIXME: should not override small button
+    '> span': {
+      transform: 'scale(1)'
+    }
+  }), (0, _defineProperty2["default"])(_actionsCls, "\n              " + actionCls + ":focus,\n              &.picture " + actionCls + "\n            ", {
+    opacity: 1
+  }), (0, _defineProperty2["default"])(_actionsCls, iconCls, {
+    color: token.colorTextDescription,
+    transition: "all " + token.motionDurationSlow
+  }), (0, _defineProperty2["default"])(_actionsCls, "&:hover " + iconCls, {
+    color: token.colorText
+  }), _actionsCls)), (0, _defineProperty2["default"])(_itemCls, componentCls + "-icon " + iconCls, {
+    color: token.colorTextDescription,
+    fontSize: fontSize
+  }), (0, _defineProperty2["default"])(_itemCls, itemCls + "-progress", {
+    position: 'absolute',
+    bottom: -token.uploadProgressOffset,
+    width: '100%',
+    paddingInlineStart: fontSize + token.paddingXS,
+    fontSize: fontSize,
+    lineHeight: 0,
+    pointerEvents: 'none',
+    '> div': {
+      margin: 0
+    }
+  }), _itemCls)), (0, _defineProperty2["default"])(_extends2, itemCls + ":hover " + actionCls, {
+    opacity: 1,
+    color: token.colorText
+  }), (0, _defineProperty2["default"])(_extends2, itemCls + "-error", (_ref = {
+    color: token.colorError
+  }, (0, _defineProperty2["default"])(_ref, itemCls + "-name, " + componentCls + "-icon " + iconCls, {
+    color: token.colorError
+  }), (0, _defineProperty2["default"])(_ref, actionsCls, (_actionsCls2 = {}, (0, _defineProperty2["default"])(_actionsCls2, iconCls + ", " + iconCls + ":hover", {
+    color: token.colorError
+  }), (0, _defineProperty2["default"])(_actionsCls2, actionCls, {
+    opacity: 1
+  }), _actionsCls2)), _ref)), (0, _defineProperty2["default"])(_extends2, componentCls + "-list-item-container", {
+    transition: "opacity " + token.motionDurationSlow + ", height " + token.motionDurationSlow,
+    // For smooth removing animation
+    '&::before': {
+      display: 'table',
+      width: 0,
+      height: 0,
+      content: '""'
+    }
+  }), _extends2))));
+};
+
+var _default = genListStyle;
+exports["default"] = _default;

package/lib/upload/style/motion.d.ts

@@ -0,0 +1,4 @@
+import type { UploadToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+declare const genMotionStyle: GenerateStyle<UploadToken>;
+export default genMotionStyle;

package/lib/upload/style/motion.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _cssinjs = require("@ant-design/cssinjs");
+
+var uploadAnimateInlineIn = new _cssinjs.Keyframes('uploadAnimateInlineIn', {
+  from: {
+    width: 0,
+    height: 0,
+    margin: 0,
+    padding: 0,
+    opacity: 0
+  }
+});
+var uploadAnimateInlineOut = new _cssinjs.Keyframes('uploadAnimateInlineOut', {
+  to: {
+    width: 0,
+    height: 0,
+    margin: 0,
+    padding: 0,
+    opacity: 0
+  }
+}); // =========================== Motion ===========================
+
+var genMotionStyle = function genMotionStyle(token) {
+  var _ref;
+
+  var componentCls = token.componentCls;
+  var inlineCls = componentCls + "-animate-inline";
+  return [(0, _defineProperty2["default"])({}, componentCls + "-wrapper", (_ref = {}, (0, _defineProperty2["default"])(_ref, inlineCls + "-appear, " + inlineCls + "-enter, " + inlineCls + "-leave", {
+    animationDuration: token.motionDurationSlow,
+    animationTimingFunction: token.motionEaseInOutCirc,
+    animationFillMode: 'forwards'
+  }), (0, _defineProperty2["default"])(_ref, inlineCls + "-appear, " + inlineCls + "-enter", {
+    animationName: uploadAnimateInlineIn
+  }), (0, _defineProperty2["default"])(_ref, inlineCls + "-leave", {
+    animationName: uploadAnimateInlineOut
+  }), _ref)), uploadAnimateInlineIn, uploadAnimateInlineOut];
+};
+
+var _default = genMotionStyle;
+exports["default"] = _default;

package/lib/upload/style/picture.d.ts

@@ -0,0 +1,5 @@
+import type { UploadToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+declare const genPictureStyle: GenerateStyle<UploadToken>;
+declare const genPictureCardStyle: GenerateStyle<UploadToken>;
+export { genPictureStyle, genPictureCardStyle };