draft-components 4.19.0 → 4.21.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.
- package/css/draft-components.css +205 -154
- package/dist/components/dialog/dialog.js +3 -3
- package/dist/components/menu/menu.js +3 -3
- package/dist/components/multi-select/multi-select.css +10 -0
- package/dist/components/multi-select/multi-select.d.ts +2 -1
- package/dist/components/multi-select/multi-select.js +7 -2
- package/dist/components/multi-select/multi-select.js.map +1 -1
- package/dist/components/popover/popover.js +3 -3
- package/dist/components/search-select/search-select.css +195 -155
- package/dist/components/search-select/search-select.d.ts +36 -37
- package/dist/components/search-select/search-select.js +196 -150
- package/dist/components/search-select/search-select.js.map +1 -1
- package/dist/components/textarea/textarea.css +3 -2
- package/dist/hooks/index.d.ts +1 -1
- package/dist/hooks/index.js +1 -1
- package/dist/hooks/{use-ref-callback.d.ts → use-callback-ref.d.ts} +1 -1
- package/dist/hooks/{use-ref-callback.js → use-callback-ref.js} +2 -2
- package/dist/hooks/{use-ref-callback.js.map → use-callback-ref.js.map} +1 -1
- package/dist/hooks/use-close-on-click-outside.js +3 -3
- package/dist/hooks/use-close-on-esc.js +2 -2
- package/dist/hooks/use-safe-ref.d.ts +2 -0
- package/dist/hooks/use-safe-ref.js +18 -0
- package/dist/hooks/use-safe-ref.js.map +1 -0
- package/package.json +1 -1
- package/dist/components/search-select/context.d.ts +0 -24
- package/dist/components/search-select/context.js +0 -48
- package/dist/components/search-select/context.js.map +0 -1
- package/dist/components/search-select/icons.d.ts +0 -3
- package/dist/components/search-select/icons.js +0 -9
- package/dist/components/search-select/icons.js.map +0 -1
package/css/draft-components.css
CHANGED
|
@@ -2948,6 +2948,7 @@
|
|
|
2948
2948
|
--padding-x: 12px;
|
|
2949
2949
|
--radius: 7px;
|
|
2950
2950
|
--color: var(--dc-neutral-900);
|
|
2951
|
+
--border-width: 1px;
|
|
2951
2952
|
--border-color: var(--dc-neutral-300);
|
|
2952
2953
|
--border-color-error: var(--dc-red-500);
|
|
2953
2954
|
--background: var(--dc-white);
|
|
@@ -2959,7 +2960,7 @@
|
|
|
2959
2960
|
width: auto;
|
|
2960
2961
|
min-width: 0;
|
|
2961
2962
|
max-width: 100%;
|
|
2962
|
-
min-height: calc(var(--leading) + var(--padding-y) * 2);
|
|
2963
|
+
min-height: calc(var(--leading) + var(--padding-y) * 2 + var(--border-width) * 2);
|
|
2963
2964
|
padding: var(--padding-y) var(--padding-x);
|
|
2964
2965
|
margin-top: 0;
|
|
2965
2966
|
margin-bottom: 0;
|
|
@@ -2969,7 +2970,7 @@
|
|
|
2969
2970
|
color: var(--color);
|
|
2970
2971
|
color-scheme: light;
|
|
2971
2972
|
background: var(--background);
|
|
2972
|
-
border:
|
|
2973
|
+
border: var(--border-width) solid var(--border-color);
|
|
2973
2974
|
border-radius: var(--radius);
|
|
2974
2975
|
}
|
|
2975
2976
|
|
|
@@ -3155,215 +3156,255 @@
|
|
|
3155
3156
|
color-scheme: dark;
|
|
3156
3157
|
}
|
|
3157
3158
|
|
|
3158
|
-
.dc-search-select
|
|
3159
|
+
.dc-search-select {
|
|
3160
|
+
--button-height: 36px;
|
|
3161
|
+
--button-padding-left: 12px;
|
|
3162
|
+
--button-slot-width: 32px;
|
|
3163
|
+
--button-font-size: 14px;
|
|
3164
|
+
--button-font-weight: 400;
|
|
3165
|
+
--button-line-height: 20px;
|
|
3166
|
+
--button-color: var(--dc-neutral-900);
|
|
3167
|
+
--button-background: var(--dc-white);
|
|
3168
|
+
--button-border-width: 1px;
|
|
3169
|
+
--button-border-style: solid;
|
|
3170
|
+
--button-border-color: var(--dc-neutral-300);
|
|
3171
|
+
--button-border-color-error: var(--dc-red-500);
|
|
3172
|
+
--button-border-radius: 7px;
|
|
3173
|
+
--button-focus-ring-color: var(--dc-focus-ring-color);
|
|
3174
|
+
--popup-min-width: 240px;
|
|
3175
|
+
--popup-max-width: 720px;
|
|
3176
|
+
--popup-offset: 4px;
|
|
3177
|
+
--popup-color: var(--dc-neutral-900);
|
|
3178
|
+
--popup-background: var(--dc-white);
|
|
3179
|
+
--popup-border-width: 1px;
|
|
3180
|
+
--popup-border-style: solid;
|
|
3181
|
+
--popup-border-color: var(--dc-neutral-300);
|
|
3182
|
+
--popup-border-radius: 7px;
|
|
3183
|
+
--popup-shadow:
|
|
3184
|
+
0 2px 4px 0 rgb(var(--dc-neutral-950-rgb) / 5%),
|
|
3185
|
+
0 2px 10px 0 rgb(var(--dc-neutral-950-rgb) / 10%);
|
|
3186
|
+
--input-padding: 8px 12px;
|
|
3187
|
+
--input-font-size: 14px;
|
|
3188
|
+
--input-font-weight: 400;
|
|
3189
|
+
--input-line-height: 1;
|
|
3190
|
+
--input-border-width: 1px;
|
|
3191
|
+
--input-border-style: solid;
|
|
3192
|
+
--input-border-color: var(--dc-neutral-300);
|
|
3193
|
+
--list-box-max-height: 256px;
|
|
3194
|
+
--list-box-padding: 4px;
|
|
3195
|
+
--option-padding: 4px 8px;
|
|
3196
|
+
--option-font: var(--dc-text-sm);
|
|
3197
|
+
--option-scroll-margin-block: 4px;
|
|
3198
|
+
--option-scroll-border-radius: 4px;
|
|
3199
|
+
--option-color: var(--dc-neutral-900);
|
|
3200
|
+
--option-background: none;
|
|
3201
|
+
--option-color-selected: var(--dc-neutral-950);
|
|
3202
|
+
--option-background-selected: rgb(var(--dc-neutral-950-rgb) / 12%);
|
|
3203
|
+
--option-color-checked: var(--dc-white);
|
|
3204
|
+
--option-background-checked: var(--dc-blue-500);
|
|
3205
|
+
--option-label-font: 600 var(--dc-text-sm);
|
|
3206
|
+
--option-label-color: inherit;
|
|
3207
|
+
--option-caption-font: var(--dc-text-sm);
|
|
3208
|
+
--option-caption-color: inherit;
|
|
3209
|
+
--empty-state-padding: 16px;
|
|
3210
|
+
--empty-state-font: var(--dc-text-sm);
|
|
3211
|
+
--empty-state-text-align: center;
|
|
3212
|
+
--empty-state-color: var(--dc-neutral-600);
|
|
3213
|
+
--empty-state-color-error: var(--dc-red-600);
|
|
3214
|
+
|
|
3215
|
+
position: relative;
|
|
3216
|
+
box-sizing: border-box;
|
|
3159
3217
|
display: inline-flex;
|
|
3160
|
-
|
|
3161
|
-
|
|
3218
|
+
font-family: var(--dc-primary-font);
|
|
3219
|
+
color-scheme: light;
|
|
3162
3220
|
}
|
|
3163
3221
|
|
|
3164
|
-
.dc-search-
|
|
3165
|
-
|
|
3222
|
+
.dc-search-select_full-width {
|
|
3223
|
+
display: flex;
|
|
3224
|
+
width: 100%;
|
|
3166
3225
|
}
|
|
3167
3226
|
|
|
3168
|
-
.dc-search-
|
|
3227
|
+
.dc-search-select__button {
|
|
3169
3228
|
box-sizing: border-box;
|
|
3170
3229
|
display: flex;
|
|
3171
|
-
|
|
3172
|
-
|
|
3173
|
-
|
|
3174
|
-
padding:
|
|
3175
|
-
font-size:
|
|
3176
|
-
|
|
3177
|
-
|
|
3230
|
+
align-items: center;
|
|
3231
|
+
width: 100%;
|
|
3232
|
+
height: var(--button-height);
|
|
3233
|
+
padding: 0;
|
|
3234
|
+
font-size: var(--button-font-size);
|
|
3235
|
+
font-weight: var(--button-font-weight);
|
|
3236
|
+
line-height: var(--button-line-height);
|
|
3237
|
+
color: var(--button-color);
|
|
3238
|
+
text-align: left;
|
|
3178
3239
|
cursor: default;
|
|
3179
|
-
|
|
3180
|
-
|
|
3181
|
-
|
|
3182
|
-
|
|
3183
|
-
color: var(--dc-neutral-900);
|
|
3184
|
-
background: var(--dc-neutral-300);
|
|
3240
|
+
background: var(--button-background);
|
|
3241
|
+
border: var(--button-border-width) var(--button-border-style)
|
|
3242
|
+
var(--button-border-color);
|
|
3243
|
+
border-radius: var(--button-border-radius);
|
|
3185
3244
|
}
|
|
3186
3245
|
|
|
3187
|
-
.
|
|
3188
|
-
color: var(--
|
|
3189
|
-
background: var(--dc-neutral-600);
|
|
3246
|
+
.dc-search-select__button[data-invalid="true"] {
|
|
3247
|
+
--button-border-color: var(--button-border-color-error);
|
|
3190
3248
|
}
|
|
3191
3249
|
|
|
3192
|
-
.dc-search-
|
|
3193
|
-
|
|
3194
|
-
|
|
3195
|
-
}
|
|
3196
|
-
|
|
3197
|
-
.dark .dc-search-select-option_selected {
|
|
3198
|
-
color: var(--dc-white);
|
|
3199
|
-
background: var(--dc-blue-500);
|
|
3200
|
-
}
|
|
3250
|
+
.dc-search-select__button:focus,
|
|
3251
|
+
.dc-search-select__button[aria-expanded="true"] {
|
|
3252
|
+
--button-border-color: var(--button-focus-ring-color);
|
|
3201
3253
|
|
|
3202
|
-
|
|
3203
|
-
font-size: 80%;
|
|
3204
|
-
opacity: 0.75;
|
|
3254
|
+
outline: 1px solid var(--button-focus-ring-color);
|
|
3205
3255
|
}
|
|
3206
3256
|
|
|
3207
|
-
.dc-search-
|
|
3208
|
-
|
|
3209
|
-
align-items: center;
|
|
3210
|
-
width: 100%;
|
|
3211
|
-
padding: 8px 0;
|
|
3257
|
+
.dc-search-select__button:disabled {
|
|
3258
|
+
opacity: var(--dc-disabled-state-opacity);
|
|
3212
3259
|
}
|
|
3213
3260
|
|
|
3214
|
-
.dc-search-
|
|
3215
|
-
|
|
3216
|
-
|
|
3217
|
-
|
|
3218
|
-
|
|
3219
|
-
|
|
3261
|
+
.dc-search-select__button_size_sm {
|
|
3262
|
+
--button-font-size: 13px;
|
|
3263
|
+
--button-height: 32px;
|
|
3264
|
+
--button-padding-left: 8px;
|
|
3265
|
+
--button-slot-width: 28px;
|
|
3266
|
+
--button-border-radius: 6px;
|
|
3220
3267
|
}
|
|
3221
3268
|
|
|
3222
|
-
.dc-search-
|
|
3223
|
-
|
|
3224
|
-
|
|
3269
|
+
.dc-search-select__button_size_lg {
|
|
3270
|
+
--button-font-size: 15px;
|
|
3271
|
+
--button-height: 40px;
|
|
3272
|
+
--button-padding-left: 16px;
|
|
3273
|
+
--button-slot-width: 40px;
|
|
3274
|
+
--button-border-radius: 8px;
|
|
3225
3275
|
}
|
|
3226
3276
|
|
|
3227
|
-
.dc-search-
|
|
3277
|
+
.dc-search-select__button-label {
|
|
3228
3278
|
flex-grow: 1;
|
|
3229
3279
|
}
|
|
3230
3280
|
|
|
3231
|
-
.
|
|
3232
|
-
|
|
3233
|
-
background: var(--dc-neutral-600);
|
|
3281
|
+
.dc-search-select__button-label:first-child {
|
|
3282
|
+
padding-left: var(--button-padding-left);
|
|
3234
3283
|
}
|
|
3235
3284
|
|
|
3236
|
-
.dc-search-
|
|
3237
|
-
padding: 0 8px;
|
|
3238
|
-
font-size: 12px;
|
|
3239
|
-
color: var(--dc-neutral-500);
|
|
3240
|
-
}
|
|
3241
|
-
|
|
3242
|
-
.dark .dc-search-select-separator__label {
|
|
3243
|
-
color: var(--dc-neutral-400);
|
|
3244
|
-
}
|
|
3245
|
-
|
|
3246
|
-
.dc-search-select {
|
|
3247
|
-
--font-size: 14px;
|
|
3248
|
-
--color: var(--dc-black-950);
|
|
3249
|
-
--height: 36px;
|
|
3250
|
-
--padding-x: 12px;
|
|
3251
|
-
--radius: 7px;
|
|
3252
|
-
--border-color: var(--dc-neutral-300);
|
|
3253
|
-
--border-color-error: var(--dc-red-500);
|
|
3254
|
-
--background: var(--dc-white);
|
|
3255
|
-
--focus-ring-color: var(--dc-focus-ring-color);
|
|
3256
|
-
|
|
3257
|
-
position: relative;
|
|
3258
|
-
box-sizing: border-box;
|
|
3285
|
+
.dc-search-select__button-slot {
|
|
3259
3286
|
display: inline-flex;
|
|
3287
|
+
flex-shrink: 0;
|
|
3260
3288
|
align-items: center;
|
|
3261
|
-
|
|
3262
|
-
|
|
3263
|
-
padding: 0 var(--padding-x);
|
|
3264
|
-
padding-right: calc(var(--height) + 0.15em);
|
|
3265
|
-
font-family: var(--dc-primary-font);
|
|
3266
|
-
font-size: var(--font-size);
|
|
3267
|
-
font-weight: 400;
|
|
3268
|
-
line-height: 1.25;
|
|
3269
|
-
vertical-align: middle;
|
|
3270
|
-
color: var(--color);
|
|
3271
|
-
color-scheme: light;
|
|
3272
|
-
background: var(--background);
|
|
3273
|
-
border: 1px solid var(--border-color);
|
|
3274
|
-
border-radius: var(--radius);
|
|
3289
|
+
justify-content: center;
|
|
3290
|
+
width: var(--button-slot-width);
|
|
3275
3291
|
}
|
|
3276
3292
|
|
|
3277
|
-
.dc-search-
|
|
3278
|
-
|
|
3279
|
-
|
|
3280
|
-
box-shadow: 0 0 0 1px var(--focus-ring-color);
|
|
3293
|
+
.dc-search-select__caret {
|
|
3294
|
+
opacity: 0.65;
|
|
3295
|
+
transform: translateY(10%);
|
|
3281
3296
|
}
|
|
3282
3297
|
|
|
3283
|
-
.dc-search-
|
|
3284
|
-
|
|
3285
|
-
|
|
3298
|
+
.dc-search-select__popup {
|
|
3299
|
+
position: absolute;
|
|
3300
|
+
top: 100%;
|
|
3301
|
+
left: 0;
|
|
3302
|
+
width: 100%;
|
|
3303
|
+
min-width: var(--popup-min-width);
|
|
3304
|
+
max-width: var(--popup-max-width);
|
|
3305
|
+
margin-top: var(--popup-offset);
|
|
3306
|
+
overflow: hidden;
|
|
3307
|
+
color: var(--popup-color);
|
|
3308
|
+
background: var(--popup-background);
|
|
3309
|
+
border: var(--popup-border-width) var(--popup-border-style)
|
|
3310
|
+
var(--popup-border-color);
|
|
3311
|
+
border-radius: var(--popup-border-radius);
|
|
3312
|
+
box-shadow: var(--popup-shadow);
|
|
3286
3313
|
}
|
|
3287
3314
|
|
|
3288
|
-
.dc-search-
|
|
3289
|
-
|
|
3315
|
+
.dc-search-select__input {
|
|
3316
|
+
box-sizing: border-box;
|
|
3317
|
+
width: 100%;
|
|
3318
|
+
padding: var(--input-padding);
|
|
3319
|
+
margin: 0;
|
|
3320
|
+
font-family: inherit;
|
|
3321
|
+
font-size: var(--input-font-size);
|
|
3322
|
+
font-weight: var(--input-font-weight);
|
|
3323
|
+
line-height: var(--input-line-height);
|
|
3324
|
+
-webkit-appearance: none;
|
|
3325
|
+
-moz-appearance: none;
|
|
3326
|
+
appearance: none;
|
|
3327
|
+
background: none;
|
|
3328
|
+
border: none;
|
|
3329
|
+
border-bottom: var(--input-border-width) var(--input-border-style)
|
|
3330
|
+
var(--input-border-color);
|
|
3290
3331
|
}
|
|
3291
3332
|
|
|
3292
|
-
.dc-search-
|
|
3293
|
-
|
|
3333
|
+
.dc-search-select__input::-moz-placeholder {
|
|
3334
|
+
color: inherit;
|
|
3335
|
+
opacity: 0.4;
|
|
3294
3336
|
}
|
|
3295
3337
|
|
|
3296
|
-
.dc-search-
|
|
3297
|
-
|
|
3298
|
-
|
|
3338
|
+
.dc-search-select__input::placeholder {
|
|
3339
|
+
color: inherit;
|
|
3340
|
+
opacity: 0.4;
|
|
3299
3341
|
}
|
|
3300
3342
|
|
|
3301
|
-
.dc-search-
|
|
3302
|
-
|
|
3303
|
-
--height: 32px;
|
|
3304
|
-
--padding-x: 8px;
|
|
3305
|
-
--radius: 6px;
|
|
3343
|
+
.dc-search-select__input:focus {
|
|
3344
|
+
outline: none;
|
|
3306
3345
|
}
|
|
3307
3346
|
|
|
3308
|
-
.dc-search-
|
|
3309
|
-
|
|
3310
|
-
--height: 40px;
|
|
3311
|
-
--padding-x: 16px;
|
|
3312
|
-
--radius: 8px;
|
|
3347
|
+
.dc-search-select__content {
|
|
3348
|
+
font: var(--dc-text-sm);
|
|
3313
3349
|
}
|
|
3314
3350
|
|
|
3315
|
-
.dc-search-
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3321
|
-
|
|
3322
|
-
|
|
3323
|
-
|
|
3324
|
-
|
|
3325
|
-
|
|
3351
|
+
.dc-search-select__list-box {
|
|
3352
|
+
box-sizing: border-box;
|
|
3353
|
+
display: grid;
|
|
3354
|
+
max-height: var(--list-box-max-height);
|
|
3355
|
+
padding: var(--list-box-padding);
|
|
3356
|
+
margin: 0;
|
|
3357
|
+
overflow-y: auto;
|
|
3358
|
+
overscroll-behavior: contain;
|
|
3359
|
+
contain: content;
|
|
3360
|
+
list-style: none;
|
|
3361
|
+
scrollbar-width: thin;
|
|
3326
3362
|
}
|
|
3327
3363
|
|
|
3328
|
-
.dc-search-
|
|
3329
|
-
|
|
3364
|
+
.dc-search-select__option {
|
|
3365
|
+
box-sizing: border-box;
|
|
3366
|
+
display: flex;
|
|
3367
|
+
flex-direction: column;
|
|
3368
|
+
padding: var(--option-padding);
|
|
3369
|
+
font: var(--option-font);
|
|
3370
|
+
color: var(--option-color);
|
|
3371
|
+
cursor: default;
|
|
3372
|
+
scroll-margin-top: var(--option-scroll-margin-block);
|
|
3373
|
+
scroll-margin-bottom: var(--option-scroll-margin-block);
|
|
3374
|
+
background: var(--option-background);
|
|
3375
|
+
border-radius: var(--option-scroll-border-radius);
|
|
3330
3376
|
}
|
|
3331
3377
|
|
|
3332
|
-
.dc-search-
|
|
3333
|
-
--
|
|
3334
|
-
--
|
|
3335
|
-
|
|
3336
|
-
padding: 0;
|
|
3337
|
-
padding-bottom: var(--popover-padding);
|
|
3338
|
-
border-radius: var(--popover-radius);
|
|
3378
|
+
.dc-search-select__option[aria-selected="true"] {
|
|
3379
|
+
color: var(--option-color-selected);
|
|
3380
|
+
background: var(--option-background-selected);
|
|
3339
3381
|
}
|
|
3340
3382
|
|
|
3341
|
-
.dc-search-
|
|
3342
|
-
|
|
3383
|
+
.dc-search-select__option[aria-checked="true"] {
|
|
3384
|
+
color: var(--option-color-checked);
|
|
3385
|
+
background: var(--option-background-checked);
|
|
3343
3386
|
}
|
|
3344
3387
|
|
|
3345
|
-
.dc-search-
|
|
3346
|
-
|
|
3347
|
-
|
|
3348
|
-
margin: 0;
|
|
3349
|
-
overflow-y: auto;
|
|
3350
|
-
list-style: none;
|
|
3351
|
-
border-bottom-right-radius: inherit;
|
|
3352
|
-
border-bottom-left-radius: inherit;
|
|
3388
|
+
.dc-search-select__option-label {
|
|
3389
|
+
font: var(--option-label-font);
|
|
3390
|
+
color: var(--option-label-color);
|
|
3353
3391
|
}
|
|
3354
3392
|
|
|
3355
|
-
.dc-search-
|
|
3356
|
-
|
|
3393
|
+
.dc-search-select__option-caption {
|
|
3394
|
+
font: var(--option-caption-font);
|
|
3395
|
+
color: var(--option-caption-color);
|
|
3357
3396
|
}
|
|
3358
3397
|
|
|
3359
|
-
.
|
|
3360
|
-
|
|
3361
|
-
|
|
3362
|
-
|
|
3363
|
-
|
|
3364
|
-
|
|
3398
|
+
.dc-search-select__empty-state {
|
|
3399
|
+
box-sizing: border-box;
|
|
3400
|
+
padding: var(--empty-state-padding);
|
|
3401
|
+
font: var(--empty-state-font);
|
|
3402
|
+
color: var(--empty-state-color);
|
|
3403
|
+
text-align: var(--empty-state-text-align);
|
|
3404
|
+
}
|
|
3365
3405
|
|
|
3366
|
-
|
|
3406
|
+
.dc-search-select__empty-state_error {
|
|
3407
|
+
color: var(--empty-state-color-error);
|
|
3367
3408
|
}
|
|
3368
3409
|
|
|
3369
3410
|
.dc-switch {
|
|
@@ -5778,6 +5819,16 @@
|
|
|
5778
5819
|
border-radius: inherit;
|
|
5779
5820
|
}
|
|
5780
5821
|
|
|
5822
|
+
.dc-multi-select__spinner {
|
|
5823
|
+
box-sizing: border-box;
|
|
5824
|
+
display: inline-flex;
|
|
5825
|
+
align-items: center;
|
|
5826
|
+
justify-content: center;
|
|
5827
|
+
min-width: 30px;
|
|
5828
|
+
height: 100%;
|
|
5829
|
+
aspect-ratio: 1 / 1;
|
|
5830
|
+
}
|
|
5831
|
+
|
|
5781
5832
|
.dc-multi-select__button {
|
|
5782
5833
|
box-sizing: border-box;
|
|
5783
5834
|
display: inline-flex;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
|
|
3
3
|
import { classNames, tryToFocusElement } from '../../lib/react-helpers.js';
|
|
4
|
-
import {
|
|
4
|
+
import { useCallbackRef } from '../../hooks/use-callback-ref.js';
|
|
5
5
|
import { useCloseOnEsc } from '../../hooks/use-close-on-esc.js';
|
|
6
6
|
import { useLockBodyScroll } from '../../hooks/use-lock-body-scroll.js';
|
|
7
7
|
import { useFocusTrap } from '../../hooks/use-focus-trap.js';
|
|
@@ -17,12 +17,12 @@ export function Dialog(props) {
|
|
|
17
17
|
const defaultId = useId();
|
|
18
18
|
const modalRef = useRef(null);
|
|
19
19
|
const backdropRef = useRef(null);
|
|
20
|
-
const close =
|
|
20
|
+
const close = useCallbackRef(() => {
|
|
21
21
|
if (typeof onClose === 'function') {
|
|
22
22
|
onClose();
|
|
23
23
|
}
|
|
24
24
|
});
|
|
25
|
-
const unmount =
|
|
25
|
+
const unmount = useCallbackRef(() => {
|
|
26
26
|
setIsMounted(false);
|
|
27
27
|
if (typeof onUnmount === 'function') {
|
|
28
28
|
onUnmount();
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { useId, useState, } from 'react';
|
|
3
3
|
import { classNames, tryToFocusElement } from '../../lib/react-helpers.js';
|
|
4
4
|
import { KeyboardKey } from '../../lib/keyboard-key.js';
|
|
5
|
-
import {
|
|
5
|
+
import { useCallbackRef } from '../../hooks/use-callback-ref.js';
|
|
6
6
|
import { Popover } from '../popover/index.js';
|
|
7
7
|
import { MenuItem } from './menu-item.js';
|
|
8
8
|
import { MenuSeparator } from './menu-separator.js';
|
|
@@ -11,13 +11,13 @@ export function Menu({ defaultIsOpen = false, shouldRenderBackdrop = false, plac
|
|
|
11
11
|
const menuId = props.id || id;
|
|
12
12
|
const buttonId = `menu-button-${menuId}`;
|
|
13
13
|
const [isOpen, setIsOpen] = useState(defaultIsOpen);
|
|
14
|
-
const open =
|
|
14
|
+
const open = useCallbackRef(() => {
|
|
15
15
|
setIsOpen(true);
|
|
16
16
|
if (typeof onOpen === 'function') {
|
|
17
17
|
onOpen();
|
|
18
18
|
}
|
|
19
19
|
});
|
|
20
|
-
const close =
|
|
20
|
+
const close = useCallbackRef(() => {
|
|
21
21
|
setIsOpen(false);
|
|
22
22
|
if (typeof onClose === 'function') {
|
|
23
23
|
onClose();
|
|
@@ -82,6 +82,16 @@
|
|
|
82
82
|
border-radius: inherit;
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
+
.dc-multi-select__spinner {
|
|
86
|
+
box-sizing: border-box;
|
|
87
|
+
display: inline-flex;
|
|
88
|
+
align-items: center;
|
|
89
|
+
justify-content: center;
|
|
90
|
+
min-width: 30px;
|
|
91
|
+
height: 100%;
|
|
92
|
+
aspect-ratio: 1 / 1;
|
|
93
|
+
}
|
|
94
|
+
|
|
85
95
|
.dc-multi-select__button {
|
|
86
96
|
box-sizing: border-box;
|
|
87
97
|
display: inline-flex;
|
|
@@ -16,7 +16,7 @@ export type MultiSelectMessages = {
|
|
|
16
16
|
noData?: ReactNode;
|
|
17
17
|
notFound?: ReactNode;
|
|
18
18
|
};
|
|
19
|
-
export declare function MultiSelect<IdType extends string | number, ItemType = unknown>({ style, className, size, inputId: defaultInputId, inputAriaLabel, chipTint, chipStyle, placeholder, noDataMessage, notFoundMessage, itemsLoadingMessage, items, itemsError, itemsLoading, invalid, disabled, selectedItemIds: checkedItemIds, onChangeSelectedItemIds: onChangeCheckedItemIds, filterItem, getItemId, getItemLabel, getItemCaption, onOpen, onClose, }: {
|
|
19
|
+
export declare function MultiSelect<IdType extends string | number, ItemType = unknown>({ style, className, size, inputId: defaultInputId, inputAriaLabel, chipTint, chipStyle, placeholder, noDataMessage, notFoundMessage, itemsLoadingMessage, items, itemsError, itemsLoading, loading, invalid, disabled, selectedItemIds: checkedItemIds, onChangeSelectedItemIds: onChangeCheckedItemIds, filterItem, getItemId, getItemLabel, getItemCaption, onOpen, onClose, }: {
|
|
20
20
|
style?: CSSProperties;
|
|
21
21
|
className?: string;
|
|
22
22
|
size?: MultiSelectSize;
|
|
@@ -31,6 +31,7 @@ export declare function MultiSelect<IdType extends string | number, ItemType = u
|
|
|
31
31
|
items: ItemType[];
|
|
32
32
|
itemsError?: ReactNode;
|
|
33
33
|
itemsLoading?: boolean;
|
|
34
|
+
loading?: boolean;
|
|
34
35
|
invalid?: boolean;
|
|
35
36
|
disabled?: boolean;
|
|
36
37
|
selectedItemIds: IdType[];
|
|
@@ -6,7 +6,7 @@ import { TextInput } from '../text-input/index.js';
|
|
|
6
6
|
import { Tag } from '../tag/index.js';
|
|
7
7
|
import { CheckIcon, ChevronDownIcon, XMarkIcon } from './icons.js';
|
|
8
8
|
import { getElementBoundingRect } from '../../lib/get-element-bounding-rect.js';
|
|
9
|
-
export function MultiSelect({ style, className, size = 'md', inputId: defaultInputId, inputAriaLabel, chipTint = 'blue', chipStyle = 'default', placeholder, noDataMessage = 'No data', notFoundMessage = 'Not found', itemsLoadingMessage = 'Loading...', items, itemsError, itemsLoading, invalid, disabled, selectedItemIds: checkedItemIds, onChangeSelectedItemIds: onChangeCheckedItemIds, filterItem, getItemId, getItemLabel, getItemCaption = () => undefined, onOpen, onClose, }) {
|
|
9
|
+
export function MultiSelect({ style, className, size = 'md', inputId: defaultInputId, inputAriaLabel, chipTint = 'blue', chipStyle = 'default', placeholder, noDataMessage = 'No data', notFoundMessage = 'Not found', itemsLoadingMessage = 'Loading...', items, itemsError, itemsLoading, loading, invalid, disabled, selectedItemIds: checkedItemIds, onChangeSelectedItemIds: onChangeCheckedItemIds, filterItem, getItemId, getItemLabel, getItemCaption = () => undefined, onOpen, onClose, }) {
|
|
10
10
|
const ref = useRef(null);
|
|
11
11
|
const id = useId();
|
|
12
12
|
const inputId = defaultInputId || `${id}-multi-select-input`;
|
|
@@ -183,7 +183,12 @@ export function MultiSelect({ style, className, size = 'md', inputId: defaultInp
|
|
|
183
183
|
return (_jsx(MultiSelectOption, { id: getOptionId(itemId), itemId: itemId, label: getItemLabel(item), caption: getItemCaption(item), checked: checkedItemIdSet.has(itemId), selected: selectedItemId === itemId, onCheck: toggleItem, onSelect: setSelectedItemId }, itemId));
|
|
184
184
|
});
|
|
185
185
|
}
|
|
186
|
-
return (_jsxs("div", { ref: ref, style: style, className: classNames('dc-multi-select', className), "data-expanded": expanded, children: [_jsxs("div", { className: "dc-multi-select__input-container", children: [_jsx(TextInput, { id: inputId, fullWidth: true, size: size, placeholder: placeholder, type: "text", role: "combobox", "aria-label": inputAriaLabel, "aria-expanded": expanded, "aria-controls": listBoxId, "aria-activedescendant": selectedItemId ? getOptionId(selectedItemId) : undefined, value: search, invalid: invalid, disabled: disabled, "data-1p-ignore": true, onClick: handleInputClick, onBlur: handleInputBlur, onChange: handleInputChange, onKeyDown: handleInputKeyDown, slotRight: () =>
|
|
186
|
+
return (_jsxs("div", { ref: ref, style: style, className: classNames('dc-multi-select', className), "data-expanded": expanded, children: [_jsxs("div", { className: "dc-multi-select__input-container", children: [_jsx(TextInput, { id: inputId, fullWidth: true, size: size, placeholder: placeholder, type: "text", role: "combobox", "aria-label": inputAriaLabel, "aria-expanded": expanded, "aria-controls": listBoxId, "aria-activedescendant": selectedItemId ? getOptionId(selectedItemId) : undefined, value: search, invalid: invalid, disabled: disabled, "data-1p-ignore": true, onClick: handleInputClick, onBlur: handleInputBlur, onChange: handleInputChange, onKeyDown: handleInputKeyDown, slotRight: () => {
|
|
187
|
+
if (loading) {
|
|
188
|
+
return (_jsx("span", { className: "dc-multi-select__spinner", children: _jsx(Spinner, { size: "1.25em" }) }));
|
|
189
|
+
}
|
|
190
|
+
return (_jsx("button", { id: buttonId, className: "dc-multi-select__button", type: "button", "aria-expanded": expanded, "aria-controls": listBoxId, tabIndex: -1, onPointerDown: handleButtonPress, children: _jsx(ChevronDownIcon, { "data-icon": "chevron-down", width: 20, height: 20 }) }));
|
|
191
|
+
} }), listBoxContent && (_jsx("ul", { id: listBoxId, className: "dc-multi-select__list-box", role: "listbox", children: listBoxContent }))] }), checkedItems.length > 0 && (_jsx("div", { className: "dc-multi-select__chips", children: checkedItems.map((item) => {
|
|
187
192
|
const itemId = getItemId(item);
|
|
188
193
|
return (_jsx(MultiSelectChip, { itemId: itemId, tint: chipTint, style: chipStyle, onDelete: toggleItem, children: getItemLabel(item) }, itemId));
|
|
189
194
|
}) }))] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multi-select.js","sourceRoot":"","sources":["../../../src/components/multi-select/multi-select.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,KAAK,EACL,MAAM,EACN,QAAQ,GAQT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAsChF,MAAM,UAAU,WAAW,CAAqD,EAC9E,KAAK,EACL,SAAS,EACT,IAAI,GAAG,IAAI,EACX,OAAO,EAAE,cAAc,EACvB,cAAc,EACd,QAAQ,GAAG,MAAM,EACjB,SAAS,GAAG,SAAS,EACrB,WAAW,EACX,aAAa,GAAG,SAAS,EACzB,eAAe,GAAG,WAAW,EAC7B,mBAAmB,GAAG,YAAY,EAClC,KAAK,EACL,UAAU,EACV,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,eAAe,EAAE,cAAc,EAC/B,uBAAuB,EAAE,sBAAsB,EAC/C,UAAU,EACV,SAAS,EACT,YAAY,EACZ,cAAc,GAAG,GAAG,EAAE,CAAC,SAAS,EAChC,MAAM,EACN,OAAO,
|
|
1
|
+
{"version":3,"file":"multi-select.js","sourceRoot":"","sources":["../../../src/components/multi-select/multi-select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ import { observeElementMove } from '../../lib/observe-element-move.js';
|
|
|
4
4
|
import { observeElementChange } from '../../lib/observe-element-change.js';
|
|
5
5
|
import { calcElementPosition } from '../../lib/calc-element-position.js';
|
|
6
6
|
import { deleteKeys } from '../../lib/helpers.js';
|
|
7
|
-
import {
|
|
7
|
+
import { useCallbackRef } from '../../hooks/use-callback-ref.js';
|
|
8
8
|
import { useFocusTrap } from '../../hooks/use-focus-trap.js';
|
|
9
9
|
import { useLockBodyScroll } from '../../hooks/use-lock-body-scroll.js';
|
|
10
10
|
import { useCloseOnEsc } from '../../hooks/use-close-on-esc.js';
|
|
@@ -24,12 +24,12 @@ export function Popover({ className, role = 'dialog', 'aria-modal': ariaModal =
|
|
|
24
24
|
else {
|
|
25
25
|
anchorRef = defaultAnchorRef;
|
|
26
26
|
}
|
|
27
|
-
const close =
|
|
27
|
+
const close = useCallbackRef(() => {
|
|
28
28
|
if (typeof onClose === 'function') {
|
|
29
29
|
onClose();
|
|
30
30
|
}
|
|
31
31
|
});
|
|
32
|
-
const unmount =
|
|
32
|
+
const unmount = useCallbackRef(() => {
|
|
33
33
|
setIsMounted(false);
|
|
34
34
|
if (typeof onUnmount === 'function') {
|
|
35
35
|
onUnmount();
|