@starasia/dropdown 4.0.0 → 5.0.0
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/dist/dropdown.es.js +1 -1
- package/dist/dropdown.umd.js +1 -1
- package/package.json +1 -1
package/dist/dropdown.es.js
CHANGED
package/dist/dropdown.umd.js
CHANGED
|
@@ -448,4 +448,4 @@
|
|
|
448
448
|
margin: 0;
|
|
449
449
|
}
|
|
450
450
|
|
|
451
|
-
`;function _(e){const[p,i]=d.useState(e),l=d.useRef(null),r=o=>{l.current&&!l.current.contains(o.target)&&i(!1)};return d.useEffect(()=>(document.addEventListener("click",r,!0),()=>{document.removeEventListener("click",r,!0)}),[]),{ref:l,isComponentVisible:p,setIsComponentVisible:i}}const R=({...e})=>n.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",...e,viewBox:"0 0 20 20",fill:"none",children:[n.jsx("circle",{cx:"9.80547",cy:"9.8055",r:"7.49047",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"}),n.jsx("path",{d:"M15.0153 15.4043L17.9519 18.3333",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"})]}),nn=({width:e=16})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 16 16",fill:"none",children:n.jsx("path",{d:"M3.5 8L6.5 11L12.5 5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),en=d.forwardRef(({positionDropdown:e,dropdownLists:p,isComponentVisible:i,searchAble:l,onSearch:r,value:o,handleChangeValue:E,multiSelect:f,searchValue:W,highlightedIndex:k,footer:j,groupLabel:I,onSelectAll:D},F)=>{const L=d.useRef([]);d.useEffect(()=>{var a;k>=0&&L.current[k]&&((a=L.current[k])==null||a.scrollIntoView({block:"nearest"}))},[k]);const A=l?n.jsxs("div",{className:"sa-input-dropdown-container-dropdown-search",children:[n.jsx(R,{strokeWidth:2,width:16,style:{flexShrink:0,color:"var(--sa-dropdown-placeholder-subtle)"}}),n.jsx("input",{onChange:a=>{r&&r(a.target.value)},value:W,autoFocus:!0,placeholder:"Search..."})]}):null;return n.jsx(n.Fragment,{children:i?n.jsxs("div",{className:"sa-input-dropdown-lists-container",onClick:a=>a.stopPropagation(),ref:F,children:[e!=="top"&&A,n.jsxs("div",{className:`sa-input-dropdwon-item-container ${f?"multi":""}`,children:[I&&n.jsxs("div",{className:"sa-input-dropdown-section-header",children:[n.jsx("span",{className:"sa-input-dropdown-section-label",children:I}),f&&D&&n.jsx("button",{className:"sa-input-dropdown-section-select-all",onClick:a=>{a.stopPropagation(),D()},children:"Select all"})]}),p.map((a,z)=>{const O=!!(o!=null&&o.find(m=>m.value===a.value)),H=!!a.description;return n.jsxs("div",{className:["sa-input-dropdwon-item",H?"has-description":"",O?"active":"",z===k?"highlight":"",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),ref:m=>{L.current[z]=m},onClick:()=>E(a.label,a.value),children:[f&&n.jsx("div",{className:"sa-input-dropdwon-item-check",children:O&&n.jsx(nn,{width:16})}),a.icon&&n.jsx("div",{style:{flexShrink:0,display:"flex"},children:d.cloneElement(a.icon,{width:16})}),n.jsxs("div",{style:{minWidth:0,flex:1},children:[n.jsx("p",{className:["sa-input-dropdwon-item-text",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),children:a.label}),a.description&&n.jsx("p",{className:["sa-input-dropdwon-item-text-description",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),children:a.description})]})]},z)})]}),e==="top"&&A,j&&n.jsx("div",{className:"sa-input-dropdown-footer",onClick:a=>a.stopPropagation(),children:j})]}):null})}),on=({children:e,handleChangePosition:p})=>{const i=d.useRef(null);d.useEffect(()=>{var E;const r=()=>{if(i.current){let f=i.current.parentElement;for(;f&&!l(f);)f=f.parentElement;f&&p()}};let o=(E=i.current)==null?void 0:E.parentElement;for(;o&&!l(o);)o=o.parentElement;return o&&o.addEventListener("scroll",r),r(),()=>{o&&o.removeEventListener("scroll",r)}},[]);const l=r=>r&&(r.scrollHeight>r.clientHeight||r.scrollWidth>r.clientWidth);return n.jsx("div",{ref:i,children:e})},U="sa-input-dropdown-styles";(e=>{if(!document.getElementById(U)){const p=document.createElement("style");p.id=U,p.textContent=e,document.head.appendChild(p)}})(Y);const rn=({dropdownLists:e,onChange:p,defaultValue:i,value:l,size:r="md",multiSelect:o,searchAble:E,iconLeft:f,placeholder:W,onSearch:k,error:j,onBlur:I,onFocus:D,disable:F,searchValue:L,variant:A="outline",footer:a,groupLabel:z,onSelectAll:O,fullWidth:H=!
|
|
451
|
+
`;function _(e){const[p,i]=d.useState(e),l=d.useRef(null),r=o=>{l.current&&!l.current.contains(o.target)&&i(!1)};return d.useEffect(()=>(document.addEventListener("click",r,!0),()=>{document.removeEventListener("click",r,!0)}),[]),{ref:l,isComponentVisible:p,setIsComponentVisible:i}}const R=({...e})=>n.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",...e,viewBox:"0 0 20 20",fill:"none",children:[n.jsx("circle",{cx:"9.80547",cy:"9.8055",r:"7.49047",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"}),n.jsx("path",{d:"M15.0153 15.4043L17.9519 18.3333",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"})]}),nn=({width:e=16})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 16 16",fill:"none",children:n.jsx("path",{d:"M3.5 8L6.5 11L12.5 5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),en=d.forwardRef(({positionDropdown:e,dropdownLists:p,isComponentVisible:i,searchAble:l,onSearch:r,value:o,handleChangeValue:E,multiSelect:f,searchValue:W,highlightedIndex:k,footer:j,groupLabel:I,onSelectAll:D},F)=>{const L=d.useRef([]);d.useEffect(()=>{var a;k>=0&&L.current[k]&&((a=L.current[k])==null||a.scrollIntoView({block:"nearest"}))},[k]);const A=l?n.jsxs("div",{className:"sa-input-dropdown-container-dropdown-search",children:[n.jsx(R,{strokeWidth:2,width:16,style:{flexShrink:0,color:"var(--sa-dropdown-placeholder-subtle)"}}),n.jsx("input",{onChange:a=>{r&&r(a.target.value)},value:W,autoFocus:!0,placeholder:"Search..."})]}):null;return n.jsx(n.Fragment,{children:i?n.jsxs("div",{className:"sa-input-dropdown-lists-container",onClick:a=>a.stopPropagation(),ref:F,children:[e!=="top"&&A,n.jsxs("div",{className:`sa-input-dropdwon-item-container ${f?"multi":""}`,children:[I&&n.jsxs("div",{className:"sa-input-dropdown-section-header",children:[n.jsx("span",{className:"sa-input-dropdown-section-label",children:I}),f&&D&&n.jsx("button",{className:"sa-input-dropdown-section-select-all",onClick:a=>{a.stopPropagation(),D()},children:"Select all"})]}),p.map((a,z)=>{const O=!!(o!=null&&o.find(m=>m.value===a.value)),H=!!a.description;return n.jsxs("div",{className:["sa-input-dropdwon-item",H?"has-description":"",O?"active":"",z===k?"highlight":"",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),ref:m=>{L.current[z]=m},onClick:()=>E(a.label,a.value),children:[f&&n.jsx("div",{className:"sa-input-dropdwon-item-check",children:O&&n.jsx(nn,{width:16})}),a.icon&&n.jsx("div",{style:{flexShrink:0,display:"flex"},children:d.cloneElement(a.icon,{width:16})}),n.jsxs("div",{style:{minWidth:0,flex:1},children:[n.jsx("p",{className:["sa-input-dropdwon-item-text",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),children:a.label}),a.description&&n.jsx("p",{className:["sa-input-dropdwon-item-text-description",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),children:a.description})]})]},z)})]}),e==="top"&&A,j&&n.jsx("div",{className:"sa-input-dropdown-footer",onClick:a=>a.stopPropagation(),children:j})]}):null})}),on=({children:e,handleChangePosition:p})=>{const i=d.useRef(null);d.useEffect(()=>{var E;const r=()=>{if(i.current){let f=i.current.parentElement;for(;f&&!l(f);)f=f.parentElement;f&&p()}};let o=(E=i.current)==null?void 0:E.parentElement;for(;o&&!l(o);)o=o.parentElement;return o&&o.addEventListener("scroll",r),r(),()=>{o&&o.removeEventListener("scroll",r)}},[]);const l=r=>r&&(r.scrollHeight>r.clientHeight||r.scrollWidth>r.clientWidth);return n.jsx("div",{ref:i,children:e})},U="sa-input-dropdown-styles";(e=>{if(!document.getElementById(U)){const p=document.createElement("style");p.id=U,p.textContent=e,document.head.appendChild(p)}})(Y);const rn=({dropdownLists:e,onChange:p,defaultValue:i,value:l,size:r="md",multiSelect:o,searchAble:E,iconLeft:f,placeholder:W,onSearch:k,error:j,onBlur:I,onFocus:D,disable:F,searchValue:L,variant:A="outline",footer:a,groupLabel:z,onSelectAll:O,fullWidth:H=!0,label:m,labelPosition:tn="outside-top",required:Z,optional:Q,description:N,helperText:C,errorText:w})=>{const M=["sa-select-field",H?"sa-select-field-fullwidth":""].filter(Boolean).join(" "),S=l!==void 0,$=d.useRef(),ln=j||!!w,[c,B]=d.useState(S?l||[]:i||[]),[pn,X]=d.useState(""),[x,q]=d.useState(-1),h=d.useRef(null),{isComponentVisible:u,ref:V,setIsComponentVisible:P}=_(!1),cn=()=>{P(s=>!s)},G=(s,t)=>{if(o)if(c==null?void 0:c.find(b=>b.value===t)){const b=c.filter(hn=>hn.value!==t);S||B(b),p(b)}else{const b=[...c,{label:s,value:t}];S||B(b),p(b)}else{const v=[{label:s,value:t}];S||B(v),p(v),P(!1)}};d.useEffect(()=>{S&&B(l||[])},[l]),d.useEffect(()=>{S||JSON.stringify($.current)===JSON.stringify(i)||($.current=i,B($.current||[]))},[i]);const fn=()=>c.length?o?c==null?void 0:c.map((s,t)=>n.jsxs("div",{className:"sa-input-dropdown-preview-item",children:[n.jsx("p",{style:{minWidth:"max-content"},children:s==null?void 0:s.label}),n.jsx(an,{onClick:v=>{v.stopPropagation(),G(s.label,s.value)}})]},t)):n.jsx("p",{style:{minWidth:"max-content"},children:c==null?void 0:c[0].label}):n.jsx("p",{className:"sa-input-dropdown-placeholder",children:W}),y=()=>{if(V.current&&h.current){const s=window.innerHeight,t=V.current.getBoundingClientRect(),v=h.current.getBoundingClientRect(),b=t.bottom+v.height;h.current.style.left=`${t.left}px`,h.current.style.width=`${t.width}px`,b>=s-10?(h.current.style.top=`${t.top-v.height-5}px`,X("top")):(h.current.style.top=`${t.top+t.height+4}px`,X("bottom"))}};d.useEffect(()=>(window.addEventListener("scroll",y),window.addEventListener("resize",y),()=>{window.removeEventListener("scroll",y),window.removeEventListener("resize",y)}),[]),d.useEffect(()=>{y()},[u]),d.useEffect(()=>{if(!u||!h.current)return;const s=new ResizeObserver(()=>{y()});return s.observe(h.current),()=>s.disconnect()},[u]),d.useEffect(()=>{u||q(-1)},[u]);const wn=s=>{if(!u){(s.key==="ArrowDown"||s.key==="Enter")&&(s.preventDefault(),P(!0));return}switch(s.key){case"ArrowDown":{s.preventDefault();const t=T(e,x,1);t!==-1&&q(t);break}case"ArrowUp":{s.preventDefault();const t=T(e,x,-1);t!==-1&&q(t);break}case"Enter":{s.preventDefault(),x>=0&&e[x]&&!e[x].disable&&G(e[x].label,e[x].value);break}case"Escape":P(!1);break}},J=r==="lg"||r==="xl"?20:16,K=n.jsx(on,{handleChangePosition:y,children:n.jsxs("div",{className:["sa-input-dropdown-container",A,`sa-input-dropdown-size-${r}`,u?"active":"",ln?"error":"",F?"disable":""].filter(Boolean).join(" "),ref:V,onClick:cn,onKeyDown:wn,tabIndex:0,onBlur:I,onFocus:D,children:[n.jsxs("div",{className:"sa-input-dropdown-preview-container",children:[f?d.cloneElement(f,{width:J,style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0}}):null,n.jsx("div",{className:"sa-input-dropdown-container-preview-item",children:fn()}),u?n.jsx(dn,{width:J}):n.jsx(sn,{width:J})]}),n.jsx(en,{dropdownLists:e,handleChangeValue:G,isComponentVisible:u,positionDropdown:pn,searchAble:!!E,value:c,onSearch:k,ref:h,multiSelect:o,searchValue:L,highlightedIndex:x,footer:a,groupLabel:z,onSelectAll:O})]})});return m?tn==="outside-left"?n.jsxs("div",{className:`${M} sa-select-field-left`,children:[n.jsxs("div",{className:"sa-select-field-left-label",children:[n.jsxs("div",{className:"sa-select-field-label-row",children:[n.jsx("span",{className:"sa-select-field-label-text",children:m}),Q&&n.jsx("span",{className:"sa-select-field-optional-badge",children:"Optional"}),Z&&n.jsx("span",{className:"sa-select-field-required",children:"*"})]}),N&&n.jsx("p",{className:"sa-select-field-helper-top",children:N})]}),n.jsxs("div",{className:"sa-select-field-input-wrap",children:[K,C&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:C}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]})]}):n.jsxs("div",{className:M,children:[n.jsxs("div",{className:"sa-select-field-label-row",children:[n.jsx("span",{className:"sa-select-field-label-text",children:m}),Q&&n.jsx("span",{className:"sa-select-field-optional-badge",children:"Optional"}),Z&&n.jsx("span",{className:"sa-select-field-required",children:"*"})]}),N&&n.jsx("p",{className:"sa-select-field-helper-top",children:N}),K,C&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:C}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]}):n.jsxs("div",{className:M,children:[N&&n.jsx("p",{className:"sa-select-field-helper-top",children:N}),K,C&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:C}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]})},T=(e,p,i)=>{const l=e.length;let r=p+i;for(;r>=0&&r<l;){if(!e[r].disable)return r;r+=i}if(i===1){for(let o=0;o<l;o++)if(!e[o].disable)return o}else for(let o=l-1;o>=0;o--)if(!e[o].disable)return o;return-1},an=e=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 18 18",fill:"none",style:{flexShrink:0,cursor:"pointer"},...e,children:n.jsx("path",{d:"M12 6L6 12M6.00001 6L12 12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),sn=({width:e=16})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 16 16",fill:"none",style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0},children:n.jsx("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),dn=({width:e=16})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 16 16",fill:"none",style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0},children:n.jsx("path",{d:"M4 10L8 6L12 10",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})});g.Dropdown=rn,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})});
|