@starasia/dropdown 1.0.6 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/DropdownList.d.ts +1 -0
  2. package/dist/dropdown.es.js +298 -328
  3. package/dist/dropdown.umd.js +75 -158
  4. package/package.json +1 -1
package/dist/dropdown.es.js CHANGED
@@ -1,6 +1,6 @@
1
- import { jsx as n, jsxs as p, Fragment as q } from "react/jsx-runtime";
2
- import F, { useState as y, useRef as k, useEffect as b, forwardRef as M } from "react";
3
- const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
1
+ import { jsx as e, jsxs as l, 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
+ 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;
6
6
  padding: 0;
@@ -8,129 +8,45 @@ const P = `@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 P = `@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 P = `@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 P = `@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 P = `@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 P = `@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 P = `@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 P = `@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,33 +162,38 @@ const P = `@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
  }
182
+ .starasia-input-dropdwon-item.highlight {
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);
185
+ outline-offset: -2px;
186
+ }
269
187
 
270
188
  .starasia-input-dropdwon-item-disable {
271
- color: var(--starasia-ui-dropdown-color-disable) !important;
189
+ color: var(--sa-dropdown-color-disable) !important;
272
190
  pointer-events: none;
273
191
  }
274
192
 
275
193
  .starasia-input-dropdown-container-preview-item {
276
194
  flex: 1;
277
195
  display: flex;
278
- gap: var(--starasia-ui-dropdown-spacing-xs);
196
+ gap: var(--sa-spacing-xs, 4px);
279
197
  flex-wrap: wrap;
280
198
  align-items: center;
281
199
  overflow-y: auto;
@@ -283,12 +201,11 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
283
201
  }
284
202
 
285
203
  .starasia-input-dropdown-preview-item {
286
- border: var(--starasia-ui-dropdown-border-width) solid
287
- var(--starasia-ui-dropdown-border-color-primary);
204
+ border: var(--sa-dropdown-border) solid var(--sa-dropdown-border-active);
288
205
  padding-inline: var(--paddingInline);
289
206
  border-radius: var(--borderRadius);
290
- background-color: var(--starasia-ui-dropdown-background-color-secondary);
291
- color: var(--starasia-ui-dropdown-background-color-primary);
207
+ background-color: var(--sa-dropdown-brand-subtle);
208
+ color: var(--sa-dropdown-brand);
292
209
  height: max-content;
293
210
  font-size: var(--baseFont);
294
211
  display: flex;
@@ -296,35 +213,35 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
296
213
  gap: 2;
297
214
  }
298
215
  .starasia-input-dropdown-placeholder {
299
- color: var(--starasia-ui-dropdown-placholder-color);
300
- font-weight: var(--starasia-ui-dropdown-fontWeight-normal);
216
+ color: var(--sa-dropdown-placeholder);
217
+ font-weight: var(--sa-font-weight-normal, 300);
301
218
  }
302
219
 
303
220
  .starasia-input-dropdwon-item-text {
304
- color: var(--starasia-ui-dropdown-color-text-primary);
221
+ color: var(--sa-dropdown-text-primary);
305
222
  /* font-size: 14px; */
306
223
  font-size: inherit;
307
224
  font-weight: 500;
308
225
  }
309
226
  .starasia-input-dropdwon-item-text.active {
310
- color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
227
+ color: var(--sa-dropdown-brand);
311
228
  }
312
229
 
313
230
  .starasia-input-dropdwon-item-text-description {
314
- color: var(--starasia-ui-dropdown-color-text-secondary);
231
+ color: var(--sa-dropdown-text-secondary);
315
232
  /* font-size: 14px; */
316
233
  font-size: inherit;
317
234
  font-weight: 400;
318
235
  }
319
236
  .starasia-input-dropdwon-item-text-description.active {
320
- color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
237
+ color: var(--sa-dropdown-brand);
321
238
  }
322
239
 
323
240
  /* for checkbox */
324
241
  .checkbox-wrapper-30 .checkbox {
325
242
  --bg: #fff;
326
243
  --brdr: #d1d6ee;
327
- --brdr-actv: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
244
+ --brdr-actv: var(--sa-background-brand, #04254f);
328
245
  --brdr-hovr: #bbc1e1;
329
246
  --dur: calc((var(--size, 2) / 2) * 0.6s);
330
247
  display: inline-block;
@@ -397,23 +314,23 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
397
314
  width: 100%;
398
315
  }
399
316
  `;
400
- function V(a) {
401
- const [i, t] = y(a), c = k(null), o = (e) => {
402
- c.current && !c.current.contains(e.target) && t(!1);
317
+ function G(r) {
318
+ const [c, d] = R(r), s = z(null), a = (o) => {
319
+ s.current && !s.current.contains(o.target) && d(!1);
403
320
  };
404
- return b(() => (document.addEventListener("click", o, !0), () => {
405
- document.removeEventListener("click", o, !0);
406
- }), []), { ref: c, isComponentVisible: i, setIsComponentVisible: t };
321
+ return b(() => (document.addEventListener("click", a, !0), () => {
322
+ document.removeEventListener("click", a, !0);
323
+ }), []), { ref: s, isComponentVisible: c, setIsComponentVisible: d };
407
324
  }
408
- const J = ({ ...a }) => /* @__PURE__ */ n(
325
+ const Q = ({ ...r }) => /* @__PURE__ */ e(
409
326
  "svg",
410
327
  {
411
328
  xmlns: "http://www.w3.org/2000/svg",
412
- ...a,
329
+ ...r,
413
330
  viewBox: "0 0 24 24",
414
331
  fill: "none",
415
332
  color: "#939E99",
416
- children: /* @__PURE__ */ n(
333
+ children: /* @__PURE__ */ e(
417
334
  "path",
418
335
  {
419
336
  d: "M4 9L12 17L20 9",
@@ -424,15 +341,15 @@ const J = ({ ...a }) => /* @__PURE__ */ n(
424
341
  }
425
342
  )
426
343
  }
427
- ), G = ({ ...a }) => /* @__PURE__ */ p(
344
+ ), T = ({ ...r }) => /* @__PURE__ */ l(
428
345
  "svg",
429
346
  {
430
347
  xmlns: "http://www.w3.org/2000/svg",
431
- ...a,
348
+ ...r,
432
349
  viewBox: "0 0 20 20",
433
350
  fill: "none",
434
351
  children: [
435
- /* @__PURE__ */ n(
352
+ /* @__PURE__ */ e(
436
353
  "circle",
437
354
  {
438
355
  cx: "9.80547",
@@ -444,7 +361,7 @@ const J = ({ ...a }) => /* @__PURE__ */ n(
444
361
  strokeLinejoin: "round"
445
362
  }
446
363
  ),
447
- /* @__PURE__ */ n(
364
+ /* @__PURE__ */ e(
448
365
  "path",
449
366
  {
450
367
  d: "M15.0153 15.4043L17.9519 18.3333",
@@ -456,19 +373,19 @@ const J = ({ ...a }) => /* @__PURE__ */ n(
456
373
  )
457
374
  ]
458
375
  }
459
- ), K = ({ isChecked: a }) => /* @__PURE__ */ p("div", { className: "checkbox-wrapper-30", children: [
460
- /* @__PURE__ */ p("span", { className: "checkbox", children: [
461
- /* @__PURE__ */ n(
376
+ ), X = ({ isChecked: r }) => /* @__PURE__ */ l("div", { className: "checkbox-wrapper-30", children: [
377
+ /* @__PURE__ */ l("span", { className: "checkbox", children: [
378
+ /* @__PURE__ */ e(
462
379
  "input",
463
380
  {
464
381
  type: "checkbox",
465
382
  style: { pointerEvents: "none" },
466
- checked: a
383
+ checked: r
467
384
  }
468
385
  ),
469
- /* @__PURE__ */ n("svg", { children: /* @__PURE__ */ n("use", { xlinkHref: "#checkbox-30", className: "checkbox" }) })
386
+ /* @__PURE__ */ e("svg", { children: /* @__PURE__ */ e("use", { xlinkHref: "#checkbox-30", className: "checkbox" }) })
470
387
  ] }),
471
- /* @__PURE__ */ n("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "none" }, children: /* @__PURE__ */ n("symbol", { id: "checkbox-30", viewBox: "0 0 22 22", children: /* @__PURE__ */ n(
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(
472
389
  "path",
473
390
  {
474
391
  fill: "none",
@@ -476,58 +393,55 @@ const J = ({ ...a }) => /* @__PURE__ */ n(
476
393
  d: "M5.5,11.3L9,14.8L20.2,3.3l0,0c-0.5-1-1.5-1.8-2.7-1.8h-13c-1.7,0-3,1.3-3,3v13c0,1.7,1.3,3,3,3h13 c1.7,0,3-1.3,3-3v-13c0-0.4-0.1-0.8-0.3-1.2"
477
394
  }
478
395
  ) }) })
479
- ] }), Q = M(
396
+ ] }), Y = K(
480
397
  ({
481
- positionDropdown: a,
482
- dropdownLists: i,
483
- isComponentVisible: t,
484
- searchAble: c,
485
- onSearch: o,
486
- value: e,
487
- handleChangeValue: h,
488
- multiSelect: l,
489
- searchValue: v
490
- }, I) => {
491
- const [C, R] = y(0), [$, z] = y(), w = k(null);
398
+ positionDropdown: r,
399
+ dropdownLists: c,
400
+ isComponentVisible: d,
401
+ searchAble: s,
402
+ onSearch: a,
403
+ value: o,
404
+ handleChangeValue: v,
405
+ multiSelect: p,
406
+ searchValue: $,
407
+ highlightedIndex: g
408
+ }, N) => {
409
+ const [I, L] = R(0), m = z(null), x = z([]);
492
410
  return b(() => {
493
- if (w.current) {
494
- const r = w.current.getBoundingClientRect();
495
- R(r.width);
411
+ if (m.current) {
412
+ const n = m.current.getBoundingClientRect();
413
+ L(n.width);
496
414
  }
497
- }, [w, t]), b(() => {
498
- i && v ? i.forEach((r) => {
499
- if (r.label.startsWith(v || "")) {
500
- z(r.value);
501
- return;
502
- }
503
- }) : z(void 0);
504
- }, [v, i]), /* @__PURE__ */ n(q, { children: t ? /* @__PURE__ */ p(
415
+ }, [m, d]), 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: d ? /* @__PURE__ */ l(
505
419
  "div",
506
420
  {
507
421
  className: "starasia-input-dropdown-lists-container",
508
- onClick: (r) => r.stopPropagation(),
509
- ref: I,
422
+ onClick: (n) => n.stopPropagation(),
423
+ ref: N,
510
424
  children: [
511
- c ? /* @__PURE__ */ p(
425
+ s ? /* @__PURE__ */ l(
512
426
  "div",
513
427
  {
514
428
  className: "starasia-input-dropdown-container-dropdown-search",
515
429
  style: {
516
- order: a == "bottom" ? 0 : 2,
430
+ order: r == "bottom" ? 0 : 2,
517
431
  position: "sticky",
518
432
  top: 0,
519
433
  bottom: 0,
520
434
  zIndex: 1
521
435
  },
522
436
  children: [
523
- /* @__PURE__ */ n("div", { style: { display: "flex" }, children: /* @__PURE__ */ n(G, { strokeWidth: 2, width: 20 }) }),
524
- /* @__PURE__ */ n(
437
+ /* @__PURE__ */ e("div", { style: { display: "flex" }, children: /* @__PURE__ */ e(T, { strokeWidth: 2, width: 20 }) }),
438
+ /* @__PURE__ */ e(
525
439
  "input",
526
440
  {
527
- onChange: (r) => {
528
- o && o(r.target.value);
441
+ onChange: (n) => {
442
+ a && a(n.target.value);
529
443
  },
530
- value: v,
444
+ value: $,
531
445
  autoFocus: !0,
532
446
  style: { width: "100%" }
533
447
  }
@@ -535,54 +449,57 @@ const J = ({ ...a }) => /* @__PURE__ */ n(
535
449
  ]
536
450
  }
537
451
  ) : null,
538
- /* @__PURE__ */ n(
452
+ /* @__PURE__ */ e(
539
453
  "div",
540
454
  {
541
- className: `starasia-input-dropdwon-item-container ${l ? "multi" : ""}`,
542
- ref: w,
543
- children: i.map((r, x) => {
544
- const m = !!(e != null && e.find((E) => E.value === r.value));
545
- return /* @__PURE__ */ p(
455
+ className: `starasia-input-dropdwon-item-container ${p ? "multi" : ""}`,
456
+ ref: m,
457
+ children: c.map((n, h) => {
458
+ const k = !!(o != null && o.find((y) => y.value === n.value));
459
+ return /* @__PURE__ */ l(
546
460
  "div",
547
461
  {
548
- className: `starasia-input-dropdwon-item ${m ? "active" : " "} ${r.disable ? "starasia-input-dropdwon-item-disable" : null}`,
549
- onClick: () => h(r.label, r.value),
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;
465
+ },
466
+ onClick: () => v(n.label, n.value),
550
467
  children: [
551
- l ? /* @__PURE__ */ n("div", { style: { marginRight: "8px" }, children: /* @__PURE__ */ n(K, { isChecked: m }) }) : null,
552
- r.icon ? /* @__PURE__ */ n("div", { children: F.cloneElement(r.icon, {
468
+ p ? /* @__PURE__ */ e("div", { style: { marginRight: "8px" }, children: /* @__PURE__ */ e(X, { isChecked: k }) }) : null,
469
+ n.icon ? /* @__PURE__ */ e("div", { children: M.cloneElement(n.icon, {
553
470
  width: 16
554
471
  }) }) : null,
555
- /* @__PURE__ */ p("div", { children: [
556
- /* @__PURE__ */ n(
472
+ /* @__PURE__ */ l("div", { children: [
473
+ /* @__PURE__ */ e(
557
474
  "p",
558
475
  {
559
- className: `starasia-input-dropdwon-item-text ${m ? "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}`,
560
477
  style: {
561
478
  textWrap: "nowrap",
562
- width: `${C - 12}px`,
479
+ width: `${I - 12}px`,
563
480
  overflow: "hidden",
564
481
  textOverflow: "ellipsis"
565
482
  },
566
- children: r.label
483
+ children: n.label
567
484
  }
568
485
  ),
569
- r.description ? /* @__PURE__ */ n(
486
+ n.description ? /* @__PURE__ */ e(
570
487
  "p",
571
488
  {
572
- className: `starasia-input-dropdwon-item-text-description ${m ? "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}`,
573
490
  style: {
574
491
  textWrap: "nowrap",
575
- width: `${C - 12}px`,
492
+ width: `${I - 12}px`,
576
493
  overflow: "hidden",
577
494
  textOverflow: "ellipsis"
578
495
  },
579
- children: r.description
496
+ children: n.description
580
497
  }
581
498
  ) : null
582
499
  ] })
583
500
  ]
584
501
  },
585
- x
502
+ h
586
503
  );
587
504
  })
588
505
  }
@@ -591,149 +508,202 @@ const J = ({ ...a }) => /* @__PURE__ */ n(
591
508
  }
592
509
  ) : null });
593
510
  }
594
- ), T = ({
595
- children: a,
596
- handleChangePosition: i
511
+ ), Z = ({
512
+ children: r,
513
+ handleChangePosition: c
597
514
  }) => {
598
- const t = k(null);
515
+ const d = z(null);
599
516
  b(() => {
600
- var h;
601
- const o = () => {
602
- if (t.current) {
603
- let l = t.current.parentElement;
604
- for (; l && !c(l); )
605
- l = l.parentElement;
606
- l && i();
517
+ var v;
518
+ const a = () => {
519
+ if (d.current) {
520
+ let p = d.current.parentElement;
521
+ for (; p && !s(p); )
522
+ p = p.parentElement;
523
+ p && c();
607
524
  }
608
525
  };
609
- let e = (h = t.current) == null ? void 0 : h.parentElement;
610
- for (; e && !c(e); )
611
- e = e.parentElement;
612
- return e && e.addEventListener("scroll", o), o(), () => {
613
- e && e.removeEventListener("scroll", o);
526
+ let o = (v = d.current) == null ? void 0 : v.parentElement;
527
+ for (; o && !s(o); )
528
+ o = o.parentElement;
529
+ return o && o.addEventListener("scroll", a), a(), () => {
530
+ o && o.removeEventListener("scroll", a);
614
531
  };
615
532
  }, []);
616
- const c = (o) => o && (o.scrollHeight > o.clientHeight || o.scrollWidth > o.clientWidth);
617
- return /* @__PURE__ */ n("div", { ref: t, children: a });
618
- }, A = "starasia-input-dropdown-styles", U = (a) => {
619
- if (!document.getElementById(A)) {
620
- const i = document.createElement("style");
621
- i.id = A, i.textContent = a, document.head.appendChild(i);
533
+ const s = (a) => a && (a.scrollHeight > a.clientHeight || a.scrollWidth > a.clientWidth);
534
+ return /* @__PURE__ */ e("div", { ref: d, children: r });
535
+ }, F = "starasia-input-dropdown-styles", _ = (r) => {
536
+ if (!document.getElementById(F)) {
537
+ const c = document.createElement("style");
538
+ c.id = F, c.textContent = r, document.head.appendChild(c);
622
539
  }
623
540
  };
624
- U(P);
625
- const _ = ({
626
- dropdownLists: a,
627
- onChange: i,
628
- defaultValue: t,
629
- size: c = "md",
630
- multiSelect: o,
631
- searchAble: e,
632
- iconLeft: h,
633
- placeholder: l,
634
- onSearch: v,
635
- error: I,
636
- onBlur: C,
637
- onFocus: R,
638
- disable: $,
639
- searchValue: z
541
+ _(U);
542
+ const on = ({
543
+ dropdownLists: r,
544
+ onChange: c,
545
+ defaultValue: d,
546
+ size: s = "md",
547
+ multiSelect: a,
548
+ searchAble: o,
549
+ iconLeft: v,
550
+ placeholder: p,
551
+ onSearch: $,
552
+ error: g,
553
+ onBlur: N,
554
+ onFocus: I,
555
+ disable: L,
556
+ searchValue: m
640
557
  }) => {
641
- const w = k(), [r, x] = y([]), [m, E] = y(""), g = k(null), { isComponentVisible: B, ref: L, setIsComponentVisible: N } = V(!1), H = () => {
642
- N((s) => !s);
643
- }, j = (s, d) => {
644
- if (!o)
645
- x([{ label: s, value: d }]), i([{ label: s, value: d }]), N(!1);
646
- else if (r == null ? void 0 : r.find((u) => u.value === d)) {
647
- const u = [
648
- ...r ? r.filter((D) => D.value !== d) : []
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) : []
649
566
  ];
650
- x(u), i(u);
567
+ h(w), c(w);
651
568
  } else {
652
- const u = [...r || [], { label: s, value: d }];
653
- x(u), i(u);
569
+ const w = [...n || [], { label: t, value: i }];
570
+ h(w), c(w);
654
571
  }
655
572
  };
656
573
  b(() => {
657
- JSON.stringify(w.current) === JSON.stringify(t) || (w.current = t, x(w.current || []));
658
- }, [t]);
659
- const O = () => r.length ? o ? r == null ? void 0 : r.map((s, d) => /* @__PURE__ */ p("div", { className: "starasia-input-dropdown-preview-item", children: [
660
- /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: s == null ? void 0 : s.label }, d),
661
- /* @__PURE__ */ n(
662
- X,
574
+ JSON.stringify(x.current) === JSON.stringify(d) || (x.current = d, h(x.current || []));
575
+ }, [d]);
576
+ const S = () => n.length ? a ? n == null ? void 0 : n.map((t, i) => /* @__PURE__ */ l("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,
663
580
  {
664
- onClick: () => j(s.label, s.value)
581
+ onClick: () => A(t.label, t.value)
665
582
  }
666
583
  )
667
- ] })) : /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: r == null ? void 0 : r[0].label }) : /* @__PURE__ */ n("p", { className: "starasia-input-dropdown-placeholder", children: l }), f = () => {
668
- if (L.current && g.current) {
669
- const s = window.innerHeight, d = L.current.getBoundingClientRect(), W = g.current.getBoundingClientRect(), u = d.bottom + W.height;
670
- g.current.style.left = `${d.left}px`, g.current.style.width = `${d.width}px`, u >= s - 10 ? (g.current.style.top = `${d.top - W.height - 5}px`, E("top")) : (g.current.style.top = `${d.top + d.height}px`, E("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: p }), 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"));
671
588
  }
672
589
  };
673
- return b(() => (window.addEventListener("scroll", f), window.addEventListener("resize", f), () => {
674
- window.removeEventListener("scroll", f), window.removeEventListener("resize", f);
590
+ b(() => (window.addEventListener("scroll", E), window.addEventListener("resize", E), () => {
591
+ window.removeEventListener("scroll", E), window.removeEventListener("resize", E);
675
592
  }), []), b(() => {
676
- f();
677
- }, [B]), /* @__PURE__ */ n(T, { handleChangePosition: f, children: /* @__PURE__ */ p(
593
+ E();
594
+ }, [C]), b(() => {
595
+ C || D(-1);
596
+ }, [C]);
597
+ const q = (t) => {
598
+ if (!C) {
599
+ (t.key === "ArrowDown" || t.key === "Enter") && (t.preventDefault(), B(!0));
600
+ return;
601
+ }
602
+ switch (t.key) {
603
+ case "ArrowDown": {
604
+ t.preventDefault();
605
+ const i = H(r, u, 1);
606
+ i !== -1 && D(i);
607
+ break;
608
+ }
609
+ case "ArrowUp": {
610
+ t.preventDefault();
611
+ const i = H(r, u, -1);
612
+ i !== -1 && D(i);
613
+ break;
614
+ }
615
+ case "Enter": {
616
+ t.preventDefault(), u >= 0 && r[u] && !r[u].disable && A(
617
+ r[u].label,
618
+ r[u].value
619
+ );
620
+ break;
621
+ }
622
+ case "Escape": {
623
+ B(!1);
624
+ break;
625
+ }
626
+ }
627
+ };
628
+ return /* @__PURE__ */ e(Z, { handleChangePosition: E, children: /* @__PURE__ */ l(
678
629
  "div",
679
630
  {
680
- className: `starasia-input-dropdown-container ${$ ? "disable" : ""} starasia-input-dropdown-size-${c} ${B ? "active" : ""} ${I ? "error" : ""}`,
681
- ref: L,
682
- onClick: H,
631
+ className: `starasia-input-dropdown-container ${L ? "disable" : ""} starasia-input-dropdown-size-${s} ${C ? "active" : ""} ${g ? "error" : ""}`,
632
+ ref: W,
633
+ onClick: P,
634
+ onKeyDown: q,
635
+ tabIndex: 0,
636
+ onBlur: N,
637
+ onFocus: I,
683
638
  children: [
684
- /* @__PURE__ */ p("div", { className: "starasia-input-dropdown-preview-container", children: [
685
- h ? /* @__PURE__ */ n(q, { children: F.cloneElement(h, {
686
- width: S(c),
639
+ /* @__PURE__ */ l("div", { className: "starasia-input-dropdown-preview-container", children: [
640
+ v ? /* @__PURE__ */ e(V, { children: M.cloneElement(v, {
641
+ width: O(s),
687
642
  color: "#939E99",
688
643
  style: {
689
644
  color: "#939E99"
690
645
  }
691
646
  }) }) : null,
692
- /* @__PURE__ */ n(
647
+ /* @__PURE__ */ e(
693
648
  "div",
694
649
  {
695
650
  className: "starasia-input-dropdown-container-preview-item",
696
- tabIndex: 100,
697
- onBlur: C,
698
- onFocus: R,
699
- children: O()
651
+ children: S()
700
652
  }
701
653
  ),
702
- /* @__PURE__ */ n(
703
- J,
654
+ /* @__PURE__ */ e(
655
+ Q,
704
656
  {
705
657
  strokeWidth: 2,
706
- width: S(c),
658
+ width: O(s),
707
659
  style: { color: "#939E99" }
708
660
  }
709
661
  )
710
662
  ] }),
711
- /* @__PURE__ */ n(
712
- Q,
663
+ /* @__PURE__ */ e(
664
+ Y,
713
665
  {
714
- dropdownLists: a,
715
- handleChangeValue: j,
716
- isComponentVisible: B,
717
- positionDropdown: m,
718
- searchAble: !!e,
719
- value: r,
720
- onSearch: v,
721
- ref: g,
722
- multiSelect: o,
723
- searchValue: z
666
+ dropdownLists: r,
667
+ handleChangeValue: A,
668
+ isComponentVisible: C,
669
+ positionDropdown: k,
670
+ searchAble: !!o,
671
+ value: n,
672
+ onSearch: $,
673
+ ref: f,
674
+ multiSelect: a,
675
+ searchValue: m,
676
+ highlightedIndex: u
724
677
  }
725
678
  )
726
679
  ]
727
680
  }
728
681
  ) });
729
- }, S = (a) => {
730
- if (a === "sm")
682
+ }, H = (r, c, d) => {
683
+ const s = r.length;
684
+ let a = c + d;
685
+ for (; a >= 0 && a < s; ) {
686
+ if (!r[a].disable)
687
+ return a;
688
+ a += d;
689
+ }
690
+ if (d === 1) {
691
+ for (let o = 0; o < s; o++)
692
+ if (!r[o].disable)
693
+ return o;
694
+ } else
695
+ for (let o = s - 1; o >= 0; o--)
696
+ if (!r[o].disable)
697
+ return o;
698
+ return -1;
699
+ }, O = (r) => {
700
+ if (r === "sm")
731
701
  return 16;
732
- if (a === "md")
702
+ if (r === "md")
733
703
  return 16;
734
- if (a === "lg")
704
+ if (r === "lg")
735
705
  return 20;
736
- }, X = (a) => /* @__PURE__ */ n(
706
+ }, nn = (r) => /* @__PURE__ */ e(
737
707
  "svg",
738
708
  {
739
709
  xmlns: "http://www.w3.org/2000/svg",
@@ -741,8 +711,8 @@ const _ = ({
741
711
  height: "18",
742
712
  viewBox: "0 0 18 18",
743
713
  fill: "none",
744
- ...a,
745
- children: /* @__PURE__ */ n(
714
+ ...r,
715
+ children: /* @__PURE__ */ e(
746
716
  "path",
747
717
  {
748
718
  d: "M12 6L6 12M6.00001 6L12 12",
@@ -755,5 +725,5 @@ const _ = ({
755
725
  }
756
726
  );
757
727
  export {
758
- _ as Dropdown
728
+ on as Dropdown
759
729
  };