@starasia/dropdown 3.4.2 → 3.5.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.
Files changed (3) hide show
  1. package/dist/dropdown.es.js +88 -81
  2. package/dist/dropdown.umd.js +2 -2
  3. package/package.json +1 -1
package/dist/dropdown.es.js CHANGED
@@ -585,20 +585,20 @@ const pn = ({ ...e }) => /* @__PURE__ */ l(
585
585
  searchAble: s,
586
586
  onSearch: o,
587
587
  value: r,
588
- handleChangeValue: k,
588
+ handleChangeValue: y,
589
589
  multiSelect: h,
590
590
  searchValue: H,
591
- highlightedIndex: g,
591
+ highlightedIndex: m,
592
592
  footer: A,
593
- groupLabel: j,
594
- onSelectAll: D
593
+ groupLabel: O,
594
+ onSelectAll: j
595
595
  }, M) => {
596
596
  const z = I([]);
597
597
  x(() => {
598
598
  var a;
599
- g >= 0 && z.current[g] && ((a = z.current[g]) == null || a.scrollIntoView({ block: "nearest" }));
600
- }, [g]);
601
- const O = s ? /* @__PURE__ */ l("div", { className: "sa-input-dropdown-container-dropdown-search", children: [
599
+ m >= 0 && z.current[m] && ((a = z.current[m]) == null || a.scrollIntoView({ block: "nearest" }));
600
+ }, [m]);
601
+ const D = s ? /* @__PURE__ */ l("div", { className: "sa-input-dropdown-container-dropdown-search", children: [
602
602
  /* @__PURE__ */ n(pn, { strokeWidth: 2, width: 16, style: { flexShrink: 0, color: "var(--sa-dropdown-placeholder-subtle)" } }),
603
603
  /* @__PURE__ */ n(
604
604
  "input",
@@ -619,41 +619,41 @@ const pn = ({ ...e }) => /* @__PURE__ */ l(
619
619
  onClick: (a) => a.stopPropagation(),
620
620
  ref: M,
621
621
  children: [
622
- e !== "top" && O,
622
+ e !== "top" && D,
623
623
  /* @__PURE__ */ l(
624
624
  "div",
625
625
  {
626
626
  className: `sa-input-dropdwon-item-container ${h ? "multi" : ""}`,
627
627
  children: [
628
- j && /* @__PURE__ */ l("div", { className: "sa-input-dropdown-section-header", children: [
629
- /* @__PURE__ */ n("span", { className: "sa-input-dropdown-section-label", children: j }),
630
- h && D && /* @__PURE__ */ n(
628
+ O && /* @__PURE__ */ l("div", { className: "sa-input-dropdown-section-header", children: [
629
+ /* @__PURE__ */ n("span", { className: "sa-input-dropdown-section-label", children: O }),
630
+ h && j && /* @__PURE__ */ n(
631
631
  "button",
632
632
  {
633
633
  className: "sa-input-dropdown-section-select-all",
634
634
  onClick: (a) => {
635
- a.stopPropagation(), D();
635
+ a.stopPropagation(), j();
636
636
  },
637
637
  children: "Select all"
638
638
  }
639
639
  )
640
640
  ] }),
641
641
  p.map((a, B) => {
642
- const W = !!(r != null && r.find((R) => R.value === a.value)), L = !!a.description;
642
+ const W = !!(r != null && r.find((L) => L.value === a.value)), R = !!a.description;
643
643
  return /* @__PURE__ */ l(
644
644
  "div",
645
645
  {
646
646
  className: [
647
647
  "sa-input-dropdwon-item",
648
- L ? "has-description" : "",
648
+ R ? "has-description" : "",
649
649
  W ? "active" : "",
650
- B === g ? "highlight" : "",
650
+ B === m ? "highlight" : "",
651
651
  a.disable ? "sa-input-dropdwon-item-disable" : ""
652
652
  ].filter(Boolean).join(" "),
653
- ref: (R) => {
654
- z.current[B] = R;
653
+ ref: (L) => {
654
+ z.current[B] = L;
655
655
  },
656
- onClick: () => k(a.label, a.value),
656
+ onClick: () => y(a.label, a.value),
657
657
  children: [
658
658
  h && /* @__PURE__ */ n("div", { className: "sa-input-dropdwon-item-check", children: W && /* @__PURE__ */ n(cn, { width: 16 }) }),
659
659
  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(
687
687
  ]
688
688
  }
689
689
  ),
690
- e === "top" && O,
690
+ e === "top" && D,
691
691
  A && /* @__PURE__ */ n("div", { className: "sa-input-dropdown-footer", onClick: (a) => a.stopPropagation(), children: A })
692
692
  ]
693
693
  }
@@ -699,7 +699,7 @@ const pn = ({ ...e }) => /* @__PURE__ */ l(
699
699
  }) => {
700
700
  const d = I(null);
701
701
  x(() => {
702
- var k;
702
+ var y;
703
703
  const o = () => {
704
704
  if (d.current) {
705
705
  let h = d.current.parentElement;
@@ -708,7 +708,7 @@ const pn = ({ ...e }) => /* @__PURE__ */ l(
708
708
  h && p();
709
709
  }
710
710
  };
711
- let r = (k = d.current) == null ? void 0 : k.parentElement;
711
+ let r = (y = d.current) == null ? void 0 : y.parentElement;
712
712
  for (; r && !s(r); )
713
713
  r = r.parentElement;
714
714
  return r && r.addEventListener("scroll", o), o(), () => {
@@ -729,98 +729,105 @@ const mn = ({
729
729
  onChange: p,
730
730
  defaultValue: d,
731
731
  value: s,
732
- size: o = "md",
732
+ size: o = "sm",
733
733
  multiSelect: r,
734
- searchAble: k,
734
+ searchAble: y,
735
735
  iconLeft: h,
736
736
  placeholder: H,
737
- onSearch: g,
737
+ onSearch: m,
738
738
  error: A,
739
- onBlur: j,
740
- onFocus: D,
739
+ onBlur: O,
740
+ onFocus: j,
741
741
  disable: M,
742
742
  searchValue: z,
743
- variant: O = "outline",
743
+ variant: D = "outline",
744
744
  footer: a,
745
745
  groupLabel: B,
746
746
  onSelectAll: W,
747
747
  /* field wrapper */
748
- label: L,
749
- labelPosition: R = "outside-top",
748
+ label: R,
749
+ labelPosition: L = "outside-top",
750
750
  required: U,
751
751
  optional: X,
752
- description: y,
753
- helperText: N,
752
+ description: N,
753
+ helperText: E,
754
754
  errorText: w
755
755
  }) => {
756
- const E = s !== void 0, $ = I(), T = A || !!w, [c, S] = F(
757
- E ? s || [] : d || []
758
- ), [nn, Z] = F(""), [f, V] = F(-1), v = I(null), { isComponentVisible: m, ref: q, setIsComponentVisible: P } = ln(!1), en = () => {
756
+ const C = s !== void 0, $ = I(), T = A || !!w, [c, S] = F(
757
+ C ? s || [] : d || []
758
+ ), [nn, Z] = F(""), [g, V] = F(-1), u = I(null), { isComponentVisible: f, ref: q, setIsComponentVisible: P } = ln(!1), en = () => {
759
759
  P((t) => !t);
760
760
  }, K = (t, i) => {
761
761
  if (r)
762
- if (c == null ? void 0 : c.find((u) => u.value === i)) {
763
- const u = c.filter((an) => an.value !== i);
764
- E || S(u), p(u);
762
+ if (c == null ? void 0 : c.find((b) => b.value === i)) {
763
+ const b = c.filter((an) => an.value !== i);
764
+ C || S(b), p(b);
765
765
  } else {
766
- const u = [...c, { label: t, value: i }];
767
- E || S(u), p(u);
766
+ const b = [...c, { label: t, value: i }];
767
+ C || S(b), p(b);
768
768
  }
769
769
  else {
770
- const b = [{ label: t, value: i }];
771
- E || S(b), p(b), P(!1);
770
+ const v = [{ label: t, value: i }];
771
+ C || S(v), p(v), P(!1);
772
772
  }
773
773
  };
774
774
  x(() => {
775
- E && S(s || []);
775
+ C && S(s || []);
776
776
  }, [s]), x(() => {
777
- E || JSON.stringify($.current) === JSON.stringify(d) || ($.current = d, S($.current || []));
777
+ C || JSON.stringify($.current) === JSON.stringify(d) || ($.current = d, S($.current || []));
778
778
  }, [d]);
779
779
  const rn = () => c.length ? r ? c == null ? void 0 : c.map((t, i) => /* @__PURE__ */ l("div", { className: "sa-input-dropdown-preview-item", children: [
780
780
  /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: t == null ? void 0 : t.label }),
781
781
  /* @__PURE__ */ n(
782
782
  fn,
783
783
  {
784
- onClick: (b) => {
785
- b.stopPropagation(), K(t.label, t.value);
784
+ onClick: (v) => {
785
+ v.stopPropagation(), K(t.label, t.value);
786
786
  }
787
787
  }
788
788
  )
789
- ] }, 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 = () => {
790
- if (q.current && v.current) {
791
- const t = window.innerHeight, i = q.current.getBoundingClientRect(), b = v.current.getBoundingClientRect(), u = i.bottom + b.height;
792
- 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"));
789
+ ] }, 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 = () => {
790
+ if (q.current && u.current) {
791
+ const t = window.innerHeight, i = q.current.getBoundingClientRect(), v = u.current.getBoundingClientRect(), b = i.bottom + v.height;
792
+ 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"));
793
793
  }
794
794
  };
795
- x(() => (window.addEventListener("scroll", C), window.addEventListener("resize", C), () => {
796
- window.removeEventListener("scroll", C), window.removeEventListener("resize", C);
795
+ x(() => (window.addEventListener("scroll", k), window.addEventListener("resize", k), () => {
796
+ window.removeEventListener("scroll", k), window.removeEventListener("resize", k);
797
797
  }), []), x(() => {
798
- C();
799
- }, [m]), x(() => {
800
- m || V(-1);
801
- }, [m]);
798
+ k();
799
+ }, [f]), x(() => {
800
+ if (!f || !u.current)
801
+ return;
802
+ const t = new ResizeObserver(() => {
803
+ k();
804
+ });
805
+ return t.observe(u.current), () => t.disconnect();
806
+ }, [f]), x(() => {
807
+ f || V(-1);
808
+ }, [f]);
802
809
  const on = (t) => {
803
- if (!m) {
810
+ if (!f) {
804
811
  (t.key === "ArrowDown" || t.key === "Enter") && (t.preventDefault(), P(!0));
805
812
  return;
806
813
  }
807
814
  switch (t.key) {
808
815
  case "ArrowDown": {
809
816
  t.preventDefault();
810
- const i = Y(e, f, 1);
817
+ const i = Y(e, g, 1);
811
818
  i !== -1 && V(i);
812
819
  break;
813
820
  }
814
821
  case "ArrowUp": {
815
822
  t.preventDefault();
816
- const i = Y(e, f, -1);
823
+ const i = Y(e, g, -1);
817
824
  i !== -1 && V(i);
818
825
  break;
819
826
  }
820
827
  case "Enter": {
821
- t.preventDefault(), f >= 0 && e[f] && !e[f].disable && K(
822
- e[f].label,
823
- e[f].value
828
+ t.preventDefault(), g >= 0 && e[g] && !e[g].disable && K(
829
+ e[g].label,
830
+ e[g].value
824
831
  );
825
832
  break;
826
833
  }
@@ -828,14 +835,14 @@ const mn = ({
828
835
  P(!1);
829
836
  break;
830
837
  }
831
- }, G = o === "lg" || o === "xl" ? 20 : 16, J = /* @__PURE__ */ n(wn, { handleChangePosition: C, children: /* @__PURE__ */ l(
838
+ }, G = o === "lg" || o === "xl" ? 20 : 16, J = /* @__PURE__ */ n(wn, { handleChangePosition: k, children: /* @__PURE__ */ l(
832
839
  "div",
833
840
  {
834
841
  className: [
835
842
  "sa-input-dropdown-container",
836
- O,
843
+ D,
837
844
  `sa-input-dropdown-size-${o}`,
838
- m ? "active" : "",
845
+ f ? "active" : "",
839
846
  T ? "error" : "",
840
847
  M ? "disable" : ""
841
848
  ].filter(Boolean).join(" "),
@@ -843,8 +850,8 @@ const mn = ({
843
850
  onClick: en,
844
851
  onKeyDown: on,
845
852
  tabIndex: 0,
846
- onBlur: j,
847
- onFocus: D,
853
+ onBlur: O,
854
+ onFocus: j,
848
855
  children: [
849
856
  /* @__PURE__ */ l("div", { className: "sa-input-dropdown-preview-container", children: [
850
857
  h ? _.cloneElement(h, {
@@ -852,22 +859,22 @@ const mn = ({
852
859
  style: { color: "var(--sa-dropdown-placeholder)", flexShrink: 0 }
853
860
  }) : null,
854
861
  /* @__PURE__ */ n("div", { className: "sa-input-dropdown-container-preview-item", children: rn() }),
855
- m ? /* @__PURE__ */ n(xn, { width: G }) : /* @__PURE__ */ n(bn, { width: G })
862
+ f ? /* @__PURE__ */ n(xn, { width: G }) : /* @__PURE__ */ n(bn, { width: G })
856
863
  ] }),
857
864
  /* @__PURE__ */ n(
858
865
  hn,
859
866
  {
860
867
  dropdownLists: e,
861
868
  handleChangeValue: K,
862
- isComponentVisible: m,
869
+ isComponentVisible: f,
863
870
  positionDropdown: nn,
864
- searchAble: !!k,
871
+ searchAble: !!y,
865
872
  value: c,
866
- onSearch: g,
867
- ref: v,
873
+ onSearch: m,
874
+ ref: u,
868
875
  multiSelect: r,
869
876
  searchValue: z,
870
- highlightedIndex: f,
877
+ highlightedIndex: g,
871
878
  footer: a,
872
879
  groupLabel: B,
873
880
  onSelectAll: W
@@ -876,34 +883,34 @@ const mn = ({
876
883
  ]
877
884
  }
878
885
  ) });
879
- return L ? R === "outside-left" ? /* @__PURE__ */ l("div", { className: "sa-select-field sa-select-field-left", children: [
886
+ return R ? L === "outside-left" ? /* @__PURE__ */ l("div", { className: "sa-select-field sa-select-field-left", children: [
880
887
  /* @__PURE__ */ l("div", { className: "sa-select-field-left-label", children: [
881
888
  /* @__PURE__ */ l("div", { className: "sa-select-field-label-row", children: [
882
- /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: L }),
889
+ /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: R }),
883
890
  X && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
884
891
  U && /* @__PURE__ */ n("span", { className: "sa-select-field-required", children: "*" })
885
892
  ] }),
886
- y && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: y })
893
+ N && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: N })
887
894
  ] }),
888
895
  /* @__PURE__ */ l("div", { className: "sa-select-field-input-wrap", children: [
889
896
  J,
890
- N && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: N }),
897
+ E && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: E }),
891
898
  w && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: w })
892
899
  ] })
893
900
  ] }) : /* @__PURE__ */ l("div", { className: "sa-select-field", children: [
894
901
  /* @__PURE__ */ l("div", { className: "sa-select-field-label-row", children: [
895
- /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: L }),
902
+ /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: R }),
896
903
  X && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
897
904
  U && /* @__PURE__ */ n("span", { className: "sa-select-field-required", children: "*" })
898
905
  ] }),
899
- y && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: y }),
906
+ N && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: N }),
900
907
  J,
901
- N && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: N }),
908
+ E && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: E }),
902
909
  w && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: w })
903
910
  ] }) : /* @__PURE__ */ l("div", { className: "sa-select-field", children: [
904
- y && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: y }),
911
+ N && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: N }),
905
912
  J,
906
- N && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: N }),
913
+ E && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: E }),
907
914
  w && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: w })
908
915
  ] });
909
916
  }, Y = (e, p, d) => {
package/dist/dropdown.umd.js CHANGED
@@ -1,4 +1,4 @@
1
- (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");
1
+ (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");
2
2
  * {
3
3
  margin: 0;
4
4
  padding: 0;
@@ -515,4 +515,4 @@
515
515
  height: 100%;
516
516
  width: 100%;
517
517
  }
518
- `;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"})});
518
+ `;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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@starasia/dropdown",
3
- "version": "3.4.2",
3
+ "version": "3.5.0",
4
4
  "description": "dropdown component for starasia UI",
5
5
  "author": "Prawito Hudoro",
6
6
  "main": "dist/dropdown.umd.js",