@starasia/dropdown 1.0.7 → 2.0.1

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 +215 -303
  2. package/dist/dropdown.umd.js +72 -160
  3. package/package.json +6 -6
package/dist/dropdown.es.js CHANGED
@@ -1,5 +1,5 @@
1
- import { jsx as a, jsxs as p, Fragment as H } from "react/jsx-runtime";
2
- import O, { useState as R, useRef as z, useEffect as b, forwardRef as K } from "react";
1
+ import { jsx as e, jsxs as p, Fragment as V } from "react/jsx-runtime";
2
+ import M, { useState as R, useRef as z, useEffect as b, forwardRef as K } from "react";
3
3
  const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
4
4
  * {
5
5
  margin: 0;
@@ -8,129 +8,45 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
8
8
  box-sizing: border-box;
9
9
  }
10
10
  :root {
11
- /* color */
12
- /* brand */
13
- --starasia-ui-dropdown-color-primary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
14
- --starasia-ui-dropdown-color-secondary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
15
- --starasia-ui-dropdown-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary, rgba(144, 176, 218, 1));
16
- --starasia-ui-dropdown-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
17
- --starasia-ui-dropdown-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
18
- /* gray */
19
- --starasia-ui-dropdown-color-primary-gray: var(
20
- --starasia-ui-color-gray-700,
21
- rgba(55, 65, 81, 1)
22
- );
23
- --starasia-ui-dropdown-color-secondary-gray: var(
24
- --starasia-ui-color-gray-500,
25
- rgba(107, 114, 128, 1)
26
- );
27
- --starasia-ui-dropdown-color-tertiary-gray: var(
28
- --starasia-ui-color-gray-300,
29
- rgba(209, 213, 219, 1)
30
- );
31
- --starasia-ui-dropdown-color-quaternary-gray: var(
32
- --starasia-ui-color-gray-100,
33
- rgba(243, 244, 246, 1)
34
- );
35
- --starasia-ui-dropdown-color-quinary-gray: var(
36
- --starasia-ui-color-gray-50,
37
- rgba(249, 250, 251, 1)
38
- );
39
- /* bg color */
40
- --starasia-ui-dropdown-background-color-primary: var(
41
- --starasia-ui-dropdown-color-secondary-blue,
42
- rgba(59, 130, 246, 1)
43
- );
44
- --starasia-ui-dropdown-background-color-secondary: var(
45
- --starasia-ui-dropdown-color-quinary-blue,
46
- rgba(239, 246, 255, 1)
47
- );
48
-
49
- /* disalble color */
50
- --starasia-ui-dropdown-color-disable: var(
51
- --starasia-ui-dropdown-color-tertiary-gray,
52
- rgba(209, 213, 219, 1)
53
- );
54
-
55
- /* border color */
56
- --starasia-ui-dropdown-border-color-primary: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
57
- --starasia-ui-dropdown-border-color-secondary: var(
58
- --starasia-ui-color-gray-300,
59
- rgba(209, 213, 219, 1)
60
- );
61
- --starasia-ui-dropdown-border-color-tertiary: rgba(120, 134, 127, 0.2);
62
-
63
- --starasia-ui-dropdown-color-secondary-red: var(
64
- --starasia-ui-color-red-500,
65
- rgba(239, 68, 68, 1)
66
- );
67
-
68
- /* plachoder color */
69
- --starasia-ui-dropdown-placholder-color: var(
70
- --starasia-ui-color-gray-200,
71
- rgba(201, 206, 204, 1)
72
- );
73
-
74
- /* white */
75
- --starasia-ui-dropdown-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
76
- /* disabled bg */
77
- --starasia-ui-dropdown-color-disabled-bg: rgba(242, 243, 242, 1);
78
- /* text colors */
79
- --starasia-ui-dropdown-color-text-primary: rgba(24, 26, 25, 1);
80
- --starasia-ui-dropdown-color-text-secondary: rgba(120, 134, 127, 1);
81
- /* shadow */
82
- --starasia-ui-dropdown-box-shadow-list: rgba(0, 0, 0, 0.08);
83
-
84
- /* border width */
85
- --starasia-ui-dropdown-border-width: var(--starasia-ui-border, 1px);
86
-
87
- /* spacing */
88
- --starasia-ui-dropdown-spacing-xs: var(--starasia-ui-spacing-xs, 4px);
89
- --starasia-ui-dropdown-spacing-sm: var(--starasia-ui-spacing-sm, 8px);
90
-
91
- /* shadow */
92
- --starasia-ui-dropdown-box-shadow: 0px 0px 0px 2px rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.2);
93
-
94
- /* below is for size,above is */
95
- --starasia-ui-dropdown-fontWeight-normal: var(
96
- --starasia-ui-fontWeights-normal,
97
- 300
98
- );
99
- /* dropdown size sm */
100
- --starasia-ui-dropdown-height-sm: var(--starasia-ui-h-8, 32px);
101
- --starasia-ui-dropdown-border-radius-sm: var(--starasia-ui-radii-md, 8px);
102
- --starasia-ui-dropdown-padding-inline-sm: var(--starasia-ui-spacing-sm, 8px);
103
-
104
- /* dropdown size md */
105
- --starasia-ui-dropdown-height-md: 38px;
106
- --starasia-ui-dropdown-border-radius-md: var(--starasia-ui-radii-md, 8px);
107
- --starasia-ui-dropdown-padding-inline-md: var(--starasia-ui-spacing-3, 12px);
108
-
109
- /* dropdown size lg */
110
- --starasia-ui-dropdown-height-lg: var(--starasia-ui-h-12, 48px);
111
- --starasia-ui-dropdown-border-radius-lg: var(--starasia-ui-radii-lg, 12px);
112
- --starasia-ui-dropdown-padding-inline-lg: var(--starasia-ui-spacing-3, 12px);
11
+ --sa-dropdown-brand: var(--sa-background-brand, #04254f);
12
+ --sa-dropdown-brand-subtle: var(--sa-color-brand-50, #e6edf6);
13
+ --sa-dropdown-brand-secondary: var(--sa-color-brand-200, #99b3db);
14
+ --sa-dropdown-bg: var(--sa-background-primary, #ffffff);
15
+ --sa-dropdown-bg-disabled: rgba(242, 243, 242, 1);
16
+ --sa-dropdown-border: var(--sa-border, 1px);
17
+ --sa-dropdown-border-color: rgba(120, 134, 127, 0.2);
18
+ --sa-dropdown-border-active: var(--sa-background-brand, #04254f);
19
+ --sa-dropdown-border-search: var(--sa-color-gray-300, #dddee1);
20
+ --sa-dropdown-border-error: var(--sa-color-error-500, #ff4d6d);
21
+ --sa-dropdown-color-disable: var(--sa-color-gray-300, #dddee1);
22
+ --sa-dropdown-placeholder: var(--sa-color-gray-400, #b7b9be);
23
+ --sa-dropdown-text-primary: rgba(24, 26, 25, 1);
24
+ --sa-dropdown-text-secondary: rgba(120, 134, 127, 1);
25
+ --sa-dropdown-shadow-list: rgba(0, 0, 0, 0.08);
26
+ --sa-dropdown-shadow-focus: 0px 0px 0px 2px var(--sa-color-brand-200, #99b3db);
27
+ --sa-dropdown-radius: var(--sa-radii-md, 0.5rem);
28
+ --sa-dropdown-radius-lg: var(--sa-radii-lg, 0.75rem);
113
29
  }
114
30
 
115
31
  .starasia-input-dropdown-size-sm {
116
- --baseFont: var(--starasia-ui-fontSizes-sm, 12px);
117
- --height: var(--starasia-ui-dropdown-height-sm);
118
- --borderRadius: var(--starasia-ui-dropdown-border-radius-sm);
119
- --paddingInline: var(--starasia-ui-dropdown-padding-inline-sm);
32
+ --baseFont: var(--sa-font-size-sm, 12px);
33
+ --height: var(--sa-h-8, 32px);
34
+ --borderRadius: var(--sa-dropdown-radius);
35
+ --paddingInline: var(--sa-spacing-sm, 8px);
120
36
  }
121
37
 
122
38
  .starasia-input-dropdown-size-md {
123
- --baseFont: var(--starasia-ui-fontSizes-md, 14px);
124
- --height: var(--starasia-ui-dropdown-height-md);
125
- --borderRadius: var(--starasia-ui-dropdown-border-radius-md);
126
- --paddingInline: var(--starasia-ui-dropdown-padding-inline-md);
39
+ --baseFont: var(--sa-font-size-md, 14px);
40
+ --height: 38px;
41
+ --borderRadius: var(--sa-dropdown-radius);
42
+ --paddingInline: var(--sa-spacing-3, 12px);
127
43
  }
128
44
 
129
45
  .starasia-input-dropdown-size-lg {
130
- --baseFont: var(--starasia-ui-fontSizes-lg, 16px);
131
- --height: var(--starasia-ui-dropdown-height-lg);
132
- --borderRadius: var(--starasia-ui-dropdown-border-radius-lg);
133
- --paddingInline: var(--starasia-ui-dropdown-padding-inline-lg);
46
+ --baseFont: var(--sa-font-size-lg, 16px);
47
+ --height: var(--sa-h-12, 48px);
48
+ --borderRadius: var(--sa-dropdown-radius-lg);
49
+ --paddingInline: var(--sa-spacing-3, 12px);
134
50
  }
135
51
 
136
52
  .starasia-input-dropdown-container {
@@ -139,32 +55,31 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
139
55
  padding-inline: var(--paddingInline);
140
56
  display: flex;
141
57
  align-items: center;
142
- border: var(--starasia-ui-dropdown-border-width) solid
143
- var(--starasia-ui-dropdown-border-color-tertiary);
58
+ border: var(--sa-dropdown-border) solid var(--sa-dropdown-border-color);
144
59
  border-radius: var(--borderRadius);
145
- background-color: var(--starasia-ui-dropdown-color-white);
60
+ background-color: var(--sa-dropdown-bg);
146
61
  font-size: var(--baseFont);
147
62
  cursor: pointer;
148
63
  }
149
64
  .starasia-input-dropdown-container.disable {
150
- background-color: var(--starasia-ui-dropdown-color-disabled-bg);
65
+ background-color: var(--sa-dropdown-bg-disabled);
151
66
  cursor: not-allowed;
152
67
  pointer-events: none;
153
68
  }
154
69
 
155
70
  .starasia-input-dropdown-container.error {
156
- border-color: var(--starasia-ui-dropdown-color-secondary-red) !important;
71
+ border-color: var(--sa-dropdown-border-error) !important;
157
72
  }
158
73
  .starasia-input-dropdown-container.active {
159
- border-color: var(--starasia-ui-dropdown-border-color-primary);
160
- box-shadow: var(--starasia-ui-dropdown-box-shadow);
161
- background-color: var(--starasia-ui-dropdown-color-white);
74
+ border-color: var(--sa-dropdown-border-active);
75
+ box-shadow: var(--sa-dropdown-shadow-focus);
76
+ background-color: var(--sa-dropdown-bg);
162
77
  }
163
78
 
164
79
  .starasia-input-dropdown-preview-container {
165
80
  display: flex;
166
81
  flex-direction: row;
167
- gap: var(--starasia-ui-dropdown-spacing-sm);
82
+ gap: var(--sa-spacing-sm, 8px);
168
83
  align-items: center;
169
84
  justify-content: space-between;
170
85
  width: 100%;
@@ -175,12 +90,11 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
175
90
  /* position: absolute; */
176
91
  position: fixed;
177
92
  /* left: 0; */
178
- padding: var(--starasia-ui-dropdown-spacing-sm);
179
- border: var(--starasia-ui-dropdown-border-width) solid
180
- var(--starasia-ui-dropdown-border-color-tertiary);
93
+ padding: var(--sa-spacing-sm, 8px);
94
+ border: var(--sa-dropdown-border) solid var(--sa-dropdown-border-color);
181
95
  border-radius: var(--borderRadius);
182
- background-color: var(--starasia-ui-dropdown-color-white);
183
- box-shadow: 0px 8px 12px 0px var(--starasia-ui-dropdown-box-shadow-list);
96
+ background-color: var(--sa-dropdown-bg);
97
+ box-shadow: 0px 8px 12px 0px var(--sa-dropdown-shadow-list);
184
98
  max-height: 312px;
185
99
  overflow-y: auto;
186
100
  z-index: 999;
@@ -189,7 +103,7 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
189
103
  /* min-width: 100%; */
190
104
  display: flex;
191
105
  flex-direction: column;
192
- gap: var(--starasia-ui-dropdown-spacing-sm);
106
+ gap: var(--sa-spacing-sm, 8px);
193
107
  /* overflow: hidden;
194
108
  text-overflow: ellipsis;
195
109
  white-space: nowrap; */
@@ -197,11 +111,11 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
197
111
 
198
112
  .starasia-input-dropdown-lists-container-bottom {
199
113
  top: 100%;
200
- margin-top: var(--starasia-ui-dropdown-spacing-xs);
114
+ margin-top: var(--sa-spacing-xs, 4px);
201
115
  }
202
116
  .starasia-input-dropdown-lists-container-top {
203
117
  bottom: 100%;
204
- margin-bottom: var(--starasia-ui-dropdown-spacing-xs);
118
+ margin-bottom: var(--sa-spacing-xs, 4px);
205
119
  }
206
120
 
207
121
  .starasia-input-dropdown-container-dropdown-search {
@@ -210,12 +124,11 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
210
124
  height: var(--height);
211
125
  min-height: var(--height);
212
126
  max-height: var(--height);
213
- border: var(--starasia-ui-dropdown-border-width) solid
214
- var(--starasia-ui-dropdown-border-color-secondary);
127
+ border: var(--sa-dropdown-border) solid var(--sa-dropdown-border-search);
215
128
  border-radius: var(--borderRadius);
216
- gap: var(--starasia-ui-dropdown-spacing-sm);
129
+ gap: var(--sa-spacing-sm, 8px);
217
130
  padding-inline: var(--paddingInline);
218
- background: var(--starasia-ui-dropdown-color-white);
131
+ background: var(--sa-dropdown-bg);
219
132
  & input {
220
133
  flex: 1;
221
134
  outline: none;
@@ -230,7 +143,7 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
230
143
  flex-direction: column;
231
144
  /* overflow: hidden; */
232
145
 
233
- /* gap: var(--starasia-ui-dropdown-spacing-xs); */
146
+ /* gap: var(--sa-spacing-xs, 0.25rem); */
234
147
  }
235
148
  .starasia-input-dropdwon-item-container.multi {
236
149
  display: flex;
@@ -238,7 +151,7 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
238
151
  gap: 8px;
239
152
  /* overflow: hidden; */
240
153
 
241
- /* gap: var(--starasia-ui-dropdown-spacing-xs); */
154
+ /* gap: var(--sa-spacing-xs, 0.25rem); */
242
155
  }
243
156
 
244
157
  .starasia-input-dropdwon-item {
@@ -249,38 +162,38 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
249
162
  display: flex;
250
163
  align-items: center;
251
164
  cursor: pointer;
252
- gap: var(--starasia-ui-dropdown-spacing-xs);
165
+ gap: var(--sa-spacing-xs, 4px);
253
166
  padding-block: var(--paddingInline);
254
- border-radius: var(--starasia-ui-dropdown-border-radius-sm);
167
+ border-radius: var(--sa-dropdown-radius);
255
168
  /* min-width: max-content; */
256
169
  overflow: hidden;
257
170
  }
258
171
 
259
172
  .starasia-input-dropdwon-item:hover {
260
- background-color: rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.21);
173
+ background-color: color-mix(in srgb, var(--sa-dropdown-brand-secondary) 21%, transparent);
261
174
  }
262
175
  .starasia-input-dropdwon-item.active {
263
- /* color: var(--starasia-ui-dropdown-background-color-primary); */
176
+ /* color: var(--sa-dropdown-brand); */
264
177
  /* border-radius: var(--borderRadius); */
265
- background-color: rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.21);
266
- /* background: var(--starasia-ui-dropdown-background-color-secondary); */
178
+ background-color: color-mix(in srgb, var(--sa-dropdown-brand-secondary) 21%, transparent);
179
+ /* background: var(--sa-dropdown-brand-subtle); */
267
180
  /* box-shadow: 0px 0px 0px -1px #f0f0f0; */
268
181
  }
269
182
  .starasia-input-dropdwon-item.highlight {
270
- background-color: rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.35);
271
- outline: 2px solid rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.4);
183
+ background-color: color-mix(in srgb, var(--sa-dropdown-brand-secondary) 35%, transparent);
184
+ outline: 2px solid color-mix(in srgb, var(--sa-dropdown-brand-secondary) 40%, transparent);
272
185
  outline-offset: -2px;
273
186
  }
274
187
 
275
188
  .starasia-input-dropdwon-item-disable {
276
- color: var(--starasia-ui-dropdown-color-disable) !important;
189
+ color: var(--sa-dropdown-color-disable) !important;
277
190
  pointer-events: none;
278
191
  }
279
192
 
280
193
  .starasia-input-dropdown-container-preview-item {
281
194
  flex: 1;
282
195
  display: flex;
283
- gap: var(--starasia-ui-dropdown-spacing-xs);
196
+ gap: var(--sa-spacing-xs, 4px);
284
197
  flex-wrap: wrap;
285
198
  align-items: center;
286
199
  overflow-y: auto;
@@ -288,12 +201,11 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
288
201
  }
289
202
 
290
203
  .starasia-input-dropdown-preview-item {
291
- border: var(--starasia-ui-dropdown-border-width) solid
292
- var(--starasia-ui-dropdown-border-color-primary);
204
+ border: var(--sa-dropdown-border) solid var(--sa-dropdown-border-active);
293
205
  padding-inline: var(--paddingInline);
294
206
  border-radius: var(--borderRadius);
295
- background-color: var(--starasia-ui-dropdown-background-color-secondary);
296
- color: var(--starasia-ui-dropdown-background-color-primary);
207
+ background-color: var(--sa-dropdown-brand-subtle);
208
+ color: var(--sa-dropdown-brand);
297
209
  height: max-content;
298
210
  font-size: var(--baseFont);
299
211
  display: flex;
@@ -301,35 +213,35 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
301
213
  gap: 2;
302
214
  }
303
215
  .starasia-input-dropdown-placeholder {
304
- color: var(--starasia-ui-dropdown-placholder-color);
305
- font-weight: var(--starasia-ui-dropdown-fontWeight-normal);
216
+ color: var(--sa-dropdown-placeholder);
217
+ font-weight: var(--sa-font-weight-normal, 300);
306
218
  }
307
219
 
308
220
  .starasia-input-dropdwon-item-text {
309
- color: var(--starasia-ui-dropdown-color-text-primary);
221
+ color: var(--sa-dropdown-text-primary);
310
222
  /* font-size: 14px; */
311
223
  font-size: inherit;
312
224
  font-weight: 500;
313
225
  }
314
226
  .starasia-input-dropdwon-item-text.active {
315
- color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
227
+ color: var(--sa-dropdown-brand);
316
228
  }
317
229
 
318
230
  .starasia-input-dropdwon-item-text-description {
319
- color: var(--starasia-ui-dropdown-color-text-secondary);
231
+ color: var(--sa-dropdown-text-secondary);
320
232
  /* font-size: 14px; */
321
233
  font-size: inherit;
322
234
  font-weight: 400;
323
235
  }
324
236
  .starasia-input-dropdwon-item-text-description.active {
325
- color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
237
+ color: var(--sa-dropdown-brand);
326
238
  }
327
239
 
328
240
  /* for checkbox */
329
241
  .checkbox-wrapper-30 .checkbox {
330
242
  --bg: #fff;
331
243
  --brdr: #d1d6ee;
332
- --brdr-actv: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
244
+ --brdr-actv: var(--sa-background-brand, #04254f);
333
245
  --brdr-hovr: #bbc1e1;
334
246
  --dur: calc((var(--size, 2) / 2) * 0.6s);
335
247
  display: inline-block;
@@ -402,23 +314,23 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
402
314
  width: 100%;
403
315
  }
404
316
  `;
405
- function G(n) {
406
- const [c, s] = R(n), d = z(null), i = (o) => {
317
+ function G(r) {
318
+ const [c, s] = R(r), d = z(null), a = (o) => {
407
319
  d.current && !d.current.contains(o.target) && s(!1);
408
320
  };
409
- return b(() => (document.addEventListener("click", i, !0), () => {
410
- document.removeEventListener("click", i, !0);
321
+ return b(() => (document.addEventListener("click", a, !0), () => {
322
+ document.removeEventListener("click", a, !0);
411
323
  }), []), { ref: d, isComponentVisible: c, setIsComponentVisible: s };
412
324
  }
413
- const Q = ({ ...n }) => /* @__PURE__ */ a(
325
+ const Q = ({ ...r }) => /* @__PURE__ */ e(
414
326
  "svg",
415
327
  {
416
328
  xmlns: "http://www.w3.org/2000/svg",
417
- ...n,
329
+ ...r,
418
330
  viewBox: "0 0 24 24",
419
331
  fill: "none",
420
- color: "#939E99",
421
- children: /* @__PURE__ */ a(
332
+ color: "var(--sa-color-gray-500, #8c8f97)",
333
+ children: /* @__PURE__ */ e(
422
334
  "path",
423
335
  {
424
336
  d: "M4 9L12 17L20 9",
@@ -429,15 +341,15 @@ const Q = ({ ...n }) => /* @__PURE__ */ a(
429
341
  }
430
342
  )
431
343
  }
432
- ), T = ({ ...n }) => /* @__PURE__ */ p(
344
+ ), T = ({ ...r }) => /* @__PURE__ */ p(
433
345
  "svg",
434
346
  {
435
347
  xmlns: "http://www.w3.org/2000/svg",
436
- ...n,
348
+ ...r,
437
349
  viewBox: "0 0 20 20",
438
350
  fill: "none",
439
351
  children: [
440
- /* @__PURE__ */ a(
352
+ /* @__PURE__ */ e(
441
353
  "circle",
442
354
  {
443
355
  cx: "9.80547",
@@ -449,7 +361,7 @@ const Q = ({ ...n }) => /* @__PURE__ */ a(
449
361
  strokeLinejoin: "round"
450
362
  }
451
363
  ),
452
- /* @__PURE__ */ a(
364
+ /* @__PURE__ */ e(
453
365
  "path",
454
366
  {
455
367
  d: "M15.0153 15.4043L17.9519 18.3333",
@@ -461,19 +373,19 @@ const Q = ({ ...n }) => /* @__PURE__ */ a(
461
373
  )
462
374
  ]
463
375
  }
464
- ), X = ({ isChecked: n }) => /* @__PURE__ */ p("div", { className: "checkbox-wrapper-30", children: [
376
+ ), X = ({ isChecked: r }) => /* @__PURE__ */ p("div", { className: "checkbox-wrapper-30", children: [
465
377
  /* @__PURE__ */ p("span", { className: "checkbox", children: [
466
- /* @__PURE__ */ a(
378
+ /* @__PURE__ */ e(
467
379
  "input",
468
380
  {
469
381
  type: "checkbox",
470
382
  style: { pointerEvents: "none" },
471
- checked: n
383
+ checked: r
472
384
  }
473
385
  ),
474
- /* @__PURE__ */ a("svg", { children: /* @__PURE__ */ a("use", { xlinkHref: "#checkbox-30", className: "checkbox" }) })
386
+ /* @__PURE__ */ e("svg", { children: /* @__PURE__ */ e("use", { xlinkHref: "#checkbox-30", className: "checkbox" }) })
475
387
  ] }),
476
- /* @__PURE__ */ a("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "none" }, children: /* @__PURE__ */ a("symbol", { id: "checkbox-30", viewBox: "0 0 22 22", children: /* @__PURE__ */ a(
388
+ /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "none" }, children: /* @__PURE__ */ e("symbol", { id: "checkbox-30", viewBox: "0 0 22 22", children: /* @__PURE__ */ e(
477
389
  "path",
478
390
  {
479
391
  fill: "none",
@@ -483,31 +395,31 @@ const Q = ({ ...n }) => /* @__PURE__ */ a(
483
395
  ) }) })
484
396
  ] }), Y = K(
485
397
  ({
486
- positionDropdown: n,
398
+ positionDropdown: r,
487
399
  dropdownLists: c,
488
400
  isComponentVisible: s,
489
401
  searchAble: d,
490
- onSearch: i,
402
+ onSearch: a,
491
403
  value: o,
492
- handleChangeValue: g,
404
+ handleChangeValue: v,
493
405
  multiSelect: l,
494
406
  searchValue: $,
495
- highlightedIndex: v
407
+ highlightedIndex: g
496
408
  }, N) => {
497
- const [I, W] = R(0), f = z(null), x = z([]);
409
+ const [I, L] = R(0), m = z(null), x = z([]);
498
410
  return b(() => {
499
- if (f.current) {
500
- const r = f.current.getBoundingClientRect();
501
- W(r.width);
411
+ if (m.current) {
412
+ const n = m.current.getBoundingClientRect();
413
+ L(n.width);
502
414
  }
503
- }, [f, s]), b(() => {
504
- var r;
505
- v >= 0 && x.current[v] && ((r = x.current[v]) == null || r.scrollIntoView({ block: "nearest" }));
506
- }, [v]), /* @__PURE__ */ a(H, { children: s ? /* @__PURE__ */ p(
415
+ }, [m, s]), b(() => {
416
+ var n;
417
+ g >= 0 && x.current[g] && ((n = x.current[g]) == null || n.scrollIntoView({ block: "nearest" }));
418
+ }, [g]), /* @__PURE__ */ e(V, { children: s ? /* @__PURE__ */ p(
507
419
  "div",
508
420
  {
509
421
  className: "starasia-input-dropdown-lists-container",
510
- onClick: (r) => r.stopPropagation(),
422
+ onClick: (n) => n.stopPropagation(),
511
423
  ref: N,
512
424
  children: [
513
425
  d ? /* @__PURE__ */ p(
@@ -515,19 +427,19 @@ const Q = ({ ...n }) => /* @__PURE__ */ a(
515
427
  {
516
428
  className: "starasia-input-dropdown-container-dropdown-search",
517
429
  style: {
518
- order: n == "bottom" ? 0 : 2,
430
+ order: r == "bottom" ? 0 : 2,
519
431
  position: "sticky",
520
432
  top: 0,
521
433
  bottom: 0,
522
434
  zIndex: 1
523
435
  },
524
436
  children: [
525
- /* @__PURE__ */ a("div", { style: { display: "flex" }, children: /* @__PURE__ */ a(T, { strokeWidth: 2, width: 20 }) }),
526
- /* @__PURE__ */ a(
437
+ /* @__PURE__ */ e("div", { style: { display: "flex" }, children: /* @__PURE__ */ e(T, { strokeWidth: 2, width: 20 }) }),
438
+ /* @__PURE__ */ e(
527
439
  "input",
528
440
  {
529
- onChange: (r) => {
530
- i && i(r.target.value);
441
+ onChange: (n) => {
442
+ a && a(n.target.value);
531
443
  },
532
444
  value: $,
533
445
  autoFocus: !0,
@@ -537,57 +449,57 @@ const Q = ({ ...n }) => /* @__PURE__ */ a(
537
449
  ]
538
450
  }
539
451
  ) : null,
540
- /* @__PURE__ */ a(
452
+ /* @__PURE__ */ e(
541
453
  "div",
542
454
  {
543
455
  className: `starasia-input-dropdwon-item-container ${l ? "multi" : ""}`,
544
- ref: f,
545
- children: c.map((r, w) => {
546
- const y = !!(o != null && o.find((k) => k.value === r.value));
456
+ ref: m,
457
+ children: c.map((n, h) => {
458
+ const k = !!(o != null && o.find((y) => y.value === n.value));
547
459
  return /* @__PURE__ */ p(
548
460
  "div",
549
461
  {
550
- className: `starasia-input-dropdwon-item ${y ? "active" : ""} ${w === v ? "highlight" : ""} ${r.disable ? "starasia-input-dropdwon-item-disable" : ""}`,
551
- ref: (k) => {
552
- x.current[w] = k;
462
+ className: `starasia-input-dropdwon-item ${k ? "active" : ""} ${h === g ? "highlight" : ""} ${n.disable ? "starasia-input-dropdwon-item-disable" : ""}`,
463
+ ref: (y) => {
464
+ x.current[h] = y;
553
465
  },
554
- onClick: () => g(r.label, r.value),
466
+ onClick: () => v(n.label, n.value),
555
467
  children: [
556
- l ? /* @__PURE__ */ a("div", { style: { marginRight: "8px" }, children: /* @__PURE__ */ a(X, { isChecked: y }) }) : null,
557
- r.icon ? /* @__PURE__ */ a("div", { children: O.cloneElement(r.icon, {
468
+ l ? /* @__PURE__ */ e("div", { style: { marginRight: "8px" }, children: /* @__PURE__ */ e(X, { isChecked: k }) }) : null,
469
+ n.icon ? /* @__PURE__ */ e("div", { children: M.cloneElement(n.icon, {
558
470
  width: 16
559
471
  }) }) : null,
560
472
  /* @__PURE__ */ p("div", { children: [
561
- /* @__PURE__ */ a(
473
+ /* @__PURE__ */ e(
562
474
  "p",
563
475
  {
564
- className: `starasia-input-dropdwon-item-text ${y ? "active" : null} ${r.disable ? "starasia-input-dropdwon-item-disable" : null}`,
476
+ className: `starasia-input-dropdwon-item-text ${k ? "active" : null} ${n.disable ? "starasia-input-dropdwon-item-disable" : null}`,
565
477
  style: {
566
478
  textWrap: "nowrap",
567
479
  width: `${I - 12}px`,
568
480
  overflow: "hidden",
569
481
  textOverflow: "ellipsis"
570
482
  },
571
- children: r.label
483
+ children: n.label
572
484
  }
573
485
  ),
574
- r.description ? /* @__PURE__ */ a(
486
+ n.description ? /* @__PURE__ */ e(
575
487
  "p",
576
488
  {
577
- className: `starasia-input-dropdwon-item-text-description ${y ? "active" : null} ${r.disable ? "starasia-input-dropdwon-item-disable" : null}`,
489
+ className: `starasia-input-dropdwon-item-text-description ${k ? "active" : null} ${n.disable ? "starasia-input-dropdwon-item-disable" : null}`,
578
490
  style: {
579
491
  textWrap: "nowrap",
580
492
  width: `${I - 12}px`,
581
493
  overflow: "hidden",
582
494
  textOverflow: "ellipsis"
583
495
  },
584
- children: r.description
496
+ children: n.description
585
497
  }
586
498
  ) : null
587
499
  ] })
588
500
  ]
589
501
  },
590
- w
502
+ h
591
503
  );
592
504
  })
593
505
  }
@@ -597,13 +509,13 @@ const Q = ({ ...n }) => /* @__PURE__ */ a(
597
509
  ) : null });
598
510
  }
599
511
  ), Z = ({
600
- children: n,
512
+ children: r,
601
513
  handleChangePosition: c
602
514
  }) => {
603
515
  const s = z(null);
604
516
  b(() => {
605
- var g;
606
- const i = () => {
517
+ var v;
518
+ const a = () => {
607
519
  if (s.current) {
608
520
  let l = s.current.parentElement;
609
521
  for (; l && !d(l); )
@@ -611,68 +523,68 @@ const Q = ({ ...n }) => /* @__PURE__ */ a(
611
523
  l && c();
612
524
  }
613
525
  };
614
- let o = (g = s.current) == null ? void 0 : g.parentElement;
526
+ let o = (v = s.current) == null ? void 0 : v.parentElement;
615
527
  for (; o && !d(o); )
616
528
  o = o.parentElement;
617
- return o && o.addEventListener("scroll", i), i(), () => {
618
- o && o.removeEventListener("scroll", i);
529
+ return o && o.addEventListener("scroll", a), a(), () => {
530
+ o && o.removeEventListener("scroll", a);
619
531
  };
620
532
  }, []);
621
- const d = (i) => i && (i.scrollHeight > i.clientHeight || i.scrollWidth > i.clientWidth);
622
- return /* @__PURE__ */ a("div", { ref: s, children: n });
623
- }, S = "starasia-input-dropdown-styles", _ = (n) => {
624
- if (!document.getElementById(S)) {
533
+ const d = (a) => a && (a.scrollHeight > a.clientHeight || a.scrollWidth > a.clientWidth);
534
+ return /* @__PURE__ */ e("div", { ref: s, children: r });
535
+ }, F = "starasia-input-dropdown-styles", _ = (r) => {
536
+ if (!document.getElementById(F)) {
625
537
  const c = document.createElement("style");
626
- c.id = S, c.textContent = n, document.head.appendChild(c);
538
+ c.id = F, c.textContent = r, document.head.appendChild(c);
627
539
  }
628
540
  };
629
541
  _(U);
630
- const or = ({
631
- dropdownLists: n,
542
+ const on = ({
543
+ dropdownLists: r,
632
544
  onChange: c,
633
545
  defaultValue: s,
634
546
  size: d = "md",
635
- multiSelect: i,
547
+ multiSelect: a,
636
548
  searchAble: o,
637
- iconLeft: g,
549
+ iconLeft: v,
638
550
  placeholder: l,
639
551
  onSearch: $,
640
- error: v,
552
+ error: g,
641
553
  onBlur: N,
642
554
  onFocus: I,
643
- disable: W,
644
- searchValue: f
555
+ disable: L,
556
+ searchValue: m
645
557
  }) => {
646
- const x = z(), [r, w] = R([]), [y, k] = R(""), [h, L] = R(-1), m = z(null), { isComponentVisible: C, ref: D, setIsComponentVisible: B } = G(!1), V = () => {
647
- B((e) => !e);
648
- }, A = (e, t) => {
649
- if (!i)
650
- w([{ label: e, value: t }]), c([{ label: e, value: t }]), B(!1);
651
- else if (r == null ? void 0 : r.find((u) => u.value === t)) {
652
- const u = [
653
- ...r ? r.filter((J) => J.value !== t) : []
558
+ const x = z(), [n, h] = R([]), [k, y] = R(""), [u, D] = R(-1), f = z(null), { isComponentVisible: C, ref: W, setIsComponentVisible: B } = G(!1), P = () => {
559
+ B((t) => !t);
560
+ }, A = (t, i) => {
561
+ if (!a)
562
+ h([{ label: t, value: i }]), c([{ label: t, value: i }]), B(!1);
563
+ else if (n == null ? void 0 : n.find((w) => w.value === i)) {
564
+ const w = [
565
+ ...n ? n.filter((J) => J.value !== i) : []
654
566
  ];
655
- w(u), c(u);
567
+ h(w), c(w);
656
568
  } else {
657
- const u = [...r || [], { label: e, value: t }];
658
- w(u), c(u);
569
+ const w = [...n || [], { label: t, value: i }];
570
+ h(w), c(w);
659
571
  }
660
572
  };
661
573
  b(() => {
662
- JSON.stringify(x.current) === JSON.stringify(s) || (x.current = s, w(x.current || []));
574
+ JSON.stringify(x.current) === JSON.stringify(s) || (x.current = s, h(x.current || []));
663
575
  }, [s]);
664
- const M = () => r.length ? i ? r == null ? void 0 : r.map((e, t) => /* @__PURE__ */ p("div", { className: "starasia-input-dropdown-preview-item", children: [
665
- /* @__PURE__ */ a("p", { style: { minWidth: "max-content" }, children: e == null ? void 0 : e.label }, t),
666
- /* @__PURE__ */ a(
667
- rr,
576
+ const S = () => n.length ? a ? n == null ? void 0 : n.map((t, i) => /* @__PURE__ */ p("div", { className: "starasia-input-dropdown-preview-item", children: [
577
+ /* @__PURE__ */ e("p", { style: { minWidth: "max-content" }, children: t == null ? void 0 : t.label }, i),
578
+ /* @__PURE__ */ e(
579
+ nn,
668
580
  {
669
- onClick: () => A(e.label, e.value)
581
+ onClick: () => A(t.label, t.value)
670
582
  }
671
583
  )
672
- ] })) : /* @__PURE__ */ a("p", { style: { minWidth: "max-content" }, children: r == null ? void 0 : r[0].label }) : /* @__PURE__ */ a("p", { className: "starasia-input-dropdown-placeholder", children: l }), E = () => {
673
- if (D.current && m.current) {
674
- const e = window.innerHeight, t = D.current.getBoundingClientRect(), j = m.current.getBoundingClientRect(), u = t.bottom + j.height;
675
- m.current.style.left = `${t.left}px`, m.current.style.width = `${t.width}px`, u >= e - 10 ? (m.current.style.top = `${t.top - j.height - 5}px`, k("top")) : (m.current.style.top = `${t.top + t.height}px`, k("bottom"));
584
+ ] })) : /* @__PURE__ */ e("p", { style: { minWidth: "max-content" }, children: n == null ? void 0 : n[0].label }) : /* @__PURE__ */ e("p", { className: "starasia-input-dropdown-placeholder", children: l }), E = () => {
585
+ if (W.current && f.current) {
586
+ const t = window.innerHeight, i = W.current.getBoundingClientRect(), j = f.current.getBoundingClientRect(), w = i.bottom + j.height;
587
+ f.current.style.left = `${i.left}px`, f.current.style.width = `${i.width}px`, w >= t - 10 ? (f.current.style.top = `${i.top - j.height - 5}px`, y("top")) : (f.current.style.top = `${i.top + i.height}px`, y("bottom"));
676
588
  }
677
589
  };
678
590
  b(() => (window.addEventListener("scroll", E), window.addEventListener("resize", E), () => {
@@ -680,30 +592,30 @@ const or = ({
680
592
  }), []), b(() => {
681
593
  E();
682
594
  }, [C]), b(() => {
683
- C || L(-1);
595
+ C || D(-1);
684
596
  }, [C]);
685
- const P = (e) => {
597
+ const q = (t) => {
686
598
  if (!C) {
687
- (e.key === "ArrowDown" || e.key === "Enter") && (e.preventDefault(), B(!0));
599
+ (t.key === "ArrowDown" || t.key === "Enter") && (t.preventDefault(), B(!0));
688
600
  return;
689
601
  }
690
- switch (e.key) {
602
+ switch (t.key) {
691
603
  case "ArrowDown": {
692
- e.preventDefault();
693
- const t = q(n, h, 1);
694
- t !== -1 && L(t);
604
+ t.preventDefault();
605
+ const i = H(r, u, 1);
606
+ i !== -1 && D(i);
695
607
  break;
696
608
  }
697
609
  case "ArrowUp": {
698
- e.preventDefault();
699
- const t = q(n, h, -1);
700
- t !== -1 && L(t);
610
+ t.preventDefault();
611
+ const i = H(r, u, -1);
612
+ i !== -1 && D(i);
701
613
  break;
702
614
  }
703
615
  case "Enter": {
704
- e.preventDefault(), h >= 0 && n[h] && !n[h].disable && A(
705
- n[h].label,
706
- n[h].value
616
+ t.preventDefault(), u >= 0 && r[u] && !r[u].disable && A(
617
+ r[u].label,
618
+ r[u].value
707
619
  );
708
620
  break;
709
621
  }
@@ -713,85 +625,85 @@ const or = ({
713
625
  }
714
626
  }
715
627
  };
716
- return /* @__PURE__ */ a(Z, { handleChangePosition: E, children: /* @__PURE__ */ p(
628
+ return /* @__PURE__ */ e(Z, { handleChangePosition: E, children: /* @__PURE__ */ p(
717
629
  "div",
718
630
  {
719
- className: `starasia-input-dropdown-container ${W ? "disable" : ""} starasia-input-dropdown-size-${d} ${C ? "active" : ""} ${v ? "error" : ""}`,
720
- ref: D,
721
- onClick: V,
722
- onKeyDown: P,
631
+ className: `starasia-input-dropdown-container ${L ? "disable" : ""} starasia-input-dropdown-size-${d} ${C ? "active" : ""} ${g ? "error" : ""}`,
632
+ ref: W,
633
+ onClick: P,
634
+ onKeyDown: q,
723
635
  tabIndex: 0,
724
636
  onBlur: N,
725
637
  onFocus: I,
726
638
  children: [
727
639
  /* @__PURE__ */ p("div", { className: "starasia-input-dropdown-preview-container", children: [
728
- g ? /* @__PURE__ */ a(H, { children: O.cloneElement(g, {
729
- width: F(d),
730
- color: "#939E99",
640
+ v ? /* @__PURE__ */ e(V, { children: M.cloneElement(v, {
641
+ width: O(d),
642
+ color: "var(--sa-color-gray-500, #8c8f97)",
731
643
  style: {
732
- color: "#939E99"
644
+ color: "var(--sa-color-gray-500, #8c8f97)"
733
645
  }
734
646
  }) }) : null,
735
- /* @__PURE__ */ a(
647
+ /* @__PURE__ */ e(
736
648
  "div",
737
649
  {
738
650
  className: "starasia-input-dropdown-container-preview-item",
739
- children: M()
651
+ children: S()
740
652
  }
741
653
  ),
742
- /* @__PURE__ */ a(
654
+ /* @__PURE__ */ e(
743
655
  Q,
744
656
  {
745
657
  strokeWidth: 2,
746
- width: F(d),
747
- style: { color: "#939E99" }
658
+ width: O(d),
659
+ style: { color: "var(--sa-color-gray-500, #8c8f97)" }
748
660
  }
749
661
  )
750
662
  ] }),
751
- /* @__PURE__ */ a(
663
+ /* @__PURE__ */ e(
752
664
  Y,
753
665
  {
754
- dropdownLists: n,
666
+ dropdownLists: r,
755
667
  handleChangeValue: A,
756
668
  isComponentVisible: C,
757
- positionDropdown: y,
669
+ positionDropdown: k,
758
670
  searchAble: !!o,
759
- value: r,
671
+ value: n,
760
672
  onSearch: $,
761
- ref: m,
762
- multiSelect: i,
763
- searchValue: f,
764
- highlightedIndex: h
673
+ ref: f,
674
+ multiSelect: a,
675
+ searchValue: m,
676
+ highlightedIndex: u
765
677
  }
766
678
  )
767
679
  ]
768
680
  }
769
681
  ) });
770
- }, q = (n, c, s) => {
771
- const d = n.length;
772
- let i = c + s;
773
- for (; i >= 0 && i < d; ) {
774
- if (!n[i].disable)
775
- return i;
776
- i += s;
682
+ }, H = (r, c, s) => {
683
+ const d = r.length;
684
+ let a = c + s;
685
+ for (; a >= 0 && a < d; ) {
686
+ if (!r[a].disable)
687
+ return a;
688
+ a += s;
777
689
  }
778
690
  if (s === 1) {
779
691
  for (let o = 0; o < d; o++)
780
- if (!n[o].disable)
692
+ if (!r[o].disable)
781
693
  return o;
782
694
  } else
783
695
  for (let o = d - 1; o >= 0; o--)
784
- if (!n[o].disable)
696
+ if (!r[o].disable)
785
697
  return o;
786
698
  return -1;
787
- }, F = (n) => {
788
- if (n === "sm")
699
+ }, O = (r) => {
700
+ if (r === "sm")
789
701
  return 16;
790
- if (n === "md")
702
+ if (r === "md")
791
703
  return 16;
792
- if (n === "lg")
704
+ if (r === "lg")
793
705
  return 20;
794
- }, rr = (n) => /* @__PURE__ */ a(
706
+ }, nn = (r) => /* @__PURE__ */ e(
795
707
  "svg",
796
708
  {
797
709
  xmlns: "http://www.w3.org/2000/svg",
@@ -799,8 +711,8 @@ const or = ({
799
711
  height: "18",
800
712
  viewBox: "0 0 18 18",
801
713
  fill: "none",
802
- ...n,
803
- children: /* @__PURE__ */ a(
714
+ ...r,
715
+ children: /* @__PURE__ */ e(
804
716
  "path",
805
717
  {
806
718
  d: "M12 6L6 12M6.00001 6L12 12",
@@ -813,5 +725,5 @@ const or = ({
813
725
  }
814
726
  );
815
727
  export {
816
- or as Dropdown
728
+ on as Dropdown
817
729
  };