@unicom-cloud/ui 0.8.67 → 0.8.69

package/trigger/index.js

@@ -0,0 +1,626 @@
+import { jsx as D, jsxs as Ne } from "react/jsx-runtime";
+import { c as ut } from "../chunk/DzVH9IBy.js";
+import ct from "lodash/isArray";
+import M from "lodash/isFunction";
+import { forwardRef as lt, useContext as pt, useRef as R, useState as at, Children as He, useCallback as be, cloneElement as Ie, useImperativeHandle as ft, useLayoutEffect as dt, useEffect as g, Fragment as mt } from "react";
+import { createPortal as gt } from "react-dom";
+import { a as yt } from "../chunk/ll867Bf3.js";
+import { m as te } from "../chunk/JPPo5nY_.js";
+import { on as oe, off as ne, getScrollElements as Tt, isScrollElement as Ct, contains as Le } from "../utils/dom.js";
+import { s as ht } from "../chunk/D-TPB2Do.js";
+import { o as Be } from "../chunk/BrOW642m.js";
+import { m as Et } from "../chunk/DH7HTOV_.js";
+import { a as Dt } from "../chunk/ClqoGc3r.js";
+import { c as wt, f as Pt } from "../chunk/C48SmsN-.js";
+import { r as re } from "../chunk/CIRG541s.js";
+import Ve from "../utils/throttleByRaf.js";
+import xt, { getBoundingClientRect as Mt } from "./getPopupStyle.js";
+import ie from "lodash/isPlainObject.js";
+function St(d, I) {
+  if (!d)
+    return {};
+  const { width: y, height: S, left: T, right: Y } = Mt(d, I);
+  return {
+    width: y,
+    height: S,
+    left: T,
+    right: Y
+  };
+}
+const jt = [
+  "onClick",
+  "onMouseEnter",
+  "onMouseLeave",
+  "onMouseMove",
+  "onFocus",
+  "onBlur",
+  "onContextMenu",
+  "onKeyDown"
+];
+function Ot(d, I) {
+  const y = {}, S = { ...d };
+  return I.forEach((T) => {
+    d && T in d && (y[T] = d[T], delete S[T]);
+  }), { picked: y, omitted: S };
+}
+const vt = {
+  blurToHide: !0,
+  // clickToClose: true,
+  classNames: "fadeIn",
+  trigger: "hover",
+  position: "bottom",
+  duration: 200,
+  unmountOnExit: !0,
+  popupAlign: {},
+  popupHoverStay: !0,
+  clickOutsideToClose: !0,
+  escToClose: !1,
+  mouseLeaveToClose: !0,
+  containerScrollToClose: !1,
+  getDocument: () => window.document,
+  autoFixPosition: !0,
+  mouseEnterDelay: 100,
+  mouseLeaveDelay: 100,
+  autoFitPosition: !0,
+  updateOnScroll: !0
+};
+function $t(d, I) {
+  var Se, Oe;
+  const y = pt(yt), { getPrefixCls: S, zIndex: T, rtl: Y } = y, i = l(d), {
+    children: se,
+    style: A,
+    className: ke,
+    arrowProps: C,
+    disabled: O,
+    popup: ue,
+    classNames: K,
+    duration: Re,
+    unmountOnExit: ce,
+    alignPoint: Ae,
+    autoAlignPopupWidth: Fe,
+    position: ze,
+    childrenPrefix: h,
+    showArrow: _e,
+    popupStyle: le,
+    __onExit: Q,
+    __onExited: W
+  } = i;
+  if (!ue)
+    return null;
+  const pe = se || se === 0, a = R(null), v = R(null), ae = R(null), fe = R(null), n = R({
+    rootElement: void 0,
+    triggerDestoried: !1,
+    // 标志 popup 是否被销毁
+    realPosition: null,
+    // popup 真正出现的位置
+    arrowStyle: null,
+    // arrow 箭头的位置
+    mousedownToHide: !1,
+    // if mousedown to hide popup, ignore onFocus
+    hasPopupMouseDown: !1,
+    mouseLocation: {
+      clientX: 0,
+      clientY: 0
+    },
+    // 保存鼠标的位置
+    childrenDomSize: {},
+    scrollElements: null,
+    // 保存当前节点到弹出容器间的所有滚动元素
+    delayTimeoutID: -1,
+    updatePositionTimeoutID: -1
+  }), [X, $] = at({ popupVisible: !1, popupStyle: {} }), U = i.popupVisible, Ye = X.popupVisible, u = U ?? Ye, c = {}, j = {
+    onMouseDown() {
+      n.current.hasPopupMouseDown = !0, setTimeout(() => {
+        n.current.hasPopupMouseDown = !1;
+      }, 0);
+    }
+  };
+  V() && !O ? (c.onMouseEnter = qe, c.onMouseLeave = Ee, J() && (c.onClick = De), Ae && (c.onMouseMove = Ge), We() || (j.onMouseEnter = Je, j.onMouseLeave = Ze)) : (c.onMouseEnter = P("onMouseEnter"), c.onMouseLeave = P("onMouseLeave")), me() && !O ? (c.onContextMenu = et, c.onClick = De) : c.onContextMenu = P("onContextMenu"), de() && !O ? c.onClick = tt : c.onClick = c.onClick || P("onClick"), G() && !O ? (c.onFocus = ot, ge() && (c.onBlur = nt)) : (c.onFocus = P("onFocus"), c.onBlur = P("onBlur")), O ? c.onKeyDown = P("onKeyDown") : c.onKeyDown = Ue;
+  const L = z(), B = He.only(ue());
+  L.props.className && (c.className = L.props.className), h && u && (c.className = c.className ? `${c.className} ${h}-open` : `${h}-open`), G() && (c.tabIndex = O ? -1 : 0);
+  const N = S("trigger"), Ke = te(
+    N,
+    h,
+    `${N}-position-${ze}`,
+    { [`${N}-rtl`]: Y },
+    ke
+  );
+  function l(e) {
+    const { componentConfig: t } = y ?? {};
+    return Et(
+      ie(e) ? e : d,
+      vt,
+      (t == null ? void 0 : t.Trigger) ?? {},
+      ct(e) ? e : void 0
+    );
+  }
+  function H() {
+    var t, o;
+    const e = Pt(
+      ((t = i.getTargetDOMNode) == null ? void 0 : t.call(i)) || ((o = i.getRootElement) == null ? void 0 : o.call(i)) || n.current.child
+    );
+    return n.current.rootElement = e, e;
+  }
+  const q = be(
+    Ve(() => {
+      b();
+    }),
+    [u]
+  );
+  function de() {
+    const { trigger: e } = l(["trigger"]);
+    return [].concat(e).indexOf("click") > -1;
+  }
+  function G() {
+    const { trigger: e } = l(["trigger"]);
+    return [].concat(e).indexOf("focus") > -1;
+  }
+  function V() {
+    const { trigger: e } = l(["trigger"]);
+    return [].concat(e).indexOf("hover") > -1;
+  }
+  function me() {
+    const { trigger: e } = l(["trigger"]);
+    return [].concat(e).indexOf("contextMenu") > -1;
+  }
+  function Qe() {
+    return V() && l(["mouseLeaveToClose"]).mouseLeaveToClose;
+  }
+  function We() {
+    return V() && !l(["popupHoverStay"]).popupHoverStay;
+  }
+  function J() {
+    if (de() || me()) {
+      const { clickToClose: e = !0 } = l(["clickToClose"]);
+      return e;
+    }
+    return V() && i.clickToClose;
+  }
+  function ge() {
+    return G() && l(["blurToHide"]).blurToHide;
+  }
+  function Xe() {
+    n.current.updatePositionTimeoutID && (n.current.updatePositionTimeoutID.cancel ? n.current.updatePositionTimeoutID.cancel() : (clearTimeout(n.current.updatePositionTimeoutID), n.current.updatePositionTimeoutID = null)), w();
+  }
+  function ye(e) {
+    var k, ve;
+    const t = a.current;
+    if (!t)
+      return {};
+    const { showArrow: o, classNames: r } = l([
+      "showArrow",
+      "classNames"
+    ]);
+    let s = o && ((k = n.current.arrowStyle) == null ? void 0 : k.top) || 0, p = o && ((ve = n.current.arrowStyle) == null ? void 0 : ve.left) || 0;
+    s = s ? `${s}px` : "", p = p ? `${p}px` : "";
+    const x = {
+      top: `${p || "50%"} 100% 0`,
+      tl: `${p || "15px"} 100% 0`,
+      tr: `${p || `${t.clientWidth - 15}px`} 100% 0`,
+      bottom: `${p || "50%"} 0 0`,
+      bl: `${p || "15px"} 0 0`,
+      br: `${p || `${t.clientWidth - 15}px`} 0 0`,
+      left: `100% ${s || "50%"} 0`,
+      lt: `100% ${s || "15px"} 0`,
+      lb: `100% ${s || `${t.clientHeight - 15}px`} 0`,
+      right: `0 ${s || "50%"} 0`,
+      rt: `0 ${s || "15px"} 0`,
+      rb: `0 ${s || `${t.clientHeight - 15}px`} 0`
+    };
+    if (r && r.indexOf("zoom") > -1)
+      return {
+        transformOrigin: x[e]
+      };
+    if (r === "slideDynamicOrigin") {
+      let $e = "0% 0%";
+      return ["top", "tl", "tr"].indexOf(e) > -1 && ($e = "100% 100%"), {
+        transformOrigin: $e
+      };
+    }
+    return {};
+  }
+  function Te() {
+    if (l(["classNames"]).classNames !== "slideDynamicOrigin")
+      return "";
+    switch (n.current.realPosition) {
+      case "bottom":
+      case "bl":
+      case "br":
+        return "scaleY(0.9) translateY(-4px)";
+      case "top":
+      case "tl":
+      case "tr":
+        return "scaleY(0.9) translateY(4px)";
+      default:
+        return "";
+    }
+  }
+  function Z() {
+    var k;
+    if (!v.current)
+      return {};
+    const e = a.current, t = H();
+    if (!(t != null && t.offsetParent) && !((k = t == null ? void 0 : t.getClientRects()) != null && k.length))
+      return X.popupStyle;
+    const { style: o, arrowStyle: r, realPosition: s } = xt(
+      i,
+      e,
+      t,
+      v.current,
+      n.current.mouseLocation
+    );
+    n.current.arrowStyle = r || {};
+    const p = s || i.position;
+    return n.current.realPosition = p, {
+      ...o,
+      ...ye(p)
+    };
+  }
+  function E(e) {
+    const t = Z();
+    $((o) => {
+      const r = { ...o };
+      return r.popupStyle = t, r;
+    }), M(e) && setTimeout(() => {
+      e();
+    }, 0);
+  }
+  const F = be(Ve(E), [
+    u
+  ]);
+  function b(e = 0, t) {
+    if (u) {
+      if (e < 4) {
+        n.current.updatePositionTimeoutID = F(t);
+        return;
+      }
+      n.current.updatePositionTimeoutID = setTimeout(() => {
+        const o = Z();
+        $((r) => {
+          const s = { ...r };
+          return s.popupStyle = o, s;
+        }), M(t) && setTimeout(() => {
+          t();
+        }, 0);
+      }, e);
+    }
+  }
+  function f(e, t = 0, o) {
+    const r = l(["onVisibleChange", "popupVisible"]);
+    e !== u ? Ce(t, () => {
+      var s;
+      (s = r.onVisibleChange) == null || s.call(r, e), "popupVisible" in r ? o == null || o() : ($((p) => {
+        const x = { ...p };
+        return x.popupVisible = !!e, x;
+      }), setTimeout(e ? () => {
+        E(o);
+      } : () => {
+        o == null || o();
+      }, 0));
+    }) : o == null || o();
+  }
+  function Ce(e, t) {
+    e ? (w(), n.current.delayTimeoutID = setTimeout(() => {
+      t(), w();
+    }, e)) : t();
+  }
+  function w() {
+    n.current.delayTimeoutID && (clearTimeout(n.current.delayTimeoutID), n.current.delayTimeoutID = null);
+  }
+  function he(e) {
+    var r;
+    const t = l(["onClickOutside", "clickOutsideToClose"]);
+    let o = Le(a.current, e.target);
+    o || (o = Le(H(), e.target)), o || (o = !!n.current.hasPopupMouseDown), o || ((r = t.onClickOutside) == null || r.call(t), t.clickOutsideToClose && (ge() || V() || f(!1)));
+  }
+  function Ue(e) {
+    const t = e.key;
+    m("onKeyDown", e), t === Be.key && je(e);
+  }
+  function je(e) {
+    const { escToClose: t } = l(["escToClose"]);
+    t && e && e.key === Be.key && u && f(!1);
+  }
+  function qe(e) {
+    const { mouseEnterDelay: t } = l(["mouseEnterDelay"]);
+    m("onMouseEnter", e), w(), f(!0, t || 0);
+  }
+  function Ge(e) {
+    m("onMouseMove", e), ee(e), u && F();
+  }
+  function Ee(e) {
+    const { mouseLeaveDelay: t } = l(["mouseLeaveDelay"]);
+    w(), m("onMouseLeave", e), Qe() && u && f(!1, t || 0);
+  }
+  function Je() {
+    w();
+  }
+  function Ze(e) {
+    Ee(e);
+  }
+  function ee(e) {
+    l(["alignPoint"]).alignPoint && (n.current.mouseLocation = {
+      clientX: e.clientX,
+      clientY: e.clientY
+    });
+  }
+  function et(e) {
+    e.preventDefault(), m("onContextMenu", e), ee(e), u ? l(["alignPoint"]).alignPoint && F() : f(!0, 0);
+  }
+  function De(e) {
+    u && (n.current.mousedownToHide = !0), m("onClick", e), J() && u && f(!u, 0);
+  }
+  function tt(e) {
+    u && (n.current.mousedownToHide = !0), m("onClick", e), ee(e), !(!J() && u) && f(!u, 0);
+  }
+  function ot(e) {
+    const { focusDelay: t } = l(["focusDelay"]), o = () => {
+      m("onFocus", e);
+    };
+    w(), n.current.mousedownToHide || (u ? o == null || o() : f(!0, t || 0, o)), n.current.mousedownToHide = !1;
+  }
+  function nt(e) {
+    f(!1, 200, () => m("onBlur", e));
+  }
+  function we() {
+    u && l(["autoFixPosition"]).autoFixPosition && b();
+  }
+  function z() {
+    var s;
+    const { children: e } = i, t = e, o = t && typeof t != "string" && t.type;
+    let r = e;
+    if (["string", "number"].indexOf(typeof e) > -1 || He.count(e) > 1)
+      r = /* @__PURE__ */ D("span", { children: e });
+    else if (t && o && (o.__PQB_BUTTON === !0 || o.__PQB_CHECKBOX === !0 || o.__PQB_SWITCH === !0 || o.__PQB_RADIO === !0 || o === "button") && t.props.disabled) {
+      const { picked: p, omitted: x } = Ot(t.props.style, [
+        "position",
+        "left",
+        "right",
+        "top",
+        "bottom",
+        "float",
+        "display",
+        "zIndex"
+      ]);
+      r = /* @__PURE__ */ D(
+        "span",
+        {
+          className: (s = t.props) == null ? void 0 : s.className,
+          style: { display: "inline-block", ...p, cursor: "not-allowed" },
+          children: Ie(t, {
+            style: {
+              ...x,
+              pointerEvents: "none"
+            },
+            className: void 0
+          })
+        }
+      );
+    }
+    return r || /* @__PURE__ */ D("span", {});
+  }
+  function m(e, t) {
+    const o = z(), r = o && o.props && o.props[e], s = l([e])[e];
+    M(r) && r(t), M(s) && s(t);
+  }
+  function P(e) {
+    const t = z(), o = t && t.props && t.props[e], r = l([e])[e];
+    return M(r) && M(o) ? (s) => {
+      o(s), r(s);
+    } : o || r;
+  }
+  function Pe() {
+    const e = l(["containerScrollToClose", "updateOnScroll"]);
+    e.containerScrollToClose ? f(!1) : e.updateOnScroll && b();
+  }
+  function rt() {
+    var e;
+    n.current.scrollElements || (n.current.scrollElements = Tt(
+      H()
+      // refPopupContainer.current.parentNode as HTMLElement,
+    ), Array.isArray(n.current.scrollElements) && (i.containerScrollToClose && ((e = v.current) == null ? void 0 : e.parentNode) === document.body && n.current.scrollElements.indexOf(document.body) === -1 && Ct(document.documentElement) && n.current.scrollElements.push(window), n.current.scrollElements.forEach((t) => {
+      oe(t, "scroll", Pe);
+    })));
+  }
+  function xe() {
+    n.current.scrollElements && (n.current.scrollElements.forEach((e) => {
+      ne(e, "scroll", Pe);
+    }), n.current.scrollElements = null);
+  }
+  ft(I, () => ({
+    getRootDOMNode: H,
+    getRootElement: H,
+    getPopupElement() {
+      return a.current;
+    },
+    getChild: z,
+    getPopupStyle: Z,
+    getTransformTranslate: Te,
+    getTransformOrigin: ye,
+    updateThrottleByRaf: F,
+    update: E,
+    updatePopupStyle: E,
+    updatePopupPosition: b,
+    handleUpdatePosition: q,
+    setPopupVisible: f,
+    delayToDo: Ce
+  })), dt(() => (E(), () => {
+  }), [
+    a.current,
+    ae.current,
+    fe.current,
+    n.current.rootElement
+  ]), g(() => {
+    var o;
+    const e = (o = v.current) == null ? void 0 : o.parentNode, t = re([e], b);
+    return () => {
+      t();
+    };
+  }, [(Se = v.current) == null ? void 0 : Se.parentNode]), g(() => {
+    const e = a.current, t = re([e], we);
+    return () => {
+      t();
+    };
+  }, [a.current]), g(() => {
+    const e = n.current.rootElement, t = re([e], we);
+    return () => {
+      t();
+    };
+  }, [n.current.rootElement]), g(() => {
+    const e = n.current.rootElement;
+    return u && (n.current.childrenDomSize = St(e, {
+      boundaryDistance: i.alignPoint ? void 0 : i.boundaryDistance,
+      position: i.position
+    })), () => {
+    };
+  }, [
+    n.current.rootElement,
+    i.alignPoint,
+    i.boundaryDistance,
+    i.position
+  ]), g(() => (u && (i.updateOnScroll || i.containerScrollToClose ? rt() : (b(), xe())), () => {
+    xe();
+  }), [
+    u,
+    i.updateOnScroll,
+    i.containerScrollToClose
+  ]), g(() => {
+    const { clickOutsideToClose: e, getDocument: t } = l([
+      "clickOutsideToClose",
+      "getDocument"
+    ]), o = (t == null ? void 0 : t()) || window.document, r = {
+      // clickOutside 必须监听mousedown。
+      // 1. 如果事件目标元素在click后被移除，document.onclick被触发时已经没有该元素，会错误触发clickOutside逻辑，隐藏popup。
+      // 2. 点击label标签，会触发对应input元素的点击事件，导致触发clickOutside，隐藏popup。
+      capture: ie(e) ? e.capture : !1
+    };
+    return u && (oe(o, "mousedown", he, r), oe(window, "resize", q)), () => {
+      ne(o, "mousedown", he, r), ne(window, "resize", q);
+    };
+  }, [u]), g(() => ("defaultPopupVisible" in i && $((e) => {
+    const t = { ...e };
+    return t.popupVisible = !!(i != null && i.defaultPopupVisible), t;
+  }), () => {
+  }), []), g(() => ("popupVisible" in i && $((e) => {
+    const t = { ...e };
+    return t.popupVisible = !!U, t;
+  }), () => {
+  }), [U]), g(() => () => {
+    Xe();
+  }, []);
+  const it = pe && Ie(L, {
+    ...c,
+    ref: ht(L) ? (e) => {
+      n.current.child = e, wt(L, e);
+    } : void 0
+  }), st = /* @__PURE__ */ D(
+    ut,
+    {
+      in: !!u,
+      timeout: Re,
+      classNames: K,
+      unmountOnExit: ce,
+      appear: !0,
+      mountOnEnter: !0,
+      onEnter: () => {
+        n.current.triggerDestoried = !1;
+        const e = a.current;
+        e && (e.style.display = "initial", e.style.pointerEvents = "none", K === "slideDynamicOrigin" && (e.style.transform = Te()), E());
+      },
+      onEntering: () => {
+        const e = a.current;
+        e && (K === "slideDynamicOrigin" && (e.style.transform = ""), E());
+      },
+      onEntered: () => {
+        const e = a.current;
+        e && (e.style.pointerEvents = "auto", E());
+      },
+      onExit: () => {
+        const e = a.current;
+        e && (e.style.pointerEvents = "none", Q == null || Q(e));
+      },
+      onExited: () => {
+        const e = a.current;
+        e && (e.style.display = "none", ce && (n.current.triggerDestoried = !0), $((t) => {
+          const o = { ...t };
+          return o.popupStyle = {}, o;
+        }), W == null || W(e));
+      },
+      nodeRef: a,
+      children: /* @__PURE__ */ Ne(
+        "span",
+        {
+          ref: a,
+          "trigger-placement": n.current.realPosition,
+          ...Dt(i),
+          style: {
+            width: Fe && (A == null ? void 0 : A.width) === void 0 ? (Oe = n.current.childrenDomSize) == null ? void 0 : Oe.width : "",
+            ...X.popupStyle,
+            position: "absolute",
+            zIndex: T || "",
+            ...A
+            // display
+          },
+          ...j,
+          className: Ke,
+          children: [
+            ie(le) ? /* @__PURE__ */ D(
+              B.type,
+              {
+                ref: B.ref,
+                ...B.props,
+                style: { ...B.props.style, ...le }
+              }
+            ) : B,
+            (_e || C) && /* @__PURE__ */ D(
+              "div",
+              {
+                ref: ae,
+                className: te(`${N}-arrow-container`, {
+                  [`${h}-arrow-container`]: h
+                }),
+                children: /* @__PURE__ */ D(
+                  "div",
+                  {
+                    ref: fe,
+                    ...C,
+                    className: te(
+                      `${N}-arrow`,
+                      {
+                        [`${h}-arrow`]: h
+                      },
+                      C == null ? void 0 : C.className
+                    ),
+                    style: { ...n.current.arrowStyle, ...C == null ? void 0 : C.style }
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+  let _, Me = u;
+  if (Me || (Me = !!a.current && !n.current.triggerDestoried), Me) {
+    const e = i.getPopupContainer || y.getPopupContainer;
+    if (M(e)) {
+      const t = e(H());
+      t && (_ = gt(
+        /* @__PURE__ */ D("div", { ref: v, className: `${N}-container`, children: st }),
+        t
+        // popupVisible ? 1 : 0,
+      ));
+    }
+  }
+  return pe && (_ = /* @__PURE__ */ Ne(mt, { children: [
+    it,
+    _
+  ] })), _;
+}
+const Nt = lt($t);
+Nt.displayName = "Trigger";
+export {
+  jt as EventsByTriggerNeed,
+  Nt as default
+};

package/trigger/interface.js

@@ -0,0 +1 @@
+

package/types/color-picker/ControlBar.d.ts

@@ -1,11 +1,18 @@
 import React, { CSSProperties } from 'react';
-import { Color } from './interface';
+interface MultiValueItem {
+    value: number;
+    key: string;
+}
 interface ControlBarProps {
-    x: number;
-    type?: 'hue' | 'alpha';
-    color?: Color;
-    onChange: (x: number) => void;
     style?: CSSProperties;
+    className?: string;
+    multiple?: boolean;
+    value: number | MultiValueItem[];
+    onActive?: (key: string) => void;
+    onAdd?: (x: number) => void;
+    onChange: (x: number) => void;
+    renderHandlerStyle?: (key?: string, index?: number) => CSSProperties;
+    renderHandlerCenterStyle?: (key?: string, index?: number) => CSSProperties;
 }
 export declare const ControlBar: React.FC<ControlBarProps>;
 export {};

package/types/color-picker/Mode.d.ts

@@ -0,0 +1,7 @@
+import { ColorPickerMode, GradientColor } from './interface';
+export declare const getMode: (mode: ColorPickerMode | ColorPickerMode[]) => ColorPickerMode | ColorPickerMode[];
+export declare const isSingleMode: (mode: ColorPickerMode | ColorPickerMode[]) => mode is ColorPickerMode.Single;
+export declare const isGradientMode: (mode: ColorPickerMode | ColorPickerMode[]) => mode is ColorPickerMode.Gradient;
+export declare const isMultiMode: (mode: ColorPickerMode | ColorPickerMode[]) => mode is ColorPickerMode[];
+export declare const getInitialActiveMode: (mode: ColorPickerMode | ColorPickerMode[]) => ColorPickerMode;
+export declare const getModeByValue: (value: string | GradientColor[], defaultValue: string | GradientColor[], mode: ColorPickerMode | ColorPickerMode[]) => ColorPickerMode;

package/types/color-picker/Panel.d.ts

@@ -1,10 +1,15 @@
 import React, { ReactNode } from 'react';
-import { Color, HSV } from './interface';
+import { Color, ColorPickerMode, GradientColor, HSV, InternalGradientColor } from './interface';
 interface PanelProps {
+    value: string | GradientColor[];
+    mode: ColorPickerMode | ColorPickerMode[];
+    activeMode: ColorPickerMode;
+    gradientColors: InternalGradientColor[];
+    activeColorId: string;
+    activeColorIdRef: React.MutableRefObject<string>;
     color: Color;
     alpha: number;
     disabledAlpha: boolean;
-    colorString: string;
     showHistory?: boolean;
     historyColors?: string[];
     showPreset?: boolean;
@@ -15,6 +20,9 @@ interface PanelProps {
     renderFooter?: () => ReactNode;
     onHsvChange: (value: HSV) => void;
     onAlphaChange: (value: number) => void;
+    onActiveModeChange: (value: ColorPickerMode) => void;
+    onGradientColorsChange: (value: InternalGradientColor[] | ((colors: InternalGradientColor[]) => InternalGradientColor[])) => void;
+    onActiveColorIdChange: (index: string) => void;
 }
 export declare const Panel: React.FC<PanelProps>;
 export {};