@chaoswise/ui 3.1.6 → 3.1.8

package/lib/Antd5/select/index.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", "bordered", "className", "rootClassName", "getPopupContainer", "popupClassName", "dropdownClassName", "listHeight", "placement", "listItemHeight", "size", "disabled", "notFoundContent", "status", "builtinPlacements", "dropdownMatchSelectWidth", "popupMatchSelectWidth", "direction", "style", "allowClear", "variant", "dropdownStyle", "transitionName", "tagRender", "maxCount", "prefix"];
+var _excluded = ["prefixCls", "bordered", "className", "rootClassName", "getPopupContainer", "popupClassName", "dropdownClassName", "listHeight", "placement", "listItemHeight", "size", "disabled", "notFoundContent", "status", "builtinPlacements", "dropdownMatchSelectWidth", "popupMatchSelectWidth", "direction", "style", "allowClear", "variant", "dropdownStyle", "transitionName", "tagRender", "maxCount", "prefix", "dropdownRender", "popupRender", "onDropdownVisibleChange", "onOpenChange", "styles", "classNames"];
 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; }
@@ -16,7 +16,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import { jsx as _jsx } from "react/jsx-runtime";
 // TODO: 4.0 - codemod should help to change `filterOption` to support node props.
 import * as React from 'react';
-import classNames from 'classnames';
+import cls from 'classnames';
 import RcSelect, { OptGroup, Option } from 'rc-select';
 import omit from 'rc-util/lib/omit';
 import { useZIndex } from '../_util/hooks/useZIndex';
@@ -25,6 +25,7 @@ import genPurePanel from '../_util/PurePanel';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
+import { useComponentConfig } from '../config-provider/context';
 import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import DisabledContext from '../config-provider/DisabledContext';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
@@ -39,7 +40,7 @@ import useIcons from './useIcons';
 import useShowArrow from './useShowArrow';
 var SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
 var InternalSelect = function InternalSelect(props, ref) {
-  var _ref;
+  var _ref, _styles$popup, _contextStyles$popup, _classNames$popup, _contextClassNames$po;
   var customizePrefixCls = props.prefixCls,
     bordered = props.bordered,
     className = props.className,
@@ -67,6 +68,12 @@ var InternalSelect = function InternalSelect(props, ref) {
     tagRender = props.tagRender,
     maxCount = props.maxCount,
     prefix = props.prefix,
+    dropdownRender = props.dropdownRender,
+    popupRender = props.popupRender,
+    onDropdownVisibleChange = props.onDropdownVisibleChange,
+    onOpenChange = props.onOpenChange,
+    styles = props.styles,
+    classNames = props.classNames,
     rest = _objectWithoutProperties(props, _excluded);
   var _React$useContext = React.useContext(ConfigContext),
     getContextPopupContainer = _React$useContext.getPopupContainer,
@@ -75,8 +82,13 @@ var InternalSelect = function InternalSelect(props, ref) {
     contextDirection = _React$useContext.direction,
     virtual = _React$useContext.virtual,
     contextPopupMatchSelectWidth = _React$useContext.popupMatchSelectWidth,
-    popupOverflow = _React$useContext.popupOverflow,
-    select = _React$useContext.select;
+    popupOverflow = _React$useContext.popupOverflow;
+  var _useComponentConfig = useComponentConfig('select'),
+    showSearch = _useComponentConfig.showSearch,
+    contextStyle = _useComponentConfig.style,
+    contextStyles = _useComponentConfig.styles,
+    contextClassName = _useComponentConfig.className,
+    contextClassNames = _useComponentConfig.classNames;
   var _useToken = useToken(),
     _useToken2 = _slicedToArray(_useToken, 2),
     token = _useToken2[1];
@@ -110,6 +122,9 @@ var InternalSelect = function InternalSelect(props, ref) {
   var isMultiple = mode === 'multiple' || mode === 'tags';
   var showSuffixIcon = useShowArrow(props.suffixIcon, props.showArrow);
   var mergedPopupMatchSelectWidth = (_ref = popupMatchSelectWidth !== null && popupMatchSelectWidth !== void 0 ? popupMatchSelectWidth : dropdownMatchSelectWidth) !== null && _ref !== void 0 ? _ref : contextPopupMatchSelectWidth;
+  var mergedPopupStyle = (styles === null || styles === void 0 || (_styles$popup = styles.popup) === null || _styles$popup === void 0 ? void 0 : _styles$popup.root) || ((_contextStyles$popup = contextStyles.popup) === null || _contextStyles$popup === void 0 ? void 0 : _contextStyles$popup.root) || dropdownStyle;
+  var mergedPopupRender = popupRender || dropdownRender;
+  var mergedOnOpenChange = onOpenChange || onDropdownVisibleChange;
   // ===================== Form Status =====================
   var _React$useContext2 = React.useContext(FormItemInputContext),
     contextStatus = _React$useContext2.status,
@@ -145,7 +160,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     clearIcon: clearIcon
   } : allowClear;
   var selectProps = omit(rest, ['suffixIcon', 'itemIcon']);
-  var mergedPopupClassName = classNames(popupClassName || dropdownClassName, _defineProperty({}, "".concat(prefixCls, "-dropdown-").concat(direction), direction === 'rtl'), rootClassName, cssVarCls, rootCls, hashId);
+  var mergedPopupClassName = cls((classNames === null || classNames === void 0 || (_classNames$popup = classNames.popup) === null || _classNames$popup === void 0 ? void 0 : _classNames$popup.root) || (contextClassNames === null || contextClassNames === void 0 || (_contextClassNames$po = contextClassNames.popup) === null || _contextClassNames$po === void 0 ? void 0 : _contextClassNames$po.root) || popupClassName || dropdownClassName, _defineProperty({}, "".concat(prefixCls, "-dropdown-").concat(direction), direction === 'rtl'), rootClassName, contextClassNames.root, classNames === null || classNames === void 0 ? void 0 : classNames.root, cssVarCls, rootCls, hashId);
   var mergedSize = useSize(function (ctx) {
     var _ref2;
     return (_ref2 = customizeSize !== null && customizeSize !== void 0 ? customizeSize : compactSize) !== null && _ref2 !== void 0 ? _ref2 : ctx;
@@ -153,7 +168,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   // ===================== Disabled =====================
   var disabled = React.useContext(DisabledContext);
   var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
-  var mergedClassName = classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-lg"), mergedSize === 'large'), "".concat(prefixCls, "-sm"), mergedSize === 'small'), "".concat(prefixCls, "-rtl"), direction === 'rtl'), "".concat(prefixCls, "-").concat(variant), enableVariantCls), "".concat(prefixCls, "-in-form-item"), isFormItemInput), getStatusClassNames(prefixCls, mergedStatus, hasFeedback), compactItemClassnames, select === null || select === void 0 ? void 0 : select.className, className, rootClassName, cssVarCls, rootCls, hashId);
+  var mergedClassName = cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-lg"), mergedSize === 'large'), "".concat(prefixCls, "-sm"), mergedSize === 'small'), "".concat(prefixCls, "-rtl"), direction === 'rtl'), "".concat(prefixCls, "-").concat(variant), enableVariantCls), "".concat(prefixCls, "-in-form-item"), isFormItemInput), getStatusClassNames(prefixCls, mergedStatus, hasFeedback), compactItemClassnames, contextClassName, className, contextClassNames.root, classNames === null || classNames === void 0 ? void 0 : classNames.root, rootClassName, cssVarCls, rootCls, hashId);
   // ===================== Placement =====================
   var memoPlacement = React.useMemo(function () {
     if (placement !== undefined) {
@@ -164,23 +179,35 @@ var InternalSelect = function InternalSelect(props, ref) {
   // ====================== Warning ======================
   if (process.env.NODE_ENV !== 'production') {
     var warning = devUseWarning('Select');
-    warning.deprecated(!dropdownClassName, 'dropdownClassName', 'popupClassName');
-    warning.deprecated(dropdownMatchSelectWidth === undefined, 'dropdownMatchSelectWidth', 'popupMatchSelectWidth');
+    var deprecatedProps = {
+      dropdownMatchSelectWidth: 'popupMatchSelectWidth',
+      dropdownStyle: 'styles.popup.root',
+      dropdownClassName: 'classNames.popup.root',
+      popupClassName: 'classNames.popup.root',
+      dropdownRender: 'popupRender',
+      onDropdownVisibleChange: 'onOpenChange',
+      bordered: 'variant'
+    };
+    Object.entries(deprecatedProps).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        oldProp = _ref4[0],
+        newProp = _ref4[1];
+      warning.deprecated(!(oldProp in props), oldProp, newProp);
+    });
     warning(!('showArrow' in props), 'deprecated', '`showArrow` is deprecated which will be removed in next major version. It will be a default behavior, you can hide it by setting `suffixIcon` to null.');
-    warning.deprecated(!('bordered' in props), 'bordered', 'variant');
     warning(!(typeof maxCount !== 'undefined' && !isMultiple), 'usage', '`maxCount` only works with mode `multiple` or `tags`');
   }
   // ====================== zIndex =========================
-  var _useZIndex = useZIndex('SelectLike', dropdownStyle === null || dropdownStyle === void 0 ? void 0 : dropdownStyle.zIndex),
+  var _useZIndex = useZIndex('SelectLike', mergedPopupStyle === null || mergedPopupStyle === void 0 ? void 0 : mergedPopupStyle.zIndex),
     _useZIndex2 = _slicedToArray(_useZIndex, 1),
     zIndex = _useZIndex2[0];
   // ====================== Render =======================
   return wrapCSSVar(_jsx(RcSelect, _objectSpread(_objectSpread({
     ref: ref,
     virtual: virtual,
-    showSearch: select === null || select === void 0 ? void 0 : select.showSearch
+    showSearch: showSearch
   }, selectProps), {}, {
-    style: _objectSpread(_objectSpread({}, select === null || select === void 0 ? void 0 : select.style), style),
+    style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, contextStyles.root), styles === null || styles === void 0 ? void 0 : styles.root), contextStyle), style),
     dropdownMatchSelectWidth: mergedPopupMatchSelectWidth,
     transitionName: getTransitionName(rootPrefixCls, 'slide-up', transitionName),
     builtinPlacements: mergedBuiltinPlacements(builtinPlacements, popupOverflow),
@@ -200,11 +227,13 @@ var InternalSelect = function InternalSelect(props, ref) {
     getPopupContainer: getPopupContainer || getContextPopupContainer,
     dropdownClassName: mergedPopupClassName,
     disabled: mergedDisabled,
-    dropdownStyle: _objectSpread(_objectSpread({}, dropdownStyle), {}, {
+    dropdownStyle: _objectSpread(_objectSpread({}, mergedPopupStyle), {}, {
       zIndex: zIndex
     }),
     maxCount: isMultiple ? maxCount : undefined,
-    tagRender: isMultiple ? tagRender : undefined
+    tagRender: isMultiple ? tagRender : undefined,
+    dropdownRender: mergedPopupRender,
+    onDropdownVisibleChange: mergedOnOpenChange
   })));
 };
 if (process.env.NODE_ENV !== 'production') {
@@ -213,7 +242,7 @@ if (process.env.NODE_ENV !== 'production') {
 var Select = /*#__PURE__*/React.forwardRef(InternalSelect);
 // We don't care debug panel
 /* istanbul ignore next */
-var PurePanel = genPurePanel(Select);
+var PurePanel = genPurePanel(Select, 'dropdownAlign');
 Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE;
 Select.Option = Option;
 Select.OptGroup = OptGroup;

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

@@ -31,7 +31,8 @@ var genSingleStyle = function genSingleStyle(token) {
   var slideUpAppearActive = "&".concat(antCls, "-slide-up-appear").concat(antCls, "-slide-up-appear-active");
   var slideUpLeaveActive = "&".concat(antCls, "-slide-up-leave").concat(antCls, "-slide-up-leave-active");
   var dropdownPlacementCls = "".concat(componentCls, "-dropdown-placement-");
-  return [_defineProperty({}, "".concat(componentCls, "-dropdown"), _objectSpread(_objectSpread({}, resetComponent(token)), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  var selectedItemCls = "".concat(selectItemCls, "-option-selected");
+  return [_defineProperty({}, "".concat(componentCls, "-dropdown"), _objectSpread(_objectSpread({}, resetComponent(token)), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     position: 'absolute',
     top: -9999,
     zIndex: token.zIndexPopup,
@@ -80,19 +81,13 @@ var genSingleStyle = function genSingleStyle(token) {
       }
     }, "&-active:not(".concat(selectItemCls, "-option-disabled)"), {
       backgroundColor: token.optionActiveBg
-    }), "&-selected:not(".concat(selectItemCls, "-option-disabled)"), _defineProperty(_defineProperty({
+    }), "&-selected:not(".concat(selectItemCls, "-option-disabled)"), _defineProperty({
       color: token.optionSelectedColor,
       fontWeight: token.optionSelectedFontWeight,
       backgroundColor: token.optionSelectedBg
     }, "".concat(selectItemCls, "-option-state"), {
       color: token.colorPrimary
-    }), "&:has(+ ".concat(selectItemCls, "-option-selected:not(").concat(selectItemCls, "-option-disabled))"), _defineProperty({
-      borderEndStartRadius: 0,
-      borderEndEndRadius: 0
-    }, "& + ".concat(selectItemCls, "-option-selected:not(").concat(selectItemCls, "-option-disabled)"), {
-      borderStartStartRadius: 0,
-      borderStartEndRadius: 0
-    }))), '&-disabled', _defineProperty(_defineProperty(_defineProperty({}, "&".concat(selectItemCls, "-option-selected"), {
+    })), '&-disabled', _defineProperty(_defineProperty(_defineProperty({}, "&".concat(selectItemCls, "-option-selected"), {
       backgroundColor: token.colorBgContainerDisabled
     }), "color", token.colorTextDisabled), "cursor", 'not-allowed')), '&-grouped', {
       paddingInlineStart: token.calc(token.controlPaddingHorizontal).mul(2).equal()
@@ -100,6 +95,12 @@ var genSingleStyle = function genSingleStyle(token) {
     '&-empty': _objectSpread(_objectSpread({}, genItemStyle(token)), {}, {
       color: token.colorTextDisabled
     })
+  })), "".concat(selectedItemCls, ":has(+ ").concat(selectedItemCls, ")"), _defineProperty({
+    borderEndStartRadius: 0,
+    borderEndEndRadius: 0
+  }, "& + ".concat(selectedItemCls), {
+    borderStartStartRadius: 0,
+    borderStartEndRadius: 0
   })), '&-rtl', {
     direction: 'rtl'
   }))),

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

@@ -49,7 +49,7 @@ var getSearchInputWithoutBorderStyle = function getSearchInputWithoutBorderStyle
     fontFamily: 'inherit',
     '&::-webkit-search-cancel-button': {
       display: 'none',
-      '-webkit-appearance': 'none'
+      appearance: 'none'
     }
   });
 };
@@ -59,7 +59,12 @@ var genBaseStyle = function genBaseStyle(token) {
     componentCls = token.componentCls,
     inputPaddingHorizontalBase = token.inputPaddingHorizontalBase,
     iconCls = token.iconCls;
-  return _defineProperty(_defineProperty({}, componentCls, _objectSpread(_objectSpread({}, resetComponent(token)), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  var hoverShowClearStyle = _defineProperty({}, "".concat(componentCls, "-clear"), {
+    opacity: 1,
+    background: token.colorBgBase,
+    borderRadius: '50%'
+  });
+  return _defineProperty(_defineProperty({}, componentCls, _objectSpread(_objectSpread({}, resetComponent(token)), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     position: 'relative',
     display: 'inline-flex',
     cursor: 'pointer'
@@ -105,6 +110,7 @@ var genBaseStyle = function genBaseStyle(token) {
     display: 'flex',
     width: '100%',
     position: 'relative',
+    minWidth: 0,
     // https://github.com/ant-design/ant-design/issues/51669
     '&:after': {
       content: '"\\a0"',
@@ -138,15 +144,13 @@ var genBaseStyle = function genBaseStyle(token) {
       display: 'block'
     },
     '&:hover': {
-      color: token.colorTextTertiary
+      color: token.colorIcon
     }
-  }), "&:hover ".concat(componentCls, "-clear"), {
-    opacity: 1,
-    background: token.colorBgBase,
-    borderRadius: '50%'
-  }))), "".concat(componentCls, "-has-feedback"), _defineProperty({}, "".concat(componentCls, "-clear"), {
-    insetInlineEnd: token.calc(inputPaddingHorizontalBase).add(token.fontSize).add(token.paddingXS).equal()
-  }));
+  }), '@media(hover:none)', hoverShowClearStyle), '&:hover', hoverShowClearStyle))), "".concat(componentCls, "-status"), {
+    '&-error, &-warning, &-success, &-validating': _defineProperty({}, "&".concat(componentCls, "-has-feedback"), _defineProperty({}, "".concat(componentCls, "-clear"), {
+      insetInlineEnd: token.calc(inputPaddingHorizontalBase).add(token.fontSize).add(token.paddingXS).equal()
+    }))
+  });
 };
 // ============================== Styles ==============================
 var genSelectStyle = function genSelectStyle(token) {

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

@@ -16,11 +16,13 @@ function genSizeStyle(token, suffix) {
   return _defineProperty({}, "".concat(componentCls, "-single").concat(suffixCls), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     fontSize: token.fontSize,
     height: token.controlHeight
-  }, "".concat(componentCls, "-selector"), _objectSpread(_objectSpread({}, resetComponent(token, true)), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  }, "".concat(componentCls, "-selector"), _objectSpread(_objectSpread({}, resetComponent(token, true)), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     display: 'flex',
     borderRadius: borderRadius,
     flex: '1 1 auto'
-  }, "".concat(componentCls, "-selection-search"), {
+  }, "".concat(componentCls, "-selection-wrap:after"), {
+    lineHeight: unit(selectHeightWithoutBorder)
+  }), "".concat(componentCls, "-selection-search"), {
     position: 'absolute',
     inset: 0,
     width: '100%',
@@ -52,7 +54,8 @@ function genSizeStyle(token, suffix) {
     alignItems: 'center',
     padding: "0 ".concat(unit(inputPaddingHorizontalBase))
   }, "".concat(componentCls, "-selection-search-input"), {
-    height: selectHeightWithoutBorder
+    height: selectHeightWithoutBorder,
+    fontSize: token.fontSize
   }), '&:after', {
     lineHeight: unit(selectHeightWithoutBorder)
   }))), "&".concat(componentCls, "-customize-input"), _defineProperty({}, "".concat(componentCls, "-selector"), _defineProperty(_defineProperty({

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

@@ -129,7 +129,61 @@ var genBorderlessStyle = function genBorderlessStyle(token) {
     }))
   };
 };
+// =====================================================
+// ==                 Underlined                      ==
+// =====================================================
+var genBaseUnderlinedStyle = function genBaseUnderlinedStyle(token, options) {
+  var componentCls = token.componentCls,
+    antCls = token.antCls;
+  return _defineProperty(_defineProperty({}, "&:not(".concat(componentCls, "-customize-input) ").concat(componentCls, "-selector"), {
+    borderWidth: "0 0 ".concat(unit(token.lineWidth), " 0"),
+    borderStyle: "none none ".concat(token.lineType, " none"),
+    borderColor: options.borderColor,
+    background: token.selectorBg,
+    borderRadius: 0
+  }), "&: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,
+    outline: 0
+  }), "".concat(componentCls, "-prefix"), {
+    color: options.color
+  }));
+};
+var genUnderlinedStatusStyle = function genUnderlinedStatusStyle(token, options) {
+  return _defineProperty({}, "&".concat(token.componentCls, "-status-").concat(options.status), _objectSpread({}, genBaseUnderlinedStyle(token, options)));
+};
+var genUnderlinedStyle = function genUnderlinedStyle(token) {
+  return {
+    '&-underlined': _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, genBaseUnderlinedStyle(token, {
+      borderColor: token.colorBorder,
+      hoverBorderHover: token.hoverBorderColor,
+      activeBorderColor: token.activeBorderColor,
+      activeOutlineColor: token.activeOutlineColor,
+      color: token.colorText
+    })), genUnderlinedStatusStyle(token, {
+      status: 'error',
+      borderColor: token.colorError,
+      hoverBorderHover: token.colorErrorHover,
+      activeBorderColor: token.colorError,
+      activeOutlineColor: token.colorErrorOutline,
+      color: token.colorError
+    })), genUnderlinedStatusStyle(token, {
+      status: 'warning',
+      borderColor: token.colorWarning,
+      hoverBorderHover: token.colorWarningHover,
+      activeBorderColor: token.colorWarning,
+      activeOutlineColor: token.colorWarningOutline,
+      color: token.colorWarning
+    })), {}, _defineProperty(_defineProperty({}, "&".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)
+    }))
+  };
+};
 var genVariantsStyle = function genVariantsStyle(token) {
-  return _defineProperty({}, token.componentCls, _objectSpread(_objectSpread(_objectSpread({}, genOutlinedStyle(token)), genFilledStyle(token)), genBorderlessStyle(token)));
+  return _defineProperty({}, token.componentCls, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, genOutlinedStyle(token)), genFilledStyle(token)), genBorderlessStyle(token)), genUnderlinedStyle(token)));
 };
 export default genVariantsStyle;

package/lib/Antd5/skeleton/Paragraph.js

@@ -1,9 +1,3 @@
-function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
-function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(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; }
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import classNames from 'classnames';
@@ -24,8 +18,11 @@ var Paragraph = function Paragraph(props) {
   var prefixCls = props.prefixCls,
     className = props.className,
     style = props.style,
-    rows = props.rows;
-  var rowList = _toConsumableArray(new Array(rows)).map(function (_, index) {
+    _props$rows2 = props.rows,
+    rows = _props$rows2 === void 0 ? 0 : _props$rows2;
+  var rowList = Array.from({
+    length: rows
+  }).map(function (_, index) {
     return (
       // eslint-disable-next-line react/no-array-index-key
       _jsx("li", {

package/lib/Antd5/skeleton/Skeleton.js

@@ -13,7 +13,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 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';
+import { useComponentConfig } from '../config-provider/context';
 import SkeletonAvatar from './Avatar';
 import SkeletonButton from './Button';
 import Element from './Element';
@@ -84,10 +84,11 @@ var Skeleton = function Skeleton(props) {
     paragraph = _props$paragraph === void 0 ? true : _props$paragraph,
     active = props.active,
     round = props.round;
-  var _React$useContext = React.useContext(ConfigContext),
-    getPrefixCls = _React$useContext.getPrefixCls,
-    direction = _React$useContext.direction,
-    skeleton = _React$useContext.skeleton;
+  var _useComponentConfig = useComponentConfig('skeleton'),
+    getPrefixCls = _useComponentConfig.getPrefixCls,
+    direction = _useComponentConfig.direction,
+    contextClassName = _useComponentConfig.className,
+    contextStyle = _useComponentConfig.style;
   var prefixCls = getPrefixCls('skeleton', customizePrefixCls);
   var _useStyle = useStyle(prefixCls),
     _useStyle2 = _slicedToArray(_useStyle, 3),
@@ -133,10 +134,10 @@ var Skeleton = function Skeleton(props) {
         children: [$title, paragraphNode]
       });
     }
-    var cls = classNames(prefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-with-avatar"), hasAvatar), "".concat(prefixCls, "-active"), active), "".concat(prefixCls, "-rtl"), direction === 'rtl'), "".concat(prefixCls, "-round"), round), skeleton === null || skeleton === void 0 ? void 0 : skeleton.className, className, rootClassName, hashId, cssVarCls);
+    var cls = classNames(prefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-with-avatar"), hasAvatar), "".concat(prefixCls, "-active"), active), "".concat(prefixCls, "-rtl"), direction === 'rtl'), "".concat(prefixCls, "-round"), round), contextClassName, className, rootClassName, hashId, cssVarCls);
     return wrapCSSVar(_jsxs("div", {
       className: cls,
-      style: _objectSpread(_objectSpread({}, skeleton === null || skeleton === void 0 ? void 0 : skeleton.style), style),
+      style: _objectSpread(_objectSpread({}, contextStyle), style),
       children: [avatarNode, contentNode]
     }));
   }

package/lib/Antd5/slider/SliderTooltip.js

@@ -12,7 +12,8 @@ import { composeRef } from 'rc-util/lib/ref';
 import Tooltip from '../tooltip';
 var SliderTooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var open = props.open,
-    draggingDelete = props.draggingDelete;
+    draggingDelete = props.draggingDelete,
+    value = props.value;
   var innerRef = useRef(null);
   var mergedOpen = open && !draggingDelete;
   var rafRef = useRef(null);
@@ -34,7 +35,7 @@ var SliderTooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
       cancelKeepAlign();
     }
     return cancelKeepAlign;
-  }, [mergedOpen, props.title]);
+  }, [mergedOpen, props.title, value]);
   return _jsx(Tooltip, _objectSpread(_objectSpread({
     ref: composeRef(innerRef, ref)
   }, props), {}, {

package/lib/Antd5/slider/index.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", "range", "className", "rootClassName", "style", "disabled", "tooltipPrefixCls", "tipFormatter", "tooltipVisible", "getTooltipPopupContainer", "tooltipPlacement", "tooltip", "onChangeComplete"];
+var _excluded = ["prefixCls", "range", "className", "rootClassName", "style", "disabled", "tooltipPrefixCls", "tipFormatter", "tooltipVisible", "getTooltipPopupContainer", "tooltipPlacement", "tooltip", "onChangeComplete", "classNames", "styles"];
 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; }
@@ -20,12 +20,12 @@ import classNames from 'classnames';
 import RcSlider from 'rc-slider';
 import raf from 'rc-util/lib/raf';
 import { devUseWarning } from '../_util/warning';
-import { ConfigContext } from '../config-provider';
 import DisabledContext from '../config-provider/DisabledContext';
+import SliderInternalContext from './Context';
 import SliderTooltip from './SliderTooltip';
 import useStyle from './style';
-import SliderInternalContext from './Context';
 import useRafLock from './useRafLock';
+import { useComponentConfig } from '../config-provider/context';
 function getTipFormatter(tipFormatter, legacyTipFormatter) {
   if (tipFormatter || tipFormatter === null) {
     return tipFormatter;
@@ -52,19 +52,24 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _props$tooltip = props.tooltip,
     tooltip = _props$tooltip === void 0 ? {} : _props$tooltip,
     onChangeComplete = props.onChangeComplete,
+    sliderClassNames = props.classNames,
+    styles = props.styles,
     restProps = _objectWithoutProperties(props, _excluded);
   var vertical = props.vertical;
-  var _React$useContext = React.useContext(ConfigContext),
-    contextDirection = _React$useContext.direction,
-    slider = _React$useContext.slider,
-    getPrefixCls = _React$useContext.getPrefixCls,
-    getPopupContainer = _React$useContext.getPopupContainer;
+  var _useComponentConfig = useComponentConfig('slider'),
+    getPrefixCls = _useComponentConfig.getPrefixCls,
+    contextDirection = _useComponentConfig.direction,
+    contextClassName = _useComponentConfig.className,
+    contextStyle = _useComponentConfig.style,
+    contextClassNames = _useComponentConfig.classNames,
+    contextStyles = _useComponentConfig.styles,
+    getPopupContainer = _useComponentConfig.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 _React$useContext = React.useContext(SliderInternalContext),
+    contextHandleRender = _React$useContext.handleRender,
+    internalContextDirection = _React$useContext.direction;
   var mergedDirection = internalContextDirection || contextDirection;
   var isRTL = mergedDirection === 'rtl';
   // =============================== Open ===============================
@@ -111,7 +116,7 @@ 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"), isRTL), "".concat(prefixCls, "-lock"), dragging), hashId, cssVarCls);
+  var rootClassNames = classNames(className, contextClassName, contextClassNames.root, sliderClassNames === null || sliderClassNames === void 0 ? void 0 : sliderClassNames.root, rootClassName, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-rtl"), isRTL), "".concat(prefixCls, "-lock"), dragging), hashId, cssVarCls);
   // make reverse default on rtl direction
   if (isRTL && !restProps.vertical) {
     restProps.reverse = !restProps.reverse;
@@ -187,10 +192,13 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return /*#__PURE__*/_createElement(SliderTooltip, _objectSpread(_objectSpread({}, tooltipProps), {}, {
         prefixCls: getPrefixCls('tooltip', customizeTooltipPrefixCls !== null && customizeTooltipPrefixCls !== void 0 ? customizeTooltipPrefixCls : legacyTooltipPrefixCls),
         title: mergedTipFormatter ? mergedTipFormatter(info.value) : '',
+        value: info.value,
         open: open,
         placement: getTooltipPlacement(tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : legacyTooltipPlacement, vertical),
         key: index,
-        overlayClassName: "".concat(prefixCls, "-tooltip"),
+        classNames: {
+          root: "".concat(prefixCls, "-tooltip")
+        },
         getPopupContainer: getTooltipPopupContainer || legacyGetTooltipPopupContainer || getPopupContainer
       }), cloneNode);
     }
@@ -209,20 +217,38 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
       open: mergedTipFormatter !== null && activeOpen,
       placement: getTooltipPlacement(tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : legacyTooltipPlacement, vertical),
       key: "tooltip",
-      overlayClassName: "".concat(prefixCls, "-tooltip"),
+      classNames: {
+        root: "".concat(prefixCls, "-tooltip")
+      },
       getPopupContainer: getTooltipPopupContainer || legacyGetTooltipPopupContainer || getPopupContainer,
       draggingDelete: info.draggingDelete
     }), cloneNode);
   } : undefined;
   // ============================== Render ==============================
-  var mergedStyle = _objectSpread(_objectSpread({}, slider === null || slider === void 0 ? void 0 : slider.style), style);
+  var rootStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, contextStyles.root), contextStyle), styles === null || styles === void 0 ? void 0 : styles.root), style);
+  var mergedTracks = _objectSpread(_objectSpread({}, contextStyles.tracks), styles === null || styles === void 0 ? void 0 : styles.tracks);
+  var mergedTracksClassNames = classNames(contextClassNames.tracks, sliderClassNames === null || sliderClassNames === void 0 ? void 0 : sliderClassNames.tracks);
   return wrapCSSVar(
   // @ts-ignore
   _jsx(RcSlider, _objectSpread(_objectSpread({}, restProps), {}, {
+    classNames: _objectSpread({
+      handle: classNames(contextClassNames.handle, sliderClassNames === null || sliderClassNames === void 0 ? void 0 : sliderClassNames.handle),
+      rail: classNames(contextClassNames.rail, sliderClassNames === null || sliderClassNames === void 0 ? void 0 : sliderClassNames.rail),
+      track: classNames(contextClassNames.track, sliderClassNames === null || sliderClassNames === void 0 ? void 0 : sliderClassNames.track)
+    }, mergedTracksClassNames ? {
+      tracks: mergedTracksClassNames
+    } : {}),
+    styles: _objectSpread({
+      handle: _objectSpread(_objectSpread({}, contextStyles.handle), styles === null || styles === void 0 ? void 0 : styles.handle),
+      rail: _objectSpread(_objectSpread({}, contextStyles.rail), styles === null || styles === void 0 ? void 0 : styles.rail),
+      track: _objectSpread(_objectSpread({}, contextStyles.track), styles === null || styles === void 0 ? void 0 : styles.track)
+    }, Object.keys(mergedTracks).length ? {
+      tracks: mergedTracks
+    } : {}),
     step: restProps.step,
     range: range,
-    className: cls,
-    style: mergedStyle,
+    className: rootClassNames,
+    style: rootStyle,
     disabled: mergedDisabled,
     ref: ref,
     prefixCls: prefixCls,

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

@@ -5,7 +5,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 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 { unit } from '@ant-design/cssinjs';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 import { resetComponent } from '../../style';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 // =============================== Base ===============================
@@ -230,7 +230,7 @@ export var prepareComponentToken = function prepareComponentToken(token) {
   var handleLineWidth = token.lineWidth + increaseHandleWidth;
   var handleLineWidthHover = token.lineWidth + increaseHandleWidth * 1.5;
   var handleActiveColor = token.colorPrimary;
-  var handleActiveOutlineColor = new TinyColor(handleActiveColor).setAlpha(0.2).toRgbString();
+  var handleActiveOutlineColor = new FastColor(handleActiveColor).setA(0.2).toRgbString();
   return {
     controlSize: controlSize,
     railSize: 4,
@@ -246,7 +246,7 @@ export var prepareComponentToken = function prepareComponentToken(token) {
     handleColor: token.colorPrimaryBorder,
     handleActiveColor: handleActiveColor,
     handleActiveOutlineColor: handleActiveOutlineColor,
-    handleColorDisabled: new TinyColor(token.colorTextDisabled).onBackground(token.colorBgContainer).toHexShortString(),
+    handleColorDisabled: new FastColor(token.colorTextDisabled).onBackground(token.colorBgContainer).toHexString(),
     dotBorderColor: token.colorBorderSecondary,
     dotActiveBorderColor: token.colorPrimaryBorder,
     trackBgDisabled: token.colorBgContainerDisabled

package/lib/Antd5/slider/useRafLock.js

@@ -11,7 +11,7 @@ export default function useRafLock() {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     state = _React$useState2[0],
     setState = _React$useState2[1];
-  var rafRef = React.useRef();
+  var rafRef = React.useRef(null);
   var cleanup = function cleanup() {
     raf.cancel(rafRef.current);
   };

package/lib/Antd5/space/Compact.js

@@ -40,18 +40,20 @@ export var useCompactItemContext = function useCompactItemContext(prefixCls, dir
     compactItemClassnames: compactItemClassnames
   };
 };
-export var NoCompactStyle = function NoCompactStyle(_ref) {
-  var children = _ref.children;
+export var NoCompactStyle = function NoCompactStyle(props) {
+  var children = props.children;
   return _jsx(SpaceCompactItemContext.Provider, {
     value: null,
     children: children
   });
 };
-var CompactItem = function CompactItem(_ref2) {
-  var children = _ref2.children,
-    otherProps = _objectWithoutProperties(_ref2, _excluded);
+var CompactItem = function CompactItem(props) {
+  var children = props.children,
+    others = _objectWithoutProperties(props, _excluded);
   return _jsx(SpaceCompactItemContext.Provider, {
-    value: otherProps,
+    value: React.useMemo(function () {
+      return others;
+    }, [others]),
     children: children
   });
 };