@starasia/dropdown 3.4.1 → 3.5.0

package/dist/dropdown.es.js

@@ -242,10 +242,10 @@ const sn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
 
 /* === LIST SCROLL AREA === */
 .sa-input-dropdwon-item-container {
-  flex: 1 1 0;
+  flex: 1 1 auto;
   overflow-y: auto;
   min-height: 0;
-  padding: 8px 8px 8px 8px;
+  padding: 8px;
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -585,20 +585,20 @@ const pn = ({ ...e }) => /* @__PURE__ */ l(
     searchAble: s,
     onSearch: o,
     value: r,
-    handleChangeValue: k,
+    handleChangeValue: y,
     multiSelect: h,
     searchValue: H,
-    highlightedIndex: g,
+    highlightedIndex: m,
     footer: A,
-    groupLabel: j,
-    onSelectAll: D
+    groupLabel: O,
+    onSelectAll: j
   }, M) => {
     const z = I([]);
     x(() => {
       var a;
-      g >= 0 && z.current[g] && ((a = z.current[g]) == null || a.scrollIntoView({ block: "nearest" }));
-    }, [g]);
-    const O = s ? /* @__PURE__ */ l("div", { className: "sa-input-dropdown-container-dropdown-search", children: [
+      m >= 0 && z.current[m] && ((a = z.current[m]) == null || a.scrollIntoView({ block: "nearest" }));
+    }, [m]);
+    const D = s ? /* @__PURE__ */ l("div", { className: "sa-input-dropdown-container-dropdown-search", children: [
       /* @__PURE__ */ n(pn, { strokeWidth: 2, width: 16, style: { flexShrink: 0, color: "var(--sa-dropdown-placeholder-subtle)" } }),
       /* @__PURE__ */ n(
         "input",
@@ -619,41 +619,41 @@ const pn = ({ ...e }) => /* @__PURE__ */ l(
         onClick: (a) => a.stopPropagation(),
         ref: M,
         children: [
-          e !== "top" && O,
+          e !== "top" && D,
           /* @__PURE__ */ l(
             "div",
             {
               className: `sa-input-dropdwon-item-container ${h ? "multi" : ""}`,
               children: [
-                j && /* @__PURE__ */ l("div", { className: "sa-input-dropdown-section-header", children: [
-                  /* @__PURE__ */ n("span", { className: "sa-input-dropdown-section-label", children: j }),
-                  h && D && /* @__PURE__ */ n(
+                O && /* @__PURE__ */ l("div", { className: "sa-input-dropdown-section-header", children: [
+                  /* @__PURE__ */ n("span", { className: "sa-input-dropdown-section-label", children: O }),
+                  h && j && /* @__PURE__ */ n(
                     "button",
                     {
                       className: "sa-input-dropdown-section-select-all",
                       onClick: (a) => {
-                        a.stopPropagation(), D();
+                        a.stopPropagation(), j();
                       },
                       children: "Select all"
                     }
                   )
                 ] }),
                 p.map((a, B) => {
-                  const W = !!(r != null && r.find((R) => R.value === a.value)), L = !!a.description;
+                  const W = !!(r != null && r.find((L) => L.value === a.value)), R = !!a.description;
                   return /* @__PURE__ */ l(
                     "div",
                     {
                       className: [
                         "sa-input-dropdwon-item",
-                        L ? "has-description" : "",
+                        R ? "has-description" : "",
                         W ? "active" : "",
-                        B === g ? "highlight" : "",
+                        B === m ? "highlight" : "",
                         a.disable ? "sa-input-dropdwon-item-disable" : ""
                       ].filter(Boolean).join(" "),
-                      ref: (R) => {
-                        z.current[B] = R;
+                      ref: (L) => {
+                        z.current[B] = L;
                       },
-                      onClick: () => k(a.label, a.value),
+                      onClick: () => y(a.label, a.value),
                       children: [
                         h && /* @__PURE__ */ n("div", { className: "sa-input-dropdwon-item-check", children: W && /* @__PURE__ */ n(cn, { width: 16 }) }),
                         a.icon && /* @__PURE__ */ n("div", { style: { flexShrink: 0, display: "flex" }, children: _.cloneElement(a.icon, { width: 16 }) }),
@@ -687,7 +687,7 @@ const pn = ({ ...e }) => /* @__PURE__ */ l(
               ]
             }
           ),
-          e === "top" && O,
+          e === "top" && D,
           A && /* @__PURE__ */ n("div", { className: "sa-input-dropdown-footer", onClick: (a) => a.stopPropagation(), children: A })
         ]
       }
@@ -699,7 +699,7 @@ const pn = ({ ...e }) => /* @__PURE__ */ l(
 }) => {
   const d = I(null);
   x(() => {
-    var k;
+    var y;
     const o = () => {
       if (d.current) {
         let h = d.current.parentElement;
@@ -708,7 +708,7 @@ const pn = ({ ...e }) => /* @__PURE__ */ l(
         h && p();
       }
     };
-    let r = (k = d.current) == null ? void 0 : k.parentElement;
+    let r = (y = d.current) == null ? void 0 : y.parentElement;
     for (; r && !s(r); )
       r = r.parentElement;
     return r && r.addEventListener("scroll", o), o(), () => {
@@ -729,98 +729,105 @@ const mn = ({
   onChange: p,
   defaultValue: d,
   value: s,
-  size: o = "md",
+  size: o = "sm",
   multiSelect: r,
-  searchAble: k,
+  searchAble: y,
   iconLeft: h,
   placeholder: H,
-  onSearch: g,
+  onSearch: m,
   error: A,
-  onBlur: j,
-  onFocus: D,
+  onBlur: O,
+  onFocus: j,
   disable: M,
   searchValue: z,
-  variant: O = "outline",
+  variant: D = "outline",
   footer: a,
   groupLabel: B,
   onSelectAll: W,
   /* field wrapper */
-  label: L,
-  labelPosition: R = "outside-top",
+  label: R,
+  labelPosition: L = "outside-top",
   required: U,
   optional: X,
-  description: y,
-  helperText: N,
+  description: N,
+  helperText: E,
   errorText: w
 }) => {
-  const E = s !== void 0, $ = I(), T = A || !!w, [c, S] = F(
-    E ? s || [] : d || []
-  ), [nn, Z] = F(""), [f, V] = F(-1), v = I(null), { isComponentVisible: m, ref: q, setIsComponentVisible: P } = ln(!1), en = () => {
+  const C = s !== void 0, $ = I(), T = A || !!w, [c, S] = F(
+    C ? s || [] : d || []
+  ), [nn, Z] = F(""), [g, V] = F(-1), u = I(null), { isComponentVisible: f, ref: q, setIsComponentVisible: P } = ln(!1), en = () => {
     P((t) => !t);
   }, K = (t, i) => {
     if (r)
-      if (c == null ? void 0 : c.find((u) => u.value === i)) {
-        const u = c.filter((an) => an.value !== i);
-        E || S(u), p(u);
+      if (c == null ? void 0 : c.find((b) => b.value === i)) {
+        const b = c.filter((an) => an.value !== i);
+        C || S(b), p(b);
       } else {
-        const u = [...c, { label: t, value: i }];
-        E || S(u), p(u);
+        const b = [...c, { label: t, value: i }];
+        C || S(b), p(b);
       }
     else {
-      const b = [{ label: t, value: i }];
-      E || S(b), p(b), P(!1);
+      const v = [{ label: t, value: i }];
+      C || S(v), p(v), P(!1);
     }
   };
   x(() => {
-    E && S(s || []);
+    C && S(s || []);
   }, [s]), x(() => {
-    E || JSON.stringify($.current) === JSON.stringify(d) || ($.current = d, S($.current || []));
+    C || JSON.stringify($.current) === JSON.stringify(d) || ($.current = d, S($.current || []));
   }, [d]);
   const rn = () => c.length ? r ? c == null ? void 0 : c.map((t, i) => /* @__PURE__ */ l("div", { className: "sa-input-dropdown-preview-item", children: [
     /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: t == null ? void 0 : t.label }),
     /* @__PURE__ */ n(
       fn,
       {
-        onClick: (b) => {
-          b.stopPropagation(), K(t.label, t.value);
+        onClick: (v) => {
+          v.stopPropagation(), K(t.label, t.value);
         }
       }
     )
-  ] }, i)) : /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: c == null ? void 0 : c[0].label }) : /* @__PURE__ */ n("p", { className: "sa-input-dropdown-placeholder", children: H }), C = () => {
-    if (q.current && v.current) {
-      const t = window.innerHeight, i = q.current.getBoundingClientRect(), b = v.current.getBoundingClientRect(), u = i.bottom + b.height;
-      v.current.style.left = `${i.left}px`, v.current.style.width = `${i.width}px`, u >= t - 10 ? (v.current.style.top = `${i.top - b.height - 5}px`, Z("top")) : (v.current.style.top = `${i.top + i.height + 4}px`, Z("bottom"));
+  ] }, i)) : /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: c == null ? void 0 : c[0].label }) : /* @__PURE__ */ n("p", { className: "sa-input-dropdown-placeholder", children: H }), k = () => {
+    if (q.current && u.current) {
+      const t = window.innerHeight, i = q.current.getBoundingClientRect(), v = u.current.getBoundingClientRect(), b = i.bottom + v.height;
+      u.current.style.left = `${i.left}px`, u.current.style.width = `${i.width}px`, b >= t - 10 ? (u.current.style.top = `${i.top - v.height - 5}px`, Z("top")) : (u.current.style.top = `${i.top + i.height + 4}px`, Z("bottom"));
     }
   };
-  x(() => (window.addEventListener("scroll", C), window.addEventListener("resize", C), () => {
-    window.removeEventListener("scroll", C), window.removeEventListener("resize", C);
+  x(() => (window.addEventListener("scroll", k), window.addEventListener("resize", k), () => {
+    window.removeEventListener("scroll", k), window.removeEventListener("resize", k);
   }), []), x(() => {
-    C();
-  }, [m]), x(() => {
-    m || V(-1);
-  }, [m]);
+    k();
+  }, [f]), x(() => {
+    if (!f || !u.current)
+      return;
+    const t = new ResizeObserver(() => {
+      k();
+    });
+    return t.observe(u.current), () => t.disconnect();
+  }, [f]), x(() => {
+    f || V(-1);
+  }, [f]);
   const on = (t) => {
-    if (!m) {
+    if (!f) {
       (t.key === "ArrowDown" || t.key === "Enter") && (t.preventDefault(), P(!0));
       return;
     }
     switch (t.key) {
       case "ArrowDown": {
         t.preventDefault();
-        const i = Y(e, f, 1);
+        const i = Y(e, g, 1);
         i !== -1 && V(i);
         break;
       }
       case "ArrowUp": {
         t.preventDefault();
-        const i = Y(e, f, -1);
+        const i = Y(e, g, -1);
         i !== -1 && V(i);
         break;
       }
       case "Enter": {
-        t.preventDefault(), f >= 0 && e[f] && !e[f].disable && K(
-          e[f].label,
-          e[f].value
+        t.preventDefault(), g >= 0 && e[g] && !e[g].disable && K(
+          e[g].label,
+          e[g].value
         );
         break;
       }
@@ -828,14 +835,14 @@ const mn = ({
         P(!1);
         break;
     }
-  }, G = o === "lg" || o === "xl" ? 20 : 16, J = /* @__PURE__ */ n(wn, { handleChangePosition: C, children: /* @__PURE__ */ l(
+  }, G = o === "lg" || o === "xl" ? 20 : 16, J = /* @__PURE__ */ n(wn, { handleChangePosition: k, children: /* @__PURE__ */ l(
     "div",
     {
       className: [
         "sa-input-dropdown-container",
-        O,
+        D,
         `sa-input-dropdown-size-${o}`,
-        m ? "active" : "",
+        f ? "active" : "",
         T ? "error" : "",
         M ? "disable" : ""
       ].filter(Boolean).join(" "),
@@ -843,8 +850,8 @@ const mn = ({
       onClick: en,
       onKeyDown: on,
       tabIndex: 0,
-      onBlur: j,
-      onFocus: D,
+      onBlur: O,
+      onFocus: j,
       children: [
         /* @__PURE__ */ l("div", { className: "sa-input-dropdown-preview-container", children: [
           h ? _.cloneElement(h, {
@@ -852,22 +859,22 @@ const mn = ({
             style: { color: "var(--sa-dropdown-placeholder)", flexShrink: 0 }
           }) : null,
           /* @__PURE__ */ n("div", { className: "sa-input-dropdown-container-preview-item", children: rn() }),
-          m ? /* @__PURE__ */ n(xn, { width: G }) : /* @__PURE__ */ n(bn, { width: G })
+          f ? /* @__PURE__ */ n(xn, { width: G }) : /* @__PURE__ */ n(bn, { width: G })
         ] }),
         /* @__PURE__ */ n(
           hn,
           {
             dropdownLists: e,
             handleChangeValue: K,
-            isComponentVisible: m,
+            isComponentVisible: f,
             positionDropdown: nn,
-            searchAble: !!k,
+            searchAble: !!y,
             value: c,
-            onSearch: g,
-            ref: v,
+            onSearch: m,
+            ref: u,
             multiSelect: r,
             searchValue: z,
-            highlightedIndex: f,
+            highlightedIndex: g,
             footer: a,
             groupLabel: B,
             onSelectAll: W
@@ -876,34 +883,34 @@ const mn = ({
       ]
     }
   ) });
-  return L ? R === "outside-left" ? /* @__PURE__ */ l("div", { className: "sa-select-field sa-select-field-left", children: [
+  return R ? L === "outside-left" ? /* @__PURE__ */ l("div", { className: "sa-select-field sa-select-field-left", children: [
     /* @__PURE__ */ l("div", { className: "sa-select-field-left-label", children: [
       /* @__PURE__ */ l("div", { className: "sa-select-field-label-row", children: [
-        /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: L }),
+        /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: R }),
         X && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
         U && /* @__PURE__ */ n("span", { className: "sa-select-field-required", children: "*" })
       ] }),
-      y && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: y })
+      N && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: N })
     ] }),
     /* @__PURE__ */ l("div", { className: "sa-select-field-input-wrap", children: [
       J,
-      N && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: N }),
+      E && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: E }),
       w && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: w })
     ] })
   ] }) : /* @__PURE__ */ l("div", { className: "sa-select-field", children: [
     /* @__PURE__ */ l("div", { className: "sa-select-field-label-row", children: [
-      /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: L }),
+      /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: R }),
       X && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
       U && /* @__PURE__ */ n("span", { className: "sa-select-field-required", children: "*" })
     ] }),
-    y && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: y }),
+    N && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: N }),
     J,
-    N && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: N }),
+    E && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: E }),
     w && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: w })
   ] }) : /* @__PURE__ */ l("div", { className: "sa-select-field", children: [
-    y && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: y }),
+    N && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: N }),
     J,
-    N && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: N }),
+    E && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: E }),
     w && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: w })
   ] });
 }, Y = (e, p, d) => {

package/dist/dropdown.umd.js

@@ -1,4 +1,4 @@
-(function(b,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],n):(b=typeof globalThis<"u"?globalThis:b||self,n(b.Dropdown={},b.jsxRuntime,b.React))})(this,function(b,n,s){"use strict";const Q=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
+(function(x,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],n):(x=typeof globalThis<"u"?globalThis:x||self,n(x.Dropdown={},x.jsxRuntime,x.React))})(this,function(x,n,s){"use strict";const Q=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
 * {
   margin: 0;
   padding: 0;
@@ -240,10 +240,10 @@
 
 /* === LIST SCROLL AREA === */
 .sa-input-dropdwon-item-container {
-  flex: 1 1 0;
+  flex: 1 1 auto;
   overflow-y: auto;
   min-height: 0;
-  padding: 8px 8px 8px 8px;
+  padding: 8px;
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -515,4 +515,4 @@
   height: 100%;
   width: 100%;
 }
-`;function Y(e){const[p,i]=s.useState(e),l=s.useRef(null),o=r=>{l.current&&!l.current.contains(r.target)&&i(!1)};return s.useEffect(()=>(document.addEventListener("click",o,!0),()=>{document.removeEventListener("click",o,!0)}),[]),{ref:l,isComponentVisible:p,setIsComponentVisible:i}}const _=({...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"})]}),R=({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"})}),nn=s.forwardRef(({positionDropdown:e,dropdownLists:p,isComponentVisible:i,searchAble:l,onSearch:o,value:r,handleChangeValue:y,multiSelect:h,searchValue:F,highlightedIndex:g,footer:I,groupLabel:A,onSelectAll:D},H)=>{const z=s.useRef([]);s.useEffect(()=>{var a;g>=0&&z.current[g]&&((a=z.current[g])==null||a.scrollIntoView({block:"nearest"}))},[g]);const O=l?n.jsxs("div",{className:"sa-input-dropdown-container-dropdown-search",children:[n.jsx(_,{strokeWidth:2,width:16,style:{flexShrink:0,color:"var(--sa-dropdown-placeholder-subtle)"}}),n.jsx("input",{onChange:a=>{o&&o(a.target.value)},value:F,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:H,children:[e!=="top"&&O,n.jsxs("div",{className:`sa-input-dropdwon-item-container ${h?"multi":""}`,children:[A&&n.jsxs("div",{className:"sa-input-dropdown-section-header",children:[n.jsx("span",{className:"sa-input-dropdown-section-label",children:A}),h&&D&&n.jsx("button",{className:"sa-input-dropdown-section-select-all",onClick:a=>{a.stopPropagation(),D()},children:"Select all"})]}),p.map((a,S)=>{const P=!!(r!=null&&r.find(L=>L.value===a.value)),B=!!a.description;return n.jsxs("div",{className:["sa-input-dropdwon-item",B?"has-description":"",P?"active":"",S===g?"highlight":"",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),ref:L=>{z.current[S]=L},onClick:()=>y(a.label,a.value),children:[h&&n.jsx("div",{className:"sa-input-dropdwon-item-check",children:P&&n.jsx(R,{width:16})}),a.icon&&n.jsx("div",{style:{flexShrink:0,display:"flex"},children:s.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})]})]},S)})]}),e==="top"&&O,I&&n.jsx("div",{className:"sa-input-dropdown-footer",onClick:a=>a.stopPropagation(),children:I})]}):null})}),en=({children:e,handleChangePosition:p})=>{const i=s.useRef(null);s.useEffect(()=>{var y;const o=()=>{if(i.current){let h=i.current.parentElement;for(;h&&!l(h);)h=h.parentElement;h&&p()}};let r=(y=i.current)==null?void 0:y.parentElement;for(;r&&!l(r);)r=r.parentElement;return r&&r.addEventListener("scroll",o),o(),()=>{r&&r.removeEventListener("scroll",o)}},[]);const l=o=>o&&(o.scrollHeight>o.clientHeight||o.scrollWidth>o.clientWidth);return n.jsx("div",{ref:i,children:e})},J="sa-input-dropdown-styles";(e=>{if(!document.getElementById(J)){const p=document.createElement("style");p.id=J,p.textContent=e,document.head.appendChild(p)}})(Q);const rn=({dropdownLists:e,onChange:p,defaultValue:i,value:l,size:o="md",multiSelect:r,searchAble:y,iconLeft:h,placeholder:F,onSearch:g,error:I,onBlur:A,onFocus:D,disable:H,searchValue:z,variant:O="outline",footer:a,groupLabel:S,onSelectAll:P,label:B,labelPosition:L="outside-top",required:T,optional:X,description:m,helperText:E,errorText:w})=>{const N=l!==void 0,M=s.useRef(),sn=I||!!w,[c,j]=s.useState(N?l||[]:i||[]),[tn,Z]=s.useState(""),[u,q]=s.useState(-1),v=s.useRef(null),{isComponentVisible:k,ref:$,setIsComponentVisible:W}=Y(!1),ln=()=>{W(d=>!d)},V=(d,t)=>{if(r)if(c==null?void 0:c.find(f=>f.value===t)){const f=c.filter(hn=>hn.value!==t);N||j(f),p(f)}else{const f=[...c,{label:d,value:t}];N||j(f),p(f)}else{const x=[{label:d,value:t}];N||j(x),p(x),W(!1)}};s.useEffect(()=>{N&&j(l||[])},[l]),s.useEffect(()=>{N||JSON.stringify(M.current)===JSON.stringify(i)||(M.current=i,j(M.current||[]))},[i]);const pn=()=>c.length?r?c==null?void 0:c.map((d,t)=>n.jsxs("div",{className:"sa-input-dropdown-preview-item",children:[n.jsx("p",{style:{minWidth:"max-content"},children:d==null?void 0:d.label}),n.jsx(on,{onClick:x=>{x.stopPropagation(),V(d.label,d.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:F}),C=()=>{if($.current&&v.current){const d=window.innerHeight,t=$.current.getBoundingClientRect(),x=v.current.getBoundingClientRect(),f=t.bottom+x.height;v.current.style.left=`${t.left}px`,v.current.style.width=`${t.width}px`,f>=d-10?(v.current.style.top=`${t.top-x.height-5}px`,Z("top")):(v.current.style.top=`${t.top+t.height+4}px`,Z("bottom"))}};s.useEffect(()=>(window.addEventListener("scroll",C),window.addEventListener("resize",C),()=>{window.removeEventListener("scroll",C),window.removeEventListener("resize",C)}),[]),s.useEffect(()=>{C()},[k]),s.useEffect(()=>{k||q(-1)},[k]);const cn=d=>{if(!k){(d.key==="ArrowDown"||d.key==="Enter")&&(d.preventDefault(),W(!0));return}switch(d.key){case"ArrowDown":{d.preventDefault();const t=U(e,u,1);t!==-1&&q(t);break}case"ArrowUp":{d.preventDefault();const t=U(e,u,-1);t!==-1&&q(t);break}case"Enter":{d.preventDefault(),u>=0&&e[u]&&!e[u].disable&&V(e[u].label,e[u].value);break}case"Escape":W(!1);break}},K=o==="lg"||o==="xl"?20:16,G=n.jsx(en,{handleChangePosition:C,children:n.jsxs("div",{className:["sa-input-dropdown-container",O,`sa-input-dropdown-size-${o}`,k?"active":"",sn?"error":"",H?"disable":""].filter(Boolean).join(" "),ref:$,onClick:ln,onKeyDown:cn,tabIndex:0,onBlur:A,onFocus:D,children:[n.jsxs("div",{className:"sa-input-dropdown-preview-container",children:[h?s.cloneElement(h,{width:K,style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0}}):null,n.jsx("div",{className:"sa-input-dropdown-container-preview-item",children:pn()}),k?n.jsx(dn,{width:K}):n.jsx(an,{width:K})]}),n.jsx(nn,{dropdownLists:e,handleChangeValue:V,isComponentVisible:k,positionDropdown:tn,searchAble:!!y,value:c,onSearch:g,ref:v,multiSelect:r,searchValue:z,highlightedIndex:u,footer:a,groupLabel:S,onSelectAll:P})]})});return B?L==="outside-left"?n.jsxs("div",{className:"sa-select-field 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:B}),X&&n.jsx("span",{className:"sa-select-field-optional-badge",children:"Optional"}),T&&n.jsx("span",{className:"sa-select-field-required",children:"*"})]}),m&&n.jsx("p",{className:"sa-select-field-helper-top",children:m})]}),n.jsxs("div",{className:"sa-select-field-input-wrap",children:[G,E&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:E}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]})]}):n.jsxs("div",{className:"sa-select-field",children:[n.jsxs("div",{className:"sa-select-field-label-row",children:[n.jsx("span",{className:"sa-select-field-label-text",children:B}),X&&n.jsx("span",{className:"sa-select-field-optional-badge",children:"Optional"}),T&&n.jsx("span",{className:"sa-select-field-required",children:"*"})]}),m&&n.jsx("p",{className:"sa-select-field-helper-top",children:m}),G,E&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:E}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]}):n.jsxs("div",{className:"sa-select-field",children:[m&&n.jsx("p",{className:"sa-select-field-helper-top",children:m}),G,E&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:E}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]})},U=(e,p,i)=>{const l=e.length;let o=p+i;for(;o>=0&&o<l;){if(!e[o].disable)return o;o+=i}if(i===1){for(let r=0;r<l;r++)if(!e[r].disable)return r}else for(let r=l-1;r>=0;r--)if(!e[r].disable)return r;return-1},on=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"})}),an=({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"})});b.Dropdown=rn,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})});
+`;function Y(e){const[p,i]=s.useState(e),l=s.useRef(null),o=r=>{l.current&&!l.current.contains(r.target)&&i(!1)};return s.useEffect(()=>(document.addEventListener("click",o,!0),()=>{document.removeEventListener("click",o,!0)}),[]),{ref:l,isComponentVisible:p,setIsComponentVisible:i}}const _=({...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"})]}),R=({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"})}),nn=s.forwardRef(({positionDropdown:e,dropdownLists:p,isComponentVisible:i,searchAble:l,onSearch:o,value:r,handleChangeValue:m,multiSelect:h,searchValue:F,highlightedIndex:k,footer:I,groupLabel:A,onSelectAll:D},H)=>{const z=s.useRef([]);s.useEffect(()=>{var a;k>=0&&z.current[k]&&((a=z.current[k])==null||a.scrollIntoView({block:"nearest"}))},[k]);const O=l?n.jsxs("div",{className:"sa-input-dropdown-container-dropdown-search",children:[n.jsx(_,{strokeWidth:2,width:16,style:{flexShrink:0,color:"var(--sa-dropdown-placeholder-subtle)"}}),n.jsx("input",{onChange:a=>{o&&o(a.target.value)},value:F,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:H,children:[e!=="top"&&O,n.jsxs("div",{className:`sa-input-dropdwon-item-container ${h?"multi":""}`,children:[A&&n.jsxs("div",{className:"sa-input-dropdown-section-header",children:[n.jsx("span",{className:"sa-input-dropdown-section-label",children:A}),h&&D&&n.jsx("button",{className:"sa-input-dropdown-section-select-all",onClick:a=>{a.stopPropagation(),D()},children:"Select all"})]}),p.map((a,S)=>{const P=!!(r!=null&&r.find(L=>L.value===a.value)),B=!!a.description;return n.jsxs("div",{className:["sa-input-dropdwon-item",B?"has-description":"",P?"active":"",S===k?"highlight":"",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),ref:L=>{z.current[S]=L},onClick:()=>m(a.label,a.value),children:[h&&n.jsx("div",{className:"sa-input-dropdwon-item-check",children:P&&n.jsx(R,{width:16})}),a.icon&&n.jsx("div",{style:{flexShrink:0,display:"flex"},children:s.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})]})]},S)})]}),e==="top"&&O,I&&n.jsx("div",{className:"sa-input-dropdown-footer",onClick:a=>a.stopPropagation(),children:I})]}):null})}),en=({children:e,handleChangePosition:p})=>{const i=s.useRef(null);s.useEffect(()=>{var m;const o=()=>{if(i.current){let h=i.current.parentElement;for(;h&&!l(h);)h=h.parentElement;h&&p()}};let r=(m=i.current)==null?void 0:m.parentElement;for(;r&&!l(r);)r=r.parentElement;return r&&r.addEventListener("scroll",o),o(),()=>{r&&r.removeEventListener("scroll",o)}},[]);const l=o=>o&&(o.scrollHeight>o.clientHeight||o.scrollWidth>o.clientWidth);return n.jsx("div",{ref:i,children:e})},J="sa-input-dropdown-styles";(e=>{if(!document.getElementById(J)){const p=document.createElement("style");p.id=J,p.textContent=e,document.head.appendChild(p)}})(Q);const rn=({dropdownLists:e,onChange:p,defaultValue:i,value:l,size:o="sm",multiSelect:r,searchAble:m,iconLeft:h,placeholder:F,onSearch:k,error:I,onBlur:A,onFocus:D,disable:H,searchValue:z,variant:O="outline",footer:a,groupLabel:S,onSelectAll:P,label:B,labelPosition:L="outside-top",required:T,optional:X,description:E,helperText:N,errorText:w})=>{const C=l!==void 0,M=s.useRef(),sn=I||!!w,[c,j]=s.useState(C?l||[]:i||[]),[tn,Z]=s.useState(""),[g,q]=s.useState(-1),f=s.useRef(null),{isComponentVisible:b,ref:$,setIsComponentVisible:W}=Y(!1),ln=()=>{W(d=>!d)},V=(d,t)=>{if(r)if(c==null?void 0:c.find(u=>u.value===t)){const u=c.filter(hn=>hn.value!==t);C||j(u),p(u)}else{const u=[...c,{label:d,value:t}];C||j(u),p(u)}else{const v=[{label:d,value:t}];C||j(v),p(v),W(!1)}};s.useEffect(()=>{C&&j(l||[])},[l]),s.useEffect(()=>{C||JSON.stringify(M.current)===JSON.stringify(i)||(M.current=i,j(M.current||[]))},[i]);const pn=()=>c.length?r?c==null?void 0:c.map((d,t)=>n.jsxs("div",{className:"sa-input-dropdown-preview-item",children:[n.jsx("p",{style:{minWidth:"max-content"},children:d==null?void 0:d.label}),n.jsx(on,{onClick:v=>{v.stopPropagation(),V(d.label,d.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:F}),y=()=>{if($.current&&f.current){const d=window.innerHeight,t=$.current.getBoundingClientRect(),v=f.current.getBoundingClientRect(),u=t.bottom+v.height;f.current.style.left=`${t.left}px`,f.current.style.width=`${t.width}px`,u>=d-10?(f.current.style.top=`${t.top-v.height-5}px`,Z("top")):(f.current.style.top=`${t.top+t.height+4}px`,Z("bottom"))}};s.useEffect(()=>(window.addEventListener("scroll",y),window.addEventListener("resize",y),()=>{window.removeEventListener("scroll",y),window.removeEventListener("resize",y)}),[]),s.useEffect(()=>{y()},[b]),s.useEffect(()=>{if(!b||!f.current)return;const d=new ResizeObserver(()=>{y()});return d.observe(f.current),()=>d.disconnect()},[b]),s.useEffect(()=>{b||q(-1)},[b]);const cn=d=>{if(!b){(d.key==="ArrowDown"||d.key==="Enter")&&(d.preventDefault(),W(!0));return}switch(d.key){case"ArrowDown":{d.preventDefault();const t=U(e,g,1);t!==-1&&q(t);break}case"ArrowUp":{d.preventDefault();const t=U(e,g,-1);t!==-1&&q(t);break}case"Enter":{d.preventDefault(),g>=0&&e[g]&&!e[g].disable&&V(e[g].label,e[g].value);break}case"Escape":W(!1);break}},K=o==="lg"||o==="xl"?20:16,G=n.jsx(en,{handleChangePosition:y,children:n.jsxs("div",{className:["sa-input-dropdown-container",O,`sa-input-dropdown-size-${o}`,b?"active":"",sn?"error":"",H?"disable":""].filter(Boolean).join(" "),ref:$,onClick:ln,onKeyDown:cn,tabIndex:0,onBlur:A,onFocus:D,children:[n.jsxs("div",{className:"sa-input-dropdown-preview-container",children:[h?s.cloneElement(h,{width:K,style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0}}):null,n.jsx("div",{className:"sa-input-dropdown-container-preview-item",children:pn()}),b?n.jsx(dn,{width:K}):n.jsx(an,{width:K})]}),n.jsx(nn,{dropdownLists:e,handleChangeValue:V,isComponentVisible:b,positionDropdown:tn,searchAble:!!m,value:c,onSearch:k,ref:f,multiSelect:r,searchValue:z,highlightedIndex:g,footer:a,groupLabel:S,onSelectAll:P})]})});return B?L==="outside-left"?n.jsxs("div",{className:"sa-select-field 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:B}),X&&n.jsx("span",{className:"sa-select-field-optional-badge",children:"Optional"}),T&&n.jsx("span",{className:"sa-select-field-required",children:"*"})]}),E&&n.jsx("p",{className:"sa-select-field-helper-top",children:E})]}),n.jsxs("div",{className:"sa-select-field-input-wrap",children:[G,N&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:N}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]})]}):n.jsxs("div",{className:"sa-select-field",children:[n.jsxs("div",{className:"sa-select-field-label-row",children:[n.jsx("span",{className:"sa-select-field-label-text",children:B}),X&&n.jsx("span",{className:"sa-select-field-optional-badge",children:"Optional"}),T&&n.jsx("span",{className:"sa-select-field-required",children:"*"})]}),E&&n.jsx("p",{className:"sa-select-field-helper-top",children:E}),G,N&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:N}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]}):n.jsxs("div",{className:"sa-select-field",children:[E&&n.jsx("p",{className:"sa-select-field-helper-top",children:E}),G,N&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:N}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]})},U=(e,p,i)=>{const l=e.length;let o=p+i;for(;o>=0&&o<l;){if(!e[o].disable)return o;o+=i}if(i===1){for(let r=0;r<l;r++)if(!e[r].disable)return r}else for(let r=l-1;r>=0;r--)if(!e[r].disable)return r;return-1},on=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"})}),an=({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"})});x.Dropdown=rn,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starasia/dropdown",
-  "version": "3.4.1",
+  "version": "3.5.0",
   "description": "dropdown component for starasia UI",
   "author": "Prawito Hudoro",
   "main": "dist/dropdown.umd.js",