@starasia/dropdown 1.0.7 → 2.0.1
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.
- package/dist/dropdown.es.js +215 -303
- package/dist/dropdown.umd.js +72 -160
- package/package.json +6 -6
package/dist/dropdown.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(h,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):(h=typeof globalThis<"u"?globalThis:h||self,n(h.Dropdown={},h.jsxRuntime,h.React))})(this,function(h,n,t){"use strict";const O=`@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;
|
|
@@ -6,129 +6,45 @@
|
|
|
6
6
|
box-sizing: border-box;
|
|
7
7
|
}
|
|
8
8
|
:root {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
--
|
|
14
|
-
--
|
|
15
|
-
--
|
|
16
|
-
|
|
17
|
-
--
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
);
|
|
21
|
-
--
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
);
|
|
25
|
-
--
|
|
26
|
-
|
|
27
|
-
rgba(209, 213, 219, 1)
|
|
28
|
-
);
|
|
29
|
-
--starasia-ui-dropdown-color-quaternary-gray: var(
|
|
30
|
-
--starasia-ui-color-gray-100,
|
|
31
|
-
rgba(243, 244, 246, 1)
|
|
32
|
-
);
|
|
33
|
-
--starasia-ui-dropdown-color-quinary-gray: var(
|
|
34
|
-
--starasia-ui-color-gray-50,
|
|
35
|
-
rgba(249, 250, 251, 1)
|
|
36
|
-
);
|
|
37
|
-
/* bg color */
|
|
38
|
-
--starasia-ui-dropdown-background-color-primary: var(
|
|
39
|
-
--starasia-ui-dropdown-color-secondary-blue,
|
|
40
|
-
rgba(59, 130, 246, 1)
|
|
41
|
-
);
|
|
42
|
-
--starasia-ui-dropdown-background-color-secondary: var(
|
|
43
|
-
--starasia-ui-dropdown-color-quinary-blue,
|
|
44
|
-
rgba(239, 246, 255, 1)
|
|
45
|
-
);
|
|
46
|
-
|
|
47
|
-
/* disalble color */
|
|
48
|
-
--starasia-ui-dropdown-color-disable: var(
|
|
49
|
-
--starasia-ui-dropdown-color-tertiary-gray,
|
|
50
|
-
rgba(209, 213, 219, 1)
|
|
51
|
-
);
|
|
52
|
-
|
|
53
|
-
/* border color */
|
|
54
|
-
--starasia-ui-dropdown-border-color-primary: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
55
|
-
--starasia-ui-dropdown-border-color-secondary: var(
|
|
56
|
-
--starasia-ui-color-gray-300,
|
|
57
|
-
rgba(209, 213, 219, 1)
|
|
58
|
-
);
|
|
59
|
-
--starasia-ui-dropdown-border-color-tertiary: rgba(120, 134, 127, 0.2);
|
|
60
|
-
|
|
61
|
-
--starasia-ui-dropdown-color-secondary-red: var(
|
|
62
|
-
--starasia-ui-color-red-500,
|
|
63
|
-
rgba(239, 68, 68, 1)
|
|
64
|
-
);
|
|
65
|
-
|
|
66
|
-
/* plachoder color */
|
|
67
|
-
--starasia-ui-dropdown-placholder-color: var(
|
|
68
|
-
--starasia-ui-color-gray-200,
|
|
69
|
-
rgba(201, 206, 204, 1)
|
|
70
|
-
);
|
|
71
|
-
|
|
72
|
-
/* white */
|
|
73
|
-
--starasia-ui-dropdown-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
|
|
74
|
-
/* disabled bg */
|
|
75
|
-
--starasia-ui-dropdown-color-disabled-bg: rgba(242, 243, 242, 1);
|
|
76
|
-
/* text colors */
|
|
77
|
-
--starasia-ui-dropdown-color-text-primary: rgba(24, 26, 25, 1);
|
|
78
|
-
--starasia-ui-dropdown-color-text-secondary: rgba(120, 134, 127, 1);
|
|
79
|
-
/* shadow */
|
|
80
|
-
--starasia-ui-dropdown-box-shadow-list: rgba(0, 0, 0, 0.08);
|
|
81
|
-
|
|
82
|
-
/* border width */
|
|
83
|
-
--starasia-ui-dropdown-border-width: var(--starasia-ui-border, 1px);
|
|
84
|
-
|
|
85
|
-
/* spacing */
|
|
86
|
-
--starasia-ui-dropdown-spacing-xs: var(--starasia-ui-spacing-xs, 4px);
|
|
87
|
-
--starasia-ui-dropdown-spacing-sm: var(--starasia-ui-spacing-sm, 8px);
|
|
88
|
-
|
|
89
|
-
/* shadow */
|
|
90
|
-
--starasia-ui-dropdown-box-shadow: 0px 0px 0px 2px rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.2);
|
|
91
|
-
|
|
92
|
-
/* below is for size,above is */
|
|
93
|
-
--starasia-ui-dropdown-fontWeight-normal: var(
|
|
94
|
-
--starasia-ui-fontWeights-normal,
|
|
95
|
-
300
|
|
96
|
-
);
|
|
97
|
-
/* dropdown size sm */
|
|
98
|
-
--starasia-ui-dropdown-height-sm: var(--starasia-ui-h-8, 32px);
|
|
99
|
-
--starasia-ui-dropdown-border-radius-sm: var(--starasia-ui-radii-md, 8px);
|
|
100
|
-
--starasia-ui-dropdown-padding-inline-sm: var(--starasia-ui-spacing-sm, 8px);
|
|
101
|
-
|
|
102
|
-
/* dropdown size md */
|
|
103
|
-
--starasia-ui-dropdown-height-md: 38px;
|
|
104
|
-
--starasia-ui-dropdown-border-radius-md: var(--starasia-ui-radii-md, 8px);
|
|
105
|
-
--starasia-ui-dropdown-padding-inline-md: var(--starasia-ui-spacing-3, 12px);
|
|
106
|
-
|
|
107
|
-
/* dropdown size lg */
|
|
108
|
-
--starasia-ui-dropdown-height-lg: var(--starasia-ui-h-12, 48px);
|
|
109
|
-
--starasia-ui-dropdown-border-radius-lg: var(--starasia-ui-radii-lg, 12px);
|
|
110
|
-
--starasia-ui-dropdown-padding-inline-lg: var(--starasia-ui-spacing-3, 12px);
|
|
9
|
+
--sa-dropdown-brand: var(--sa-background-brand, #04254f);
|
|
10
|
+
--sa-dropdown-brand-subtle: var(--sa-color-brand-50, #e6edf6);
|
|
11
|
+
--sa-dropdown-brand-secondary: var(--sa-color-brand-200, #99b3db);
|
|
12
|
+
--sa-dropdown-bg: var(--sa-background-primary, #ffffff);
|
|
13
|
+
--sa-dropdown-bg-disabled: rgba(242, 243, 242, 1);
|
|
14
|
+
--sa-dropdown-border: var(--sa-border, 1px);
|
|
15
|
+
--sa-dropdown-border-color: rgba(120, 134, 127, 0.2);
|
|
16
|
+
--sa-dropdown-border-active: var(--sa-background-brand, #04254f);
|
|
17
|
+
--sa-dropdown-border-search: var(--sa-color-gray-300, #dddee1);
|
|
18
|
+
--sa-dropdown-border-error: var(--sa-color-error-500, #ff4d6d);
|
|
19
|
+
--sa-dropdown-color-disable: var(--sa-color-gray-300, #dddee1);
|
|
20
|
+
--sa-dropdown-placeholder: var(--sa-color-gray-400, #b7b9be);
|
|
21
|
+
--sa-dropdown-text-primary: rgba(24, 26, 25, 1);
|
|
22
|
+
--sa-dropdown-text-secondary: rgba(120, 134, 127, 1);
|
|
23
|
+
--sa-dropdown-shadow-list: rgba(0, 0, 0, 0.08);
|
|
24
|
+
--sa-dropdown-shadow-focus: 0px 0px 0px 2px var(--sa-color-brand-200, #99b3db);
|
|
25
|
+
--sa-dropdown-radius: var(--sa-radii-md, 0.5rem);
|
|
26
|
+
--sa-dropdown-radius-lg: var(--sa-radii-lg, 0.75rem);
|
|
111
27
|
}
|
|
112
28
|
|
|
113
29
|
.starasia-input-dropdown-size-sm {
|
|
114
|
-
--baseFont: var(--
|
|
115
|
-
--height: var(--
|
|
116
|
-
--borderRadius: var(--
|
|
117
|
-
--paddingInline: var(--
|
|
30
|
+
--baseFont: var(--sa-font-size-sm, 12px);
|
|
31
|
+
--height: var(--sa-h-8, 32px);
|
|
32
|
+
--borderRadius: var(--sa-dropdown-radius);
|
|
33
|
+
--paddingInline: var(--sa-spacing-sm, 8px);
|
|
118
34
|
}
|
|
119
35
|
|
|
120
36
|
.starasia-input-dropdown-size-md {
|
|
121
|
-
--baseFont: var(--
|
|
122
|
-
--height:
|
|
123
|
-
--borderRadius: var(--
|
|
124
|
-
--paddingInline: var(--
|
|
37
|
+
--baseFont: var(--sa-font-size-md, 14px);
|
|
38
|
+
--height: 38px;
|
|
39
|
+
--borderRadius: var(--sa-dropdown-radius);
|
|
40
|
+
--paddingInline: var(--sa-spacing-3, 12px);
|
|
125
41
|
}
|
|
126
42
|
|
|
127
43
|
.starasia-input-dropdown-size-lg {
|
|
128
|
-
--baseFont: var(--
|
|
129
|
-
--height: var(--
|
|
130
|
-
--borderRadius: var(--
|
|
131
|
-
--paddingInline: var(--
|
|
44
|
+
--baseFont: var(--sa-font-size-lg, 16px);
|
|
45
|
+
--height: var(--sa-h-12, 48px);
|
|
46
|
+
--borderRadius: var(--sa-dropdown-radius-lg);
|
|
47
|
+
--paddingInline: var(--sa-spacing-3, 12px);
|
|
132
48
|
}
|
|
133
49
|
|
|
134
50
|
.starasia-input-dropdown-container {
|
|
@@ -137,32 +53,31 @@
|
|
|
137
53
|
padding-inline: var(--paddingInline);
|
|
138
54
|
display: flex;
|
|
139
55
|
align-items: center;
|
|
140
|
-
border: var(--
|
|
141
|
-
var(--starasia-ui-dropdown-border-color-tertiary);
|
|
56
|
+
border: var(--sa-dropdown-border) solid var(--sa-dropdown-border-color);
|
|
142
57
|
border-radius: var(--borderRadius);
|
|
143
|
-
background-color: var(--
|
|
58
|
+
background-color: var(--sa-dropdown-bg);
|
|
144
59
|
font-size: var(--baseFont);
|
|
145
60
|
cursor: pointer;
|
|
146
61
|
}
|
|
147
62
|
.starasia-input-dropdown-container.disable {
|
|
148
|
-
background-color: var(--
|
|
63
|
+
background-color: var(--sa-dropdown-bg-disabled);
|
|
149
64
|
cursor: not-allowed;
|
|
150
65
|
pointer-events: none;
|
|
151
66
|
}
|
|
152
67
|
|
|
153
68
|
.starasia-input-dropdown-container.error {
|
|
154
|
-
border-color: var(--
|
|
69
|
+
border-color: var(--sa-dropdown-border-error) !important;
|
|
155
70
|
}
|
|
156
71
|
.starasia-input-dropdown-container.active {
|
|
157
|
-
border-color: var(--
|
|
158
|
-
box-shadow: var(--
|
|
159
|
-
background-color: var(--
|
|
72
|
+
border-color: var(--sa-dropdown-border-active);
|
|
73
|
+
box-shadow: var(--sa-dropdown-shadow-focus);
|
|
74
|
+
background-color: var(--sa-dropdown-bg);
|
|
160
75
|
}
|
|
161
76
|
|
|
162
77
|
.starasia-input-dropdown-preview-container {
|
|
163
78
|
display: flex;
|
|
164
79
|
flex-direction: row;
|
|
165
|
-
gap: var(--
|
|
80
|
+
gap: var(--sa-spacing-sm, 8px);
|
|
166
81
|
align-items: center;
|
|
167
82
|
justify-content: space-between;
|
|
168
83
|
width: 100%;
|
|
@@ -173,12 +88,11 @@
|
|
|
173
88
|
/* position: absolute; */
|
|
174
89
|
position: fixed;
|
|
175
90
|
/* left: 0; */
|
|
176
|
-
padding: var(--
|
|
177
|
-
border: var(--
|
|
178
|
-
var(--starasia-ui-dropdown-border-color-tertiary);
|
|
91
|
+
padding: var(--sa-spacing-sm, 8px);
|
|
92
|
+
border: var(--sa-dropdown-border) solid var(--sa-dropdown-border-color);
|
|
179
93
|
border-radius: var(--borderRadius);
|
|
180
|
-
background-color: var(--
|
|
181
|
-
box-shadow: 0px 8px 12px 0px var(--
|
|
94
|
+
background-color: var(--sa-dropdown-bg);
|
|
95
|
+
box-shadow: 0px 8px 12px 0px var(--sa-dropdown-shadow-list);
|
|
182
96
|
max-height: 312px;
|
|
183
97
|
overflow-y: auto;
|
|
184
98
|
z-index: 999;
|
|
@@ -187,7 +101,7 @@
|
|
|
187
101
|
/* min-width: 100%; */
|
|
188
102
|
display: flex;
|
|
189
103
|
flex-direction: column;
|
|
190
|
-
gap: var(--
|
|
104
|
+
gap: var(--sa-spacing-sm, 8px);
|
|
191
105
|
/* overflow: hidden;
|
|
192
106
|
text-overflow: ellipsis;
|
|
193
107
|
white-space: nowrap; */
|
|
@@ -195,11 +109,11 @@
|
|
|
195
109
|
|
|
196
110
|
.starasia-input-dropdown-lists-container-bottom {
|
|
197
111
|
top: 100%;
|
|
198
|
-
margin-top: var(--
|
|
112
|
+
margin-top: var(--sa-spacing-xs, 4px);
|
|
199
113
|
}
|
|
200
114
|
.starasia-input-dropdown-lists-container-top {
|
|
201
115
|
bottom: 100%;
|
|
202
|
-
margin-bottom: var(--
|
|
116
|
+
margin-bottom: var(--sa-spacing-xs, 4px);
|
|
203
117
|
}
|
|
204
118
|
|
|
205
119
|
.starasia-input-dropdown-container-dropdown-search {
|
|
@@ -208,12 +122,11 @@
|
|
|
208
122
|
height: var(--height);
|
|
209
123
|
min-height: var(--height);
|
|
210
124
|
max-height: var(--height);
|
|
211
|
-
border: var(--
|
|
212
|
-
var(--starasia-ui-dropdown-border-color-secondary);
|
|
125
|
+
border: var(--sa-dropdown-border) solid var(--sa-dropdown-border-search);
|
|
213
126
|
border-radius: var(--borderRadius);
|
|
214
|
-
gap: var(--
|
|
127
|
+
gap: var(--sa-spacing-sm, 8px);
|
|
215
128
|
padding-inline: var(--paddingInline);
|
|
216
|
-
background: var(--
|
|
129
|
+
background: var(--sa-dropdown-bg);
|
|
217
130
|
& input {
|
|
218
131
|
flex: 1;
|
|
219
132
|
outline: none;
|
|
@@ -228,7 +141,7 @@
|
|
|
228
141
|
flex-direction: column;
|
|
229
142
|
/* overflow: hidden; */
|
|
230
143
|
|
|
231
|
-
/* gap: var(--
|
|
144
|
+
/* gap: var(--sa-spacing-xs, 0.25rem); */
|
|
232
145
|
}
|
|
233
146
|
.starasia-input-dropdwon-item-container.multi {
|
|
234
147
|
display: flex;
|
|
@@ -236,7 +149,7 @@
|
|
|
236
149
|
gap: 8px;
|
|
237
150
|
/* overflow: hidden; */
|
|
238
151
|
|
|
239
|
-
/* gap: var(--
|
|
152
|
+
/* gap: var(--sa-spacing-xs, 0.25rem); */
|
|
240
153
|
}
|
|
241
154
|
|
|
242
155
|
.starasia-input-dropdwon-item {
|
|
@@ -247,38 +160,38 @@
|
|
|
247
160
|
display: flex;
|
|
248
161
|
align-items: center;
|
|
249
162
|
cursor: pointer;
|
|
250
|
-
gap: var(--
|
|
163
|
+
gap: var(--sa-spacing-xs, 4px);
|
|
251
164
|
padding-block: var(--paddingInline);
|
|
252
|
-
border-radius: var(--
|
|
165
|
+
border-radius: var(--sa-dropdown-radius);
|
|
253
166
|
/* min-width: max-content; */
|
|
254
167
|
overflow: hidden;
|
|
255
168
|
}
|
|
256
169
|
|
|
257
170
|
.starasia-input-dropdwon-item:hover {
|
|
258
|
-
background-color:
|
|
171
|
+
background-color: color-mix(in srgb, var(--sa-dropdown-brand-secondary) 21%, transparent);
|
|
259
172
|
}
|
|
260
173
|
.starasia-input-dropdwon-item.active {
|
|
261
|
-
/* color: var(--
|
|
174
|
+
/* color: var(--sa-dropdown-brand); */
|
|
262
175
|
/* border-radius: var(--borderRadius); */
|
|
263
|
-
background-color:
|
|
264
|
-
/* background: var(--
|
|
176
|
+
background-color: color-mix(in srgb, var(--sa-dropdown-brand-secondary) 21%, transparent);
|
|
177
|
+
/* background: var(--sa-dropdown-brand-subtle); */
|
|
265
178
|
/* box-shadow: 0px 0px 0px -1px #f0f0f0; */
|
|
266
179
|
}
|
|
267
180
|
.starasia-input-dropdwon-item.highlight {
|
|
268
|
-
background-color:
|
|
269
|
-
outline: 2px solid
|
|
181
|
+
background-color: color-mix(in srgb, var(--sa-dropdown-brand-secondary) 35%, transparent);
|
|
182
|
+
outline: 2px solid color-mix(in srgb, var(--sa-dropdown-brand-secondary) 40%, transparent);
|
|
270
183
|
outline-offset: -2px;
|
|
271
184
|
}
|
|
272
185
|
|
|
273
186
|
.starasia-input-dropdwon-item-disable {
|
|
274
|
-
color: var(--
|
|
187
|
+
color: var(--sa-dropdown-color-disable) !important;
|
|
275
188
|
pointer-events: none;
|
|
276
189
|
}
|
|
277
190
|
|
|
278
191
|
.starasia-input-dropdown-container-preview-item {
|
|
279
192
|
flex: 1;
|
|
280
193
|
display: flex;
|
|
281
|
-
gap: var(--
|
|
194
|
+
gap: var(--sa-spacing-xs, 4px);
|
|
282
195
|
flex-wrap: wrap;
|
|
283
196
|
align-items: center;
|
|
284
197
|
overflow-y: auto;
|
|
@@ -286,12 +199,11 @@
|
|
|
286
199
|
}
|
|
287
200
|
|
|
288
201
|
.starasia-input-dropdown-preview-item {
|
|
289
|
-
border: var(--
|
|
290
|
-
var(--starasia-ui-dropdown-border-color-primary);
|
|
202
|
+
border: var(--sa-dropdown-border) solid var(--sa-dropdown-border-active);
|
|
291
203
|
padding-inline: var(--paddingInline);
|
|
292
204
|
border-radius: var(--borderRadius);
|
|
293
|
-
background-color: var(--
|
|
294
|
-
color: var(--
|
|
205
|
+
background-color: var(--sa-dropdown-brand-subtle);
|
|
206
|
+
color: var(--sa-dropdown-brand);
|
|
295
207
|
height: max-content;
|
|
296
208
|
font-size: var(--baseFont);
|
|
297
209
|
display: flex;
|
|
@@ -299,35 +211,35 @@
|
|
|
299
211
|
gap: 2;
|
|
300
212
|
}
|
|
301
213
|
.starasia-input-dropdown-placeholder {
|
|
302
|
-
color: var(--
|
|
303
|
-
font-weight: var(--
|
|
214
|
+
color: var(--sa-dropdown-placeholder);
|
|
215
|
+
font-weight: var(--sa-font-weight-normal, 300);
|
|
304
216
|
}
|
|
305
217
|
|
|
306
218
|
.starasia-input-dropdwon-item-text {
|
|
307
|
-
color: var(--
|
|
219
|
+
color: var(--sa-dropdown-text-primary);
|
|
308
220
|
/* font-size: 14px; */
|
|
309
221
|
font-size: inherit;
|
|
310
222
|
font-weight: 500;
|
|
311
223
|
}
|
|
312
224
|
.starasia-input-dropdwon-item-text.active {
|
|
313
|
-
color: var(--
|
|
225
|
+
color: var(--sa-dropdown-brand);
|
|
314
226
|
}
|
|
315
227
|
|
|
316
228
|
.starasia-input-dropdwon-item-text-description {
|
|
317
|
-
color: var(--
|
|
229
|
+
color: var(--sa-dropdown-text-secondary);
|
|
318
230
|
/* font-size: 14px; */
|
|
319
231
|
font-size: inherit;
|
|
320
232
|
font-weight: 400;
|
|
321
233
|
}
|
|
322
234
|
.starasia-input-dropdwon-item-text-description.active {
|
|
323
|
-
color: var(--
|
|
235
|
+
color: var(--sa-dropdown-brand);
|
|
324
236
|
}
|
|
325
237
|
|
|
326
238
|
/* for checkbox */
|
|
327
239
|
.checkbox-wrapper-30 .checkbox {
|
|
328
240
|
--bg: #fff;
|
|
329
241
|
--brdr: #d1d6ee;
|
|
330
|
-
--brdr-actv: var(--
|
|
242
|
+
--brdr-actv: var(--sa-background-brand, #04254f);
|
|
331
243
|
--brdr-hovr: #bbc1e1;
|
|
332
244
|
--dur: calc((var(--size, 2) / 2) * 0.6s);
|
|
333
245
|
display: inline-block;
|
|
@@ -399,4 +311,4 @@
|
|
|
399
311
|
height: 100%;
|
|
400
312
|
width: 100%;
|
|
401
313
|
}
|
|
402
|
-
`;function
|
|
314
|
+
`;function H(e){const[p,d]=t.useState(e),c=t.useRef(null),a=o=>{c.current&&!c.current.contains(o.target)&&d(!1)};return t.useEffect(()=>(document.addEventListener("click",a,!0),()=>{document.removeEventListener("click",a,!0)}),[]),{ref:c,isComponentVisible:p,setIsComponentVisible:d}}const V=({...e})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",...e,viewBox:"0 0 24 24",fill:"none",color:"var(--sa-color-gray-500, #8c8f97)",children:n.jsx("path",{d:"M4 9L12 17L20 9",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5})}),M=({...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"})]}),P=({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"})})})]}),q=t.forwardRef(({positionDropdown:e,dropdownLists:p,isComponentVisible:d,searchAble:c,onSearch:a,value:o,handleChangeValue:v,multiSelect:l,searchValue:B,highlightedIndex:f},$)=>{const[z,N]=t.useState(0),k=t.useRef(null),g=t.useRef([]);return t.useEffect(()=>{if(k.current){const r=k.current.getBoundingClientRect();N(r.width)}},[k,d]),t.useEffect(()=>{var r;f>=0&&g.current[f]&&((r=g.current[f])==null||r.scrollIntoView({block:"nearest"}))},[f]),n.jsx(n.Fragment,{children:d?n.jsxs("div",{className:"starasia-input-dropdown-lists-container",onClick:r=>r.stopPropagation(),ref:$,children:[c?n.jsxs("div",{className:"starasia-input-dropdown-container-dropdown-search",style:{order:e=="bottom"?0:2,position:"sticky",top:0,bottom:0,zIndex:1},children:[n.jsx("div",{style:{display:"flex"},children:n.jsx(M,{strokeWidth:2,width:20})}),n.jsx("input",{onChange:r=>{a&&a(r.target.value)},value:B,autoFocus:!0,style:{width:"100%"}})]}):null,n.jsx("div",{className:`starasia-input-dropdwon-item-container ${l?"multi":""}`,ref:k,children:p.map((r,b)=>{const m=!!(o!=null&&o.find(y=>y.value===r.value));return n.jsxs("div",{className:`starasia-input-dropdwon-item ${m?"active":""} ${b===f?"highlight":""} ${r.disable?"starasia-input-dropdwon-item-disable":""}`,ref:y=>{g.current[b]=y},onClick:()=>v(r.label,r.value),children:[l?n.jsx("div",{style:{marginRight:"8px"},children:n.jsx(P,{isChecked:m})}):null,r.icon?n.jsx("div",{children:t.cloneElement(r.icon,{width:16})}):null,n.jsxs("div",{children:[n.jsx("p",{className:`starasia-input-dropdwon-item-text ${m?"active":null} ${r.disable?"starasia-input-dropdwon-item-disable":null}`,style:{textWrap:"nowrap",width:`${z-12}px`,overflow:"hidden",textOverflow:"ellipsis"},children:r.label}),r.description?n.jsx("p",{className:`starasia-input-dropdwon-item-text-description ${m?"active":null} ${r.disable?"starasia-input-dropdwon-item-disable":null}`,style:{textWrap:"nowrap",width:`${z-12}px`,overflow:"hidden",textOverflow:"ellipsis"},children:r.description}):null]})]},b)})})]}):null})}),T=({children:e,handleChangePosition:p})=>{const d=t.useRef(null);t.useEffect(()=>{var v;const a=()=>{if(d.current){let l=d.current.parentElement;for(;l&&!c(l);)l=l.parentElement;l&&p()}};let o=(v=d.current)==null?void 0:v.parentElement;for(;o&&!c(o);)o=o.parentElement;return o&&o.addEventListener("scroll",a),a(),()=>{o&&o.removeEventListener("scroll",a)}},[]);const c=a=>a&&(a.scrollHeight>a.clientHeight||a.scrollWidth>a.clientWidth);return n.jsx("div",{ref:d,children:e})},S="starasia-input-dropdown-styles";(e=>{if(!document.getElementById(S)){const p=document.createElement("style");p.id=S,p.textContent=e,document.head.appendChild(p)}})(O);const J=({dropdownLists:e,onChange:p,defaultValue:d,size:c="md",multiSelect:a,searchAble:o,iconLeft:v,placeholder:l,onSearch:B,error:f,onBlur:$,onFocus:z,disable:N,searchValue:k})=>{const g=t.useRef(),[r,b]=t.useState([]),[m,y]=t.useState(""),[u,D]=t.useState(-1),x=t.useRef(null),{isComponentVisible:C,ref:L,setIsComponentVisible:I}=H(!1),U=()=>{I(s=>!s)},W=(s,i)=>{if(!a)b([{label:s,value:i}]),p([{label:s,value:i}]),I(!1);else if(r==null?void 0:r.find(w=>w.value===i)){const w=[...r?r.filter(X=>X.value!==i):[]];b(w),p(w)}else{const w=[...r||[],{label:s,value:i}];b(w),p(w)}};t.useEffect(()=>{JSON.stringify(g.current)===JSON.stringify(d)||(g.current=d,b(g.current||[]))},[d]);const G=()=>r.length?a?r==null?void 0:r.map((s,i)=>n.jsxs("div",{className:"starasia-input-dropdown-preview-item",children:[n.jsx("p",{style:{minWidth:"max-content"},children:s==null?void 0:s.label},i),n.jsx(K,{onClick:()=>W(s.label,s.value)})]})):n.jsx("p",{style:{minWidth:"max-content"},children:r==null?void 0:r[0].label}):n.jsx("p",{className:"starasia-input-dropdown-placeholder",children:l}),E=()=>{if(L.current&&x.current){const s=window.innerHeight,i=L.current.getBoundingClientRect(),j=x.current.getBoundingClientRect(),w=i.bottom+j.height;x.current.style.left=`${i.left}px`,x.current.style.width=`${i.width}px`,w>=s-10?(x.current.style.top=`${i.top-j.height-5}px`,y("top")):(x.current.style.top=`${i.top+i.height}px`,y("bottom"))}};t.useEffect(()=>(window.addEventListener("scroll",E),window.addEventListener("resize",E),()=>{window.removeEventListener("scroll",E),window.removeEventListener("resize",E)}),[]),t.useEffect(()=>{E()},[C]),t.useEffect(()=>{C||D(-1)},[C]);const Q=s=>{if(!C){(s.key==="ArrowDown"||s.key==="Enter")&&(s.preventDefault(),I(!0));return}switch(s.key){case"ArrowDown":{s.preventDefault();const i=A(e,u,1);i!==-1&&D(i);break}case"ArrowUp":{s.preventDefault();const i=A(e,u,-1);i!==-1&&D(i);break}case"Enter":{s.preventDefault(),u>=0&&e[u]&&!e[u].disable&&W(e[u].label,e[u].value);break}case"Escape":{I(!1);break}}};return n.jsx(T,{handleChangePosition:E,children:n.jsxs("div",{className:`starasia-input-dropdown-container ${N?"disable":""} starasia-input-dropdown-size-${c} ${C?"active":""} ${f?"error":""}`,ref:L,onClick:U,onKeyDown:Q,tabIndex:0,onBlur:$,onFocus:z,children:[n.jsxs("div",{className:"starasia-input-dropdown-preview-container",children:[v?n.jsx(n.Fragment,{children:t.cloneElement(v,{width:F(c),color:"var(--sa-color-gray-500, #8c8f97)",style:{color:"var(--sa-color-gray-500, #8c8f97)"}})}):null,n.jsx("div",{className:"starasia-input-dropdown-container-preview-item",children:G()}),n.jsx(V,{strokeWidth:2,width:F(c),style:{color:"var(--sa-color-gray-500, #8c8f97)"}})]}),n.jsx(q,{dropdownLists:e,handleChangeValue:W,isComponentVisible:C,positionDropdown:m,searchAble:!!o,value:r,onSearch:B,ref:x,multiSelect:a,searchValue:k,highlightedIndex:u})]})})},A=(e,p,d)=>{const c=e.length;let a=p+d;for(;a>=0&&a<c;){if(!e[a].disable)return a;a+=d}if(d===1){for(let o=0;o<c;o++)if(!e[o].disable)return o}else for(let o=c-1;o>=0;o--)if(!e[o].disable)return o;return-1},F=e=>{if(e==="sm")return 16;if(e==="md")return 16;if(e==="lg")return 20},K=e=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",...e,children:n.jsx("path",{d:"M12 6L6 12M6.00001 6L12 12",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})});h.Dropdown=J,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@starasia/dropdown",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"description": "dropdown component for starasia UI",
|
|
5
5
|
"author": "Prawito Hudoro",
|
|
6
6
|
"main": "dist/dropdown.umd.js",
|
|
@@ -12,6 +12,10 @@
|
|
|
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
|
+
},
|
|
15
19
|
"keywords": [],
|
|
16
20
|
"license": "ISC",
|
|
17
21
|
"type": "module",
|
|
@@ -33,9 +37,5 @@
|
|
|
33
37
|
"react-dom": "^18.2.0",
|
|
34
38
|
"@types/react": "^18.2.55",
|
|
35
39
|
"@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
|
+
}
|