@starasia/dropdown 3.1.0 → 3.2.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 (7) hide show
  1. package/dist/DropdownList.d.ts +3 -0
  2. package/dist/SelectField.d.ts +3 -0
  3. package/dist/dropdown.es.js +648 -413
  4. package/dist/dropdown.umd.js +313 -127
  5. package/dist/index.d.ts +1 -0
  6. package/dist/interface.d.ts +15 -1
  7. package/package.json +6 -6
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 p, jsx as n, Fragment as G } from "react/jsx-runtime";
2
+ import J, { useState as O, useRef as L, useEffect as x, forwardRef as Y } from "react";
3
+ const _ = `@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 nn(e) {
504
+ const [l, i] = O(e), d = L(null), o = (r) => {
505
+ d.current && !d.current.contains(r.target) && i(!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 x(() => (document.addEventListener("click", o, !0), () => {
508
+ document.removeEventListener("click", o, !0);
509
+ }), []), { ref: d, isComponentVisible: l, setIsComponentVisible: i };
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 en = ({ ...e }) => /* @__PURE__ */ p(
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
+ ), rn = ({ isChecked: e }) => /* @__PURE__ */ p("div", { className: "checkbox-wrapper-30", children: [
544
+ /* @__PURE__ */ p("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,411 @@ 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
+ ] }), on = Y(
397
564
  ({
398
- positionDropdown: n,
565
+ positionDropdown: e,
399
566
  dropdownLists: l,
400
567
  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(
568
+ searchAble: d,
569
+ onSearch: o,
570
+ value: r,
571
+ handleChangeValue: c,
572
+ multiSelect: u,
573
+ searchValue: y,
574
+ highlightedIndex: h,
575
+ footer: g,
576
+ groupLabel: S,
577
+ onSelectAll: I
578
+ }, j) => {
579
+ const z = L([]);
580
+ x(() => {
581
+ var a;
582
+ h >= 0 && z.current[h] && ((a = z.current[h]) == null || a.scrollIntoView({ block: "nearest" }));
583
+ }, [h]);
584
+ const A = d ? /* @__PURE__ */ p("div", { className: "sa-input-dropdown-container-dropdown-search", children: [
585
+ /* @__PURE__ */ n(en, { 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: y,
593
+ autoFocus: !0,
594
+ placeholder: "Search..."
595
+ }
596
+ )
597
+ ] }) : null;
598
+ return /* @__PURE__ */ n(G, { children: i ? /* @__PURE__ */ p(
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: j,
424
604
  children: [
425
- c ? /* @__PURE__ */ w(
605
+ e !== "top" && A,
606
+ /* @__PURE__ */ p(
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 ${u ? "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
+ S && /* @__PURE__ */ p("div", { className: "sa-input-dropdown-section-header", children: [
612
+ /* @__PURE__ */ n("span", { className: "sa-input-dropdown-section-label", children: S }),
613
+ u && I && /* @__PURE__ */ n(
614
+ "button",
615
+ {
616
+ className: "sa-input-dropdown-section-select-all",
617
+ onClick: (a) => {
618
+ a.stopPropagation(), I();
619
+ },
620
+ children: "Select all"
621
+ }
622
+ )
623
+ ] }),
624
+ l.map((a, B) => {
625
+ const C = !!(r != null && r.find((b) => b.value === a.value));
626
+ return /* @__PURE__ */ p(
627
+ "div",
628
+ {
629
+ className: [
630
+ "sa-input-dropdwon-item",
631
+ C ? "active" : "",
632
+ B === h ? "highlight" : "",
633
+ a.disable ? "sa-input-dropdwon-item-disable" : ""
634
+ ].filter(Boolean).join(" "),
635
+ ref: (b) => {
636
+ z.current[B] = b;
637
+ },
638
+ onClick: () => c(a.label, a.value),
639
+ children: [
640
+ u && /* @__PURE__ */ n("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ n(rn, { isChecked: C }) }),
641
+ a.icon && /* @__PURE__ */ n("div", { style: { flexShrink: 0 }, children: J.cloneElement(a.icon, { width: 16 }) }),
642
+ /* @__PURE__ */ p("div", { style: { minWidth: 0, flex: 1 }, children: [
643
+ /* @__PURE__ */ n(
644
+ "p",
645
+ {
646
+ className: [
647
+ "sa-input-dropdwon-item-text",
648
+ C ? "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
+ C ? "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
+ B
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" && A,
675
+ g && /* @__PURE__ */ n("div", { className: "sa-input-dropdown-footer", onClick: (a) => a.stopPropagation(), children: g })
507
676
  ]
508
677
  }
509
678
  ) : null });
510
679
  }
511
- ), nn = ({
512
- children: n,
680
+ ), an = ({
681
+ children: e,
513
682
  handleChangePosition: l
514
683
  }) => {
515
- const i = z(null);
516
- v(() => {
517
- var m;
518
- const a = () => {
684
+ const i = L(null);
685
+ x(() => {
686
+ var c;
687
+ const o = () => {
519
688
  if (i.current) {
520
- let p = i.current.parentElement;
521
- for (; p && !c(p); )
522
- p = p.parentElement;
523
- p && l();
689
+ let u = i.current.parentElement;
690
+ for (; u && !d(u); )
691
+ u = u.parentElement;
692
+ u && l();
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 = (c = i.current) == null ? void 0 : c.parentElement;
696
+ for (; r && !d(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)) {
702
+ const d = (o) => o && (o.scrollHeight > o.clientHeight || o.scrollWidth > o.clientWidth);
703
+ return /* @__PURE__ */ n("div", { ref: i, children: e });
704
+ }, V = "sa-input-dropdown-styles", tn = (e) => {
705
+ if (!document.getElementById(V)) {
537
706
  const l = document.createElement("style");
538
- l.id = H, l.textContent = n, document.head.appendChild(l);
707
+ l.id = V, l.textContent = e, document.head.appendChild(l);
539
708
  }
540
709
  };
541
- rn(Q);
542
- const tn = ({
543
- dropdownLists: n,
710
+ tn(_);
711
+ const K = ({
712
+ dropdownLists: e,
544
713
  onChange: l,
545
714
  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: $,
555
- onFocus: D,
556
- disable: k,
557
- searchValue: R
715
+ value: d,
716
+ size: o = "md",
717
+ multiSelect: r,
718
+ searchAble: c,
719
+ iconLeft: u,
720
+ placeholder: y,
721
+ onSearch: h,
722
+ error: g,
723
+ onBlur: S,
724
+ onFocus: I,
725
+ disable: j,
726
+ searchValue: z,
727
+ variant: A = "standard",
728
+ footer: a,
729
+ groupLabel: B,
730
+ onSelectAll: C
558
731
  }) => {
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);
732
+ const b = d !== void 0, W = L(), [w, R] = O(
733
+ b ? d || [] : i || []
734
+ ), [U, q] = O(""), [v, F] = O(-1), m = L(null), { isComponentVisible: k, ref: H, setIsComponentVisible: D } = nn(!1), M = () => {
735
+ D((t) => !t);
736
+ }, P = (t, s) => {
737
+ if (r)
738
+ if (w == null ? void 0 : w.find((f) => f.value === s)) {
739
+ const f = w.filter((Q) => Q.value !== s);
740
+ b || R(f), l(f);
568
741
  } else {
569
- const u = [...s, { label: t, value: d }];
570
- e || h(u), l(u);
742
+ const f = [...w, { label: t, value: s }];
743
+ b || R(f), l(f);
571
744
  }
572
745
  else {
573
- const E = [{ label: t, value: d }];
574
- e || h(E), l(E), N(!1);
746
+ const N = [{ label: t, value: s }];
747
+ b || R(N), l(N), D(!1);
575
748
  }
576
749
  };
577
- v(() => {
578
- e && h(c || []);
579
- }, [c]), v(() => {
580
- e || JSON.stringify(f.current) === JSON.stringify(i) || (f.current = i, h(f.current || []));
750
+ x(() => {
751
+ b && R(d || []);
752
+ }, [d]), x(() => {
753
+ b || JSON.stringify(W.current) === JSON.stringify(i) || (W.current = i, R(W.current || []));
581
754
  }, [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,
755
+ const X = () => w.length ? r ? w == null ? void 0 : w.map((t, s) => /* @__PURE__ */ p("div", { className: "sa-input-dropdown-preview-item", children: [
756
+ /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: t == null ? void 0 : t.label }),
757
+ /* @__PURE__ */ n(
758
+ sn,
586
759
  {
587
- onClick: () => j(t.label, t.value)
760
+ onClick: () => P(t.label, t.value)
588
761
  }
589
762
  )
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"));
763
+ ] }, s)) : /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: w == null ? void 0 : w[0].label }) : /* @__PURE__ */ n("p", { className: "sa-input-dropdown-placeholder", children: y }), E = () => {
764
+ if (H.current && m.current) {
765
+ const t = window.innerHeight, s = H.current.getBoundingClientRect(), N = m.current.getBoundingClientRect(), f = s.bottom + N.height;
766
+ m.current.style.left = `${s.left}px`, m.current.style.width = `${s.width}px`, f >= t - 10 ? (m.current.style.top = `${s.top - N.height - 5}px`, q("top")) : (m.current.style.top = `${s.top + s.height + 4}px`, q("bottom"));
594
767
  }
595
768
  };
596
- v(() => (window.addEventListener("scroll", C), window.addEventListener("resize", C), () => {
597
- window.removeEventListener("scroll", C), window.removeEventListener("resize", C);
598
- }), []), 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));
769
+ x(() => (window.addEventListener("scroll", E), window.addEventListener("resize", E), () => {
770
+ window.removeEventListener("scroll", E), window.removeEventListener("resize", E);
771
+ }), []), x(() => {
772
+ E();
773
+ }, [k]), x(() => {
774
+ k || F(-1);
775
+ }, [k]);
776
+ const Z = (t) => {
777
+ if (!k) {
778
+ (t.key === "ArrowDown" || t.key === "Enter") && (t.preventDefault(), D(!0));
606
779
  return;
607
780
  }
608
781
  switch (t.key) {
609
782
  case "ArrowDown": {
610
783
  t.preventDefault();
611
- const d = O(n, b, 1);
612
- d !== -1 && W(d);
784
+ const s = T(e, v, 1);
785
+ s !== -1 && F(s);
613
786
  break;
614
787
  }
615
788
  case "ArrowUp": {
616
789
  t.preventDefault();
617
- const d = O(n, b, -1);
618
- d !== -1 && W(d);
790
+ const s = T(e, v, -1);
791
+ s !== -1 && F(s);
619
792
  break;
620
793
  }
621
794
  case "Enter": {
622
- t.preventDefault(), b >= 0 && n[b] && !n[b].disable && j(
623
- n[b].label,
624
- n[b].value
795
+ t.preventDefault(), v >= 0 && e[v] && !e[v].disable && P(
796
+ e[v].label,
797
+ e[v].value
625
798
  );
626
799
  break;
627
800
  }
628
801
  case "Escape": {
629
- N(!1);
802
+ D(!1);
630
803
  break;
631
804
  }
632
805
  }
633
- };
634
- return /* @__PURE__ */ r(nn, { handleChangePosition: C, children: /* @__PURE__ */ w(
806
+ }, $ = dn(o);
807
+ return /* @__PURE__ */ n(an, { handleChangePosition: E, children: /* @__PURE__ */ p(
635
808
  "div",
636
809
  {
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,
810
+ className: [
811
+ "sa-input-dropdown-container",
812
+ A,
813
+ `sa-input-dropdown-size-${o}`,
814
+ k ? "active" : "",
815
+ g ? "error" : "",
816
+ j ? "disable" : ""
817
+ ].filter(Boolean).join(" "),
818
+ ref: H,
819
+ onClick: M,
820
+ onKeyDown: Z,
641
821
  tabIndex: 0,
642
- onBlur: $,
643
- onFocus: D,
822
+ onBlur: S,
823
+ onFocus: I,
644
824
  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
- }
825
+ /* @__PURE__ */ p("div", { className: "sa-input-dropdown-preview-container", children: [
826
+ u ? /* @__PURE__ */ n(G, { children: J.cloneElement(u, {
827
+ width: $,
828
+ color: "var(--sa-dropdown-placeholder)",
829
+ style: { color: "var(--sa-dropdown-placeholder)" }
652
830
  }) }) : 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
- )
831
+ /* @__PURE__ */ n("div", { className: "sa-input-dropdown-container-preview-item", children: X() }),
832
+ k ? /* @__PURE__ */ n(pn, { width: $ }) : /* @__PURE__ */ n(ln, { width: $ })
668
833
  ] }),
669
- /* @__PURE__ */ r(
670
- _,
834
+ /* @__PURE__ */ n(
835
+ on,
671
836
  {
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,
681
- searchValue: R,
682
- highlightedIndex: b
837
+ dropdownLists: e,
838
+ handleChangeValue: P,
839
+ isComponentVisible: k,
840
+ positionDropdown: U,
841
+ searchAble: !!c,
842
+ value: w,
843
+ onSearch: h,
844
+ ref: m,
845
+ multiSelect: r,
846
+ searchValue: z,
847
+ highlightedIndex: v,
848
+ footer: a,
849
+ groupLabel: B,
850
+ onSelectAll: C
683
851
  }
684
852
  )
685
853
  ]
686
854
  }
687
855
  ) });
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;
856
+ }, T = (e, l, i) => {
857
+ const d = e.length;
858
+ let o = l + i;
859
+ for (; o >= 0 && o < d; ) {
860
+ if (!e[o].disable)
861
+ return o;
862
+ o += i;
695
863
  }
696
864
  if (i === 1) {
697
- for (let o = 0; o < c; o++)
698
- if (!n[o].disable)
699
- return o;
865
+ for (let r = 0; r < d; r++)
866
+ if (!e[r].disable)
867
+ return r;
700
868
  } else
701
- for (let o = c - 1; o >= 0; o--)
702
- if (!n[o].disable)
703
- return o;
869
+ for (let r = d - 1; r >= 0; r--)
870
+ if (!e[r].disable)
871
+ return r;
704
872
  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(
873
+ }, dn = (e) => e === "lg" || e === "xl" ? 20 : 16, sn = (e) => /* @__PURE__ */ n(
713
874
  "svg",
714
875
  {
715
876
  xmlns: "http://www.w3.org/2000/svg",
716
- width: "18",
717
- height: "18",
877
+ width: "14",
878
+ height: "14",
718
879
  viewBox: "0 0 18 18",
719
880
  fill: "none",
720
- ...n,
721
- children: /* @__PURE__ */ r(
881
+ ...e,
882
+ children: /* @__PURE__ */ n(
722
883
  "path",
723
884
  {
724
885
  d: "M12 6L6 12M6.00001 6L12 12",
725
886
  stroke: "currentColor",
726
- "stroke-width": "1.5",
727
- "stroke-linecap": "round",
728
- "stroke-linejoin": "round"
887
+ strokeWidth: "1.5",
888
+ strokeLinecap: "round",
889
+ strokeLinejoin: "round"
890
+ }
891
+ )
892
+ }
893
+ ), ln = ({ width: e = 16 }) => /* @__PURE__ */ n(
894
+ "svg",
895
+ {
896
+ xmlns: "http://www.w3.org/2000/svg",
897
+ width: e,
898
+ height: e,
899
+ viewBox: "0 0 16 16",
900
+ fill: "none",
901
+ style: { color: "var(--sa-dropdown-placeholder)", flexShrink: 0 },
902
+ children: /* @__PURE__ */ n(
903
+ "path",
904
+ {
905
+ d: "M4 6L8 10L12 6",
906
+ stroke: "currentColor",
907
+ strokeWidth: "1.5",
908
+ strokeLinecap: "round",
909
+ strokeLinejoin: "round"
910
+ }
911
+ )
912
+ }
913
+ ), pn = ({ width: e = 16 }) => /* @__PURE__ */ n(
914
+ "svg",
915
+ {
916
+ xmlns: "http://www.w3.org/2000/svg",
917
+ width: e,
918
+ height: e,
919
+ viewBox: "0 0 16 16",
920
+ fill: "none",
921
+ style: { color: "var(--sa-dropdown-placeholder)", flexShrink: 0 },
922
+ children: /* @__PURE__ */ n(
923
+ "path",
924
+ {
925
+ d: "M4 10L8 6L12 10",
926
+ stroke: "currentColor",
927
+ strokeWidth: "1.5",
928
+ strokeLinecap: "round",
929
+ strokeLinejoin: "round"
729
930
  }
730
931
  )
731
932
  }
732
- );
933
+ ), wn = ({
934
+ label: e,
935
+ labelPosition: l = "top",
936
+ required: i,
937
+ optional: d,
938
+ helperText: o,
939
+ helperTextTop: r,
940
+ errorMessage: c,
941
+ error: u,
942
+ ...y
943
+ }) => {
944
+ const h = u || !!c, g = e ? /* @__PURE__ */ p("div", { className: "sa-select-field-label-row", children: [
945
+ /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: e }),
946
+ d && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
947
+ i && /* @__PURE__ */ n("span", { className: "sa-select-field-required", children: "*" })
948
+ ] }) : null;
949
+ return l === "left" ? /* @__PURE__ */ p("div", { className: "sa-select-field sa-select-field-left", children: [
950
+ /* @__PURE__ */ p("div", { className: "sa-select-field-left-label", children: [
951
+ g,
952
+ r && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: r })
953
+ ] }),
954
+ /* @__PURE__ */ p("div", { className: "sa-select-field-input-wrap", children: [
955
+ /* @__PURE__ */ n(K, { ...y, error: h }),
956
+ o && !c && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: o }),
957
+ c && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: c })
958
+ ] })
959
+ ] }) : /* @__PURE__ */ p("div", { className: "sa-select-field", children: [
960
+ g,
961
+ r && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: r }),
962
+ /* @__PURE__ */ n(K, { ...y, error: h }),
963
+ o && !c && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: o }),
964
+ c && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: c })
965
+ ] });
966
+ };
733
967
  export {
734
- tn as Dropdown
968
+ K as Dropdown,
969
+ wn as SelectField
735
970
  };