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

package/es/anchor/style/index.js

@@ -1,4 +1,87 @@
-import "../../style/default.less";
-import "./index.less"; // style dependencies
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { genComponentStyleHook, mergeToken } from "../../theme/internal";
+import { resetComponent, textEllipsis } from "../../style"; // ============================== Shared ==============================
 
-import "../../affix/style";
+var genSharedAnchorStyle = function genSharedAnchorStyle(token) {
+  var _ref2, _extends2, _ref3;
+
+  var componentCls = token.componentCls,
+      holderOffsetBlock = token.holderOffsetBlock,
+      motionDurationSlow = token.motionDurationSlow,
+      lineWidthBold = token.lineWidthBold,
+      colorPrimary = token.colorPrimary;
+  return _defineProperty({}, componentCls + "-wrapper", (_ref3 = {
+    marginBlockStart: -holderOffsetBlock,
+    paddingBlockStart: holderOffsetBlock,
+    // delete overflow: auto
+    // overflow: 'auto',
+    backgroundColor: 'transparent'
+  }, _defineProperty(_ref3, componentCls, _extends(_extends({}, resetComponent(token)), (_extends2 = {
+    position: 'relative',
+    paddingInlineStart: lineWidthBold
+  }, _defineProperty(_extends2, componentCls + "-ink", {
+    position: 'absolute',
+    insetBlockStart: 0,
+    insetInlineStart: 0,
+    height: '100%',
+    '&::before': {
+      position: 'relative',
+      display: 'block',
+      width: lineWidthBold,
+      height: '100%',
+      margin: '0 auto',
+      backgroundColor: token.colorSplit,
+      content: '" "'
+    }
+  }), _defineProperty(_extends2, componentCls + "-ink-ball", _defineProperty({
+    position: 'absolute',
+    left: {
+      _skip_check_: true,
+      value: 0
+    },
+    display: 'none',
+    transform: 'translateY(-50%)',
+    transition: "top " + motionDurationSlow + " ease-in-out",
+    width: lineWidthBold,
+    backgroundColor: colorPrimary
+  }, "&" + componentCls + "-ink-ball-visible", {
+    display: 'inline-block'
+  })), _defineProperty(_extends2, componentCls + "-link", (_ref2 = {
+    paddingBlock: token.anchorPaddingBlock,
+    paddingInline: token.anchorPaddingInline + "px 0",
+    '&-title': _extends(_extends({}, textEllipsis), {
+      position: 'relative',
+      display: 'block',
+      marginBlockEnd: token.anchorTitleBlock,
+      color: token.colorText,
+      transition: "all " + token.motionDurationSlow,
+      '&:only-child': {
+        marginBlockEnd: 0
+      }
+    })
+  }, _defineProperty(_ref2, "&-active > " + componentCls + "-link-title", {
+    color: token.colorPrimary
+  }), _defineProperty(_ref2, componentCls + "-link", {
+    paddingBlock: token.anchorPaddingBlockSecondary
+  }), _ref2)), _extends2))), _defineProperty(_ref3, componentCls + "-fixed " + componentCls + "-ink " + componentCls + "-ink-ball", {
+    display: 'none'
+  }), _ref3));
+}; // ============================== Export ==============================
+
+
+export default genComponentStyleHook('Anchor', function (token) {
+  var fontSize = token.fontSize,
+      fontSizeLG = token.fontSizeLG,
+      padding = token.padding,
+      paddingXXS = token.paddingXXS;
+  var anchorToken = mergeToken(token, {
+    holderOffsetBlock: paddingXXS,
+    anchorPaddingBlock: paddingXXS,
+    anchorPaddingBlockSecondary: paddingXXS / 2,
+    anchorPaddingInline: padding,
+    anchorTitleBlock: fontSize / 14 * 3,
+    anchorBallSize: fontSizeLG / 2
+  });
+  return [genSharedAnchorStyle(anchorToken)];
+});

package/es/auto-complete/index.d.ts

@@ -18,12 +18,9 @@ export type DataSourceItemType = DataSourceItemObject | React.ReactNode;
 export interface AutoCompleteProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<InternalSelectProps<ValueType, OptionType>, 'inputIcon' | 'loading' | 'mode' | 'optionLabelProp' | 'labelInValue'> {
     dataSource?: DataSourceItemType[];
     status?: InputStatus;
-    /**
-     * @deprecated `dropdownClassName` is deprecated which will be removed in next major version.
-     *   Please use `popupClassName` instead.
-     */
-    dropdownClassName?: string;
     popupClassName?: string;
+    /** @deprecated Please use `popupClassName` instead */
+    dropdownClassName?: string;
 }
 declare const RefAutoComplete: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: AutoCompleteProps<ValueType, OptionType> & {
     children?: React.ReactNode;
@@ -31,5 +28,7 @@ declare const RefAutoComplete: (<ValueType = any, OptionType extends BaseOptionT
     ref?: React.Ref<BaseSelectRef> | undefined;
 }) => React.ReactElement) & {
     Option: typeof Option;
+    _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
 };
+declare const PurePanel: any;
 export default RefAutoComplete;

package/es/auto-complete/index.js

@@ -15,6 +15,7 @@ import omit from "rc-util/es/omit";
 import * as React from 'react';
 import { ConfigConsumer } from "../config-provider";
 import Select from "../select";
+import genPurePanel from "../_util/PurePanel";
 import { isValidElement } from "../_util/reactNode";
 import warning from "../_util/warning";
 var Option = Select.Option;
@@ -77,18 +78,21 @@ var AutoComplete = function AutoComplete(props, ref) {
     }) : [];
   }
 
-  process.env.NODE_ENV !== "production" ? warning(!('dataSource' in props), 'AutoComplete', '`dataSource` is deprecated, please use `options` instead.') : void 0;
-  process.env.NODE_ENV !== "production" ? warning(!dropdownClassName, 'AutoComplete', '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.') : void 0;
-  process.env.NODE_ENV !== "production" ? warning(!customizeInput || !('size' in props), 'AutoComplete', 'You need to control style self instead of setting `size` when using customize input.') : void 0;
+  if (process.env.NODE_ENV !== 'production') {
+    process.env.NODE_ENV !== "production" ? warning(!('dataSource' in props), 'AutoComplete', '`dataSource` is deprecated, please use `options` instead.') : void 0;
+    process.env.NODE_ENV !== "production" ? warning(!customizeInput || !('size' in props), 'AutoComplete', 'You need to control style self instead of setting `size` when using customize input.') : void 0;
+    process.env.NODE_ENV !== "production" ? warning(!dropdownClassName, 'AutoComplete', '`dropdownClassName` is deprecated, please use `popupClassName` instead.') : void 0;
+  }
+
   return /*#__PURE__*/React.createElement(ConfigConsumer, null, function (_ref) {
     var getPrefixCls = _ref.getPrefixCls;
     var prefixCls = getPrefixCls('select', customizePrefixCls);
     return /*#__PURE__*/React.createElement(Select, _extends({
       ref: ref
-    }, omit(props, ['dataSource']), {
+    }, omit(props, ['dataSource', 'dropdownClassName']), {
       prefixCls: prefixCls,
       popupClassName: popupClassName || dropdownClassName,
-      className: classNames("".concat(prefixCls, "-auto-complete"), className),
+      className: classNames(prefixCls + "-auto-complete", className),
       mode: Select.SECRET_COMBOBOX_MODE_DO_NOT_USE
     }, {
       // Internal api
@@ -97,6 +101,11 @@ var AutoComplete = function AutoComplete(props, ref) {
   });
 };
 
-var RefAutoComplete = /*#__PURE__*/React.forwardRef(AutoComplete);
+var RefAutoComplete = /*#__PURE__*/React.forwardRef(AutoComplete); // We don't care debug panel
+
+/* istanbul ignore next */
+
+var PurePanel = genPurePanel(RefAutoComplete);
 RefAutoComplete.Option = Option;
+RefAutoComplete._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
 export default RefAutoComplete;

package/es/avatar/avatar.js

@@ -25,6 +25,7 @@ import useBreakpoint from "../grid/hooks/useBreakpoint";
 import { responsiveArray } from "../_util/responsiveObserve";
 import warning from "../_util/warning";
 import SizeContext from "./SizeContext";
+import useStyle from "./style";
 
 var InternalAvatar = function InternalAvatar(props, ref) {
   var _classNames, _classNames2;
@@ -124,19 +125,25 @@ var InternalAvatar = function InternalAvatar(props, ref) {
     return currentSize ? {
       width: currentSize,
       height: currentSize,
-      lineHeight: "".concat(currentSize, "px"),
+      lineHeight: currentSize + "px",
       fontSize: icon ? currentSize / 2 : 18
     } : {};
   }, [screens, size]);
-  process.env.NODE_ENV !== "production" ? warning(!(typeof icon === 'string' && icon.length > 2), 'Avatar', "`icon` is using ReactNode instead of string naming in v4. Please check `".concat(icon, "` at https://ant.design/components/icon")) : void 0;
+  process.env.NODE_ENV !== "production" ? warning(!(typeof icon === 'string' && icon.length > 2), 'Avatar', "`icon` is using ReactNode instead of string naming in v4. Please check `" + icon + "` at https://ant.design/components/icon") : void 0;
   var prefixCls = getPrefixCls('avatar', customizePrefixCls);
-  var sizeCls = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-lg"), size === 'large'), _defineProperty(_classNames, "".concat(prefixCls, "-sm"), size === 'small'), _classNames));
+
+  var _useStyle = useStyle(prefixCls),
+      _useStyle2 = _slicedToArray(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1];
+
+  var sizeCls = classNames((_classNames = {}, _defineProperty(_classNames, prefixCls + "-lg", size === 'large'), _defineProperty(_classNames, prefixCls + "-sm", size === 'small'), _classNames));
   var hasImageElement = /*#__PURE__*/React.isValidElement(src);
-  var classString = classNames(prefixCls, sizeCls, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-").concat(shape), !!shape), _defineProperty(_classNames2, "".concat(prefixCls, "-image"), hasImageElement || src && isImgExist), _defineProperty(_classNames2, "".concat(prefixCls, "-icon"), !!icon), _classNames2), className);
+  var classString = classNames(prefixCls, sizeCls, (_classNames2 = {}, _defineProperty(_classNames2, prefixCls + "-" + shape, !!shape), _defineProperty(_classNames2, prefixCls + "-image", hasImageElement || src && isImgExist), _defineProperty(_classNames2, prefixCls + "-icon", !!icon), _classNames2), className, hashId);
   var sizeStyle = typeof size === 'number' ? {
     width: size,
     height: size,
-    lineHeight: "".concat(size, "px"),
+    lineHeight: size + "px",
     fontSize: icon ? size / 2 : 18
   } : {};
   var childrenToRender;
@@ -155,25 +162,25 @@ var InternalAvatar = function InternalAvatar(props, ref) {
   } else if (icon) {
     childrenToRender = icon;
   } else if (mounted || scale !== 1) {
-    var transformString = "scale(".concat(scale, ") translateX(-50%)");
+    var transformString = "scale(" + scale + ") translateX(-50%)";
     var childrenStyle = {
       msTransform: transformString,
       WebkitTransform: transformString,
       transform: transformString
     };
     var sizeChildrenStyle = typeof size === 'number' ? {
-      lineHeight: "".concat(size, "px")
+      lineHeight: size + "px"
     } : {};
     childrenToRender = /*#__PURE__*/React.createElement(ResizeObserver, {
       onResize: setScaleParam
     }, /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-string"),
+      className: prefixCls + "-string",
       ref: avatarChildrenRef,
       style: _extends(_extends({}, sizeChildrenStyle), childrenStyle)
     }, children));
   } else {
     childrenToRender = /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-string"),
+      className: prefixCls + "-string",
       style: {
         opacity: 0
       },
@@ -185,11 +192,11 @@ var InternalAvatar = function InternalAvatar(props, ref) {
 
   delete others.onError;
   delete others.gap;
-  return /*#__PURE__*/React.createElement("span", _extends({}, others, {
+  return wrapSSR( /*#__PURE__*/React.createElement("span", _extends({}, others, {
     style: _extends(_extends(_extends({}, sizeStyle), responsiveSizeStyle), others.style),
     className: classString,
     ref: avatarNodeMergeRef
-  }), childrenToRender);
+  }), childrenToRender));
 };
 
 var Avatar = /*#__PURE__*/React.forwardRef(InternalAvatar);

package/es/avatar/group.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import classNames from 'classnames';
 import toArray from "rc-util/es/Children/toArray";
 import * as React from 'react';
@@ -7,6 +8,7 @@ import Popover from "../popover";
 import { cloneElement } from "../_util/reactNode";
 import Avatar from "./avatar";
 import { SizeContextProvider } from "./SizeContext";
+import useStyle from "./style";
 
 var Group = function Group(props) {
   var _React$useContext = React.useContext(ConfigContext),
@@ -19,8 +21,15 @@ var Group = function Group(props) {
       maxCount = props.maxCount,
       maxStyle = props.maxStyle,
       size = props.size;
-  var prefixCls = getPrefixCls('avatar-group', customizePrefixCls);
-  var cls = classNames(prefixCls, _defineProperty({}, "".concat(prefixCls, "-rtl"), direction === 'rtl'), className);
+  var prefixCls = getPrefixCls('avatar', customizePrefixCls);
+  var groupPrefixCls = prefixCls + "-group";
+
+  var _useStyle = useStyle(prefixCls),
+      _useStyle2 = _slicedToArray(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1];
+
+  var cls = classNames(groupPrefixCls, _defineProperty({}, groupPrefixCls + "-rtl", direction === 'rtl'), className, hashId);
   var children = props.children,
       _props$maxPopoverPlac = props.maxPopoverPlacement,
       maxPopoverPlacement = _props$maxPopoverPlac === void 0 ? 'top' : _props$maxPopoverPlac,
@@ -28,7 +37,7 @@ var Group = function Group(props) {
       maxPopoverTrigger = _props$maxPopoverTrig === void 0 ? 'hover' : _props$maxPopoverTrig;
   var childrenWithProps = toArray(children).map(function (child, index) {
     return cloneElement(child, {
-      key: "avatar-key-".concat(index)
+      key: "avatar-key-" + index
     });
   });
   var numOfChildren = childrenWithProps.length;
@@ -41,24 +50,24 @@ var Group = function Group(props) {
       content: childrenHidden,
       trigger: maxPopoverTrigger,
       placement: maxPopoverPlacement,
-      overlayClassName: "".concat(prefixCls, "-popover")
+      overlayClassName: groupPrefixCls + "-popover"
     }, /*#__PURE__*/React.createElement(Avatar, {
       style: maxStyle
-    }, "+".concat(numOfChildren - maxCount))));
-    return /*#__PURE__*/React.createElement(SizeContextProvider, {
+    }, "+" + (numOfChildren - maxCount))));
+    return wrapSSR( /*#__PURE__*/React.createElement(SizeContextProvider, {
       size: size
     }, /*#__PURE__*/React.createElement("div", {
       className: cls,
       style: props.style
-    }, childrenShow));
+    }, childrenShow)));
   }
 
-  return /*#__PURE__*/React.createElement(SizeContextProvider, {
+  return wrapSSR( /*#__PURE__*/React.createElement(SizeContextProvider, {
     size: size
   }, /*#__PURE__*/React.createElement("div", {
     className: cls,
     style: props.style
-  }, childrenWithProps));
+  }, childrenWithProps)));
 };
 
 export default Group;

package/es/avatar/index.d.ts

@@ -1,8 +1,8 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import type { AvatarProps } from './avatar';
 import Group from './group';
-export { AvatarProps } from './avatar';
-export { GroupProps } from './group';
+export type { AvatarProps } from './avatar';
+export type { GroupProps } from './group';
 export { Group };
 type CompoundedComponent = ForwardRefExoticComponent<AvatarProps & RefAttributes<HTMLSpanElement>> & {
     Group: typeof Group;

package/es/avatar/style/index.d.ts

@@ -1,3 +1,4 @@
-import '../../style/default.less';
-import './index.less';
-import '../../popover/style';
+export interface ComponentToken {
+}
+declare const _default: (prefixCls: string) => import("../../theme/internal").UseComponentStyleResult;
+export default _default;

package/es/avatar/style/index.js

@@ -1,5 +1,116 @@
-import "../../style/default.less";
-import "./index.less"; // style dependencies
-// deps-lint-skip: grid
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { genComponentStyleHook, mergeToken } from "../../theme/internal";
+import { resetComponent } from "../../style";
 
-import "../../popover/style";
+var genBaseStyle = function genBaseStyle(token) {
+  var _extends2, _extends3;
+
+  var antCls = token.antCls,
+      componentCls = token.componentCls,
+      iconCls = token.iconCls,
+      avatarBg = token.avatarBg,
+      avatarColor = token.avatarColor,
+      avatarSizeBase = token.avatarSizeBase,
+      avatarSizeLG = token.avatarSizeLG,
+      avatarSizeSM = token.avatarSizeSM,
+      avatarFontSizeBase = token.avatarFontSizeBase,
+      avatarFontSizeLG = token.avatarFontSizeLG,
+      avatarFontSizeSM = token.avatarFontSizeSM,
+      borderRadius = token.borderRadius,
+      borderRadiusLG = token.borderRadiusLG,
+      borderRadiusSM = token.borderRadiusSM,
+      lineWidth = token.lineWidth,
+      lineType = token.lineType; // Avatar size style
+
+  var avatarSizeStyle = function avatarSizeStyle(size, fontSize, radius) {
+    var _ref2;
+
+    return _ref2 = {
+      width: size,
+      height: size,
+      lineHeight: size - lineWidth * 2 + "px",
+      borderRadius: '50%'
+    }, _defineProperty(_ref2, "&" + componentCls + "-square", {
+      borderRadius: radius
+    }), _defineProperty(_ref2, componentCls + "-string", {
+      position: 'absolute',
+      left: {
+        _skip_check_: true,
+        value: '50%'
+      },
+      transformOrigin: '0 center'
+    }), _defineProperty(_ref2, "&" + componentCls + "-icon", _defineProperty({
+      fontSize: fontSize
+    }, "> " + iconCls, {
+      margin: 0
+    })), _ref2;
+  };
+
+  return _defineProperty({}, componentCls, _extends(_extends(_extends(_extends({}, resetComponent(token)), (_extends2 = {
+    position: 'relative',
+    display: 'inline-block',
+    overflow: 'hidden',
+    color: avatarColor,
+    whiteSpace: 'nowrap',
+    textAlign: 'center',
+    verticalAlign: 'middle',
+    background: avatarBg,
+    border: lineWidth + "px " + lineType + " transparent"
+  }, _defineProperty(_extends2, "&-image", {
+    background: 'transparent'
+  }), _defineProperty(_extends2, antCls + "-image-img", {
+    display: 'block'
+  }), _extends2)), avatarSizeStyle(avatarSizeBase, avatarFontSizeBase, borderRadius)), (_extends3 = {}, _defineProperty(_extends3, "&-lg", _extends({}, avatarSizeStyle(avatarSizeLG, avatarFontSizeLG, borderRadiusLG))), _defineProperty(_extends3, "&-sm", _extends({}, avatarSizeStyle(avatarSizeSM, avatarFontSizeSM, borderRadiusSM))), _defineProperty(_extends3, '> img', {
+    display: 'block',
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover'
+  }), _extends3)));
+};
+
+var genGroupStyle = function genGroupStyle(token) {
+  var _ref5;
+
+  var componentCls = token.componentCls,
+      avatarGroupBorderColor = token.avatarGroupBorderColor,
+      avatarGroupOverlapping = token.avatarGroupOverlapping,
+      avatarGroupSpace = token.avatarGroupSpace;
+  return _defineProperty({}, componentCls + "-group", (_ref5 = {
+    display: 'inline-flex'
+  }, _defineProperty(_ref5, "" + componentCls, _defineProperty({
+    borderColor: avatarGroupBorderColor
+  }, "&:not(:first-child)", {
+    marginInlineStart: -avatarGroupOverlapping
+  })), _defineProperty(_ref5, "&-popover", _defineProperty({}, componentCls + " + " + componentCls, {
+    marginInlineStart: avatarGroupSpace
+  })), _ref5));
+};
+
+export default genComponentStyleHook('Avatar', function (token) {
+  var colorTextLightSolid = token.colorTextLightSolid,
+      controlHeight = token.controlHeight,
+      controlHeightLG = token.controlHeightLG,
+      controlHeightSM = token.controlHeightSM,
+      fontSize = token.fontSize,
+      fontSizeLG = token.fontSizeLG,
+      fontSizeXL = token.fontSizeXL,
+      fontSizeHeading3 = token.fontSizeHeading3,
+      marginXS = token.marginXS,
+      colorBorderBg = token.colorBorderBg,
+      colorTextPlaceholder = token.colorTextPlaceholder;
+  var avatarToken = mergeToken(token, {
+    avatarBg: colorTextPlaceholder,
+    avatarColor: colorTextLightSolid,
+    avatarSizeBase: controlHeight,
+    avatarSizeLG: controlHeightLG,
+    avatarSizeSM: controlHeightSM,
+    avatarFontSizeBase: Math.round((fontSizeLG + fontSizeXL) / 2),
+    avatarFontSizeLG: fontSizeHeading3,
+    avatarFontSizeSM: fontSize,
+    avatarGroupOverlapping: marginXS,
+    avatarGroupSpace: marginXS,
+    avatarGroupBorderColor: colorBorderBg
+  });
+  return [genBaseStyle(avatarToken), genGroupStyle(avatarToken)];
+});

package/es/back-top/index.d.ts

@@ -8,7 +8,6 @@ export interface BackTopProps {
     className?: string;
     style?: React.CSSProperties;
     duration?: number;
-    visible?: boolean;
 }
 declare const _default: React.NamedExoticComponent<BackTopProps>;
 export default _default;

package/es/back-top/index.js

@@ -5,48 +5,33 @@ import VerticalAlignTopOutlined from "@ant-design/icons/es/icons/VerticalAlignTo
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
 import addEventListener from "rc-util/es/Dom/addEventListener";
-import useMergedState from "rc-util/es/hooks/useMergedState";
 import omit from "rc-util/es/omit";
 import * as React from 'react';
 import { ConfigContext } from "../config-provider";
 import getScroll from "../_util/getScroll";
 import { cloneElement } from "../_util/reactNode";
 import scrollTo from "../_util/scrollTo";
-import { throttleByAnimationFrame } from "../_util/throttleByAnimationFrame";
-
-var BackTopContent = function BackTopContent(props) {
-  var prefixCls = props.prefixCls,
-      rootPrefixCls = props.rootPrefixCls,
-      children = props.children,
-      visible = props.visible;
-  var defaultElement = /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-content")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-icon")
-  }, /*#__PURE__*/React.createElement(VerticalAlignTopOutlined, null)));
-  return /*#__PURE__*/React.createElement(CSSMotion, {
-    visible: visible,
-    motionName: "".concat(rootPrefixCls, "-fade")
-  }, function (_ref) {
-    var motionClassName = _ref.className;
-    return cloneElement(children || defaultElement, function (_ref2) {
-      var className = _ref2.className;
-      return {
-        className: classNames(motionClassName, className)
-      };
-    });
-  });
-};
+import throttleByAnimationFrame from "../_util/throttleByAnimationFrame";
+import warning from "../_util/warning";
+import useStyle from "./style";
 
 var BackTop = function BackTop(props) {
-  var _useMergedState = useMergedState(false, {
-    value: props.visible
-  }),
-      _useMergedState2 = _slicedToArray(_useMergedState, 2),
-      visible = _useMergedState2[0],
-      setVisible = _useMergedState2[1];
-
-  var ref = /*#__PURE__*/React.createRef();
+  var customizePrefixCls = props.prefixCls,
+      _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      _props$visibilityHeig = props.visibilityHeight,
+      visibilityHeight = _props$visibilityHeig === void 0 ? 400 : _props$visibilityHeig,
+      target = props.target,
+      onClick = props.onClick,
+      _props$duration = props.duration,
+      duration = _props$duration === void 0 ? 450 : _props$duration;
+
+  var _React$useState = React.useState(visibilityHeight === 0),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      visible = _React$useState2[0],
+      setVisible = _React$useState2[1];
+
+  var ref = React.useRef(null);
   var scrollEvent = React.useRef(null);
 
   var getDefaultTarget = function getDefaultTarget() {
@@ -54,71 +39,77 @@ var BackTop = function BackTop(props) {
   };
 
   var handleScroll = throttleByAnimationFrame(function (e) {
-    var _props$visibilityHeig = props.visibilityHeight,
-        visibilityHeight = _props$visibilityHeig === void 0 ? 400 : _props$visibilityHeig;
     var scrollTop = getScroll(e.target, true);
-    setVisible(scrollTop > visibilityHeight);
+    setVisible(scrollTop >= visibilityHeight);
   });
 
   var bindScrollEvent = function bindScrollEvent() {
-    var target = props.target;
     var getTarget = target || getDefaultTarget;
     var container = getTarget();
-    scrollEvent.current = addEventListener(container, 'scroll', function (e) {
-      handleScroll(e);
-    });
+    scrollEvent.current = addEventListener(container, 'scroll', handleScroll);
     handleScroll({
       target: container
     });
   };
 
+  if (process.env.NODE_ENV !== 'production') {
+    process.env.NODE_ENV !== "production" ? warning(false, 'BackTop', '`BackTop` is deprecated, please use `FloatButton.BackTop` instead.') : void 0;
+  }
+
   React.useEffect(function () {
     bindScrollEvent();
     return function () {
-      if (scrollEvent.current) {
-        scrollEvent.current.remove();
-      }
+      var _a;
 
       handleScroll.cancel();
+      (_a = scrollEvent.current) === null || _a === void 0 ? void 0 : _a.remove();
     };
-  }, [props.target]);
+  }, [target]);
 
   var scrollToTop = function scrollToTop(e) {
-    var onClick = props.onClick,
-        target = props.target,
-        _props$duration = props.duration,
-        duration = _props$duration === void 0 ? 450 : _props$duration;
     scrollTo(0, {
       getContainer: target || getDefaultTarget,
       duration: duration
     });
-
-    if (typeof onClick === 'function') {
-      onClick(e);
-    }
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
   };
 
   var _React$useContext = React.useContext(ConfigContext),
       getPrefixCls = _React$useContext.getPrefixCls,
       direction = _React$useContext.direction;
 
-  var customizePrefixCls = props.prefixCls,
-      _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className;
   var prefixCls = getPrefixCls('back-top', customizePrefixCls);
   var rootPrefixCls = getPrefixCls();
-  var classString = classNames(prefixCls, _defineProperty({}, "".concat(prefixCls, "-rtl"), direction === 'rtl'), className); // fix https://fb.me/react-unknown-prop
 
-  var divProps = omit(props, ['prefixCls', 'className', 'children', 'visibilityHeight', 'target', 'visible']);
-  return /*#__PURE__*/React.createElement("div", _extends({}, divProps, {
+  var _useStyle = useStyle(prefixCls),
+      _useStyle2 = _slicedToArray(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1];
+
+  var classString = classNames(hashId, prefixCls, _defineProperty({}, prefixCls + "-rtl", direction === 'rtl'), className); // fix https://fb.me/react-unknown-prop
+
+  var divProps = omit(props, ['prefixCls', 'className', 'children', 'visibilityHeight', 'target']);
+  var defaultElement = /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "-icon"
+  }, /*#__PURE__*/React.createElement(VerticalAlignTopOutlined, null)));
+  return wrapSSR( /*#__PURE__*/React.createElement("div", _extends({}, divProps, {
     className: classString,
     onClick: scrollToTop,
     ref: ref
-  }), /*#__PURE__*/React.createElement(BackTopContent, {
-    prefixCls: prefixCls,
-    rootPrefixCls: rootPrefixCls,
-    visible: visible
-  }, props.children));
+  }), /*#__PURE__*/React.createElement(CSSMotion, {
+    visible: visible,
+    motionName: rootPrefixCls + "-fade"
+  }, function (_ref) {
+    var motionClassName = _ref.className;
+    return cloneElement(props.children || defaultElement, function (_ref2) {
+      var cloneCls = _ref2.className;
+      return {
+        className: classNames(motionClassName, cloneCls)
+      };
+    });
+  })));
 };
 
 export default /*#__PURE__*/React.memo(BackTop);

package/es/back-top/style/index.d.ts

@@ -1,2 +1,6 @@
-import '../../style/default.less';
-import './index.less';
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+    zIndexPopup: number;
+}
+declare const _default: (prefixCls: string) => import("../../theme/internal").UseComponentStyleResult;
+export default _default;