1mpacto-react-ui 2.0.19 → 2.0.21

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 (98) hide show
  1. package/dist/assets/style.css +1 -1
  2. package/dist/components/Alert/index.cjs +1 -1
  3. package/dist/components/Alert/index.mjs +40 -40
  4. package/dist/components/Breadcrumbs/Breadcrumbs.cjs +3 -3
  5. package/dist/components/Breadcrumbs/Breadcrumbs.mjs +43 -43
  6. package/dist/components/ButtonPopover/ButtonPopover.cjs +1 -1
  7. package/dist/components/ButtonPopover/ButtonPopover.mjs +28 -31
  8. package/dist/components/Calendar/Calendar.cjs +1 -1
  9. package/dist/components/Calendar/Calendar.mjs +98 -100
  10. package/dist/components/Calendar/CalendarMonth.cjs +1 -1
  11. package/dist/components/Calendar/CalendarMonth.mjs +41 -42
  12. package/dist/components/Calendar/CalendarRange.cjs +1 -1
  13. package/dist/components/Calendar/CalendarRange.mjs +59 -61
  14. package/dist/components/Calendar/CalendarYear.cjs +2 -2
  15. package/dist/components/Calendar/CalendarYear.mjs +37 -38
  16. package/dist/components/Chart/DoughnutChart.cjs +1 -1
  17. package/dist/components/Chart/DoughnutChart.mjs +93 -96
  18. package/dist/components/Chart/GradientBarChart.cjs +1 -1
  19. package/dist/components/Chart/GradientBarChart.mjs +80 -81
  20. package/dist/components/Chart/GradientLineChart.cjs +1 -1
  21. package/dist/components/Chart/GradientLineChart.mjs +50 -51
  22. package/dist/components/Chart/LineChart.cjs +1 -1
  23. package/dist/components/Chart/LineChart.mjs +23 -23
  24. package/dist/components/Chart/PieChart.cjs +1 -1
  25. package/dist/components/Chart/PieChart.mjs +45 -48
  26. package/dist/components/Collapse/Collapse.cjs +1 -1
  27. package/dist/components/Collapse/Collapse.mjs +23 -24
  28. package/dist/components/DatePicker/DatePicker.cjs +1 -1
  29. package/dist/components/DatePicker/DatePicker.mjs +86 -89
  30. package/dist/components/DatePicker/DateRangePicker.cjs +1 -1
  31. package/dist/components/DatePicker/DateRangePicker.mjs +91 -92
  32. package/dist/components/DatePicker/FilterDate.cjs +1 -1
  33. package/dist/components/DatePicker/FilterDate.mjs +107 -110
  34. package/dist/components/DatePicker/MonthYearPicker.cjs +1 -1
  35. package/dist/components/DatePicker/MonthYearPicker.mjs +51 -53
  36. package/dist/components/FilterContainer/FilterContainer.cjs +1 -1
  37. package/dist/components/FilterContainer/FilterContainer.mjs +27 -27
  38. package/dist/components/Input/InputFloatingInner.cjs +5 -5
  39. package/dist/components/Input/InputFloatingInner.mjs +24 -25
  40. package/dist/components/NumberFormat/NumberFormat.cjs +1 -1
  41. package/dist/components/NumberFormat/NumberFormat.mjs +12 -13
  42. package/dist/components/Pagination/Pagination.cjs +2 -2
  43. package/dist/components/Pagination/Pagination.mjs +76 -80
  44. package/dist/components/SelectDropdownContainer/SelectDropdownContainer.cjs +1 -1
  45. package/dist/components/SelectDropdownContainer/SelectDropdownContainer.mjs +98 -102
  46. package/dist/components/Sidebar/ItemSidebar.cjs +8 -8
  47. package/dist/components/Sidebar/ItemSidebar.mjs +71 -72
  48. package/dist/components/Sidebar/Sidebar.cjs +1 -1
  49. package/dist/components/Sidebar/Sidebar.mjs +65 -68
  50. package/dist/components/Step/Step.cjs +5 -5
  51. package/dist/components/Step/Step.mjs +52 -52
  52. package/dist/components/Table/Table.cjs +3 -3
  53. package/dist/components/Table/Table.mjs +275 -298
  54. package/dist/components/Table/TableSubMobile.cjs +1 -1
  55. package/dist/components/Table/TableSubMobile.mjs +32 -35
  56. package/dist/components/Tabs/Tabs.cjs +8 -8
  57. package/dist/components/Tabs/Tabs.mjs +66 -70
  58. package/dist/components/Textarea/Textarea.cjs +7 -7
  59. package/dist/components/Textarea/Textarea.mjs +47 -50
  60. package/dist/components/Textarea/TextareaFloatingInner.cjs +6 -6
  61. package/dist/components/Textarea/TextareaFloatingInner.mjs +56 -61
  62. package/dist/components/Textarea/TextareaInnerLabel.cjs +6 -6
  63. package/dist/components/Textarea/TextareaInnerLabel.mjs +47 -50
  64. package/dist/components/TimeRange/TimeRange.cjs +1 -1
  65. package/dist/components/TimeRange/TimeRange.mjs +88 -91
  66. package/dist/components/Tooltip/Tooltip.cjs +1 -1
  67. package/dist/components/Tooltip/Tooltip.mjs +44 -46
  68. package/dist/components/Upload/UploadFile.cjs +1 -1
  69. package/dist/components/Upload/UploadFile.mjs +50 -54
  70. package/dist/components/Upload/UploadImage.cjs +3 -3
  71. package/dist/components/Upload/UploadImage.mjs +62 -68
  72. package/dist/components/Upload/UploadMultipleFile.cjs +1 -1
  73. package/dist/components/Upload/UploadMultipleFile.mjs +61 -62
  74. package/dist/components/Virtualization/ListVirtualization.cjs +1 -1
  75. package/dist/components/Virtualization/ListVirtualization.mjs +52 -55
  76. package/dist/components/Virtualization/TableVirtualization.cjs +1 -1
  77. package/dist/components/Virtualization/TableVirtualization.mjs +56 -59
  78. package/dist/config/components/tinymce.cjs +2 -2
  79. package/dist/config/components/tinymce.mjs +3 -3
  80. package/dist/hooks/useCountdown.cjs +1 -1
  81. package/dist/hooks/useCountdown.mjs +15 -15
  82. package/dist/hooks/useDebounce.cjs +1 -0
  83. package/dist/hooks/useDebounce.mjs +27 -0
  84. package/dist/hooks/useOtpInput.cjs +1 -1
  85. package/dist/hooks/useOtpInput.mjs +47 -51
  86. package/dist/hooks/usePacked.cjs +1 -0
  87. package/dist/hooks/usePacked.mjs +56 -0
  88. package/dist/index.cjs +1 -1
  89. package/dist/index.mjs +52 -48
  90. package/dist/package.json.cjs +1 -1
  91. package/dist/package.json.d.ts +5 -4
  92. package/dist/package.json.mjs +1 -1
  93. package/dist/src/hooks/index.d.ts +4 -2
  94. package/dist/src/hooks/useDebounce.d.ts +61 -0
  95. package/dist/src/hooks/usePacked.d.ts +84 -0
  96. package/dist/utils/common.cjs +1 -1
  97. package/dist/utils/common.mjs +172 -173
  98. package/package.json +4 -4
@@ -1,14 +1,14 @@
1
- import { jsxs as l, Fragment as Z, jsx as o } from "react/jsx-runtime";
1
+ import { jsxs as l, Fragment as Z, jsx as e } from "react/jsx-runtime";
2
2
  import B, { useMemo as z, isValidElement as N } from "react";
3
- import s from "./style.module.scss.mjs";
3
+ import r from "./style.module.scss.mjs";
4
4
  import { formatNumber as u } from "../../utils/common.mjs";
5
5
  import { ChevronDownIcon as M } from "../Calendar/CalendarYear.mjs";
6
6
  import D from "../Popover/Popover.mjs";
7
7
  import nn from "../Button/Button.mjs";
8
8
  import { configPagination as j } from "./Pagination.config.mjs";
9
- const $ = (t, i) => {
10
- const m = i - t + 1;
11
- return Array.from({ length: m }, (c, w) => w + t);
9
+ const $ = (t, o) => {
10
+ const a = o - t + 1;
11
+ return Array.from({ length: a }, (s, w) => w + t);
12
12
  }, L = {
13
13
  "en-US": {
14
14
  "Rows per page:": "Rows per page:",
@@ -32,11 +32,11 @@ const $ = (t, i) => {
32
32
  }
33
33
  }, dn = ({
34
34
  totalData: t,
35
- totalPage: i,
36
- pageNumber: m,
37
- pageSize: c,
35
+ totalPage: o,
36
+ pageNumber: a,
37
+ pageSize: s,
38
38
  className: w,
39
- id: d = "1ru-pagination",
39
+ id: m = "1ru-pagination",
40
40
  kind: F = "box",
41
41
  prevIcon: f,
42
42
  nextIcon: g,
@@ -50,11 +50,11 @@ const $ = (t, i) => {
50
50
  locale: y = "id-ID",
51
51
  fonts: I = "inter"
52
52
  }) => {
53
- const C = B.useRef(null), [r, R] = B.useState(m), [J, G] = B.useState(m.toString()), p = 1, K = (r - 1) * c + 1, V = c * r, Q = t ? `${u(K, "decimal")}-${V >= t ? u(t, "decimal") : u(V, "decimal")}` : 0, T = z(() => {
54
- const n = Math.ceil(t / c);
53
+ const C = B.useRef(null), [i, R] = B.useState(a), [J, G] = B.useState(a.toString()), p = 1, K = (i - 1) * s + 1, V = s * i, Q = t ? `${u(K, "decimal")}-${V >= t ? u(t, "decimal") : u(V, "decimal")}` : 0, T = z(() => {
54
+ const n = Math.ceil(t / s);
55
55
  if (p + 5 >= n)
56
56
  return $(1, n);
57
- const a = Math.max(r - p, 1), _ = Math.min(r + p, n), k = a > 2, P = _ < n - 2, A = 1, Y = n;
57
+ const d = Math.max(i - p, 1), _ = Math.min(i + p, n), k = d > 2, P = _ < n - 2, A = 1, Y = n;
58
58
  if (!k && P) {
59
59
  const b = 3 + 2 * p;
60
60
  return [...$(1, b), "mr", n];
@@ -64,48 +64,45 @@ const $ = (t, i) => {
64
64
  return [A, "ml", ...E];
65
65
  }
66
66
  if (k && P) {
67
- const b = $(a, _);
67
+ const b = $(d, _);
68
68
  return [A, "ml", ...b, "mr", Y];
69
69
  }
70
- }, [t, c, p, r]), h = (n) => {
70
+ }, [t, s, p, i]), h = (n) => {
71
71
  typeof x == "function" && (x(n), R(n.pageNumber), G(n.pageNumber.toString()));
72
72
  }, W = (n) => {
73
73
  if (typeof x == "function" && S) {
74
74
  if (n === "ml") {
75
- const a = r - 5;
76
- R(a < 1 ? 1 : r - 5);
75
+ const d = i - 5;
76
+ R(d < 1 ? 1 : i - 5);
77
77
  } else if (n === "mr") {
78
- const a = r + 5;
79
- R(a > i ? i : r + 5);
78
+ const d = i + 5;
79
+ R(d > o ? o : i + 5);
80
80
  }
81
81
  }
82
82
  }, X = (n) => {
83
83
  G(n);
84
- const e = Number(n);
85
- e > 0 && e <= i && h({
86
- pageSize: c,
84
+ const c = Number(n);
85
+ c > 0 && c <= o && h({
86
+ pageSize: s,
87
87
  totalData: t,
88
- totalPage: i,
89
- pageNumber: e
88
+ totalPage: o,
89
+ pageNumber: c
90
90
  });
91
91
  };
92
92
  return /* @__PURE__ */ l(Z, { children: [
93
- /* @__PURE__ */ l("div", { id: d, className: `${j.kind[F]} ${j.fonts[I].value} ${w}`, children: [
94
- /* @__PURE__ */ l("div", { className: s["pagination-size"], children: [
95
- /* @__PURE__ */ o("span", { children: L[y]["Rows per page:"] }),
96
- H && /* @__PURE__ */ o(
93
+ /* @__PURE__ */ l("div", { id: m, className: `${j.kind[F]} ${j.fonts[I].value} ${w}`, children: [
94
+ /* @__PURE__ */ l("div", { className: r["pagination-size"], children: [
95
+ /* @__PURE__ */ e("span", { children: L[y]["Rows per page:"] }),
96
+ H && /* @__PURE__ */ e(
97
97
  nn,
98
98
  {
99
- id: `${d}-option-size`,
99
+ id: `${m}-option-size`,
100
100
  variants: "ghost-blue-gray-100-bg_white",
101
101
  size: "xs",
102
- endIcon: /* @__PURE__ */ o(M, { className: "!iru-text-gray-500 !iru-w-[14px] !iru-h-[14px] iru-mx-0.5" }),
102
+ endIcon: /* @__PURE__ */ e(M, { className: "!iru-text-gray-500 !iru-w-[14px] !iru-h-[14px] iru-mx-0.5" }),
103
103
  className: "!iru-rounded-md !iru-min-w-[60px] iru-justify-between",
104
- onClick: (n) => {
105
- var e;
106
- return (e = C.current) == null ? void 0 : e.handlerShow(n);
107
- },
108
- children: u(c, "decimal")
104
+ onClick: (n) => C.current?.handlerShow(n),
105
+ children: u(s, "decimal")
109
106
  }
110
107
  ),
111
108
  /* @__PURE__ */ l("span", { children: [
@@ -116,111 +113,110 @@ const $ = (t, i) => {
116
113
  u(t, "decimal")
117
114
  ] })
118
115
  ] }),
119
- /* @__PURE__ */ l("div", { className: s["navigation-container"], children: [
120
- /* @__PURE__ */ o(
116
+ /* @__PURE__ */ l("div", { className: r["navigation-container"], children: [
117
+ /* @__PURE__ */ e(
121
118
  "button",
122
119
  {
123
- id: `${d}-button-prev`,
124
- className: `${s["button-prev"]}`,
125
- disabled: r === 1,
120
+ id: `${m}-button-prev`,
121
+ className: `${r["button-prev"]}`,
122
+ disabled: i === 1,
126
123
  onClick: () => h({
127
- pageSize: c,
124
+ pageSize: s,
128
125
  totalData: t,
129
- totalPage: i,
130
- pageNumber: m - 1
126
+ totalPage: o,
127
+ pageNumber: a - 1
131
128
  }),
132
- children: typeof f == "function" || N(f) ? N(f) ? f : f() : /* @__PURE__ */ o(M, { className: "iru-rotate-90 !iru-text-gray-500 !iru-w-[14px] !iru-h-[14px]" })
129
+ children: typeof f == "function" || N(f) ? N(f) ? f : f() : /* @__PURE__ */ e(M, { className: "iru-rotate-90 !iru-text-gray-500 !iru-w-[14px] !iru-h-[14px]" })
133
130
  }
134
131
  ),
135
- (T ?? []).map((n, e) => {
132
+ (T ?? []).map((n, c) => {
136
133
  if (typeof n != "number") {
137
- const a = ["ml", "mr"].includes(n);
138
- return /* @__PURE__ */ o(
134
+ const d = ["ml", "mr"].includes(n);
135
+ return /* @__PURE__ */ e(
139
136
  "button",
140
137
  {
141
- className: s["button-container"],
138
+ className: r["button-container"],
142
139
  disabled: !S,
143
140
  onClick: () => W(n),
144
- children: a ? "..." : n
141
+ children: d ? "..." : n
145
142
  },
146
- e
143
+ c
147
144
  );
148
145
  }
149
- return /* @__PURE__ */ o(
146
+ return /* @__PURE__ */ e(
150
147
  "button",
151
148
  {
152
- id: `${d}-button-${n}`,
153
- className: `${n === m ? s["pagination-active"] : ""} ${s["button-container"]}
149
+ id: `${m}-button-${n}`,
150
+ className: `${n === a ? r["pagination-active"] : ""} ${r["button-container"]}
154
151
  ${j.fonts[I].typographyButtonLabel}`,
155
- disabled: n === m,
152
+ disabled: n === a,
156
153
  onClick: () => h({
157
- pageSize: c,
154
+ pageSize: s,
158
155
  totalData: t,
159
- totalPage: i,
156
+ totalPage: o,
160
157
  pageNumber: n
161
158
  }),
162
159
  children: u(n, "decimal")
163
160
  },
164
- e
161
+ c
165
162
  );
166
163
  }),
167
- /* @__PURE__ */ o(
164
+ /* @__PURE__ */ e(
168
165
  "button",
169
166
  {
170
- id: `${d}-button-next`,
171
- className: `${s["button-next"]}`,
172
- disabled: r === i || !i,
167
+ id: `${m}-button-next`,
168
+ className: `${r["button-next"]}`,
169
+ disabled: i === o || !o,
173
170
  onClick: () => h({
174
- pageSize: c,
171
+ pageSize: s,
175
172
  totalData: t,
176
- totalPage: i,
177
- pageNumber: m + 1
173
+ totalPage: o,
174
+ pageNumber: a + 1
178
175
  }),
179
- children: typeof g == "function" || N(g) ? N(g) ? g : g() : /* @__PURE__ */ o(M, { className: "-iru-rotate-90 !iru-text-gray-500 !iru-w-[14px] !iru-h-[14px]" })
176
+ children: typeof g == "function" || N(g) ? N(g) ? g : g() : /* @__PURE__ */ e(M, { className: "-iru-rotate-90 !iru-text-gray-500 !iru-w-[14px] !iru-h-[14px]" })
180
177
  }
181
178
  ),
182
- v && /* @__PURE__ */ l("div", { className: s["goto-page"], children: [
183
- /* @__PURE__ */ o("span", { children: L[y]["Go to:"] }),
184
- /* @__PURE__ */ o(
179
+ v && /* @__PURE__ */ l("div", { className: r["goto-page"], children: [
180
+ /* @__PURE__ */ e("span", { children: L[y]["Go to:"] }),
181
+ /* @__PURE__ */ e(
185
182
  "input",
186
183
  {
187
- id: `${d}-goto-page`,
184
+ id: `${m}-goto-page`,
188
185
  type: "number",
189
- className: s["goto-page-input"],
186
+ className: r["goto-page-input"],
190
187
  value: J,
191
188
  onChange: (n) => X(n.target.value),
192
- onBlur: () => G(r.toString())
189
+ onBlur: () => G(i.toString())
193
190
  }
194
191
  )
195
192
  ] })
196
193
  ] })
197
194
  ] }),
198
- /* @__PURE__ */ o(
195
+ /* @__PURE__ */ e(
199
196
  D,
200
197
  {
201
198
  floatingOptions: { placement: "bottom-end" },
202
199
  ref: C,
203
- className: s["options-size"],
200
+ className: r["options-size"],
204
201
  offset: U,
205
202
  zIndex: q,
206
- id: `${d}-popover-options-size`,
207
- children: O.map((n, e) => /* @__PURE__ */ o(
203
+ id: `${m}-popover-options-size`,
204
+ children: O.map((n, c) => /* @__PURE__ */ e(
208
205
  "p",
209
206
  {
210
- id: `${d}-option-size-${n}`,
211
- className: `${s.option} ${n === c ? s.active : ""}`,
207
+ id: `${m}-option-size-${n}`,
208
+ className: `${r.option} ${n === s ? r.active : ""}`,
212
209
  onClick: () => {
213
- var a;
214
210
  h({
215
211
  totalData: t,
216
- totalPage: i,
212
+ totalPage: o,
217
213
  pageSize: n,
218
214
  pageNumber: 1
219
- }), (a = C.current) == null || a.setShow(!1);
215
+ }), C.current?.setShow(!1);
220
216
  },
221
217
  children: u(n, "decimal")
222
218
  },
223
- e
219
+ c
224
220
  ))
225
221
  }
226
222
  )
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react/jsx-runtime"),t=require("react"),ne=require("react-select"),oe=require("../Popover/Popover.cjs"),re=require("./SelectDropdownContainer.module.scss.cjs"),V=require("../../hooks/useDeepCompareEffect.cjs"),p=require("./SelectDropdownContainer.config.cjs"),y=t.forwardRef((m,N)=>{const{width:h,children:E,components:I,classNameContainer:x="",classNameContainerShowSelect:M="",classNameContainerSelect:$="",classNameLabelError:b="",error:q,onChange:v,externalValue:l=!1,defaultValueButtonDropdown:r={},autoClose:j=!0,onMenuOpen:z=()=>{},autoCloseOutside:L=!0,styleInnerPopper:_={},onMenuClose:T=()=>{},zIndexPopper:W=0,id:k="select-dropdown-container",idPopover:F="select-dropdown-container-popover",useAutoPlacement:A,flipOptions:B,autoPlacementOptions:H,withSearch:G=!1,floatingOptions:J={},offsetPopover:K=5,selectProps:Q={},errorLabel:U="payhere",controlType:w="payhere",actionValueChange:X=()=>{},...Y}=m,s=t.useRef(null),a=t.useRef(null),[Z,g]=t.useState(""),[o,S]=t.useState(!1),[i,c]=t.useState({}),[D,P]=t.useState(0),C=e=>{var n;(n=a.current)==null||n.setShow(e),S(e)},ee=()=>{if(l)return m.isMulti?r:[r]},O=e=>{var n;(n=a.current)==null||n.handlerShow(e),P(s.current.offsetWidth),S(d=>!d)},R=()=>{var e;L&&((e=a.current)==null||e.setShow(!1))},te=(e,n)=>{var d;j&&(S(!1),(d=a.current)==null||d.setShow(!1)),typeof v=="function"&&v(e,n),l||c(e)},u=()=>{s.current&&P(s.current.offsetWidth)};return V.useDeepCompareEffect(()=>{l&&c(r),X(r)},[l,r]),t.useEffect(()=>{o?z():o||(T(),g(""))},[o]),t.useImperativeHandle(N,()=>({selectValue:i,setSelectValue:c,handlerClose:R,handlerShow:O,show:o,setShow:C}),[o,V.useDeepCompareMemoize(i)]),t.useEffect(()=>(window.addEventListener("resize",u),window.addEventListener("load",u),()=>{window.removeEventListener("resize",u),window.removeEventListener("load",u)}),[s]),f.jsxs("div",{id:k,className:`${re.default.container} ${x} ${o?`${M} open-popover`:null}`,ref:s,children:[E({selectValue:i,setSelectValue:c,handlerClose:R,handlerShow:O,show:o,setShow:C}),f.jsx(oe.default,{ref:a,offset:K,useAutoPlacement:A,flipOptions:B,autoPlacementOptions:H,zIndex:W,styleInnerPopover:_,id:F,width:typeof h=="function"?h(D,i):h||D,className:`${$} ${p.configSelectDropdownContainer.classNamePopover[w]}`,floatingOptions:J,children:f.jsx(ne,{className:"iru-w-full",defaultValue:ee(),inputValue:Z,onInputChange:(e,{action:n})=>{n==="input-change"&&g(e)},openMenuOnFocus:!0,autoFocus:!1,backspaceRemovesValue:!1,components:{IndicatorSeparator:null,...I},controlShouldRenderValue:!1,hideSelectedOptions:!1,isClearable:!1,menuIsOpen:!0,tabSelectsValue:!1,styles:G?p.configSelectDropdownContainer.variant[w]:p.configSelectDropdownContainer.noSearchVariant[w],noOptionsMessage:()=>"Tidak ada data.",onChange:te,selectProps:{...Q,setShowDropdown:C},...Y})}),f.jsx("div",{className:`${p.configSelectDropdownContainer.error[U]} ${b}`,children:q})]})});y.displayName="SelectDropdownContainer";exports.default=y;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),e=require("react"),te=require("react-select"),ne=require("../Popover/Popover.cjs"),oe=require("./SelectDropdownContainer.module.scss.cjs"),R=require("../../hooks/useDeepCompareEffect.cjs"),f=require("./SelectDropdownContainer.config.cjs"),V=e.forwardRef((C,y)=>{const{width:p,children:N,components:E,classNameContainer:I="",classNameContainerShowSelect:x="",classNameContainerSelect:M="",classNameLabelError:$="",error:b,onChange:m,externalValue:l=!1,defaultValueButtonDropdown:o={},autoClose:q=!0,onMenuOpen:j=()=>{},autoCloseOutside:z=!0,styleInnerPopper:L={},onMenuClose:_=()=>{},zIndexPopper:T=0,id:W="select-dropdown-container",idPopover:k="select-dropdown-container-popover",useAutoPlacement:F,flipOptions:A,autoPlacementOptions:B,withSearch:H=!1,floatingOptions:G={},offsetPopover:J=5,selectProps:K={},errorLabel:Q="payhere",controlType:h="payhere",actionValueChange:U=()=>{},...X}=C,r=e.useRef(null),s=e.useRef(null),[Y,v]=e.useState(""),[n,w]=e.useState(!1),[i,c]=e.useState({}),[g,D]=e.useState(0),S=t=>{s.current?.setShow(t),w(t)},Z=()=>{if(l)return C.isMulti?o:[o]},P=t=>{s.current?.handlerShow(t),D(r.current.offsetWidth),w(a=>!a)},O=()=>{z&&s.current?.setShow(!1)},ee=(t,a)=>{q&&(w(!1),s.current?.setShow(!1)),typeof m=="function"&&m(t,a),l||c(t)},u=()=>{r.current&&D(r.current.offsetWidth)};return R.useDeepCompareEffect(()=>{l&&c(o),U(o)},[l,o]),e.useEffect(()=>{n?j():n||(_(),v(""))},[n]),e.useImperativeHandle(y,()=>({selectValue:i,setSelectValue:c,handlerClose:O,handlerShow:P,show:n,setShow:S}),[n,R.useDeepCompareMemoize(i)]),e.useEffect(()=>(window.addEventListener("resize",u),window.addEventListener("load",u),()=>{window.removeEventListener("resize",u),window.removeEventListener("load",u)}),[r]),d.jsxs("div",{id:W,className:`${oe.default.container} ${I} ${n?`${x} open-popover`:null}`,ref:r,children:[N({selectValue:i,setSelectValue:c,handlerClose:O,handlerShow:P,show:n,setShow:S}),d.jsx(ne.default,{ref:s,offset:J,useAutoPlacement:F,flipOptions:A,autoPlacementOptions:B,zIndex:T,styleInnerPopover:L,id:k,width:typeof p=="function"?p(g,i):p||g,className:`${M} ${f.configSelectDropdownContainer.classNamePopover[h]}`,floatingOptions:G,children:d.jsx(te,{className:"iru-w-full",defaultValue:Z(),inputValue:Y,onInputChange:(t,{action:a})=>{a==="input-change"&&v(t)},openMenuOnFocus:!0,autoFocus:!1,backspaceRemovesValue:!1,components:{IndicatorSeparator:null,...E},controlShouldRenderValue:!1,hideSelectedOptions:!1,isClearable:!1,menuIsOpen:!0,tabSelectsValue:!1,styles:H?f.configSelectDropdownContainer.variant[h]:f.configSelectDropdownContainer.noSearchVariant[h],noOptionsMessage:()=>"Tidak ada data.",onChange:ee,selectProps:{...K,setShowDropdown:S},...X})}),d.jsx("div",{className:`${f.configSelectDropdownContainer.error[Q]} ${$}`,children:b})]})});V.displayName="SelectDropdownContainer";exports.default=V;
@@ -1,150 +1,146 @@
1
- import { jsxs as ee, jsx as S } from "react/jsx-runtime";
2
- import t from "react";
3
- import te from "react-select";
4
- import oe from "../Popover/Popover.mjs";
5
- import ne from "./SelectDropdownContainer.module.scss.mjs";
6
- import { useDeepCompareEffect as re, useDeepCompareMemoize as ae } from "../../hooks/useDeepCompareEffect.mjs";
7
- import { configSelectDropdownContainer as p } from "./SelectDropdownContainer.config.mjs";
8
- const se = t.forwardRef(
9
- (C, R) => {
1
+ import { jsxs as _, jsx as w } from "react/jsx-runtime";
2
+ import e from "react";
3
+ import ee from "react-select";
4
+ import te from "../Popover/Popover.mjs";
5
+ import oe from "./SelectDropdownContainer.module.scss.mjs";
6
+ import { useDeepCompareEffect as ne, useDeepCompareMemoize as re } from "../../hooks/useDeepCompareEffect.mjs";
7
+ import { configSelectDropdownContainer as f } from "./SelectDropdownContainer.config.mjs";
8
+ const ae = e.forwardRef(
9
+ (S, O) => {
10
10
  const {
11
- width: d,
12
- children: g,
13
- components: I,
14
- classNameContainer: E = "",
15
- classNameContainerShowSelect: $ = "",
16
- classNameContainerSelect: D = "",
17
- classNameLabelError: x = "",
18
- error: z,
19
- onChange: v,
11
+ width: p,
12
+ children: R,
13
+ components: g,
14
+ classNameContainer: I = "",
15
+ classNameContainerShowSelect: E = "",
16
+ classNameContainerSelect: $ = "",
17
+ classNameLabelError: D = "",
18
+ error: x,
19
+ onChange: C,
20
20
  externalValue: l = !1,
21
- defaultValueButtonDropdown: r = {},
22
- autoClose: L = !0,
23
- onMenuOpen: M = () => {
21
+ defaultValueButtonDropdown: n = {},
22
+ autoClose: z = !0,
23
+ onMenuOpen: L = () => {
24
24
  },
25
- autoCloseOutside: b = !0,
26
- styleInnerPopper: W = {},
27
- onMenuClose: j = () => {
25
+ autoCloseOutside: M = !0,
26
+ styleInnerPopper: b = {},
27
+ onMenuClose: W = () => {
28
28
  },
29
- zIndexPopper: k = 0,
30
- id: F = "select-dropdown-container",
31
- idPopover: T = "select-dropdown-container-popover",
32
- useAutoPlacement: A,
33
- flipOptions: B,
34
- autoPlacementOptions: H,
35
- withSearch: q = !1,
36
- floatingOptions: G = {},
37
- offsetPopover: J = 5,
38
- selectProps: K = {},
39
- errorLabel: Q = "payhere",
40
- controlType: h = "payhere",
41
- actionValueChange: U = () => {
29
+ zIndexPopper: j = 0,
30
+ id: k = "select-dropdown-container",
31
+ idPopover: F = "select-dropdown-container-popover",
32
+ useAutoPlacement: T,
33
+ flipOptions: A,
34
+ autoPlacementOptions: B,
35
+ withSearch: H = !1,
36
+ floatingOptions: q = {},
37
+ offsetPopover: G = 5,
38
+ selectProps: J = {},
39
+ errorLabel: K = "payhere",
40
+ controlType: d = "payhere",
41
+ actionValueChange: Q = () => {
42
42
  },
43
- ...X
44
- } = C, a = t.useRef(null), s = t.useRef(null), [Y, P] = t.useState(""), [n, m] = t.useState(!1), [i, c] = t.useState({}), [V, y] = t.useState(0), w = (e) => {
45
- var o;
46
- (o = s.current) == null || o.setShow(e), m(e);
47
- }, Z = () => {
43
+ ...U
44
+ } = S, r = e.useRef(null), a = e.useRef(null), [X, v] = e.useState(""), [o, h] = e.useState(!1), [i, c] = e.useState({}), [P, V] = e.useState(0), m = (t) => {
45
+ a.current?.setShow(t), h(t);
46
+ }, Y = () => {
48
47
  if (l)
49
- return C.isMulti ? r : [r];
50
- }, N = (e) => {
51
- var o;
52
- (o = s.current) == null || o.handlerShow(e), y(a.current.offsetWidth), m((f) => !f);
53
- }, O = () => {
54
- var e;
55
- b && ((e = s.current) == null || e.setShow(!1));
56
- }, _ = (e, o) => {
57
- var f;
58
- L && (m(!1), (f = s.current) == null || f.setShow(!1)), typeof v == "function" && v(e, o), l || c(e);
48
+ return S.isMulti ? n : [n];
49
+ }, y = (t) => {
50
+ a.current?.handlerShow(t), V(r.current.offsetWidth), h((s) => !s);
51
+ }, N = () => {
52
+ M && a.current?.setShow(!1);
53
+ }, Z = (t, s) => {
54
+ z && (h(!1), a.current?.setShow(!1)), typeof C == "function" && C(t, s), l || c(t);
59
55
  }, u = () => {
60
- a.current && y(a.current.offsetWidth);
56
+ r.current && V(r.current.offsetWidth);
61
57
  };
62
- return re(() => {
63
- l && c(r), U(r);
64
- }, [l, r]), t.useEffect(() => {
65
- n ? M() : n || (j(), P(""));
66
- }, [n]), t.useImperativeHandle(
67
- R,
58
+ return ne(() => {
59
+ l && c(n), Q(n);
60
+ }, [l, n]), e.useEffect(() => {
61
+ o ? L() : o || (W(), v(""));
62
+ }, [o]), e.useImperativeHandle(
63
+ O,
68
64
  () => ({
69
65
  selectValue: i,
70
66
  setSelectValue: c,
71
- handlerClose: O,
72
- handlerShow: N,
73
- show: n,
74
- setShow: w
67
+ handlerClose: N,
68
+ handlerShow: y,
69
+ show: o,
70
+ setShow: m
75
71
  }),
76
- [n, ae(i)]
77
- ), t.useEffect(() => (window.addEventListener("resize", u), window.addEventListener("load", u), () => {
72
+ [o, re(i)]
73
+ ), e.useEffect(() => (window.addEventListener("resize", u), window.addEventListener("load", u), () => {
78
74
  window.removeEventListener("resize", u), window.removeEventListener("load", u);
79
- }), [a]), /* @__PURE__ */ ee(
75
+ }), [r]), /* @__PURE__ */ _(
80
76
  "div",
81
77
  {
82
- id: F,
83
- className: `${ne.container} ${E} ${n ? `${$} open-popover` : null}`,
84
- ref: a,
78
+ id: k,
79
+ className: `${oe.container} ${I} ${o ? `${E} open-popover` : null}`,
80
+ ref: r,
85
81
  children: [
86
- g({
82
+ R({
87
83
  selectValue: i,
88
84
  setSelectValue: c,
89
- handlerClose: O,
90
- handlerShow: N,
91
- show: n,
92
- setShow: w
85
+ handlerClose: N,
86
+ handlerShow: y,
87
+ show: o,
88
+ setShow: m
93
89
  }),
94
- /* @__PURE__ */ S(
95
- oe,
90
+ /* @__PURE__ */ w(
91
+ te,
96
92
  {
97
- ref: s,
98
- offset: J,
99
- useAutoPlacement: A,
100
- flipOptions: B,
101
- autoPlacementOptions: H,
102
- zIndex: k,
103
- styleInnerPopover: W,
104
- id: T,
105
- width: typeof d == "function" ? d(V, i) : d || V,
106
- className: `${D} ${p.classNamePopover[h]}`,
107
- floatingOptions: G,
108
- children: /* @__PURE__ */ S(
109
- te,
93
+ ref: a,
94
+ offset: G,
95
+ useAutoPlacement: T,
96
+ flipOptions: A,
97
+ autoPlacementOptions: B,
98
+ zIndex: j,
99
+ styleInnerPopover: b,
100
+ id: F,
101
+ width: typeof p == "function" ? p(P, i) : p || P,
102
+ className: `${$} ${f.classNamePopover[d]}`,
103
+ floatingOptions: q,
104
+ children: /* @__PURE__ */ w(
105
+ ee,
110
106
  {
111
107
  className: "iru-w-full",
112
- defaultValue: Z(),
113
- inputValue: Y,
114
- onInputChange: (e, { action: o }) => {
115
- o === "input-change" && P(e);
108
+ defaultValue: Y(),
109
+ inputValue: X,
110
+ onInputChange: (t, { action: s }) => {
111
+ s === "input-change" && v(t);
116
112
  },
117
113
  openMenuOnFocus: !0,
118
114
  autoFocus: !1,
119
115
  backspaceRemovesValue: !1,
120
116
  components: {
121
117
  IndicatorSeparator: null,
122
- ...I
118
+ ...g
123
119
  },
124
120
  controlShouldRenderValue: !1,
125
121
  hideSelectedOptions: !1,
126
122
  isClearable: !1,
127
123
  menuIsOpen: !0,
128
124
  tabSelectsValue: !1,
129
- styles: q ? p.variant[h] : p.noSearchVariant[h],
125
+ styles: H ? f.variant[d] : f.noSearchVariant[d],
130
126
  noOptionsMessage: () => "Tidak ada data.",
131
- onChange: _,
127
+ onChange: Z,
132
128
  selectProps: {
133
- ...K,
134
- setShowDropdown: w
129
+ ...J,
130
+ setShowDropdown: m
135
131
  },
136
- ...X
132
+ ...U
137
133
  }
138
134
  )
139
135
  }
140
136
  ),
141
- /* @__PURE__ */ S("div", { className: `${p.error[Q]} ${x}`, children: z })
137
+ /* @__PURE__ */ w("div", { className: `${f.error[K]} ${D}`, children: x })
142
138
  ]
143
139
  }
144
140
  );
145
141
  }
146
142
  );
147
- se.displayName = "SelectDropdownContainer";
143
+ ae.displayName = "SelectDropdownContainer";
148
144
  export {
149
- se as default
145
+ ae as default
150
146
  };
@@ -1,8 +1,8 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),o=require("react"),s=require("./itemSidebar.module.scss.cjs"),r=require("./ItemSidebar.config.cjs"),H=({as:I,show:h,open:t,patch:j,iconSubs:d,variant:c="payhere-brand-base-white",setShow:f,onClickItems:x,propsLink:g,...e})=>{var p,E,M,O,A,V,q,F;let b=i.jsx(i.Fragment,{});const N=I??"div",[y,a]=o.useState(!1),l=j===e.slug,$=h.split("/"),n=$.includes(e.name),S=()=>{if(e.subs.length>0)if(n){const m=$.splice(0,$.indexOf(e.name));m.length>0?f(`${m.join("/")}/`):f("")}else f(`${h}${e.name}/`);else typeof x=="function"&&x(e)};return e.isShow?([1,3,5,6,7,8].includes(e.parent)&&(b=i.jsxs(i.Fragment,{children:[i.jsxs(N,{id:e.name,className:`${s.default["item-sidebar-1"]}
2
- ${(p=r.configItemSidebar.variant)==null?void 0:p[c]} ${(E=r.configItemSidebar.parent)==null?void 0:E[e.parent.toString()]}
3
- ${l||e.subs.length>0&&n?s.default.active:""} ${typeof t=="boolean"&&t?s.default["item-sidebar-open"]:""} ${typeof t=="boolean"&&!t?s.default["item-sidebar-close"]:""}
4
- `,onClick:S,onMouseOver:()=>a(!0),onMouseOut:()=>a(!1),...g?g(e.slug,e):{},children:[i.jsxs("div",{className:"iru-flex iru-items-center iru-gap-3 iru-relative",children:[o.isValidElement(e.svgIcon)&&i.jsx("div",{className:s.default["item-icon"],children:l||e.subs.length>0&&n?e==null?void 0:e.svgIconActive:y?(e==null?void 0:e.svgIconHover)||(e==null?void 0:e.svgIconActive):e==null?void 0:e.svgIcon}),i.jsx("div",{className:s.default["item-label"],children:e.label})]}),o.isValidElement(e.endIcon)&&i.jsx("div",{className:s.default["end-icon"],children:e==null?void 0:e.endIcon}),e.subs.length>0&&t&&i.jsxs("div",{className:`${s.default["item-icon-subs"]} ${n?s.default["item-icon-subs-active"]:""}`,id:`item-sidebar-subs-${e.name}-icon`,children:[o.isValidElement(d)&&d,typeof d=="function"&&d()]})]}),e.parent===3&&!e.subs.length&&i.jsx("div",{className:(M=r.configItemSidebar.divider)==null?void 0:M[c]})]})),(e.parent===2||e.parent===4)&&(b=i.jsxs(i.Fragment,{children:[i.jsxs(N,{id:e.name,className:`${s.default["item-sidebar-2"]}
5
- ${(O=r.configItemSidebar.variant)==null?void 0:O[c]} ${(A=r.configItemSidebar.parent)==null?void 0:A[e.parent.toString()]}
6
- ${l||e.subs.length>0&&n?s.default.active:""} ${typeof t=="boolean"&&t?s.default["item-sidebar-open"]:""} ${typeof t=="boolean"&&!t?s.default["item-sidebar-close"]:""}
7
- `,onClick:S,onMouseOver:()=>a(!0),onMouseOut:()=>a(!1),...g?g(e.slug,e):{},children:[o.isValidElement(e.svgIcon)&&i.jsx("div",{className:s.default["item-icon"],children:l||e.subs.length>0&&n?e==null?void 0:e.svgIconActive:y?(e==null?void 0:e.svgIconHover)||(e==null?void 0:e.svgIconActive):e==null?void 0:e.svgIcon}),i.jsx("div",{className:s.default["item-label"],children:e.label}),e.subs.length>0&&t&&i.jsxs("div",{className:`${s.default["item-icon-subs"]} ${n?s.default["item-icon-subs-active"]:""}`,id:`item-sidebar-subs-${e.name}-icon`,children:[o.isValidElement(d)&&d,typeof d=="function"&&d()]})]}),e.parent===4&&!e.subs.length&&i.jsx("div",{className:(V=r.configItemSidebar.divider)==null?void 0:V[c]})]})),e.subs.length>0?i.jsxs("div",{className:`${t||n?"":"-mt-2"}`,children:[b,i.jsx("div",{id:`item-sidebar-subs-${e.name}-${t&&n?"open":"close"}`,className:`${s.default["item-subs-sidebar"]}
8
- ${(q=r.configItemSidebar.variant)==null?void 0:q[c]} ${!t||!n?s.default.hidden:""}`,children:e.subs.map(m=>o.createElement(H,{...m,as:m.manualRoute?"div":m.subs.length>0?I:e.linkComponent,key:m.name,patch:j,iconSubs:d,show:h,open:t,variant:c,setShow:f}))}),[3,4].includes(e.parent)&&i.jsx("div",{className:(F=r.configItemSidebar.divider)==null?void 0:F[c]})]}):b):i.jsx(i.Fragment,{})};exports.default=H;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),m=require("react"),s=require("./itemSidebar.module.scss.cjs"),r=require("./ItemSidebar.config.cjs"),S=({as:I,show:h,open:t,patch:j,iconSubs:d,variant:c="payhere-brand-base-white",setShow:l,onClickItems:x,propsLink:o,...e})=>{let f=i.jsx(i.Fragment,{});const u=I??"div",[N,g]=m.useState(!1),b=j===e.slug,$=h.split("/"),n=$.includes(e.name),y=()=>{if(e.subs.length>0)if(n){const a=$.splice(0,$.indexOf(e.name));a.length>0?l(`${a.join("/")}/`):l("")}else l(`${h}${e.name}/`);else typeof x=="function"&&x(e)};return e.isShow?([1,3,5,6,7,8].includes(e.parent)&&(f=i.jsxs(i.Fragment,{children:[i.jsxs(u,{id:e.name,className:`${s.default["item-sidebar-1"]}
2
+ ${r.configItemSidebar.variant?.[c]} ${r.configItemSidebar.parent?.[e.parent.toString()]}
3
+ ${b||e.subs.length>0&&n?s.default.active:""} ${typeof t=="boolean"&&t?s.default["item-sidebar-open"]:""} ${typeof t=="boolean"&&!t?s.default["item-sidebar-close"]:""}
4
+ `,onClick:y,onMouseOver:()=>g(!0),onMouseOut:()=>g(!1),...o?o(e.slug,e):{},children:[i.jsxs("div",{className:"iru-flex iru-items-center iru-gap-3 iru-relative",children:[m.isValidElement(e.svgIcon)&&i.jsx("div",{className:s.default["item-icon"],children:b||e.subs.length>0&&n?e?.svgIconActive:N?e?.svgIconHover||e?.svgIconActive:e?.svgIcon}),i.jsx("div",{className:s.default["item-label"],children:e.label})]}),m.isValidElement(e.endIcon)&&i.jsx("div",{className:s.default["end-icon"],children:e?.endIcon}),e.subs.length>0&&t&&i.jsxs("div",{className:`${s.default["item-icon-subs"]} ${n?s.default["item-icon-subs-active"]:""}`,id:`item-sidebar-subs-${e.name}-icon`,children:[m.isValidElement(d)&&d,typeof d=="function"&&d()]})]}),e.parent===3&&!e.subs.length&&i.jsx("div",{className:r.configItemSidebar.divider?.[c]})]})),(e.parent===2||e.parent===4)&&(f=i.jsxs(i.Fragment,{children:[i.jsxs(u,{id:e.name,className:`${s.default["item-sidebar-2"]}
5
+ ${r.configItemSidebar.variant?.[c]} ${r.configItemSidebar.parent?.[e.parent.toString()]}
6
+ ${b||e.subs.length>0&&n?s.default.active:""} ${typeof t=="boolean"&&t?s.default["item-sidebar-open"]:""} ${typeof t=="boolean"&&!t?s.default["item-sidebar-close"]:""}
7
+ `,onClick:y,onMouseOver:()=>g(!0),onMouseOut:()=>g(!1),...o?o(e.slug,e):{},children:[m.isValidElement(e.svgIcon)&&i.jsx("div",{className:s.default["item-icon"],children:b||e.subs.length>0&&n?e?.svgIconActive:N?e?.svgIconHover||e?.svgIconActive:e?.svgIcon}),i.jsx("div",{className:s.default["item-label"],children:e.label}),e.subs.length>0&&t&&i.jsxs("div",{className:`${s.default["item-icon-subs"]} ${n?s.default["item-icon-subs-active"]:""}`,id:`item-sidebar-subs-${e.name}-icon`,children:[m.isValidElement(d)&&d,typeof d=="function"&&d()]})]}),e.parent===4&&!e.subs.length&&i.jsx("div",{className:r.configItemSidebar.divider?.[c]})]})),e.subs.length>0?i.jsxs("div",{className:`${t||n?"":"-mt-2"}`,children:[f,i.jsx("div",{id:`item-sidebar-subs-${e.name}-${t&&n?"open":"close"}`,className:`${s.default["item-subs-sidebar"]}
8
+ ${r.configItemSidebar.variant?.[c]} ${!t||!n?s.default.hidden:""}`,children:e.subs.map(a=>m.createElement(S,{...a,as:a.manualRoute?"div":a.subs.length>0?I:e.linkComponent,key:a.name,patch:j,iconSubs:d,show:h,open:t,variant:c,setShow:l}))}),[3,4].includes(e.parent)&&i.jsx("div",{className:r.configItemSidebar.divider?.[c]})]}):f):i.jsx(i.Fragment,{})};exports.default=S;