@box/blueprint-web 12.25.0 → 12.27.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 (7) hide show
  1. package/dist/lib-esm/combobox/combobox.js +34 -9
  2. package/dist/lib-esm/date-picker/date-picker.js +5 -0
  3. package/dist/lib-esm/date-picker/date-picker.module.js +1 -1
  4. package/dist/lib-esm/index.css +230 -111
  5. package/dist/lib-esm/primitives/calendar/calendar.js +5 -0
  6. package/dist/lib-esm/primitives/calendar/calendar.module.js +1 -1
  7. package/package.json +1 -1
package/dist/lib-esm/combobox/combobox.js CHANGED
@@ -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
- setInputValue(selectedDisplayValue);
206
- // Also focus input for single-select variant
207
- focusInput();
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 => {
package/dist/lib-esm/date-picker/date-picker.js CHANGED
@@ -5,6 +5,7 @@ import * as RadixPopover from '@radix-ui/react-popover';
5
5
  import clsx from 'clsx';
6
6
  import { forwardRef, useState, useEffect, useRef, useCallback } from 'react';
7
7
  import { DatePicker as DatePicker$1, Group, DateInput, DateSegment, Button } from 'react-aria-components';
8
+ import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
8
9
  import { Calendar as Calendar$1 } from '../primitives/calendar/calendar.js';
9
10
  import '@internationalized/date';
10
11
  import { IconButton } from '../primitives/icon-button/icon-button.js';
@@ -44,6 +45,9 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
44
45
  previousMonthAriaLabel,
45
46
  ...rest
46
47
  } = props;
48
+ const {
49
+ enableModernizedComponents
50
+ } = useBlueprintModernization();
47
51
  const [internalValue, setInternalValue] = useState(defaultValue);
48
52
  useEffect(() => {
49
53
  if (value !== undefined) {
@@ -114,6 +118,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
114
118
  className: clsx(styles.datePicker, {
115
119
  [styles.disabled]: isDisabled
116
120
  }, className),
121
+ "data-modern": enableModernizedComponents,
117
122
  isDisabled: isDisabled,
118
123
  isInvalid: hasError,
119
124
  onChange: onDatePickerValueChanged,
package/dist/lib-esm/date-picker/date-picker.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"datePicker":"bp_date_picker_module_datePicker--bba56","disabled":"bp_date_picker_module_disabled--bba56","label":"bp_date_picker_module_label--bba56","group":"bp_date_picker_module_group--bba56","groupContainer":"bp_date_picker_module_groupContainer--bba56","error":"bp_date_picker_module_error--bba56","groupContainerInput":"bp_date_picker_module_groupContainerInput--bba56","groupContainerInputSegment":"bp_date_picker_module_groupContainerInputSegment--bba56","button":"bp_date_picker_module_button--bba56","clear":"bp_date_picker_module_clear--bba56","inlineError":"bp_date_picker_module_inlineError--bba56","datePickerPopoverContent":"bp_date_picker_module_datePickerPopoverContent--bba56","slide":"bp_date_picker_module_slide--bba56"};
2
+ var styles = {"datePicker":"bp_date_picker_module_datePicker--89682","disabled":"bp_date_picker_module_disabled--89682","label":"bp_date_picker_module_label--89682","group":"bp_date_picker_module_group--89682","groupContainer":"bp_date_picker_module_groupContainer--89682","error":"bp_date_picker_module_error--89682","groupContainerInput":"bp_date_picker_module_groupContainerInput--89682","groupContainerInputSegment":"bp_date_picker_module_groupContainerInputSegment--89682","button":"bp_date_picker_module_button--89682","clear":"bp_date_picker_module_clear--89682","inlineError":"bp_date_picker_module_inlineError--89682","datePickerPopoverContent":"bp_date_picker_module_datePickerPopoverContent--89682","slide":"bp_date_picker_module_slide--89682"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/index.css CHANGED
@@ -3455,33 +3455,99 @@
3455
3455
  z-index:-1;
3456
3456
  }
3457
3457
 
3458
- .bp_calendar_module_calendar--d053c{
3459
- background:var(--gray-white);
3460
- border-radius:var(--radius-2);
3461
- box-shadow:var(--dropshadow-3);
3458
+ .bp_calendar_module_calendar--085e4[data-modern=false]{
3459
+ --calendar-background:var(--gray-white);
3460
+ --calendar-padding-inline:var(--space-4);
3461
+ --calendar-padding-block:var(--space-4);
3462
+ --calendar-border-radius:var(--radius-2);
3463
+ --calendar-box-shadow:var(--dropshadow-3);
3464
+ --calendar-cell-selected-background:var(--box-blue-100);
3465
+ --calendar-cell-hovered-background:var(--gray-05);
3466
+ --calendar-cell-selected-hovered-background:var(--dark-blue-100);
3467
+ --calendar-cell-selected-focused-background:var(--dark-blue-100);
3468
+ --calendar-cell-outside-range-text-color:var(--gray-10);
3469
+ --calendar-cell-selected-text-color:var(--gray-white);
3470
+ --calendar-cell-border-radius:var(--radius-2);
3471
+ --calendar-cell-text-color:var(--gray-90);
3472
+ --calendar-cell-today-text-color:var(--box-blue-100);
3473
+ --calendar-cell-today-disabled-opacity:.6;
3474
+ --calendar-cell-today-dot-diameter:var(--space-1);
3475
+ --calendar-cell-today-dot-background:var(--box-blue-100);
3476
+ --calendar-cell-today-dot-bottom:var(--space-1);
3477
+ --calendar-cell-size:var(--size-8);
3478
+ --calendar-cell-focus-box-shadow:0 0 0 var(--size-05) var(--box-blue-100);
3479
+ --calendar-header-text-color:var(--gray-90);
3480
+ --calendar-header-button-background:var(--gray-white);
3481
+ --calendar-header-button-hover-background:var(--gray-05);
3482
+ --calendar-header-button-size:var(--size-8);
3483
+ --calendar-header-button-outline-width:var(--size-05);
3484
+ --calendar-header-button-focus-box-shadow:0 0 0 var(--size-05) var(--box-blue-100);
3485
+ --calendar-header-margin-bottom:var(--space-2);
3486
+ --calendar-header-cell-text-color:var(--text-text-on-light-secondary);
3487
+ --calendar-disabled-text-color:var(--gray-30);
3488
+ --calendar-focus-outline:var(--border-1) solid #fff;
3489
+ }
3490
+
3491
+ .bp_calendar_module_calendar--085e4[data-modern=true]{
3492
+ --calendar-background:var(--bp-gray-white);
3493
+ --calendar-padding-inline:var(--bp-space-040);
3494
+ --calendar-padding-block:var(--bp-space-040);
3495
+ --calendar-border-radius:var(--bp-radius-10);
3496
+ --calendar-box-shadow:var(--dropshadow-2);
3497
+ --calendar-cell-selected-background:var(--bp-box-blue-100);
3498
+ --calendar-cell-hovered-background:var(--bp-gray-05);
3499
+ --calendar-cell-selected-hovered-background:var(--bp-dark-blue-100);
3500
+ --calendar-cell-selected-focused-background:var(--bp-dark-blue-100);
3501
+ --calendar-cell-outside-range-text-color:var(--bp-gray-10);
3502
+ --calendar-cell-selected-text-color:var(--bp-gray-white);
3503
+ --calendar-cell-border-radius:var(--bp-radius-02);
3504
+ --calendar-cell-text-color:var(--bp-gray-90);
3505
+ --calendar-cell-today-text-color:var(--bp-box-blue-100);
3506
+ --calendar-cell-today-disabled-opacity:.6;
3507
+ --calendar-cell-today-dot-diameter:var(--bp-space-010);
3508
+ --calendar-cell-today-dot-background:var(--bp-box-blue-100);
3509
+ --calendar-cell-today-dot-bottom:var(--bp-space-010);
3510
+ --calendar-cell-size:var(--bp-size-080);
3511
+ --calendar-cell-focus-box-shadow:0 0 0 var(--bp-size-005) var(--bp-box-blue-100);
3512
+ --calendar-header-text-color:var(--bp-text-text-on-light);
3513
+ --calendar-header-button-background:var(--bp-gray-white);
3514
+ --calendar-header-button-hover-background:var(--bp-gray-05);
3515
+ --calendar-header-button-size:var(--bp-size-060);
3516
+ --calendar-header-button-outline-width:var(--bp-size-005);
3517
+ --calendar-header-button-focus-box-shadow:0 0 0 var(--bp-size-005) var(--bp-box-blue-100);
3518
+ --calendar-header-margin-bottom:var(--bp-space-020);
3519
+ --calendar-header-cell-text-color:var(--bp-text-text-on-light-secondary);
3520
+ --calendar-disabled-text-color:var(--bp-gray-30);
3521
+ --calendar-focus-outline:var(--bp-border-01) solid #fff;
3522
+ }
3523
+
3524
+ .bp_calendar_module_calendar--085e4{
3525
+ background:var(--calendar-background);
3526
+ border-radius:var(--calendar-border-radius);
3527
+ box-shadow:var(--calendar-box-shadow);
3462
3528
  font-family:var(--body-default-font-family);
3463
3529
  font-size:var(--body-default-font-size);
3464
3530
  font-weight:var(--body-default-font-weight);
3465
3531
  letter-spacing:var(--body-default-letter-spacing);
3466
3532
  line-height:var(--body-default-line-height);
3467
3533
  max-width:100%;
3468
- padding-block:var(--space-4);
3469
- padding-inline:var(--space-4);
3534
+ padding-block:var(--calendar-padding-block);
3535
+ padding-inline:var(--calendar-padding-inline);
3470
3536
  -webkit-text-decoration:var(--body-default-text-decoration);
3471
3537
  text-decoration:var(--body-default-text-decoration);
3472
3538
  text-transform:var(--body-default-text-case);
3473
3539
  width:-moz-fit-content;
3474
3540
  width:fit-content;
3475
3541
  }
3476
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarGrid--d053c{
3542
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarGrid--085e4{
3477
3543
  border-collapse:revert;
3478
3544
  border-spacing:revert;
3479
3545
  }
3480
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarGrid--d053c td{
3546
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarGrid--085e4 td{
3481
3547
  padding:1px;
3482
3548
  }
3483
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeaderCell--d053c{
3484
- color:var(--text-text-on-light-secondary);
3549
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeaderCell--085e4{
3550
+ color:var(--calendar-header-cell-text-color);
3485
3551
  font-family:var(--body-default-font-family);
3486
3552
  font-size:var(--body-default-font-size);
3487
3553
  font-weight:var(--body-default-font-weight);
@@ -3492,13 +3558,13 @@
3492
3558
  text-decoration:var(--body-default-text-decoration);
3493
3559
  text-transform:var(--body-default-text-case);
3494
3560
  }
3495
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeader--d053c{
3561
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeader--085e4{
3496
3562
  align-items:center;
3497
- color:var(--gray-90);
3563
+ color:var(--calendar-header-text-color);
3498
3564
  display:flex;
3499
- margin-block-end:var(--space-2);
3565
+ margin-block-end:var(--calendar-header-margin-bottom);
3500
3566
  }
3501
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeader--d053c .bp_calendar_module_calendarHeaderHeading--d053c{
3567
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeader--085e4 .bp_calendar_module_calendarHeaderHeading--085e4{
3502
3568
  flex:1;
3503
3569
  font-family:var(--body-large-bold-font-family);
3504
3570
  font-size:var(--body-large-bold-font-size);
@@ -3512,114 +3578,166 @@
3512
3578
  text-transform:capitalize;
3513
3579
  text-transform:var(--body-large-bold-text-case);
3514
3580
  }
3515
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeader--d053c .bp_calendar_module_calendarHeaderButton--d053c{
3581
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeader--085e4 .bp_calendar_module_calendarHeaderButton--085e4{
3516
3582
  align-items:center;
3517
- background-color:var(--gray-white);
3583
+ background-color:var(--calendar-header-button-background);
3518
3584
  border:none;
3519
- border-radius:var(--radius-2);
3585
+ border-radius:var(--calendar-cell-border-radius);
3520
3586
  cursor:pointer;
3521
3587
  display:flex;
3522
- height:var(--size-8);
3588
+ height:var(--calendar-header-button-size);
3523
3589
  justify-content:center;
3524
3590
  margin:0;
3525
3591
  outline:none;
3526
3592
  padding:0;
3527
- width:var(--size-8);
3593
+ width:var(--calendar-header-button-size);
3528
3594
  }
3529
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeader--d053c .bp_calendar_module_calendarHeaderButton--d053c:disabled{
3595
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeader--085e4 .bp_calendar_module_calendarHeaderButton--085e4:disabled{
3530
3596
  cursor:default;
3531
3597
  opacity:60%;
3532
3598
  }
3533
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeader--d053c .bp_calendar_module_calendarHeaderButton--d053c:disabled *{
3534
- fill:var(--gray-30);
3599
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeader--085e4 .bp_calendar_module_calendarHeaderButton--085e4:disabled *{
3600
+ fill:var(--calendar-disabled-text-color);
3535
3601
  }
3536
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeader--d053c .bp_calendar_module_calendarHeaderButton--d053c:hover:not(:disabled){
3537
- background-color:var(--gray-05);
3602
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeader--085e4 .bp_calendar_module_calendarHeaderButton--085e4:hover:not(:disabled){
3603
+ background-color:var(--calendar-header-button-hover-background);
3538
3604
  }
3539
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeader--d053c .bp_calendar_module_calendarHeaderButton--d053c[data-focus-visible]{
3540
- background-color:var(--gray-05);
3541
- box-shadow:0 0 0 var(--size-05) var(--box-blue-100);
3605
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeader--085e4 .bp_calendar_module_calendarHeaderButton--085e4[data-focus-visible]{
3606
+ background-color:var(--calendar-header-button-hover-background);
3607
+ box-shadow:var(--calendar-header-button-focus-box-shadow);
3542
3608
  }
3543
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c{
3544
- border-radius:var(--radius-2);
3545
- color:var(--gray-90);
3546
- line-height:var(--size-8);
3609
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4{
3610
+ border-radius:var(--calendar-cell-border-radius);
3611
+ color:var(--calendar-cell-text-color);
3612
+ line-height:var(--calendar-cell-size);
3547
3613
  outline:none;
3548
3614
  text-align:center;
3549
- width:var(--size-8);
3615
+ width:var(--calendar-cell-size);
3550
3616
  }
3551
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c.bp_calendar_module_today--d053c{
3552
- color:var(--box-blue-100);
3617
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4.bp_calendar_module_today--085e4{
3618
+ color:var(--calendar-cell-today-text-color);
3553
3619
  font-family:var(--body-default-bold-font-family);
3554
3620
  font-size:var(--body-default-bold-font-size);
3555
3621
  font-weight:var(--body-default-bold-font-weight);
3556
3622
  letter-spacing:var(--body-default-bold-letter-spacing);
3557
3623
  line-height:var(--body-default-bold-line-height);
3558
- line-height:var(--size-8);
3624
+ line-height:var(--calendar-cell-size);
3559
3625
  position:relative;
3560
3626
  -webkit-text-decoration:var(--body-default-bold-text-decoration);
3561
3627
  text-decoration:var(--body-default-bold-text-decoration);
3562
3628
  text-transform:var(--body-default-bold-text-case);
3563
3629
  }
3564
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c.bp_calendar_module_today--d053c[data-disabled]{
3630
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4.bp_calendar_module_today--085e4[data-disabled]{
3565
3631
  cursor:default;
3566
- opacity:.6;
3632
+ opacity:var(--calendar-cell-today-disabled-opacity);
3567
3633
  }
3568
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c.bp_calendar_module_today--d053c::after{
3569
- background-color:var(--box-blue-100);
3634
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4.bp_calendar_module_today--085e4::after{
3635
+ background-color:var(--calendar-cell-today-dot-background);
3570
3636
  border-radius:50%;
3571
- bottom:var(--space-1);
3637
+ bottom:var(--calendar-cell-today-dot-bottom);
3572
3638
  content:"";
3573
- height:var(--space-1);
3639
+ height:var(--calendar-cell-today-dot-diameter);
3574
3640
  left:50%;
3575
3641
  position:absolute;
3576
3642
  transform:translateX(-50%);
3577
- width:var(--space-1);
3643
+ width:var(--calendar-cell-today-dot-diameter);
3578
3644
  }
3579
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c:not([data-outside-month]){
3645
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4:not([data-outside-month]){
3580
3646
  cursor:pointer;
3581
3647
  }
3582
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c:not([data-outside-month]):not([data-selected]):not([data-disabled]):hover{
3583
- background-color:var(--gray-05);
3648
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4:not([data-outside-month]):not([data-selected]):not([data-disabled]):hover{
3649
+ background-color:var(--calendar-cell-hovered-background);
3584
3650
  }
3585
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c[data-focus-visible]:not([data-outside-month]){
3586
- box-shadow:0 0 0 var(--size-05) var(--box-blue-100);
3651
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4[data-focus-visible]:not([data-outside-month]){
3652
+ box-shadow:var(--calendar-cell-focus-box-shadow);
3587
3653
  }
3588
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c[data-selected]{
3589
- background-color:var(--box-blue-100);
3590
- color:var(--gray-white);
3654
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4[data-selected]{
3655
+ background-color:var(--calendar-cell-selected-background);
3656
+ color:var(--calendar-cell-selected-text-color);
3591
3657
  }
3592
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c[data-selected]:hover{
3593
- background-color:var(--dark-blue-100);
3658
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4[data-selected]:hover{
3659
+ background-color:var(--calendar-cell-selected-hovered-background);
3594
3660
  }
3595
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c[data-selected][data-focus-visible]{
3596
- background-color:var(--dark-blue-100);
3597
- box-shadow:0 0 0 var(--size-05) var(--box-blue-100);
3598
- outline:var(--border-1) solid #fff;
3661
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4[data-selected][data-focus-visible]{
3662
+ background-color:var(--calendar-cell-selected-focused-background);
3663
+ box-shadow:var(--calendar-cell-focus-box-shadow);
3664
+ outline:var(--calendar-focus-outline);
3599
3665
  outline-offset:-.0625rem;
3600
3666
  }
3601
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c[data-selected]::after{
3602
- background-color:var(--gray-white);
3667
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4[data-selected]::after{
3668
+ background-color:var(--calendar-cell-selected-text-color);
3603
3669
  }
3604
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c[data-disabled]:not(.bp_calendar_module_today--d053c){
3605
- color:var(--gray-10);
3670
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4[data-disabled]:not(.bp_calendar_module_today--085e4){
3671
+ color:var(--calendar-cell-outside-range-text-color);
3606
3672
  cursor:default;
3607
3673
  }
3608
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c[data-unavailable]{
3609
- color:var(--gray-30);
3674
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4[data-unavailable]{
3675
+ color:var(--calendar-disabled-text-color);
3610
3676
  text-decoration:line-through;
3611
3677
  }
3612
3678
 
3613
- .bp_date_picker_module_datePicker--bba56{
3679
+ .bp_date_picker_module_datePicker--89682[data-modern=false]{
3680
+ --date-picker-label-margin-bottom:var(--space-2);
3681
+ --date-picker-input-placeholder-color:var(--text-text-on-light-secondary);
3682
+ --date-picker-input-placeholder-focused-color:var(--text-text-on-light);
3683
+ --date-picker-input-text-color:var(--text-text-on-light);
3684
+ --date-picker-input-segment-focused-background:var(--light-blue-20);
3685
+ --date-picker-input-inner-shadow:var(--innershadow-1);
3686
+ --date-picker-height:var(--size-10);
3687
+ --date-picker-padding-inline:var(--space-2);
3688
+ --date-picker-border:var(--border-1) solid var(--border-input-border);
3689
+ --date-picker-margin:var(--border-1);
3690
+ --date-picker-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
3691
+ --date-picker-error-outline:var(--border-2) solid var(--text-text-error-on-light);
3692
+ --date-picker-border-radius:var(--radius-2);
3693
+ --date-picker-icon-button-size:var(--size-6);
3694
+ --date-picker-inline-error-margin:var(--space-2);
3695
+ --date-picker-icon-button-border-radius:var(--radius-2);
3696
+ --date-picker-icon-button-focus-background-color:var(--surface-cta-surface-icon-pressed);
3697
+ --date-picker-icon-button-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
3698
+ --date-picker-icon-button-active-background:var(--surface-cta-surface-icon-pressed);
3699
+ --date-picker-icon-button-active-fill:var(--icon-cta-icon-pressed);
3700
+ --date-picker-icon-button-hover-background:var(--surface-cta-surface-icon-hover);
3701
+ --date-picker-icon-button-hover-fill:var(--icon-cta-icon-hover);
3702
+ --date-picker-clear-button-right:var(--size-9);
3703
+ }
3704
+
3705
+ .bp_date_picker_module_datePicker--89682[data-modern=true]{
3706
+ --date-picker-label-margin-bottom:var(--bp-space-020);
3707
+ --date-picker-input-placeholder-color:var(--bp-text-text-on-light-secondary);
3708
+ --date-picker-input-placeholder-focused-color:var(--bp-text-text-on-light);
3709
+ --date-picker-input-text-color:var(--bp-text-text-on-light);
3710
+ --date-picker-input-segment-focused-background:var(--bp-light-blue-20);
3711
+ --date-picker-input-inner-shadow:var(--innershadow-1);
3712
+ --date-picker-height:var(--bp-size-100);
3713
+ --date-picker-padding-inline:var(--bp-space-020);
3714
+ --date-picker-border:var(--bp-border-01) solid var(--bp-border-input-border);
3715
+ --date-picker-margin:var(--border-1);
3716
+ --date-picker-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
3717
+ --date-picker-error-outline:var(--bp-border-02) solid var(--bp-text-text-error-on-light);
3718
+ --date-picker-border-radius:var(--bp-radius-06);
3719
+ --date-picker-icon-button-size:var(--bp-size-060);
3720
+ --date-picker-inline-error-margin:var(--bp-space-020);
3721
+ --date-picker-icon-button-border-radius:var(--bp-radius-06);
3722
+ --date-picker-icon-button-focus-background-color:var(--bp-surface-cta-surface-icon-pressed);
3723
+ --date-picker-icon-button-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
3724
+ --date-picker-icon-button-active-background:var(--bp-surface-cta-surface-icon-pressed);
3725
+ --date-picker-icon-button-active-fill:var(--bp-icon-cta-icon-pressed);
3726
+ --date-picker-icon-button-hover-background:var(--bp-surface-cta-surface-icon-hover);
3727
+ --date-picker-icon-button-hover-fill:var(--bp-icon-cta-icon-hover);
3728
+ --date-picker-clear-button-right:var(--bp-size-090);
3729
+ }
3730
+
3731
+ .bp_date_picker_module_datePicker--89682{
3614
3732
  width:100%;
3615
3733
  }
3616
- .bp_date_picker_module_datePicker--bba56.bp_date_picker_module_disabled--bba56{
3734
+ .bp_date_picker_module_datePicker--89682.bp_date_picker_module_disabled--89682{
3617
3735
  opacity:60%;
3618
3736
  pointer-events:none;
3619
3737
  -webkit-user-select:none;
3620
3738
  user-select:none;
3621
3739
  }
3622
- .bp_date_picker_module_datePicker--bba56 .bp_date_picker_module_label--bba56{
3740
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_label--89682{
3623
3741
  cursor:default;
3624
3742
  display:block;
3625
3743
  font-family:var(--body-default-bold-font-family);
@@ -3627,16 +3745,15 @@
3627
3745
  font-weight:var(--body-default-bold-font-weight);
3628
3746
  letter-spacing:var(--body-default-bold-letter-spacing);
3629
3747
  line-height:var(--body-default-bold-line-height);
3630
- margin-block-end:var(--space-2);
3748
+ margin-block-end:var(--date-picker-label-margin-bottom);
3631
3749
  -webkit-text-decoration:var(--body-default-bold-text-decoration);
3632
3750
  text-decoration:var(--body-default-bold-text-decoration);
3633
3751
  text-transform:var(--body-default-bold-text-case);
3634
3752
  width:-moz-fit-content;
3635
3753
  width:fit-content;
3636
3754
  }
3637
- .bp_date_picker_module_datePicker--bba56 .bp_date_picker_module_group--bba56{
3755
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682{
3638
3756
  align-items:center;
3639
- box-shadow:var(--innershadow-1);
3640
3757
  display:inline-flex;
3641
3758
  font-family:var(--body-default-font-family);
3642
3759
  font-size:var(--body-default-font-size);
@@ -3649,95 +3766,97 @@
3649
3766
  text-transform:var(--body-default-text-case);
3650
3767
  width:100%;
3651
3768
  }
3652
- .bp_date_picker_module_datePicker--bba56 .bp_date_picker_module_group--bba56 .bp_date_picker_module_groupContainer--bba56{
3769
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_groupContainer--89682{
3653
3770
  align-items:center;
3654
- border-radius:var(--radius-2);
3771
+ border-radius:var(--date-picker-border-radius);
3772
+ box-shadow:var(--date-picker-input-inner-shadow);
3655
3773
  display:inline-flex;
3656
- outline:var(--border-1) solid var(--border-input-border);
3657
- padding-inline:var(--space-2) var(--space-2);
3774
+ margin:var(--date-picker-margin);
3775
+ outline:var(--date-picker-border);
3776
+ padding-inline:var(--date-picker-padding-inline);
3658
3777
  position:relative;
3659
3778
  width:100%;
3660
3779
  }
3661
- .bp_date_picker_module_datePicker--bba56 .bp_date_picker_module_group--bba56 .bp_date_picker_module_groupContainer--bba56:focus-within{
3662
- outline:var(--border-2) solid var(--outline-focus-on-light);
3780
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_groupContainer--89682:focus-within{
3781
+ outline:var(--date-picker-focus-outline);
3663
3782
  }
3664
- .bp_date_picker_module_datePicker--bba56 .bp_date_picker_module_group--bba56 .bp_date_picker_module_groupContainer--bba56.bp_date_picker_module_error--bba56:not(:focus-within){
3665
- outline:var(--border-2) solid var(--text-text-error-on-light);
3783
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_groupContainer--89682.bp_date_picker_module_error--89682:not(:focus-within){
3784
+ outline:var(--date-picker-error-outline);
3666
3785
  }
3667
- .bp_date_picker_module_datePicker--bba56 .bp_date_picker_module_group--bba56 .bp_date_picker_module_groupContainer--bba56.bp_date_picker_module_error--bba56:focus-within{
3668
- outline:var(--border-2) solid var(--outline-focus-on-light);
3786
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_groupContainer--89682.bp_date_picker_module_error--89682:focus-within{
3787
+ outline:var(--date-picker-focus-outline);
3669
3788
  }
3670
- .bp_date_picker_module_datePicker--bba56 .bp_date_picker_module_group--bba56 .bp_date_picker_module_groupContainer--bba56 .bp_date_picker_module_groupContainerInput--bba56{
3789
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_groupContainer--89682 .bp_date_picker_module_groupContainerInput--89682{
3671
3790
  align-items:center;
3672
3791
  display:inline-flex;
3673
- height:var(--size-10);
3792
+ height:var(--date-picker-height);
3674
3793
  text-transform:uppercase;
3675
3794
  white-space:nowrap;
3676
3795
  }
3677
- .bp_date_picker_module_datePicker--bba56 .bp_date_picker_module_group--bba56 .bp_date_picker_module_groupContainer--bba56 .bp_date_picker_module_groupContainerInput--bba56 .bp_date_picker_module_groupContainerInputSegment--bba56{
3796
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_groupContainer--89682 .bp_date_picker_module_groupContainerInput--89682 .bp_date_picker_module_groupContainerInputSegment--89682{
3678
3797
  border:unset;
3679
3798
  border-radius:unset;
3680
3799
  box-shadow:unset;
3681
- color:var(--text-text-on-light);
3800
+ color:var(--date-picker-input-text-color);
3682
3801
  height:-moz-fit-content;
3683
3802
  height:fit-content;
3684
3803
  padding:unset;
3685
3804
  transition:unset;
3686
3805
  width:unset;
3687
3806
  }
3688
- .bp_date_picker_module_datePicker--bba56 .bp_date_picker_module_group--bba56 .bp_date_picker_module_groupContainer--bba56 .bp_date_picker_module_groupContainerInput--bba56 .bp_date_picker_module_groupContainerInputSegment--bba56[data-placeholder]{
3689
- color:var(--text-text-on-light-secondary);
3807
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_groupContainer--89682 .bp_date_picker_module_groupContainerInput--89682 .bp_date_picker_module_groupContainerInputSegment--89682[data-placeholder]{
3808
+ color:var(--date-picker-input-placeholder-color);
3690
3809
  }
3691
- .bp_date_picker_module_datePicker--bba56 .bp_date_picker_module_group--bba56 .bp_date_picker_module_groupContainer--bba56 .bp_date_picker_module_groupContainerInput--bba56 .bp_date_picker_module_groupContainerInputSegment--bba56:focus{
3692
- background:var(--light-blue-20);
3810
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_groupContainer--89682 .bp_date_picker_module_groupContainerInput--89682 .bp_date_picker_module_groupContainerInputSegment--89682:focus{
3811
+ background:var(--date-picker-input-segment-focused-background);
3693
3812
  caret-color:#0000;
3694
3813
  outline:none;
3695
3814
  }
3696
- .bp_date_picker_module_datePicker--bba56 .bp_date_picker_module_group--bba56 .bp_date_picker_module_groupContainer--bba56 .bp_date_picker_module_groupContainerInput--bba56 .bp_date_picker_module_groupContainerInputSegment--bba56:focus[data-placeholder]{
3697
- color:var(--text-text-on-light);
3815
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_groupContainer--89682 .bp_date_picker_module_groupContainerInput--89682 .bp_date_picker_module_groupContainerInputSegment--89682:focus[data-placeholder]{
3816
+ color:var(--date-picker-input-placeholder-focused-color);
3698
3817
  }
3699
- .bp_date_picker_module_datePicker--bba56 .bp_date_picker_module_group--bba56 .bp_date_picker_module_button--bba56{
3818
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682{
3700
3819
  align-items:center;
3701
3820
  background-color:initial;
3702
3821
  border:none;
3703
- border-radius:var(--radius-2);
3822
+ border-radius:var(--date-picker-icon-button-border-radius);
3704
3823
  cursor:pointer;
3705
3824
  display:flex;
3706
- height:var(--size-6);
3825
+ height:var(--date-picker-icon-button-size);
3707
3826
  justify-content:center;
3708
3827
  outline:none;
3709
3828
  padding:0;
3710
3829
  position:absolute;
3711
- right:var(--space-2);
3712
- width:var(--size-6);
3830
+ right:var(--date-picker-padding-inline);
3831
+ width:var(--date-picker-icon-button-size);
3713
3832
  }
3714
- .bp_date_picker_module_datePicker--bba56 .bp_date_picker_module_group--bba56 .bp_date_picker_module_button--bba56.bp_date_picker_module_clear--bba56{
3715
- right:var(--size-9);
3833
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682.bp_date_picker_module_clear--89682{
3834
+ right:var(--date-picker-clear-button-right);
3716
3835
  }
3717
- .bp_date_picker_module_datePicker--bba56 .bp_date_picker_module_group--bba56 .bp_date_picker_module_button--bba56:focus-visible,.bp_date_picker_module_datePicker--bba56 .bp_date_picker_module_group--bba56 .bp_date_picker_module_button--bba56[data-focus-visible]{
3718
- background-color:var(--surface-cta-surface-icon-pressed);
3719
- outline:var(--border-2) solid var(--outline-focus-on-light);
3836
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682:focus-visible,.bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682[data-focus-visible]{
3837
+ background-color:var(--date-picker-icon-button-focus-background-color);
3838
+ outline:var(--date-picker-icon-button-focus-outline);
3720
3839
  }
3721
- .bp_date_picker_module_datePicker--bba56 .bp_date_picker_module_group--bba56 .bp_date_picker_module_button--bba56:hover{
3722
- background:var(--surface-cta-surface-icon-hover);
3840
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682:hover{
3841
+ background:var(--date-picker-icon-button-hover-background);
3723
3842
  }
3724
- .bp_date_picker_module_datePicker--bba56 .bp_date_picker_module_group--bba56 .bp_date_picker_module_button--bba56:hover *{
3725
- fill:var(--icon-cta-icon-hover);
3843
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682:hover *{
3844
+ fill:var(--date-picker-icon-button-hover-fill);
3726
3845
  }
3727
- .bp_date_picker_module_datePicker--bba56 .bp_date_picker_module_group--bba56 .bp_date_picker_module_button--bba56:active{
3728
- background:var(--surface-cta-surface-icon-pressed);
3846
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682:active{
3847
+ background:var(--date-picker-icon-button-active-background);
3729
3848
  }
3730
- .bp_date_picker_module_datePicker--bba56 .bp_date_picker_module_group--bba56 .bp_date_picker_module_button--bba56:active *{
3731
- fill:var(--icon-cta-icon-pressed);
3849
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682:active *{
3850
+ fill:var(--date-picker-icon-button-active-fill);
3732
3851
  }
3733
- .bp_date_picker_module_datePicker--bba56 .bp_date_picker_module_group--bba56 .bp_date_picker_module_button--bba56:disabled{
3852
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682:disabled{
3734
3853
  opacity:1;
3735
3854
  }
3736
- .bp_date_picker_module_datePicker--bba56 .bp_date_picker_module_inlineError--bba56{
3737
- margin-block-start:var(--space-2);
3855
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_inlineError--89682{
3856
+ margin-block-start:var(--date-picker-inline-error-margin);
3738
3857
  }
3739
3858
 
3740
- @keyframes bp_date_picker_module_slide--bba56{
3859
+ @keyframes bp_date_picker_module_slide--89682{
3741
3860
  from{
3742
3861
  opacity:0;
3743
3862
  transform:var(--popover-slide-translation);
@@ -3747,7 +3866,7 @@
3747
3866
  transform:translateY(0);
3748
3867
  }
3749
3868
  }
3750
- .bp_date_picker_module_datePickerPopoverContent--bba56{
3869
+ .bp_date_picker_module_datePickerPopoverContent--89682{
3751
3870
  z-index:380;
3752
3871
  }
3753
3872
 
package/dist/lib-esm/primitives/calendar/calendar.js CHANGED
@@ -5,6 +5,7 @@ import { isSameDay, today, getLocalTimeZone } from '@internationalized/date';
5
5
  import { clsx } from 'clsx';
6
6
  import { forwardRef, useRef, useEffect } from 'react';
7
7
  import { Calendar as Calendar$1, Button, Heading, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell } from 'react-aria-components';
8
+ import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
8
9
  import styles from './calendar.module.js';
9
10
 
10
11
  // Dispatch duplicated event with bubbling enabled, so Radix popover knows that this click happened.
@@ -61,11 +62,15 @@ const Calendar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
61
62
  nextMonthAriaLabel,
62
63
  ...rest
63
64
  } = props;
65
+ const {
66
+ enableModernizedComponents
67
+ } = useBlueprintModernization();
64
68
  return jsxs(Calendar$1, {
65
69
  ...rest,
66
70
  ref: forwardedRef,
67
71
  "aria-label": calendarAriaLabel,
68
72
  className: clsx(styles.calendar, className),
73
+ "data-modern": enableModernizedComponents,
69
74
  children: [jsxs("header", {
70
75
  className: styles.calendarHeader,
71
76
  children: [jsx(Button, {
package/dist/lib-esm/primitives/calendar/calendar.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../../index.css';
2
- var styles = {"calendar":"bp_calendar_module_calendar--d053c","calendarGrid":"bp_calendar_module_calendarGrid--d053c","calendarHeaderCell":"bp_calendar_module_calendarHeaderCell--d053c","calendarHeader":"bp_calendar_module_calendarHeader--d053c","calendarHeaderHeading":"bp_calendar_module_calendarHeaderHeading--d053c","calendarHeaderButton":"bp_calendar_module_calendarHeaderButton--d053c","calendarCell":"bp_calendar_module_calendarCell--d053c","today":"bp_calendar_module_today--d053c"};
2
+ var styles = {"calendar":"bp_calendar_module_calendar--085e4","calendarGrid":"bp_calendar_module_calendarGrid--085e4","calendarHeaderCell":"bp_calendar_module_calendarHeaderCell--085e4","calendarHeader":"bp_calendar_module_calendarHeader--085e4","calendarHeaderHeading":"bp_calendar_module_calendarHeaderHeading--085e4","calendarHeaderButton":"bp_calendar_module_calendarHeaderButton--085e4","calendarCell":"bp_calendar_module_calendarCell--085e4","today":"bp_calendar_module_today--085e4"};
3
3
 
4
4
  export { styles as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "12.25.0",
3
+ "version": "12.27.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {