@cronocode/react-box 3.0.11 → 3.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/dropdown.cjs +1 -1
- package/components/dropdown.mjs +33 -22
- package/package.json +1 -1
package/components/dropdown.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"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,
|
|
1
|
+
"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,b]=Q.useVisibility(),q=n.useRef(null),T=n.useRef(null),[V,W]=n.useState(0),I=n.useMemo(()=>V>window.innerHeight/2,[V]),$=n.useMemo(()=>{var e;return I?((e=b.current)==null?void 0:e.getBoundingClientRect().height)??0:0},[I,b]),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=b.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:b,type:"button",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:I?void 0:0,bottom:I?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.mjs
CHANGED
|
@@ -70,29 +70,40 @@ function se(s, m) {
|
|
|
70
70
|
const J = H && a && f.length > i.length, X = v && f.length > 0 && !J;
|
|
71
71
|
return /* @__PURE__ */ U(h, { width: "fit-content", children: [
|
|
72
72
|
i.map((e) => /* @__PURE__ */ l(q, { ref: m, name: p, type: "hidden", value: JSON.stringify(e) ?? "" }, JSON.stringify(e))),
|
|
73
|
-
/* @__PURE__ */ U(
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
73
|
+
/* @__PURE__ */ U(
|
|
74
|
+
le,
|
|
75
|
+
{
|
|
76
|
+
ref: b,
|
|
77
|
+
type: "button",
|
|
78
|
+
component: "dropdown",
|
|
79
|
+
onClick: () => R((e) => !e),
|
|
80
|
+
props: { tabIndex: 0 },
|
|
81
|
+
..._,
|
|
82
|
+
children: [
|
|
83
|
+
w && /* @__PURE__ */ l(
|
|
84
|
+
q,
|
|
85
|
+
{
|
|
86
|
+
display: d && w ? "block" : "none",
|
|
87
|
+
clean: !0,
|
|
88
|
+
flex1: !0,
|
|
89
|
+
width: 1,
|
|
90
|
+
minHeight: 5,
|
|
91
|
+
placeholder: F,
|
|
92
|
+
value: I,
|
|
93
|
+
onChange: (e) => O(e.target.value),
|
|
94
|
+
ref: P,
|
|
95
|
+
props: {
|
|
96
|
+
onClick: (e) => {
|
|
97
|
+
d && w && e.stopPropagation();
|
|
98
|
+
}
|
|
99
|
+
}
|
|
89
100
|
}
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
101
|
+
),
|
|
102
|
+
/* @__PURE__ */ l(te, { component: "dropdown.display", display: d && w ? "none" : "flex", children: Q }),
|
|
103
|
+
!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" }) }) })
|
|
104
|
+
]
|
|
105
|
+
}
|
|
106
|
+
),
|
|
96
107
|
d && /* @__PURE__ */ l(
|
|
97
108
|
ne,
|
|
98
109
|
{
|