@box/blueprint-web 12.90.0 → 12.91.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/dist/lib-esm/combobox/combobox.module.js +1 -1
- package/dist/lib-esm/ghost/ghost.js +19 -12
- package/dist/lib-esm/ghost/ghost.module.js +1 -1
- package/dist/lib-esm/index.css +73 -55
- package/dist/lib-esm/split-button/split-button.d.ts +2 -0
- package/dist/lib-esm/split-button/split-button.js +2 -0
- package/dist/lib-esm/split-button/types.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"container":"bp_combobox_module_container--
|
|
2
|
+
var styles = {"container":"bp_combobox_module_container--80c88","label":"bp_combobox_module_label--80c88","textInput":"bp_combobox_module_textInput--80c88","popover":"bp_combobox_module_popover--80c88","disabled":"bp_combobox_module_disabled--80c88","hiddenLabel":"bp_combobox_module_hiddenLabel--80c88","comboboxContainer":"bp_combobox_module_comboboxContainer--80c88","withComboboxButtons":"bp_combobox_module_withComboboxButtons--80c88","error":"bp_combobox_module_error--80c88","textInputWrapper":"bp_combobox_module_textInputWrapper--80c88","errorIcon":"bp_combobox_module_errorIcon--80c88","comboboxButtons":"bp_combobox_module_comboboxButtons--80c88","withChips":"bp_combobox_module_withChips--80c88","inlineError":"bp_combobox_module_inlineError--80c88","option":"bp_combobox_module_option--80c88","indicator":"bp_combobox_module_indicator--80c88","indicatorIcon":"bp_combobox_module_indicatorIcon--80c88","optionWithIndicator":"bp_combobox_module_optionWithIndicator--80c88","loadingIndicator":"bp_combobox_module_loadingIndicator--80c88","noResultOption":"bp_combobox_module_noResultOption--80c88"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
|
+
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
3
4
|
import styles from './ghost.module.js';
|
|
4
5
|
|
|
5
6
|
/**
|
|
@@ -20,18 +21,24 @@ const Ghost = ({
|
|
|
20
21
|
borderRadius,
|
|
21
22
|
style = {},
|
|
22
23
|
...rest
|
|
23
|
-
}) =>
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
})
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
24
|
+
}) => {
|
|
25
|
+
const {
|
|
26
|
+
enableModernizedComponents
|
|
27
|
+
} = useBlueprintModernization();
|
|
28
|
+
return jsx("span", {
|
|
29
|
+
className: clsx(className, styles.ghost, {
|
|
30
|
+
[styles[variant]]: !!variant
|
|
31
|
+
}),
|
|
32
|
+
"data-modern": enableModernizedComponents,
|
|
33
|
+
style: {
|
|
34
|
+
height,
|
|
35
|
+
width,
|
|
36
|
+
borderRadius,
|
|
37
|
+
...style
|
|
38
|
+
},
|
|
39
|
+
...rest
|
|
40
|
+
});
|
|
41
|
+
};
|
|
35
42
|
Ghost.displayName = 'Ghost';
|
|
36
43
|
|
|
37
44
|
export { Ghost };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"ghost":"bp_ghost_module_ghost--
|
|
2
|
+
var styles = {"ghost":"bp_ghost_module_ghost--d6cc7","ghost-keyframes":"bp_ghost_module_ghost-keyframes--d6cc7","circle":"bp_ghost_module_circle--d6cc7","pill":"bp_ghost_module_pill--d6cc7","rectangle":"bp_ghost_module_rectangle--d6cc7"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
package/dist/lib-esm/index.css
CHANGED
|
@@ -1,34 +1,52 @@
|
|
|
1
|
-
.bp_ghost_module_ghost--
|
|
2
|
-
|
|
3
|
-
background-color:var(--surface-surface-
|
|
4
|
-
border-radius:var(--radius-1);
|
|
1
|
+
.bp_ghost_module_ghost--d6cc7[data-modern=false]{
|
|
2
|
+
--ghost-background-color:var(--surface-surface-hover);
|
|
3
|
+
--ghost-background-color-secondary:var(--surface-surface-secondary);
|
|
4
|
+
--ghost-border-radius:var(--radius-1);
|
|
5
|
+
--ghost-border-radius-half:var(--radius-half);
|
|
6
|
+
--ghost-space-5:var(--space-5);
|
|
7
|
+
--ghost-space-6:var(--space-6);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.bp_ghost_module_ghost--d6cc7[data-modern=true]{
|
|
11
|
+
--ghost-background-color:var(--bp-surface-ghost-surface);
|
|
12
|
+
--ghost-background-color-secondary:var(--bp-surface-ghost-surface-secondary);
|
|
13
|
+
--ghost-border-radius:var(--bp-radius-02);
|
|
14
|
+
--ghost-border-radius-half:var(--bp-radius-16);
|
|
15
|
+
--ghost-space-5:var(--bp-space-050);
|
|
16
|
+
--ghost-space-6:var(--bp-space-060);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.bp_ghost_module_ghost--d6cc7{
|
|
20
|
+
animation:bp_ghost_module_ghost-keyframes--d6cc7 1.2s ease-in-out infinite;
|
|
21
|
+
background-color:var(--ghost-background-color);
|
|
22
|
+
border-radius:var(--ghost-border-radius);
|
|
5
23
|
display:inline-block;
|
|
6
24
|
}
|
|
7
|
-
.bp_ghost_module_ghost--
|
|
25
|
+
.bp_ghost_module_ghost--d6cc7.bp_ghost_module_circle--d6cc7{
|
|
8
26
|
border-radius:50%;
|
|
9
|
-
min-height:var(--space-6);
|
|
10
|
-
min-width:var(--space-6);
|
|
27
|
+
min-height:var(--ghost-space-6);
|
|
28
|
+
min-width:var(--ghost-space-6);
|
|
11
29
|
}
|
|
12
|
-
.bp_ghost_module_ghost--
|
|
13
|
-
border-radius:var(--radius-half);
|
|
14
|
-
height:var(--space-5);
|
|
30
|
+
.bp_ghost_module_ghost--d6cc7.bp_ghost_module_pill--d6cc7{
|
|
31
|
+
border-radius:var(--ghost-border-radius-half);
|
|
32
|
+
height:var(--ghost-space-5);
|
|
15
33
|
width:100%;
|
|
16
34
|
}
|
|
17
|
-
.bp_ghost_module_ghost--
|
|
18
|
-
border-radius:var(--radius
|
|
19
|
-
height:var(--space-5);
|
|
35
|
+
.bp_ghost_module_ghost--d6cc7.bp_ghost_module_rectangle--d6cc7{
|
|
36
|
+
border-radius:var(--ghost-border-radius);
|
|
37
|
+
height:var(--ghost-space-5);
|
|
20
38
|
width:100%;
|
|
21
39
|
}
|
|
22
40
|
|
|
23
|
-
@keyframes bp_ghost_module_ghost-keyframes--
|
|
41
|
+
@keyframes bp_ghost_module_ghost-keyframes--d6cc7{
|
|
24
42
|
0%{
|
|
25
|
-
background-color:var(--
|
|
43
|
+
background-color:var(--ghost-background-color);
|
|
26
44
|
}
|
|
27
45
|
50%{
|
|
28
|
-
background-color:var(--
|
|
46
|
+
background-color:var(--ghost-background-color-secondary);
|
|
29
47
|
}
|
|
30
48
|
100%{
|
|
31
|
-
background-color:var(--
|
|
49
|
+
background-color:var(--ghost-background-color);
|
|
32
50
|
}
|
|
33
51
|
}
|
|
34
52
|
.bp_base_inline_notice_module_noticeWrapper--1c117[data-modern=false]{
|
|
@@ -2936,7 +2954,7 @@
|
|
|
2936
2954
|
margin-block-start:var(--text-area-container-row-gap);
|
|
2937
2955
|
}
|
|
2938
2956
|
|
|
2939
|
-
.bp_combobox_module_container--
|
|
2957
|
+
.bp_combobox_module_container--80c88[data-modern=false]{
|
|
2940
2958
|
--max-lines:3;
|
|
2941
2959
|
--input-height:var(--space-5);
|
|
2942
2960
|
--chip-height:var(--space-7);
|
|
@@ -2999,7 +3017,7 @@
|
|
|
2999
3017
|
text-decoration:var(--body-default-text-decoration);
|
|
3000
3018
|
text-transform:var(--body-default-text-case);
|
|
3001
3019
|
}
|
|
3002
|
-
.bp_combobox_module_container--
|
|
3020
|
+
.bp_combobox_module_container--80c88[data-modern=false] .bp_combobox_module_label--80c88{
|
|
3003
3021
|
font-family:var(--body-default-bold-font-family);
|
|
3004
3022
|
font-size:var(--body-default-bold-font-size);
|
|
3005
3023
|
font-weight:var(--body-default-bold-font-weight);
|
|
@@ -3009,7 +3027,7 @@
|
|
|
3009
3027
|
text-decoration:var(--body-default-bold-text-decoration);
|
|
3010
3028
|
text-transform:var(--body-default-bold-text-case);
|
|
3011
3029
|
}
|
|
3012
|
-
.bp_combobox_module_container--
|
|
3030
|
+
.bp_combobox_module_container--80c88[data-modern=false] .bp_combobox_module_textInput--80c88{
|
|
3013
3031
|
font-family:var(--body-default-font-family);
|
|
3014
3032
|
font-size:var(--body-default-font-size);
|
|
3015
3033
|
font-weight:var(--body-default-font-weight);
|
|
@@ -3020,7 +3038,7 @@
|
|
|
3020
3038
|
text-transform:var(--body-default-text-case);
|
|
3021
3039
|
}
|
|
3022
3040
|
|
|
3023
|
-
.bp_combobox_module_container--
|
|
3041
|
+
.bp_combobox_module_container--80c88[data-modern=true]{
|
|
3024
3042
|
--max-lines:3;
|
|
3025
3043
|
--bp-innershadow-01:var(--innershadow-1);
|
|
3026
3044
|
--bp-input-height:var(--bp-space-050);
|
|
@@ -3082,17 +3100,17 @@
|
|
|
3082
3100
|
--combobox-button-spacing:var(--bp-space-020);
|
|
3083
3101
|
font-weight:var(--bp-font-weight-regular);
|
|
3084
3102
|
}
|
|
3085
|
-
.bp_combobox_module_container--
|
|
3103
|
+
.bp_combobox_module_container--80c88[data-modern=true],.bp_combobox_module_container--80c88[data-modern=true] .bp_combobox_module_label--80c88{
|
|
3086
3104
|
font-family:var(--bp-font-font-family);
|
|
3087
3105
|
font-size:var(--bp-font-size-05);
|
|
3088
3106
|
font-style:normal;
|
|
3089
3107
|
letter-spacing:var(--bp-font-letter-spacing-01);
|
|
3090
3108
|
line-height:var(--bp-font-line-height-04);
|
|
3091
3109
|
}
|
|
3092
|
-
.bp_combobox_module_container--
|
|
3110
|
+
.bp_combobox_module_container--80c88[data-modern=true] .bp_combobox_module_label--80c88{
|
|
3093
3111
|
font-weight:var(--bp-font-weight-bold);
|
|
3094
3112
|
}
|
|
3095
|
-
.bp_combobox_module_container--
|
|
3113
|
+
.bp_combobox_module_container--80c88[data-modern=true] .bp_combobox_module_textInput--80c88{
|
|
3096
3114
|
font-family:var(--bp-font-font-family);
|
|
3097
3115
|
font-size:var(--bp-font-size-05);
|
|
3098
3116
|
font-style:normal;
|
|
@@ -3101,7 +3119,7 @@
|
|
|
3101
3119
|
line-height:var(--bp-font-line-height-04);
|
|
3102
3120
|
}
|
|
3103
3121
|
|
|
3104
|
-
.bp_combobox_module_popover--
|
|
3122
|
+
.bp_combobox_module_popover--80c88[data-modern=false]{
|
|
3105
3123
|
--option-height:2.25rem;
|
|
3106
3124
|
--dropdown-max-height:12.5rem;
|
|
3107
3125
|
--combobox-popover-max-height:min(
|
|
@@ -3118,7 +3136,7 @@
|
|
|
3118
3136
|
--combobox-option-border-radius:var(--radius-3);
|
|
3119
3137
|
--combobox-option-padding-block:var(--space-2);
|
|
3120
3138
|
--combobox-option-padding-inline:var(--space-2);
|
|
3121
|
-
--combobox-option-disabled-opacity:
|
|
3139
|
+
--combobox-option-disabled-opacity:60%;
|
|
3122
3140
|
--combobox-option-active-background-color:var(--surface-menu-surface-focus);
|
|
3123
3141
|
--combobox-option-active-border:var(--border-2) solid var(--outline-focus-on-light);
|
|
3124
3142
|
--combobox-option-active-padding-block:var(--space-2);
|
|
@@ -3143,7 +3161,7 @@
|
|
|
3143
3161
|
text-transform:var(--body-default-text-case);
|
|
3144
3162
|
}
|
|
3145
3163
|
|
|
3146
|
-
.bp_combobox_module_popover--
|
|
3164
|
+
.bp_combobox_module_popover--80c88[data-modern=true]{
|
|
3147
3165
|
--option-height:2.25rem;
|
|
3148
3166
|
--dropdown-max-height:12.5rem;
|
|
3149
3167
|
--bp-dropshadow-03:var(--dropshadow-3);
|
|
@@ -3184,22 +3202,22 @@
|
|
|
3184
3202
|
line-height:var(--bp-font-line-height-04);
|
|
3185
3203
|
}
|
|
3186
3204
|
|
|
3187
|
-
.bp_combobox_module_container--
|
|
3205
|
+
.bp_combobox_module_container--80c88{
|
|
3188
3206
|
display:flex;
|
|
3189
3207
|
flex-direction:column;
|
|
3190
3208
|
}
|
|
3191
|
-
.bp_combobox_module_container--
|
|
3209
|
+
.bp_combobox_module_container--80c88.bp_combobox_module_disabled--80c88{
|
|
3192
3210
|
opacity:60%;
|
|
3193
3211
|
}
|
|
3194
|
-
.bp_combobox_module_container--
|
|
3212
|
+
.bp_combobox_module_container--80c88 .bp_combobox_module_label--80c88{
|
|
3195
3213
|
color:var(--combobox-label-color);
|
|
3196
3214
|
flex:0 0 fit-content;
|
|
3197
3215
|
overflow-wrap:break-word;
|
|
3198
3216
|
}
|
|
3199
|
-
.bp_combobox_module_container--
|
|
3217
|
+
.bp_combobox_module_container--80c88 .bp_combobox_module_label--80c88:not(.bp_combobox_module_hiddenLabel--80c88){
|
|
3200
3218
|
margin-block-end:var(--combobox-label-margin-block-end);
|
|
3201
3219
|
}
|
|
3202
|
-
.bp_combobox_module_container--
|
|
3220
|
+
.bp_combobox_module_container--80c88 .bp_combobox_module_comboboxContainer--80c88{
|
|
3203
3221
|
background-color:var(--combobox-container-background-color);
|
|
3204
3222
|
border-bottom:var(--combobox-container-border-bottom-width) solid var(--combobox-container-border-color);
|
|
3205
3223
|
border-left:var(--combobox-container-border-left-width) solid var(--combobox-container-border-color);
|
|
@@ -3216,15 +3234,15 @@
|
|
|
3216
3234
|
padding-inline:var(--combobox-container-padding-inline);
|
|
3217
3235
|
position:relative;
|
|
3218
3236
|
}
|
|
3219
|
-
.bp_combobox_module_container--
|
|
3237
|
+
.bp_combobox_module_container--80c88 .bp_combobox_module_comboboxContainer--80c88.bp_combobox_module_withComboboxButtons--80c88{
|
|
3220
3238
|
padding-inline-end:var(--combobox-container-padding-inline-end-with-buttons);
|
|
3221
3239
|
}
|
|
3222
|
-
.bp_combobox_module_container--
|
|
3240
|
+
.bp_combobox_module_container--80c88 .bp_combobox_module_comboboxContainer--80c88:not(:disabled):has(input:focus){
|
|
3223
3241
|
background-color:var(--combobox-container-focus-background-color);
|
|
3224
3242
|
border:var(--combobox-container-focus-border);
|
|
3225
3243
|
padding-block:var(--combobox-container-focus-padding-block);
|
|
3226
3244
|
}
|
|
3227
|
-
.bp_combobox_module_container--
|
|
3245
|
+
.bp_combobox_module_container--80c88 .bp_combobox_module_comboboxContainer--80c88:not(:disabled).bp_combobox_module_error--80c88,.bp_combobox_module_container--80c88 .bp_combobox_module_comboboxContainer--80c88:not(:disabled):has([aria-invalid=true]){
|
|
3228
3246
|
background-color:var(--combobox-container-error-background-color);
|
|
3229
3247
|
border-bottom:var(--combobox-container-error-border-bottom-width) solid var(--combobox-container-error-border-color);
|
|
3230
3248
|
border-left:var(--combobox-container-error-border-left-width) solid var(--combobox-container-error-border-color);
|
|
@@ -3232,19 +3250,19 @@
|
|
|
3232
3250
|
border-top:var(--combobox-container-error-border-top-width) solid var(--combobox-container-error-border-color);
|
|
3233
3251
|
padding-block:var(--combobox-container-error-padding-block);
|
|
3234
3252
|
}
|
|
3235
|
-
.bp_combobox_module_container--
|
|
3253
|
+
.bp_combobox_module_container--80c88 .bp_combobox_module_comboboxContainer--80c88:not(:disabled):not(:has(input:focus)):has(input:hover):not(.bp_combobox_module_error--80c88):not(:has([aria-invalid=true])){
|
|
3236
3254
|
border-bottom:var(--combobox-container-border-bottom-width) solid var(--combobox-container-border-color-hover);
|
|
3237
3255
|
border-left:var(--combobox-container-border-left-width) solid var(--combobox-container-border-color-hover);
|
|
3238
3256
|
border-right:var(--combobox-container-border-right-width) solid var(--combobox-container-border-color-hover);
|
|
3239
3257
|
border-top:var(--combobox-container-border-top-width) solid var(--combobox-container-border-color-hover);
|
|
3240
3258
|
}
|
|
3241
|
-
.bp_combobox_module_container--
|
|
3259
|
+
.bp_combobox_module_container--80c88 .bp_combobox_module_comboboxContainer--80c88 .bp_combobox_module_textInputWrapper--80c88{
|
|
3242
3260
|
align-items:center;
|
|
3243
3261
|
display:flex;
|
|
3244
3262
|
flex:content;
|
|
3245
3263
|
gap:var(--combobox-text-input-wrapper-gap);
|
|
3246
3264
|
}
|
|
3247
|
-
.bp_combobox_module_container--
|
|
3265
|
+
.bp_combobox_module_container--80c88 .bp_combobox_module_comboboxContainer--80c88 .bp_combobox_module_textInputWrapper--80c88 .bp_combobox_module_textInput--80c88{
|
|
3248
3266
|
background-color:var(--combobox-text-input-background-color);
|
|
3249
3267
|
border:none;
|
|
3250
3268
|
color:var(--combobox-text-input-color);
|
|
@@ -3253,31 +3271,31 @@
|
|
|
3253
3271
|
padding:0;
|
|
3254
3272
|
width:100%;
|
|
3255
3273
|
}
|
|
3256
|
-
.bp_combobox_module_container--
|
|
3274
|
+
.bp_combobox_module_container--80c88 .bp_combobox_module_comboboxContainer--80c88 .bp_combobox_module_textInputWrapper--80c88 .bp_combobox_module_errorIcon--80c88 path{
|
|
3257
3275
|
fill:var(--combobox-error-icon-fill);
|
|
3258
3276
|
}
|
|
3259
|
-
.bp_combobox_module_container--
|
|
3277
|
+
.bp_combobox_module_container--80c88 .bp_combobox_module_comboboxContainer--80c88 .bp_combobox_module_textInputWrapper--80c88 .bp_combobox_module_comboboxButtons--80c88{
|
|
3260
3278
|
align-items:center;
|
|
3261
3279
|
display:flex;
|
|
3262
3280
|
position:absolute;
|
|
3263
3281
|
right:var(--combobox-button-spacing);
|
|
3264
3282
|
top:var(--combobox-button-spacing);
|
|
3265
3283
|
}
|
|
3266
|
-
.bp_combobox_module_container--
|
|
3284
|
+
.bp_combobox_module_container--80c88 .bp_combobox_module_comboboxContainer--80c88.bp_combobox_module_withChips--80c88{
|
|
3267
3285
|
max-height:var(--combobox-container-with-chips-max-height);
|
|
3268
3286
|
padding-block:var(--combobox-container-with-chips-padding-block);
|
|
3269
3287
|
}
|
|
3270
|
-
.bp_combobox_module_container--
|
|
3288
|
+
.bp_combobox_module_container--80c88 .bp_combobox_module_comboboxContainer--80c88.bp_combobox_module_withChips--80c88:not(:disabled).bp_combobox_module_error--80c88{
|
|
3271
3289
|
padding-block:var(--combobox-container-with-chips-error-padding-block);
|
|
3272
3290
|
}
|
|
3273
|
-
.bp_combobox_module_container--
|
|
3291
|
+
.bp_combobox_module_container--80c88 .bp_combobox_module_comboboxContainer--80c88.bp_combobox_module_withChips--80c88:not(:disabled):has(input:focus){
|
|
3274
3292
|
padding-block:var(--combobox-container-with-chips-focus-padding-block);
|
|
3275
3293
|
}
|
|
3276
|
-
.bp_combobox_module_container--
|
|
3294
|
+
.bp_combobox_module_container--80c88 .bp_combobox_module_inlineError--80c88{
|
|
3277
3295
|
margin-block-start:var(--combobox-inline-error-margin-block-start);
|
|
3278
3296
|
}
|
|
3279
3297
|
|
|
3280
|
-
.bp_combobox_module_popover--
|
|
3298
|
+
.bp_combobox_module_popover--80c88{
|
|
3281
3299
|
backdrop-filter:var(--combobox-popover-backdrop-filter);
|
|
3282
3300
|
background-color:var(--combobox-popover-background-color);
|
|
3283
3301
|
border:var(--combobox-popover-border);
|
|
@@ -3289,7 +3307,7 @@
|
|
|
3289
3307
|
padding-inline:var(--combobox-popover-padding-inline);
|
|
3290
3308
|
z-index:var(--z-index-popover);
|
|
3291
3309
|
}
|
|
3292
|
-
.bp_combobox_module_popover--
|
|
3310
|
+
.bp_combobox_module_popover--80c88 .bp_combobox_module_option--80c88{
|
|
3293
3311
|
border:var(--combobox-option-border);
|
|
3294
3312
|
border-radius:var(--combobox-option-border-radius);
|
|
3295
3313
|
box-sizing:border-box;
|
|
@@ -3304,21 +3322,21 @@
|
|
|
3304
3322
|
user-select:none;
|
|
3305
3323
|
width:100%;
|
|
3306
3324
|
}
|
|
3307
|
-
.bp_combobox_module_popover--
|
|
3325
|
+
.bp_combobox_module_popover--80c88 .bp_combobox_module_option--80c88[aria-disabled]{
|
|
3308
3326
|
opacity:var(--combobox-option-disabled-opacity);
|
|
3309
3327
|
}
|
|
3310
|
-
.bp_combobox_module_popover--
|
|
3328
|
+
.bp_combobox_module_popover--80c88 .bp_combobox_module_option--80c88[data-active-item]:not([aria-disabled]){
|
|
3311
3329
|
background-color:var(--combobox-option-active-background-color);
|
|
3312
3330
|
border:var(--combobox-option-active-border);
|
|
3313
3331
|
}
|
|
3314
|
-
.bp_combobox_module_popover--
|
|
3332
|
+
.bp_combobox_module_popover--80c88 .bp_combobox_module_option--80c88:active{
|
|
3315
3333
|
background-color:var(--combobox-option-hover-background-color);
|
|
3316
3334
|
border:var(--combobox-option-border);
|
|
3317
3335
|
}
|
|
3318
|
-
.bp_combobox_module_popover--
|
|
3336
|
+
.bp_combobox_module_popover--80c88 .bp_combobox_module_option--80c88:hover{
|
|
3319
3337
|
background-color:var(--combobox-option-hover-background-color);
|
|
3320
3338
|
}
|
|
3321
|
-
.bp_combobox_module_popover--
|
|
3339
|
+
.bp_combobox_module_popover--80c88 .bp_combobox_module_option--80c88 .bp_combobox_module_indicator--80c88{
|
|
3322
3340
|
align-items:center;
|
|
3323
3341
|
display:flex;
|
|
3324
3342
|
height:var(--combobox-option-indicator-height);
|
|
@@ -3327,16 +3345,16 @@
|
|
|
3327
3345
|
position:absolute;
|
|
3328
3346
|
top:var(--combobox-option-indicator-top);
|
|
3329
3347
|
}
|
|
3330
|
-
.bp_combobox_module_popover--
|
|
3348
|
+
.bp_combobox_module_popover--80c88 .bp_combobox_module_option--80c88 .bp_combobox_module_indicator--80c88 .bp_combobox_module_indicatorIcon--80c88 path{
|
|
3331
3349
|
fill:var(--combobox-option-indicator-icon-fill);
|
|
3332
3350
|
}
|
|
3333
|
-
.bp_combobox_module_popover--
|
|
3351
|
+
.bp_combobox_module_popover--80c88 .bp_combobox_module_optionWithIndicator--80c88{
|
|
3334
3352
|
padding-inline:var(--combobox-option-with-indicator-padding-inline);
|
|
3335
3353
|
}
|
|
3336
|
-
.bp_combobox_module_popover--
|
|
3354
|
+
.bp_combobox_module_popover--80c88 .bp_combobox_module_loadingIndicator--80c88{
|
|
3337
3355
|
position:var(--combobox-loading-indicator-position);
|
|
3338
3356
|
}
|
|
3339
|
-
.bp_combobox_module_popover--
|
|
3357
|
+
.bp_combobox_module_popover--80c88 .bp_combobox_module_noResultOption--80c88{
|
|
3340
3358
|
color:var(--combobox-no-result-option-color);
|
|
3341
3359
|
-webkit-user-select:none;
|
|
3342
3360
|
user-select:none;
|
|
@@ -10,6 +10,7 @@ export declare const SplitButton: import("react").ForwardRefExoticComponent<(Omi
|
|
|
10
10
|
onOpenChange?(pressed: boolean): void;
|
|
11
11
|
disabled?: boolean;
|
|
12
12
|
container?: import("../primitives/dropdown-menu").DropdownMenuContentProps["container"];
|
|
13
|
+
splitTriggerResinTarget?: string;
|
|
13
14
|
} & Required<Pick<import("./types").Loading, keyof import("./types").Loading>> & Omit<import("./types").Loading, keyof import("./types").Loading>, "ref"> | Omit<Omit<import("../button").ButtonProps, "children"> & {
|
|
14
15
|
children: React.ReactNode;
|
|
15
16
|
label: string;
|
|
@@ -22,4 +23,5 @@ export declare const SplitButton: import("react").ForwardRefExoticComponent<(Omi
|
|
|
22
23
|
onOpenChange?(pressed: boolean): void;
|
|
23
24
|
disabled?: boolean;
|
|
24
25
|
container?: import("../primitives/dropdown-menu").DropdownMenuContentProps["container"];
|
|
26
|
+
splitTriggerResinTarget?: string;
|
|
25
27
|
} & Partial<Record<keyof import("./types").Loading, never>> & Omit<import("./types").Loading, keyof import("./types").Loading>, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
|
|
@@ -36,6 +36,7 @@ const SplitButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
36
36
|
defaultOpen = false,
|
|
37
37
|
size = 'large',
|
|
38
38
|
variant = 'primary',
|
|
39
|
+
splitTriggerResinTarget,
|
|
39
40
|
...rest
|
|
40
41
|
} = props;
|
|
41
42
|
const [leftButtonSize, setLeftButtonSize] = useState(undefined);
|
|
@@ -105,6 +106,7 @@ const SplitButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
105
106
|
children: jsx(SplitTriggerButton, {
|
|
106
107
|
ref: onRightButtonMountCallback,
|
|
107
108
|
ariaLabel: dropdownTriggerAriaLabel,
|
|
109
|
+
"data-resin-target": splitTriggerResinTarget,
|
|
108
110
|
disabled: !!disabled,
|
|
109
111
|
isInvisible: loading,
|
|
110
112
|
isOpened: open,
|
|
@@ -39,5 +39,7 @@ export type BasicSplitButtonProps = Omit<ButtonProps, 'children'> & {
|
|
|
39
39
|
/** Specify a container element to portal the content into. */
|
|
40
40
|
/** @default document.body */
|
|
41
41
|
container?: DropdownMenuContentProps['container'];
|
|
42
|
+
/** The resin target for the split trigger button. */
|
|
43
|
+
splitTriggerResinTarget?: string;
|
|
42
44
|
};
|
|
43
45
|
export type SplitButtonProps = BasicSplitButtonProps & RequireAllOrNone<Loading, keyof Loading>;
|