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

package/lib/typography/Base/index.js

@@ -460,7 +460,7 @@ var Base = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     return /*#__PURE__*/React.createElement("a", {
       key: "expand",
-      className: "".concat(prefixCls, "-expand"),
+      className: prefixCls + "-expand",
       onClick: onExpandClick,
       "aria-label": textLocale.expand
     }, expandContent);
@@ -478,7 +478,7 @@ var Base = /*#__PURE__*/React.forwardRef(function (props, ref) {
       title: tooltip === false ? '' : editTitle
     }, /*#__PURE__*/React.createElement(_transButton["default"], {
       ref: editIconRef,
-      className: "".concat(prefixCls, "-edit"),
+      className: prefixCls + "-edit",
       onClick: onEditClick,
       "aria-label": ariaLabel
     }, icon || /*#__PURE__*/React.createElement(_EditOutlined["default"], {
@@ -500,7 +500,7 @@ var Base = /*#__PURE__*/React.forwardRef(function (props, ref) {
       key: "copy",
       title: copyTitle
     }, /*#__PURE__*/React.createElement(_transButton["default"], {
-      className: (0, _classnames["default"])("".concat(prefixCls, "-copy"), copied && "".concat(prefixCls, "-copy-success")),
+      className: (0, _classnames["default"])(prefixCls + "-copy", copied && prefixCls + "-copy-success"),
       onClick: onCopyClick,
       "aria-label": ariaLabel
     }, copied ? getNode(iconNodes[1], /*#__PURE__*/React.createElement(_CheckOutlined["default"], null), true) : getNode(iconNodes[0], /*#__PURE__*/React.createElement(_CopyOutlined["default"], null), true)));
@@ -528,7 +528,7 @@ var Base = /*#__PURE__*/React.forwardRef(function (props, ref) {
       enabledEllipsis: mergedEnableEllipsis,
       isEllipsis: isMergedEllipsis
     }, /*#__PURE__*/React.createElement(_Typography["default"], (0, _extends2["default"])({
-      className: (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-").concat(type), type), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-ellipsis"), enableEllipsis), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-single-line"), mergedEnableEllipsis && rows === 1), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-ellipsis-single-line"), cssTextOverflow), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-ellipsis-multiple-line"), cssLineClamp), _classNames), className),
+      className: (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, prefixCls + "-" + type, type), (0, _defineProperty2["default"])(_classNames, prefixCls + "-disabled", disabled), (0, _defineProperty2["default"])(_classNames, prefixCls + "-ellipsis", enableEllipsis), (0, _defineProperty2["default"])(_classNames, prefixCls + "-single-line", mergedEnableEllipsis && rows === 1), (0, _defineProperty2["default"])(_classNames, prefixCls + "-ellipsis-single-line", cssTextOverflow), (0, _defineProperty2["default"])(_classNames, prefixCls + "-ellipsis-multiple-line", cssLineClamp), _classNames), className),
       prefixCls: customizePrefixCls,
       style: (0, _extends2["default"])((0, _extends2["default"])({}, style), {
         WebkitLineClamp: cssLineClamp ? rows : undefined

package/lib/typography/Editable.d.ts

@@ -2,7 +2,7 @@ import type { AutoSizeType } from 'rc-textarea/lib/ResizableTextArea';
 import * as React from 'react';
 import type { DirectionType } from '../config-provider';
 interface EditableProps {
-    prefixCls?: string;
+    prefixCls: string;
     value: string;
     ['aria-label']?: string;
     onSave: (value: string) => void;

package/lib/typography/Editable.js

@@ -25,6 +25,8 @@ var _TextArea = _interopRequireDefault(require("../input/TextArea"));
 
 var _reactNode = require("../_util/reactNode");
 
+var _style = _interopRequireDefault(require("./style"));
+
 var Editable = function Editable(_ref) {
   var prefixCls = _ref.prefixCls,
       ariaLabel = _ref['aria-label'],
@@ -107,9 +109,15 @@ var Editable = function Editable(_ref) {
     confirmChange();
   };
 
-  var textClassName = component ? "".concat(prefixCls, "-").concat(component) : '';
-  var textAreaClassName = (0, _classnames["default"])(prefixCls, "".concat(prefixCls, "-edit-content"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-rtl"), direction === 'rtl'), className, textClassName);
-  return /*#__PURE__*/React.createElement("div", {
+  var textClassName = component ? prefixCls + "-" + component : '';
+
+  var _useStyle = (0, _style["default"])(prefixCls),
+      _useStyle2 = (0, _slicedToArray2["default"])(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1];
+
+  var textAreaClassName = (0, _classnames["default"])(prefixCls, prefixCls + "-edit-content", (0, _defineProperty2["default"])({}, prefixCls + "-rtl", direction === 'rtl'), className, textClassName, hashId);
+  return wrapSSR( /*#__PURE__*/React.createElement("div", {
     className: textAreaClassName,
     style: style
   }, /*#__PURE__*/React.createElement(_TextArea["default"], {
@@ -126,8 +134,8 @@ var Editable = function Editable(_ref) {
     rows: 1,
     autoSize: autoSize
   }), enterIcon !== null ? (0, _reactNode.cloneElement)(enterIcon, {
-    className: "".concat(prefixCls, "-edit-content-confirm")
-  }) : null);
+    className: prefixCls + "-edit-content-confirm"
+  }) : null));
 };
 
 var _default = Editable;

package/lib/typography/Title.js

@@ -41,7 +41,7 @@ var Title = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var component;
 
   if (TITLE_ELE_LIST.includes(level)) {
-    component = "h".concat(level);
+    component = "h" + level;
   } else {
     process.env.NODE_ENV !== "production" ? (0, _warning["default"])(false, 'Typography.Title', 'Title only accept `1 | 2 | 3 | 4 | 5` as `level` value. And `5` need 4.6.0+ version.') : void 0;
     component = 'h1';

package/lib/typography/Typography.js

@@ -13,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _ref = require("rc-util/lib/ref");
@@ -23,6 +25,8 @@ var _configProvider = require("../config-provider");
 
 var _warning = _interopRequireDefault(require("../_util/warning"));
 
+var _style = _interopRequireDefault(require("./style"));
+
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
 
@@ -58,16 +62,21 @@ var Typography = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     mergedRef = (0, _ref.composeRef)(ref, setContentRef);
   }
 
-  var prefixCls = getPrefixCls('typography', customizePrefixCls);
-  var componentClassName = (0, _classnames["default"])(prefixCls, (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-rtl"), direction === 'rtl'), className);
-  return (
-    /*#__PURE__*/
-    // @ts-expect-error: Expression produces a union type that is too complex to represent.
-    React.createElement(Component, (0, _extends2["default"])({
-      className: componentClassName,
-      ref: mergedRef
-    }, restProps), children)
-  );
+  var prefixCls = getPrefixCls('typography', customizePrefixCls); // Style
+
+  var _useStyle = (0, _style["default"])(prefixCls),
+      _useStyle2 = (0, _slicedToArray2["default"])(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1];
+
+  var componentClassName = (0, _classnames["default"])(prefixCls, (0, _defineProperty2["default"])({}, prefixCls + "-rtl", direction === 'rtl'), className, hashId);
+  return wrapSSR(
+  /*#__PURE__*/
+  // @ts-expect-error: Expression produces a union type that is too complex to represent.
+  React.createElement(Component, (0, _extends2["default"])({
+    className: componentClassName,
+    ref: mergedRef
+  }, restProps), children));
 });
 
 if (process.env.NODE_ENV !== 'production') {

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

@@ -1,4 +1,9 @@
-import '../../style/default.less';
-import './index.less';
-import '../../input/style';
-import '../../tooltip/style';
+import type { FullToken } from '../../theme/internal';
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+    sizeMarginHeadingVerticalStart: number | string;
+    sizeMarginHeadingVerticalEnd: number | string;
+}
+export type TypographyToken = FullToken<'Typography'>;
+declare const _default: (prefixCls: string) => import("../../theme/internal").UseComponentStyleResult;
+export default _default;

package/lib/typography/style/index.js

@@ -1,9 +1,75 @@
 "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("../../input/style");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-require("../../tooltip/style");
+var _extends5 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _internal = require("../../theme/internal");
+
+var _mixins = require("./mixins");
+
+var _style = require("../../style");
+
+var genTypographyStyle = function genTypographyStyle(token) {
+  var _extends3;
+
+  var componentCls = token.componentCls,
+      sizeMarginHeadingVerticalStart = token.sizeMarginHeadingVerticalStart;
+  return (0, _defineProperty2["default"])({}, componentCls, (0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((0, _defineProperty2["default"])({
+    color: token.colorText,
+    wordBreak: 'break-word',
+    lineHeight: token.lineHeight,
+    '&&-secondary': {
+      color: token.colorTextDescription
+    },
+    '&&-success': {
+      color: token.colorSuccess
+    },
+    '&&-warning': {
+      color: token.colorWarning
+    },
+    '&&-danger': {
+      color: token.colorError,
+      'a&:active, a&:focus': {
+        color: token.colorErrorActive
+      },
+      'a&:hover': {
+        color: token.colorErrorHover
+      }
+    },
+    '&&-disabled': {
+      color: token.colorTextDisabled,
+      cursor: 'not-allowed',
+      userSelect: 'none'
+    }
+  }, "\n        div&,\n        p\n      ", {
+    marginBottom: '1em'
+  }), (0, _mixins.getTitleStyles)(token)), (_extends3 = {}, (0, _defineProperty2["default"])(_extends3, "\n      & + h1&,\n      & + h2&,\n      & + h3&,\n      & + h4&,\n      & + h5&\n      ", {
+    marginTop: sizeMarginHeadingVerticalStart
+  }), (0, _defineProperty2["default"])(_extends3, "\n      div,\n      ul,\n      li,\n      p,\n      h1,\n      h2,\n      h3,\n      h4,\n      h5", (0, _defineProperty2["default"])({}, "\n        + h1,\n        + h2,\n        + h3,\n        + h4,\n        + h5\n        ", {
+    marginTop: sizeMarginHeadingVerticalStart
+  })), _extends3)), (0, _mixins.getResetStyles)()), (0, _mixins.getLinkStyles)(token)), (0, _defineProperty2["default"])({}, "\n        " + componentCls + "-expand,\n        " + componentCls + "-edit,\n        " + componentCls + "-copy\n      ", (0, _extends5["default"])((0, _extends5["default"])({}, (0, _style.operationUnit)(token)), {
+    marginInlineStart: token.marginXXS
+  }))), (0, _mixins.getEditableStyles)(token)), (0, _mixins.getCopiableStyles)(token)), (0, _mixins.getEllipsisStyles)()), {
+    '&-rtl': {
+      direction: 'rtl'
+    }
+  }));
+}; // ============================== Export ==============================
+
+
+var _default = (0, _internal.genComponentStyleHook)('Typography', function (token) {
+  return [genTypographyStyle(token)];
+}, {
+  sizeMarginHeadingVerticalStart: '1.2em',
+  sizeMarginHeadingVerticalEnd: '0.5em'
+});
+
+exports["default"] = _default;

package/lib/typography/style/mixins.d.ts

@@ -0,0 +1,9 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { TypographyToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+export declare const getTitleStyles: GenerateStyle<TypographyToken, CSSObject>;
+export declare const getLinkStyles: GenerateStyle<TypographyToken, CSSObject>;
+export declare const getResetStyles: () => CSSObject;
+export declare const getEditableStyles: GenerateStyle<TypographyToken, CSSObject>;
+export declare const getCopiableStyles: GenerateStyle<TypographyToken, CSSObject>;
+export declare const getEllipsisStyles: () => CSSObject;

package/lib/typography/style/mixins.js

@@ -0,0 +1,236 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTitleStyles = exports.getResetStyles = exports.getLinkStyles = exports.getEllipsisStyles = exports.getEditableStyles = exports.getCopiableStyles = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _colors = require("@ant-design/colors");
+
+var _style = require("../../input/style");
+
+var _style2 = require("../../style");
+/*
+.typography-title(@fontSize; @fontWeight; @lineHeight; @headingColor; @headingMarginBottom;) {
+  margin-bottom: @headingMarginBottom;
+  color: @headingColor;
+  font-weight: @fontWeight;
+  fontSize: @fontSize;
+  line-height: @lineHeight;
+}
+*/
+// eslint-disable-next-line import/prefer-default-export
+
+
+var getTitleStyle = function getTitleStyle(fontSize, lineHeight, color, token) {
+  var sizeMarginHeadingVerticalEnd = token.sizeMarginHeadingVerticalEnd,
+      fontWeightStrong = token.fontWeightStrong;
+  return {
+    marginBottom: sizeMarginHeadingVerticalEnd,
+    color: color,
+    fontWeight: fontWeightStrong,
+    fontSize: fontSize,
+    lineHeight: lineHeight
+  };
+}; // eslint-disable-next-line import/prefer-default-export
+
+
+var getTitleStyles = function getTitleStyles(token) {
+  var headings = [1, 2, 3, 4, 5];
+  var styles = {};
+  headings.forEach(function (headingLevel) {
+    styles["\n      h" + headingLevel + "&,\n      div&-h" + headingLevel + ",\n      div&-h" + headingLevel + " > textarea,\n      h" + headingLevel + "\n    "] = getTitleStyle(token["fontSizeHeading" + headingLevel], token["lineHeightHeading" + headingLevel], token.colorTextHeading, token);
+  });
+  return styles;
+};
+
+exports.getTitleStyles = getTitleStyles;
+
+var getLinkStyles = function getLinkStyles(token) {
+  var componentCls = token.componentCls;
+  return {
+    'a&, a': (0, _extends3["default"])((0, _extends3["default"])({}, (0, _style2.operationUnit)(token)), (0, _defineProperty2["default"])({
+      textDecoration: token.linkDecoration,
+      '&:active, &:hover': {
+        textDecoration: token.linkHoverDecoration
+      }
+    }, "&[disabled], &" + componentCls + "-disabled", {
+      color: token.colorTextDisabled,
+      cursor: 'not-allowed',
+      '&:active, &:hover': {
+        color: token.colorTextDisabled
+      },
+      '&:active': {
+        pointerEvents: 'none'
+      }
+    }))
+  };
+};
+
+exports.getLinkStyles = getLinkStyles;
+
+var getResetStyles = function getResetStyles() {
+  return {
+    code: {
+      margin: '0 0.2em',
+      paddingInline: '0.4em',
+      paddingBlock: '0.2em 0.1em',
+      fontSize: '85%',
+      background: 'rgba(150, 150, 150, 0.1)',
+      border: '1px solid rgba(100, 100, 100, 0.2)',
+      borderRadius: 3
+    },
+    kbd: {
+      margin: '0 0.2em',
+      paddingInline: '0.4em',
+      paddingBlock: '0.15em 0.1em',
+      fontSize: '90%',
+      background: 'rgba(150, 150, 150, 0.06)',
+      border: '1px solid rgba(100, 100, 100, 0.2)',
+      borderBottomWidth: 2,
+      borderRadius: 3
+    },
+    mark: {
+      padding: 0,
+      // FIXME hardcode in v4
+      backgroundColor: _colors.gold[2]
+    },
+    'u, ins': {
+      textDecoration: 'underline',
+      textDecorationSkipInk: 'auto'
+    },
+    's, del': {
+      textDecoration: 'line-through'
+    },
+    strong: {
+      fontWeight: 600
+    },
+    // list
+    'ul, ol': {
+      marginInline: 0,
+      marginBlock: '0 1em',
+      padding: 0,
+      li: {
+        marginInline: '20px 0',
+        marginBlock: 0,
+        paddingInline: '4px 0',
+        paddingBlock: 0
+      }
+    },
+    ul: {
+      listStyleType: 'circle',
+      ul: {
+        listStyleType: 'disc'
+      }
+    },
+    ol: {
+      listStyleType: 'decimal'
+    },
+    // pre & block
+    'pre, blockquote': {
+      margin: '1em 0'
+    },
+    pre: {
+      padding: '0.4em 0.6em',
+      whiteSpace: 'pre-wrap',
+      wordWrap: 'break-word',
+      background: 'rgba(150, 150, 150, 0.1)',
+      border: '1px solid rgba(100, 100, 100, 0.2)',
+      borderRadius: 3,
+      // Compatible for marked
+      code: {
+        display: 'inline',
+        margin: 0,
+        padding: 0,
+        fontSize: 'inherit',
+        fontFamily: 'inherit',
+        background: 'transparent',
+        border: 0
+      }
+    },
+    blockquote: {
+      paddingInline: '0.6em 0',
+      paddingBlock: 0,
+      borderInlineStart: '4px solid rgba(100, 100, 100, 0.2)',
+      opacity: 0.85
+    }
+  };
+};
+
+exports.getResetStyles = getResetStyles;
+
+var getEditableStyles = function getEditableStyles(token) {
+  var _editContent;
+
+  var componentCls = token.componentCls;
+  var inputToken = (0, _style.initInputToken)(token);
+  var inputShift = inputToken.inputPaddingVertical + 1;
+  return {
+    '&-edit-content': (_editContent = {
+      position: 'relative',
+      'div&': {
+        insetInlineStart: -token.paddingSM,
+        marginTop: -inputShift,
+        marginBottom: "calc(1em - " + inputShift + "px)"
+      }
+    }, (0, _defineProperty2["default"])(_editContent, componentCls + "-edit-content-confirm", {
+      position: 'absolute',
+      insetInlineEnd: token.marginXS + 2,
+      insetBlockEnd: token.marginXS,
+      color: token.colorTextDescription,
+      // default style
+      fontWeight: 'normal',
+      fontSize: token.fontSize,
+      fontStyle: 'normal',
+      pointerEvents: 'none'
+    }), (0, _defineProperty2["default"])(_editContent, "textarea", {
+      margin: '0!important',
+      // Fix Editable Textarea flash in Firefox
+      MozTransition: 'none',
+      height: '1em'
+    }), _editContent)
+  };
+};
+
+exports.getEditableStyles = getEditableStyles;
+
+var getCopiableStyles = function getCopiableStyles(token) {
+  return {
+    '&-copy-success': (0, _defineProperty2["default"])({}, "\n    &,\n    &:hover,\n    &:focus", {
+      color: token.colorSuccess
+    })
+  };
+};
+
+exports.getCopiableStyles = getCopiableStyles;
+
+var getEllipsisStyles = function getEllipsisStyles() {
+  var _ref;
+
+  return _ref = {}, (0, _defineProperty2["default"])(_ref, "\n  a&-ellipsis,\n  span&-ellipsis\n  ", {
+    display: 'inline-block',
+    maxWidth: '100%'
+  }), (0, _defineProperty2["default"])(_ref, '&-single-line', {
+    whiteSpace: 'nowrap'
+  }), (0, _defineProperty2["default"])(_ref, '&-ellipsis-single-line', {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    // https://blog.csdn.net/iefreer/article/details/50421025
+    'a&, span&': {
+      verticalAlign: 'bottom'
+    }
+  }), (0, _defineProperty2["default"])(_ref, '&-ellipsis-multiple-line', {
+    display: '-webkit-box',
+    overflow: 'hidden',
+    WebkitLineClamp: 3,
+    WebkitBoxOrient: 'vertical'
+  }), _ref;
+};
+
+exports.getEllipsisStyles = getEllipsisStyles;

package/lib/upload/Upload.js

@@ -37,7 +37,7 @@ var _DisabledContext = _interopRequireDefault(require("../config-provider/Disabl
 
 var _LocaleReceiver = _interopRequireDefault(require("../locale-provider/LocaleReceiver"));
 
-var _default2 = _interopRequireDefault(require("../locale/default"));
+var _en_US = _interopRequireDefault(require("../locale/en_US"));
 
 var _warning = _interopRequireDefault(require("../_util/warning"));
 
@@ -45,6 +45,8 @@ var _UploadList = _interopRequireDefault(require("./UploadList"));
 
 var _utils = require("./utils");
 
+var _style = _interopRequireDefault(require("./style"));
+
 var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
   function adopt(value) {
     return value instanceof P ? value : new P(function (resolve) {
@@ -77,12 +79,10 @@ var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P
   });
 };
 
-var LIST_IGNORE = "__LIST_IGNORE_".concat(Date.now(), "__");
+var LIST_IGNORE = "__LIST_IGNORE_" + Date.now() + "__";
 exports.LIST_IGNORE = LIST_IGNORE;
 
 var InternalUpload = function InternalUpload(props, ref) {
-  var _classNames2;
-
   var fileList = props.fileList,
       defaultFileList = props.defaultFileList,
       onRemove = props.onRemove,
@@ -145,7 +145,7 @@ var InternalUpload = function InternalUpload(props, ref) {
     var timestamp = Date.now();
     (fileList || []).forEach(function (file, index) {
       if (!file.uid && !Object.isFrozen(file)) {
-        file.uid = "__AUTO__".concat(timestamp, "_").concat(index, "__");
+        file.uid = "__AUTO__" + timestamp + "_" + index + "__";
       }
     });
   }, [fileList]);
@@ -430,10 +430,15 @@ var InternalUpload = function InternalUpload(props, ref) {
     delete rcUploadProps.id;
   }
 
+  var _useStyle = (0, _style["default"])(prefixCls),
+      _useStyle2 = (0, _slicedToArray2["default"])(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1];
+
   var renderUploadList = function renderUploadList(button, buttonVisible) {
     return showUploadList ? /*#__PURE__*/React.createElement(_LocaleReceiver["default"], {
       componentName: "Upload",
-      defaultLocale: _default2["default"].Upload
+      defaultLocale: _en_US["default"].Upload
     }, function (contextLocale) {
       var _ref = typeof showUploadList === 'boolean' ? {} : showUploadList,
           showRemoveIcon = _ref.showRemoveIcon,
@@ -468,13 +473,17 @@ var InternalUpload = function InternalUpload(props, ref) {
     }) : button;
   };
 
+  var rtlCls = (0, _defineProperty2["default"])({}, prefixCls + "-rtl", direction === 'rtl');
+
   if (type === 'drag') {
     var _classNames;
 
-    var dragCls = (0, _classnames["default"])(prefixCls, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-drag"), true), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-drag-uploading"), mergedFileList.some(function (file) {
+    var dragCls = (0, _classnames["default"])(prefixCls, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, prefixCls + "-drag", true), (0, _defineProperty2["default"])(_classNames, prefixCls + "-drag-uploading", mergedFileList.some(function (file) {
       return file.status === 'uploading';
-    })), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-drag-hover"), dragState === 'dragover'), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-disabled"), mergedDisabled), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames), className);
-    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
+    })), (0, _defineProperty2["default"])(_classNames, prefixCls + "-drag-hover", dragState === 'dragover'), (0, _defineProperty2["default"])(_classNames, prefixCls + "-disabled", mergedDisabled), (0, _defineProperty2["default"])(_classNames, prefixCls + "-rtl", direction === 'rtl'), _classNames), hashId);
+    return wrapSSR( /*#__PURE__*/React.createElement("span", {
+      className: (0, _classnames["default"])(prefixCls + "-wrapper", rtlCls, className, hashId)
+    }, /*#__PURE__*/React.createElement("div", {
       className: dragCls,
       onDrop: onFileDrop,
       onDragOver: onFileDrop,
@@ -482,13 +491,13 @@ var InternalUpload = function InternalUpload(props, ref) {
       style: style
     }, /*#__PURE__*/React.createElement(_rcUpload["default"], (0, _extends2["default"])({}, rcUploadProps, {
       ref: upload,
-      className: "".concat(prefixCls, "-btn")
+      className: prefixCls + "-btn"
     }), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-drag-container")
-    }, children))), renderUploadList());
+      className: prefixCls + "-drag-container"
+    }, children))), renderUploadList()));
   }
 
-  var uploadButtonCls = (0, _classnames["default"])(prefixCls, (_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-select"), true), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-select-").concat(listType), true), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-disabled"), mergedDisabled), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames2));
+  var uploadButtonCls = (0, _classnames["default"])(prefixCls, prefixCls + "-select", (0, _defineProperty2["default"])({}, prefixCls + "-disabled", mergedDisabled));
 
   var renderUploadButton = function renderUploadButton(uploadButtonStyle) {
     return /*#__PURE__*/React.createElement("div", {
@@ -504,14 +513,14 @@ var InternalUpload = function InternalUpload(props, ref) {
   });
 
   if (listType === 'picture-card') {
-    return /*#__PURE__*/React.createElement("span", {
-      className: (0, _classnames["default"])("".concat(prefixCls, "-picture-card-wrapper"), className)
-    }, renderUploadList(uploadButton, !!children));
+    return wrapSSR( /*#__PURE__*/React.createElement("span", {
+      className: (0, _classnames["default"])(prefixCls + "-wrapper", prefixCls + "-picture-card-wrapper", rtlCls, className, hashId)
+    }, renderUploadList(uploadButton, !!children)));
   }
 
-  return /*#__PURE__*/React.createElement("span", {
-    className: className
-  }, uploadButton, renderUploadList());
+  return wrapSSR( /*#__PURE__*/React.createElement("span", {
+    className: (0, _classnames["default"])(prefixCls + "-wrapper", rtlCls, className, hashId)
+  }, uploadButton, renderUploadList()));
 };
 
 var Upload = /*#__PURE__*/React.forwardRef(InternalUpload);