@chaoswise/ui 3.0.23 → 3.1.1

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

@@ -36,17 +36,19 @@ export var genBaseStyle = function genBaseStyle(token) {
     fontHeight = token.fontHeight,
     fontHeightLG = token.fontHeightLG;
   var borderBase = "".concat(unit(lineWidth), " ").concat(lineType, " ").concat(colorBorder);
-  return _defineProperty({}, componentCls, _objectSpread(_objectSpread({}, resetComponent(token)), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  return _defineProperty({}, componentCls, _objectSpread(_objectSpread({}, resetComponent(token)), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     backgroundColor: headerBg,
     border: borderBase,
-    borderRadius: collapsePanelBorderRadius
-  }, "&-rtl", {
-    direction: 'rtl'
-  }), "& > ".concat(componentCls, "-item"), _defineProperty(_defineProperty(_defineProperty({
-    borderBottom: borderBase
-  }, "&:last-child", _defineProperty({}, "\n            &,\n            & > ".concat(componentCls, "-header"), {
-    borderRadius: "0 0 ".concat(unit(collapsePanelBorderRadius), " ").concat(unit(collapsePanelBorderRadius))
-  })), "> ".concat(componentCls, "-header"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    borderRadius: collapsePanelBorderRadius,
+    '&-rtl': {
+      direction: 'rtl'
+    }
+  }, "& > ".concat(componentCls, "-item"), _defineProperty(_defineProperty(_defineProperty({
+    borderBottom: borderBase,
+    '&:last-child': _defineProperty({}, "\n            &,\n            & > ".concat(componentCls, "-header"), {
+      borderRadius: "0 0 ".concat(unit(collapsePanelBorderRadius), " ").concat(unit(collapsePanelBorderRadius))
+    })
+  }, "> ".concat(componentCls, "-header"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     position: 'relative',
     // Compatible with old version of antd, should remove in next version
     display: 'flex',
@@ -76,7 +78,12 @@ export var genBaseStyle = function genBaseStyle(token) {
     }
   })), "".concat(componentCls, "-header-text"), {
     marginInlineEnd: 'auto'
-  })), "".concat(componentCls, "-icon-collapsible-only"), _defineProperty({
+  })), "".concat(componentCls, "-collapsible-header"), _defineProperty({
+    cursor: 'default'
+  }, "".concat(componentCls, "-header-text"), {
+    flex: 'none',
+    cursor: 'pointer'
+  })), "".concat(componentCls, "-collapsible-icon"), _defineProperty({
     cursor: 'unset'
   }, "".concat(componentCls, "-expand-icon"), {
     cursor: 'pointer'
@@ -86,9 +93,9 @@ export var genBaseStyle = function genBaseStyle(token) {
     borderTop: borderBase
   }, "& > ".concat(componentCls, "-content-box"), {
     padding: contentPadding
-  }), "&-hidden", {
+  }), '&-hidden', {
     display: 'none'
-  })), "&-small", _defineProperty({}, "> ".concat(componentCls, "-item"), _defineProperty(_defineProperty({}, "> ".concat(componentCls, "-header"), _defineProperty({
+  })), '&-small', _defineProperty({}, "> ".concat(componentCls, "-item"), _defineProperty(_defineProperty({}, "> ".concat(componentCls, "-header"), _defineProperty({
     padding: collapseHeaderPaddingSM,
     paddingInlineStart: paddingXS
   }, "> ".concat(componentCls, "-expand-icon"), {
@@ -96,7 +103,7 @@ export var genBaseStyle = function genBaseStyle(token) {
     marginInlineStart: token.calc(paddingSM).sub(paddingXS).equal()
   })), "> ".concat(componentCls, "-content > ").concat(componentCls, "-content-box"), {
     padding: paddingSM
-  }))), "&-large", _defineProperty({}, "> ".concat(componentCls, "-item"), _defineProperty(_defineProperty({
+  }))), '&-large', _defineProperty({}, "> ".concat(componentCls, "-item"), _defineProperty(_defineProperty({
     fontSize: fontSizeLG,
     lineHeight: lineHeightLG
   }, "> ".concat(componentCls, "-header"), _defineProperty({

package/lib/Antd5/color-picker/ColorPicker.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 = ["value", "defaultValue", "format", "defaultFormat", "allowClear", "presets", "children", "trigger", "open", "disabled", "placement", "arrow", "panelRender", "showText", "style", "className", "size", "rootClassName", "prefixCls", "styles", "disabledAlpha", "onFormatChange", "onChange", "onClear", "onOpenChange", "onChangeComplete", "getPopupContainer", "autoAdjustOverflow", "destroyTooltipOnHide"];
+var _excluded = ["mode", "value", "defaultValue", "format", "defaultFormat", "allowClear", "presets", "children", "trigger", "open", "disabled", "placement", "arrow", "panelRender", "showText", "style", "className", "size", "rootClassName", "prefixCls", "styles", "disabledAlpha", "onFormatChange", "onChange", "onClear", "onOpenChange", "onChangeComplete", "getPopupContainer", "autoAdjustOverflow", "destroyTooltipOnHide", "disabledFormat"];
 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,9 +14,10 @@ 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 } from "react/jsx-runtime";
-import React, { useContext, useMemo, useRef } from 'react';
+import React, { useContext, useMemo } from 'react';
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import ContextIsolator from '../_util/ContextIsolator';
 import genPurePanel from '../_util/PurePanel';
 import { getStatusClassNames } from '../_util/statusUtils';
 import { devUseWarning } from '../_util/warning';
@@ -24,15 +25,18 @@ import { ConfigContext } from '../config-provider/context';
 import DisabledContext from '../config-provider/DisabledContext';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useSize from '../config-provider/hooks/useSize';
-import { FormItemInputContext, NoFormStyle } from '../form/context';
+import { FormItemInputContext } from '../form/context';
 import Popover from '../popover';
+import { useCompactItemContext } from '../space/Compact';
+import { AggregationColor } from './color';
 import ColorPickerPanel from './ColorPickerPanel';
 import ColorTrigger from './components/ColorTrigger';
-import useColorState from './hooks/useColorState';
+import useModeColor from './hooks/useModeColor';
 import useStyle from './style';
-import { genAlphaColor, generateColor, getAlphaColor } from './util';
+import { genAlphaColor, generateColor, getColorAlpha } from './util';
 var ColorPicker = function ColorPicker(props) {
-  var value = props.value,
+  var mode = props.mode,
+    value = props.value,
     defaultValue = props.defaultValue,
     format = props.format,
     defaultFormat = props.defaultFormat,
@@ -67,6 +71,7 @@ var ColorPicker = function ColorPicker(props) {
     _props$autoAdjustOver = props.autoAdjustOverflow,
     autoAdjustOverflow = _props$autoAdjustOver === void 0 ? true : _props$autoAdjustOver,
     destroyTooltipOnHide = props.destroyTooltipOnHide,
+    disabledFormat = props.disabledFormat,
     rest = _objectWithoutProperties(props, _excluded);
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
@@ -74,14 +79,6 @@ var ColorPicker = function ColorPicker(props) {
     colorPicker = _useContext.colorPicker;
   var contextDisabled = useContext(DisabledContext);
   var mergedDisabled = disabled !== null && disabled !== void 0 ? disabled : contextDisabled;
-  var _useColorState = useColorState('', {
-      value: value,
-      defaultValue: defaultValue
-    }),
-    _useColorState2 = _slicedToArray(_useColorState, 3),
-    colorValue = _useColorState2[0],
-    setColorValue = _useColorState2[1],
-    prevValue = _useColorState2[2];
   var _useMergedState = useMergedState(false, {
       value: open,
       postState: function postState(openData) {
@@ -101,14 +98,91 @@ var ColorPicker = function ColorPicker(props) {
     formatValue = _useMergedState4[0],
     setFormatValue = _useMergedState4[1];
   var prefixCls = getPrefixCls('color-picker', customizePrefixCls);
+  // ================== Value & Mode =================
+  var _useModeColor = useModeColor(defaultValue, value, mode),
+    _useModeColor2 = _slicedToArray(_useModeColor, 5),
+    mergedColor = _useModeColor2[0],
+    setColor = _useModeColor2[1],
+    modeState = _useModeColor2[2],
+    setModeState = _useModeColor2[3],
+    modeOptions = _useModeColor2[4];
   var isAlphaColor = useMemo(function () {
-    return getAlphaColor(colorValue) < 100;
-  }, [colorValue]);
-  // ===================== Form Status =====================
+    return getColorAlpha(mergedColor) < 100;
+  }, [mergedColor]);
+  // ==================== Change =====================
+  // To enhance user experience, we cache the gradient color when switch from gradient to single
+  // If user not modify single color, we will use the cached gradient color.
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    cachedGradientColor = _React$useState2[0],
+    setCachedGradientColor = _React$useState2[1];
+  var onInternalChangeComplete = function onInternalChangeComplete(color) {
+    if (onChangeComplete) {
+      var changeColor = generateColor(color);
+      // ignore alpha color
+      if (disabledAlpha && isAlphaColor) {
+        changeColor = genAlphaColor(color);
+      }
+      onChangeComplete(changeColor);
+    }
+  };
+  var onInternalChange = function onInternalChange(data, changeFromPickerDrag) {
+    var color = generateColor(data);
+    // ignore alpha color
+    if (disabledAlpha && isAlphaColor) {
+      color = genAlphaColor(color);
+    }
+    setColor(color);
+    setCachedGradientColor(null);
+    // Trigger change event
+    if (onChange) {
+      onChange(color, color.toCssString());
+    }
+    // Only for drag-and-drop color picking
+    if (!changeFromPickerDrag) {
+      onInternalChangeComplete(color);
+    }
+  };
+  // =================== Gradient ====================
+  var _React$useState3 = React.useState(0),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    activeIndex = _React$useState4[0],
+    setActiveIndex = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    gradientDragging = _React$useState6[0],
+    setGradientDragging = _React$useState6[1];
+  // Mode change should also trigger color change
+  var onInternalModeChange = function onInternalModeChange(newMode) {
+    setModeState(newMode);
+    if (newMode === 'single' && mergedColor.isGradient()) {
+      setActiveIndex(0);
+      onInternalChange(new AggregationColor(mergedColor.getColors()[0].color));
+      // Should after `onInternalChange` since it will clear the cached color
+      setCachedGradientColor(mergedColor);
+    } else if (newMode === 'gradient' && !mergedColor.isGradient()) {
+      var baseColor = isAlphaColor ? genAlphaColor(mergedColor) : mergedColor;
+      onInternalChange(new AggregationColor(cachedGradientColor || [{
+        percent: 0,
+        color: baseColor
+      }, {
+        percent: 100,
+        color: baseColor
+      }]));
+    }
+  };
+  // ================== Form Status ==================
   var _React$useContext = React.useContext(FormItemInputContext),
     contextStatus = _React$useContext.status;
+  // ==================== Compact ====================
+  var _useCompactItemContex = useCompactItemContext(prefixCls, direction),
+    compactSize = _useCompactItemContex.compactSize,
+    compactItemClassnames = _useCompactItemContex.compactItemClassnames;
   // ===================== Style =====================
-  var mergedSize = useSize(customizeSize);
+  var mergedSize = useSize(function (ctx) {
+    var _ref;
+    return (_ref = customizeSize !== null && customizeSize !== void 0 ? customizeSize : compactSize) !== null && _ref !== void 0 ? _ref : ctx;
+  });
   var rootCls = useCSSVarCls(prefixCls);
   var _useStyle = useStyle(prefixCls, rootCls),
     _useStyle2 = _slicedToArray(_useStyle, 3),
@@ -117,50 +191,13 @@ var ColorPicker = function ColorPicker(props) {
     cssVarCls = _useStyle2[2];
   var rtlCls = _defineProperty({}, "".concat(prefixCls, "-rtl"), direction);
   var mergedRootCls = classNames(rootClassName, cssVarCls, rootCls, rtlCls);
-  var mergedCls = classNames(getStatusClassNames(prefixCls, contextStatus), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-sm"), mergedSize === 'small'), "".concat(prefixCls, "-lg"), mergedSize === 'large'), colorPicker === null || colorPicker === void 0 ? void 0 : colorPicker.className, mergedRootCls, className, hashId);
+  var mergedCls = classNames(getStatusClassNames(prefixCls, contextStatus), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-sm"), mergedSize === 'small'), "".concat(prefixCls, "-lg"), mergedSize === 'large'), compactItemClassnames, colorPicker === null || colorPicker === void 0 ? void 0 : colorPicker.className, mergedRootCls, className, hashId);
   var mergedPopupCls = classNames(prefixCls, mergedRootCls);
-  var popupAllowCloseRef = useRef(true);
   // ===================== Warning ======================
   if (process.env.NODE_ENV !== 'production') {
     var warning = devUseWarning('ColorPicker');
     warning(!(disabledAlpha && isAlphaColor), 'usage', '`disabledAlpha` will make the alpha to be 100% when use alpha color.');
   }
-  var handleChange = function handleChange(data, type, pickColor) {
-    var _prevValue$current;
-    var color = generateColor(data);
-    // If color is cleared, reset alpha to 100
-    var isNull = value === null || !value && defaultValue === null;
-    if ((_prevValue$current = prevValue.current) !== null && _prevValue$current !== void 0 && _prevValue$current.cleared || isNull) {
-      // ignore alpha slider
-      if (getAlphaColor(colorValue) === 0 && type !== 'alpha') {
-        color = genAlphaColor(color);
-      }
-    }
-    // ignore alpha color
-    if (disabledAlpha && isAlphaColor) {
-      color = genAlphaColor(color);
-    }
-    // Only for drag-and-drop color picking
-    if (pickColor) {
-      popupAllowCloseRef.current = false;
-    } else {
-      onChangeComplete === null || onChangeComplete === void 0 || onChangeComplete(color);
-    }
-    setColorValue(color);
-    onChange === null || onChange === void 0 || onChange(color, color.toHexString());
-  };
-  var handleClear = function handleClear() {
-    onClear === null || onClear === void 0 || onClear();
-  };
-  var handleChangeComplete = function handleChangeComplete(color) {
-    popupAllowCloseRef.current = true;
-    var changeColor = generateColor(color);
-    // ignore alpha color
-    if (disabledAlpha && isAlphaColor) {
-      changeColor = genAlphaColor(color);
-    }
-    onChangeComplete === null || onChangeComplete === void 0 || onChangeComplete(changeColor);
-  };
   var popoverProps = {
     open: popupOpen,
     trigger: trigger,
@@ -171,40 +208,45 @@ var ColorPicker = function ColorPicker(props) {
     autoAdjustOverflow: autoAdjustOverflow,
     destroyTooltipOnHide: destroyTooltipOnHide
   };
-  var colorBaseProps = {
-    prefixCls: prefixCls,
-    color: colorValue,
-    allowClear: allowClear,
-    disabled: mergedDisabled,
-    disabledAlpha: disabledAlpha,
-    presets: presets,
-    panelRender: panelRender,
-    format: formatValue,
-    onFormatChange: setFormatValue,
-    onChangeComplete: handleChangeComplete
-  };
   var mergedStyle = _objectSpread(_objectSpread({}, colorPicker === null || colorPicker === void 0 ? void 0 : colorPicker.style), style);
   // ============================ zIndex ============================
   return wrapCSSVar(_jsx(Popover, _objectSpread(_objectSpread({
     style: styles === null || styles === void 0 ? void 0 : styles.popup,
     overlayInnerStyle: styles === null || styles === void 0 ? void 0 : styles.popupOverlayInner,
     onOpenChange: function onOpenChange(visible) {
-      if (popupAllowCloseRef.current && !mergedDisabled) {
+      if (!visible || !mergedDisabled) {
         setPopupOpen(visible);
       }
     },
-    content: _jsx(NoFormStyle, {
-      override: true,
-      status: true,
-      children: _jsx(ColorPickerPanel, _objectSpread(_objectSpread({}, colorBaseProps), {}, {
-        onChange: handleChange,
-        onChangeComplete: handleChangeComplete,
-        onClear: handleClear
-      }))
+    content: _jsx(ContextIsolator, {
+      form: true,
+      children: _jsx(ColorPickerPanel, {
+        mode: modeState,
+        onModeChange: onInternalModeChange,
+        modeOptions: modeOptions,
+        prefixCls: prefixCls,
+        value: mergedColor,
+        allowClear: allowClear,
+        disabled: mergedDisabled,
+        disabledAlpha: disabledAlpha,
+        presets: presets,
+        panelRender: panelRender,
+        format: formatValue,
+        onFormatChange: setFormatValue,
+        onChange: onInternalChange,
+        onChangeComplete: onInternalChangeComplete,
+        onClear: onClear,
+        activeIndex: activeIndex,
+        onActive: setActiveIndex,
+        gradientDragging: gradientDragging,
+        onGradientDragging: setGradientDragging,
+        disabledFormat: disabledFormat
+      })
     }),
     overlayClassName: mergedPopupCls
   }, popoverProps), {}, {
     children: children || _jsx(ColorTrigger, _objectSpread(_objectSpread({
+      activeIndex: popupOpen ? activeIndex : -1,
       open: popupOpen,
       className: mergedCls,
       style: mergedStyle,
@@ -213,7 +255,7 @@ var ColorPicker = function ColorPicker(props) {
       showText: showText,
       format: formatValue
     }, rest), {}, {
-      color: colorValue
+      color: mergedColor
     }))
   })));
 };

package/lib/Antd5/color-picker/ColorPickerPanel.js

@@ -1,51 +1,69 @@
-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", "presets", "panelRender", "color", "onChange", "onClear"];
-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; }
-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); }
-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, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import Divider from '../divider';
 import PanelPicker from './components/PanelPicker';
 import PanelPresets from './components/PanelPresets';
-import { PanelPickerProvider, PanelPresetsProvider } from './context';
+import { PanelPickerContext, PanelPresetsContext } from './context';
 var ColorPickerPanel = function ColorPickerPanel(props) {
   var prefixCls = props.prefixCls,
     presets = props.presets,
     panelRender = props.panelRender,
-    color = props.color,
+    value = props.value,
     onChange = props.onChange,
     onClear = props.onClear,
-    injectProps = _objectWithoutProperties(props, _excluded);
+    allowClear = props.allowClear,
+    disabledAlpha = props.disabledAlpha,
+    mode = props.mode,
+    onModeChange = props.onModeChange,
+    modeOptions = props.modeOptions,
+    onChangeComplete = props.onChangeComplete,
+    activeIndex = props.activeIndex,
+    onActive = props.onActive,
+    format = props.format,
+    onFormatChange = props.onFormatChange,
+    gradientDragging = props.gradientDragging,
+    onGradientDragging = props.onGradientDragging,
+    disabledFormat = props.disabledFormat;
   var colorPickerPanelPrefixCls = "".concat(prefixCls, "-inner");
-  // ==== Inject props ===
-  var panelPickerProps = _objectSpread({
-    prefixCls: prefixCls,
-    value: color,
-    onChange: onChange,
-    onClear: onClear
-  }, injectProps);
-  var panelPresetsProps = React.useMemo(function () {
+  // ===================== Context ======================
+  var panelContext = React.useMemo(function () {
     return {
       prefixCls: prefixCls,
-      value: color,
+      value: value,
+      onChange: onChange,
+      onClear: onClear,
+      allowClear: allowClear,
+      disabledAlpha: disabledAlpha,
+      mode: mode,
+      onModeChange: onModeChange,
+      modeOptions: modeOptions,
+      onChangeComplete: onChangeComplete,
+      activeIndex: activeIndex,
+      onActive: onActive,
+      format: format,
+      onFormatChange: onFormatChange,
+      gradientDragging: gradientDragging,
+      onGradientDragging: onGradientDragging,
+      disabledFormat: disabledFormat
+    };
+  }, [prefixCls, value, onChange, onClear, allowClear, disabledAlpha, mode, onModeChange, modeOptions, onChangeComplete, activeIndex, onActive, format, onFormatChange, gradientDragging, onGradientDragging, disabledFormat]);
+  var presetContext = React.useMemo(function () {
+    return {
+      prefixCls: prefixCls,
+      value: value,
       presets: presets,
       onChange: onChange
     };
-  }, [prefixCls, color, presets, onChange]);
+  }, [prefixCls, value, presets, onChange]);
   // ====================== Render ======================
   var innerPanel = _jsxs("div", {
     className: "".concat(colorPickerPanelPrefixCls, "-content"),
     children: [_jsx(PanelPicker, {}), Array.isArray(presets) && _jsx(Divider, {}), _jsx(PanelPresets, {})]
   });
-  return _jsx(PanelPickerProvider, {
-    value: panelPickerProps,
-    children: _jsx(PanelPresetsProvider, {
-      value: panelPresetsProps,
+  return _jsx(PanelPickerContext.Provider, {
+    value: panelContext,
+    children: _jsx(PanelPresetsContext.Provider, {
+      value: presetContext,
       children: _jsx("div", {
         className: colorPickerPanelPrefixCls,
         children: typeof panelRender === 'function' ? panelRender(innerPanel, {

package/lib/Antd5/color-picker/color.js

@@ -6,14 +6,14 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 { Color as RcColor } from '@rc-component/color-picker';
 export var toHexFormat = function toHexFormat(value, alpha) {
-  return (value === null || value === void 0 ? void 0 : value.replace(/[^\w/]/gi, '').slice(0, alpha ? 8 : 6)) || '';
+  return (value === null || value === void 0 ? void 0 : value.replace(/[^\w/]/g, '').slice(0, alpha ? 8 : 6)) || '';
 };
 export var getHex = function getHex(value, alpha) {
   return value ? toHexFormat(value, alpha) : '';
 };
-export var ColorFactory = /*#__PURE__*/function () {
-  function ColorFactory(color) {
-    _classCallCheck(this, ColorFactory);
+export var AggregationColor = /*#__PURE__*/function () {
+  function AggregationColor(color) {
+    _classCallCheck(this, AggregationColor);
     /** Original Color object */
     Object.defineProperty(this, "metaColor", {
       enumerable: true,
@@ -21,19 +21,51 @@ export var ColorFactory = /*#__PURE__*/function () {
       writable: true,
       value: void 0
     });
+    Object.defineProperty(this, "colors", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: void 0
+    });
     Object.defineProperty(this, "cleared", {
       enumerable: true,
       configurable: true,
       writable: true,
       value: false
     });
-    this.metaColor = new RcColor(color);
-    if (!color) {
-      this.metaColor.setAlpha(0);
+    // Clone from another AggregationColor
+    if (color instanceof AggregationColor) {
+      var _color$colors;
+      this.metaColor = color.metaColor.clone();
+      this.colors = (_color$colors = color.colors) === null || _color$colors === void 0 ? void 0 : _color$colors.map(function (info) {
+        return {
+          color: new AggregationColor(info.color),
+          percent: info.percent
+        };
+      });
+      this.cleared = color.cleared;
+      return;
+    }
+    var isArray = Array.isArray(color);
+    if (isArray && color.length) {
+      this.colors = color.map(function (_ref) {
+        var c = _ref.color,
+          percent = _ref.percent;
+        return {
+          color: new AggregationColor(c),
+          percent: percent
+        };
+      });
+      this.metaColor = new RcColor(this.colors[0].color.metaColor);
+    } else {
+      this.metaColor = new RcColor(isArray ? '' : color);
+    }
+    if (!color || isArray && !this.colors) {
+      this.metaColor = this.metaColor.setA(0);
       this.cleared = true;
     }
   }
-  return _createClass(ColorFactory, [{
+  return _createClass(AggregationColor, [{
     key: "toHsb",
     value: function toHsb() {
       return this.metaColor.toHsb();
@@ -46,12 +78,12 @@ export var ColorFactory = /*#__PURE__*/function () {
   }, {
     key: "toHex",
     value: function toHex() {
-      return getHex(this.toHexString(), this.metaColor.getAlpha() < 1);
+      return getHex(this.toHexString(), this.metaColor.a < 1);
     }
   }, {
     key: "toHexString",
     value: function toHexString() {
-      return this.metaColor.getAlpha() === 1 ? this.metaColor.toHexString() : this.metaColor.toHex8String();
+      return this.metaColor.toHexString();
     }
   }, {
     key: "toRgb",
@@ -63,5 +95,45 @@ export var ColorFactory = /*#__PURE__*/function () {
     value: function toRgbString() {
       return this.metaColor.toRgbString();
     }
+  }, {
+    key: "isGradient",
+    value: function isGradient() {
+      return !!this.colors && !this.cleared;
+    }
+  }, {
+    key: "getColors",
+    value: function getColors() {
+      return this.colors || [{
+        color: this,
+        percent: 0
+      }];
+    }
+  }, {
+    key: "toCssString",
+    value: function toCssString() {
+      var colors = this.colors;
+      // CSS line-gradient
+      if (colors) {
+        var colorsStr = colors.map(function (c) {
+          return "".concat(c.color.toRgbString(), " ").concat(c.percent, "%");
+        }).join(', ');
+        return "linear-gradient(90deg, ".concat(colorsStr, ")");
+      }
+      return this.metaColor.toRgbString();
+    }
+  }, {
+    key: "equals",
+    value: function equals(color) {
+      if (!color || this.isGradient() !== color.isGradient()) {
+        return false;
+      }
+      if (!this.isGradient()) {
+        return this.toHexString() === color.toHexString();
+      }
+      return this.colors.length === color.colors.length && this.colors.every(function (c, i) {
+        var target = color.colors[i];
+        return c.percent === target.percent && c.color.equals(target.color);
+      });
+    }
   }]);
 }();

package/lib/Antd5/color-picker/components/ColorAlphaInput.js

@@ -6,7 +6,7 @@ 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 React, { useEffect, useState } from 'react';
-import { generateColor, getAlphaColor } from '../util';
+import { generateColor, getColorAlpha } from '../util';
 import ColorSteppers from './ColorSteppers';
 var ColorAlphaInput = function ColorAlphaInput(_ref) {
   var prefixCls = _ref.prefixCls,
@@ -33,7 +33,7 @@ var ColorAlphaInput = function ColorAlphaInput(_ref) {
     onChange === null || onChange === void 0 || onChange(genColor);
   };
   return _jsx(ColorSteppers, {
-    value: getAlphaColor(alphaValue),
+    value: getColorAlpha(alphaValue),
     prefixCls: prefixCls,
     formatter: function formatter(step) {
       return "".concat(step, "%");

package/lib/Antd5/color-picker/components/ColorClear.js

@@ -6,12 +6,12 @@ var ColorClear = function ColorClear(_ref) {
     value = _ref.value,
     onChange = _ref.onChange;
   var handleClick = function handleClick() {
-    if (value && !value.cleared) {
+    if (onChange && value && !value.cleared) {
       var hsba = value.toHsb();
       hsba.a = 0;
       var genColor = generateColor(hsba);
       genColor.cleared = true;
-      onChange === null || onChange === void 0 || onChange(genColor);
+      onChange(genColor);
     }
   };
   return _jsx("div", {

package/lib/Antd5/color-picker/components/ColorHexInput.js

@@ -18,15 +18,16 @@ var ColorHexInput = function ColorHexInput(_ref) {
     value = _ref.value,
     onChange = _ref.onChange;
   var colorHexInputPrefixCls = "".concat(prefixCls, "-hex-input");
-  var _useState = useState(value === null || value === void 0 ? void 0 : value.toHex()),
+  var _useState = useState(function () {
+      return value ? toHexFormat(value.toHexString()) : undefined;
+    }),
     _useState2 = _slicedToArray(_useState, 2),
     hexValue = _useState2[0],
     setHexValue = _useState2[1];
   // Update step value
   useEffect(function () {
-    var hex = value === null || value === void 0 ? void 0 : value.toHex();
-    if (isHexString(hex) && value) {
-      setHexValue(toHexFormat(hex));
+    if (value) {
+      setHexValue(toHexFormat(value.toHexString()));
     }
   }, [value]);
   var handleHexChange = function handleHexChange(e) {