@chaoswise/ui 3.0.23 → 3.1.1

package/lib/Antd5/select/style/variants.js

@@ -15,12 +15,14 @@ var genBaseOutlinedStyle = function genBaseOutlinedStyle(token, options) {
   return _defineProperty(_defineProperty({}, "&:not(".concat(componentCls, "-customize-input) ").concat(componentCls, "-selector"), {
     border: "".concat(unit(token.lineWidth), " ").concat(token.lineType, " ").concat(options.borderColor),
     background: token.selectorBg
-  }), "&:not(".concat(componentCls, "-disabled):not(").concat(componentCls, "-customize-input):not(").concat(antCls, "-pagination-size-changer)"), _defineProperty(_defineProperty({}, "&:hover ".concat(componentCls, "-selector"), {
+  }), "&:not(".concat(componentCls, "-disabled):not(").concat(componentCls, "-customize-input):not(").concat(antCls, "-pagination-size-changer)"), _defineProperty(_defineProperty(_defineProperty({}, "&:hover ".concat(componentCls, "-selector"), {
     borderColor: options.hoverBorderHover
   }), "".concat(componentCls, "-focused& ").concat(componentCls, "-selector"), {
     borderColor: options.activeBorderColor,
-    boxShadow: "0 0 0 ".concat(unit(controlOutlineWidth), " ").concat(options.activeShadowColor),
+    boxShadow: "0 0 0 ".concat(unit(controlOutlineWidth), " ").concat(options.activeOutlineColor),
     outline: 0
+  }), "".concat(componentCls, "-prefix"), {
+    color: options.color
   }));
 };
 var genOutlinedStatusStyle = function genOutlinedStatusStyle(token, options) {
@@ -30,21 +32,24 @@ var genOutlinedStyle = function genOutlinedStyle(token) {
   return {
     '&-outlined': _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, genBaseOutlinedStyle(token, {
       borderColor: token.colorBorder,
-      hoverBorderHover: token.colorPrimaryHover,
-      activeBorderColor: token.colorPrimary,
-      activeShadowColor: token.controlOutline
+      hoverBorderHover: token.hoverBorderColor,
+      activeBorderColor: token.activeBorderColor,
+      activeOutlineColor: token.activeOutlineColor,
+      color: token.colorText
     })), genOutlinedStatusStyle(token, {
       status: 'error',
       borderColor: token.colorError,
       hoverBorderHover: token.colorErrorHover,
       activeBorderColor: token.colorError,
-      activeShadowColor: token.colorErrorOutline
+      activeOutlineColor: token.colorErrorOutline,
+      color: token.colorError
     })), genOutlinedStatusStyle(token, {
       status: 'warning',
       borderColor: token.colorWarning,
       hoverBorderHover: token.colorWarningHover,
       activeBorderColor: token.colorWarning,
-      activeShadowColor: token.colorWarningOutline
+      activeOutlineColor: token.colorWarningOutline,
+      color: token.colorWarning
     })), {}, _defineProperty(_defineProperty({}, "&".concat(token.componentCls, "-disabled"), _defineProperty({}, "&:not(".concat(token.componentCls, "-customize-input) ").concat(token.componentCls, "-selector"), {
       background: token.colorBgContainerDisabled,
       color: token.colorTextDisabled
@@ -80,7 +85,7 @@ var genFilledStyle = function genFilledStyle(token) {
     '&-filled': _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, genBaseFilledStyle(token, {
       bg: token.colorFillTertiary,
       hoverBg: token.colorFillSecondary,
-      activeBorderColor: token.colorPrimary,
+      activeBorderColor: token.activeBorderColor,
       color: token.colorText
     })), genFilledStatusStyle(token, {
       status: 'error',
@@ -109,15 +114,19 @@ var genFilledStyle = function genFilledStyle(token) {
 // =====================================================
 var genBorderlessStyle = function genBorderlessStyle(token) {
   return {
-    '&-borderless': _defineProperty(_defineProperty(_defineProperty({}, "".concat(token.componentCls, "-selector"), {
+    '&-borderless': _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(token.componentCls, "-selector"), {
       background: 'transparent',
-      borderColor: 'transparent'
+      border: "".concat(unit(token.lineWidth), " ").concat(token.lineType, " transparent")
     }), "&".concat(token.componentCls, "-disabled"), _defineProperty({}, "&:not(".concat(token.componentCls, "-customize-input) ").concat(token.componentCls, "-selector"), {
       color: token.colorTextDisabled
     })), "&".concat(token.componentCls, "-multiple ").concat(token.componentCls, "-selection-item"), {
       background: token.multipleItemBg,
       border: "".concat(unit(token.lineWidth), " ").concat(token.lineType, " ").concat(token.multipleItemBorderColor)
-    })
+    }), "&".concat(token.componentCls, "-status-error"), _defineProperty({}, "".concat(token.componentCls, "-prefix, ").concat(token.componentCls, "-selection-item"), {
+      color: token.colorError
+    })), "&".concat(token.componentCls, "-status-warning"), _defineProperty({}, "".concat(token.componentCls, "-prefix, ").concat(token.componentCls, "-selection-item"), {
+      color: token.colorWarning
+    }))
   };
 };
 var genVariantsStyle = function genVariantsStyle(token) {

package/lib/Antd5/skeleton/Image.js

@@ -8,7 +8,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider';
@@ -34,14 +34,16 @@ var SkeletonImage = function SkeletonImage(props) {
     children: _jsx("div", {
       className: classNames("".concat(prefixCls, "-image"), className),
       style: style,
-      children: _jsx("svg", {
+      children: _jsxs("svg", {
         viewBox: "0 0 1098 1024",
         xmlns: "http://www.w3.org/2000/svg",
         className: "".concat(prefixCls, "-image-svg"),
-        children: _jsx("path", {
+        children: [_jsx("title", {
+          children: "Image placeholder"
+        }), _jsx("path", {
           d: path,
           className: "".concat(prefixCls, "-image-path")
-        })
+        })]
       })
     })
   }));

package/lib/Antd5/skeleton/Node.js

@@ -10,7 +10,6 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import DotChartOutlined from '@ant-design/icons/DotChartOutlined';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider';
 import useStyle from './style';
@@ -30,13 +29,12 @@ var SkeletonNode = function SkeletonNode(props) {
     hashId = _useStyle2[1],
     cssVarCls = _useStyle2[2];
   var cls = classNames(prefixCls, "".concat(prefixCls, "-element"), _defineProperty({}, "".concat(prefixCls, "-active"), active), hashId, className, rootClassName, cssVarCls);
-  var content = children !== null && children !== void 0 ? children : _jsx(DotChartOutlined, {});
   return wrapCSSVar(_jsx("div", {
     className: cls,
     children: _jsx("div", {
       className: classNames("".concat(prefixCls, "-image"), className),
       style: style,
-      children: content
+      children: children
     })
   }));
 };

package/lib/Antd5/skeleton/Paragraph.js

@@ -25,7 +25,7 @@ var Paragraph = function Paragraph(props) {
     className = props.className,
     style = props.style,
     rows = props.rows;
-  var rowList = _toConsumableArray(Array(rows)).map(function (_, index) {
+  var rowList = _toConsumableArray(new Array(rows)).map(function (_, index) {
     return (
       // eslint-disable-next-line react/no-array-index-key
       _jsx("li", {

package/lib/Antd5/skeleton/Title.js

@@ -13,11 +13,14 @@ var Title = function Title(_ref) {
     className = _ref.className,
     width = _ref.width,
     style = _ref.style;
-  return _jsx("h3", {
-    className: classNames(prefixCls, className),
-    style: _objectSpread({
-      width: width
-    }, style)
-  });
+  return (
+    // biome-ignore lint/a11y/useHeadingContent: HOC here
+    _jsx("h3", {
+      className: classNames(prefixCls, className),
+      style: _objectSpread({
+        width: width
+      }, style)
+    })
+  );
 };
 export default Title;

package/lib/Antd5/skeleton/style/index.js

@@ -47,7 +47,7 @@ var genSkeletonElementAvatar = function genSkeletonElementAvatar(token) {
     controlHeight = token.controlHeight,
     controlHeightLG = token.controlHeightLG,
     controlHeightSM = token.controlHeightSM;
-  return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(skeletonAvatarCls), _objectSpread({
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, skeletonAvatarCls, _objectSpread({
     display: 'inline-block',
     verticalAlign: 'top',
     background: gradientFromColor
@@ -63,7 +63,7 @@ var genSkeletonElementInput = function genSkeletonElementInput(token) {
     controlHeightSM = token.controlHeightSM,
     gradientFromColor = token.gradientFromColor,
     calc = token.calc;
-  return _defineProperty(_defineProperty(_defineProperty({}, "".concat(skeletonInputCls), _objectSpread({
+  return _defineProperty(_defineProperty(_defineProperty({}, skeletonInputCls, _objectSpread({
     display: 'inline-block',
     verticalAlign: 'top',
     background: gradientFromColor,
@@ -81,11 +81,11 @@ var genSkeletonElementImage = function genSkeletonElementImage(token) {
     gradientFromColor = token.gradientFromColor,
     borderRadiusSM = token.borderRadiusSM,
     calc = token.calc;
-  return _defineProperty(_defineProperty({}, "".concat(skeletonImageCls), _objectSpread(_objectSpread({
-    display: 'flex',
+  return _defineProperty(_defineProperty({}, skeletonImageCls, _objectSpread(_objectSpread({
+    display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
-    verticalAlign: 'top',
+    verticalAlign: 'middle',
     background: gradientFromColor,
     borderRadius: borderRadiusSM
   }, genSkeletonElementImageSize(calc(imageSizeBase).mul(2).equal())), {}, _defineProperty(_defineProperty(_defineProperty({}, "".concat(skeletonImageCls, "-path"), {
@@ -123,7 +123,7 @@ var genSkeletonElementButton = function genSkeletonElementButton(token) {
     controlHeightSM = token.controlHeightSM,
     gradientFromColor = token.gradientFromColor,
     calc = token.calc;
-  return _objectSpread(_objectSpread(_objectSpread(_defineProperty({}, "".concat(skeletonButtonCls), _objectSpread({
+  return _objectSpread(_objectSpread(_objectSpread(_defineProperty({}, skeletonButtonCls, _objectSpread({
     display: 'inline-block',
     verticalAlign: 'top',
     background: gradientFromColor,
@@ -153,14 +153,14 @@ var genBaseStyle = function genBaseStyle(token) {
     paragraphLiHeight = token.paragraphLiHeight,
     controlHeightXS = token.controlHeightXS,
     paragraphMarginTop = token.paragraphMarginTop;
-  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls), _defineProperty(_defineProperty(_defineProperty({
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, componentCls, _defineProperty(_defineProperty(_defineProperty({
     display: 'table',
     width: '100%'
   }, "".concat(componentCls, "-header"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
     display: 'table-cell',
     paddingInlineEnd: padding,
     verticalAlign: 'top'
-  }, "".concat(skeletonAvatarCls), _objectSpread({
+  }, skeletonAvatarCls, _objectSpread({
     display: 'inline-block',
     verticalAlign: 'top',
     background: gradientFromColor
@@ -170,14 +170,14 @@ var genBaseStyle = function genBaseStyle(token) {
     display: 'table-cell',
     width: '100%',
     verticalAlign: 'top'
-  }, "".concat(skeletonTitleCls), _defineProperty({
+  }, skeletonTitleCls, _defineProperty({
     width: '100%',
     height: titleHeight,
     background: gradientFromColor,
     borderRadius: blockRadius
   }, "+ ".concat(skeletonParagraphCls), {
     marginBlockStart: controlHeightSM
-  })), "".concat(skeletonParagraphCls), {
+  })), skeletonParagraphCls, {
     padding: 0,
     '> li': {
       width: '100%',
@@ -193,7 +193,7 @@ var genBaseStyle = function genBaseStyle(token) {
     width: '61%'
   })), "&-round ".concat(componentCls, "-content"), _defineProperty({}, "".concat(skeletonTitleCls, ", ").concat(skeletonParagraphCls, " > li"), {
     borderRadius: borderRadius
-  }))), "".concat(componentCls, "-with-avatar ").concat(componentCls, "-content"), _defineProperty({}, "".concat(skeletonTitleCls), _defineProperty({
+  }))), "".concat(componentCls, "-with-avatar ").concat(componentCls, "-content"), _defineProperty({}, skeletonTitleCls, _defineProperty({
     marginBlockStart: marginSM
   }, "+ ".concat(skeletonParagraphCls), {
     marginBlockStart: paragraphMarginTop
@@ -202,9 +202,9 @@ var genBaseStyle = function genBaseStyle(token) {
     width: 'auto'
   }, genSkeletonElementButton(token)), genSkeletonElementAvatar(token)), genSkeletonElementInput(token)), genSkeletonElementImage(token))), "".concat(componentCls).concat(componentCls, "-block"), _defineProperty(_defineProperty({
     width: '100%'
-  }, "".concat(skeletonButtonCls), {
+  }, skeletonButtonCls, {
     width: '100%'
-  }), "".concat(skeletonInputCls), {
+  }), skeletonInputCls, {
     width: '100%'
   })), "".concat(componentCls).concat(componentCls, "-active"), _defineProperty({}, "\n        ".concat(skeletonTitleCls, ",\n        ").concat(skeletonParagraphCls, " > li,\n        ").concat(skeletonAvatarCls, ",\n        ").concat(skeletonButtonCls, ",\n        ").concat(skeletonInputCls, ",\n        ").concat(skeletonImageCls, "\n      "), _objectSpread({}, genSkeletonColor(token))));
 };

package/lib/Antd5/slider/Context.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+/** @private Internal context. Do not use in your production. */
+var SliderInternalContext = /*#__PURE__*/createContext({});
+export default SliderInternalContext;

package/lib/Antd5/slider/SliderTooltip.js

@@ -11,8 +11,10 @@ import raf from 'rc-util/lib/raf';
 import { composeRef } from 'rc-util/lib/ref';
 import Tooltip from '../tooltip';
 var SliderTooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var open = props.open;
+  var open = props.open,
+    draggingDelete = props.draggingDelete;
   var innerRef = useRef(null);
+  var mergedOpen = open && !draggingDelete;
   var rafRef = useRef(null);
   function cancelKeepAlign() {
     raf.cancel(rafRef.current);
@@ -26,16 +28,18 @@ var SliderTooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
   }
   React.useEffect(function () {
-    if (open) {
+    if (mergedOpen) {
       keepAlign();
     } else {
       cancelKeepAlign();
     }
     return cancelKeepAlign;
-  }, [open, props.title]);
-  return _jsx(Tooltip, _objectSpread({
+  }, [mergedOpen, props.title]);
+  return _jsx(Tooltip, _objectSpread(_objectSpread({
     ref: composeRef(innerRef, ref)
-  }, props));
+  }, props), {}, {
+    open: mergedOpen
+  }));
 });
 if (process.env.NODE_ENV !== 'production') {
   SliderTooltip.displayName = 'SliderTooltip';

package/lib/Antd5/slider/index.js

@@ -1,5 +1,5 @@
-var _excluded = ["prefixCls", "range", "className", "rootClassName", "style", "disabled", "tooltipPrefixCls", "tipFormatter", "tooltipVisible", "getTooltipPopupContainer", "tooltipPlacement", "tooltip", "onChangeComplete"];
 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", "range", "className", "rootClassName", "style", "disabled", "tooltipPrefixCls", "tipFormatter", "tooltipVisible", "getTooltipPopupContainer", "tooltipPlacement", "tooltip", "onChangeComplete"];
 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; }
@@ -24,6 +24,7 @@ import { ConfigContext } from '../config-provider';
 import DisabledContext from '../config-provider/DisabledContext';
 import SliderTooltip from './SliderTooltip';
 import useStyle from './style';
+import SliderInternalContext from './Context';
 import useRafLock from './useRafLock';
 function getTipFormatter(tipFormatter, legacyTipFormatter) {
   if (tipFormatter || tipFormatter === null) {
@@ -54,12 +55,18 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
     restProps = _objectWithoutProperties(props, _excluded);
   var vertical = props.vertical;
   var _React$useContext = React.useContext(ConfigContext),
-    direction = _React$useContext.direction,
+    contextDirection = _React$useContext.direction,
     slider = _React$useContext.slider,
     getPrefixCls = _React$useContext.getPrefixCls,
     getPopupContainer = _React$useContext.getPopupContainer;
   var contextDisabled = React.useContext(DisabledContext);
   var mergedDisabled = disabled !== null && disabled !== void 0 ? disabled : contextDisabled;
+  // ============================= Context ==============================
+  var _React$useContext2 = React.useContext(SliderInternalContext),
+    contextHandleRender = _React$useContext2.handleRender,
+    internalContextDirection = _React$useContext2.direction;
+  var mergedDirection = internalContextDirection || contextDirection;
+  var isRTL = mergedDirection === 'rtl';
   // =============================== Open ===============================
   var _useRafLock = useRafLock(),
     _useRafLock2 = _slicedToArray(_useRafLock, 2),
@@ -95,7 +102,7 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (!vert) {
       return 'top';
     }
-    return direction === 'rtl' ? 'left' : 'right';
+    return isRTL ? 'left' : 'right';
   };
   // ============================== Style ===============================
   var prefixCls = getPrefixCls('slider', customizePrefixCls);
@@ -104,22 +111,11 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
     wrapCSSVar = _useStyle2[0],
     hashId = _useStyle2[1],
     cssVarCls = _useStyle2[2];
-  var cls = classNames(className, slider === null || slider === void 0 ? void 0 : slider.className, rootClassName, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-rtl"), direction === 'rtl'), "".concat(prefixCls, "-lock"), dragging), hashId, cssVarCls);
+  var cls = classNames(className, slider === null || slider === void 0 ? void 0 : slider.className, rootClassName, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-rtl"), isRTL), "".concat(prefixCls, "-lock"), dragging), hashId, cssVarCls);
   // make reverse default on rtl direction
-  if (direction === 'rtl' && !restProps.vertical) {
+  if (isRTL && !restProps.vertical) {
     restProps.reverse = !restProps.reverse;
   }
-  // ============================= Multiple =============================
-  // Range config
-  var _React$useMemo = React.useMemo(function () {
-      if (!range) {
-        return [false];
-      }
-      return _typeof(range) === 'object' ? [true, range.draggableTrack] : [true, false];
-    }, [range]),
-    _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
-    mergedRange = _React$useMemo2[0],
-    draggableTrack = _React$useMemo2[1];
   // ============================= Warning ==============================
   // Warning for deprecated usage
   if (process.env.NODE_ENV !== 'production') {
@@ -145,38 +141,43 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
       document.removeEventListener('mouseup', onMouseUp);
     };
   }, []);
-  var useActiveTooltipHandle = mergedRange && !lockOpen;
-  var handleRender = function handleRender(node, info) {
+  var useActiveTooltipHandle = range && !lockOpen;
+  var handleRender = contextHandleRender || function (node, info) {
     var index = info.index;
     var nodeProps = node.props;
+    function proxyEvent(eventName, event, triggerRestPropsEvent) {
+      var _nodeProps$eventName;
+      if (triggerRestPropsEvent) {
+        var _restProps$eventName;
+        (_restProps$eventName = restProps[eventName]) === null || _restProps$eventName === void 0 || _restProps$eventName.call(restProps, event);
+      }
+      (_nodeProps$eventName = nodeProps[eventName]) === null || _nodeProps$eventName === void 0 || _nodeProps$eventName.call(nodeProps, event);
+    }
     var passedProps = _objectSpread(_objectSpread({}, nodeProps), {}, {
       onMouseEnter: function onMouseEnter(e) {
-        var _nodeProps$onMouseEnt;
         setHoverOpen(true);
-        (_nodeProps$onMouseEnt = nodeProps.onMouseEnter) === null || _nodeProps$onMouseEnt === void 0 || _nodeProps$onMouseEnt.call(nodeProps, e);
+        proxyEvent('onMouseEnter', e);
       },
       onMouseLeave: function onMouseLeave(e) {
-        var _nodeProps$onMouseLea;
         setHoverOpen(false);
-        (_nodeProps$onMouseLea = nodeProps.onMouseLeave) === null || _nodeProps$onMouseLea === void 0 || _nodeProps$onMouseLea.call(nodeProps, e);
+        proxyEvent('onMouseLeave', e);
       },
       onMouseDown: function onMouseDown(e) {
-        var _nodeProps$onMouseDow;
         setFocusOpen(true);
         setDragging(true);
-        (_nodeProps$onMouseDow = nodeProps.onMouseDown) === null || _nodeProps$onMouseDow === void 0 || _nodeProps$onMouseDow.call(nodeProps, e);
+        proxyEvent('onMouseDown', e);
       },
       onFocus: function onFocus(e) {
-        var _restProps$onFocus, _nodeProps$onFocus;
+        var _restProps$onFocus;
         setFocusOpen(true);
         (_restProps$onFocus = restProps.onFocus) === null || _restProps$onFocus === void 0 || _restProps$onFocus.call(restProps, e);
-        (_nodeProps$onFocus = nodeProps.onFocus) === null || _nodeProps$onFocus === void 0 || _nodeProps$onFocus.call(nodeProps, e);
+        proxyEvent('onFocus', e, true);
       },
       onBlur: function onBlur(e) {
-        var _restProps$onBlur, _nodeProps$onBlur;
+        var _restProps$onBlur;
         setFocusOpen(false);
         (_restProps$onBlur = restProps.onBlur) === null || _restProps$onBlur === void 0 || _restProps$onBlur.call(restProps, e);
-        (_nodeProps$onBlur = nodeProps.onBlur) === null || _nodeProps$onBlur === void 0 || _nodeProps$onBlur.call(nodeProps, e);
+        proxyEvent('onBlur', e, true);
       }
     });
     var cloneNode = /*#__PURE__*/React.cloneElement(node, passedProps);
@@ -209,7 +210,8 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
       placement: getTooltipPlacement(tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : legacyTooltipPlacement, vertical),
       key: "tooltip",
       overlayClassName: "".concat(prefixCls, "-tooltip"),
-      getPopupContainer: getTooltipPopupContainer || legacyGetTooltipPopupContainer || getPopupContainer
+      getPopupContainer: getTooltipPopupContainer || legacyGetTooltipPopupContainer || getPopupContainer,
+      draggingDelete: info.draggingDelete
     }), cloneNode);
   } : undefined;
   // ============================== Render ==============================
@@ -218,8 +220,7 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
   // @ts-ignore
   _jsx(RcSlider, _objectSpread(_objectSpread({}, restProps), {}, {
     step: restProps.step,
-    range: mergedRange,
-    draggableTrack: draggableTrack,
+    range: range,
     className: cls,
     style: mergedStyle,
     disabled: mergedDisabled,

package/lib/Antd5/slider/style/index.js

@@ -19,24 +19,32 @@ var genBaseStyle = function genBaseStyle(token) {
     marginPart = token.marginPart,
     colorFillContentHover = token.colorFillContentHover,
     handleColorDisabled = token.handleColorDisabled,
-    calc = token.calc;
+    calc = token.calc,
+    handleSize = token.handleSize,
+    handleSizeHover = token.handleSizeHover,
+    handleActiveColor = token.handleActiveColor,
+    handleActiveOutlineColor = token.handleActiveOutlineColor,
+    handleLineWidth = token.handleLineWidth,
+    handleLineWidthHover = token.handleLineWidthHover,
+    motionDurationMid = token.motionDurationMid;
   return _defineProperty({}, componentCls, _objectSpread(_objectSpread({}, resetComponent(token)), {}, (_objectSpread2 = {
     position: 'relative',
     height: controlSize,
     margin: "".concat(unit(marginPart), " ").concat(unit(marginFull)),
     padding: 0,
     cursor: 'pointer',
-    touchAction: 'none'
-  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_objectSpread2, "&-vertical", {
-    margin: "".concat(unit(marginFull), " ").concat(unit(marginPart))
-  }), "".concat(componentCls, "-rail"), {
+    touchAction: 'none',
+    '&-vertical': {
+      margin: "".concat(unit(marginFull), " ").concat(unit(marginPart))
+    }
+  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_objectSpread2, "".concat(componentCls, "-rail"), {
     position: 'absolute',
     backgroundColor: token.railBg,
     borderRadius: token.borderRadiusXS,
-    transition: "background-color ".concat(token.motionDurationMid)
+    transition: "background-color ".concat(motionDurationMid)
   }), "".concat(componentCls, "-track,").concat(componentCls, "-tracks"), {
     position: 'absolute',
-    transition: "background-color ".concat(token.motionDurationMid)
+    transition: "background-color ".concat(motionDurationMid)
   }), "".concat(componentCls, "-track"), {
     backgroundColor: token.trackBg,
     borderRadius: token.borderRadiusXS
@@ -51,22 +59,27 @@ var genBaseStyle = function genBaseStyle(token) {
   }), "".concat(componentCls, "-dot"), {
     borderColor: colorFillContentHover
   }), "".concat(componentCls, "-handle::after"), {
-    boxShadow: "0 0 0 ".concat(unit(token.handleLineWidth), " ").concat(token.colorPrimaryBorderHover)
+    boxShadow: "0 0 0 ".concat(unit(handleLineWidth), " ").concat(token.colorPrimaryBorderHover)
   }), "".concat(componentCls, "-dot-active"), {
     borderColor: token.dotActiveBorderColor
   })), "".concat(componentCls, "-handle"), {
     position: 'absolute',
-    width: token.handleSize,
-    height: token.handleSize,
+    width: handleSize,
+    height: handleSize,
     outline: 'none',
+    userSelect: 'none',
+    // Dragging status
+    '&-dragging-delete': {
+      opacity: 0
+    },
     // 扩大选区
     '&::before': {
       content: '""',
       position: 'absolute',
-      insetInlineStart: calc(token.handleLineWidth).mul(-1).equal(),
-      insetBlockStart: calc(token.handleLineWidth).mul(-1).equal(),
-      width: calc(token.handleSize).add(calc(token.handleLineWidth).mul(2)).equal(),
-      height: calc(token.handleSize).add(calc(token.handleLineWidth).mul(2)).equal(),
+      insetInlineStart: calc(handleLineWidth).mul(-1).equal(),
+      insetBlockStart: calc(handleLineWidth).mul(-1).equal(),
+      width: calc(handleSize).add(calc(handleLineWidth).mul(2)).equal(),
+      height: calc(handleSize).add(calc(handleLineWidth).mul(2)).equal(),
       backgroundColor: 'transparent'
     },
     '&::after': {
@@ -74,36 +87,36 @@ var genBaseStyle = function genBaseStyle(token) {
       position: 'absolute',
       insetBlockStart: 0,
       insetInlineStart: 0,
-      width: token.handleSize,
-      height: token.handleSize,
+      width: handleSize,
+      height: handleSize,
       backgroundColor: token.colorBgElevated,
-      boxShadow: "0 0 0 ".concat(unit(token.handleLineWidth), " ").concat(token.handleColor),
+      boxShadow: "0 0 0 ".concat(unit(handleLineWidth), " ").concat(token.handleColor),
+      outline: "0px solid transparent",
       borderRadius: '50%',
       cursor: 'pointer',
-      transition: "\n            inset-inline-start ".concat(token.motionDurationMid, ",\n            inset-block-start ").concat(token.motionDurationMid, ",\n            width ").concat(token.motionDurationMid, ",\n            height ").concat(token.motionDurationMid, ",\n            box-shadow ").concat(token.motionDurationMid, "\n          ")
+      transition: "\n            inset-inline-start ".concat(motionDurationMid, ",\n            inset-block-start ").concat(motionDurationMid, ",\n            width ").concat(motionDurationMid, ",\n            height ").concat(motionDurationMid, ",\n            box-shadow ").concat(motionDurationMid, ",\n            outline ").concat(motionDurationMid, "\n          ")
     },
     '&:hover, &:active, &:focus': {
       '&::before': {
-        // -(
-        //   (token.handleSizeHover - token.handleSize) / 2 +
-        //   token.handleLineWidthHover
-        // ),
-        insetInlineStart: calc(token.handleSizeHover).sub(token.handleSize).div(2).add(token.handleLineWidthHover).mul(-1).equal(),
-        insetBlockStart: calc(token.handleSizeHover).sub(token.handleSize).div(2).add(token.handleLineWidthHover).mul(-1).equal(),
-        width: calc(token.handleSizeHover).add(calc(token.handleLineWidthHover).mul(2)).equal(),
-        height: calc(token.handleSizeHover).add(calc(token.handleLineWidthHover).mul(2)).equal()
+        insetInlineStart: calc(handleSizeHover).sub(handleSize).div(2).add(handleLineWidthHover).mul(-1).equal(),
+        insetBlockStart: calc(handleSizeHover).sub(handleSize).div(2).add(handleLineWidthHover).mul(-1).equal(),
+        width: calc(handleSizeHover).add(calc(handleLineWidthHover).mul(2)).equal(),
+        height: calc(handleSizeHover).add(calc(handleLineWidthHover).mul(2)).equal()
       },
       '&::after': {
-        boxShadow: "0 0 0 ".concat(unit(token.handleLineWidthHover), " ").concat(token.handleActiveColor),
-        width: token.handleSizeHover,
-        height: token.handleSizeHover,
-        insetInlineStart: token.calc(token.handleSize).sub(token.handleSizeHover).div(2).equal(),
-        insetBlockStart: token.calc(token.handleSize).sub(token.handleSizeHover).div(2).equal()
+        boxShadow: "0 0 0 ".concat(unit(handleLineWidthHover), " ").concat(handleActiveColor),
+        outline: "6px solid ".concat(handleActiveOutlineColor),
+        width: handleSizeHover,
+        height: handleSizeHover,
+        insetInlineStart: token.calc(handleSize).sub(handleSizeHover).div(2).equal(),
+        insetBlockStart: token.calc(handleSize).sub(handleSizeHover).div(2).equal()
       }
     }
-  }), "&-lock ".concat(componentCls, "-handle"), _defineProperty({}, "&::before, &::after", {
-    transition: 'none'
-  })), "".concat(componentCls, "-mark"), {
+  }), "&-lock ".concat(componentCls, "-handle"), {
+    '&::before, &::after': {
+      transition: 'none'
+    }
+  }), "".concat(componentCls, "-mark"), {
     position: 'absolute',
     fontSize: token.fontSize
   }), "".concat(componentCls, "-mark-text"), {
@@ -117,16 +130,16 @@ var genBaseStyle = function genBaseStyle(token) {
     '&-active': {
       color: token.colorText
     }
-  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_objectSpread2, "".concat(componentCls, "-step"), {
+  }), "".concat(componentCls, "-step"), {
     position: 'absolute',
     background: 'transparent',
     pointerEvents: 'none'
-  }), "".concat(componentCls, "-dot"), {
+  }), _defineProperty(_defineProperty(_defineProperty(_objectSpread2, "".concat(componentCls, "-dot"), {
     position: 'absolute',
     width: dotSize,
     height: dotSize,
     backgroundColor: token.colorBgElevated,
-    border: "".concat(unit(token.handleLineWidth), " solid ").concat(token.dotBorderColor),
+    border: "".concat(unit(handleLineWidth), " solid ").concat(token.dotBorderColor),
     borderRadius: '50%',
     cursor: 'pointer',
     transition: "border-color ".concat(token.motionDurationSlow),
@@ -148,9 +161,9 @@ var genBaseStyle = function genBaseStyle(token) {
   }), "".concat(componentCls, "-handle::after"), {
     backgroundColor: token.colorBgElevated,
     cursor: 'not-allowed',
-    width: token.handleSize,
-    height: token.handleSize,
-    boxShadow: "0 0 0 ".concat(unit(token.handleLineWidth), " ").concat(handleColorDisabled),
+    width: handleSize,
+    height: handleSize,
+    boxShadow: "0 0 0 ".concat(unit(handleLineWidth), " ").concat(handleColorDisabled),
     insetInlineStart: 0,
     insetBlockStart: 0
   }), "\n          ".concat(componentCls, "-mark-text,\n          ").concat(componentCls, "-dot\n        "), {
@@ -215,7 +228,9 @@ export var prepareComponentToken = function prepareComponentToken(token) {
   var controlSize = token.controlHeightLG / 4;
   var controlSizeHover = token.controlHeightSM / 2;
   var handleLineWidth = token.lineWidth + increaseHandleWidth;
-  var handleLineWidthHover = token.lineWidth + increaseHandleWidth * 3;
+  var handleLineWidthHover = token.lineWidth + increaseHandleWidth * 1.5;
+  var handleActiveColor = token.colorPrimary;
+  var handleActiveOutlineColor = new TinyColor(handleActiveColor).setAlpha(0.2).toRgbString();
   return {
     controlSize: controlSize,
     railSize: 4,
@@ -226,10 +241,11 @@ export var prepareComponentToken = function prepareComponentToken(token) {
     handleLineWidthHover: handleLineWidthHover,
     railBg: token.colorFillTertiary,
     railHoverBg: token.colorFillSecondary,
-    trackBg: token.colorPrimary,
-    trackHoverBg: token.colorPrimary,
+    trackBg: token.colorPrimaryBorder,
+    trackHoverBg: token.colorPrimaryBorderHover,
     handleColor: token.colorPrimaryBorder,
-    handleActiveColor: token.colorPrimary,
+    handleActiveColor: handleActiveColor,
+    handleActiveOutlineColor: handleActiveOutlineColor,
     handleColorDisabled: new TinyColor(token.colorTextDisabled).onBackground(token.colorBgContainer).toHexShortString(),
     dotBorderColor: token.colorBorderSecondary,
     dotActiveBorderColor: token.colorPrimaryBorder,