@chaoswise/ui 3.0.22 → 3.1.0

package/lib/Antd5/carousel/index.js

@@ -20,14 +20,15 @@ import SlickCarousel from '@ant-design/react-slick';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider';
 import useStyle from './style';
-function ArrowButton(_ref) {
+var dotsClass = 'slick-dots';
+var ArrowButton = function ArrowButton(_ref) {
   var currentSlide = _ref.currentSlide,
     slideCount = _ref.slideCount,
     rest = _objectWithoutProperties(_ref, _excluded);
   return _jsx("button", _objectSpread({
     type: "button"
   }, rest));
-}
+};
 var Carousel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$dots = props.dots,
     dots = _props$dots === void 0 ? true : _props$dots,
@@ -88,7 +89,6 @@ var Carousel = /*#__PURE__*/React.forwardRef(function (props, ref) {
     newProps.fade = true;
   }
   var prefixCls = getPrefixCls('carousel', newProps.prefixCls);
-  var dotsClass = 'slick-dots';
   var enableDots = !!dots;
   var dsClass = classNames(dotsClass, "".concat(dotsClass, "-").concat(dotPosition), typeof dots === 'boolean' ? false : dots === null || dots === void 0 ? void 0 : dots.className);
   var _useStyle = useStyle(prefixCls),

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

@@ -86,7 +86,7 @@ var genArrowsStyle = function genArrowsStyle(token) {
     motionDurationSlow = token.motionDurationSlow,
     arrowSize = token.arrowSize,
     arrowOffset = token.arrowOffset;
-  var arrowLength = token.calc(arrowSize).div(1.414).equal();
+  var arrowLength = token.calc(arrowSize).div(Math.SQRT2).equal();
   return [_defineProperty({}, componentCls, {
     // Arrows
     '.slick-prev, .slick-next': {

package/lib/Antd5/cascader/Panel.js

@@ -15,6 +15,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Panel } from 'rc-cascader';
 import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
+import DisabledContext from '../config-provider/DisabledContext';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useBase from './hooks/useBase';
 import useCheckable from './hooks/useCheckable';
@@ -28,7 +29,10 @@ function CascaderPanel(props) {
     rootClassName = props.rootClassName,
     notFoundContent = props.notFoundContent,
     direction = props.direction,
-    expandIcon = props.expandIcon;
+    expandIcon = props.expandIcon,
+    customDisabled = props.disabled;
+  var disabled = React.useContext(DisabledContext);
+  var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
   var _useBase = useBase(customizePrefixCls, direction),
     _useBase2 = _slicedToArray(_useBase, 4),
     prefixCls = _useBase2[0],
@@ -62,7 +66,8 @@ function CascaderPanel(props) {
     notFoundContent: mergedNotFoundContent,
     direction: mergedDirection,
     expandIcon: mergedExpandIcon,
-    loadingIcon: loadingIcon
+    loadingIcon: loadingIcon,
+    disabled: mergedDisabled
   })));
 }
 export default CascaderPanel;

package/lib/Antd5/cascader/hooks/useBase.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ConfigContext } from '../../config-provider';
-export default function useBase(customizePrefixCls, direction) {
+function useBase(customizePrefixCls, direction) {
   var _React$useContext = React.useContext(ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     rootDirection = _React$useContext.direction,
@@ -9,4 +9,5 @@ export default function useBase(customizePrefixCls, direction) {
   var prefixCls = getPrefixCls('select', customizePrefixCls);
   var cascaderPrefixCls = getPrefixCls('cascader', customizePrefixCls);
   return [prefixCls, cascaderPrefixCls, mergedDirection, renderEmpty];
-}
+}
+export default useBase;

package/lib/Antd5/cascader/hooks/useColumnIcons.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import LeftOutlined from '@ant-design/icons/LeftOutlined';
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import RightOutlined from '@ant-design/icons/RightOutlined';
-export default function useColumnIcons(prefixCls, rtl, expandIcon) {
+var useColumnIcons = function useColumnIcons(prefixCls, rtl, expandIcon) {
   var mergedExpandIcon = expandIcon;
   if (!expandIcon) {
     mergedExpandIcon = rtl ? _jsx(LeftOutlined, {}) : _jsx(RightOutlined, {});
@@ -14,5 +14,8 @@ export default function useColumnIcons(prefixCls, rtl, expandIcon) {
       spin: true
     })
   });
-  return [mergedExpandIcon, loadingIcon];
-}
+  return React.useMemo(function () {
+    return [mergedExpandIcon, loadingIcon];
+  }, [mergedExpandIcon]);
+};
+export default useColumnIcons;

package/lib/Antd5/cascader/index.js

@@ -156,7 +156,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useCompactItemContex = useCompactItemContext(prefixCls, direction),
     compactSize = _useCompactItemContex.compactSize,
     compactItemClassnames = _useCompactItemContex.compactItemClassnames;
-  var _useVariant = useVariant(customVariant, bordered),
+  var _useVariant = useVariant('cascader', customVariant, bordered),
     _useVariant2 = _slicedToArray(_useVariant, 2),
     variant = _useVariant2[0],
     enableVariantCls = _useVariant2[1];

package/lib/Antd5/cascader/style/columns.js

@@ -69,10 +69,12 @@ var getColumnsStyle = function getColumnsStyle(token) {
         }, iconCls, {
           color: token.colorTextDisabled
         })
-      }, "&-active:not(".concat(cascaderMenuItemCls, "-disabled)"), _defineProperty({}, "&, &:hover", {
-        fontWeight: token.optionSelectedFontWeight,
-        backgroundColor: token.optionSelectedBg
-      })), '&-content', {
+      }, "&-active:not(".concat(cascaderMenuItemCls, "-disabled)"), {
+        '&, &:hover': {
+          fontWeight: token.optionSelectedFontWeight,
+          backgroundColor: token.optionSelectedBg
+        }
+      }), '&-content', {
         flex: 'auto'
       }), iconCls, {
         marginInlineStart: token.paddingXXS,

package/lib/Antd5/checkbox/Checkbox.js

@@ -17,6 +17,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import classNames from 'classnames';
 import RcCheckbox from 'rc-checkbox';
+import { composeRef } from 'rc-util/lib/ref';
 import { devUseWarning } from '../_util/warning';
 import Wave from '../_util/wave';
 import { TARGET_CLS } from '../_util/wave/interface';
@@ -51,6 +52,8 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
   var contextDisabled = React.useContext(DisabledContext);
   var mergedDisabled = (_ref = (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.disabled) || disabled) !== null && _ref !== void 0 ? _ref : contextDisabled;
   var prevValue = React.useRef(restProps.value);
+  var checkboxRef = React.useRef(null);
+  var mergedRef = composeRef(ref, checkboxRef);
   if (process.env.NODE_ENV !== 'production') {
     var warning = devUseWarning('Checkbox');
     warning('checked' in restProps || !!checkboxGroup || !('value' in restProps), 'usage', '`value` is not a valid prop, do you mean `checked`?');
@@ -71,6 +74,12 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
       return checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.cancelValue(restProps.value);
     };
   }, [restProps.value]);
+  React.useEffect(function () {
+    var _checkboxRef$current;
+    if ((_checkboxRef$current = checkboxRef.current) !== null && _checkboxRef$current !== void 0 && _checkboxRef$current.input) {
+      checkboxRef.current.input.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
   var prefixCls = getPrefixCls('checkbox', customizePrefixCls);
   var rootCls = useCSSVarCls(prefixCls);
   var _useStyle = useStyle(prefixCls, rootCls),
@@ -96,7 +105,6 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
   }
   var classString = classNames("".concat(prefixCls, "-wrapper"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-rtl"), direction === 'rtl'), "".concat(prefixCls, "-wrapper-checked"), checkboxProps.checked), "".concat(prefixCls, "-wrapper-disabled"), mergedDisabled), "".concat(prefixCls, "-wrapper-in-form-item"), isFormItemInput), checkbox === null || checkbox === void 0 ? void 0 : checkbox.className, className, rootClassName, cssVarCls, rootCls, hashId);
   var checkboxClass = classNames(_defineProperty({}, "".concat(prefixCls, "-indeterminate"), indeterminate), TARGET_CLS, hashId);
-  var ariaChecked = indeterminate ? 'mixed' : undefined;
   return wrapCSSVar(_jsx(Wave, {
     component: "Checkbox",
     disabled: mergedDisabled,
@@ -105,13 +113,11 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
       style: _objectSpread(_objectSpread({}, checkbox === null || checkbox === void 0 ? void 0 : checkbox.style), style),
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
-      children: [_jsx(RcCheckbox, _objectSpread(_objectSpread({
-        "aria-checked": ariaChecked
-      }, checkboxProps), {}, {
+      children: [_jsx(RcCheckbox, _objectSpread(_objectSpread({}, checkboxProps), {}, {
         prefixCls: prefixCls,
         className: checkboxClass,
         disabled: mergedDisabled,
-        ref: ref
+        ref: mergedRef
       })), children !== undefined && _jsx("span", {
         children: children
       })]

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

@@ -108,9 +108,9 @@ export var genCheckboxStyle = function genCheckboxStyle(token) {
     borderColor: 'transparent'
   })), // ================= Indeterminate =================
   _defineProperty({}, checkboxCls, {
-    '&-indeterminate': _defineProperty({}, "".concat(checkboxCls, "-inner"), {
-      backgroundColor: token.colorBgContainer,
-      borderColor: token.colorBorder,
+    '&-indeterminate': _defineProperty(_defineProperty({}, "".concat(checkboxCls, "-inner"), {
+      backgroundColor: "".concat(token.colorBgContainer, " !important"),
+      borderColor: "".concat(token.colorBorder, " !important"),
       '&:after': {
         top: '50%',
         insetInlineStart: '50%',
@@ -122,6 +122,9 @@ export var genCheckboxStyle = function genCheckboxStyle(token) {
         opacity: 1,
         content: '""'
       }
+    }), "&:hover ".concat(checkboxCls, "-inner"), {
+      backgroundColor: "".concat(token.colorBgContainer, " !important"),
+      borderColor: "".concat(token.colorPrimary, " !important")
     })
   }), // ==================== Disable ====================
   _defineProperty(_defineProperty({}, "".concat(wrapperCls, "-disabled"), {

package/lib/Antd5/collapse/Collapse.js

@@ -68,7 +68,8 @@ var Collapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var renderExpandIcon = React.useCallback(function () {
     var panelProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     var icon = typeof mergedExpandIcon === 'function' ? mergedExpandIcon(panelProps) : _jsx(RightOutlined, {
-      rotate: panelProps.isActive ? 90 : undefined
+      rotate: panelProps.isActive ? 90 : undefined,
+      "aria-label": panelProps.isActive ? 'expanded' : 'collapsed'
     });
     return cloneElement(icon, function () {
       var _icon$props;

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
     }))
   })));
 };