@box/blueprint-web 12.77.2 → 12.77.4
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.
|
@@ -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--bf2e1","label":"bp_date_picker_module_label--bf2e1","disabled":"bp_date_picker_module_disabled--bf2e1","group":"bp_date_picker_module_group--bf2e1","groupContainer":"bp_date_picker_module_groupContainer--bf2e1","error":"bp_date_picker_module_error--bf2e1","groupContainerInput":"bp_date_picker_module_groupContainerInput--bf2e1","groupContainerInputSegment":"bp_date_picker_module_groupContainerInputSegment--bf2e1","button":"bp_date_picker_module_button--bf2e1","clear":"bp_date_picker_module_clear--bf2e1","inlineError":"bp_date_picker_module_inlineError--bf2e1","datePickerPopoverContent":"bp_date_picker_module_datePickerPopoverContent--bf2e1","slide":"bp_date_picker_module_slide--bf2e1"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
package/dist/lib-esm/index.css
CHANGED
|
@@ -4434,7 +4434,7 @@
|
|
|
4434
4434
|
z-index:-1;
|
|
4435
4435
|
}
|
|
4436
4436
|
|
|
4437
|
-
.bp_calendar_module_calendar--
|
|
4437
|
+
.bp_calendar_module_calendar--98baa[data-modern=false]{
|
|
4438
4438
|
--calendar-background:var(--gray-white);
|
|
4439
4439
|
--calendar-padding-inline:var(--space-4);
|
|
4440
4440
|
--calendar-padding-block:var(--space-4);
|
|
@@ -4467,7 +4467,7 @@
|
|
|
4467
4467
|
--calendar-focus-outline:var(--border-1) solid #fff;
|
|
4468
4468
|
}
|
|
4469
4469
|
|
|
4470
|
-
.bp_calendar_module_calendar--
|
|
4470
|
+
.bp_calendar_module_calendar--98baa[data-modern=true]{
|
|
4471
4471
|
--calendar-background:var(--bp-gray-white);
|
|
4472
4472
|
--calendar-padding-inline:var(--bp-space-040);
|
|
4473
4473
|
--calendar-padding-block:var(--bp-space-040);
|
|
@@ -4479,15 +4479,15 @@
|
|
|
4479
4479
|
--calendar-cell-selected-focused-background:var(--bp-dark-blue-100);
|
|
4480
4480
|
--calendar-cell-outside-range-text-color:var(--bp-gray-10);
|
|
4481
4481
|
--calendar-cell-selected-text-color:var(--bp-gray-white);
|
|
4482
|
-
--calendar-cell-border-radius:var(--bp-radius-
|
|
4483
|
-
--calendar-cell-text-color:var(--bp-
|
|
4482
|
+
--calendar-cell-border-radius:var(--bp-radius-04);
|
|
4483
|
+
--calendar-cell-text-color:var(--bp-text-text-on-light);
|
|
4484
4484
|
--calendar-cell-today-text-color:var(--bp-box-blue-100);
|
|
4485
4485
|
--calendar-cell-today-disabled-opacity:.6;
|
|
4486
4486
|
--calendar-cell-today-dot-diameter:var(--bp-space-010);
|
|
4487
4487
|
--calendar-cell-today-dot-background:var(--bp-box-blue-100);
|
|
4488
4488
|
--calendar-cell-today-dot-bottom:var(--bp-space-010);
|
|
4489
4489
|
--calendar-cell-size:var(--bp-size-080);
|
|
4490
|
-
--calendar-cell-focus-box-shadow:0 0 0 var(--bp-size-005) var(--bp-
|
|
4490
|
+
--calendar-cell-focus-box-shadow:0 0 0 var(--bp-size-005) var(--bp-outline-focus-on-light);
|
|
4491
4491
|
--calendar-header-text-color:var(--bp-text-text-on-light);
|
|
4492
4492
|
--calendar-header-button-background:var(--bp-gray-white);
|
|
4493
4493
|
--calendar-header-button-hover-background:var(--bp-gray-05);
|
|
@@ -4499,8 +4499,22 @@
|
|
|
4499
4499
|
--calendar-disabled-text-color:var(--bp-gray-30);
|
|
4500
4500
|
--calendar-focus-outline:var(--bp-border-01) solid #fff;
|
|
4501
4501
|
}
|
|
4502
|
+
.bp_calendar_module_calendar--98baa[data-modern=true] .bp_calendar_module_calendarHeaderCell--98baa{
|
|
4503
|
+
height:var(--calendar-cell-size);
|
|
4504
|
+
padding:0;
|
|
4505
|
+
}
|
|
4506
|
+
.bp_calendar_module_calendar--98baa[data-modern=true] .bp_calendar_module_calendarHeader--98baa{
|
|
4507
|
+
height:var(--calendar-cell-size);
|
|
4508
|
+
margin-block:var(--bp-space-010);
|
|
4509
|
+
}
|
|
4510
|
+
.bp_calendar_module_calendar--98baa[data-modern=true] .bp_calendar_module_calendarHeaderButton--98baa{
|
|
4511
|
+
height:var(--calendar-header-button-size);
|
|
4512
|
+
margin:0;
|
|
4513
|
+
padding:0;
|
|
4514
|
+
width:var(--calendar-header-button-size);
|
|
4515
|
+
}
|
|
4502
4516
|
|
|
4503
|
-
.bp_calendar_module_calendar--
|
|
4517
|
+
.bp_calendar_module_calendar--98baa{
|
|
4504
4518
|
background:var(--calendar-background);
|
|
4505
4519
|
border-radius:var(--calendar-border-radius);
|
|
4506
4520
|
box-shadow:var(--calendar-box-shadow);
|
|
@@ -4518,14 +4532,14 @@
|
|
|
4518
4532
|
width:-moz-fit-content;
|
|
4519
4533
|
width:fit-content;
|
|
4520
4534
|
}
|
|
4521
|
-
.bp_calendar_module_calendar--
|
|
4535
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarGrid--98baa{
|
|
4522
4536
|
border-collapse:revert;
|
|
4523
4537
|
border-spacing:revert;
|
|
4524
4538
|
}
|
|
4525
|
-
.bp_calendar_module_calendar--
|
|
4539
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarGrid--98baa td{
|
|
4526
4540
|
padding:1px;
|
|
4527
4541
|
}
|
|
4528
|
-
.bp_calendar_module_calendar--
|
|
4542
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarHeaderCell--98baa{
|
|
4529
4543
|
color:var(--calendar-header-cell-text-color);
|
|
4530
4544
|
font-family:var(--body-default-font-family);
|
|
4531
4545
|
font-size:var(--body-default-font-size);
|
|
@@ -4537,13 +4551,13 @@
|
|
|
4537
4551
|
text-decoration:var(--body-default-text-decoration);
|
|
4538
4552
|
text-transform:var(--body-default-text-case);
|
|
4539
4553
|
}
|
|
4540
|
-
.bp_calendar_module_calendar--
|
|
4554
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarHeader--98baa{
|
|
4541
4555
|
align-items:center;
|
|
4542
4556
|
color:var(--calendar-header-text-color);
|
|
4543
4557
|
display:flex;
|
|
4544
4558
|
margin-block-end:var(--calendar-header-margin-bottom);
|
|
4545
4559
|
}
|
|
4546
|
-
.bp_calendar_module_calendar--
|
|
4560
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarHeader--98baa .bp_calendar_module_calendarHeaderHeading--98baa{
|
|
4547
4561
|
flex:1;
|
|
4548
4562
|
font-family:var(--body-large-bold-font-family);
|
|
4549
4563
|
font-size:var(--body-large-bold-font-size);
|
|
@@ -4557,7 +4571,7 @@
|
|
|
4557
4571
|
text-transform:capitalize;
|
|
4558
4572
|
text-transform:var(--body-large-bold-text-case);
|
|
4559
4573
|
}
|
|
4560
|
-
.bp_calendar_module_calendar--
|
|
4574
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarHeader--98baa .bp_calendar_module_calendarHeaderButton--98baa{
|
|
4561
4575
|
align-items:center;
|
|
4562
4576
|
background-color:var(--calendar-header-button-background);
|
|
4563
4577
|
border:none;
|
|
@@ -4571,21 +4585,21 @@
|
|
|
4571
4585
|
padding:0;
|
|
4572
4586
|
width:var(--calendar-header-button-size);
|
|
4573
4587
|
}
|
|
4574
|
-
.bp_calendar_module_calendar--
|
|
4588
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarHeader--98baa .bp_calendar_module_calendarHeaderButton--98baa:disabled{
|
|
4575
4589
|
cursor:default;
|
|
4576
4590
|
opacity:60%;
|
|
4577
4591
|
}
|
|
4578
|
-
.bp_calendar_module_calendar--
|
|
4592
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarHeader--98baa .bp_calendar_module_calendarHeaderButton--98baa:disabled *{
|
|
4579
4593
|
fill:var(--calendar-disabled-text-color);
|
|
4580
4594
|
}
|
|
4581
|
-
.bp_calendar_module_calendar--
|
|
4595
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarHeader--98baa .bp_calendar_module_calendarHeaderButton--98baa:hover:not(:disabled){
|
|
4582
4596
|
background-color:var(--calendar-header-button-hover-background);
|
|
4583
4597
|
}
|
|
4584
|
-
.bp_calendar_module_calendar--
|
|
4598
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarHeader--98baa .bp_calendar_module_calendarHeaderButton--98baa[data-focus-visible]{
|
|
4585
4599
|
background-color:var(--calendar-header-button-hover-background);
|
|
4586
4600
|
box-shadow:var(--calendar-header-button-focus-box-shadow);
|
|
4587
4601
|
}
|
|
4588
|
-
.bp_calendar_module_calendar--
|
|
4602
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarCell--98baa{
|
|
4589
4603
|
border-radius:var(--calendar-cell-border-radius);
|
|
4590
4604
|
color:var(--calendar-cell-text-color);
|
|
4591
4605
|
line-height:var(--calendar-cell-size);
|
|
@@ -4593,7 +4607,7 @@
|
|
|
4593
4607
|
text-align:center;
|
|
4594
4608
|
width:var(--calendar-cell-size);
|
|
4595
4609
|
}
|
|
4596
|
-
.bp_calendar_module_calendar--
|
|
4610
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarCell--98baa.bp_calendar_module_today--98baa{
|
|
4597
4611
|
color:var(--calendar-cell-today-text-color);
|
|
4598
4612
|
font-family:var(--body-default-bold-font-family);
|
|
4599
4613
|
font-size:var(--body-default-bold-font-size);
|
|
@@ -4606,11 +4620,11 @@
|
|
|
4606
4620
|
text-decoration:var(--body-default-bold-text-decoration);
|
|
4607
4621
|
text-transform:var(--body-default-bold-text-case);
|
|
4608
4622
|
}
|
|
4609
|
-
.bp_calendar_module_calendar--
|
|
4623
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarCell--98baa.bp_calendar_module_today--98baa[data-disabled]{
|
|
4610
4624
|
cursor:default;
|
|
4611
4625
|
opacity:var(--calendar-cell-today-disabled-opacity);
|
|
4612
4626
|
}
|
|
4613
|
-
.bp_calendar_module_calendar--
|
|
4627
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarCell--98baa.bp_calendar_module_today--98baa::after{
|
|
4614
4628
|
background-color:var(--calendar-cell-today-dot-background);
|
|
4615
4629
|
border-radius:50%;
|
|
4616
4630
|
bottom:var(--calendar-cell-today-dot-bottom);
|
|
@@ -4621,41 +4635,41 @@
|
|
|
4621
4635
|
transform:translateX(-50%);
|
|
4622
4636
|
width:var(--calendar-cell-today-dot-diameter);
|
|
4623
4637
|
}
|
|
4624
|
-
.bp_calendar_module_calendar--
|
|
4638
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarCell--98baa:not([data-outside-month]){
|
|
4625
4639
|
cursor:pointer;
|
|
4626
4640
|
}
|
|
4627
|
-
.bp_calendar_module_calendar--
|
|
4641
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarCell--98baa:not([data-outside-month]):not([data-selected]):not([data-disabled]):hover{
|
|
4628
4642
|
background-color:var(--calendar-cell-hovered-background);
|
|
4629
4643
|
}
|
|
4630
|
-
.bp_calendar_module_calendar--
|
|
4644
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarCell--98baa[data-focus-visible]:not([data-outside-month]){
|
|
4631
4645
|
box-shadow:var(--calendar-cell-focus-box-shadow);
|
|
4632
4646
|
}
|
|
4633
|
-
.bp_calendar_module_calendar--
|
|
4647
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarCell--98baa[data-selected]{
|
|
4634
4648
|
background-color:var(--calendar-cell-selected-background);
|
|
4635
4649
|
color:var(--calendar-cell-selected-text-color);
|
|
4636
4650
|
}
|
|
4637
|
-
.bp_calendar_module_calendar--
|
|
4651
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarCell--98baa[data-selected]:hover{
|
|
4638
4652
|
background-color:var(--calendar-cell-selected-hovered-background);
|
|
4639
4653
|
}
|
|
4640
|
-
.bp_calendar_module_calendar--
|
|
4654
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarCell--98baa[data-selected][data-focus-visible]{
|
|
4641
4655
|
background-color:var(--calendar-cell-selected-focused-background);
|
|
4642
4656
|
box-shadow:var(--calendar-cell-focus-box-shadow);
|
|
4643
4657
|
outline:var(--calendar-focus-outline);
|
|
4644
4658
|
outline-offset:-.0625rem;
|
|
4645
4659
|
}
|
|
4646
|
-
.bp_calendar_module_calendar--
|
|
4660
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarCell--98baa[data-selected]::after{
|
|
4647
4661
|
background-color:var(--calendar-cell-selected-text-color);
|
|
4648
4662
|
}
|
|
4649
|
-
.bp_calendar_module_calendar--
|
|
4663
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarCell--98baa[data-disabled]:not(.bp_calendar_module_today--98baa){
|
|
4650
4664
|
color:var(--calendar-cell-outside-range-text-color);
|
|
4651
4665
|
cursor:default;
|
|
4652
4666
|
}
|
|
4653
|
-
.bp_calendar_module_calendar--
|
|
4667
|
+
.bp_calendar_module_calendar--98baa .bp_calendar_module_calendarCell--98baa[data-unavailable]{
|
|
4654
4668
|
color:var(--calendar-disabled-text-color);
|
|
4655
4669
|
text-decoration:line-through;
|
|
4656
4670
|
}
|
|
4657
4671
|
|
|
4658
|
-
.bp_date_picker_module_datePicker--
|
|
4672
|
+
.bp_date_picker_module_datePicker--bf2e1[data-modern=false]{
|
|
4659
4673
|
--date-picker-label-margin-bottom:var(--space-2);
|
|
4660
4674
|
--date-picker-input-placeholder-color:var(--text-text-on-light-secondary);
|
|
4661
4675
|
--date-picker-input-placeholder-focused-color:var(--text-text-on-light);
|
|
@@ -4681,7 +4695,7 @@
|
|
|
4681
4695
|
--date-picker-clear-button-right:var(--size-9);
|
|
4682
4696
|
}
|
|
4683
4697
|
|
|
4684
|
-
.bp_date_picker_module_datePicker--
|
|
4698
|
+
.bp_date_picker_module_datePicker--bf2e1[data-modern=true]{
|
|
4685
4699
|
--date-picker-label-margin-bottom:var(--bp-space-020);
|
|
4686
4700
|
--date-picker-input-placeholder-color:var(--bp-text-text-on-light-secondary);
|
|
4687
4701
|
--date-picker-input-placeholder-focused-color:var(--bp-text-text-on-light);
|
|
@@ -4706,17 +4720,20 @@
|
|
|
4706
4720
|
--date-picker-icon-button-hover-fill:var(--bp-icon-cta-icon-hover);
|
|
4707
4721
|
--date-picker-clear-button-right:var(--bp-size-090);
|
|
4708
4722
|
}
|
|
4723
|
+
.bp_date_picker_module_datePicker--bf2e1[data-modern=true] .bp_date_picker_module_label--bf2e1{
|
|
4724
|
+
color:var(--bp-text-text-on-light);
|
|
4725
|
+
}
|
|
4709
4726
|
|
|
4710
|
-
.bp_date_picker_module_datePicker--
|
|
4727
|
+
.bp_date_picker_module_datePicker--bf2e1{
|
|
4711
4728
|
width:100%;
|
|
4712
4729
|
}
|
|
4713
|
-
.bp_date_picker_module_datePicker--
|
|
4730
|
+
.bp_date_picker_module_datePicker--bf2e1.bp_date_picker_module_disabled--bf2e1{
|
|
4714
4731
|
opacity:60%;
|
|
4715
4732
|
pointer-events:none;
|
|
4716
4733
|
-webkit-user-select:none;
|
|
4717
4734
|
user-select:none;
|
|
4718
4735
|
}
|
|
4719
|
-
.bp_date_picker_module_datePicker--
|
|
4736
|
+
.bp_date_picker_module_datePicker--bf2e1 .bp_date_picker_module_label--bf2e1{
|
|
4720
4737
|
cursor:default;
|
|
4721
4738
|
display:block;
|
|
4722
4739
|
font-family:var(--body-default-bold-font-family);
|
|
@@ -4731,7 +4748,7 @@
|
|
|
4731
4748
|
width:-moz-fit-content;
|
|
4732
4749
|
width:fit-content;
|
|
4733
4750
|
}
|
|
4734
|
-
.bp_date_picker_module_datePicker--
|
|
4751
|
+
.bp_date_picker_module_datePicker--bf2e1 .bp_date_picker_module_group--bf2e1{
|
|
4735
4752
|
align-items:center;
|
|
4736
4753
|
display:inline-flex;
|
|
4737
4754
|
font-family:var(--body-default-font-family);
|
|
@@ -4745,7 +4762,7 @@
|
|
|
4745
4762
|
text-transform:var(--body-default-text-case);
|
|
4746
4763
|
width:100%;
|
|
4747
4764
|
}
|
|
4748
|
-
.bp_date_picker_module_datePicker--
|
|
4765
|
+
.bp_date_picker_module_datePicker--bf2e1 .bp_date_picker_module_group--bf2e1 .bp_date_picker_module_groupContainer--bf2e1{
|
|
4749
4766
|
align-items:center;
|
|
4750
4767
|
border-radius:var(--date-picker-border-radius);
|
|
4751
4768
|
box-shadow:var(--date-picker-input-inner-shadow);
|
|
@@ -4756,23 +4773,23 @@
|
|
|
4756
4773
|
position:relative;
|
|
4757
4774
|
width:100%;
|
|
4758
4775
|
}
|
|
4759
|
-
.bp_date_picker_module_datePicker--
|
|
4776
|
+
.bp_date_picker_module_datePicker--bf2e1 .bp_date_picker_module_group--bf2e1 .bp_date_picker_module_groupContainer--bf2e1:focus-within{
|
|
4760
4777
|
outline:var(--date-picker-focus-outline);
|
|
4761
4778
|
}
|
|
4762
|
-
.bp_date_picker_module_datePicker--
|
|
4779
|
+
.bp_date_picker_module_datePicker--bf2e1 .bp_date_picker_module_group--bf2e1 .bp_date_picker_module_groupContainer--bf2e1.bp_date_picker_module_error--bf2e1:not(:focus-within){
|
|
4763
4780
|
outline:var(--date-picker-error-outline);
|
|
4764
4781
|
}
|
|
4765
|
-
.bp_date_picker_module_datePicker--
|
|
4782
|
+
.bp_date_picker_module_datePicker--bf2e1 .bp_date_picker_module_group--bf2e1 .bp_date_picker_module_groupContainer--bf2e1.bp_date_picker_module_error--bf2e1:focus-within{
|
|
4766
4783
|
outline:var(--date-picker-focus-outline);
|
|
4767
4784
|
}
|
|
4768
|
-
.bp_date_picker_module_datePicker--
|
|
4785
|
+
.bp_date_picker_module_datePicker--bf2e1 .bp_date_picker_module_group--bf2e1 .bp_date_picker_module_groupContainer--bf2e1 .bp_date_picker_module_groupContainerInput--bf2e1{
|
|
4769
4786
|
align-items:center;
|
|
4770
4787
|
display:inline-flex;
|
|
4771
4788
|
height:var(--date-picker-height);
|
|
4772
4789
|
text-transform:uppercase;
|
|
4773
4790
|
white-space:nowrap;
|
|
4774
4791
|
}
|
|
4775
|
-
.bp_date_picker_module_datePicker--
|
|
4792
|
+
.bp_date_picker_module_datePicker--bf2e1 .bp_date_picker_module_group--bf2e1 .bp_date_picker_module_groupContainer--bf2e1 .bp_date_picker_module_groupContainerInput--bf2e1 .bp_date_picker_module_groupContainerInputSegment--bf2e1{
|
|
4776
4793
|
border:unset;
|
|
4777
4794
|
border-radius:unset;
|
|
4778
4795
|
box-shadow:unset;
|
|
@@ -4783,18 +4800,18 @@
|
|
|
4783
4800
|
transition:unset;
|
|
4784
4801
|
width:unset;
|
|
4785
4802
|
}
|
|
4786
|
-
.bp_date_picker_module_datePicker--
|
|
4803
|
+
.bp_date_picker_module_datePicker--bf2e1 .bp_date_picker_module_group--bf2e1 .bp_date_picker_module_groupContainer--bf2e1 .bp_date_picker_module_groupContainerInput--bf2e1 .bp_date_picker_module_groupContainerInputSegment--bf2e1[data-placeholder]{
|
|
4787
4804
|
color:var(--date-picker-input-placeholder-color);
|
|
4788
4805
|
}
|
|
4789
|
-
.bp_date_picker_module_datePicker--
|
|
4806
|
+
.bp_date_picker_module_datePicker--bf2e1 .bp_date_picker_module_group--bf2e1 .bp_date_picker_module_groupContainer--bf2e1 .bp_date_picker_module_groupContainerInput--bf2e1 .bp_date_picker_module_groupContainerInputSegment--bf2e1:focus{
|
|
4790
4807
|
background:var(--date-picker-input-segment-focused-background);
|
|
4791
4808
|
caret-color:#0000;
|
|
4792
4809
|
outline:none;
|
|
4793
4810
|
}
|
|
4794
|
-
.bp_date_picker_module_datePicker--
|
|
4811
|
+
.bp_date_picker_module_datePicker--bf2e1 .bp_date_picker_module_group--bf2e1 .bp_date_picker_module_groupContainer--bf2e1 .bp_date_picker_module_groupContainerInput--bf2e1 .bp_date_picker_module_groupContainerInputSegment--bf2e1:focus[data-placeholder]{
|
|
4795
4812
|
color:var(--date-picker-input-placeholder-focused-color);
|
|
4796
4813
|
}
|
|
4797
|
-
.bp_date_picker_module_datePicker--
|
|
4814
|
+
.bp_date_picker_module_datePicker--bf2e1 .bp_date_picker_module_group--bf2e1 .bp_date_picker_module_button--bf2e1{
|
|
4798
4815
|
align-items:center;
|
|
4799
4816
|
background-color:initial;
|
|
4800
4817
|
border:none;
|
|
@@ -4809,33 +4826,33 @@
|
|
|
4809
4826
|
right:var(--date-picker-padding-inline);
|
|
4810
4827
|
width:var(--date-picker-icon-button-size);
|
|
4811
4828
|
}
|
|
4812
|
-
.bp_date_picker_module_datePicker--
|
|
4829
|
+
.bp_date_picker_module_datePicker--bf2e1 .bp_date_picker_module_group--bf2e1 .bp_date_picker_module_button--bf2e1.bp_date_picker_module_clear--bf2e1{
|
|
4813
4830
|
right:var(--date-picker-clear-button-right);
|
|
4814
4831
|
}
|
|
4815
|
-
.bp_date_picker_module_datePicker--
|
|
4832
|
+
.bp_date_picker_module_datePicker--bf2e1 .bp_date_picker_module_group--bf2e1 .bp_date_picker_module_button--bf2e1:focus-visible,.bp_date_picker_module_datePicker--bf2e1 .bp_date_picker_module_group--bf2e1 .bp_date_picker_module_button--bf2e1[data-focus-visible]{
|
|
4816
4833
|
background-color:var(--date-picker-icon-button-focus-background-color);
|
|
4817
4834
|
outline:var(--date-picker-icon-button-focus-outline);
|
|
4818
4835
|
}
|
|
4819
|
-
.bp_date_picker_module_datePicker--
|
|
4836
|
+
.bp_date_picker_module_datePicker--bf2e1 .bp_date_picker_module_group--bf2e1 .bp_date_picker_module_button--bf2e1:hover{
|
|
4820
4837
|
background:var(--date-picker-icon-button-hover-background);
|
|
4821
4838
|
}
|
|
4822
|
-
.bp_date_picker_module_datePicker--
|
|
4839
|
+
.bp_date_picker_module_datePicker--bf2e1 .bp_date_picker_module_group--bf2e1 .bp_date_picker_module_button--bf2e1:hover *{
|
|
4823
4840
|
fill:var(--date-picker-icon-button-hover-fill);
|
|
4824
4841
|
}
|
|
4825
|
-
.bp_date_picker_module_datePicker--
|
|
4842
|
+
.bp_date_picker_module_datePicker--bf2e1 .bp_date_picker_module_group--bf2e1 .bp_date_picker_module_button--bf2e1:active{
|
|
4826
4843
|
background:var(--date-picker-icon-button-active-background);
|
|
4827
4844
|
}
|
|
4828
|
-
.bp_date_picker_module_datePicker--
|
|
4845
|
+
.bp_date_picker_module_datePicker--bf2e1 .bp_date_picker_module_group--bf2e1 .bp_date_picker_module_button--bf2e1:active *{
|
|
4829
4846
|
fill:var(--date-picker-icon-button-active-fill);
|
|
4830
4847
|
}
|
|
4831
|
-
.bp_date_picker_module_datePicker--
|
|
4848
|
+
.bp_date_picker_module_datePicker--bf2e1 .bp_date_picker_module_group--bf2e1 .bp_date_picker_module_button--bf2e1:disabled{
|
|
4832
4849
|
opacity:1;
|
|
4833
4850
|
}
|
|
4834
|
-
.bp_date_picker_module_datePicker--
|
|
4851
|
+
.bp_date_picker_module_datePicker--bf2e1 .bp_date_picker_module_inlineError--bf2e1{
|
|
4835
4852
|
margin-block-start:var(--date-picker-inline-error-margin);
|
|
4836
4853
|
}
|
|
4837
4854
|
|
|
4838
|
-
@keyframes bp_date_picker_module_slide--
|
|
4855
|
+
@keyframes bp_date_picker_module_slide--bf2e1{
|
|
4839
4856
|
from{
|
|
4840
4857
|
opacity:0;
|
|
4841
4858
|
transform:var(--popover-slide-translation);
|
|
@@ -4845,7 +4862,7 @@
|
|
|
4845
4862
|
transform:translateY(0);
|
|
4846
4863
|
}
|
|
4847
4864
|
}
|
|
4848
|
-
.bp_date_picker_module_datePickerPopoverContent--
|
|
4865
|
+
.bp_date_picker_module_datePickerPopoverContent--bf2e1{
|
|
4849
4866
|
z-index:380;
|
|
4850
4867
|
}
|
|
4851
4868
|
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { ChevronLeft, ChevronRight } from '@box/blueprint-web-assets/icons/Fill';
|
|
2
|
+
import { ChevronLeft as ChevronLeft$1, ChevronRight as ChevronRight$1 } from '@box/blueprint-web-assets/icons/Fill';
|
|
3
|
+
import { ChevronLeft, ChevronRight } from '@box/blueprint-web-assets/icons/Medium';
|
|
3
4
|
import { Gray65 } from '@box/blueprint-web-assets/tokens/tokens';
|
|
4
5
|
import { isSameDay, today, getLocalTimeZone } from '@internationalized/date';
|
|
5
6
|
import { clsx } from 'clsx';
|
|
6
|
-
import { forwardRef, useRef, useEffect } from 'react';
|
|
7
|
+
import { forwardRef, useMemo, useRef, useEffect } from 'react';
|
|
7
8
|
import { Calendar as Calendar$1, Button, Heading, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell } from 'react-aria-components';
|
|
8
9
|
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
9
10
|
import styles from './calendar.module.js';
|
|
@@ -65,6 +66,8 @@ const Calendar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
65
66
|
const {
|
|
66
67
|
enableModernizedComponents
|
|
67
68
|
} = useBlueprintModernization();
|
|
69
|
+
const ChevronLeftIcon = useMemo(() => enableModernizedComponents ? ChevronLeft : ChevronLeft$1, [enableModernizedComponents]);
|
|
70
|
+
const ChevronRightIcon = useMemo(() => enableModernizedComponents ? ChevronRight : ChevronRight$1, [enableModernizedComponents]);
|
|
68
71
|
return jsxs(Calendar$1, {
|
|
69
72
|
...rest,
|
|
70
73
|
ref: forwardedRef,
|
|
@@ -78,7 +81,7 @@ const Calendar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
78
81
|
className: styles.calendarHeaderButton,
|
|
79
82
|
onPressStart: continuePropagation,
|
|
80
83
|
slot: "previous",
|
|
81
|
-
children: jsx(
|
|
84
|
+
children: jsx(ChevronLeftIcon, {
|
|
82
85
|
"aria-label": previousMonthAriaLabel,
|
|
83
86
|
color: Gray65
|
|
84
87
|
})
|
|
@@ -89,7 +92,7 @@ const Calendar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
89
92
|
className: styles.calendarHeaderButton,
|
|
90
93
|
onPressStart: continuePropagation,
|
|
91
94
|
slot: "next",
|
|
92
|
-
children: jsx(
|
|
95
|
+
children: jsx(ChevronRightIcon, {
|
|
93
96
|
"aria-label": nextMonthAriaLabel,
|
|
94
97
|
color: Gray65
|
|
95
98
|
})
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"calendar":"bp_calendar_module_calendar--
|
|
2
|
+
var styles = {"calendar":"bp_calendar_module_calendar--98baa","calendarHeaderCell":"bp_calendar_module_calendarHeaderCell--98baa","calendarHeader":"bp_calendar_module_calendarHeader--98baa","calendarHeaderButton":"bp_calendar_module_calendarHeaderButton--98baa","calendarGrid":"bp_calendar_module_calendarGrid--98baa","calendarHeaderHeading":"bp_calendar_module_calendarHeaderHeading--98baa","calendarCell":"bp_calendar_module_calendarCell--98baa","today":"bp_calendar_module_today--98baa"};
|
|
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.77.
|
|
3
|
+
"version": "12.77.4",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"publishConfig": {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@ariakit/react": "0.4.15",
|
|
49
49
|
"@ariakit/react-core": "0.4.15",
|
|
50
|
-
"@box/blueprint-web-assets": "^4.
|
|
50
|
+
"@box/blueprint-web-assets": "^4.69.0",
|
|
51
51
|
"@internationalized/date": "^3.7.0",
|
|
52
52
|
"@radix-ui/react-accordion": "1.1.2",
|
|
53
53
|
"@radix-ui/react-checkbox": "1.0.4",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"type-fest": "^3.2.0"
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|
|
80
|
-
"@box/storybook-utils": "^0.14.
|
|
80
|
+
"@box/storybook-utils": "^0.14.5",
|
|
81
81
|
"@types/react": "^18.0.0",
|
|
82
82
|
"@types/react-dom": "^18.0.0",
|
|
83
83
|
"react": "^18.3.0",
|