@starasia/dropdown 3.0.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 +653 -412
  4. package/dist/dropdown.umd.js +313 -127
  5. package/dist/index.d.ts +1 -0
  6. package/dist/interface.d.ts +19 -1
  7. package/package.json +6 -6
package/dist/dropdown.es.js CHANGED
@@ -1,81 +1,152 @@
1
- import { jsx as e, jsxs as p, Fragment as V } from "react/jsx-runtime";
2
- import M, { useState as R, useRef as z, useEffect as b, forwardRef as K } from "react";
3
- const U = `@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 U = `@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 U = `@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 U = `@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 U = `@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 U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
314
500
  width: 100%;
315
501
  }
316
502
  `;
317
- function G(r) {
318
- const [c, d] = R(r), s = z(null), a = (o) => {
319
- s.current && !s.current.contains(o.target) && d(!1);
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 b(() => (document.addEventListener("click", a, !0), () => {
322
- document.removeEventListener("click", a, !0);
323
- }), []), { ref: s, isComponentVisible: c, setIsComponentVisible: d };
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 Q = ({ ...r }) => /* @__PURE__ */ e(
326
- "svg",
327
- {
328
- xmlns: "http://www.w3.org/2000/svg",
329
- ...r,
330
- viewBox: "0 0 24 24",
331
- fill: "none",
332
- color: "var(--sa-color-gray-500, #8c8f97)",
333
- children: /* @__PURE__ */ e(
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
- ), T = ({ ...r }) => /* @__PURE__ */ p(
511
+ const en = ({ ...e }) => /* @__PURE__ */ p(
345
512
  "svg",
346
513
  {
347
514
  xmlns: "http://www.w3.org/2000/svg",
348
- ...r,
515
+ ...e,
349
516
  viewBox: "0 0 20 20",
350
517
  fill: "none",
351
518
  children: [
352
- /* @__PURE__ */ e(
519
+ /* @__PURE__ */ n(
353
520
  "circle",
354
521
  {
355
522
  cx: "9.80547",
@@ -361,7 +528,7 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
361
528
  strokeLinejoin: "round"
362
529
  }
363
530
  ),
364
- /* @__PURE__ */ e(
531
+ /* @__PURE__ */ n(
365
532
  "path",
366
533
  {
367
534
  d: "M15.0153 15.4043L17.9519 18.3333",
@@ -373,19 +540,19 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
373
540
  )
374
541
  ]
375
542
  }
376
- ), X = ({ isChecked: r }) => /* @__PURE__ */ p("div", { className: "checkbox-wrapper-30", children: [
543
+ ), rn = ({ isChecked: e }) => /* @__PURE__ */ p("div", { className: "checkbox-wrapper-30", children: [
377
544
  /* @__PURE__ */ p("span", { className: "checkbox", children: [
378
- /* @__PURE__ */ e(
545
+ /* @__PURE__ */ n(
379
546
  "input",
380
547
  {
381
548
  type: "checkbox",
382
549
  style: { pointerEvents: "none" },
383
- checked: r
550
+ checked: e
384
551
  }
385
552
  ),
386
- /* @__PURE__ */ e("svg", { children: /* @__PURE__ */ e("use", { xlinkHref: "#checkbox-30", className: "checkbox" }) })
553
+ /* @__PURE__ */ n("svg", { children: /* @__PURE__ */ n("use", { xlinkHref: "#checkbox-30", className: "checkbox" }) })
387
554
  ] }),
388
- /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "none" }, children: /* @__PURE__ */ e("symbol", { id: "checkbox-30", viewBox: "0 0 22 22", children: /* @__PURE__ */ e(
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,337 +560,411 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
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
- ] }), Y = K(
563
+ ] }), on = Y(
397
564
  ({
398
- positionDropdown: r,
399
- dropdownLists: c,
400
- isComponentVisible: d,
401
- searchAble: s,
402
- onSearch: a,
403
- value: o,
404
- handleChangeValue: v,
405
- multiSelect: l,
406
- searchValue: $,
407
- highlightedIndex: g
408
- }, N) => {
409
- const [I, L] = R(0), m = z(null), x = z([]);
410
- return b(() => {
411
- if (m.current) {
412
- const n = m.current.getBoundingClientRect();
413
- L(n.width);
414
- }
415
- }, [m, d]), b(() => {
416
- var n;
417
- g >= 0 && x.current[g] && ((n = x.current[g]) == null || n.scrollIntoView({ block: "nearest" }));
418
- }, [g]), /* @__PURE__ */ e(V, { children: d ? /* @__PURE__ */ p(
565
+ positionDropdown: e,
566
+ dropdownLists: l,
567
+ isComponentVisible: i,
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: (n) => n.stopPropagation(),
423
- ref: N,
602
+ onClick: (a) => a.stopPropagation(),
603
+ ref: j,
424
604
  children: [
425
- s ? /* @__PURE__ */ p(
605
+ e !== "top" && A,
606
+ /* @__PURE__ */ p(
426
607
  "div",
427
608
  {
428
- className: "sa-input-dropdown-container-dropdown-search",
429
- style: {
430
- order: r == "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__ */ e("div", { style: { display: "flex" }, children: /* @__PURE__ */ e(T, { strokeWidth: 2, width: 20 }) }),
438
- /* @__PURE__ */ e(
439
- "input",
440
- {
441
- onChange: (n) => {
442
- a && a(n.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: $,
445
- autoFocus: !0,
446
- style: { width: "100%" }
447
- }
448
- )
668
+ B
669
+ );
670
+ })
449
671
  ]
450
672
  }
451
- ) : null,
452
- /* @__PURE__ */ e(
453
- "div",
454
- {
455
- className: `sa-input-dropdwon-item-container ${l ? "multi" : ""}`,
456
- ref: m,
457
- children: c.map((n, h) => {
458
- const k = !!(o != null && o.find((y) => y.value === n.value));
459
- return /* @__PURE__ */ p(
460
- "div",
461
- {
462
- className: `sa-input-dropdwon-item ${k ? "active" : ""} ${h === g ? "highlight" : ""} ${n.disable ? "sa-input-dropdwon-item-disable" : ""}`,
463
- ref: (y) => {
464
- x.current[h] = y;
465
- },
466
- onClick: () => v(n.label, n.value),
467
- children: [
468
- l ? /* @__PURE__ */ e("div", { style: { marginRight: "8px" }, children: /* @__PURE__ */ e(X, { isChecked: k }) }) : null,
469
- n.icon ? /* @__PURE__ */ e("div", { children: M.cloneElement(n.icon, {
470
- width: 16
471
- }) }) : null,
472
- /* @__PURE__ */ p("div", { children: [
473
- /* @__PURE__ */ e(
474
- "p",
475
- {
476
- className: `sa-input-dropdwon-item-text ${k ? "active" : null} ${n.disable ? "sa-input-dropdwon-item-disable" : null}`,
477
- style: {
478
- textWrap: "nowrap",
479
- width: `${I - 12}px`,
480
- overflow: "hidden",
481
- textOverflow: "ellipsis"
482
- },
483
- children: n.label
484
- }
485
- ),
486
- n.description ? /* @__PURE__ */ e(
487
- "p",
488
- {
489
- className: `sa-input-dropdwon-item-text-description ${k ? "active" : null} ${n.disable ? "sa-input-dropdwon-item-disable" : null}`,
490
- style: {
491
- textWrap: "nowrap",
492
- width: `${I - 12}px`,
493
- overflow: "hidden",
494
- textOverflow: "ellipsis"
495
- },
496
- children: n.description
497
- }
498
- ) : null
499
- ] })
500
- ]
501
- },
502
- h
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
- ), Z = ({
512
- children: r,
513
- handleChangePosition: c
680
+ ), an = ({
681
+ children: e,
682
+ handleChangePosition: l
514
683
  }) => {
515
- const d = z(null);
516
- b(() => {
517
- var v;
518
- const a = () => {
519
- if (d.current) {
520
- let l = d.current.parentElement;
521
- for (; l && !s(l); )
522
- l = l.parentElement;
523
- l && c();
684
+ const i = L(null);
685
+ x(() => {
686
+ var c;
687
+ const o = () => {
688
+ if (i.current) {
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 = (v = d.current) == null ? void 0 : v.parentElement;
527
- for (; o && !s(o); )
528
- o = o.parentElement;
529
- return o && o.addEventListener("scroll", a), a(), () => {
530
- o && o.removeEventListener("scroll", a);
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 s = (a) => a && (a.scrollHeight > a.clientHeight || a.scrollWidth > a.clientWidth);
534
- return /* @__PURE__ */ e("div", { ref: d, children: r });
535
- }, F = "sa-input-dropdown-styles", _ = (r) => {
536
- if (!document.getElementById(F)) {
537
- const c = document.createElement("style");
538
- c.id = F, c.textContent = r, document.head.appendChild(c);
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)) {
706
+ const l = document.createElement("style");
707
+ l.id = V, l.textContent = e, document.head.appendChild(l);
539
708
  }
540
709
  };
541
- _(U);
542
- const on = ({
543
- dropdownLists: r,
544
- onChange: c,
545
- defaultValue: d,
546
- size: s = "md",
547
- multiSelect: a,
548
- searchAble: o,
549
- iconLeft: v,
550
- placeholder: l,
551
- onSearch: $,
710
+ tn(_);
711
+ const K = ({
712
+ dropdownLists: e,
713
+ onChange: l,
714
+ defaultValue: i,
715
+ value: d,
716
+ size: o = "md",
717
+ multiSelect: r,
718
+ searchAble: c,
719
+ iconLeft: u,
720
+ placeholder: y,
721
+ onSearch: h,
552
722
  error: g,
553
- onBlur: N,
723
+ onBlur: S,
554
724
  onFocus: I,
555
- disable: L,
556
- searchValue: m
725
+ disable: j,
726
+ searchValue: z,
727
+ variant: A = "standard",
728
+ footer: a,
729
+ groupLabel: B,
730
+ onSelectAll: C
557
731
  }) => {
558
- const x = z(), [n, h] = R([]), [k, y] = R(""), [u, D] = R(-1), f = z(null), { isComponentVisible: C, ref: W, setIsComponentVisible: B } = G(!1), P = () => {
559
- B((t) => !t);
560
- }, A = (t, i) => {
561
- if (!a)
562
- h([{ label: t, value: i }]), c([{ label: t, value: i }]), B(!1);
563
- else if (n == null ? void 0 : n.find((w) => w.value === i)) {
564
- const w = [
565
- ...n ? n.filter((J) => J.value !== i) : []
566
- ];
567
- h(w), c(w);
568
- } else {
569
- const w = [...n || [], { label: t, value: i }];
570
- h(w), c(w);
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);
741
+ } else {
742
+ const f = [...w, { label: t, value: s }];
743
+ b || R(f), l(f);
744
+ }
745
+ else {
746
+ const N = [{ label: t, value: s }];
747
+ b || R(N), l(N), D(!1);
571
748
  }
572
749
  };
573
- b(() => {
574
- JSON.stringify(x.current) === JSON.stringify(d) || (x.current = d, h(x.current || []));
575
- }, [d]);
576
- const S = () => n.length ? a ? n == null ? void 0 : n.map((t, i) => /* @__PURE__ */ p("div", { className: "sa-input-dropdown-preview-item", children: [
577
- /* @__PURE__ */ e("p", { style: { minWidth: "max-content" }, children: t == null ? void 0 : t.label }, i),
578
- /* @__PURE__ */ e(
579
- nn,
750
+ x(() => {
751
+ b && R(d || []);
752
+ }, [d]), x(() => {
753
+ b || JSON.stringify(W.current) === JSON.stringify(i) || (W.current = i, R(W.current || []));
754
+ }, [i]);
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,
580
759
  {
581
- onClick: () => A(t.label, t.value)
760
+ onClick: () => P(t.label, t.value)
582
761
  }
583
762
  )
584
- ] })) : /* @__PURE__ */ e("p", { style: { minWidth: "max-content" }, children: n == null ? void 0 : n[0].label }) : /* @__PURE__ */ e("p", { className: "sa-input-dropdown-placeholder", children: l }), E = () => {
585
- if (W.current && f.current) {
586
- const t = window.innerHeight, i = W.current.getBoundingClientRect(), j = f.current.getBoundingClientRect(), w = i.bottom + j.height;
587
- f.current.style.left = `${i.left}px`, f.current.style.width = `${i.width}px`, w >= t - 10 ? (f.current.style.top = `${i.top - j.height - 5}px`, y("top")) : (f.current.style.top = `${i.top + i.height}px`, y("bottom"));
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"));
588
767
  }
589
768
  };
590
- b(() => (window.addEventListener("scroll", E), window.addEventListener("resize", E), () => {
769
+ x(() => (window.addEventListener("scroll", E), window.addEventListener("resize", E), () => {
591
770
  window.removeEventListener("scroll", E), window.removeEventListener("resize", E);
592
- }), []), b(() => {
771
+ }), []), x(() => {
593
772
  E();
594
- }, [C]), b(() => {
595
- C || D(-1);
596
- }, [C]);
597
- const q = (t) => {
598
- if (!C) {
599
- (t.key === "ArrowDown" || t.key === "Enter") && (t.preventDefault(), B(!0));
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));
600
779
  return;
601
780
  }
602
781
  switch (t.key) {
603
782
  case "ArrowDown": {
604
783
  t.preventDefault();
605
- const i = H(r, u, 1);
606
- i !== -1 && D(i);
784
+ const s = T(e, v, 1);
785
+ s !== -1 && F(s);
607
786
  break;
608
787
  }
609
788
  case "ArrowUp": {
610
789
  t.preventDefault();
611
- const i = H(r, u, -1);
612
- i !== -1 && D(i);
790
+ const s = T(e, v, -1);
791
+ s !== -1 && F(s);
613
792
  break;
614
793
  }
615
794
  case "Enter": {
616
- t.preventDefault(), u >= 0 && r[u] && !r[u].disable && A(
617
- r[u].label,
618
- r[u].value
795
+ t.preventDefault(), v >= 0 && e[v] && !e[v].disable && P(
796
+ e[v].label,
797
+ e[v].value
619
798
  );
620
799
  break;
621
800
  }
622
801
  case "Escape": {
623
- B(!1);
802
+ D(!1);
624
803
  break;
625
804
  }
626
805
  }
627
- };
628
- return /* @__PURE__ */ e(Z, { handleChangePosition: E, children: /* @__PURE__ */ p(
806
+ }, $ = dn(o);
807
+ return /* @__PURE__ */ n(an, { handleChangePosition: E, children: /* @__PURE__ */ p(
629
808
  "div",
630
809
  {
631
- className: `sa-input-dropdown-container ${L ? "disable" : ""} sa-input-dropdown-size-${s} ${C ? "active" : ""} ${g ? "error" : ""}`,
632
- ref: W,
633
- onClick: P,
634
- onKeyDown: q,
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,
635
821
  tabIndex: 0,
636
- onBlur: N,
822
+ onBlur: S,
637
823
  onFocus: I,
638
824
  children: [
639
825
  /* @__PURE__ */ p("div", { className: "sa-input-dropdown-preview-container", children: [
640
- v ? /* @__PURE__ */ e(V, { children: M.cloneElement(v, {
641
- width: O(s),
642
- color: "var(--sa-color-gray-500, #8c8f97)",
643
- style: {
644
- color: "var(--sa-color-gray-500, #8c8f97)"
645
- }
826
+ u ? /* @__PURE__ */ n(G, { children: J.cloneElement(u, {
827
+ width: $,
828
+ color: "var(--sa-dropdown-placeholder)",
829
+ style: { color: "var(--sa-dropdown-placeholder)" }
646
830
  }) }) : null,
647
- /* @__PURE__ */ e(
648
- "div",
649
- {
650
- className: "sa-input-dropdown-container-preview-item",
651
- children: S()
652
- }
653
- ),
654
- /* @__PURE__ */ e(
655
- Q,
656
- {
657
- strokeWidth: 2,
658
- width: O(s),
659
- style: { color: "var(--sa-color-gray-500, #8c8f97)" }
660
- }
661
- )
831
+ /* @__PURE__ */ n("div", { className: "sa-input-dropdown-container-preview-item", children: X() }),
832
+ k ? /* @__PURE__ */ n(pn, { width: $ }) : /* @__PURE__ */ n(ln, { width: $ })
662
833
  ] }),
663
- /* @__PURE__ */ e(
664
- Y,
834
+ /* @__PURE__ */ n(
835
+ on,
665
836
  {
666
- dropdownLists: r,
667
- handleChangeValue: A,
668
- isComponentVisible: C,
669
- positionDropdown: k,
670
- searchAble: !!o,
671
- value: n,
672
- onSearch: $,
673
- ref: f,
674
- multiSelect: a,
675
- searchValue: m,
676
- highlightedIndex: u
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
677
851
  }
678
852
  )
679
853
  ]
680
854
  }
681
855
  ) });
682
- }, H = (r, c, d) => {
683
- const s = r.length;
684
- let a = c + d;
685
- for (; a >= 0 && a < s; ) {
686
- if (!r[a].disable)
687
- return a;
688
- a += d;
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;
689
863
  }
690
- if (d === 1) {
691
- for (let o = 0; o < s; o++)
692
- if (!r[o].disable)
693
- return o;
864
+ if (i === 1) {
865
+ for (let r = 0; r < d; r++)
866
+ if (!e[r].disable)
867
+ return r;
694
868
  } else
695
- for (let o = s - 1; o >= 0; o--)
696
- if (!r[o].disable)
697
- return o;
869
+ for (let r = d - 1; r >= 0; r--)
870
+ if (!e[r].disable)
871
+ return r;
698
872
  return -1;
699
- }, O = (r) => {
700
- if (r === "sm")
701
- return 16;
702
- if (r === "md")
703
- return 16;
704
- if (r === "lg")
705
- return 20;
706
- }, nn = (r) => /* @__PURE__ */ e(
873
+ }, dn = (e) => e === "lg" || e === "xl" ? 20 : 16, sn = (e) => /* @__PURE__ */ n(
707
874
  "svg",
708
875
  {
709
876
  xmlns: "http://www.w3.org/2000/svg",
710
- width: "18",
711
- height: "18",
877
+ width: "14",
878
+ height: "14",
712
879
  viewBox: "0 0 18 18",
713
880
  fill: "none",
714
- ...r,
715
- children: /* @__PURE__ */ e(
881
+ ...e,
882
+ children: /* @__PURE__ */ n(
716
883
  "path",
717
884
  {
718
885
  d: "M12 6L6 12M6.00001 6L12 12",
719
886
  stroke: "currentColor",
720
- "stroke-width": "1.5",
721
- "stroke-linecap": "round",
722
- "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"
723
930
  }
724
931
  )
725
932
  }
726
- );
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
+ };
727
967
  export {
728
- on as Dropdown
968
+ K as Dropdown,
969
+ wn as SelectField
729
970
  };