@cronocode/react-box 3.0.10 → 3.0.11

package/components/dropdown.cjs

@@ -1 +1 @@
-"use strict";const s=require("react/jsx-runtime"),n=require("react"),h=require("../box.cjs"),E=require("./textbox.cjs"),z=require("./flex.cjs"),C=require("../core.cjs"),F=require("./baseSvg.cjs"),G=require("./tooltip.cjs"),Q=require("./button.cjs");function X(u,d){const{name:i,defaultValue:g,multiple:l,isSearchable:w,searchPlaceholder:H,children:j,onChange:r,...L}=u,[c,v]=n.useState(Array.isArray(g)?g:g?[g]:[]),[M,P]=n.useState(""),[m,R,S]=C.useVisibility(),b=n.useRef(null),U=n.useRef(null),[V,B]=n.useState(0),I=n.useMemo(()=>V>window.innerHeight/2,[V]),Y=n.useMemo(()=>{var e;return I?((e=S.current)==null?void 0:e.getBoundingClientRect().height)??0:0},[I,S]),p=n.useMemo(()=>Array.isArray(j)?j:[j],[j]),_=n.useMemo(()=>p.filter(e=>{var o;return((o=e.type)==null?void 0:o.displayName)==="DropdownItem"}),[p]),f=n.useMemo(()=>_.filter(e=>w&&M?N(e).toLowerCase().includes(M.toLowerCase()):!0),[w,M,p]),y=n.useMemo(()=>p.find(e=>{var o;return((o=e.type)==null?void 0:o.displayName)==="DropdownUnselect"}),[p]),O=n.useMemo(()=>p.find(e=>{var o;return((o=e.type)==null?void 0:o.displayName)==="DropdownSelectAll"}),[p]),A=n.useMemo(()=>p.find(e=>{var o;return((o=e.type)==null?void 0:o.displayName)==="DropdownEmptyItem"}),[p]),T=n.useMemo(()=>p.find(e=>{var o;return((o=e.type)==null?void 0:o.displayName)==="DropdownDisplay"}),[p]),J=n.useMemo(()=>{if(T)return T.props.children(c);const e=f.filter(t=>c.includes(t.props.value));if(l&&e.length>1)return e.map(t=>N(t)).join(", ");const o=e.at(0);return(o==null?void 0:o.props.children)??(o==null?void 0:o.props.value)??(l?null:y==null?void 0:y.props.children)},[l,f,c,y]),q=n.useCallback((e,...o)=>{if(o.length===0)v([]),r==null||r(void 0,[]);else if(l&&o.length>1){const t=o.map(a=>a.props.value);v(t),r==null||r(void 0,t)}else if(o.length===1){const t=o[0];if(l){const a=c.filter($=>$!==t.props.value);a.length===c.length&&a.push(t.props.value),v(a),r==null||r(t.props.value,a)}else v([t.props.value]),r==null||r(t.props.value,[t.props.value])}l?(e.stopPropagation(),setTimeout(()=>{var t;return(t=b.current)==null?void 0:t.focus()},0)):(R(!1),setTimeout(()=>{var t;return(t=S.current)==null?void 0:t.focus()},0))},[l,c,v]);n.useEffect(()=>{m?setTimeout(()=>{var e,o,t;(e=b.current)==null||e.focus(),(t=(o=U.current)==null?void 0:o.querySelector('[aria-selected="true"]'))==null||t.scrollIntoView({block:"nearest"})},0):P("")},[m]);const k=O&&l&&f.length>c.length,W=y&&f.length>0&&!k;return s.jsxs(h,{width:"fit-content",children:[c.map(e=>s.jsx(E,{ref:d,name:i,type:"hidden",value:JSON.stringify(e)??""},JSON.stringify(e))),s.jsxs(Q,{ref:S,component:"dropdown",...L,props:{onMouseDown:()=>R(e=>!e),tabIndex:0},children:[w&&s.jsx(E,{display:m&&w?"block":"none",clean:!0,flex1:!0,width:1,minHeight:5,placeholder:H,value:M,onChange:e=>P(e.target.value),ref:b,props:{onMouseDown:e=>{m&&w&&e.stopPropagation()}}}),s.jsx(z,{component:"dropdown.display",display:m&&w?"none":"flex",flex1:!0,minHeight:5,children:J}),s.jsx(h,{children:s.jsx(F,{viewBox:"0 0 10 6",width:"0.6rem",rotate:m?180:0,children:s.jsx("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m1 1 4 4 4-4"})})})]}),m&&s.jsx(G,{ref:U,top:I?void 0:0,bottom:I?2:void 0,style:{transform:`translateY(-${Y}px)`},onPositionChange:e=>B(e.top-window.scrollY),children:(f.length>0||A)&&s.jsxs(h,{component:"dropdown.items",children:[W&&s.jsx(h,{component:"dropdown.unselect",selected:c.length===0,...y.props,props:{onMouseDown:e=>q(e)}}),k&&s.jsx(h,{component:"dropdown.selectAll",...O.props,props:{onMouseDown:e=>q(e,..._)}}),f.map(e=>{const{value:o,...t}=e.props;return s.jsx(h,{component:"dropdown.item",theme:l?"multiple":"single",selected:c.includes(o),...t,props:{onMouseDown:a=>q(a,e)}},o)}),f.length===0&&A&&s.jsx(h,{component:"dropdown.emptyItem",...A.props})]})})]})}function D(u){const d=i=>null;return d.displayName=u,d}const x=n.forwardRef(X);x.Item=D("DropdownItem");x.Unselect=D("DropdownUnselect");x.SelectAll=D("DropdownSelectAll");x.EmptyItem=D("DropdownEmptyItem");x.Display=D("DropdownDisplay");function N(u){var d;if(u==null)return"";if(typeof u=="object"){const i=(d=u.props)==null?void 0:d.children;return i==null?"":typeof i=="object"?(Array.isArray(i)?i:[i]).map(l=>N(l)).join(""):i.toString()}return u.toString()}module.exports=x;
+"use strict";const r=require("react/jsx-runtime"),n=require("react"),h=require("../box.cjs"),L=require("./textbox.cjs"),G=require("./flex.cjs"),Q=require("../core.cjs"),X=require("./baseSvg.cjs"),Z=require("./tooltip.cjs"),K=require("./button.cjs");function ee(i,m){const{name:p,defaultValue:g,value:y,multiple:u,isSearchable:w,searchPlaceholder:B,children:A,hideArrow:H,onChange:s,...Y}=i,[J,j]=n.useState(Array.isArray(g)?g:g?[g]:[]),c="value"in i?Array.isArray(y)?y:y?[y]:[]:J,[D,R]=n.useState(""),[a,U,I]=Q.useVisibility(),q=n.useRef(null),T=n.useRef(null),[V,W]=n.useState(0),b=n.useMemo(()=>V>window.innerHeight/2,[V]),$=n.useMemo(()=>{var e;return b?((e=I.current)==null?void 0:e.getBoundingClientRect().height)??0:0},[b,I]),l=n.useMemo(()=>(Array.isArray(A)?A:[A]).flatMap(e=>e),[A]),_=n.useMemo(()=>l.filter(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownItem"}),[l]),f=n.useMemo(()=>_.filter(e=>w&&D?P(e).toLowerCase().includes(D.toLowerCase()):!0),[w,D,l]),x=n.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownUnselect"}),[l]),O=n.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownSelectAll"}),[l]),N=n.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownEmptyItem"}),[l]),C=n.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownDisplay"}),[l]),z=n.useMemo(()=>{if(C)return C.props.children(c,a);const e=f.filter(o=>c.includes(o.props.value));if(u&&e.length>1)return e.map(o=>P(o)).join(", ");const t=e.at(0);return(t==null?void 0:t.props.children)??(t==null?void 0:t.props.value)??(u?null:x==null?void 0:x.props.children)},[u,f,c,x,a]),k=n.useCallback((e,...t)=>{if(t.length===0)j([]),s==null||s(void 0,[]);else if(u&&t.length>1){const o=t.map(d=>d.props.value);j(o),s==null||s(void 0,o)}else if(t.length===1){const o=t[0];if(u){const d=c.filter(M=>M!==o.props.value);d.length===c.length&&d.push(o.props.value),j(d),s==null||s(o.props.value,d)}else j([o.props.value]),s==null||s(o.props.value,[o.props.value])}u?(e.stopPropagation(),setTimeout(()=>{var o;return(o=q.current)==null?void 0:o.focus()},0)):(U(!1),setTimeout(()=>{var o;return(o=I.current)==null?void 0:o.focus()},0))},[u,c,j]);n.useEffect(()=>{a?setTimeout(()=>{var e,t,o;(e=q.current)==null||e.focus(),(o=(t=T.current)==null?void 0:t.querySelector('[aria-selected="true"]'))==null||o.scrollIntoView({block:"nearest"})},0):R("")},[a]);const E=O&&u&&f.length>c.length,F=x&&f.length>0&&!E;return r.jsxs(h,{width:"fit-content",children:[c.map(e=>r.jsx(L,{ref:m,name:p,type:"hidden",value:JSON.stringify(e)??""},JSON.stringify(e))),r.jsxs(K,{ref:I,component:"dropdown",onClick:()=>U(e=>!e),props:{tabIndex:0},...Y,children:[w&&r.jsx(L,{display:a&&w?"block":"none",clean:!0,flex1:!0,width:1,minHeight:5,placeholder:B,value:D,onChange:e=>R(e.target.value),ref:q,props:{onClick:e=>{a&&w&&e.stopPropagation()}}}),r.jsx(G,{component:"dropdown.display",display:a&&w?"none":"flex",children:z}),!H&&r.jsx(h,{children:r.jsx(X,{viewBox:"0 0 10 6",width:"0.6rem",rotate:a?180:0,children:r.jsx("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m1 1 4 4 4-4"})})})]}),a&&r.jsx(Z,{ref:T,top:b?void 0:0,bottom:b?2:void 0,style:{transform:`translateY(-${$}px)`},onPositionChange:e=>W(e.top-window.scrollY),children:(f.length>0||N)&&r.jsxs(h,{component:"dropdown.items",children:[F&&r.jsx(h,{component:"dropdown.unselect",selected:c.length===0,...x.props,props:{onClick:e=>k(e)}}),E&&r.jsx(h,{component:"dropdown.selectAll",...O.props,props:{onClick:e=>k(e,..._)}}),f.map(e=>{const{value:t,onClick:o,...d}=e.props;return r.jsx(h,{component:"dropdown.item",theme:u?"multiple":"single",selected:c.includes(t),...d,props:{onClick:M=>{o==null||o(M),k(M,e)}}},t)}),f.length===0&&N&&r.jsx(h,{component:"dropdown.emptyItem",...N.props})]})})]})}function S(i){const m=p=>null;return m.displayName=i,m}const v=n.forwardRef(ee);v.Item=S("DropdownItem");v.Unselect=S("DropdownUnselect");v.SelectAll=S("DropdownSelectAll");v.EmptyItem=S("DropdownEmptyItem");v.Display=S("DropdownDisplay");function P(i){var m;if(i==null)return"";if(typeof i=="object"){const p=(m=i.props)==null?void 0:m.children;return p==null?"":typeof p=="object"?(Array.isArray(p)?p:[p]).map(y=>P(y)).join(""):p.toString()}return i.toString()}module.exports=v;

package/components/dropdown.d.ts

@@ -1,18 +1,21 @@
 import { Ref } from 'react';
 import { BoxProps } from '../box';
-interface Props<TVal> extends BoxProps {
+interface Props<TVal> extends BoxProps<'button'> {
     name?: string;
     defaultValue?: TVal | TVal[];
+    value?: TVal | TVal[];
     multiple?: boolean;
     isSearchable?: boolean;
     searchPlaceholder?: string;
+    hideArrow?: boolean;
     onChange?: (value: Maybe<TVal>, values: TVal[]) => void;
 }
 interface DropdownItemProps<TVal> extends BoxProps {
     value: TVal;
+    onClick?(e: React.MouseEvent): void;
 }
 interface DropdownDisplayProps<TVal> extends Omit<BoxProps, 'children'> {
-    children: (selectedValues: TVal[]) => React.ReactNode;
+    children: (selectedValues: TVal[], isOpen: boolean) => React.ReactNode;
 }
 interface DropdownType {
     <TVal>(props: Props<TVal>, ref: Ref<HTMLInputElement>): React.ReactNode;

package/components/dropdown.mjs

@@ -1,160 +1,160 @@
-import { jsxs as M, jsx as l } from "react/jsx-runtime";
-import { forwardRef as G, useState as T, useRef as Y, useMemo as c, useCallback as Q, useEffect as X } from "react";
+import { jsxs as U, jsx as l } from "react/jsx-runtime";
+import { forwardRef as Z, useState as B, useRef as M, useMemo as c, useCallback as K, useEffect as ee } from "react";
 import h from "../box.mjs";
-import J from "./textbox.mjs";
-import Z from "./flex.mjs";
-import { b as K } from "../core.mjs";
-import ee from "./baseSvg.mjs";
-import oe from "./tooltip.mjs";
-import te from "./button.mjs";
-function re(a, d) {
-  const { name: p, defaultValue: g, multiple: n, isSearchable: w, searchPlaceholder: q, children: I, onChange: r, ...F } = a, [i, v] = T(Array.isArray(g) ? g : g ? [g] : []), [S, U] = T(""), [m, V, A] = K(), N = Y(null), O = Y(null), [R, W] = T(0), b = c(() => R > window.innerHeight / 2, [R]), _ = c(() => {
+import q from "./textbox.mjs";
+import te from "./flex.mjs";
+import { b as oe } from "../core.mjs";
+import re from "./baseSvg.mjs";
+import ne from "./tooltip.mjs";
+import le from "./button.mjs";
+function se(s, m) {
+  const { name: p, defaultValue: g, value: y, multiple: a, isSearchable: w, searchPlaceholder: F, children: S, hideArrow: W, onChange: r, ..._ } = s, [$, x] = B(Array.isArray(g) ? g : g ? [g] : []), i = "value" in s ? Array.isArray(y) ? y : y ? [y] : [] : $, [I, O] = B(""), [d, R, b] = oe(), P = M(null), C = M(null), [E, z] = B(0), N = c(() => E > window.innerHeight / 2, [E]), G = c(() => {
     var e;
-    return b ? ((e = A.current) == null ? void 0 : e.getBoundingClientRect().height) ?? 0 : 0;
-  }, [b, A]), s = c(() => Array.isArray(I) ? I : [I], [I]), k = c(() => s.filter((e) => {
-    var o;
-    return ((o = e.type) == null ? void 0 : o.displayName) === "DropdownItem";
-  }), [s]), f = c(() => k.filter((e) => w && S ? B(e).toLowerCase().includes(S.toLowerCase()) : !0), [w, S, s]), y = c(() => s.find((e) => {
-    var o;
-    return ((o = e.type) == null ? void 0 : o.displayName) === "DropdownUnselect";
-  }), [s]), E = c(() => s.find((e) => {
-    var o;
-    return ((o = e.type) == null ? void 0 : o.displayName) === "DropdownSelectAll";
-  }), [s]), P = c(() => s.find((e) => {
-    var o;
-    return ((o = e.type) == null ? void 0 : o.displayName) === "DropdownEmptyItem";
-  }), [s]), H = c(() => s.find((e) => {
-    var o;
-    return ((o = e.type) == null ? void 0 : o.displayName) === "DropdownDisplay";
-  }), [s]), $ = c(() => {
-    if (H) return H.props.children(i);
-    const e = f.filter((t) => i.includes(t.props.value));
-    if (n && e.length > 1)
-      return e.map((t) => B(t)).join(", ");
-    const o = e.at(0);
-    return (o == null ? void 0 : o.props.children) ?? (o == null ? void 0 : o.props.value) ?? (n ? null : y == null ? void 0 : y.props.children);
-  }, [n, f, i, y]), j = Q(
-    (e, ...o) => {
-      if (o.length === 0)
-        v([]), r == null || r(void 0, []);
-      else if (n && o.length > 1) {
-        const t = o.map((u) => u.props.value);
-        v(t), r == null || r(void 0, t);
-      } else if (o.length === 1) {
-        const t = o[0];
-        if (n) {
-          const u = i.filter((C) => C !== t.props.value);
-          u.length === i.length && u.push(t.props.value), v(u), r == null || r(t.props.value, u);
+    return N ? ((e = b.current) == null ? void 0 : e.getBoundingClientRect().height) ?? 0 : 0;
+  }, [N, b]), n = c(
+    () => (Array.isArray(S) ? S : [S]).flatMap((e) => e),
+    [S]
+  ), L = c(() => n.filter((e) => {
+    var t;
+    return ((t = e.type) == null ? void 0 : t.displayName) === "DropdownItem";
+  }), [n]), f = c(() => L.filter((e) => w && I ? V(e).toLowerCase().includes(I.toLowerCase()) : !0), [w, I, n]), v = c(() => n.find((e) => {
+    var t;
+    return ((t = e.type) == null ? void 0 : t.displayName) === "DropdownUnselect";
+  }), [n]), H = c(() => n.find((e) => {
+    var t;
+    return ((t = e.type) == null ? void 0 : t.displayName) === "DropdownSelectAll";
+  }), [n]), T = c(() => n.find((e) => {
+    var t;
+    return ((t = e.type) == null ? void 0 : t.displayName) === "DropdownEmptyItem";
+  }), [n]), Y = c(() => n.find((e) => {
+    var t;
+    return ((t = e.type) == null ? void 0 : t.displayName) === "DropdownDisplay";
+  }), [n]), Q = c(() => {
+    if (Y) return Y.props.children(i, d);
+    const e = f.filter((o) => i.includes(o.props.value));
+    if (a && e.length > 1)
+      return e.map((o) => V(o)).join(", ");
+    const t = e.at(0);
+    return (t == null ? void 0 : t.props.children) ?? (t == null ? void 0 : t.props.value) ?? (a ? null : v == null ? void 0 : v.props.children);
+  }, [a, f, i, v, d]), j = K(
+    (e, ...t) => {
+      if (t.length === 0)
+        x([]), r == null || r(void 0, []);
+      else if (a && t.length > 1) {
+        const o = t.map((u) => u.props.value);
+        x(o), r == null || r(void 0, o);
+      } else if (t.length === 1) {
+        const o = t[0];
+        if (a) {
+          const u = i.filter((k) => k !== o.props.value);
+          u.length === i.length && u.push(o.props.value), x(u), r == null || r(o.props.value, u);
         } else
-          v([t.props.value]), r == null || r(t.props.value, [t.props.value]);
+          x([o.props.value]), r == null || r(o.props.value, [o.props.value]);
       }
-      n ? (e.stopPropagation(), setTimeout(() => {
-        var t;
-        return (t = N.current) == null ? void 0 : t.focus();
-      }, 0)) : (V(!1), setTimeout(() => {
-        var t;
-        return (t = A.current) == null ? void 0 : t.focus();
+      a ? (e.stopPropagation(), setTimeout(() => {
+        var o;
+        return (o = P.current) == null ? void 0 : o.focus();
+      }, 0)) : (R(!1), setTimeout(() => {
+        var o;
+        return (o = b.current) == null ? void 0 : o.focus();
       }, 0));
     },
-    [n, i, v]
+    [a, i, x]
   );
-  X(() => {
-    m ? setTimeout(() => {
-      var e, o, t;
-      (e = N.current) == null || e.focus(), (t = (o = O.current) == null ? void 0 : o.querySelector('[aria-selected="true"]')) == null || t.scrollIntoView({ block: "nearest" });
-    }, 0) : U("");
-  }, [m]);
-  const L = E && n && f.length > i.length, z = y && f.length > 0 && !L;
-  return /* @__PURE__ */ M(h, { width: "fit-content", children: [
-    i.map((e) => /* @__PURE__ */ l(J, { ref: d, name: p, type: "hidden", value: JSON.stringify(e) ?? "" }, JSON.stringify(e))),
-    /* @__PURE__ */ M(te, { ref: A, component: "dropdown", ...F, props: { onMouseDown: () => V((e) => !e), tabIndex: 0 }, children: [
+  ee(() => {
+    d ? setTimeout(() => {
+      var e, t, o;
+      (e = P.current) == null || e.focus(), (o = (t = C.current) == null ? void 0 : t.querySelector('[aria-selected="true"]')) == null || o.scrollIntoView({ block: "nearest" });
+    }, 0) : O("");
+  }, [d]);
+  const J = H && a && f.length > i.length, X = v && f.length > 0 && !J;
+  return /* @__PURE__ */ U(h, { width: "fit-content", children: [
+    i.map((e) => /* @__PURE__ */ l(q, { ref: m, name: p, type: "hidden", value: JSON.stringify(e) ?? "" }, JSON.stringify(e))),
+    /* @__PURE__ */ U(le, { ref: b, component: "dropdown", onClick: () => R((e) => !e), props: { tabIndex: 0 }, ..._, children: [
       w && /* @__PURE__ */ l(
-        J,
+        q,
         {
-          display: m && w ? "block" : "none",
+          display: d && w ? "block" : "none",
           clean: !0,
           flex1: !0,
           width: 1,
           minHeight: 5,
-          placeholder: q,
-          value: S,
-          onChange: (e) => U(e.target.value),
-          ref: N,
+          placeholder: F,
+          value: I,
+          onChange: (e) => O(e.target.value),
+          ref: P,
           props: {
-            onMouseDown: (e) => {
-              m && w && e.stopPropagation();
+            onClick: (e) => {
+              d && w && e.stopPropagation();
             }
           }
         }
       ),
-      /* @__PURE__ */ l(Z, { component: "dropdown.display", display: m && w ? "none" : "flex", flex1: !0, minHeight: 5, children: $ }),
-      /* @__PURE__ */ l(h, { children: /* @__PURE__ */ l(ee, { viewBox: "0 0 10 6", width: "0.6rem", rotate: m ? 180 : 0, children: /* @__PURE__ */ l("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m1 1 4 4 4-4" }) }) })
+      /* @__PURE__ */ l(te, { component: "dropdown.display", display: d && w ? "none" : "flex", children: Q }),
+      !W && /* @__PURE__ */ l(h, { children: /* @__PURE__ */ l(re, { viewBox: "0 0 10 6", width: "0.6rem", rotate: d ? 180 : 0, children: /* @__PURE__ */ l("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m1 1 4 4 4-4" }) }) })
     ] }),
-    m && /* @__PURE__ */ l(
-      oe,
+    d && /* @__PURE__ */ l(
+      ne,
       {
-        ref: O,
-        top: b ? void 0 : 0,
-        bottom: b ? 2 : void 0,
-        style: { transform: `translateY(-${_}px)` },
-        onPositionChange: (e) => W(e.top - window.scrollY),
-        children: (f.length > 0 || P) && /* @__PURE__ */ M(h, { component: "dropdown.items", children: [
-          z && /* @__PURE__ */ l(
+        ref: C,
+        top: N ? void 0 : 0,
+        bottom: N ? 2 : void 0,
+        style: { transform: `translateY(-${G}px)` },
+        onPositionChange: (e) => z(e.top - window.scrollY),
+        children: (f.length > 0 || T) && /* @__PURE__ */ U(h, { component: "dropdown.items", children: [
+          X && /* @__PURE__ */ l(
             h,
             {
               component: "dropdown.unselect",
               selected: i.length === 0,
-              ...y.props,
-              props: { onMouseDown: (e) => j(e) }
-            }
-          ),
-          L && /* @__PURE__ */ l(
-            h,
-            {
-              component: "dropdown.selectAll",
-              ...E.props,
-              props: { onMouseDown: (e) => j(e, ...k) }
+              ...v.props,
+              props: { onClick: (e) => j(e) }
             }
           ),
+          J && /* @__PURE__ */ l(h, { component: "dropdown.selectAll", ...H.props, props: { onClick: (e) => j(e, ...L) } }),
           f.map((e) => {
-            const { value: o, ...t } = e.props;
+            const { value: t, onClick: o, ...u } = e.props;
             return /* @__PURE__ */ l(
               h,
               {
                 component: "dropdown.item",
-                theme: n ? "multiple" : "single",
-                selected: i.includes(o),
-                ...t,
-                props: { onMouseDown: (u) => j(u, e) }
+                theme: a ? "multiple" : "single",
+                selected: i.includes(t),
+                ...u,
+                props: {
+                  onClick: (k) => {
+                    o == null || o(k), j(k, e);
+                  }
+                }
               },
-              o
+              t
             );
           }),
-          f.length === 0 && P && /* @__PURE__ */ l(h, { component: "dropdown.emptyItem", ...P.props })
+          f.length === 0 && T && /* @__PURE__ */ l(h, { component: "dropdown.emptyItem", ...T.props })
         ] })
       }
     )
   ] });
 }
-function D(a) {
-  const d = (p) => null;
-  return d.displayName = a, d;
+function A(s) {
+  const m = (p) => null;
+  return m.displayName = s, m;
 }
-const x = G(re);
-x.Item = D("DropdownItem");
-x.Unselect = D("DropdownUnselect");
-x.SelectAll = D("DropdownSelectAll");
-x.EmptyItem = D("DropdownEmptyItem");
-x.Display = D("DropdownDisplay");
-function B(a) {
-  var d;
-  if (a == null) return "";
-  if (typeof a == "object") {
-    const p = (d = a.props) == null ? void 0 : d.children;
-    return p == null ? "" : typeof p == "object" ? (Array.isArray(p) ? p : [p]).map((n) => B(n)).join("") : p.toString();
+const D = Z(se);
+D.Item = A("DropdownItem");
+D.Unselect = A("DropdownUnselect");
+D.SelectAll = A("DropdownSelectAll");
+D.EmptyItem = A("DropdownEmptyItem");
+D.Display = A("DropdownDisplay");
+function V(s) {
+  var m;
+  if (s == null) return "";
+  if (typeof s == "object") {
+    const p = (m = s.props) == null ? void 0 : m.children;
+    return p == null ? "" : typeof p == "object" ? (Array.isArray(p) ? p : [p]).map((y) => V(y)).join("") : p.toString();
   }
-  return a.toString();
+  return s.toString();
 }
 export {
-  x as default
+  D as default
 };

package/core.cjs

@@ -4,4 +4,4 @@ body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
 a,ul{all: unset;}
 .${ue}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;background-color: initial;transition: all var(--transitionTime);box-sizing: border-box;font-family: inherit;font-size: inherit;}
 .${A}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;transition: all var(--svgTransitionTime);}.${A} path,.${A} circle,.${A} rect,.${A} line {transition: all var(--svgTransitionTime);}
-`,g=Object.entries(r);g.sort(([c],[m])=>(U[c]??0)-(U[m]??0));const b=g.reduce((c,[m,N])=>(m!=="normal"&&c.push(`@media(min-width: ${U[m]}px){`),Object.entries(N).forEach(([F,q])=>{const{__parents:ee,...de}=q,te=Object.entries(de);te.sort(([C],[R])=>l[C]-l[R]),te.forEach(([C,R])=>{R.forEach(E=>{var k,H;const h=z[C].find(V=>Array.isArray(V.values)?V.values.includes(E):typeof E==typeof V.values);if(!h)return;const j=o(C,E,+F,m),D=K[+F].map(V=>Z[V]).join(""),x=((k=h.selector)==null?void 0:k.call(h,`.${j}`,D))??`.${j}${D}`,I=Array.isArray(h.styleName)?h.styleName:[h.styleName??C],S=((H=h.valueFormat)==null?void 0:H.call(h,E,w.getVariableValue))??E;c.push(`${x}{${I.map(V=>`${V}:${S}`).join(";")}}`)})}),ee&&Object.entries(ee).forEach(([C,R])=>{const E=Object.entries(R);E.sort(([O],[h])=>l[O]-l[h]),E.forEach(([O,h])=>{h.forEach(j=>{var re,oe;const x=z[O].find(_=>Array.isArray(_.values)?_.values.includes(j):typeof j==typeof _.values);if(!x)return;const I=o(O,j,+F,m,C),[S]=K[+F],k=((re=x.selector)==null?void 0:re.call(x,`.${S}-${C}:${S} .${I}`,""))??`.${S}-${C}:${S} .${I}`,H=Array.isArray(x.styleName)?x.styleName:[x.styleName??O],V=((oe=x.valueFormat)==null?void 0:oe.call(x,j,w.getVariableValue))??j;c.push(`${k}{${H.map(_=>`${_}:${V}`).join(";")}}`)})})})}),m!=="normal"&&c.push("}"),c),[v]);b.unshift(`:root{${w.generateVariables()}}`);const s=y();s.innerHTML=b.join(""),t=!1}e.flush=i;function n(){r={}}e.clear=n;function d(l,v,g,b,s="normal",c){if(v==null)return;const m=b.reduce((F,q)=>F+ie[q],0);r[s]?r[s][m]?r[s][m][l]||(r[s][m][l]=new Set):r[s][m]={[l]:new Set}:r[s]={[m]:{[l]:new Set}},c?(r[s][m].__parents?r[s][m].__parents[c]?r[s][m].__parents[c][l]||(r[s][m].__parents[c][l]=new Set):r[s][m].__parents[c]={[l]:new Set}:r[s][m].__parents={[c]:{[l]:new Set}},r[s][m].__parents[c][l].has(v)||(r[s][m].__parents[c][l].add(v),t=!0)):r[s][m][l].has(v)||(r[s][m][l].add(v),t=!0);const N=o(l,v,m,s,c);g.push(N)}function o(l,v,g,b,s){const c=K[g],m=`${b==="normal"?"":`${b}-`}${c.map(N=>`${N}-`).join("")}${s?`${s}-`:""}${l}-${v}`;return ne?m:be.getIdentity(m)}const f="crono-styles";function y(){let l=document.getElementById(f);return l||(l=document.createElement("style"),l.setAttribute("id",f),l.setAttribute("type","text/css"),document.head.insertBefore(l,document.head.firstChild)),l}})(T||(T={}));exports.StylesContext=void 0;(e=>{e.flush=T.flush,e.clear=T.clear})(exports.StylesContext||(exports.StylesContext={}));var Y;(e=>{function t(r,a,i){return w.setUserVariables(r),Object.entries(a).forEach(([n,d])=>{z[n]=d}),Object.entries(i).forEach(([n,d])=>{const o=z[n];z[n]=o?[...d,...o]:d}),{extendedProps:a,extendedPropTypes:i}}e.extend=t})(Y||(Y={}));const pe=Y;function L(e){const{children:t,theme:r}=e,[a,i]=p.useState(r),n=p.useMemo(()=>{var l;const d=(l=L.userThemes)==null?void 0:l[a];if(!d)return B;const{components:o,...f}=d,y=o??{};return Object.entries(f).forEach(([v,g])=>{y[v]=g}),Object.keys(y).forEach(v=>{y[v].clean&&v in B&&delete B[v]}),$.mergeDeep(B,y)},[a]);return ce.jsx(P.Provider,{value:{themeStyles:n,theme:a,setTheme:i},children:t})}(e=>{e.userThemes=void 0;function t(a){e.userThemes=a}e.setup=t;function r(){const{theme:a,setTheme:i}=p.useContext(P);return[a,i]}e.useTheme=r})(L||(L={}));const xe=L,we={selected:"aria-selected"};var J;(e=>{function t(r,a,i){r!==void 0&&r!=null&&(i[we[a]??a]=Array.isArray(r)?r[0]:r)}e.assignBooleanProp=t})(J||(J={}));const Ne=J;Array.prototype.removeBy||(Array.prototype.removeBy=function(e){return this.filter(e)});function Fe(e=null){const[t,r]=p.useState(!1),a=p.useRef(null);return p.useEffect(()=>{function i(d){const o=e??a.current;(o==null?void 0:o.contains(d.target))===!1&&r(!1)}function n(d){d.key==="Escape"&&r(!1)}return t&&(window.addEventListener("mousedown",i),window.addEventListener("keydown",n)),()=>{window.removeEventListener("mousedown",i),window.removeEventListener("keydown",n)}},[e,t]),[t,r,a]}function $e(){return p.useMemo(()=>{const e="crono-box";let t=document.getElementById(e);return t||(t=document.createElement("div"),t.id=e,document.body.appendChild(t)),t},[])}var Q;(e=>{function t(a){const i=Array.from(a.elements).reduce((n,d)=>{const o=d.name;return o&&(n[o]||(n[o]=[]),n[o].push(d)),n},{});return Object.entries(i).reduce((n,[d,o])=>{if(o.length===1){const f=o[0];r(n,d,f.type==="checkbox"||f.type==="radio"?f.checked:f.value)}else{const f=o.reduce((y,l)=>(l.type==="checkbox"||l.type==="radio"?l.checked&&y.push(l.value):y.push(l.value),y),[]);r(n,d,f)}return n},{})}e.getFormEntries=t;function r(a,i,n){if(i.includes(".")){const d=i.split(".");let o=a;d.forEach((f,y)=>{if(d.length>y+1){const l=f.match(/^(.+)\[(\d)\]$/);if(l){const[,v,g]=l;o[v]=o[v]||[],o[v][g]=o[v][g]||{},o=o[v][g]}else o[f]=o[f]||{},o=o[f]}else o[f]=n})}else a[i]=n}})(Q||(Q={}));const Ce=Q;exports.BoxExtends=pe;exports.BoxUtils=Ne;exports.FormUtils=Ce;exports.ObjectUtils=$;exports.Theme=xe;exports.Variables=w;exports.classNames=ae;exports.usePortalContainer=$e;exports.useStyles=he;exports.useVisibility=Fe;
+`,g=Object.entries(r);g.sort(([c],[m])=>(U[c]??0)-(U[m]??0));const b=g.reduce((c,[m,N])=>(m!=="normal"&&c.push(`@media(min-width: ${U[m]}px){`),Object.entries(N).forEach(([F,q])=>{const{__parents:ee,...de}=q,te=Object.entries(de);te.sort(([C],[R])=>l[C]-l[R]),te.forEach(([C,R])=>{R.forEach(E=>{var I,H;const h=z[C].find(V=>Array.isArray(V.values)?V.values.includes(E):typeof E==typeof V.values);if(!h)return;const j=o(C,E,+F,m),D=K[+F].map(V=>Z[V]).join(""),x=((I=h.selector)==null?void 0:I.call(h,`.${j}`,D))??`.${j}${D}`,k=Array.isArray(h.styleName)?h.styleName:[h.styleName??C],S=((H=h.valueFormat)==null?void 0:H.call(h,E,w.getVariableValue))??E;c.push(`${x}{${k.map(V=>`${V}:${S}`).join(";")}}`)})}),ee&&Object.entries(ee).forEach(([C,R])=>{const E=Object.entries(R);E.sort(([O],[h])=>l[O]-l[h]),E.forEach(([O,h])=>{h.forEach(j=>{var re,oe;const x=z[O].find(_=>Array.isArray(_.values)?_.values.includes(j):typeof j==typeof _.values);if(!x)return;const k=o(O,j,+F,m,C),[S]=K[+F],I=((re=x.selector)==null?void 0:re.call(x,`.${S}-${C}:${S} .${k}`,""))??`.${S}-${C}:${S} .${k}`,H=Array.isArray(x.styleName)?x.styleName:[x.styleName??O],V=((oe=x.valueFormat)==null?void 0:oe.call(x,j,w.getVariableValue))??j;c.push(`${I}{${H.map(_=>`${_}:${V}`).join(";")}}`)})})})}),m!=="normal"&&c.push("}"),c),[v]);b.unshift(`:root{${w.generateVariables()}}`);const s=y();s.innerHTML=b.join(""),t=!1}e.flush=i;function n(){r={}}e.clear=n;function d(l,v,g,b,s="normal",c){if(v==null)return;const m=b.reduce((F,q)=>F+ie[q],0);r[s]?r[s][m]?r[s][m][l]||(r[s][m][l]=new Set):r[s][m]={[l]:new Set}:r[s]={[m]:{[l]:new Set}},c?(r[s][m].__parents?r[s][m].__parents[c]?r[s][m].__parents[c][l]||(r[s][m].__parents[c][l]=new Set):r[s][m].__parents[c]={[l]:new Set}:r[s][m].__parents={[c]:{[l]:new Set}},r[s][m].__parents[c][l].has(v)||(r[s][m].__parents[c][l].add(v),t=!0)):r[s][m][l].has(v)||(r[s][m][l].add(v),t=!0);const N=o(l,v,m,s,c);g.push(N)}function o(l,v,g,b,s){const c=K[g],m=`${b==="normal"?"":`${b}-`}${c.map(N=>`${N}-`).join("")}${s?`${s}-`:""}${l}-${v}`;return ne?m:be.getIdentity(m)}const f="crono-styles";function y(){let l=document.getElementById(f);return l||(l=document.createElement("style"),l.setAttribute("id",f),l.setAttribute("type","text/css"),document.head.insertBefore(l,document.head.firstChild)),l}})(T||(T={}));exports.StylesContext=void 0;(e=>{e.flush=T.flush,e.clear=T.clear})(exports.StylesContext||(exports.StylesContext={}));var Y;(e=>{function t(r,a,i){return w.setUserVariables(r),Object.entries(a).forEach(([n,d])=>{z[n]=d}),Object.entries(i).forEach(([n,d])=>{const o=z[n];z[n]=o?[...d,...o]:d}),{extendedProps:a,extendedPropTypes:i}}e.extend=t})(Y||(Y={}));const pe=Y;function L(e){const{children:t,theme:r}=e,[a,i]=p.useState(r),n=p.useMemo(()=>{var l;const d=(l=L.userThemes)==null?void 0:l[a];if(!d)return B;const{components:o,...f}=d,y=o??{};return Object.entries(f).forEach(([v,g])=>{y[v]=g}),Object.keys(y).forEach(v=>{y[v].clean&&v in B&&delete B[v]}),$.mergeDeep(B,y)},[a]);return ce.jsx(P.Provider,{value:{themeStyles:n,theme:a,setTheme:i},children:t})}(e=>{e.userThemes=void 0;function t(a){e.userThemes=a}e.setup=t;function r(){const{theme:a,setTheme:i}=p.useContext(P);return[a,i]}e.useTheme=r})(L||(L={}));const xe=L,we={selected:"aria-selected"};var J;(e=>{function t(r,a,i){r!==void 0&&r!=null&&(i[we[a]??a]=Array.isArray(r)?r[0]:r)}e.assignBooleanProp=t})(J||(J={}));const Ne=J;Array.prototype.removeBy||(Array.prototype.removeBy=function(e){return this.filter(e)});function Fe(e=null){const[t,r]=p.useState(!1),a=p.useRef(null);return p.useEffect(()=>{function i(d){const o=e??a.current;(o==null?void 0:o.contains(d.target))===!1&&r(!1)}function n(d){d.key==="Escape"&&r(!1)}return t&&(window.addEventListener("click",i),window.addEventListener("keydown",n)),()=>{window.removeEventListener("click",i),window.removeEventListener("keydown",n)}},[e,t]),[t,r,a]}function $e(){return p.useMemo(()=>{const e="crono-box";let t=document.getElementById(e);return t||(t=document.createElement("div"),t.id=e,document.body.appendChild(t)),t},[])}var Q;(e=>{function t(a){const i=Array.from(a.elements).reduce((n,d)=>{const o=d.name;return o&&(n[o]||(n[o]=[]),n[o].push(d)),n},{});return Object.entries(i).reduce((n,[d,o])=>{if(o.length===1){const f=o[0];r(n,d,f.type==="checkbox"||f.type==="radio"?f.checked:f.value)}else{const f=o.reduce((y,l)=>(l.type==="checkbox"||l.type==="radio"?l.checked&&y.push(l.value):y.push(l.value),y),[]);r(n,d,f)}return n},{})}e.getFormEntries=t;function r(a,i,n){if(i.includes(".")){const d=i.split(".");let o=a;d.forEach((f,y)=>{if(d.length>y+1){const l=f.match(/^(.+)\[(\d)\]$/);if(l){const[,v,g]=l;o[v]=o[v]||[],o[v][g]=o[v][g]||{},o=o[v][g]}else o[f]=o[f]||{},o=o[f]}else o[f]=n})}else a[i]=n}})(Q||(Q={}));const Ce=Q;exports.BoxExtends=pe;exports.BoxUtils=Ne;exports.FormUtils=Ce;exports.ObjectUtils=$;exports.Theme=xe;exports.Variables=w;exports.classNames=ae;exports.usePortalContainer=$e;exports.useStyles=he;exports.useVisibility=Fe;

package/core.mjs

@@ -1977,10 +1977,10 @@ a,ul{all: unset;}
         const { __parents: ee, ...me } = D, te = Object.entries(me);
         te.sort(([F], [T]) => a[F] - a[T]), te.forEach(([F, T]) => {
           T.forEach((V) => {
-            var I, k;
+            var k, I;
             const h = E[F].find(($) => Array.isArray($.values) ? $.values.includes(V) : typeof V == typeof $.values);
             if (!h) return;
-            const z = o(F, V, +x, m), K = W[+x].map(($) => Z[$]).join(""), p = ((I = h.selector) == null ? void 0 : I.call(h, `.${z}`, K)) ?? `.${z}${K}`, B = Array.isArray(h.styleName) ? h.styleName : [h.styleName ?? F], O = ((k = h.valueFormat) == null ? void 0 : k.call(h, V, N.getVariableValue)) ?? V;
+            const z = o(F, V, +x, m), K = W[+x].map(($) => Z[$]).join(""), p = ((k = h.selector) == null ? void 0 : k.call(h, `.${z}`, K)) ?? `.${z}${K}`, B = Array.isArray(h.styleName) ? h.styleName : [h.styleName ?? F], O = ((I = h.valueFormat) == null ? void 0 : I.call(h, V, N.getVariableValue)) ?? V;
             c.push(`${p}{${B.map(($) => `${$}:${O}`).join(";")}}`);
           });
         }), ee && Object.entries(ee).forEach(([F, T]) => {
@@ -1990,8 +1990,8 @@ a,ul{all: unset;}
               var re, oe;
               const p = E[j].find((_) => Array.isArray(_.values) ? _.values.includes(z) : typeof z == typeof _.values);
               if (!p) return;
-              const B = o(j, z, +x, m, F), [O] = W[+x], I = ((re = p.selector) == null ? void 0 : re.call(p, `.${O}-${F}:${O} .${B}`, "")) ?? `.${O}-${F}:${O} .${B}`, k = Array.isArray(p.styleName) ? p.styleName : [p.styleName ?? j], $ = ((oe = p.valueFormat) == null ? void 0 : oe.call(p, z, N.getVariableValue)) ?? z;
-              c.push(`${I}{${k.map((_) => `${_}:${$}`).join(";")}}`);
+              const B = o(j, z, +x, m, F), [O] = W[+x], k = ((re = p.selector) == null ? void 0 : re.call(p, `.${O}-${F}:${O} .${B}`, "")) ?? `.${O}-${F}:${O} .${B}`, I = Array.isArray(p.styleName) ? p.styleName : [p.styleName ?? j], $ = ((oe = p.valueFormat) == null ? void 0 : oe.call(p, z, N.getVariableValue)) ?? z;
+              c.push(`${k}{${I.map((_) => `${_}:${$}`).join(";")}}`);
             });
           });
         });
@@ -2091,8 +2091,8 @@ function Se(e = null) {
     function n(d) {
       d.key === "Escape" && r(!1);
     }
-    return t && (window.addEventListener("mousedown", i), window.addEventListener("keydown", n)), () => {
-      window.removeEventListener("mousedown", i), window.removeEventListener("keydown", n);
+    return t && (window.addEventListener("click", i), window.addEventListener("keydown", n)), () => {
+      window.removeEventListener("click", i), window.removeEventListener("keydown", n);
     };
   }, [e, t]), [t, r, l];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronocode/react-box",
-  "version": "3.0.10",
+  "version": "3.0.11",
   "type": "module",
   "main": "./box.cjs",
   "module": "./box.mjs",