@chaoswise/ui 3.0.22 → 3.1.0

package/lib/Antd5/color-picker/components/PanelPicker/GradientColorBar.js

@@ -0,0 +1,130 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function 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 _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 { AggregationColor } from '../../color';
+import { getGradientPercentColor } from '../../util';
+import { GradientColorSlider } from '../ColorSlider';
+function sortColors(colors) {
+  return _toConsumableArray(colors).sort(function (a, b) {
+    return a.percent - b.percent;
+  });
+}
+/**
+ * GradientColorBar will auto show when the mode is `gradient`.
+ */
+var GradientColorBar = function GradientColorBar(props) {
+  var prefixCls = props.prefixCls,
+    mode = props.mode,
+    onChange = props.onChange,
+    onChangeComplete = props.onChangeComplete,
+    onActive = props.onActive,
+    activeIndex = props.activeIndex,
+    onGradientDragging = props.onGradientDragging,
+    colors = props.colors;
+  var isGradient = mode === 'gradient';
+  // ============================= Colors =============================
+  var colorList = React.useMemo(function () {
+    return colors.map(function (info) {
+      return {
+        percent: info.percent,
+        color: info.color.toRgbString()
+      };
+    });
+  }, [colors]);
+  var values = React.useMemo(function () {
+    return colorList.map(function (info) {
+      return info.percent;
+    });
+  }, [colorList]);
+  // ============================== Drag ==============================
+  var colorsRef = React.useRef(colorList);
+  // Record current colors
+  var onDragStart = function onDragStart(_ref) {
+    var rawValues = _ref.rawValues,
+      draggingIndex = _ref.draggingIndex,
+      draggingValue = _ref.draggingValue;
+    if (rawValues.length > colorList.length) {
+      // Add new node
+      var newPointColor = getGradientPercentColor(colorList, draggingValue);
+      var nextColors = _toConsumableArray(colorList);
+      nextColors.splice(draggingIndex, 0, {
+        percent: draggingValue,
+        color: newPointColor
+      });
+      colorsRef.current = nextColors;
+    } else {
+      colorsRef.current = colorList;
+    }
+    onGradientDragging(true);
+    onChange(new AggregationColor(sortColors(colorsRef.current)), true);
+  };
+  // Adjust color when dragging
+  var onDragChange = function onDragChange(_ref2) {
+    var deleteIndex = _ref2.deleteIndex,
+      draggingIndex = _ref2.draggingIndex,
+      draggingValue = _ref2.draggingValue;
+    var nextColors = _toConsumableArray(colorsRef.current);
+    if (deleteIndex !== -1) {
+      nextColors.splice(deleteIndex, 1);
+    } else {
+      nextColors[draggingIndex] = _objectSpread(_objectSpread({}, nextColors[draggingIndex]), {}, {
+        percent: draggingValue
+      });
+      nextColors = sortColors(nextColors);
+    }
+    onChange(new AggregationColor(nextColors), true);
+  };
+  // ============================== Key ===============================
+  var onKeyDelete = function onKeyDelete(index) {
+    var nextColors = _toConsumableArray(colorList);
+    nextColors.splice(index, 1);
+    var nextColor = new AggregationColor(nextColors);
+    onChange(nextColor);
+    onChangeComplete(nextColor);
+  };
+  // ============================= Change =============================
+  var onInternalChangeComplete = function onInternalChangeComplete(nextValues) {
+    onChangeComplete(new AggregationColor(colorList));
+    // Reset `activeIndex` if out of range
+    if (activeIndex >= nextValues.length) {
+      onActive(nextValues.length - 1);
+    }
+    onGradientDragging(false);
+  };
+  // ============================= Render =============================
+  if (!isGradient) {
+    return null;
+  }
+  return _jsx(GradientColorSlider, {
+    min: 0,
+    max: 100,
+    prefixCls: prefixCls,
+    className: "".concat(prefixCls, "-gradient-slider"),
+    colors: colorList,
+    color: null,
+    value: values,
+    range: true,
+    onChangeComplete: onInternalChangeComplete,
+    disabled: false,
+    type: "gradient",
+    // Active
+    activeIndex: activeIndex,
+    onActive: onActive,
+    // Drag
+    onDragStart: onDragStart,
+    onDragChange: onDragChange,
+    onKeyDelete: onKeyDelete
+  });
+};
+export default /*#__PURE__*/React.memo(GradientColorBar);

package/lib/Antd5/color-picker/components/PanelPicker/index.js

@@ -0,0 +1,194 @@
+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 = ["mode", "onModeChange", "modeOptions", "prefixCls", "allowClear", "value", "disabledAlpha", "onChange", "onClear", "onChangeComplete", "activeIndex", "gradientDragging"];
+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 _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 _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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useContext } from 'react';
+import RcColorPicker from '@rc-component/color-picker';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import Segmented from '../../../segmented';
+import { AggregationColor } from '../../color';
+import { PanelPickerContext } from '../../context';
+import { genAlphaColor, generateColor } from '../../util';
+import ColorClear from '../ColorClear';
+import ColorInput from '../ColorInput';
+import ColorSlider from '../ColorSlider';
+import GradientColorBar from './GradientColorBar';
+var components = {
+  slider: ColorSlider
+};
+var PanelPicker = function PanelPicker() {
+  var panelPickerContext = useContext(PanelPickerContext);
+  var mode = panelPickerContext.mode,
+    onModeChange = panelPickerContext.onModeChange,
+    modeOptions = panelPickerContext.modeOptions,
+    prefixCls = panelPickerContext.prefixCls,
+    allowClear = panelPickerContext.allowClear,
+    value = panelPickerContext.value,
+    disabledAlpha = panelPickerContext.disabledAlpha,
+    _onChange = panelPickerContext.onChange,
+    onClear = panelPickerContext.onClear,
+    onChangeComplete = panelPickerContext.onChangeComplete,
+    activeIndex = panelPickerContext.activeIndex,
+    gradientDragging = panelPickerContext.gradientDragging,
+    injectProps = _objectWithoutProperties(panelPickerContext, _excluded);
+  // ============================ Colors ============================
+  var colors = React.useMemo(function () {
+    if (!value.cleared) {
+      return value.getColors();
+    }
+    return [{
+      percent: 0,
+      color: new AggregationColor('')
+    }, {
+      percent: 100,
+      color: new AggregationColor('')
+    }];
+  }, [value]);
+  // ========================= Single Color =========================
+  var isSingle = !value.isGradient();
+  // We cache the point color in case user drag the gradient point across another one
+  var _React$useState = React.useState(value),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    lockedColor = _React$useState2[0],
+    setLockedColor = _React$useState2[1];
+  // Use layout effect here since `useEffect` will cause a blink when mouseDown
+  useLayoutEffect(function () {
+    if (!isSingle) {
+      var _colors$activeIndex;
+      setLockedColor((_colors$activeIndex = colors[activeIndex]) === null || _colors$activeIndex === void 0 ? void 0 : _colors$activeIndex.color);
+    }
+  }, [gradientDragging, activeIndex]);
+  var activeColor = React.useMemo(function () {
+    var _colors$activeIndex2;
+    if (isSingle) {
+      return value;
+    }
+    // Use cache when dragging. User can not operation panel when dragging.
+    if (gradientDragging) {
+      return lockedColor;
+    }
+    return (_colors$activeIndex2 = colors[activeIndex]) === null || _colors$activeIndex2 === void 0 ? void 0 : _colors$activeIndex2.color;
+  }, [value, activeIndex, isSingle, lockedColor, gradientDragging]);
+  // ========================= Picker Color =========================
+  var _React$useState3 = React.useState(activeColor),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    pickerColor = _React$useState4[0],
+    setPickerColor = _React$useState4[1];
+  var _React$useState5 = React.useState(0),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    forceSync = _React$useState6[0],
+    setForceSync = _React$useState6[1];
+  var mergedPickerColor = pickerColor !== null && pickerColor !== void 0 && pickerColor.equals(activeColor) ? activeColor : pickerColor;
+  useLayoutEffect(function () {
+    setPickerColor(activeColor);
+  }, [forceSync, activeColor === null || activeColor === void 0 ? void 0 : activeColor.toHexString()]);
+  // ============================ Change ============================
+  var fillColor = function fillColor(nextColor, info) {
+    var submitColor = generateColor(nextColor);
+    // Fill alpha color to 100% if origin is cleared color
+    if (value.cleared) {
+      var rgb = submitColor.toRgb();
+      // Auto fill color if origin is `0/0/0` to enhance user experience
+      if (!rgb.r && !rgb.g && !rgb.b && info) {
+        var infoType = info.type,
+          _info$value = info.value,
+          infoValue = _info$value === void 0 ? 0 : _info$value;
+        submitColor = new AggregationColor({
+          h: infoType === 'hue' ? infoValue : 0,
+          s: 1,
+          b: 1,
+          a: infoType === 'alpha' ? infoValue / 100 : 1
+        });
+      } else {
+        submitColor = genAlphaColor(submitColor);
+      }
+    }
+    if (mode === 'single') {
+      return submitColor;
+    }
+    var nextColors = _toConsumableArray(colors);
+    nextColors[activeIndex] = _objectSpread(_objectSpread({}, nextColors[activeIndex]), {}, {
+      color: submitColor
+    });
+    return new AggregationColor(nextColors);
+  };
+  var onPickerChange = function onPickerChange(colorValue, fromPicker, info) {
+    var nextColor = fillColor(colorValue, info);
+    setPickerColor(nextColor.isGradient() ? nextColor.getColors()[activeIndex].color : nextColor);
+    _onChange(nextColor, fromPicker);
+  };
+  var onInternalChangeComplete = function onInternalChangeComplete(nextColor, info) {
+    // Trigger complete event
+    onChangeComplete(fillColor(nextColor, info));
+    // Back of origin color in case in controlled
+    // This will set after `onChangeComplete` to avoid `setState` trigger rerender
+    // which will make `fillColor` get wrong `color.cleared` state
+    setForceSync(function (ori) {
+      return ori + 1;
+    });
+  };
+  var onInputChange = function onInputChange(colorValue) {
+    _onChange(fillColor(colorValue));
+  };
+  // ============================ Render ============================
+  // Operation bar
+  var operationNode = null;
+  var showMode = modeOptions.length > 1;
+  if (allowClear || showMode) {
+    operationNode = _jsxs("div", {
+      className: "".concat(prefixCls, "-operation"),
+      children: [showMode && _jsx(Segmented, {
+        size: "small",
+        options: modeOptions,
+        value: mode,
+        onChange: onModeChange
+      }), _jsx(ColorClear, _objectSpread({
+        prefixCls: prefixCls,
+        value: value,
+        onChange: function onChange(clearColor) {
+          _onChange(clearColor);
+          onClear === null || onClear === void 0 || onClear();
+        }
+      }, injectProps))]
+    });
+  }
+  // Return
+  return _jsxs(_Fragment, {
+    children: [operationNode, _jsx(GradientColorBar, _objectSpread(_objectSpread({}, panelPickerContext), {}, {
+      colors: colors
+    })), _jsx(RcColorPicker, {
+      prefixCls: prefixCls,
+      value: mergedPickerColor === null || mergedPickerColor === void 0 ? void 0 : mergedPickerColor.toHsb(),
+      disabledAlpha: disabledAlpha,
+      onChange: function onChange(colorValue, info) {
+        onPickerChange(colorValue, true, info);
+      },
+      onChangeComplete: function onChangeComplete(colorValue, info) {
+        onInternalChangeComplete(colorValue, info);
+      },
+      components: components
+    }), _jsx(ColorInput, _objectSpread({
+      value: activeColor,
+      onChange: onInputChange,
+      prefixCls: prefixCls,
+      disabledAlpha: disabledAlpha
+    }, injectProps))]
+  });
+};
+export default PanelPicker;

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

@@ -1,7 +1,3 @@
 import React from 'react';
 export var PanelPickerContext = /*#__PURE__*/React.createContext({});
-export var PanelPresetsContext = /*#__PURE__*/React.createContext({});
-var PanelPickerProvider = PanelPickerContext.Provider;
-export { PanelPickerProvider };
-var PanelPresetsProvider = PanelPresetsContext.Provider;
-export { PanelPresetsProvider };
+export var PanelPresetsContext = /*#__PURE__*/React.createContext({});

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

@@ -0,0 +1,87 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import * as React from 'react';
+import useEvent from 'rc-util/lib/hooks/useEvent';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import { useLocale } from '../../locale';
+import { generateColor } from '../util';
+/**
+ * Combine the `color` and `mode` to make sure sync of state.
+ */
+export default function useModeColor(defaultValue, value, mode) {
+  var _useLocale = useLocale('ColorPicker'),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
+  // ======================== Base ========================
+  // Color
+  var _useMergedState = useMergedState(defaultValue, {
+      value: value
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    mergedColor = _useMergedState2[0],
+    setMergedColor = _useMergedState2[1];
+  // Mode
+  var _React$useState = React.useState('single'),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    modeState = _React$useState2[0],
+    setModeState = _React$useState2[1];
+  var _React$useMemo = React.useMemo(function () {
+      var list = (Array.isArray(mode) ? mode : [mode]).filter(function (m) {
+        return m;
+      });
+      if (!list.length) {
+        list.push('single');
+      }
+      var modes = new Set(list);
+      var optionList = [];
+      var pushOption = function pushOption(modeType, localeTxt) {
+        if (modes.has(modeType)) {
+          optionList.push({
+            label: localeTxt,
+            value: modeType
+          });
+        }
+      };
+      pushOption('single', locale.singleColor);
+      pushOption('gradient', locale.gradientColor);
+      return [optionList, modes];
+    }, [mode]),
+    _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
+    modeOptionList = _React$useMemo2[0],
+    modeSet = _React$useMemo2[1];
+  // ======================== Post ========================
+  // We need align `mode` with `color` state
+  // >>>>> Color
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    cacheColor = _React$useState4[0],
+    setCacheColor = _React$useState4[1];
+  var setColor = useEvent(function (nextColor) {
+    setCacheColor(nextColor);
+    setMergedColor(nextColor);
+  });
+  var postColor = React.useMemo(function () {
+    var colorObj = generateColor(mergedColor || '');
+    // Use `cacheColor` in case the color is `cleared`
+    return colorObj.equals(cacheColor) ? cacheColor : colorObj;
+  }, [mergedColor, cacheColor]);
+  // >>>>> Mode
+  var postMode = React.useMemo(function () {
+    var _modeOptionList$;
+    if (modeSet.has(modeState)) {
+      return modeState;
+    }
+    return (_modeOptionList$ = modeOptionList[0]) === null || _modeOptionList$ === void 0 ? void 0 : _modeOptionList$.value;
+  }, [modeSet, modeState, modeOptionList]);
+  // ======================= Effect =======================
+  // Dynamic update mode when color change
+  React.useEffect(function () {
+    setModeState(postColor.isGradient() ? 'gradient' : 'single');
+  }, [postColor]);
+  // ======================= Return =======================
+  return [postColor, setColor, postMode, setModeState, modeOptionList];
+}

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

@@ -25,11 +25,12 @@ var genColorBlockStyle = function genColorBlockStyle(token, size) {
     borderRadius: borderRadiusSM,
     width: size,
     height: size,
-    boxShadow: colorPickerInsetShadow
+    boxShadow: colorPickerInsetShadow,
+    flex: 'none'
   }, getTransBg('50%', token.colorFillSecondary)), {}, _defineProperty({}, "".concat(componentCls, "-color-block-inner"), {
     width: '100%',
     height: '100%',
-    border: "".concat(unit(lineWidth), " solid ").concat(colorFillSecondary),
+    boxShadow: "inset 0 0 0 ".concat(unit(lineWidth), " ").concat(colorFillSecondary),
     borderRadius: 'inherit'
   })));
 };

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

@@ -5,11 +5,13 @@ 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 { genCompactItemStyle } from '../../style/compact-item';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 import genColorBlockStyle from './color-block';
 import genInputStyle from './input';
 import genPickerStyle from './picker';
 import genPresetsStyle from './presets';
+import genSliderStyle from './slider';
 export var genActiveStyle = function genActiveStyle(token, borderColor, outlineColor) {
   return {
     borderInlineEndWidth: token.lineWidth,
@@ -46,20 +48,20 @@ var genClearStyle = function genClearStyle(token, size, extraStyle) {
     border: "".concat(unit(lineWidth), " solid ").concat(colorSplit),
     position: 'relative',
     overflow: 'hidden',
-    cursor: 'pointer',
+    cursor: 'inherit',
     transition: "all ".concat(token.motionDurationFast)
   }, extraStyle), {}, {
     '&::after': {
       content: '""',
       position: 'absolute',
-      insetInlineEnd: lineWidth,
-      top: 0,
+      insetInlineEnd: token.calc(lineWidth).mul(-1).equal(),
+      top: token.calc(lineWidth).mul(-1).equal(),
       display: 'block',
       width: 40,
       // maximum
       height: 2,
       // fixed
-      transformOrigin: 'right',
+      transformOrigin: "calc(100% - 1px) 1px",
       transform: 'rotate(-45deg)',
       backgroundColor: red6
     },
@@ -101,7 +103,7 @@ var genSizeStyle = function genSizeStyle(token) {
     fontSizeLG = token.fontSizeLG;
   return _defineProperty(_defineProperty({}, "&".concat(componentCls, "-lg"), _defineProperty(_defineProperty({
     minWidth: controlHeightLG,
-    height: controlHeightLG,
+    minHeight: controlHeightLG,
     borderRadius: borderRadiusLG
   }, "".concat(componentCls, "-color-block, ").concat(componentCls, "-clear"), {
     width: controlHeight,
@@ -109,14 +111,16 @@ var genSizeStyle = function genSizeStyle(token) {
     borderRadius: borderRadius
   }), "".concat(componentCls, "-trigger-text"), {
     fontSize: fontSizeLG
-  })), "&".concat(componentCls, "-sm"), _defineProperty({
+  })), "&".concat(componentCls, "-sm"), _defineProperty(_defineProperty({
     minWidth: controlHeightSM,
-    height: controlHeightSM,
+    minHeight: controlHeightSM,
     borderRadius: borderRadiusSM
   }, "".concat(componentCls, "-color-block, ").concat(componentCls, "-clear"), {
     width: controlHeightXS,
     height: controlHeightXS,
     borderRadius: borderRadiusXS
+  }), "".concat(componentCls, "-trigger-text"), {
+    lineHeight: unit(controlHeightXS)
   }));
 };
 var genColorPickerStyle = function genColorPickerStyle(token) {
@@ -143,7 +147,7 @@ var genColorPickerStyle = function genColorPickerStyle(token) {
     fontSize = token.fontSize,
     colorPrimaryHover = token.colorPrimaryHover,
     controlOutline = token.controlOutline;
-  return [_defineProperty({}, componentCls, _objectSpread(_defineProperty(_defineProperty({}, "".concat(componentCls, "-inner"), _objectSpread(_objectSpread(_objectSpread(_objectSpread(_defineProperty({
+  return [_defineProperty({}, componentCls, _objectSpread(_defineProperty(_defineProperty({}, "".concat(componentCls, "-inner"), _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_defineProperty({
     '&-content': _defineProperty({
       display: 'flex',
       flexDirection: 'column',
@@ -151,17 +155,20 @@ var genColorPickerStyle = function genColorPickerStyle(token) {
     }, "& > ".concat(antCls, "-divider"), {
       margin: "".concat(unit(marginSM), " 0 ").concat(unit(marginXS))
     })
-  }, "".concat(componentCls, "-panel"), _objectSpread({}, genPickerStyle(token))), genColorBlockStyle(token, colorPickerPreviewSize)), genInputStyle(token)), genPresetsStyle(token)), genClearStyle(token, colorPickerPresetColorSize, {
-    marginInlineStart: 'auto',
+  }, "".concat(componentCls, "-panel"), _objectSpread({}, genPickerStyle(token))), genSliderStyle(token)), genColorBlockStyle(token, colorPickerPreviewSize)), genInputStyle(token)), genPresetsStyle(token)), genClearStyle(token, colorPickerPresetColorSize, {
+    marginInlineStart: 'auto'
+  })), {}, _defineProperty({}, "".concat(componentCls, "-operation"), {
+    display: 'flex',
+    justifyContent: 'space-between',
     marginBottom: marginXS
   }))), '&-trigger', _objectSpread(_objectSpread(_objectSpread(_objectSpread(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     minWidth: controlHeight,
-    height: controlHeight,
+    minHeight: controlHeight,
     borderRadius: borderRadius,
     border: "".concat(unit(lineWidth), " solid ").concat(colorBorder),
     cursor: 'pointer',
     display: 'inline-flex',
-    alignItems: 'center',
+    alignItems: 'flex-start',
     justifyContent: 'center',
     transition: "all ".concat(motionDurationMid),
     background: colorBgElevated,
@@ -170,7 +177,16 @@ var genColorPickerStyle = function genColorPickerStyle(token) {
     marginInlineStart: marginXS,
     marginInlineEnd: token.calc(marginXS).sub(token.calc(paddingXXS).sub(lineWidth)).equal(),
     fontSize: fontSize,
-    color: colorText
+    color: colorText,
+    alignSelf: 'center',
+    '&-cell': {
+      '&:not(:last-child):after': {
+        content: '", "'
+      },
+      '&-inactive': {
+        color: colorTextDisabled
+      }
+    }
   }), '&:hover', {
     borderColor: colorPrimaryHover
   }), "&".concat(componentCls, "-trigger-active"), _objectSpread({}, genActiveStyle(token, colorPrimary, controlOutline))), '&-disabled', _defineProperty({
@@ -182,7 +198,9 @@ var genColorPickerStyle = function genColorPickerStyle(token) {
     }
   }, "".concat(componentCls, "-trigger-text"), {
     color: colorTextDisabled
-  })), genClearStyle(token, controlHeightSM)), genColorBlockStyle(token, controlHeightSM)), genStatusStyle(token)), genSizeStyle(token))), genRtlStyle(token)))];
+  })), genClearStyle(token, controlHeightSM)), genColorBlockStyle(token, controlHeightSM)), genStatusStyle(token)), genSizeStyle(token))), genRtlStyle(token))), genCompactItemStyle(token, {
+    focusElCls: "".concat(componentCls, "-trigger-active")
+  })];
 };
 export default genStyleHooks('ColorPicker', function (token) {
   var colorTextQuaternary = token.colorTextQuaternary,
@@ -194,7 +212,7 @@ export default genStyleHooks('ColorPicker', function (token) {
     colorPickerHandlerSizeSM: 12,
     colorPickerAlphaInputWidth: 44,
     colorPickerInputNumberHandleWidth: 16,
-    colorPickerPresetColorSize: 18,
+    colorPickerPresetColorSize: 24,
     colorPickerInsetShadow: "inset 0 0 1px 0 ".concat(colorTextQuaternary),
     colorPickerSliderHeight: colorPickerSliderHeight,
     colorPickerPreviewSize: token.calc(colorPickerSliderHeight).mul(2).add(marginSM).equal()

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

@@ -42,7 +42,7 @@ var genInputStyle = function genInputStyle(token) {
     }), "".concat(antCls, "-select-selection-item"), {
       paddingInlineEnd: token.calc(fontSizeIcon).add(marginXXS).equal(),
       fontSize: fontSizeSM,
-      lineHeight: "".concat(unit(controlHeightSM))
+      lineHeight: unit(controlHeightSM)
     }), "".concat(antCls, "-select-item-option-content"), {
       fontSize: fontSizeSM,
       lineHeight: lineHeightSM

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

@@ -3,7 +3,6 @@ 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 { getTransBg } from './color-block';
 var genPickerStyle = function genPickerStyle(token) {
   var componentCls = token.componentCls,
     controlHeightLG = token.controlHeightLG,
@@ -13,10 +12,10 @@ var genPickerStyle = function genPickerStyle(token) {
     colorBgElevated = token.colorBgElevated,
     colorFillSecondary = token.colorFillSecondary,
     lineWidthBold = token.lineWidthBold,
-    colorPickerHandlerSize = token.colorPickerHandlerSize,
-    colorPickerHandlerSizeSM = token.colorPickerHandlerSizeSM,
-    colorPickerSliderHeight = token.colorPickerSliderHeight;
-  return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-select"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-palette"), {
+    colorPickerHandlerSize = token.colorPickerHandlerSize;
+  return _defineProperty(_defineProperty({
+    userSelect: 'none'
+  }, "".concat(componentCls, "-select"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-palette"), {
     minHeight: token.calc(controlHeightLG).mul(4).equal(),
     overflow: 'hidden',
     borderRadius: borderRadiusSM
@@ -32,33 +31,7 @@ var genPickerStyle = function genPickerStyle(token) {
     position: 'relative',
     borderRadius: '50%',
     cursor: 'pointer',
-    boxShadow: "".concat(colorPickerInsetShadow, ", 0 0 0 1px ").concat(colorFillSecondary),
-    '&-sm': {
-      width: colorPickerHandlerSizeSM,
-      height: colorPickerHandlerSizeSM
-    }
-  }), "".concat(componentCls, "-slider"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    borderRadius: token.calc(colorPickerSliderHeight).div(2).equal()
-  }, "".concat(componentCls, "-palette"), {
-    height: colorPickerSliderHeight
-  }), "".concat(componentCls, "-gradient"), {
-    borderRadius: token.calc(colorPickerSliderHeight).div(2).equal(),
-    boxShadow: colorPickerInsetShadow
-  }), '&-alpha', getTransBg("".concat(unit(colorPickerSliderHeight)), token.colorFillSecondary)), '&-hue', {
-    marginBottom: marginSM
-  })), "".concat(componentCls, "-slider-container"), _defineProperty({
-    display: 'flex',
-    gap: marginSM,
-    marginBottom: marginSM
-  }, "".concat(componentCls, "-slider-group"), {
-    flex: 1,
-    '&-disabled-alpha': _defineProperty({
-      display: 'flex',
-      alignItems: 'center'
-    }, "".concat(componentCls, "-slider"), {
-      flex: 1,
-      marginBottom: 0
-    })
-  }));
+    boxShadow: "".concat(colorPickerInsetShadow, ", 0 0 0 1px ").concat(colorFillSecondary)
+  });
 };
 export default genPickerStyle;