@starasia/dropdown 3.1.0 → 3.3.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 (5) hide show
  1. package/dist/DropdownList.d.ts +3 -0
  2. package/dist/dropdown.es.js +660 -421
  3. package/dist/dropdown.umd.js +313 -127
  4. package/dist/interface.d.ts +16 -1
  5. package/package.json +1 -1
package/dist/dropdown.es.js CHANGED
@@ -1,81 +1,152 @@
1
- import { jsx as r, jsxs as w, Fragment as M } from "react/jsx-runtime";
2
- import P, { useState as B, useRef as z, useEffect as v, forwardRef as G } from "react";
3
- const Q = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
1
+ import { jsxs as t, jsx as n, Fragment as sn } from "react/jsx-runtime";
2
+ import Y, { useState as P, useRef as I, useEffect as v, forwardRef as tn } from "react";
3
+ const dn = `@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;
7
7
  font-family: "Poppins", sans-serif;
8
8
  box-sizing: border-box;
9
9
  }
10
+
10
11
  :root {
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: var(--sa-background-neutral, #f0f1f2);
16
- --sa-dropdown-border: var(--sa-border, 1px);
17
- --sa-dropdown-border-color: var(--sa-color-gray-alpha-a20, #78867f33);
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: var(--sa-text-primary, #292a2e);
24
- --sa-dropdown-text-secondary: var(--sa-text-subtle, #8c8f97);
25
- --sa-dropdown-shadow-list: var(--sa-color-black-alpha-a8, #00000014);
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);
12
+ --sa-dropdown-brand: var(--sa-background-brand, #04254f);
13
+ --sa-dropdown-brand-subtle: var(--sa-color-brand-200, #99b3db);
14
+ --sa-dropdown-bg: var(--sa-background-primary, #ffffff);
15
+ --sa-dropdown-bg-neutral: var(--sa-background-neutral, #f0f1f2);
16
+ --sa-dropdown-bg-disabled: var(--sa-background-neutral, #f0f1f2);
17
+ --sa-dropdown-bg-error: #fff0f3;
18
+ --sa-dropdown-border-subtle: rgba(11, 18, 14, 0.14);
19
+ --sa-dropdown-border-active: var(--sa-background-brand, #04254f);
20
+ --sa-dropdown-border-error-subtle: #ffb3c1;
21
+ --sa-dropdown-border-error: var(--sa-color-error-500, #ff4d6d);
22
+ --sa-dropdown-color-disable: var(--sa-color-gray-300, #dddee1);
23
+ --sa-dropdown-placeholder: var(--sa-text-subtle, #505258);
24
+ --sa-dropdown-placeholder-subtle: #6b6e76;
25
+ --sa-dropdown-text-primary: var(--sa-text-primary, #292a2e);
26
+ --sa-dropdown-text-secondary: var(--sa-text-subtle, #6b6e76);
27
+ --sa-dropdown-text-error: #a4133c;
28
+ --sa-dropdown-text-info: #0073ab;
29
+ --sa-dropdown-ring-active: 0px 0px 0px 1.2px var(--sa-color-brand-200, #99b3db);
30
+ --sa-dropdown-shadow-panel: 0px 8px 12px 0px rgba(30, 31, 33, 0.15), 0px 0px 1px 0px rgba(30, 31, 33, 0.31);
31
+ --sa-dropdown-radius: var(--sa-radii-sm, 6px);
29
32
  }
30
33
 
34
+ /* === SIZE VARIANTS === */
31
35
  .sa-input-dropdown-size-sm {
32
- --baseFont: var(--sa-font-size-sm, 12px);
33
- --height: var(--sa-h-8, 32px);
36
+ --baseFont: var(--sa-font-size-xs, 12px);
37
+ --height: 32px;
34
38
  --borderRadius: var(--sa-dropdown-radius);
35
39
  --paddingInline: var(--sa-spacing-sm, 8px);
40
+ --paddingBlock: var(--sa-spacing-xs, 4px);
41
+ --iconSize: 16px;
36
42
  }
37
-
38
43
  .sa-input-dropdown-size-md {
39
- --baseFont: var(--sa-font-size-md, 14px);
40
- --height: 38px;
44
+ --baseFont: var(--sa-font-size-sm, 14px);
45
+ --height: 40px;
41
46
  --borderRadius: var(--sa-dropdown-radius);
42
47
  --paddingInline: var(--sa-spacing-3, 12px);
48
+ --paddingBlock: var(--sa-spacing-sm, 8px);
49
+ --iconSize: 16px;
43
50
  }
44
-
45
51
  .sa-input-dropdown-size-lg {
46
- --baseFont: var(--sa-font-size-lg, 16px);
47
- --height: var(--sa-h-12, 48px);
48
- --borderRadius: var(--sa-dropdown-radius-lg);
52
+ --baseFont: var(--sa-font-size-md, 16px);
53
+ --height: 48px;
54
+ --borderRadius: var(--sa-dropdown-radius);
49
55
  --paddingInline: var(--sa-spacing-3, 12px);
56
+ --paddingBlock: var(--sa-spacing-sm, 8px);
57
+ --iconSize: 20px;
58
+ }
59
+ .sa-input-dropdown-size-xl {
60
+ --baseFont: var(--sa-font-size-md, 16px);
61
+ --height: 56px;
62
+ --borderRadius: var(--sa-dropdown-radius);
63
+ --paddingInline: var(--sa-spacing-3, 12px);
64
+ --paddingBlock: var(--sa-spacing-sm, 8px);
65
+ --iconSize: 20px;
50
66
  }
51
67
 
68
+ /* === BASE CONTAINER === */
52
69
  .sa-input-dropdown-container {
53
70
  position: relative;
54
71
  min-height: var(--height);
55
72
  padding-inline: var(--paddingInline);
73
+ padding-block: var(--paddingBlock);
56
74
  display: flex;
57
75
  align-items: center;
58
- border: var(--sa-dropdown-border) solid var(--sa-dropdown-border-color);
59
- border-radius: var(--borderRadius);
60
- background-color: var(--sa-dropdown-bg);
61
76
  font-size: var(--baseFont);
62
77
  cursor: pointer;
78
+ transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
79
+ outline: none;
80
+ }
81
+ .sa-input-dropdown-container:focus-visible {
82
+ outline: none;
83
+ }
84
+
85
+ /* --- Standard variant (default) --- */
86
+ .sa-input-dropdown-container.standard {
87
+ background-color: var(--sa-dropdown-bg-neutral);
88
+ border: 1px solid transparent;
89
+ border-radius: var(--borderRadius);
63
90
  }
64
- .sa-input-dropdown-container.disable {
91
+ .sa-input-dropdown-container.standard.active {
92
+ border-color: var(--sa-dropdown-border-active);
93
+ box-shadow: var(--sa-dropdown-ring-active);
94
+ }
95
+ .sa-input-dropdown-container.standard.error {
96
+ background-color: var(--sa-dropdown-bg-error);
97
+ border-color: var(--sa-dropdown-border-error-subtle);
98
+ }
99
+ .sa-input-dropdown-container.standard.disable {
65
100
  background-color: var(--sa-dropdown-bg-disabled);
101
+ border-color: transparent;
66
102
  cursor: not-allowed;
67
103
  pointer-events: none;
104
+ opacity: 0.6;
68
105
  }
69
106
 
70
- .sa-input-dropdown-container.error {
71
- border-color: var(--sa-dropdown-border-error) !important;
107
+ /* --- Outline variant --- */
108
+ .sa-input-dropdown-container.outline {
109
+ background-color: transparent;
110
+ border: 0.8px solid var(--sa-dropdown-border-subtle);
111
+ border-radius: var(--borderRadius);
72
112
  }
73
- .sa-input-dropdown-container.active {
74
- border-color: var(--sa-dropdown-border-active);
75
- box-shadow: var(--sa-dropdown-shadow-focus);
76
- background-color: var(--sa-dropdown-bg);
113
+ .sa-input-dropdown-container.outline.active {
114
+ border: 1px solid var(--sa-dropdown-border-active);
115
+ box-shadow: var(--sa-dropdown-ring-active);
116
+ }
117
+ .sa-input-dropdown-container.outline.error {
118
+ background-color: var(--sa-dropdown-bg-error);
119
+ border: 1px solid var(--sa-dropdown-border-error-subtle);
120
+ }
121
+ .sa-input-dropdown-container.outline.disable {
122
+ background-color: var(--sa-dropdown-bg-disabled);
123
+ border-color: var(--sa-dropdown-border-subtle);
124
+ cursor: not-allowed;
125
+ pointer-events: none;
126
+ opacity: 0.6;
77
127
  }
78
128
 
129
+ /* --- Flushed variant --- */
130
+ .sa-input-dropdown-container.flushed {
131
+ background-color: transparent;
132
+ border: none;
133
+ border-bottom: 0.8px solid var(--sa-dropdown-border-subtle);
134
+ border-radius: 0;
135
+ }
136
+ .sa-input-dropdown-container.flushed.active {
137
+ border-bottom: 1px solid var(--sa-dropdown-border-active);
138
+ box-shadow: 0px 1.2px 0px 0px var(--sa-color-brand-200, #99b3db);
139
+ }
140
+ .sa-input-dropdown-container.flushed.error {
141
+ border-bottom: 1px solid var(--sa-dropdown-border-error-subtle);
142
+ }
143
+ .sa-input-dropdown-container.flushed.disable {
144
+ cursor: not-allowed;
145
+ pointer-events: none;
146
+ opacity: 0.6;
147
+ }
148
+
149
+ /* === TRIGGER CONTENT === */
79
150
  .sa-input-dropdown-preview-container {
80
151
  display: flex;
81
152
  flex-direction: row;
@@ -86,158 +157,276 @@ const Q = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
86
157
  overflow-y: hidden;
87
158
  }
88
159
 
160
+ .sa-input-dropdown-container-preview-item {
161
+ flex: 1;
162
+ display: flex;
163
+ gap: var(--sa-spacing-xs, 4px);
164
+ flex-wrap: wrap;
165
+ align-items: center;
166
+ overflow-y: auto;
167
+ padding-block: 4px;
168
+ }
169
+
170
+ .sa-input-dropdown-preview-item {
171
+ border: 1px solid var(--sa-dropdown-brand);
172
+ padding-inline: var(--paddingInline);
173
+ border-radius: var(--sa-dropdown-radius);
174
+ background-color: var(--sa-color-brand-50, #e6edf6);
175
+ color: var(--sa-dropdown-brand);
176
+ height: max-content;
177
+ font-size: var(--baseFont);
178
+ display: flex;
179
+ align-items: center;
180
+ gap: 4px;
181
+ }
182
+
183
+ .sa-input-dropdown-placeholder {
184
+ color: var(--sa-dropdown-placeholder);
185
+ font-weight: 400;
186
+ }
187
+ .sa-input-dropdown-container.outline .sa-input-dropdown-placeholder,
188
+ .sa-input-dropdown-container.flushed .sa-input-dropdown-placeholder {
189
+ color: var(--sa-dropdown-placeholder-subtle);
190
+ }
191
+
192
+ /* === DROPDOWN PANEL === */
89
193
  .sa-input-dropdown-lists-container {
90
- /* position: absolute; */
91
194
  position: fixed;
92
- /* left: 0; */
93
- padding: var(--sa-spacing-sm, 8px);
94
- border: var(--sa-dropdown-border) solid var(--sa-dropdown-border-color);
95
- border-radius: var(--borderRadius);
96
195
  background-color: var(--sa-dropdown-bg);
97
- box-shadow: 0px 8px 12px 0px var(--sa-dropdown-shadow-list);
98
- max-height: 312px;
99
- overflow-y: auto;
196
+ border-radius: var(--sa-dropdown-radius);
197
+ box-shadow: var(--sa-dropdown-shadow-panel);
198
+ max-height: 320px;
199
+ overflow: hidden;
100
200
  z-index: 999;
101
201
  width: 100%;
102
- /* width: max-content; */
103
- /* min-width: 100%; */
104
202
  display: flex;
105
203
  flex-direction: column;
106
- gap: var(--sa-spacing-sm, 8px);
107
- /* overflow: hidden;
108
- text-overflow: ellipsis;
109
- white-space: nowrap; */
110
- }
111
-
112
- .sa-input-dropdown-lists-container-bottom {
113
- top: 100%;
114
- margin-top: var(--sa-spacing-xs, 4px);
115
- }
116
- .sa-input-dropdown-lists-container-top {
117
- bottom: 100%;
118
- margin-bottom: var(--sa-spacing-xs, 4px);
119
204
  }
120
205
 
206
+ /* === SEARCH BAR === */
121
207
  .sa-input-dropdown-container-dropdown-search {
208
+ flex-shrink: 0;
122
209
  display: flex;
123
210
  align-items: center;
124
- height: var(--height);
125
- min-height: var(--height);
126
- max-height: var(--height);
127
- border: var(--sa-dropdown-border) solid var(--sa-dropdown-border-search);
128
- border-radius: var(--borderRadius);
211
+ height: 36px;
212
+ min-height: 36px;
213
+ border-bottom: 0.8px solid var(--sa-dropdown-border-subtle);
129
214
  gap: var(--sa-spacing-sm, 8px);
130
- padding-inline: var(--paddingInline);
215
+ padding-inline: var(--sa-spacing-3, 12px);
216
+ padding-block: var(--sa-spacing-sm, 8px);
131
217
  background: var(--sa-dropdown-bg);
218
+
132
219
  & input {
133
220
  flex: 1;
134
221
  outline: none;
135
222
  background-color: transparent;
136
223
  border: none;
137
- font-size: inherit;
224
+ font-size: var(--baseFont, 14px);
225
+ color: var(--sa-dropdown-text-primary);
226
+ }
227
+ & input::placeholder {
228
+ color: var(--sa-dropdown-placeholder-subtle);
138
229
  }
139
230
  }
140
231
 
232
+ /* === LIST SCROLL AREA === */
141
233
  .sa-input-dropdwon-item-container {
234
+ flex: 1 1 0;
235
+ overflow-y: auto;
236
+ min-height: 0;
237
+ padding: var(--sa-spacing-sm, 8px);
142
238
  display: flex;
143
239
  flex-direction: column;
144
- /* overflow: hidden; */
145
-
146
- /* gap: var(--sa-spacing-xs, 0.25rem); */
147
240
  }
148
241
  .sa-input-dropdwon-item-container.multi {
149
- display: flex;
150
- flex-direction: column;
151
- gap: 8px;
152
- /* overflow: hidden; */
242
+ gap: 4px;
243
+ }
153
244
 
154
- /* gap: var(--sa-spacing-xs, 0.25rem); */
245
+ /* === SECTION HEADER === */
246
+ .sa-input-dropdown-section-header {
247
+ display: flex;
248
+ align-items: center;
249
+ justify-content: space-between;
250
+ gap: 12px;
251
+ padding-inline: 4px;
252
+ padding-bottom: 4px;
253
+ font-size: 12px;
254
+ font-weight: 500;
255
+ flex-shrink: 0;
256
+ }
257
+ .sa-input-dropdown-section-label {
258
+ color: var(--sa-dropdown-text-secondary);
259
+ }
260
+ .sa-input-dropdown-section-select-all {
261
+ color: var(--sa-dropdown-text-info);
262
+ cursor: pointer;
263
+ white-space: nowrap;
264
+ background: none;
265
+ border: none;
266
+ font-size: inherit;
267
+ font-family: inherit;
268
+ font-weight: inherit;
269
+ padding: 0;
270
+ }
271
+ .sa-input-dropdown-section-select-all:hover {
272
+ text-decoration: underline;
155
273
  }
156
274
 
275
+ /* === LIST ITEMS === */
157
276
  .sa-input-dropdwon-item {
158
- /* max-height: var(--height); */
159
- max-height: 58px;
277
+ min-height: 36px;
160
278
  box-sizing: border-box;
161
- padding-inline: var(--paddingInline);
279
+ padding-left: var(--sa-spacing-sm, 8px);
280
+ padding-right: var(--sa-spacing-3, 12px);
281
+ padding-block: var(--sa-spacing-xs, 4px);
162
282
  display: flex;
163
283
  align-items: center;
164
284
  cursor: pointer;
165
- gap: var(--sa-spacing-xs, 4px);
166
- padding-block: var(--paddingInline);
285
+ gap: var(--sa-spacing-sm, 8px);
167
286
  border-radius: var(--sa-dropdown-radius);
168
- /* min-width: max-content; */
169
287
  overflow: hidden;
288
+ flex-shrink: 0;
170
289
  }
171
-
172
290
  .sa-input-dropdwon-item:hover {
173
- background-color: color-mix(in srgb, var(--sa-dropdown-brand-secondary) 21%, transparent);
291
+ background-color: color-mix(in srgb, var(--sa-dropdown-brand-subtle) 21%, transparent);
174
292
  }
175
293
  .sa-input-dropdwon-item.active {
176
- /* color: var(--sa-dropdown-brand); */
177
- /* border-radius: var(--borderRadius); */
178
- background-color: color-mix(in srgb, var(--sa-dropdown-brand-secondary) 21%, transparent);
179
- /* background: var(--sa-dropdown-brand-subtle); */
180
- /* box-shadow: 0px 0px 0px -1px #f0f0f0; */
294
+ background-color: color-mix(in srgb, var(--sa-dropdown-brand-subtle) 21%, transparent);
181
295
  }
182
296
  .sa-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);
297
+ background-color: color-mix(in srgb, var(--sa-dropdown-brand-subtle) 35%, transparent);
298
+ outline: 2px solid color-mix(in srgb, var(--sa-dropdown-brand-subtle) 40%, transparent);
185
299
  outline-offset: -2px;
186
300
  }
187
-
188
301
  .sa-input-dropdwon-item-disable {
189
302
  color: var(--sa-dropdown-color-disable) !important;
190
303
  pointer-events: none;
191
304
  }
192
305
 
193
- .sa-input-dropdown-container-preview-item {
194
- flex: 1;
195
- display: flex;
196
- gap: var(--sa-spacing-xs, 4px);
197
- flex-wrap: wrap;
198
- align-items: center;
199
- overflow-y: auto;
200
- padding-block: 4px;
201
- }
202
-
203
- .sa-input-dropdown-preview-item {
204
- border: var(--sa-dropdown-border) solid var(--sa-dropdown-border-active);
205
- padding-inline: var(--paddingInline);
206
- border-radius: var(--borderRadius);
207
- background-color: var(--sa-dropdown-brand-subtle);
208
- color: var(--sa-dropdown-brand);
209
- height: max-content;
210
- font-size: var(--baseFont);
211
- display: flex;
212
- align-items: center;
213
- gap: 2;
214
- }
215
- .sa-input-dropdown-placeholder {
216
- color: var(--sa-dropdown-placeholder);
217
- font-weight: var(--sa-font-weight-normal, 300);
218
- }
219
-
220
306
  .sa-input-dropdwon-item-text {
221
307
  color: var(--sa-dropdown-text-primary);
222
- /* font-size: 14px; */
223
308
  font-size: inherit;
224
309
  font-weight: 500;
310
+ overflow: hidden;
311
+ text-overflow: ellipsis;
312
+ white-space: nowrap;
225
313
  }
226
314
  .sa-input-dropdwon-item-text.active {
227
315
  color: var(--sa-dropdown-brand);
228
316
  }
229
-
230
317
  .sa-input-dropdwon-item-text-description {
231
318
  color: var(--sa-dropdown-text-secondary);
232
- /* font-size: 14px; */
233
319
  font-size: inherit;
234
320
  font-weight: 400;
321
+ overflow: hidden;
322
+ text-overflow: ellipsis;
323
+ white-space: nowrap;
235
324
  }
236
325
  .sa-input-dropdwon-item-text-description.active {
237
326
  color: var(--sa-dropdown-brand);
238
327
  }
239
328
 
240
- /* for checkbox */
329
+ /* === FOOTER SLOT === */
330
+ .sa-input-dropdown-footer {
331
+ flex-shrink: 0;
332
+ background: var(--sa-dropdown-bg);
333
+ padding: var(--sa-spacing-sm, 8px);
334
+ border-top: 0.8px solid var(--sa-dropdown-border-subtle);
335
+ }
336
+
337
+ /* === SELECT FIELD WRAPPER === */
338
+ .sa-select-field {
339
+ display: flex;
340
+ flex-direction: column;
341
+ gap: 8px;
342
+ width: 100%;
343
+ }
344
+ .sa-select-field-left {
345
+ flex-direction: row;
346
+ align-items: flex-start;
347
+ }
348
+ .sa-select-field-left-label {
349
+ display: flex;
350
+ flex-direction: column;
351
+ gap: 8px;
352
+ flex: 0 0 auto;
353
+ width: 50%;
354
+ padding-top: 7px;
355
+ }
356
+ .sa-select-field-input-wrap {
357
+ display: flex;
358
+ flex-direction: column;
359
+ gap: 8px;
360
+ flex: 1;
361
+ min-width: 0;
362
+ }
363
+
364
+ .sa-select-field-label-row {
365
+ display: flex;
366
+ align-items: center;
367
+ gap: 4px;
368
+ flex-wrap: wrap;
369
+ }
370
+ .sa-select-field-label-text {
371
+ font-size: 14px;
372
+ font-weight: 500;
373
+ color: var(--sa-dropdown-text-primary);
374
+ line-height: 1;
375
+ }
376
+ .sa-select-field-left .sa-select-field-label-text {
377
+ font-size: 12px;
378
+ }
379
+ .sa-select-field-required {
380
+ font-size: 14px;
381
+ font-weight: 500;
382
+ color: var(--sa-dropdown-text-error);
383
+ line-height: 1;
384
+ }
385
+ .sa-select-field-left .sa-select-field-required {
386
+ font-size: 12px;
387
+ }
388
+ .sa-select-field-optional-badge {
389
+ display: inline-flex;
390
+ align-items: center;
391
+ justify-content: center;
392
+ padding-inline: 8px;
393
+ border: 1px solid var(--sa-dropdown-border-subtle);
394
+ border-radius: 4px;
395
+ background-color: var(--sa-dropdown-bg-neutral);
396
+ font-size: 10px;
397
+ font-weight: 500;
398
+ color: var(--sa-dropdown-text-primary);
399
+ line-height: 18px;
400
+ }
401
+ .sa-select-field-helper-top {
402
+ font-size: 12px;
403
+ font-weight: 400;
404
+ color: var(--sa-dropdown-text-secondary);
405
+ line-height: 1.5;
406
+ }
407
+ .sa-select-field-left .sa-select-field-helper-top {
408
+ font-size: 10px;
409
+ }
410
+ .sa-select-field-helper {
411
+ font-size: 12px;
412
+ font-weight: 400;
413
+ color: var(--sa-dropdown-text-secondary);
414
+ line-height: 1.5;
415
+ }
416
+ .sa-select-field-left .sa-select-field-helper {
417
+ font-size: 10px;
418
+ }
419
+ .sa-select-field-error-msg {
420
+ font-size: 12px;
421
+ font-weight: 400;
422
+ color: var(--sa-dropdown-text-error);
423
+ line-height: 1.5;
424
+ }
425
+ .sa-select-field-left .sa-select-field-error-msg {
426
+ font-size: 10px;
427
+ }
428
+
429
+ /* === CHECKBOX === */
241
430
  .checkbox-wrapper-30 .checkbox {
242
431
  --bg: #fff;
243
432
  --brdr: #d1d6ee;
@@ -245,7 +434,6 @@ const Q = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
245
434
  --brdr-hovr: #bbc1e1;
246
435
  --dur: calc((var(--size, 2) / 2) * 0.6s);
247
436
  display: inline-block;
248
- /* width: calc(var(--size, 1) * 22px); */
249
437
  width: 16px;
250
438
  height: 16px;
251
439
  position: relative;
@@ -283,7 +471,6 @@ const Q = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
283
471
  .checkbox-wrapper-30 .checkbox input:checked {
284
472
  --newBrdrClr: var(--brdr-actv);
285
473
  --newBgClr: var(--brdr-actv);
286
- /* transition-delay: calc(var(--dur) / 1.3); */
287
474
  }
288
475
  .checkbox-wrapper-30 .checkbox input:checked + svg {
289
476
  --dashArray: 16 93;
@@ -291,7 +478,6 @@ const Q = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
291
478
  }
292
479
  .checkbox-wrapper-30 .checkbox input:checked + svg {
293
480
  color: white;
294
- /* transition-delay: calc(var(--dur) / 1.3); */
295
481
  transition-delay: 0.1s;
296
482
  }
297
483
  .checkbox-wrapper-30 .checkbox svg {
@@ -314,42 +500,23 @@ const Q = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
314
500
  width: 100%;
315
501
  }
316
502
  `;
317
- function T(n) {
318
- const [l, i] = B(n), c = z(null), a = (o) => {
319
- c.current && !c.current.contains(o.target) && i(!1);
503
+ function ln(e) {
504
+ const [p, d] = P(e), l = I(null), o = (r) => {
505
+ l.current && !l.current.contains(r.target) && d(!1);
320
506
  };
321
- return v(() => (document.addEventListener("click", a, !0), () => {
322
- document.removeEventListener("click", a, !0);
323
- }), []), { ref: c, isComponentVisible: l, setIsComponentVisible: i };
507
+ return v(() => (document.addEventListener("click", o, !0), () => {
508
+ document.removeEventListener("click", o, !0);
509
+ }), []), { ref: l, isComponentVisible: p, setIsComponentVisible: d };
324
510
  }
325
- const X = ({ ...n }) => /* @__PURE__ */ r(
326
- "svg",
327
- {
328
- xmlns: "http://www.w3.org/2000/svg",
329
- ...n,
330
- viewBox: "0 0 24 24",
331
- fill: "none",
332
- color: "var(--sa-color-gray-500, #8c8f97)",
333
- children: /* @__PURE__ */ r(
334
- "path",
335
- {
336
- d: "M4 9L12 17L20 9",
337
- stroke: "currentColor",
338
- strokeLinecap: "round",
339
- strokeLinejoin: "round",
340
- strokeWidth: 1.5
341
- }
342
- )
343
- }
344
- ), Y = ({ ...n }) => /* @__PURE__ */ w(
511
+ const pn = ({ ...e }) => /* @__PURE__ */ t(
345
512
  "svg",
346
513
  {
347
514
  xmlns: "http://www.w3.org/2000/svg",
348
- ...n,
515
+ ...e,
349
516
  viewBox: "0 0 20 20",
350
517
  fill: "none",
351
518
  children: [
352
- /* @__PURE__ */ r(
519
+ /* @__PURE__ */ n(
353
520
  "circle",
354
521
  {
355
522
  cx: "9.80547",
@@ -361,7 +528,7 @@ const X = ({ ...n }) => /* @__PURE__ */ r(
361
528
  strokeLinejoin: "round"
362
529
  }
363
530
  ),
364
- /* @__PURE__ */ r(
531
+ /* @__PURE__ */ n(
365
532
  "path",
366
533
  {
367
534
  d: "M15.0153 15.4043L17.9519 18.3333",
@@ -373,19 +540,19 @@ const X = ({ ...n }) => /* @__PURE__ */ r(
373
540
  )
374
541
  ]
375
542
  }
376
- ), Z = ({ isChecked: n }) => /* @__PURE__ */ w("div", { className: "checkbox-wrapper-30", children: [
377
- /* @__PURE__ */ w("span", { className: "checkbox", children: [
378
- /* @__PURE__ */ r(
543
+ ), cn = ({ isChecked: e }) => /* @__PURE__ */ t("div", { className: "checkbox-wrapper-30", children: [
544
+ /* @__PURE__ */ t("span", { className: "checkbox", children: [
545
+ /* @__PURE__ */ n(
379
546
  "input",
380
547
  {
381
548
  type: "checkbox",
382
549
  style: { pointerEvents: "none" },
383
- checked: n
550
+ checked: e
384
551
  }
385
552
  ),
386
- /* @__PURE__ */ r("svg", { children: /* @__PURE__ */ r("use", { xlinkHref: "#checkbox-30", className: "checkbox" }) })
553
+ /* @__PURE__ */ n("svg", { children: /* @__PURE__ */ n("use", { xlinkHref: "#checkbox-30", className: "checkbox" }) })
387
554
  ] }),
388
- /* @__PURE__ */ r("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "none" }, children: /* @__PURE__ */ r("symbol", { id: "checkbox-30", viewBox: "0 0 22 22", children: /* @__PURE__ */ r(
555
+ /* @__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(
389
556
  "path",
390
557
  {
391
558
  fill: "none",
@@ -393,343 +560,415 @@ const X = ({ ...n }) => /* @__PURE__ */ r(
393
560
  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"
394
561
  }
395
562
  ) }) })
396
- ] }), _ = G(
563
+ ] }), hn = tn(
397
564
  ({
398
- positionDropdown: n,
399
- dropdownLists: l,
400
- isComponentVisible: i,
401
- searchAble: c,
402
- onSearch: a,
403
- value: o,
404
- handleChangeValue: m,
405
- multiSelect: p,
406
- searchValue: I,
407
- highlightedIndex: g
408
- }, L) => {
409
- const [$, D] = B(0), k = z(null), R = z([]);
410
- return v(() => {
411
- if (k.current) {
412
- const e = k.current.getBoundingClientRect();
413
- D(e.width);
414
- }
415
- }, [k, i]), v(() => {
416
- var e;
417
- g >= 0 && R.current[g] && ((e = R.current[g]) == null || e.scrollIntoView({ block: "nearest" }));
418
- }, [g]), /* @__PURE__ */ r(M, { children: i ? /* @__PURE__ */ w(
565
+ positionDropdown: e,
566
+ dropdownLists: p,
567
+ isComponentVisible: d,
568
+ searchAble: l,
569
+ onSearch: o,
570
+ value: r,
571
+ handleChangeValue: y,
572
+ multiSelect: h,
573
+ searchValue: F,
574
+ highlightedIndex: x,
575
+ footer: A,
576
+ groupLabel: O,
577
+ onSelectAll: D
578
+ }, H) => {
579
+ const R = I([]);
580
+ v(() => {
581
+ var a;
582
+ x >= 0 && R.current[x] && ((a = R.current[x]) == null || a.scrollIntoView({ block: "nearest" }));
583
+ }, [x]);
584
+ const j = l ? /* @__PURE__ */ t("div", { className: "sa-input-dropdown-container-dropdown-search", children: [
585
+ /* @__PURE__ */ n(pn, { strokeWidth: 2, width: 16, style: { flexShrink: 0, color: "var(--sa-dropdown-placeholder-subtle)" } }),
586
+ /* @__PURE__ */ n(
587
+ "input",
588
+ {
589
+ onChange: (a) => {
590
+ o && o(a.target.value);
591
+ },
592
+ value: F,
593
+ autoFocus: !0,
594
+ placeholder: "Search..."
595
+ }
596
+ )
597
+ ] }) : null;
598
+ return /* @__PURE__ */ n(sn, { children: d ? /* @__PURE__ */ t(
419
599
  "div",
420
600
  {
421
601
  className: "sa-input-dropdown-lists-container",
422
- onClick: (e) => e.stopPropagation(),
423
- ref: L,
602
+ onClick: (a) => a.stopPropagation(),
603
+ ref: H,
424
604
  children: [
425
- c ? /* @__PURE__ */ w(
605
+ e !== "top" && j,
606
+ /* @__PURE__ */ t(
426
607
  "div",
427
608
  {
428
- className: "sa-input-dropdown-container-dropdown-search",
429
- style: {
430
- order: n == "bottom" ? 0 : 2,
431
- position: "sticky",
432
- top: 0,
433
- bottom: 0,
434
- zIndex: 1
435
- },
609
+ className: `sa-input-dropdwon-item-container ${h ? "multi" : ""}`,
436
610
  children: [
437
- /* @__PURE__ */ r("div", { style: { display: "flex" }, children: /* @__PURE__ */ r(Y, { strokeWidth: 2, width: 20 }) }),
438
- /* @__PURE__ */ r(
439
- "input",
440
- {
441
- onChange: (e) => {
442
- a && a(e.target.value);
611
+ O && /* @__PURE__ */ t("div", { className: "sa-input-dropdown-section-header", children: [
612
+ /* @__PURE__ */ n("span", { className: "sa-input-dropdown-section-label", children: O }),
613
+ h && D && /* @__PURE__ */ n(
614
+ "button",
615
+ {
616
+ className: "sa-input-dropdown-section-select-all",
617
+ onClick: (a) => {
618
+ a.stopPropagation(), D();
619
+ },
620
+ children: "Select all"
621
+ }
622
+ )
623
+ ] }),
624
+ p.map((a, S) => {
625
+ const N = !!(r != null && r.find((g) => g.value === a.value));
626
+ return /* @__PURE__ */ t(
627
+ "div",
628
+ {
629
+ className: [
630
+ "sa-input-dropdwon-item",
631
+ N ? "active" : "",
632
+ S === x ? "highlight" : "",
633
+ a.disable ? "sa-input-dropdwon-item-disable" : ""
634
+ ].filter(Boolean).join(" "),
635
+ ref: (g) => {
636
+ R.current[S] = g;
637
+ },
638
+ onClick: () => y(a.label, a.value),
639
+ children: [
640
+ h && /* @__PURE__ */ n("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ n(cn, { isChecked: N }) }),
641
+ a.icon && /* @__PURE__ */ n("div", { style: { flexShrink: 0 }, children: Y.cloneElement(a.icon, { width: 16 }) }),
642
+ /* @__PURE__ */ t("div", { style: { minWidth: 0, flex: 1 }, children: [
643
+ /* @__PURE__ */ n(
644
+ "p",
645
+ {
646
+ className: [
647
+ "sa-input-dropdwon-item-text",
648
+ N ? "active" : "",
649
+ a.disable ? "sa-input-dropdwon-item-disable" : ""
650
+ ].filter(Boolean).join(" "),
651
+ children: a.label
652
+ }
653
+ ),
654
+ a.description && /* @__PURE__ */ n(
655
+ "p",
656
+ {
657
+ className: [
658
+ "sa-input-dropdwon-item-text-description",
659
+ N ? "active" : "",
660
+ a.disable ? "sa-input-dropdwon-item-disable" : ""
661
+ ].filter(Boolean).join(" "),
662
+ children: a.description
663
+ }
664
+ )
665
+ ] })
666
+ ]
443
667
  },
444
- value: I,
445
- autoFocus: !0,
446
- style: { width: "100%" }
447
- }
448
- )
668
+ S
669
+ );
670
+ })
449
671
  ]
450
672
  }
451
- ) : null,
452
- /* @__PURE__ */ r(
453
- "div",
454
- {
455
- className: `sa-input-dropdwon-item-container ${p ? "multi" : ""}`,
456
- ref: k,
457
- children: l.map((e, f) => {
458
- const s = !!(o != null && o.find((h) => h.value === e.value));
459
- return /* @__PURE__ */ w(
460
- "div",
461
- {
462
- className: `sa-input-dropdwon-item ${s ? "active" : ""} ${f === g ? "highlight" : ""} ${e.disable ? "sa-input-dropdwon-item-disable" : ""}`,
463
- ref: (h) => {
464
- R.current[f] = h;
465
- },
466
- onClick: () => m(e.label, e.value),
467
- children: [
468
- p ? /* @__PURE__ */ r("div", { style: { marginRight: "8px" }, children: /* @__PURE__ */ r(Z, { isChecked: s }) }) : null,
469
- e.icon ? /* @__PURE__ */ r("div", { children: P.cloneElement(e.icon, {
470
- width: 16
471
- }) }) : null,
472
- /* @__PURE__ */ w("div", { children: [
473
- /* @__PURE__ */ r(
474
- "p",
475
- {
476
- className: `sa-input-dropdwon-item-text ${s ? "active" : null} ${e.disable ? "sa-input-dropdwon-item-disable" : null}`,
477
- style: {
478
- textWrap: "nowrap",
479
- width: `${$ - 12}px`,
480
- overflow: "hidden",
481
- textOverflow: "ellipsis"
482
- },
483
- children: e.label
484
- }
485
- ),
486
- e.description ? /* @__PURE__ */ r(
487
- "p",
488
- {
489
- className: `sa-input-dropdwon-item-text-description ${s ? "active" : null} ${e.disable ? "sa-input-dropdwon-item-disable" : null}`,
490
- style: {
491
- textWrap: "nowrap",
492
- width: `${$ - 12}px`,
493
- overflow: "hidden",
494
- textOverflow: "ellipsis"
495
- },
496
- children: e.description
497
- }
498
- ) : null
499
- ] })
500
- ]
501
- },
502
- f
503
- );
504
- })
505
- }
506
- )
673
+ ),
674
+ e === "top" && j,
675
+ A && /* @__PURE__ */ n("div", { className: "sa-input-dropdown-footer", onClick: (a) => a.stopPropagation(), children: A })
507
676
  ]
508
677
  }
509
678
  ) : null });
510
679
  }
511
- ), nn = ({
512
- children: n,
513
- handleChangePosition: l
680
+ ), un = ({
681
+ children: e,
682
+ handleChangePosition: p
514
683
  }) => {
515
- const i = z(null);
684
+ const d = I(null);
516
685
  v(() => {
517
- var m;
518
- const a = () => {
519
- if (i.current) {
520
- let p = i.current.parentElement;
521
- for (; p && !c(p); )
522
- p = p.parentElement;
523
- p && l();
686
+ var y;
687
+ const o = () => {
688
+ if (d.current) {
689
+ let h = d.current.parentElement;
690
+ for (; h && !l(h); )
691
+ h = h.parentElement;
692
+ h && p();
524
693
  }
525
694
  };
526
- let o = (m = i.current) == null ? void 0 : m.parentElement;
527
- for (; o && !c(o); )
528
- o = o.parentElement;
529
- return o && o.addEventListener("scroll", a), a(), () => {
530
- o && o.removeEventListener("scroll", a);
695
+ let r = (y = d.current) == null ? void 0 : y.parentElement;
696
+ for (; r && !l(r); )
697
+ r = r.parentElement;
698
+ return r && r.addEventListener("scroll", o), o(), () => {
699
+ r && r.removeEventListener("scroll", o);
531
700
  };
532
701
  }, []);
533
- const c = (a) => a && (a.scrollHeight > a.clientHeight || a.scrollWidth > a.clientWidth);
534
- return /* @__PURE__ */ r("div", { ref: i, children: n });
535
- }, H = "sa-input-dropdown-styles", rn = (n) => {
536
- if (!document.getElementById(H)) {
537
- const l = document.createElement("style");
538
- l.id = H, l.textContent = n, document.head.appendChild(l);
702
+ const l = (o) => o && (o.scrollHeight > o.clientHeight || o.scrollWidth > o.clientWidth);
703
+ return /* @__PURE__ */ n("div", { ref: d, children: e });
704
+ }, Z = "sa-input-dropdown-styles", wn = (e) => {
705
+ if (!document.getElementById(Z)) {
706
+ const p = document.createElement("style");
707
+ p.id = Z, p.textContent = e, document.head.appendChild(p);
539
708
  }
540
709
  };
541
- rn(Q);
542
- const tn = ({
543
- dropdownLists: n,
544
- onChange: l,
545
- defaultValue: i,
546
- value: c,
547
- size: a = "md",
548
- multiSelect: o,
549
- searchAble: m,
550
- iconLeft: p,
551
- placeholder: I,
552
- onSearch: g,
553
- error: L,
554
- onBlur: $,
710
+ wn(dn);
711
+ const mn = ({
712
+ dropdownLists: e,
713
+ onChange: p,
714
+ defaultValue: d,
715
+ value: l,
716
+ size: o = "md",
717
+ multiSelect: r,
718
+ searchAble: y,
719
+ iconLeft: h,
720
+ placeholder: F,
721
+ onSearch: x,
722
+ error: A,
723
+ onBlur: O,
555
724
  onFocus: D,
556
- disable: k,
557
- searchValue: R
725
+ disable: H,
726
+ searchValue: R,
727
+ variant: j = "outline",
728
+ footer: a,
729
+ groupLabel: S,
730
+ onSelectAll: N,
731
+ /* field wrapper */
732
+ label: g,
733
+ labelPosition: _ = "outside-top",
734
+ required: J,
735
+ optional: U,
736
+ description: E,
737
+ helperText: C,
738
+ errorText: u
558
739
  }) => {
559
- const e = c !== void 0, f = z(), [s, h] = B(
560
- e ? c || [] : i || []
561
- ), [V, F] = B(""), [b, W] = B(-1), x = z(null), { isComponentVisible: y, ref: A, setIsComponentVisible: N } = T(!1), q = () => {
562
- N((t) => !t);
563
- }, j = (t, d) => {
564
- if (o)
565
- if (s == null ? void 0 : s.find((u) => u.value === d)) {
566
- const u = s.filter((U) => U.value !== d);
567
- e || h(u), l(u);
740
+ const z = l !== void 0, M = I(), T = A || !!u, [c, L] = P(
741
+ z ? l || [] : d || []
742
+ ), [nn, X] = P(""), [b, $] = P(-1), m = I(null), { isComponentVisible: k, ref: q, setIsComponentVisible: W } = ln(!1), en = () => {
743
+ W((i) => !i);
744
+ }, V = (i, s) => {
745
+ if (r)
746
+ if (c == null ? void 0 : c.find((w) => w.value === s)) {
747
+ const w = c.filter((an) => an.value !== s);
748
+ z || L(w), p(w);
568
749
  } else {
569
- const u = [...s, { label: t, value: d }];
570
- e || h(u), l(u);
750
+ const w = [...c, { label: i, value: s }];
751
+ z || L(w), p(w);
571
752
  }
572
753
  else {
573
- const E = [{ label: t, value: d }];
574
- e || h(E), l(E), N(!1);
754
+ const f = [{ label: i, value: s }];
755
+ z || L(f), p(f), W(!1);
575
756
  }
576
757
  };
577
758
  v(() => {
578
- e && h(c || []);
579
- }, [c]), v(() => {
580
- e || JSON.stringify(f.current) === JSON.stringify(i) || (f.current = i, h(f.current || []));
581
- }, [i]);
582
- const J = () => s.length ? o ? s == null ? void 0 : s.map((t, d) => /* @__PURE__ */ w("div", { className: "sa-input-dropdown-preview-item", children: [
583
- /* @__PURE__ */ r("p", { style: { minWidth: "max-content" }, children: t == null ? void 0 : t.label }, d),
584
- /* @__PURE__ */ r(
585
- on,
759
+ z && L(l || []);
760
+ }, [l]), v(() => {
761
+ z || JSON.stringify(M.current) === JSON.stringify(d) || (M.current = d, L(M.current || []));
762
+ }, [d]);
763
+ const rn = () => c.length ? r ? c == null ? void 0 : c.map((i, s) => /* @__PURE__ */ t("div", { className: "sa-input-dropdown-preview-item", children: [
764
+ /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: i == null ? void 0 : i.label }),
765
+ /* @__PURE__ */ n(
766
+ bn,
586
767
  {
587
- onClick: () => j(t.label, t.value)
768
+ onClick: (f) => {
769
+ f.stopPropagation(), V(i.label, i.value);
770
+ }
588
771
  }
589
772
  )
590
- ] })) : /* @__PURE__ */ r("p", { style: { minWidth: "max-content" }, children: s == null ? void 0 : s[0].label }) : /* @__PURE__ */ r("p", { className: "sa-input-dropdown-placeholder", children: I }), C = () => {
591
- if (A.current && x.current) {
592
- const t = window.innerHeight, d = A.current.getBoundingClientRect(), E = x.current.getBoundingClientRect(), u = d.bottom + E.height;
593
- x.current.style.left = `${d.left}px`, x.current.style.width = `${d.width}px`, u >= t - 10 ? (x.current.style.top = `${d.top - E.height - 5}px`, F("top")) : (x.current.style.top = `${d.top + d.height}px`, F("bottom"));
773
+ ] }, s)) : /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: c == null ? void 0 : c[0].label }) : /* @__PURE__ */ n("p", { className: "sa-input-dropdown-placeholder", children: F }), B = () => {
774
+ if (q.current && m.current) {
775
+ const i = window.innerHeight, s = q.current.getBoundingClientRect(), f = m.current.getBoundingClientRect(), w = s.bottom + f.height;
776
+ m.current.style.left = `${s.left}px`, m.current.style.width = `${s.width}px`, w >= i - 10 ? (m.current.style.top = `${s.top - f.height - 5}px`, X("top")) : (m.current.style.top = `${s.top + s.height + 4}px`, X("bottom"));
594
777
  }
595
778
  };
596
- v(() => (window.addEventListener("scroll", C), window.addEventListener("resize", C), () => {
597
- window.removeEventListener("scroll", C), window.removeEventListener("resize", C);
779
+ v(() => (window.addEventListener("scroll", B), window.addEventListener("resize", B), () => {
780
+ window.removeEventListener("scroll", B), window.removeEventListener("resize", B);
598
781
  }), []), v(() => {
599
- C();
600
- }, [y]), v(() => {
601
- y || W(-1);
602
- }, [y]);
603
- const K = (t) => {
604
- if (!y) {
605
- (t.key === "ArrowDown" || t.key === "Enter") && (t.preventDefault(), N(!0));
782
+ B();
783
+ }, [k]), v(() => {
784
+ k || $(-1);
785
+ }, [k]);
786
+ const on = (i) => {
787
+ if (!k) {
788
+ (i.key === "ArrowDown" || i.key === "Enter") && (i.preventDefault(), W(!0));
606
789
  return;
607
790
  }
608
- switch (t.key) {
791
+ switch (i.key) {
609
792
  case "ArrowDown": {
610
- t.preventDefault();
611
- const d = O(n, b, 1);
612
- d !== -1 && W(d);
793
+ i.preventDefault();
794
+ const s = Q(e, b, 1);
795
+ s !== -1 && $(s);
613
796
  break;
614
797
  }
615
798
  case "ArrowUp": {
616
- t.preventDefault();
617
- const d = O(n, b, -1);
618
- d !== -1 && W(d);
799
+ i.preventDefault();
800
+ const s = Q(e, b, -1);
801
+ s !== -1 && $(s);
619
802
  break;
620
803
  }
621
804
  case "Enter": {
622
- t.preventDefault(), b >= 0 && n[b] && !n[b].disable && j(
623
- n[b].label,
624
- n[b].value
805
+ i.preventDefault(), b >= 0 && e[b] && !e[b].disable && V(
806
+ e[b].label,
807
+ e[b].value
625
808
  );
626
809
  break;
627
810
  }
628
- case "Escape": {
629
- N(!1);
811
+ case "Escape":
812
+ W(!1);
630
813
  break;
631
- }
632
814
  }
633
- };
634
- return /* @__PURE__ */ r(nn, { handleChangePosition: C, children: /* @__PURE__ */ w(
815
+ }, K = o === "lg" || o === "xl" ? 20 : 16, G = /* @__PURE__ */ n(un, { handleChangePosition: B, children: /* @__PURE__ */ t(
635
816
  "div",
636
817
  {
637
- className: `sa-input-dropdown-container ${k ? "disable" : ""} sa-input-dropdown-size-${a} ${y ? "active" : ""} ${L ? "error" : ""}`,
638
- ref: A,
639
- onClick: q,
640
- onKeyDown: K,
818
+ className: [
819
+ "sa-input-dropdown-container",
820
+ j,
821
+ `sa-input-dropdown-size-${o}`,
822
+ k ? "active" : "",
823
+ T ? "error" : "",
824
+ H ? "disable" : ""
825
+ ].filter(Boolean).join(" "),
826
+ ref: q,
827
+ onClick: en,
828
+ onKeyDown: on,
641
829
  tabIndex: 0,
642
- onBlur: $,
830
+ onBlur: O,
643
831
  onFocus: D,
644
832
  children: [
645
- /* @__PURE__ */ w("div", { className: "sa-input-dropdown-preview-container", children: [
646
- p ? /* @__PURE__ */ r(M, { children: P.cloneElement(p, {
647
- width: S(a),
648
- color: "var(--sa-color-gray-500, #8c8f97)",
649
- style: {
650
- color: "var(--sa-color-gray-500, #8c8f97)"
651
- }
652
- }) }) : null,
653
- /* @__PURE__ */ r(
654
- "div",
655
- {
656
- className: "sa-input-dropdown-container-preview-item",
657
- children: J()
658
- }
659
- ),
660
- /* @__PURE__ */ r(
661
- X,
662
- {
663
- strokeWidth: 2,
664
- width: S(a),
665
- style: { color: "var(--sa-color-gray-500, #8c8f97)" }
666
- }
667
- )
833
+ /* @__PURE__ */ t("div", { className: "sa-input-dropdown-preview-container", children: [
834
+ h ? Y.cloneElement(h, {
835
+ width: K,
836
+ style: { color: "var(--sa-dropdown-placeholder)", flexShrink: 0 }
837
+ }) : null,
838
+ /* @__PURE__ */ n("div", { className: "sa-input-dropdown-container-preview-item", children: rn() }),
839
+ k ? /* @__PURE__ */ n(vn, { width: K }) : /* @__PURE__ */ n(fn, { width: K })
668
840
  ] }),
669
- /* @__PURE__ */ r(
670
- _,
841
+ /* @__PURE__ */ n(
842
+ hn,
671
843
  {
672
- dropdownLists: n,
673
- handleChangeValue: j,
674
- isComponentVisible: y,
675
- positionDropdown: V,
676
- searchAble: !!m,
677
- value: s,
678
- onSearch: g,
679
- ref: x,
680
- multiSelect: o,
844
+ dropdownLists: e,
845
+ handleChangeValue: V,
846
+ isComponentVisible: k,
847
+ positionDropdown: nn,
848
+ searchAble: !!y,
849
+ value: c,
850
+ onSearch: x,
851
+ ref: m,
852
+ multiSelect: r,
681
853
  searchValue: R,
682
- highlightedIndex: b
854
+ highlightedIndex: b,
855
+ footer: a,
856
+ groupLabel: S,
857
+ onSelectAll: N
683
858
  }
684
859
  )
685
860
  ]
686
861
  }
687
862
  ) });
688
- }, O = (n, l, i) => {
689
- const c = n.length;
690
- let a = l + i;
691
- for (; a >= 0 && a < c; ) {
692
- if (!n[a].disable)
693
- return a;
694
- a += i;
863
+ return g ? _ === "outside-left" ? /* @__PURE__ */ t("div", { className: "sa-select-field sa-select-field-left", children: [
864
+ /* @__PURE__ */ t("div", { className: "sa-select-field-left-label", children: [
865
+ /* @__PURE__ */ t("div", { className: "sa-select-field-label-row", children: [
866
+ /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: g }),
867
+ U && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
868
+ J && /* @__PURE__ */ n("span", { className: "sa-select-field-required", children: "*" })
869
+ ] }),
870
+ E && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: E })
871
+ ] }),
872
+ /* @__PURE__ */ t("div", { className: "sa-select-field-input-wrap", children: [
873
+ G,
874
+ C && !u && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: C }),
875
+ u && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: u })
876
+ ] })
877
+ ] }) : /* @__PURE__ */ t("div", { className: "sa-select-field", children: [
878
+ /* @__PURE__ */ t("div", { className: "sa-select-field-label-row", children: [
879
+ /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: g }),
880
+ U && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
881
+ J && /* @__PURE__ */ n("span", { className: "sa-select-field-required", children: "*" })
882
+ ] }),
883
+ E && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: E }),
884
+ G,
885
+ C && !u && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: C }),
886
+ u && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: u })
887
+ ] }) : /* @__PURE__ */ t("div", { className: "sa-select-field", children: [
888
+ E && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: E }),
889
+ G,
890
+ C && !u && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: C }),
891
+ u && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: u })
892
+ ] });
893
+ }, Q = (e, p, d) => {
894
+ const l = e.length;
895
+ let o = p + d;
896
+ for (; o >= 0 && o < l; ) {
897
+ if (!e[o].disable)
898
+ return o;
899
+ o += d;
695
900
  }
696
- if (i === 1) {
697
- for (let o = 0; o < c; o++)
698
- if (!n[o].disable)
699
- return o;
901
+ if (d === 1) {
902
+ for (let r = 0; r < l; r++)
903
+ if (!e[r].disable)
904
+ return r;
700
905
  } else
701
- for (let o = c - 1; o >= 0; o--)
702
- if (!n[o].disable)
703
- return o;
906
+ for (let r = l - 1; r >= 0; r--)
907
+ if (!e[r].disable)
908
+ return r;
704
909
  return -1;
705
- }, S = (n) => {
706
- if (n === "sm")
707
- return 16;
708
- if (n === "md")
709
- return 16;
710
- if (n === "lg")
711
- return 20;
712
- }, on = (n) => /* @__PURE__ */ r(
910
+ }, bn = (e) => /* @__PURE__ */ n(
713
911
  "svg",
714
912
  {
715
913
  xmlns: "http://www.w3.org/2000/svg",
716
- width: "18",
717
- height: "18",
914
+ width: "14",
915
+ height: "14",
718
916
  viewBox: "0 0 18 18",
719
917
  fill: "none",
720
- ...n,
721
- children: /* @__PURE__ */ r(
918
+ style: { flexShrink: 0, cursor: "pointer" },
919
+ ...e,
920
+ children: /* @__PURE__ */ n(
722
921
  "path",
723
922
  {
724
923
  d: "M12 6L6 12M6.00001 6L12 12",
725
924
  stroke: "currentColor",
726
- "stroke-width": "1.5",
727
- "stroke-linecap": "round",
728
- "stroke-linejoin": "round"
925
+ strokeWidth: "1.5",
926
+ strokeLinecap: "round",
927
+ strokeLinejoin: "round"
928
+ }
929
+ )
930
+ }
931
+ ), fn = ({ width: e = 16 }) => /* @__PURE__ */ n(
932
+ "svg",
933
+ {
934
+ xmlns: "http://www.w3.org/2000/svg",
935
+ width: e,
936
+ height: e,
937
+ viewBox: "0 0 16 16",
938
+ fill: "none",
939
+ style: { color: "var(--sa-dropdown-placeholder)", flexShrink: 0 },
940
+ children: /* @__PURE__ */ n(
941
+ "path",
942
+ {
943
+ d: "M4 6L8 10L12 6",
944
+ stroke: "currentColor",
945
+ strokeWidth: "1.5",
946
+ strokeLinecap: "round",
947
+ strokeLinejoin: "round"
948
+ }
949
+ )
950
+ }
951
+ ), vn = ({ width: e = 16 }) => /* @__PURE__ */ n(
952
+ "svg",
953
+ {
954
+ xmlns: "http://www.w3.org/2000/svg",
955
+ width: e,
956
+ height: e,
957
+ viewBox: "0 0 16 16",
958
+ fill: "none",
959
+ style: { color: "var(--sa-dropdown-placeholder)", flexShrink: 0 },
960
+ children: /* @__PURE__ */ n(
961
+ "path",
962
+ {
963
+ d: "M4 10L8 6L12 10",
964
+ stroke: "currentColor",
965
+ strokeWidth: "1.5",
966
+ strokeLinecap: "round",
967
+ strokeLinejoin: "round"
729
968
  }
730
969
  )
731
970
  }
732
971
  );
733
972
  export {
734
- tn as Dropdown
973
+ mn as Dropdown
735
974
  };