@cfx-dev/ui-components 3.0.4 → 4.0.0

package/dist/components/Checkbox/Checkbox.js

@@ -1,8 +1,9 @@
-import { jsxs as z, jsx as l } from "react/jsx-runtime";
+import { jsx as _, jsxs as D } from "react/jsx-runtime";
 import * as c from "react";
-import L from "react";
-import { u as S, f as y, c as j, a as W, P as O, b as A, d as B, e as H } from "../../index-CjWRnNpt.js";
-import { r as K } from "../../index-2hJuj4UN.js";
+import $ from "react";
+import { c as y, u as z, a as L, b as j } from "../../index-BCnz73Lm.js";
+import { r as B } from "../../index-2hJuj4UN.js";
+import { P as E } from "../../index-BlbvKsmN.js";
 import "../Icons/cfx-icons/Close.js";
 import "../Icons/cfx-icons/Controller.js";
 import "../Icons/cfx-icons/Copy.js";
@@ -32,7 +33,7 @@ import "../Icons/cfx-icons/Sort.js";
 import "../Icons/cfx-icons/Square.js";
 import "../Icons/cfx-icons/SquareCheck.js";
 import "../Icons/cfx-icons/Stop.js";
-import $ from "../Icons/cfx-icons/Tick.js";
+import W from "../Icons/cfx-icons/Tick.js";
 import "../Icons/cfx-icons/Transfer.js";
 import "../Icons/cfx-icons/Trash.js";
 import "../Icons/cfx-icons/Undo.js";
@@ -53,18 +54,89 @@ import "../Icons/cfx-icons-big/Subscriptions.js";
 import "../Icons/cfx-icons-big/Upload.js";
 import "../Icons/cfx-icons-big/Warning.js";
 import "../Icons/cfx-icons-big/Confirm.js";
-import { clsx as R } from "../../utils/clsx.js";
-import { getColor as q } from "../../utils/color.js";
-function X(e, t) {
+import { clsx as g } from "../../utils/clsx.js";
+import { getColor as K } from "../../utils/color.js";
+function q(e, t) {
+  typeof e == "function" ? e(t) : e != null && (e.current = t);
+}
+function X(...e) {
+  return (t) => e.forEach((o) => q(o, t));
+}
+function F(...e) {
+  return c.useCallback(X(...e), e);
+}
+function G(e, t = []) {
+  let o = [];
+  function n(u, p) {
+    const m = c.createContext(p), s = o.length;
+    o = [...o, p];
+    function i(a) {
+      const { scope: f, children: h, ...C } = a, N = (f == null ? void 0 : f[e][s]) || m, x = c.useMemo(() => C, Object.values(C));
+      return /* @__PURE__ */ _(N.Provider, { value: x, children: h });
+    }
+    function d(a, f) {
+      const h = (f == null ? void 0 : f[e][s]) || m, C = c.useContext(h);
+      if (C) return C;
+      if (p !== void 0) return p;
+      throw new Error(`\`${a}\` must be used within \`${u}\``);
+    }
+    return i.displayName = u + "Provider", [i, d];
+  }
+  const r = () => {
+    const u = o.map((p) => c.createContext(p));
+    return function(m) {
+      const s = (m == null ? void 0 : m[e]) || u;
+      return c.useMemo(
+        () => ({ [`__scope${e}`]: { ...m, [e]: s } }),
+        [m, s]
+      );
+    };
+  };
+  return r.scopeName = e, [n, J(r, ...t)];
+}
+function J(...e) {
+  const t = e[0];
+  if (e.length === 1) return t;
+  const o = () => {
+    const n = e.map((r) => ({
+      useScope: r(),
+      scopeName: r.scopeName
+    }));
+    return function(u) {
+      const p = n.reduce((m, { useScope: s, scopeName: i }) => {
+        const a = s(u)[`__scope${i}`];
+        return { ...m, ...a };
+      }, {});
+      return c.useMemo(() => ({ [`__scope${t.scopeName}`]: p }), [p]);
+    };
+  };
+  return o.scopeName = t.scopeName, o;
+}
+function A(e, t, { checkForDefaultPrevented: o = !0 } = {}) {
+  return function(r) {
+    if (e == null || e(r), o === !1 || !r.defaultPrevented)
+      return t == null ? void 0 : t(r);
+  };
+}
+function Q(e, t) {
+  typeof e == "function" ? e(t) : e != null && (e.current = t);
+}
+function V(...e) {
+  return (t) => e.forEach((o) => Q(o, t));
+}
+function Y(...e) {
+  return c.useCallback(V(...e), e);
+}
+function Z(e, t) {
   return c.useReducer((o, n) => t[o][n] ?? o, e);
 }
-var I = (e) => {
-  const { present: t, children: o } = e, n = F(t), s = typeof o == "function" ? o({ present: n.isPresent }) : c.Children.only(o), a = S(n.ref, G(s));
-  return typeof o == "function" || n.isPresent ? c.cloneElement(s, { ref: a }) : null;
+var O = (e) => {
+  const { present: t, children: o } = e, n = H(t), r = typeof o == "function" ? o({ present: n.isPresent }) : c.Children.only(o), u = Y(n.ref, ee(r));
+  return typeof o == "function" || n.isPresent ? c.cloneElement(r, { ref: u }) : null;
 };
-I.displayName = "Presence";
-function F(e) {
-  const [t, o] = c.useState(), n = c.useRef({}), s = c.useRef(e), a = c.useRef("none"), f = e ? "mounted" : "unmounted", [u, m] = X(f, {
+O.displayName = "Presence";
+function H(e) {
+  const [t, o] = c.useState(), n = c.useRef({}), r = c.useRef(e), u = c.useRef("none"), p = e ? "mounted" : "unmounted", [m, s] = Z(p, {
     mounted: {
       UNMOUNT: "unmounted",
       ANIMATION_OUT: "unmountSuspended"
@@ -78,140 +150,140 @@ function F(e) {
     }
   });
   return c.useEffect(() => {
-    const r = x(n.current);
-    a.current = u === "mounted" ? r : "none";
-  }, [u]), y(() => {
-    const r = n.current, d = s.current;
+    const i = v(n.current);
+    u.current = m === "mounted" ? i : "none";
+  }, [m]), y(() => {
+    const i = n.current, d = r.current;
     if (d !== e) {
-      const C = a.current, _ = x(r);
-      e ? m("MOUNT") : _ === "none" || (r == null ? void 0 : r.display) === "none" ? m("UNMOUNT") : m(d && C !== _ ? "ANIMATION_OUT" : "UNMOUNT"), s.current = e;
+      const f = u.current, h = v(i);
+      e ? s("MOUNT") : h === "none" || (i == null ? void 0 : i.display) === "none" ? s("UNMOUNT") : s(d && f !== h ? "ANIMATION_OUT" : "UNMOUNT"), r.current = e;
     }
-  }, [e, m]), y(() => {
+  }, [e, s]), y(() => {
     if (t) {
-      const r = (i) => {
-        const _ = x(n.current).includes(i.animationName);
-        i.target === t && _ && K.flushSync(() => m("ANIMATION_END"));
-      }, d = (i) => {
-        i.target === t && (a.current = x(n.current));
+      const i = (a) => {
+        const h = v(n.current).includes(a.animationName);
+        a.target === t && h && B.flushSync(() => s("ANIMATION_END"));
+      }, d = (a) => {
+        a.target === t && (u.current = v(n.current));
       };
-      return t.addEventListener("animationstart", d), t.addEventListener("animationcancel", r), t.addEventListener("animationend", r), () => {
-        t.removeEventListener("animationstart", d), t.removeEventListener("animationcancel", r), t.removeEventListener("animationend", r);
+      return t.addEventListener("animationstart", d), t.addEventListener("animationcancel", i), t.addEventListener("animationend", i), () => {
+        t.removeEventListener("animationstart", d), t.removeEventListener("animationcancel", i), t.removeEventListener("animationend", i);
       };
     } else
-      m("ANIMATION_END");
-  }, [t, m]), {
-    isPresent: ["mounted", "unmountSuspended"].includes(u),
-    ref: c.useCallback((r) => {
-      r && (n.current = getComputedStyle(r)), o(r);
+      s("ANIMATION_END");
+  }, [t, s]), {
+    isPresent: ["mounted", "unmountSuspended"].includes(m),
+    ref: c.useCallback((i) => {
+      i && (n.current = getComputedStyle(i)), o(i);
     }, [])
   };
 }
-function x(e) {
+function v(e) {
   return (e == null ? void 0 : e.animationName) || "none";
 }
-function G(e) {
-  var n, s;
+function ee(e) {
+  var n, r;
   let t = (n = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : n.get, o = t && "isReactWarning" in t && t.isReactWarning;
-  return o ? e.ref : (t = (s = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : s.get, o = t && "isReactWarning" in t && t.isReactWarning, o ? e.props.ref : e.props.ref || e.ref);
+  return o ? e.ref : (t = (r = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : r.get, o = t && "isReactWarning" in t && t.isReactWarning, o ? e.props.ref : e.props.ref || e.ref);
 }
-var E = "Checkbox", [J, ct] = j(E), [Q, V] = J(E), M = c.forwardRef(
+var S = "Checkbox", [te, lt] = G(S), [oe, ne] = te(S), M = c.forwardRef(
   (e, t) => {
     const {
       __scopeCheckbox: o,
       name: n,
-      checked: s,
-      defaultChecked: a,
-      required: f,
-      disabled: u,
-      value: m = "on",
-      onCheckedChange: r,
+      checked: r,
+      defaultChecked: u,
+      required: p,
+      disabled: m,
+      value: s = "on",
+      onCheckedChange: i,
       ...d
-    } = e, [i, C] = c.useState(null), _ = S(t, (p) => C(p)), k = c.useRef(!1), P = i ? !!i.closest("form") : !0, [b = !1, g] = W({
-      prop: s,
-      defaultProp: a,
-      onChange: r
-    }), D = c.useRef(b);
+    } = e, [a, f] = c.useState(null), h = F(t, (l) => f(l)), C = c.useRef(!1), N = a ? !!a.closest("form") : !0, [x = !1, R] = z({
+      prop: r,
+      defaultProp: u,
+      onChange: i
+    }), w = c.useRef(x);
     return c.useEffect(() => {
-      const p = i == null ? void 0 : i.form;
-      if (p) {
-        const N = () => g(D.current);
-        return p.addEventListener("reset", N), () => p.removeEventListener("reset", N);
+      const l = a == null ? void 0 : a.form;
+      if (l) {
+        const k = () => R(w.current);
+        return l.addEventListener("reset", k), () => l.removeEventListener("reset", k);
       }
-    }, [i, g]), /* @__PURE__ */ z(Q, { scope: o, state: b, disabled: u, children: [
-      /* @__PURE__ */ l(
-        O.button,
+    }, [a, R]), /* @__PURE__ */ D(oe, { scope: o, state: x, disabled: m, children: [
+      /* @__PURE__ */ _(
+        E.button,
         {
           type: "button",
           role: "checkbox",
-          "aria-checked": h(b) ? "mixed" : b,
-          "aria-required": f,
-          "data-state": w(b),
-          "data-disabled": u ? "" : void 0,
-          disabled: u,
-          value: m,
+          "aria-checked": b(x) ? "mixed" : x,
+          "aria-required": p,
+          "data-state": U(x),
+          "data-disabled": m ? "" : void 0,
+          disabled: m,
+          value: s,
           ...d,
-          ref: _,
-          onKeyDown: A(e.onKeyDown, (p) => {
-            p.key === "Enter" && p.preventDefault();
+          ref: h,
+          onKeyDown: A(e.onKeyDown, (l) => {
+            l.key === "Enter" && l.preventDefault();
           }),
-          onClick: A(e.onClick, (p) => {
-            g((N) => h(N) ? !0 : !N), P && (k.current = p.isPropagationStopped(), k.current || p.stopPropagation());
+          onClick: A(e.onClick, (l) => {
+            R((k) => b(k) ? !0 : !k), N && (C.current = l.isPropagationStopped(), C.current || l.stopPropagation());
           })
         }
       ),
-      P && /* @__PURE__ */ l(
-        Y,
+      N && /* @__PURE__ */ _(
+        re,
         {
-          control: i,
-          bubbles: !k.current,
+          control: a,
+          bubbles: !C.current,
           name: n,
-          value: m,
-          checked: b,
-          required: f,
-          disabled: u,
+          value: s,
+          checked: x,
+          required: p,
+          disabled: m,
           style: { transform: "translateX(-100%)" }
         }
       )
     ] });
   }
 );
-M.displayName = E;
-var T = "CheckboxIndicator", U = c.forwardRef(
+M.displayName = S;
+var I = "CheckboxIndicator", T = c.forwardRef(
   (e, t) => {
-    const { __scopeCheckbox: o, forceMount: n, ...s } = e, a = V(T, o);
-    return /* @__PURE__ */ l(I, { present: n || h(a.state) || a.state === !0, children: /* @__PURE__ */ l(
-      O.span,
+    const { __scopeCheckbox: o, forceMount: n, ...r } = e, u = ne(I, o);
+    return /* @__PURE__ */ _(O, { present: n || b(u.state) || u.state === !0, children: /* @__PURE__ */ _(
+      E.span,
       {
-        "data-state": w(a.state),
-        "data-disabled": a.disabled ? "" : void 0,
-        ...s,
+        "data-state": U(u.state),
+        "data-disabled": u.disabled ? "" : void 0,
+        ...r,
         ref: t,
         style: { pointerEvents: "none", ...e.style }
       }
     ) });
   }
 );
-U.displayName = T;
-var Y = (e) => {
-  const { control: t, checked: o, bubbles: n = !0, ...s } = e, a = c.useRef(null), f = B(o), u = H(t);
+T.displayName = I;
+var re = (e) => {
+  const { control: t, checked: o, bubbles: n = !0, ...r } = e, u = c.useRef(null), p = L(o), m = j(t);
   return c.useEffect(() => {
-    const m = a.current, r = window.HTMLInputElement.prototype, i = Object.getOwnPropertyDescriptor(r, "checked").set;
-    if (f !== o && i) {
-      const C = new Event("click", { bubbles: n });
-      m.indeterminate = h(o), i.call(m, h(o) ? !1 : o), m.dispatchEvent(C);
+    const s = u.current, i = window.HTMLInputElement.prototype, a = Object.getOwnPropertyDescriptor(i, "checked").set;
+    if (p !== o && a) {
+      const f = new Event("click", { bubbles: n });
+      s.indeterminate = b(o), a.call(s, b(o) ? !1 : o), s.dispatchEvent(f);
     }
-  }, [f, o, n]), /* @__PURE__ */ l(
+  }, [p, o, n]), /* @__PURE__ */ _(
     "input",
     {
       type: "checkbox",
       "aria-hidden": !0,
-      defaultChecked: h(o) ? !1 : o,
-      ...s,
+      defaultChecked: b(o) ? !1 : o,
+      ...r,
       tabIndex: -1,
-      ref: a,
+      ref: u,
       style: {
         ...e.style,
-        ...u,
+        ...m,
         position: "absolute",
         pointerEvents: "none",
         opacity: 0,
@@ -220,41 +292,41 @@ var Y = (e) => {
     }
   );
 };
-function h(e) {
+function b(e) {
   return e === "indeterminate";
 }
-function w(e) {
-  return h(e) ? "indeterminate" : e ? "checked" : "unchecked";
+function U(e) {
+  return b(e) ? "indeterminate" : e ? "checked" : "unchecked";
 }
-var Z = M, ee = U;
-const te = "cfxui__Checkbox__rootUnset__cbb57", oe = "cfxui__Checkbox__root__865aa", ne = "cfxui__Checkbox__indicator__2afc0", v = {
-  rootUnset: te,
-  root: oe,
-  indicator: ne,
+var ie = M, ce = T;
+const se = "cfxui__Checkbox__rootUnset__cbb57", ae = "cfxui__Checkbox__root__865aa", ue = "cfxui__Checkbox__indicator__2afc0", P = {
+  rootUnset: se,
+  root: ae,
+  indicator: ue,
   "size-small": "cfxui__Checkbox__size-small__02440",
   "size-normal": "cfxui__Checkbox__size-normal__700f4",
   "size-large": "cfxui__Checkbox__size-large__28529"
 };
-function re(e) {
+function me(e) {
   const {
     id: t,
     size: o = "normal",
     rootClassName: n,
-    indicatorClassName: s,
-    colorToken: a,
-    color: f,
-    opacity: u,
-    luminance: m,
-    ...r
-  } = e, d = R(
-    v.root,
-    v.rootUnset,
-    v[`size-${o}`],
+    indicatorClassName: r,
+    colorToken: u,
+    color: p,
+    opacity: m,
+    luminance: s,
+    ...i
+  } = e, d = g(
+    P.root,
+    P.rootUnset,
+    P[`size-${o}`],
     n
-  ), i = q(e);
-  return /* @__PURE__ */ l(Z, { ...r, id: t, style: { color: i }, className: d, children: /* @__PURE__ */ l(ee, { className: R(v.indicator, s), children: /* @__PURE__ */ l($, {}) }) });
+  ), a = K(e);
+  return /* @__PURE__ */ _(ie, { ...i, id: t, style: { color: a }, className: d, children: /* @__PURE__ */ _(ce, { className: g(P.indicator, r), children: /* @__PURE__ */ _(W, {}) }) });
 }
-const at = L.memo(re);
+const ht = $.memo(me);
 export {
-  at as default
+  ht as default
 };

package/dist/components/DropdownSelect/DropdownSelect.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { InputSize } from '../Input';
+import { SelectOption } from '../Select';
+
+export interface DropdownSelectProps<T = string> {
+    options: SelectOption<T>[];
+    value?: T;
+    onChange: (value: T) => void;
+    placeholder?: React.ReactNode;
+    size?: InputSize;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    onlight?: boolean;
+}
+export declare const DropdownSelect: React.FC<DropdownSelectProps>;
+export default DropdownSelect;