@chaoswise/ui 3.0.22 → 3.1.0

package/lib/Antd5/float-button/FloatButtonGroup.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["prefixCls", "className", "style", "shape", "type", "icon", "closeIcon", "description", "trigger", "children", "onOpenChange", "open"];
+var _excluded = ["prefixCls", "className", "style", "shape", "type", "placement", "icon", "closeIcon", "description", "trigger", "children", "onOpenChange", "open", "onClick"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -14,12 +14,14 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { memo, useCallback, useContext, useEffect } from 'react';
+import React from 'react';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import FileTextOutlined from '@ant-design/icons/FileTextOutlined';
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
+import useEvent from 'rc-util/lib/hooks/useEvent';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import { useZIndex } from '../_util/hooks/useZIndex';
 import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
@@ -35,6 +37,8 @@ var FloatButtonGroup = function FloatButtonGroup(props) {
     shape = _props$shape === void 0 ? 'circle' : _props$shape,
     _props$type = props.type,
     type = _props$type === void 0 ? 'default' : _props$type,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'top' : _props$placement,
     _props$icon = props.icon,
     icon = _props$icon === void 0 ? _jsx(FileTextOutlined, {}) : _props$icon,
     closeIcon = props.closeIcon,
@@ -43,11 +47,12 @@ var FloatButtonGroup = function FloatButtonGroup(props) {
     _children = props.children,
     onOpenChange = props.onOpenChange,
     customOpen = props.open,
+    onTriggerButtonClick = props.onClick,
     floatButtonProps = _objectWithoutProperties(props, _excluded);
-  var _useContext = useContext(ConfigContext),
-    direction = _useContext.direction,
-    getPrefixCls = _useContext.getPrefixCls,
-    floatButtonGroup = _useContext.floatButtonGroup;
+  var _React$useContext = React.useContext(ConfigContext),
+    direction = _React$useContext.direction,
+    getPrefixCls = _React$useContext.getPrefixCls,
+    floatButtonGroup = _React$useContext.floatButtonGroup;
   var mergedCloseIcon = (_ref = closeIcon !== null && closeIcon !== void 0 ? closeIcon : floatButtonGroup === null || floatButtonGroup === void 0 ? void 0 : floatButtonGroup.closeIcon) !== null && _ref !== void 0 ? _ref : _jsx(CloseOutlined, {});
   var prefixCls = getPrefixCls(floatButtonPrefixCls, customizePrefixCls);
   var rootCls = useCSSVarCls(prefixCls);
@@ -57,7 +62,16 @@ var FloatButtonGroup = function FloatButtonGroup(props) {
     hashId = _useStyle2[1],
     cssVarCls = _useStyle2[2];
   var groupPrefixCls = "".concat(prefixCls, "-group");
-  var groupCls = classNames(groupPrefixCls, hashId, cssVarCls, rootCls, className, _defineProperty(_defineProperty(_defineProperty({}, "".concat(groupPrefixCls, "-rtl"), direction === 'rtl'), "".concat(groupPrefixCls, "-").concat(shape), shape), "".concat(groupPrefixCls, "-").concat(shape, "-shadow"), !trigger));
+  var isMenuMode = trigger && ['click', 'hover'].includes(trigger);
+  var isValidPlacement = placement && ['top', 'left', 'right', 'bottom'].includes(placement);
+  var groupCls = classNames(groupPrefixCls, hashId, cssVarCls, rootCls, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(groupPrefixCls, "-rtl"), direction === 'rtl'), "".concat(groupPrefixCls, "-").concat(shape), shape), "".concat(groupPrefixCls, "-").concat(shape, "-shadow"), !isMenuMode), "".concat(groupPrefixCls, "-").concat(placement), isMenuMode && isValidPlacement));
+  // ============================ zIndex ============================
+  var _useZIndex = useZIndex('FloatButton', style === null || style === void 0 ? void 0 : style.zIndex),
+    _useZIndex2 = _slicedToArray(_useZIndex, 1),
+    zIndex = _useZIndex2[0];
+  var mergedStyle = _objectSpread(_objectSpread({}, style), {}, {
+    zIndex: zIndex
+  });
   var wrapperCls = classNames(hashId, "".concat(groupPrefixCls, "-wrap"));
   var _useMergedState = useMergedState(false, {
       value: customOpen
@@ -66,59 +80,69 @@ var FloatButtonGroup = function FloatButtonGroup(props) {
     open = _useMergedState2[0],
     setOpen = _useMergedState2[1];
   var floatButtonGroupRef = React.useRef(null);
-  var floatButtonRef = React.useRef(null);
-  var hoverAction = React.useMemo(function () {
-    var hoverTypeAction = {
-      onMouseEnter: function onMouseEnter() {
-        setOpen(true);
-        onOpenChange === null || onOpenChange === void 0 || onOpenChange(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        setOpen(false);
-        onOpenChange === null || onOpenChange === void 0 || onOpenChange(false);
-      }
-    };
-    return trigger === 'hover' ? hoverTypeAction : {};
-  }, [trigger]);
-  var handleOpenChange = function handleOpenChange() {
-    setOpen(function (prevState) {
-      onOpenChange === null || onOpenChange === void 0 || onOpenChange(!prevState);
-      return !prevState;
-    });
+  // ========================== Open ==========================
+  var hoverTrigger = trigger === 'hover';
+  var clickTrigger = trigger === 'click';
+  var triggerOpen = useEvent(function (nextOpen) {
+    if (open !== nextOpen) {
+      setOpen(nextOpen);
+      onOpenChange === null || onOpenChange === void 0 || onOpenChange(nextOpen);
+    }
+  });
+  // ===================== Trigger: Hover =====================
+  var onMouseEnter = function onMouseEnter() {
+    if (hoverTrigger) {
+      triggerOpen(true);
+    }
+  };
+  var onMouseLeave = function onMouseLeave() {
+    if (hoverTrigger) {
+      triggerOpen(false);
+    }
   };
-  var onClick = useCallback(function (e) {
-    var _floatButtonGroupRef$;
-    if ((_floatButtonGroupRef$ = floatButtonGroupRef.current) !== null && _floatButtonGroupRef$ !== void 0 && _floatButtonGroupRef$.contains(e.target)) {
-      var _floatButtonRef$curre;
-      if ((_floatButtonRef$curre = floatButtonRef.current) !== null && _floatButtonRef$curre !== void 0 && _floatButtonRef$curre.contains(e.target)) {
-        handleOpenChange();
-      }
-      return;
+  // ===================== Trigger: Click =====================
+  var onInternalTriggerButtonClick = function onInternalTriggerButtonClick(e) {
+    if (clickTrigger) {
+      triggerOpen(!open);
     }
-    setOpen(false);
-    onOpenChange === null || onOpenChange === void 0 || onOpenChange(false);
-  }, [trigger]);
-  useEffect(function () {
-    if (trigger === 'click') {
-      document.addEventListener('click', onClick);
+    onTriggerButtonClick === null || onTriggerButtonClick === void 0 || onTriggerButtonClick(e);
+  };
+  React.useEffect(function () {
+    if (clickTrigger) {
+      var onDocClick = function onDocClick(e) {
+        var _floatButtonGroupRef$;
+        // Skip if click on the group
+        if ((_floatButtonGroupRef$ = floatButtonGroupRef.current) !== null && _floatButtonGroupRef$ !== void 0 && _floatButtonGroupRef$.contains(e.target)) {
+          return;
+        }
+        triggerOpen(false);
+      };
+      document.addEventListener('click', onDocClick, {
+        capture: true
+      });
       return function () {
-        document.removeEventListener('click', onClick);
+        return document.removeEventListener('click', onDocClick, {
+          capture: true
+        });
       };
     }
-  }, [trigger]);
-  // =================== Warning =====================
+  }, [clickTrigger]);
+  // ======================== Warning =========================
   if (process.env.NODE_ENV !== 'production') {
     var warning = devUseWarning('FloatButton.Group');
     warning(!('open' in props) || !!trigger, 'usage', '`open` need to be used together with `trigger`');
   }
+  // ========================= Render =========================
   return wrapCSSVar(_jsx(FloatButtonGroupProvider, {
     value: shape,
-    children: _jsx("div", _objectSpread(_objectSpread({
+    children: _jsx("div", {
       ref: floatButtonGroupRef,
       className: groupCls,
-      style: style
-    }, hoverAction), {}, {
-      children: trigger && ['click', 'hover'].includes(trigger) ? _jsxs(_Fragment, {
+      style: mergedStyle,
+      // Hover trigger
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      children: isMenuMode ? _jsxs(_Fragment, {
         children: [_jsx(CSSMotion, {
           visible: open,
           motionName: "".concat(groupPrefixCls, "-wrap"),
@@ -130,15 +154,15 @@ var FloatButtonGroup = function FloatButtonGroup(props) {
             });
           }
         }), _jsx(FloatButton, _objectSpread({
-          ref: floatButtonRef,
           type: type,
-          shape: shape,
           icon: open ? mergedCloseIcon : icon,
           description: description,
-          "aria-label": props['aria-label']
+          "aria-label": props['aria-label'],
+          className: "".concat(groupPrefixCls, "-trigger"),
+          onClick: onInternalTriggerButtonClick
         }, floatButtonProps))]
       }) : _children
-    }))
+    })
   }));
 };
-export default /*#__PURE__*/memo(FloatButtonGroup);
+export default FloatButtonGroup;

package/lib/Antd5/float-button/style/index.js

@@ -4,51 +4,15 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { Keyframes, unit } from '@ant-design/cssinjs';
+import { unit } from '@ant-design/cssinjs';
 import { resetComponent } from '../../style';
 import { initFadeMotion } from '../../style/motion/fade';
-import { initMotion } from '../../style/motion/motion';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 import getOffset from '../util';
-var initFloatButtonGroupMotion = function initFloatButtonGroupMotion(token) {
-  var componentCls = token.componentCls,
-    floatButtonSize = token.floatButtonSize,
-    motionDurationSlow = token.motionDurationSlow,
-    motionEaseInOutCirc = token.motionEaseInOutCirc;
-  var groupPrefixCls = "".concat(componentCls, "-group");
-  var moveDownIn = new Keyframes('antFloatButtonMoveDownIn', {
-    '0%': {
-      transform: "translate3d(0, ".concat(unit(floatButtonSize), ", 0)"),
-      transformOrigin: '0 0',
-      opacity: 0
-    },
-    '100%': {
-      transform: 'translate3d(0, 0, 0)',
-      transformOrigin: '0 0',
-      opacity: 1
-    }
-  });
-  var moveDownOut = new Keyframes('antFloatButtonMoveDownOut', {
-    '0%': {
-      transform: 'translate3d(0, 0, 0)',
-      transformOrigin: '0 0',
-      opacity: 1
-    },
-    '100%': {
-      transform: "translate3d(0, ".concat(unit(floatButtonSize), ", 0)"),
-      transformOrigin: '0 0',
-      opacity: 0
-    }
-  });
-  return [_defineProperty({}, "".concat(groupPrefixCls, "-wrap"), _objectSpread({}, initMotion("".concat(groupPrefixCls, "-wrap"), moveDownIn, moveDownOut, motionDurationSlow, true))), _defineProperty({}, "".concat(groupPrefixCls, "-wrap"), _defineProperty(_defineProperty({}, "\n          &".concat(groupPrefixCls, "-wrap-enter,\n          &").concat(groupPrefixCls, "-wrap-appear\n        "), {
-    opacity: 0,
-    animationTimingFunction: motionEaseInOutCirc
-  }), "&".concat(groupPrefixCls, "-wrap-leave"), {
-    animationTimingFunction: motionEaseInOutCirc
-  }))];
-};
+import floatButtonGroupMotion from './keyframes';
 // ============================== Group ==============================
 var floatButtonGroupStyle = function floatButtonGroupStyle(token) {
+  var _ref;
   var antCls = token.antCls,
     componentCls = token.componentCls,
     floatButtonSize = token.floatButtonSize,
@@ -57,61 +21,128 @@ var floatButtonGroupStyle = function floatButtonGroupStyle(token) {
     borderRadiusSM = token.borderRadiusSM,
     badgeOffset = token.badgeOffset,
     floatButtonBodyPadding = token.floatButtonBodyPadding,
+    zIndexPopupBase = token.zIndexPopupBase,
     calc = token.calc;
   var groupPrefixCls = "".concat(componentCls, "-group");
-  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, groupPrefixCls, _objectSpread(_objectSpread({}, resetComponent(token)), {}, _defineProperty(_defineProperty(_defineProperty({
-    zIndex: 99,
-    display: 'block',
+  return _ref = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref, groupPrefixCls, _objectSpread(_objectSpread({}, resetComponent(token)), {}, _defineProperty(_defineProperty(_defineProperty({
+    zIndex: zIndexPopupBase,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
     border: 'none',
     position: 'fixed',
-    width: floatButtonSize,
     height: 'auto',
     boxShadow: 'none',
+    minWidth: floatButtonSize,
     minHeight: floatButtonSize,
     insetInlineEnd: token.floatButtonInsetInlineEnd,
-    insetBlockEnd: token.floatButtonInsetBlockEnd,
+    bottom: token.floatButtonInsetBlockEnd,
     borderRadius: borderRadiusLG
   }, "".concat(groupPrefixCls, "-wrap"), {
     zIndex: -1,
-    display: 'block',
-    position: 'relative',
-    marginBottom: margin
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute'
   }), "&".concat(groupPrefixCls, "-rtl"), {
     direction: 'rtl'
   }), componentCls, {
     position: 'static'
-  }))), "".concat(groupPrefixCls, "-circle"), _defineProperty({}, "".concat(componentCls, "-circle:not(:last-child)"), _defineProperty({
-    marginBottom: token.margin
-  }, "".concat(componentCls, "-body"), {
-    width: floatButtonSize,
-    height: floatButtonSize,
-    borderRadius: '50%'
-  }))), "".concat(groupPrefixCls, "-square"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-square"), _defineProperty({
-    borderRadius: 0,
-    padding: 0,
-    '&:first-child': {
-      borderStartStartRadius: borderRadiusLG,
-      borderStartEndRadius: borderRadiusLG
+  }))), "".concat(groupPrefixCls, "-top > ").concat(groupPrefixCls, "-wrap"), {
+    flexDirection: 'column',
+    top: 'auto',
+    bottom: calc(floatButtonSize).add(margin).equal(),
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      width: '100%',
+      height: margin,
+      bottom: calc(margin).mul(-1).equal()
+    }
+  }), "".concat(groupPrefixCls, "-bottom > ").concat(groupPrefixCls, "-wrap"), {
+    flexDirection: 'column',
+    top: calc(floatButtonSize).add(margin).equal(),
+    bottom: 'auto',
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      width: '100%',
+      height: margin,
+      top: calc(margin).mul(-1).equal()
+    }
+  }), "".concat(groupPrefixCls, "-right > ").concat(groupPrefixCls, "-wrap"), {
+    flexDirection: 'row',
+    left: {
+      _skip_check_: true,
+      value: calc(floatButtonSize).add(margin).equal()
     },
-    '&:last-child': {
-      borderEndStartRadius: borderRadiusLG,
-      borderEndEndRadius: borderRadiusLG
+    right: {
+      _skip_check_: true,
+      value: 'auto'
     },
-    '&:not(:last-child)': {
-      borderBottom: "".concat(unit(token.lineWidth), " ").concat(token.lineType, " ").concat(token.colorSplit)
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      width: margin,
+      height: '100%',
+      left: {
+        _skip_check_: true,
+        value: calc(margin).mul(-1).equal()
+      }
     }
-  }, "".concat(antCls, "-badge"), _defineProperty({}, "".concat(antCls, "-badge-count"), {
+  }), "".concat(groupPrefixCls, "-left > ").concat(groupPrefixCls, "-wrap"), {
+    flexDirection: 'row',
+    left: {
+      _skip_check_: true,
+      value: 'auto'
+    },
+    right: {
+      _skip_check_: true,
+      value: calc(floatButtonSize).add(margin).equal()
+    },
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      width: margin,
+      height: '100%',
+      right: {
+        _skip_check_: true,
+        value: calc(margin).mul(-1).equal()
+      }
+    }
+  }), "".concat(groupPrefixCls, "-circle"), _defineProperty({
+    gap: margin
+  }, "".concat(groupPrefixCls, "-wrap"), {
+    gap: margin
+  })), "".concat(groupPrefixCls, "-square"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-square"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    padding: 0,
+    borderRadius: 0
+  }, "&".concat(groupPrefixCls, "-trigger"), {
+    borderRadius: borderRadiusLG
+  }), '&:first-child', {
+    borderStartStartRadius: borderRadiusLG,
+    borderStartEndRadius: borderRadiusLG
+  }), '&:last-child', {
+    borderEndStartRadius: borderRadiusLG,
+    borderEndEndRadius: borderRadiusLG
+  }), '&:not(:last-child)', {
+    borderBottom: "".concat(unit(token.lineWidth), " ").concat(token.lineType, " ").concat(token.colorSplit)
+  }), "".concat(antCls, "-badge"), _defineProperty({}, "".concat(antCls, "-badge-count"), {
     top: calc(calc(floatButtonBodyPadding).add(badgeOffset)).mul(-1).equal(),
     insetInlineEnd: calc(calc(floatButtonBodyPadding).add(badgeOffset)).mul(-1).equal()
   }))), "".concat(groupPrefixCls, "-wrap"), _defineProperty({
-    display: 'block',
     borderRadius: borderRadiusLG,
     boxShadow: token.boxShadowSecondary
   }, "".concat(componentCls, "-square"), _defineProperty({
     boxShadow: 'none',
-    marginTop: 0,
     borderRadius: 0,
-    padding: floatButtonBodyPadding,
+    padding: floatButtonBodyPadding
+  }, "".concat(componentCls, "-body"), {
+    width: token.floatButtonBodySize,
+    height: token.floatButtonBodySize,
+    borderRadius: borderRadiusSM
+  })))), "".concat(groupPrefixCls, "-top > ").concat(groupPrefixCls, "-wrap, ").concat(groupPrefixCls, "-bottom > ").concat(groupPrefixCls, "-wrap"), _defineProperty({}, "> ".concat(componentCls, "-square"), {
     '&:first-child': {
       borderStartStartRadius: borderRadiusLG,
       borderStartEndRadius: borderRadiusLG
@@ -123,12 +154,21 @@ var floatButtonGroupStyle = function floatButtonGroupStyle(token) {
     '&:not(:last-child)': {
       borderBottom: "".concat(unit(token.lineWidth), " ").concat(token.lineType, " ").concat(token.colorSplit)
     }
-  }, "".concat(componentCls, "-body"), {
-    width: token.floatButtonBodySize,
-    height: token.floatButtonBodySize
-  })))), "".concat(groupPrefixCls, "-circle-shadow"), {
+  })), "".concat(groupPrefixCls, "-left > ").concat(groupPrefixCls, "-wrap, ").concat(groupPrefixCls, "-right > ").concat(groupPrefixCls, "-wrap"), _defineProperty({}, "> ".concat(componentCls, "-square"), {
+    '&:first-child': {
+      borderStartStartRadius: borderRadiusLG,
+      borderEndStartRadius: borderRadiusLG
+    },
+    '&:last-child': {
+      borderStartEndRadius: borderRadiusLG,
+      borderEndEndRadius: borderRadiusLG
+    },
+    '&:not(:last-child)': {
+      borderInlineEnd: "".concat(unit(token.lineWidth), " ").concat(token.lineType, " ").concat(token.colorSplit)
+    }
+  })), "".concat(groupPrefixCls, "-circle-shadow"), {
     boxShadow: 'none'
-  }), "".concat(groupPrefixCls, "-square-shadow"), _defineProperty({
+  }), _defineProperty(_ref, "".concat(groupPrefixCls, "-square-shadow"), _defineProperty({
     boxShadow: token.boxShadowSecondary
   }, "".concat(componentCls, "-square"), _defineProperty({
     boxShadow: 'none',
@@ -150,12 +190,13 @@ var sharedFloatButtonStyle = function sharedFloatButtonStyle(token) {
     badgeOffset = token.badgeOffset,
     dotOffsetInSquare = token.dotOffsetInSquare,
     dotOffsetInCircle = token.dotOffsetInCircle,
+    zIndexPopupBase = token.zIndexPopupBase,
     calc = token.calc;
   return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, componentCls, _objectSpread(_objectSpread({}, resetComponent(token)), {}, _defineProperty(_defineProperty({
     border: 'none',
     position: 'fixed',
     cursor: 'pointer',
-    zIndex: 99,
+    zIndex: zIndexPopupBase,
     // Do not remove the 'display: block' here.
     // Deleting it will cause marginBottom to become ineffective.
     // Ref: https://github.com/ant-design/ant-design/issues/44700
@@ -163,7 +204,7 @@ var sharedFloatButtonStyle = function sharedFloatButtonStyle(token) {
     width: floatButtonSize,
     height: floatButtonSize,
     insetInlineEnd: token.floatButtonInsetInlineEnd,
-    insetBlockEnd: token.floatButtonInsetBlockEnd,
+    bottom: token.floatButtonInsetBlockEnd,
     boxShadow: token.boxShadowSecondary,
     // Pure Panel
     '&-pure': {
@@ -290,5 +331,5 @@ export default genStyleHooks('FloatButton', function (token) {
     floatButtonBodyPadding: paddingXXS,
     badgeOffset: calc(paddingXXS).mul(1.5).equal()
   });
-  return [floatButtonGroupStyle(floatButtonToken), sharedFloatButtonStyle(floatButtonToken), initFadeMotion(token), initFloatButtonGroupMotion(floatButtonToken)];
+  return [floatButtonGroupStyle(floatButtonToken), sharedFloatButtonStyle(floatButtonToken), initFadeMotion(token), floatButtonGroupMotion(floatButtonToken)];
 }, prepareComponentToken);

package/lib/Antd5/float-button/style/keyframes.js

@@ -0,0 +1,118 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Keyframes, unit } from '@ant-design/cssinjs';
+import { initMotion } from '../../style/motion/motion';
+var floatButtonGroupMotion = function floatButtonGroupMotion(token) {
+  var componentCls = token.componentCls,
+    floatButtonSize = token.floatButtonSize,
+    motionDurationSlow = token.motionDurationSlow,
+    motionEaseInOutCirc = token.motionEaseInOutCirc,
+    calc = token.calc;
+  var moveTopIn = new Keyframes('antFloatButtonMoveTopIn', {
+    '0%': {
+      transform: "translate3d(0, ".concat(unit(floatButtonSize), ", 0)"),
+      transformOrigin: '0 0',
+      opacity: 0
+    },
+    '100%': {
+      transform: 'translate3d(0, 0, 0)',
+      transformOrigin: '0 0',
+      opacity: 1
+    }
+  });
+  var moveTopOut = new Keyframes('antFloatButtonMoveTopOut', {
+    '0%': {
+      transform: 'translate3d(0, 0, 0)',
+      transformOrigin: '0 0',
+      opacity: 1
+    },
+    '100%': {
+      transform: "translate3d(0, ".concat(unit(floatButtonSize), ", 0)"),
+      transformOrigin: '0 0',
+      opacity: 0
+    }
+  });
+  var moveRightIn = new Keyframes('antFloatButtonMoveRightIn', {
+    '0%': {
+      transform: "translate3d(".concat(calc(floatButtonSize).mul(-1).equal(), ", 0, 0)"),
+      transformOrigin: '0 0',
+      opacity: 0
+    },
+    '100%': {
+      transform: 'translate3d(0, 0, 0)',
+      transformOrigin: '0 0',
+      opacity: 1
+    }
+  });
+  var moveRightOut = new Keyframes('antFloatButtonMoveRightOut', {
+    '0%': {
+      transform: 'translate3d(0, 0, 0)',
+      transformOrigin: '0 0',
+      opacity: 1
+    },
+    '100%': {
+      transform: "translate3d(".concat(calc(floatButtonSize).mul(-1).equal(), ", 0, 0)"),
+      transformOrigin: '0 0',
+      opacity: 0
+    }
+  });
+  var moveBottomIn = new Keyframes('antFloatButtonMoveBottomIn', {
+    '0%': {
+      transform: "translate3d(0, ".concat(calc(floatButtonSize).mul(-1).equal(), ", 0)"),
+      transformOrigin: '0 0',
+      opacity: 0
+    },
+    '100%': {
+      transform: 'translate3d(0, 0, 0)',
+      transformOrigin: '0 0',
+      opacity: 1
+    }
+  });
+  var moveBottomOut = new Keyframes('antFloatButtonMoveBottomOut', {
+    '0%': {
+      transform: 'translate3d(0, 0, 0)',
+      transformOrigin: '0 0',
+      opacity: 1
+    },
+    '100%': {
+      transform: "translate3d(0, ".concat(calc(floatButtonSize).mul(-1).equal(), ", 0)"),
+      transformOrigin: '0 0',
+      opacity: 0
+    }
+  });
+  var moveLeftIn = new Keyframes('antFloatButtonMoveLeftIn', {
+    '0%': {
+      transform: "translate3d(".concat(unit(floatButtonSize), ", 0, 0)"),
+      transformOrigin: '0 0',
+      opacity: 0
+    },
+    '100%': {
+      transform: 'translate3d(0, 0, 0)',
+      transformOrigin: '0 0',
+      opacity: 1
+    }
+  });
+  var moveLeftOut = new Keyframes('antFloatButtonMoveLeftOut', {
+    '0%': {
+      transform: 'translate3d(0, 0, 0)',
+      transformOrigin: '0 0',
+      opacity: 1
+    },
+    '100%': {
+      transform: "translate3d(".concat(unit(floatButtonSize), ", 0, 0)"),
+      transformOrigin: '0 0',
+      opacity: 0
+    }
+  });
+  var groupPrefixCls = "".concat(componentCls, "-group");
+  return [_defineProperty({}, groupPrefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "&".concat(groupPrefixCls, "-top ").concat(groupPrefixCls, "-wrap"), initMotion("".concat(groupPrefixCls, "-wrap"), moveTopIn, moveTopOut, motionDurationSlow, true)), "&".concat(groupPrefixCls, "-bottom ").concat(groupPrefixCls, "-wrap"), initMotion("".concat(groupPrefixCls, "-wrap"), moveBottomIn, moveBottomOut, motionDurationSlow, true)), "&".concat(groupPrefixCls, "-left ").concat(groupPrefixCls, "-wrap"), initMotion("".concat(groupPrefixCls, "-wrap"), moveLeftIn, moveLeftOut, motionDurationSlow, true)), "&".concat(groupPrefixCls, "-right ").concat(groupPrefixCls, "-wrap"), initMotion("".concat(groupPrefixCls, "-wrap"), moveRightIn, moveRightOut, motionDurationSlow, true))), _defineProperty({}, "".concat(groupPrefixCls, "-wrap"), _defineProperty(_defineProperty({}, "&".concat(groupPrefixCls, "-wrap-enter, &").concat(groupPrefixCls, "-wrap-appear"), {
+    opacity: 0,
+    animationTimingFunction: motionEaseInOutCirc
+  }), "&".concat(groupPrefixCls, "-wrap-leave"), {
+    opacity: 1,
+    animationTimingFunction: motionEaseInOutCirc
+  }))];
+};
+export default floatButtonGroupMotion;

package/lib/Antd5/form/ErrorList.js

@@ -69,6 +69,18 @@ var ErrorList = function ErrorList(_ref) {
       return toErrorEntity(warning, 'warning', 'warning', index);
     })));
   }, [help, helpStatus, debounceErrors, debounceWarnings]);
+  var filledKeyFullKeyList = React.useMemo(function () {
+    var keysCount = {};
+    fullKeyList.forEach(function (_ref2) {
+      var key = _ref2.key;
+      keysCount[key] = (keysCount[key] || 0) + 1;
+    });
+    return fullKeyList.map(function (entity, index) {
+      return _objectSpread(_objectSpread({}, entity), {}, {
+        key: keysCount[entity.key] > 1 ? "".concat(entity.key, "-fallback-").concat(index) : entity.key
+      });
+    });
+  }, [fullKeyList]);
   var helpProps = {};
   if (fieldId) {
     helpProps.id = "".concat(fieldId, "_help");
@@ -76,7 +88,7 @@ var ErrorList = function ErrorList(_ref) {
   return wrapCSSVar(_jsx(CSSMotion, {
     motionDeadline: collapseMotion.motionDeadline,
     motionName: "".concat(prefixCls, "-show-help"),
-    visible: !!fullKeyList.length,
+    visible: !!filledKeyFullKeyList.length,
     onVisibleChanged: onVisibleChanged,
     children: function children(holderProps) {
       var holderClassName = holderProps.className,
@@ -86,7 +98,7 @@ var ErrorList = function ErrorList(_ref) {
         style: holderStyle,
         role: "alert",
         children: _jsx(CSSMotionList, _objectSpread(_objectSpread({
-          keys: fullKeyList
+          keys: filledKeyFullKeyList
         }, initCollapseMotion(prefixCls)), {}, {
           motionName: "".concat(prefixCls, "-show-help-item"),
           component: false,