@box/blueprint-web 12.25.0 → 12.26.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.
|
@@ -87,6 +87,7 @@ const RootInner = ({
|
|
|
87
87
|
const comboboxId = useUniqueId('combobox-', !idForLabel) || idForLabel || 'default-combobox-id';
|
|
88
88
|
const popoverRef = useRef(null);
|
|
89
89
|
const comboboxContainerRef = useRef(null);
|
|
90
|
+
const hasClearedSelectionRef = useRef(false);
|
|
90
91
|
const popoverRefCallback = useCallback(node => {
|
|
91
92
|
popoverRef.current = node;
|
|
92
93
|
getPopoverRef?.(node);
|
|
@@ -153,14 +154,19 @@ const RootInner = ({
|
|
|
153
154
|
const {
|
|
154
155
|
setValue: setSelectedValue
|
|
155
156
|
} = selectStore;
|
|
156
|
-
useEffect(() => {
|
|
157
|
-
if (inputValue.trim() === '' && !multiselect && selectedValue && !displaySingleSelectionAsChip && !clearOnBlur) {
|
|
158
|
-
setSelectedValue('');
|
|
159
|
-
}
|
|
160
|
-
}, [inputValue, multiselect, setSelectedValue, selectedValue, displaySingleSelectionAsChip, clearOnBlur]);
|
|
161
157
|
const resetSelectedValue = useCallback(() => {
|
|
162
158
|
setSelectedValue(multiselect ? [] : '');
|
|
163
159
|
}, [multiselect, setSelectedValue]);
|
|
160
|
+
// Handle clearing selection when input becomes empty
|
|
161
|
+
useEffect(() => {
|
|
162
|
+
if (inputValue.trim() === '' && !multiselect && selectedValue && !displaySingleSelectionAsChip && !clearOnBlur && !hasClearedSelectionRef.current) {
|
|
163
|
+
hasClearedSelectionRef.current = true;
|
|
164
|
+
resetSelectedValue();
|
|
165
|
+
} else if (inputValue.trim() !== '') {
|
|
166
|
+
hasClearedSelectionRef.current = false;
|
|
167
|
+
}
|
|
168
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
169
|
+
}, [inputValue, multiselect, displaySingleSelectionAsChip, clearOnBlur, resetSelectedValue]);
|
|
164
170
|
const filteredOptions = useMemo(() => {
|
|
165
171
|
const visibleOptions = filterFn ? options.filter(option => filterFn(inputValue, option)) : options;
|
|
166
172
|
if (!hideSelectedOptions) {
|
|
@@ -202,13 +208,32 @@ const RootInner = ({
|
|
|
202
208
|
setInputValue('');
|
|
203
209
|
} else if (selectedValueMemoized) {
|
|
204
210
|
const selectedDisplayValue = getDisplayValueFromOptionValue(selectedValueMemoized, options, displayValue);
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
211
|
+
if (displaySingleSelectionAsChip) {
|
|
212
|
+
// Update input to show selected value
|
|
213
|
+
setInputValue(selectedDisplayValue);
|
|
214
|
+
} else {
|
|
215
|
+
// Update input to show selected value when:
|
|
216
|
+
// 1. Input matches selected value (keeps in sync)
|
|
217
|
+
// 2. Input is empty (initial selection)
|
|
218
|
+
// 3. Selection just changed (user selected an option)
|
|
219
|
+
// But don't update if we just cleared the selection
|
|
220
|
+
if (!hasClearedSelectionRef.current) {
|
|
221
|
+
setInputValue(selectedDisplayValue);
|
|
222
|
+
}
|
|
223
|
+
// Reset the cleared selection flag when we have a new selection
|
|
224
|
+
if (selectedValueMemoized) {
|
|
225
|
+
hasClearedSelectionRef.current = false;
|
|
226
|
+
}
|
|
227
|
+
// Also focus input for single-select variant
|
|
228
|
+
focusInput();
|
|
229
|
+
}
|
|
230
|
+
} else {
|
|
231
|
+
// Clear input when selection is cleared (e.g., by cross button)
|
|
232
|
+
setInputValue('');
|
|
208
233
|
}
|
|
209
234
|
},
|
|
210
235
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
211
|
-
[selectedValueMemoized, setInputValue, focusInput]);
|
|
236
|
+
[selectedValueMemoized, setInputValue, focusInput, resetSelectedValue]);
|
|
212
237
|
const removeMultiSelectInputChip = useCallback(id => {
|
|
213
238
|
// For multi-select variant only
|
|
214
239
|
selectStore.setValue(prev => {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"datePicker":"bp_date_picker_module_datePicker--
|
|
2
|
+
var styles = {"datePicker":"bp_date_picker_module_datePicker--5d704","disabled":"bp_date_picker_module_disabled--5d704","label":"bp_date_picker_module_label--5d704","group":"bp_date_picker_module_group--5d704","groupContainer":"bp_date_picker_module_groupContainer--5d704","error":"bp_date_picker_module_error--5d704","groupContainerInput":"bp_date_picker_module_groupContainerInput--5d704","groupContainerInputSegment":"bp_date_picker_module_groupContainerInputSegment--5d704","button":"bp_date_picker_module_button--5d704","clear":"bp_date_picker_module_clear--5d704","inlineError":"bp_date_picker_module_inlineError--5d704","datePickerPopoverContent":"bp_date_picker_module_datePickerPopoverContent--5d704","slide":"bp_date_picker_module_slide--5d704"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
package/dist/lib-esm/index.css
CHANGED
|
@@ -3610,16 +3610,16 @@
|
|
|
3610
3610
|
text-decoration:line-through;
|
|
3611
3611
|
}
|
|
3612
3612
|
|
|
3613
|
-
.bp_date_picker_module_datePicker--
|
|
3613
|
+
.bp_date_picker_module_datePicker--5d704{
|
|
3614
3614
|
width:100%;
|
|
3615
3615
|
}
|
|
3616
|
-
.bp_date_picker_module_datePicker--
|
|
3616
|
+
.bp_date_picker_module_datePicker--5d704.bp_date_picker_module_disabled--5d704{
|
|
3617
3617
|
opacity:60%;
|
|
3618
3618
|
pointer-events:none;
|
|
3619
3619
|
-webkit-user-select:none;
|
|
3620
3620
|
user-select:none;
|
|
3621
3621
|
}
|
|
3622
|
-
.bp_date_picker_module_datePicker--
|
|
3622
|
+
.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_label--5d704{
|
|
3623
3623
|
cursor:default;
|
|
3624
3624
|
display:block;
|
|
3625
3625
|
font-family:var(--body-default-bold-font-family);
|
|
@@ -3634,7 +3634,7 @@
|
|
|
3634
3634
|
width:-moz-fit-content;
|
|
3635
3635
|
width:fit-content;
|
|
3636
3636
|
}
|
|
3637
|
-
.bp_date_picker_module_datePicker--
|
|
3637
|
+
.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704{
|
|
3638
3638
|
align-items:center;
|
|
3639
3639
|
box-shadow:var(--innershadow-1);
|
|
3640
3640
|
display:inline-flex;
|
|
@@ -3649,32 +3649,33 @@
|
|
|
3649
3649
|
text-transform:var(--body-default-text-case);
|
|
3650
3650
|
width:100%;
|
|
3651
3651
|
}
|
|
3652
|
-
.bp_date_picker_module_datePicker--
|
|
3652
|
+
.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_groupContainer--5d704{
|
|
3653
3653
|
align-items:center;
|
|
3654
3654
|
border-radius:var(--radius-2);
|
|
3655
3655
|
display:inline-flex;
|
|
3656
|
+
margin:var(--border-1);
|
|
3656
3657
|
outline:var(--border-1) solid var(--border-input-border);
|
|
3657
3658
|
padding-inline:var(--space-2) var(--space-2);
|
|
3658
3659
|
position:relative;
|
|
3659
3660
|
width:100%;
|
|
3660
3661
|
}
|
|
3661
|
-
.bp_date_picker_module_datePicker--
|
|
3662
|
+
.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_groupContainer--5d704:focus-within{
|
|
3662
3663
|
outline:var(--border-2) solid var(--outline-focus-on-light);
|
|
3663
3664
|
}
|
|
3664
|
-
.bp_date_picker_module_datePicker--
|
|
3665
|
+
.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_groupContainer--5d704.bp_date_picker_module_error--5d704:not(:focus-within){
|
|
3665
3666
|
outline:var(--border-2) solid var(--text-text-error-on-light);
|
|
3666
3667
|
}
|
|
3667
|
-
.bp_date_picker_module_datePicker--
|
|
3668
|
+
.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_groupContainer--5d704.bp_date_picker_module_error--5d704:focus-within{
|
|
3668
3669
|
outline:var(--border-2) solid var(--outline-focus-on-light);
|
|
3669
3670
|
}
|
|
3670
|
-
.bp_date_picker_module_datePicker--
|
|
3671
|
+
.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_groupContainer--5d704 .bp_date_picker_module_groupContainerInput--5d704{
|
|
3671
3672
|
align-items:center;
|
|
3672
3673
|
display:inline-flex;
|
|
3673
3674
|
height:var(--size-10);
|
|
3674
3675
|
text-transform:uppercase;
|
|
3675
3676
|
white-space:nowrap;
|
|
3676
3677
|
}
|
|
3677
|
-
.bp_date_picker_module_datePicker--
|
|
3678
|
+
.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_groupContainer--5d704 .bp_date_picker_module_groupContainerInput--5d704 .bp_date_picker_module_groupContainerInputSegment--5d704{
|
|
3678
3679
|
border:unset;
|
|
3679
3680
|
border-radius:unset;
|
|
3680
3681
|
box-shadow:unset;
|
|
@@ -3685,18 +3686,18 @@
|
|
|
3685
3686
|
transition:unset;
|
|
3686
3687
|
width:unset;
|
|
3687
3688
|
}
|
|
3688
|
-
.bp_date_picker_module_datePicker--
|
|
3689
|
+
.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_groupContainer--5d704 .bp_date_picker_module_groupContainerInput--5d704 .bp_date_picker_module_groupContainerInputSegment--5d704[data-placeholder]{
|
|
3689
3690
|
color:var(--text-text-on-light-secondary);
|
|
3690
3691
|
}
|
|
3691
|
-
.bp_date_picker_module_datePicker--
|
|
3692
|
+
.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_groupContainer--5d704 .bp_date_picker_module_groupContainerInput--5d704 .bp_date_picker_module_groupContainerInputSegment--5d704:focus{
|
|
3692
3693
|
background:var(--light-blue-20);
|
|
3693
3694
|
caret-color:#0000;
|
|
3694
3695
|
outline:none;
|
|
3695
3696
|
}
|
|
3696
|
-
.bp_date_picker_module_datePicker--
|
|
3697
|
+
.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_groupContainer--5d704 .bp_date_picker_module_groupContainerInput--5d704 .bp_date_picker_module_groupContainerInputSegment--5d704:focus[data-placeholder]{
|
|
3697
3698
|
color:var(--text-text-on-light);
|
|
3698
3699
|
}
|
|
3699
|
-
.bp_date_picker_module_datePicker--
|
|
3700
|
+
.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_button--5d704{
|
|
3700
3701
|
align-items:center;
|
|
3701
3702
|
background-color:initial;
|
|
3702
3703
|
border:none;
|
|
@@ -3711,33 +3712,33 @@
|
|
|
3711
3712
|
right:var(--space-2);
|
|
3712
3713
|
width:var(--size-6);
|
|
3713
3714
|
}
|
|
3714
|
-
.bp_date_picker_module_datePicker--
|
|
3715
|
+
.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_button--5d704.bp_date_picker_module_clear--5d704{
|
|
3715
3716
|
right:var(--size-9);
|
|
3716
3717
|
}
|
|
3717
|
-
.bp_date_picker_module_datePicker--
|
|
3718
|
+
.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_button--5d704:focus-visible,.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_button--5d704[data-focus-visible]{
|
|
3718
3719
|
background-color:var(--surface-cta-surface-icon-pressed);
|
|
3719
3720
|
outline:var(--border-2) solid var(--outline-focus-on-light);
|
|
3720
3721
|
}
|
|
3721
|
-
.bp_date_picker_module_datePicker--
|
|
3722
|
+
.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_button--5d704:hover{
|
|
3722
3723
|
background:var(--surface-cta-surface-icon-hover);
|
|
3723
3724
|
}
|
|
3724
|
-
.bp_date_picker_module_datePicker--
|
|
3725
|
+
.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_button--5d704:hover *{
|
|
3725
3726
|
fill:var(--icon-cta-icon-hover);
|
|
3726
3727
|
}
|
|
3727
|
-
.bp_date_picker_module_datePicker--
|
|
3728
|
+
.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_button--5d704:active{
|
|
3728
3729
|
background:var(--surface-cta-surface-icon-pressed);
|
|
3729
3730
|
}
|
|
3730
|
-
.bp_date_picker_module_datePicker--
|
|
3731
|
+
.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_button--5d704:active *{
|
|
3731
3732
|
fill:var(--icon-cta-icon-pressed);
|
|
3732
3733
|
}
|
|
3733
|
-
.bp_date_picker_module_datePicker--
|
|
3734
|
+
.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_button--5d704:disabled{
|
|
3734
3735
|
opacity:1;
|
|
3735
3736
|
}
|
|
3736
|
-
.bp_date_picker_module_datePicker--
|
|
3737
|
+
.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_inlineError--5d704{
|
|
3737
3738
|
margin-block-start:var(--space-2);
|
|
3738
3739
|
}
|
|
3739
3740
|
|
|
3740
|
-
@keyframes bp_date_picker_module_slide--
|
|
3741
|
+
@keyframes bp_date_picker_module_slide--5d704{
|
|
3741
3742
|
from{
|
|
3742
3743
|
opacity:0;
|
|
3743
3744
|
transform:var(--popover-slide-translation);
|
|
@@ -3747,7 +3748,7 @@
|
|
|
3747
3748
|
transform:translateY(0);
|
|
3748
3749
|
}
|
|
3749
3750
|
}
|
|
3750
|
-
.bp_date_picker_module_datePickerPopoverContent--
|
|
3751
|
+
.bp_date_picker_module_datePickerPopoverContent--5d704{
|
|
3751
3752
|
z-index:380;
|
|
3752
3753
|
}
|
|
3753
3754
|
|