@starasia/dropdown 3.2.0 → 3.4.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 (6) hide show
  1. package/dist/dropdown.es.js +329 -309
  2. package/dist/dropdown.umd.js +111 -93
  3. package/dist/index.d.ts +0 -1
  4. package/dist/interface.d.ts +9 -8
  5. package/package.json +6 -6
  6. package/dist/SelectField.d.ts +0 -3
package/dist/dropdown.umd.js CHANGED
@@ -1,4 +1,4 @@
1
- (function(u,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],n):(u=typeof globalThis<"u"?globalThis:u||self,n(u.Dropdown={},u.jsxRuntime,u.React))})(this,function(u,n,d){"use strict";const K=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
1
+ (function(b,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],n):(b=typeof globalThis<"u"?globalThis:b||self,n(b.Dropdown={},b.jsxRuntime,b.React))})(this,function(b,n,s){"use strict";const Q=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
2
2
  * {
3
3
  margin: 0;
4
4
  padding: 0;
@@ -7,59 +7,62 @@
7
7
  }
8
8
 
9
9
  :root {
10
- --sa-dropdown-brand: var(--sa-background-brand, #04254f);
10
+ --sa-dropdown-brand: var(--sa-border-brand, #031f43);
11
+ --sa-dropdown-brand-ring: var(--sa-color-brand-100, #90caf9);
11
12
  --sa-dropdown-brand-subtle: var(--sa-color-brand-200, #99b3db);
12
13
  --sa-dropdown-bg: var(--sa-background-primary, #ffffff);
13
14
  --sa-dropdown-bg-neutral: var(--sa-background-neutral, #f0f1f2);
15
+ --sa-dropdown-bg-selected: #f8f8f8;
16
+ --sa-dropdown-bg-hover: rgba(0, 0, 0, 0.04);
14
17
  --sa-dropdown-bg-disabled: var(--sa-background-neutral, #f0f1f2);
15
18
  --sa-dropdown-bg-error: #fff0f3;
16
19
  --sa-dropdown-border-subtle: rgba(11, 18, 14, 0.14);
17
- --sa-dropdown-border-active: var(--sa-background-brand, #04254f);
20
+ --sa-dropdown-border-active: var(--sa-border-brand, #031f43);
18
21
  --sa-dropdown-border-error-subtle: #ffb3c1;
19
22
  --sa-dropdown-border-error: var(--sa-color-error-500, #ff4d6d);
20
23
  --sa-dropdown-color-disable: var(--sa-color-gray-300, #dddee1);
21
24
  --sa-dropdown-placeholder: var(--sa-text-subtle, #505258);
22
25
  --sa-dropdown-placeholder-subtle: #6b6e76;
23
26
  --sa-dropdown-text-primary: var(--sa-text-primary, #292a2e);
24
- --sa-dropdown-text-secondary: var(--sa-text-subtle, #6b6e76);
27
+ --sa-dropdown-text-secondary: #6b6e76;
25
28
  --sa-dropdown-text-error: #a4133c;
26
29
  --sa-dropdown-text-info: #0073ab;
27
- --sa-dropdown-ring-active: 0px 0px 0px 1.2px var(--sa-color-brand-200, #99b3db);
30
+ --sa-dropdown-ring-active: 0px 0px 0px 1.2px var(--sa-dropdown-brand-ring);
28
31
  --sa-dropdown-shadow-panel: 0px 8px 12px 0px rgba(30, 31, 33, 0.15), 0px 0px 1px 0px rgba(30, 31, 33, 0.31);
29
32
  --sa-dropdown-radius: var(--sa-radii-sm, 6px);
30
33
  }
31
34
 
32
35
  /* === SIZE VARIANTS === */
33
36
  .sa-input-dropdown-size-sm {
34
- --baseFont: var(--sa-font-size-xs, 12px);
37
+ --baseFont: 12px;
35
38
  --height: 32px;
36
39
  --borderRadius: var(--sa-dropdown-radius);
37
- --paddingInline: var(--sa-spacing-sm, 8px);
38
- --paddingBlock: var(--sa-spacing-xs, 4px);
40
+ --paddingInline: 12px;
41
+ --paddingBlock: 4px;
39
42
  --iconSize: 16px;
40
43
  }
41
44
  .sa-input-dropdown-size-md {
42
- --baseFont: var(--sa-font-size-sm, 14px);
45
+ --baseFont: 14px;
43
46
  --height: 40px;
44
47
  --borderRadius: var(--sa-dropdown-radius);
45
- --paddingInline: var(--sa-spacing-3, 12px);
46
- --paddingBlock: var(--sa-spacing-sm, 8px);
48
+ --paddingInline: 12px;
49
+ --paddingBlock: 8px;
47
50
  --iconSize: 16px;
48
51
  }
49
52
  .sa-input-dropdown-size-lg {
50
- --baseFont: var(--sa-font-size-md, 16px);
53
+ --baseFont: 14px;
51
54
  --height: 48px;
52
55
  --borderRadius: var(--sa-dropdown-radius);
53
- --paddingInline: var(--sa-spacing-3, 12px);
54
- --paddingBlock: var(--sa-spacing-sm, 8px);
56
+ --paddingInline: 12px;
57
+ --paddingBlock: 12px;
55
58
  --iconSize: 20px;
56
59
  }
57
60
  .sa-input-dropdown-size-xl {
58
- --baseFont: var(--sa-font-size-md, 16px);
61
+ --baseFont: 16px;
59
62
  --height: 56px;
60
63
  --borderRadius: var(--sa-dropdown-radius);
61
- --paddingInline: var(--sa-spacing-3, 12px);
62
- --paddingBlock: var(--sa-spacing-sm, 8px);
64
+ --paddingInline: 16px;
65
+ --paddingBlock: 16px;
63
66
  --iconSize: 20px;
64
67
  }
65
68
 
@@ -75,6 +78,8 @@
75
78
  cursor: pointer;
76
79
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
77
80
  outline: none;
81
+ box-sizing: border-box;
82
+ width: 100%;
78
83
  }
79
84
  .sa-input-dropdown-container:focus-visible {
80
85
  outline: none;
@@ -87,7 +92,7 @@
87
92
  border-radius: var(--borderRadius);
88
93
  }
89
94
  .sa-input-dropdown-container.standard.active {
90
- border-color: var(--sa-dropdown-border-active);
95
+ border: 1px solid var(--sa-dropdown-border-active);
91
96
  box-shadow: var(--sa-dropdown-ring-active);
92
97
  }
93
98
  .sa-input-dropdown-container.standard.error {
@@ -109,12 +114,12 @@
109
114
  border-radius: var(--borderRadius);
110
115
  }
111
116
  .sa-input-dropdown-container.outline.active {
112
- border: 1px solid var(--sa-dropdown-border-active);
113
- box-shadow: var(--sa-dropdown-ring-active);
117
+ border: 1.2px solid var(--sa-dropdown-border-active);
118
+ box-shadow: none;
114
119
  }
115
120
  .sa-input-dropdown-container.outline.error {
116
- background-color: var(--sa-dropdown-bg-error);
117
- border: 1px solid var(--sa-dropdown-border-error-subtle);
121
+ background-color: transparent;
122
+ border: 0.8px solid var(--sa-dropdown-border-error-subtle);
118
123
  }
119
124
  .sa-input-dropdown-container.outline.disable {
120
125
  background-color: var(--sa-dropdown-bg-disabled);
@@ -132,11 +137,11 @@
132
137
  border-radius: 0;
133
138
  }
134
139
  .sa-input-dropdown-container.flushed.active {
135
- border-bottom: 1px solid var(--sa-dropdown-border-active);
136
- box-shadow: 0px 1.2px 0px 0px var(--sa-color-brand-200, #99b3db);
140
+ border-bottom: 1.2px solid var(--sa-dropdown-border-active);
141
+ box-shadow: none;
137
142
  }
138
143
  .sa-input-dropdown-container.flushed.error {
139
- border-bottom: 1px solid var(--sa-dropdown-border-error-subtle);
144
+ border-bottom: 0.8px solid var(--sa-dropdown-border-error-subtle);
140
145
  }
141
146
  .sa-input-dropdown-container.flushed.disable {
142
147
  cursor: not-allowed;
@@ -148,34 +153,36 @@
148
153
  .sa-input-dropdown-preview-container {
149
154
  display: flex;
150
155
  flex-direction: row;
151
- gap: var(--sa-spacing-sm, 8px);
156
+ gap: 8px;
152
157
  align-items: center;
153
158
  justify-content: space-between;
154
159
  width: 100%;
155
- overflow-y: hidden;
160
+ min-width: 0;
156
161
  }
157
162
 
158
163
  .sa-input-dropdown-container-preview-item {
159
164
  flex: 1;
160
165
  display: flex;
161
- gap: var(--sa-spacing-xs, 4px);
166
+ gap: 4px;
162
167
  flex-wrap: wrap;
163
168
  align-items: center;
164
- overflow-y: auto;
165
- padding-block: 4px;
169
+ min-width: 0;
166
170
  }
167
171
 
168
172
  .sa-input-dropdown-preview-item {
169
- border: 1px solid var(--sa-dropdown-brand);
170
- padding-inline: var(--paddingInline);
171
- border-radius: var(--sa-dropdown-radius);
173
+ border: 0.8px solid var(--sa-dropdown-border-subtle);
174
+ padding-inline: 8px;
175
+ padding-block: 2px;
176
+ border-radius: 4px;
172
177
  background-color: var(--sa-color-brand-50, #e6edf6);
173
178
  color: var(--sa-dropdown-brand);
174
179
  height: max-content;
175
- font-size: var(--baseFont);
180
+ font-size: 12px;
181
+ font-weight: 500;
176
182
  display: flex;
177
183
  align-items: center;
178
184
  gap: 4px;
185
+ line-height: normal;
179
186
  }
180
187
 
181
188
  .sa-input-dropdown-placeholder {
@@ -193,12 +200,13 @@
193
200
  background-color: var(--sa-dropdown-bg);
194
201
  border-radius: var(--sa-dropdown-radius);
195
202
  box-shadow: var(--sa-dropdown-shadow-panel);
196
- max-height: 320px;
203
+ max-height: 400px;
197
204
  overflow: hidden;
198
205
  z-index: 999;
199
206
  width: 100%;
200
207
  display: flex;
201
208
  flex-direction: column;
209
+ font-family: "Poppins", sans-serif;
202
210
  }
203
211
 
204
212
  /* === SEARCH BAR === */
@@ -206,12 +214,12 @@
206
214
  flex-shrink: 0;
207
215
  display: flex;
208
216
  align-items: center;
209
- height: 36px;
210
- min-height: 36px;
217
+ height: 32px;
218
+ min-height: 32px;
211
219
  border-bottom: 0.8px solid var(--sa-dropdown-border-subtle);
212
- gap: var(--sa-spacing-sm, 8px);
213
- padding-inline: var(--sa-spacing-3, 12px);
214
- padding-block: var(--sa-spacing-sm, 8px);
220
+ gap: 8px;
221
+ padding-inline: 12px;
222
+ padding-block: 8px;
215
223
  background: var(--sa-dropdown-bg);
216
224
 
217
225
  & input {
@@ -219,8 +227,11 @@
219
227
  outline: none;
220
228
  background-color: transparent;
221
229
  border: none;
222
- font-size: var(--baseFont, 14px);
230
+ font-size: 12px;
231
+ font-weight: 400;
223
232
  color: var(--sa-dropdown-text-primary);
233
+ line-height: normal;
234
+ padding: 0;
224
235
  }
225
236
  & input::placeholder {
226
237
  color: var(--sa-dropdown-placeholder-subtle);
@@ -232,11 +243,9 @@
232
243
  flex: 1 1 0;
233
244
  overflow-y: auto;
234
245
  min-height: 0;
235
- padding: var(--sa-spacing-sm, 8px);
246
+ padding: 8px 8px 8px 8px;
236
247
  display: flex;
237
248
  flex-direction: column;
238
- }
239
- .sa-input-dropdwon-item-container.multi {
240
249
  gap: 4px;
241
250
  }
242
251
 
@@ -246,8 +255,7 @@
246
255
  align-items: center;
247
256
  justify-content: space-between;
248
257
  gap: 12px;
249
- padding-inline: 4px;
250
- padding-bottom: 4px;
258
+ padding: 0 4px 4px 4px;
251
259
  font-size: 12px;
252
260
  font-weight: 500;
253
261
  flex-shrink: 0;
@@ -272,33 +280,52 @@
272
280
 
273
281
  /* === LIST ITEMS === */
274
282
  .sa-input-dropdwon-item {
275
- min-height: 36px;
283
+ min-height: 40px;
276
284
  box-sizing: border-box;
277
- padding-left: var(--sa-spacing-sm, 8px);
278
- padding-right: var(--sa-spacing-3, 12px);
279
- padding-block: var(--sa-spacing-xs, 4px);
285
+ padding: 4px 12px 4px 8px;
280
286
  display: flex;
281
287
  align-items: center;
282
288
  cursor: pointer;
283
- gap: var(--sa-spacing-sm, 8px);
289
+ gap: 8px;
284
290
  border-radius: var(--sa-dropdown-radius);
285
291
  overflow: hidden;
286
292
  flex-shrink: 0;
293
+ font-size: 14px;
294
+ transition: background-color 0.12s ease;
287
295
  }
288
- .sa-input-dropdwon-item:hover {
289
- background-color: color-mix(in srgb, var(--sa-dropdown-brand-subtle) 21%, transparent);
296
+ .sa-input-dropdwon-item.has-description {
297
+ min-height: 32px;
298
+ font-size: 12px;
299
+ }
300
+ .sa-input-dropdwon-item:hover:not(.sa-input-dropdwon-item-disable) {
301
+ background-color: var(--sa-dropdown-bg-hover);
290
302
  }
291
303
  .sa-input-dropdwon-item.active {
292
- background-color: color-mix(in srgb, var(--sa-dropdown-brand-subtle) 21%, transparent);
304
+ background-color: var(--sa-dropdown-bg-selected);
305
+ }
306
+ .sa-input-dropdwon-item.active:hover {
307
+ background-color: var(--sa-dropdown-bg-selected);
293
308
  }
294
309
  .sa-input-dropdwon-item.highlight {
295
- background-color: color-mix(in srgb, var(--sa-dropdown-brand-subtle) 35%, transparent);
296
- outline: 2px solid color-mix(in srgb, var(--sa-dropdown-brand-subtle) 40%, transparent);
297
- outline-offset: -2px;
310
+ background-color: var(--sa-dropdown-bg-selected);
311
+ outline: 1.2px solid var(--sa-dropdown-border-active);
312
+ outline-offset: -1.2px;
298
313
  }
299
314
  .sa-input-dropdwon-item-disable {
300
315
  color: var(--sa-dropdown-color-disable) !important;
301
316
  pointer-events: none;
317
+ cursor: not-allowed;
318
+ }
319
+
320
+ /* check indicator for selected items in single-select mode */
321
+ .sa-input-dropdwon-item-check {
322
+ flex-shrink: 0;
323
+ width: 20px;
324
+ height: 20px;
325
+ display: flex;
326
+ align-items: center;
327
+ justify-content: center;
328
+ color: var(--sa-dropdown-brand);
302
329
  }
303
330
 
304
331
  .sa-input-dropdwon-item-text {
@@ -308,27 +335,24 @@
308
335
  overflow: hidden;
309
336
  text-overflow: ellipsis;
310
337
  white-space: nowrap;
311
- }
312
- .sa-input-dropdwon-item-text.active {
313
- color: var(--sa-dropdown-brand);
338
+ line-height: normal;
314
339
  }
315
340
  .sa-input-dropdwon-item-text-description {
316
341
  color: var(--sa-dropdown-text-secondary);
317
- font-size: inherit;
342
+ font-size: 12px;
318
343
  font-weight: 400;
319
344
  overflow: hidden;
320
345
  text-overflow: ellipsis;
321
346
  white-space: nowrap;
322
- }
323
- .sa-input-dropdwon-item-text-description.active {
324
- color: var(--sa-dropdown-brand);
347
+ line-height: normal;
348
+ margin-top: 2px;
325
349
  }
326
350
 
327
351
  /* === FOOTER SLOT === */
328
352
  .sa-input-dropdown-footer {
329
353
  flex-shrink: 0;
330
354
  background: var(--sa-dropdown-bg);
331
- padding: var(--sa-spacing-sm, 8px);
355
+ padding: 8px;
332
356
  border-top: 0.8px solid var(--sa-dropdown-border-subtle);
333
357
  }
334
358
 
@@ -336,25 +360,27 @@
336
360
  .sa-select-field {
337
361
  display: flex;
338
362
  flex-direction: column;
339
- gap: 8px;
363
+ gap: 6px;
340
364
  width: 100%;
365
+ font-family: "Poppins", sans-serif;
341
366
  }
342
367
  .sa-select-field-left {
343
368
  flex-direction: row;
344
369
  align-items: flex-start;
370
+ gap: 16px;
345
371
  }
346
372
  .sa-select-field-left-label {
347
373
  display: flex;
348
374
  flex-direction: column;
349
- gap: 8px;
375
+ gap: 4px;
350
376
  flex: 0 0 auto;
351
- width: 50%;
352
- padding-top: 7px;
377
+ width: 35%;
378
+ padding-top: 8px;
353
379
  }
354
380
  .sa-select-field-input-wrap {
355
381
  display: flex;
356
382
  flex-direction: column;
357
- gap: 8px;
383
+ gap: 6px;
358
384
  flex: 1;
359
385
  min-width: 0;
360
386
  }
@@ -362,17 +388,17 @@
362
388
  .sa-select-field-label-row {
363
389
  display: flex;
364
390
  align-items: center;
365
- gap: 4px;
391
+ gap: 6px;
366
392
  flex-wrap: wrap;
367
393
  }
368
394
  .sa-select-field-label-text {
369
395
  font-size: 14px;
370
396
  font-weight: 500;
371
397
  color: var(--sa-dropdown-text-primary);
372
- line-height: 1;
398
+ line-height: 1.3;
373
399
  }
374
400
  .sa-select-field-left .sa-select-field-label-text {
375
- font-size: 12px;
401
+ font-size: 14px;
376
402
  }
377
403
  .sa-select-field-required {
378
404
  font-size: 14px;
@@ -380,48 +406,40 @@
380
406
  color: var(--sa-dropdown-text-error);
381
407
  line-height: 1;
382
408
  }
383
- .sa-select-field-left .sa-select-field-required {
384
- font-size: 12px;
385
- }
386
409
  .sa-select-field-optional-badge {
387
410
  display: inline-flex;
388
411
  align-items: center;
389
412
  justify-content: center;
390
- padding-inline: 8px;
391
- border: 1px solid var(--sa-dropdown-border-subtle);
413
+ padding: 0 6px;
414
+ border: 0.8px solid var(--sa-dropdown-border-subtle);
392
415
  border-radius: 4px;
393
- background-color: var(--sa-dropdown-bg-neutral);
416
+ background-color: transparent;
394
417
  font-size: 10px;
395
418
  font-weight: 500;
396
- color: var(--sa-dropdown-text-primary);
419
+ color: var(--sa-dropdown-text-secondary);
397
420
  line-height: 18px;
421
+ text-transform: lowercase;
398
422
  }
399
423
  .sa-select-field-helper-top {
400
424
  font-size: 12px;
401
425
  font-weight: 400;
402
426
  color: var(--sa-dropdown-text-secondary);
403
- line-height: 1.5;
404
- }
405
- .sa-select-field-left .sa-select-field-helper-top {
406
- font-size: 10px;
427
+ line-height: 1.4;
428
+ margin: 0;
407
429
  }
408
430
  .sa-select-field-helper {
409
431
  font-size: 12px;
410
432
  font-weight: 400;
411
433
  color: var(--sa-dropdown-text-secondary);
412
- line-height: 1.5;
413
- }
414
- .sa-select-field-left .sa-select-field-helper {
415
- font-size: 10px;
434
+ line-height: 1.4;
435
+ margin: 0;
416
436
  }
417
437
  .sa-select-field-error-msg {
418
438
  font-size: 12px;
419
439
  font-weight: 400;
420
440
  color: var(--sa-dropdown-text-error);
421
- line-height: 1.5;
422
- }
423
- .sa-select-field-left .sa-select-field-error-msg {
424
- font-size: 10px;
441
+ line-height: 1.4;
442
+ margin: 0;
425
443
  }
426
444
 
427
445
  /* === CHECKBOX === */
@@ -497,4 +515,4 @@
497
515
  height: 100%;
498
516
  width: 100%;
499
517
  }
500
- `;function G(e){const[p,t]=d.useState(e),i=d.useRef(null),o=r=>{i.current&&!i.current.contains(r.target)&&t(!1)};return d.useEffect(()=>(document.addEventListener("click",o,!0),()=>{document.removeEventListener("click",o,!0)}),[]),{ref:i,isComponentVisible:p,setIsComponentVisible:t}}const J=({...e})=>n.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",...e,viewBox:"0 0 20 20",fill:"none",children:[n.jsx("circle",{cx:"9.80547",cy:"9.8055",r:"7.49047",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"}),n.jsx("path",{d:"M15.0153 15.4043L17.9519 18.3333",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"})]}),M=({isChecked:e})=>n.jsxs("div",{className:"checkbox-wrapper-30",children:[n.jsxs("span",{className:"checkbox",children:[n.jsx("input",{type:"checkbox",style:{pointerEvents:"none"},checked:e}),n.jsx("svg",{children:n.jsx("use",{xlinkHref:"#checkbox-30",className:"checkbox"})})]}),n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",style:{display:"none"},children:n.jsx("symbol",{id:"checkbox-30",viewBox:"0 0 22 22",children:n.jsx("path",{fill:"none",stroke:"currentColor",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"})})})]}),U=d.forwardRef(({positionDropdown:e,dropdownLists:p,isComponentVisible:t,searchAble:i,onSearch:o,value:r,handleChangeValue:c,multiSelect:w,searchValue:m,highlightedIndex:f,footer:g,groupLabel:L,onSelectAll:I},O)=>{const z=d.useRef([]);d.useEffect(()=>{var a;f>=0&&z.current[f]&&((a=z.current[f])==null||a.scrollIntoView({block:"nearest"}))},[f]);const A=i?n.jsxs("div",{className:"sa-input-dropdown-container-dropdown-search",children:[n.jsx(J,{strokeWidth:2,width:16,style:{flexShrink:0,color:"var(--sa-dropdown-placeholder-subtle)"}}),n.jsx("input",{onChange:a=>{o&&o(a.target.value)},value:m,autoFocus:!0,placeholder:"Search..."})]}):null;return n.jsx(n.Fragment,{children:t?n.jsxs("div",{className:"sa-input-dropdown-lists-container",onClick:a=>a.stopPropagation(),ref:O,children:[e!=="top"&&A,n.jsxs("div",{className:`sa-input-dropdwon-item-container ${w?"multi":""}`,children:[L&&n.jsxs("div",{className:"sa-input-dropdown-section-header",children:[n.jsx("span",{className:"sa-input-dropdown-section-label",children:L}),w&&I&&n.jsx("button",{className:"sa-input-dropdown-section-select-all",onClick:a=>{a.stopPropagation(),I()},children:"Select all"})]}),p.map((a,S)=>{const E=!!(r!=null&&r.find(b=>b.value===a.value));return n.jsxs("div",{className:["sa-input-dropdwon-item",E?"active":"",S===f?"highlight":"",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),ref:b=>{z.current[S]=b},onClick:()=>c(a.label,a.value),children:[w&&n.jsx("div",{style:{flexShrink:0},children:n.jsx(M,{isChecked:E})}),a.icon&&n.jsx("div",{style:{flexShrink:0},children:d.cloneElement(a.icon,{width:16})}),n.jsxs("div",{style:{minWidth:0,flex:1},children:[n.jsx("p",{className:["sa-input-dropdwon-item-text",E?"active":"",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),children:a.label}),a.description&&n.jsx("p",{className:["sa-input-dropdwon-item-text-description",E?"active":"",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),children:a.description})]})]},S)})]}),e==="top"&&A,g&&n.jsx("div",{className:"sa-input-dropdown-footer",onClick:a=>a.stopPropagation(),children:g})]}):null})}),X=({children:e,handleChangePosition:p})=>{const t=d.useRef(null);d.useEffect(()=>{var c;const o=()=>{if(t.current){let w=t.current.parentElement;for(;w&&!i(w);)w=w.parentElement;w&&p()}};let r=(c=t.current)==null?void 0:c.parentElement;for(;r&&!i(r);)r=r.parentElement;return r&&r.addEventListener("scroll",o),o(),()=>{r&&r.removeEventListener("scroll",o)}},[]);const i=o=>o&&(o.scrollHeight>o.clientHeight||o.scrollWidth>o.clientWidth);return n.jsx("div",{ref:t,children:e})},T="sa-input-dropdown-styles";(e=>{if(!document.getElementById(T)){const p=document.createElement("style");p.id=T,p.textContent=e,document.head.appendChild(p)}})(K);const D=({dropdownLists:e,onChange:p,defaultValue:t,value:i,size:o="md",multiSelect:r,searchAble:c,iconLeft:w,placeholder:m,onSearch:f,error:g,onBlur:L,onFocus:I,disable:O,searchValue:z,variant:A="standard",footer:a,groupLabel:S,onSelectAll:E})=>{const b=i!==void 0,W=d.useRef(),[h,B]=d.useState(b?i||[]:t||[]),[nn,V]=d.useState(""),[x,F]=d.useState(-1),k=d.useRef(null),{isComponentVisible:y,ref:P,setIsComponentVisible:j}=G(!1),en=()=>{j(s=>!s)},H=(s,l)=>{if(r)if(h==null?void 0:h.find(v=>v.value===l)){const v=h.filter(an=>an.value!==l);b||B(v),p(v)}else{const v=[...h,{label:s,value:l}];b||B(v),p(v)}else{const N=[{label:s,value:l}];b||B(N),p(N),j(!1)}};d.useEffect(()=>{b&&B(i||[])},[i]),d.useEffect(()=>{b||JSON.stringify(W.current)===JSON.stringify(t)||(W.current=t,B(W.current||[]))},[t]);const rn=()=>h.length?r?h==null?void 0:h.map((s,l)=>n.jsxs("div",{className:"sa-input-dropdown-preview-item",children:[n.jsx("p",{style:{minWidth:"max-content"},children:s==null?void 0:s.label}),n.jsx(Q,{onClick:()=>H(s.label,s.value)})]},l)):n.jsx("p",{style:{minWidth:"max-content"},children:h==null?void 0:h[0].label}):n.jsx("p",{className:"sa-input-dropdown-placeholder",children:m}),C=()=>{if(P.current&&k.current){const s=window.innerHeight,l=P.current.getBoundingClientRect(),N=k.current.getBoundingClientRect(),v=l.bottom+N.height;k.current.style.left=`${l.left}px`,k.current.style.width=`${l.width}px`,v>=s-10?(k.current.style.top=`${l.top-N.height-5}px`,V("top")):(k.current.style.top=`${l.top+l.height+4}px`,V("bottom"))}};d.useEffect(()=>(window.addEventListener("scroll",C),window.addEventListener("resize",C),()=>{window.removeEventListener("scroll",C),window.removeEventListener("resize",C)}),[]),d.useEffect(()=>{C()},[y]),d.useEffect(()=>{y||F(-1)},[y]);const on=s=>{if(!y){(s.key==="ArrowDown"||s.key==="Enter")&&(s.preventDefault(),j(!0));return}switch(s.key){case"ArrowDown":{s.preventDefault();const l=$(e,x,1);l!==-1&&F(l);break}case"ArrowUp":{s.preventDefault();const l=$(e,x,-1);l!==-1&&F(l);break}case"Enter":{s.preventDefault(),x>=0&&e[x]&&!e[x].disable&&H(e[x].label,e[x].value);break}case"Escape":{j(!1);break}}},q=Z(o);return n.jsx(X,{handleChangePosition:C,children:n.jsxs("div",{className:["sa-input-dropdown-container",A,`sa-input-dropdown-size-${o}`,y?"active":"",g?"error":"",O?"disable":""].filter(Boolean).join(" "),ref:P,onClick:en,onKeyDown:on,tabIndex:0,onBlur:L,onFocus:I,children:[n.jsxs("div",{className:"sa-input-dropdown-preview-container",children:[w?n.jsx(n.Fragment,{children:d.cloneElement(w,{width:q,color:"var(--sa-dropdown-placeholder)",style:{color:"var(--sa-dropdown-placeholder)"}})}):null,n.jsx("div",{className:"sa-input-dropdown-container-preview-item",children:rn()}),y?n.jsx(_,{width:q}):n.jsx(Y,{width:q})]}),n.jsx(U,{dropdownLists:e,handleChangeValue:H,isComponentVisible:y,positionDropdown:nn,searchAble:!!c,value:h,onSearch:f,ref:k,multiSelect:r,searchValue:z,highlightedIndex:x,footer:a,groupLabel:S,onSelectAll:E})]})})},$=(e,p,t)=>{const i=e.length;let o=p+t;for(;o>=0&&o<i;){if(!e[o].disable)return o;o+=t}if(t===1){for(let r=0;r<i;r++)if(!e[r].disable)return r}else for(let r=i-1;r>=0;r--)if(!e[r].disable)return r;return-1},Z=e=>e==="lg"||e==="xl"?20:16,Q=e=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 18 18",fill:"none",...e,children:n.jsx("path",{d:"M12 6L6 12M6.00001 6L12 12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),Y=({width:e=16})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 16 16",fill:"none",style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0},children:n.jsx("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),_=({width:e=16})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 16 16",fill:"none",style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0},children:n.jsx("path",{d:"M4 10L8 6L12 10",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),R=({label:e,labelPosition:p="top",required:t,optional:i,helperText:o,helperTextTop:r,errorMessage:c,error:w,...m})=>{const f=w||!!c,g=e?n.jsxs("div",{className:"sa-select-field-label-row",children:[n.jsx("span",{className:"sa-select-field-label-text",children:e}),i&&n.jsx("span",{className:"sa-select-field-optional-badge",children:"Optional"}),t&&n.jsx("span",{className:"sa-select-field-required",children:"*"})]}):null;return p==="left"?n.jsxs("div",{className:"sa-select-field sa-select-field-left",children:[n.jsxs("div",{className:"sa-select-field-left-label",children:[g,r&&n.jsx("p",{className:"sa-select-field-helper-top",children:r})]}),n.jsxs("div",{className:"sa-select-field-input-wrap",children:[n.jsx(D,{...m,error:f}),o&&!c&&n.jsx("p",{className:"sa-select-field-helper",children:o}),c&&n.jsx("p",{className:"sa-select-field-error-msg",children:c})]})]}):n.jsxs("div",{className:"sa-select-field",children:[g,r&&n.jsx("p",{className:"sa-select-field-helper-top",children:r}),n.jsx(D,{...m,error:f}),o&&!c&&n.jsx("p",{className:"sa-select-field-helper",children:o}),c&&n.jsx("p",{className:"sa-select-field-error-msg",children:c})]})};u.Dropdown=D,u.SelectField=R,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
518
+ `;function Y(e){const[p,i]=s.useState(e),l=s.useRef(null),o=r=>{l.current&&!l.current.contains(r.target)&&i(!1)};return s.useEffect(()=>(document.addEventListener("click",o,!0),()=>{document.removeEventListener("click",o,!0)}),[]),{ref:l,isComponentVisible:p,setIsComponentVisible:i}}const _=({...e})=>n.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",...e,viewBox:"0 0 20 20",fill:"none",children:[n.jsx("circle",{cx:"9.80547",cy:"9.8055",r:"7.49047",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"}),n.jsx("path",{d:"M15.0153 15.4043L17.9519 18.3333",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"})]}),R=({width:e=16})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 16 16",fill:"none",children:n.jsx("path",{d:"M3.5 8L6.5 11L12.5 5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),nn=s.forwardRef(({positionDropdown:e,dropdownLists:p,isComponentVisible:i,searchAble:l,onSearch:o,value:r,handleChangeValue:y,multiSelect:h,searchValue:F,highlightedIndex:g,footer:I,groupLabel:A,onSelectAll:D},H)=>{const z=s.useRef([]);s.useEffect(()=>{var a;g>=0&&z.current[g]&&((a=z.current[g])==null||a.scrollIntoView({block:"nearest"}))},[g]);const O=l?n.jsxs("div",{className:"sa-input-dropdown-container-dropdown-search",children:[n.jsx(_,{strokeWidth:2,width:16,style:{flexShrink:0,color:"var(--sa-dropdown-placeholder-subtle)"}}),n.jsx("input",{onChange:a=>{o&&o(a.target.value)},value:F,autoFocus:!0,placeholder:"Search..."})]}):null;return n.jsx(n.Fragment,{children:i?n.jsxs("div",{className:"sa-input-dropdown-lists-container",onClick:a=>a.stopPropagation(),ref:H,children:[e!=="top"&&O,n.jsxs("div",{className:`sa-input-dropdwon-item-container ${h?"multi":""}`,children:[A&&n.jsxs("div",{className:"sa-input-dropdown-section-header",children:[n.jsx("span",{className:"sa-input-dropdown-section-label",children:A}),h&&D&&n.jsx("button",{className:"sa-input-dropdown-section-select-all",onClick:a=>{a.stopPropagation(),D()},children:"Select all"})]}),p.map((a,S)=>{const P=!!(r!=null&&r.find(L=>L.value===a.value)),B=!!a.description;return n.jsxs("div",{className:["sa-input-dropdwon-item",B?"has-description":"",P?"active":"",S===g?"highlight":"",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),ref:L=>{z.current[S]=L},onClick:()=>y(a.label,a.value),children:[h&&n.jsx("div",{className:"sa-input-dropdwon-item-check",children:P&&n.jsx(R,{width:16})}),a.icon&&n.jsx("div",{style:{flexShrink:0,display:"flex"},children:s.cloneElement(a.icon,{width:16})}),n.jsxs("div",{style:{minWidth:0,flex:1},children:[n.jsx("p",{className:["sa-input-dropdwon-item-text",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),children:a.label}),a.description&&n.jsx("p",{className:["sa-input-dropdwon-item-text-description",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),children:a.description})]})]},S)})]}),e==="top"&&O,I&&n.jsx("div",{className:"sa-input-dropdown-footer",onClick:a=>a.stopPropagation(),children:I})]}):null})}),en=({children:e,handleChangePosition:p})=>{const i=s.useRef(null);s.useEffect(()=>{var y;const o=()=>{if(i.current){let h=i.current.parentElement;for(;h&&!l(h);)h=h.parentElement;h&&p()}};let r=(y=i.current)==null?void 0:y.parentElement;for(;r&&!l(r);)r=r.parentElement;return r&&r.addEventListener("scroll",o),o(),()=>{r&&r.removeEventListener("scroll",o)}},[]);const l=o=>o&&(o.scrollHeight>o.clientHeight||o.scrollWidth>o.clientWidth);return n.jsx("div",{ref:i,children:e})},J="sa-input-dropdown-styles";(e=>{if(!document.getElementById(J)){const p=document.createElement("style");p.id=J,p.textContent=e,document.head.appendChild(p)}})(Q);const rn=({dropdownLists:e,onChange:p,defaultValue:i,value:l,size:o="md",multiSelect:r,searchAble:y,iconLeft:h,placeholder:F,onSearch:g,error:I,onBlur:A,onFocus:D,disable:H,searchValue:z,variant:O="outline",footer:a,groupLabel:S,onSelectAll:P,label:B,labelPosition:L="outside-top",required:T,optional:X,description:m,helperText:E,errorText:w})=>{const N=l!==void 0,M=s.useRef(),sn=I||!!w,[c,j]=s.useState(N?l||[]:i||[]),[tn,Z]=s.useState(""),[u,q]=s.useState(-1),v=s.useRef(null),{isComponentVisible:k,ref:$,setIsComponentVisible:W}=Y(!1),ln=()=>{W(d=>!d)},V=(d,t)=>{if(r)if(c==null?void 0:c.find(f=>f.value===t)){const f=c.filter(hn=>hn.value!==t);N||j(f),p(f)}else{const f=[...c,{label:d,value:t}];N||j(f),p(f)}else{const x=[{label:d,value:t}];N||j(x),p(x),W(!1)}};s.useEffect(()=>{N&&j(l||[])},[l]),s.useEffect(()=>{N||JSON.stringify(M.current)===JSON.stringify(i)||(M.current=i,j(M.current||[]))},[i]);const pn=()=>c.length?r?c==null?void 0:c.map((d,t)=>n.jsxs("div",{className:"sa-input-dropdown-preview-item",children:[n.jsx("p",{style:{minWidth:"max-content"},children:d==null?void 0:d.label}),n.jsx(on,{onClick:x=>{x.stopPropagation(),V(d.label,d.value)}})]},t)):n.jsx("p",{style:{minWidth:"max-content"},children:c==null?void 0:c[0].label}):n.jsx("p",{className:"sa-input-dropdown-placeholder",children:F}),C=()=>{if($.current&&v.current){const d=window.innerHeight,t=$.current.getBoundingClientRect(),x=v.current.getBoundingClientRect(),f=t.bottom+x.height;v.current.style.left=`${t.left}px`,v.current.style.width=`${t.width}px`,f>=d-10?(v.current.style.top=`${t.top-x.height-5}px`,Z("top")):(v.current.style.top=`${t.top+t.height+4}px`,Z("bottom"))}};s.useEffect(()=>(window.addEventListener("scroll",C),window.addEventListener("resize",C),()=>{window.removeEventListener("scroll",C),window.removeEventListener("resize",C)}),[]),s.useEffect(()=>{C()},[k]),s.useEffect(()=>{k||q(-1)},[k]);const cn=d=>{if(!k){(d.key==="ArrowDown"||d.key==="Enter")&&(d.preventDefault(),W(!0));return}switch(d.key){case"ArrowDown":{d.preventDefault();const t=U(e,u,1);t!==-1&&q(t);break}case"ArrowUp":{d.preventDefault();const t=U(e,u,-1);t!==-1&&q(t);break}case"Enter":{d.preventDefault(),u>=0&&e[u]&&!e[u].disable&&V(e[u].label,e[u].value);break}case"Escape":W(!1);break}},K=o==="lg"||o==="xl"?20:16,G=n.jsx(en,{handleChangePosition:C,children:n.jsxs("div",{className:["sa-input-dropdown-container",O,`sa-input-dropdown-size-${o}`,k?"active":"",sn?"error":"",H?"disable":""].filter(Boolean).join(" "),ref:$,onClick:ln,onKeyDown:cn,tabIndex:0,onBlur:A,onFocus:D,children:[n.jsxs("div",{className:"sa-input-dropdown-preview-container",children:[h?s.cloneElement(h,{width:K,style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0}}):null,n.jsx("div",{className:"sa-input-dropdown-container-preview-item",children:pn()}),k?n.jsx(dn,{width:K}):n.jsx(an,{width:K})]}),n.jsx(nn,{dropdownLists:e,handleChangeValue:V,isComponentVisible:k,positionDropdown:tn,searchAble:!!y,value:c,onSearch:g,ref:v,multiSelect:r,searchValue:z,highlightedIndex:u,footer:a,groupLabel:S,onSelectAll:P})]})});return B?L==="outside-left"?n.jsxs("div",{className:"sa-select-field sa-select-field-left",children:[n.jsxs("div",{className:"sa-select-field-left-label",children:[n.jsxs("div",{className:"sa-select-field-label-row",children:[n.jsx("span",{className:"sa-select-field-label-text",children:B}),X&&n.jsx("span",{className:"sa-select-field-optional-badge",children:"Optional"}),T&&n.jsx("span",{className:"sa-select-field-required",children:"*"})]}),m&&n.jsx("p",{className:"sa-select-field-helper-top",children:m})]}),n.jsxs("div",{className:"sa-select-field-input-wrap",children:[G,E&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:E}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]})]}):n.jsxs("div",{className:"sa-select-field",children:[n.jsxs("div",{className:"sa-select-field-label-row",children:[n.jsx("span",{className:"sa-select-field-label-text",children:B}),X&&n.jsx("span",{className:"sa-select-field-optional-badge",children:"Optional"}),T&&n.jsx("span",{className:"sa-select-field-required",children:"*"})]}),m&&n.jsx("p",{className:"sa-select-field-helper-top",children:m}),G,E&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:E}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]}):n.jsxs("div",{className:"sa-select-field",children:[m&&n.jsx("p",{className:"sa-select-field-helper-top",children:m}),G,E&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:E}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]})},U=(e,p,i)=>{const l=e.length;let o=p+i;for(;o>=0&&o<l;){if(!e[o].disable)return o;o+=i}if(i===1){for(let r=0;r<l;r++)if(!e[r].disable)return r}else for(let r=l-1;r>=0;r--)if(!e[r].disable)return r;return-1},on=e=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 18 18",fill:"none",style:{flexShrink:0,cursor:"pointer"},...e,children:n.jsx("path",{d:"M12 6L6 12M6.00001 6L12 12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),an=({width:e=16})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 16 16",fill:"none",style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0},children:n.jsx("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),dn=({width:e=16})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 16 16",fill:"none",style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0},children:n.jsx("path",{d:"M4 10L8 6L12 10",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})});b.Dropdown=rn,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})});
package/dist/index.d.ts CHANGED
@@ -1,3 +1,2 @@
1
1
  export { Dropdown } from "./Dropdown";
2
- export { SelectField } from "./SelectField";
3
2
  export * from "./interface";
package/dist/interface.d.ts CHANGED
@@ -1,6 +1,9 @@
1
1
  import React from "react";
2
2
  export interface IconPropsDropdown extends React.SVGProps<SVGSVGElement> {
3
3
  }
4
+ export type DropdownSize = "sm" | "md" | "lg" | "xl";
5
+ export type DropdownVariant = "standard" | "outline" | "flushed";
6
+ export type DropdownLabelPosition = "outside-top" | "outside-left";
4
7
  export interface IDropdown {
5
8
  onChange: (props: {
6
9
  label: string;
@@ -21,7 +24,7 @@ export interface IDropdown {
21
24
  label: string;
22
25
  value: string;
23
26
  }[];
24
- size?: "sm" | "md" | "lg" | "xl";
27
+ size?: DropdownSize;
25
28
  error?: boolean;
26
29
  multiSelect?: boolean;
27
30
  searchAble?: boolean;
@@ -33,17 +36,15 @@ export interface IDropdown {
33
36
  onFocus?: (e: React.FocusEvent<HTMLDivElement, Element>) => void;
34
37
  disable?: boolean;
35
38
  searchValue?: string;
36
- variant?: "standard" | "outline" | "flushed";
39
+ variant?: DropdownVariant;
37
40
  footer?: React.ReactNode;
38
41
  groupLabel?: string;
39
42
  onSelectAll?: () => void;
40
- }
41
- export interface ISelectField extends IDropdown {
42
- label?: string;
43
- labelPosition?: "top" | "left";
43
+ label?: React.ReactNode;
44
+ labelPosition?: DropdownLabelPosition;
44
45
  required?: boolean;
45
46
  optional?: boolean;
47
+ description?: string;
46
48
  helperText?: string;
47
- helperTextTop?: string;
48
- errorMessage?: string;
49
+ errorText?: string;
49
50
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@starasia/dropdown",
3
- "version": "3.2.0",
3
+ "version": "3.4.0",
4
4
  "description": "dropdown component for starasia UI",
5
5
  "author": "Prawito Hudoro",
6
6
  "main": "dist/dropdown.umd.js",
@@ -12,10 +12,6 @@
12
12
  "dist/*.map",
13
13
  "dist/*.css"
14
14
  ],
15
- "scripts": {
16
- "dev": "vite --config vite.config.ts --port 3000",
17
- "build": "vite build --config vite.config.ts"
18
- },
19
15
  "keywords": [],
20
16
  "license": "ISC",
21
17
  "type": "module",
@@ -37,5 +33,9 @@
37
33
  "react-dom": "^18.2.0",
38
34
  "@types/react": "^18.2.55",
39
35
  "@types/react-dom": "^18.2.19"
36
+ },
37
+ "scripts": {
38
+ "dev": "vite --config vite.config.ts --port 3000",
39
+ "build": "vite build --config vite.config.ts"
40
40
  }
41
- }
41
+ }
package/dist/SelectField.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import React from "react";
2
- import { ISelectField } from "./interface";
3
- export declare const SelectField: React.FC<ISelectField>;