@box/blueprint-web 12.78.7 → 12.79.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/index.css
CHANGED
|
@@ -3779,34 +3779,127 @@
|
|
|
3779
3779
|
.bp_list_checkbox_module_checkbox--98dc1[data-disabled]{
|
|
3780
3780
|
opacity:var(--checkbox-disabled-opacity);
|
|
3781
3781
|
}
|
|
3782
|
-
.bp_main_module_tableSortingContainer--
|
|
3782
|
+
.bp_main_module_tableSortingContainer--ceed4{
|
|
3783
3783
|
display:flex;
|
|
3784
3784
|
flex-direction:column;
|
|
3785
3785
|
min-width:100%;
|
|
3786
3786
|
}
|
|
3787
3787
|
|
|
3788
|
-
.bp_main_module_resizableTableContainer--
|
|
3788
|
+
.bp_main_module_resizableTableContainer--ceed4{
|
|
3789
3789
|
min-width:100%;
|
|
3790
3790
|
}
|
|
3791
|
-
.bp_main_module_resizableTableContainer--
|
|
3792
|
-
--item-background:var(--
|
|
3793
|
-
--outline-offset-focus-row
|
|
3794
|
-
--outline-offset-focus-cell
|
|
3795
|
-
--outline-offset-focus-header:var(--
|
|
3791
|
+
.bp_main_module_resizableTableContainer--ceed4 table{
|
|
3792
|
+
--item-background:var(--list-item-header-background);
|
|
3793
|
+
--outline-offset-focus-row:var(--list-item-row-focus-outline-offset);
|
|
3794
|
+
--outline-offset-focus-cell:var(--list-item-cell-focus-outline-offset);
|
|
3795
|
+
--outline-offset-focus-header:var(--list-item-header-column-focus-outline-offset);
|
|
3796
3796
|
--outline-offset-focus-resizer:1px;
|
|
3797
|
-
--
|
|
3798
|
-
--outline-offset-focus-and-selected-row:var(--outline-offset-focus-and-selected-row-datatable, -.35rem);
|
|
3799
|
-
--outline-select-color:var(--outline-select-color-datatable, var(--box-blue-100));
|
|
3800
|
-
--outline-focus-color:var(--outline-focus-on-light);
|
|
3797
|
+
--outline-offset-focus-and-selected-row:var(--list-item-row-outline-offset-focus-and-selected);
|
|
3801
3798
|
border-collapse:initial;
|
|
3802
3799
|
border-spacing:0;
|
|
3803
3800
|
width:100% !important;
|
|
3804
3801
|
}
|
|
3805
|
-
.bp_main_module_resizableTableContainer--
|
|
3802
|
+
.bp_main_module_resizableTableContainer--ceed4 .bp_main_module_resizableTable--ceed4{
|
|
3803
|
+
table-layout:auto !important;
|
|
3804
|
+
}
|
|
3805
|
+
|
|
3806
|
+
.bp_main_module_resizableTableContainer--ceed4[data-modern=false]{
|
|
3807
|
+
--list-item-header-background:var(--background-background);
|
|
3808
|
+
--list-item-header-column-padding:var(--space-2) var(--space-3);
|
|
3809
|
+
--list-item-border-radius:var(--border-radius-datatable, var(--radius-4));
|
|
3810
|
+
--list-item-first-column-item-radius:var(--list-item-border-radius) 0 0 var(--list-item-border-radius);
|
|
3811
|
+
--list-item-last-column-item-radius:0 var(--list-item-border-radius) var(--list-item-border-radius) 0;
|
|
3812
|
+
--list-item-header-text-color-unsorted:var(--text-text-on-light-secondary);
|
|
3813
|
+
--list-item-header-text-color-sorted:var(--text-text-on-light);
|
|
3814
|
+
--list-item-header-gap:var(--space-2);
|
|
3815
|
+
--list-item-header-column-focus-outline-radius:none;
|
|
3816
|
+
--list-item-header-column-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
|
|
3817
|
+
--list-item-header-column-focus-outline-offset:var(--space-1);
|
|
3818
|
+
--list-item-header-column-resizer-width:var(--border-2);
|
|
3819
|
+
--list-item-header-column-resizer-height:var(--size-6);
|
|
3820
|
+
--list-item-header-column-resizer-background-color:var(--border-tab-border-hover);
|
|
3821
|
+
--list-item-header-column-resizer-background-color-active:var(--border-tab-border-hover);
|
|
3822
|
+
--list-item-header-column-resizer-outline:var(--border-2) solid var(--outline-focus-on-light);
|
|
3823
|
+
--list-item-header-column-resizer-outline-offset:var(--border-1);
|
|
3824
|
+
--list-item-dropdown-header-margin-bottom:var(--space-4);
|
|
3825
|
+
--list-item-row-border-radius:var(--border-radius-datatable, var(--radius-4));
|
|
3826
|
+
--list-item-row-background:var(--background-background);
|
|
3827
|
+
--list-item-row-text-color:var(--text-text-on-light);
|
|
3828
|
+
--list-item-row-divider:var(--border-1) solid var(--gray-10);
|
|
3829
|
+
--list-item-row-background-hover:var(--background-background);
|
|
3830
|
+
--list-item-row-background-selected:var(--box-blue-05);
|
|
3831
|
+
--list-item-row-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
|
|
3832
|
+
--list-item-row-focus-outline-offset:-.25rem;
|
|
3833
|
+
--list-item-row-border-hover:var(--border-1) solid var(--gray-10);
|
|
3834
|
+
--outline-select-color:var(--outline-select-color-datatable, var(--box-blue-100));
|
|
3835
|
+
--outline-focus-color:var(--outline-focus-on-light);
|
|
3836
|
+
--list-item-row-background-selected-border:var(--border-2) solid var(--outline-select-color);
|
|
3837
|
+
--list-item-row-height:var(--size-14);
|
|
3838
|
+
--list-item-cell-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
|
|
3839
|
+
--list-item-cell-focus-outline-offset:-.1875rem;
|
|
3840
|
+
--list-item-cell-padding:var(--space-2) var(--space-3);
|
|
3841
|
+
--list-item-cell-border-radius:0;
|
|
3842
|
+
--list-item-cell-actions-width:var(--size-6);
|
|
3843
|
+
--list-item-cell-actions-gap:var(--space-2);
|
|
3844
|
+
--list-item-cell-actions-right-offset:var(--space-4);
|
|
3845
|
+
--list-item-cell-actions-padding:0 var(--space-2);
|
|
3846
|
+
--list-item-cell-actions-margin-block:var(--space-2);
|
|
3847
|
+
--list-item-row-outline-offset-focus-and-selected:var(--outline-offset-focus-and-selected-row-datatable, -.35rem);
|
|
3848
|
+
--list-item-row-hover-after-element-border:var(--border-1) solid #0000;
|
|
3849
|
+
}
|
|
3850
|
+
.bp_main_module_resizableTableContainer--ceed4[data-modern=false] .bp_main_module_resizableTable--ceed4{
|
|
3806
3851
|
table-layout:auto !important;
|
|
3807
3852
|
}
|
|
3808
3853
|
|
|
3809
|
-
.
|
|
3854
|
+
.bp_main_module_resizableTableContainer--ceed4[data-modern=true]{
|
|
3855
|
+
--list-item-header-background:var(--bp-surface-surface);
|
|
3856
|
+
--list-item-header-column-padding:var(--bp-space-020) var(--bp-space-030);
|
|
3857
|
+
--list-item-border-radius:var(--border-radius-datatable, var(--bp-radius-08));
|
|
3858
|
+
--list-item-first-column-item-radius:var(--list-item-border-radius) 0 0 var(--list-item-border-radius);
|
|
3859
|
+
--list-item-last-column-item-radius:0 var(--list-item-border-radius) var(--list-item-border-radius) 0;
|
|
3860
|
+
--list-item-header-text-color-unsorted:var(--bp-text-text-on-light-secondary);
|
|
3861
|
+
--list-item-header-text-color-sorted:var(--bp-text-text-on-light);
|
|
3862
|
+
--list-item-header-gap:var(--bp-space-020);
|
|
3863
|
+
--list-item-header-column-focus-outline-radius:var(--bp-radius-01);
|
|
3864
|
+
--list-item-header-column-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
|
|
3865
|
+
--list-item-header-column-focus-outline-offset:var(--bp-space-010);
|
|
3866
|
+
--list-item-header-column-resizer-width:var(--bp-size-005);
|
|
3867
|
+
--list-item-header-column-resizer-height:var(--bp-size-060);
|
|
3868
|
+
--list-item-header-column-resizer-background-color:var(--bp-border-resize-border-hover);
|
|
3869
|
+
--list-item-header-column-resizer-background-color-active:var(--bp-border-resize-border-focus);
|
|
3870
|
+
--list-item-header-column-resizer-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
|
|
3871
|
+
--list-item-header-column-resizer-outline-offset:var(--bp-border-01);
|
|
3872
|
+
--list-item-dropdown-header-margin-bottom:var(--bp-space-040);
|
|
3873
|
+
--list-item-row-border-radius:var(--border-radius-datatable, var(--bp-radius-08));
|
|
3874
|
+
--list-item-row-background:var(--bp-surface-list-item-surface);
|
|
3875
|
+
--list-item-row-text-color:var(--bp-text-text-on-light);
|
|
3876
|
+
--list-item-row-divider:var(--bp-border-01) solid var(--bp-border-divider-border);
|
|
3877
|
+
--list-item-row-background-hover:var(--bp-surface-list-item-surface-hover);
|
|
3878
|
+
--list-item-row-background-selected:var(--bp-surface-list-item-surface-selected);
|
|
3879
|
+
--list-item-row-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
|
|
3880
|
+
--list-item-row-focus-outline-offset:-.25rem;
|
|
3881
|
+
--list-item-row-border-hover:var(--bp-border-01) solid var(--bp-border-list-item-border);
|
|
3882
|
+
--outline-select-color:var(--outline-select-color-datatable, var(--bp-border-list-item-border-selected));
|
|
3883
|
+
--outline-focus-color:var(--bp-outline-focus-on-light);
|
|
3884
|
+
--list-item-row-background-selected-border:var(--bp-border-02) solid var(--outline-select-color);
|
|
3885
|
+
--list-item-row-height:var(--bp-size-140);
|
|
3886
|
+
--list-item-cell-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
|
|
3887
|
+
--list-item-cell-focus-outline-offset:-.1875rem;
|
|
3888
|
+
--list-item-cell-padding:var(--bp-space-020) var(--bp-space-030);
|
|
3889
|
+
--list-item-cell-border-radius:var(--bp-radius-08);
|
|
3890
|
+
--list-item-cell-actions-width:var(--bp-size-060);
|
|
3891
|
+
--list-item-cell-actions-gap:var(--bp-space-020);
|
|
3892
|
+
--list-item-cell-actions-right-offset:var(--bp-space-040);
|
|
3893
|
+
--list-item-cell-actions-padding:0 var(--bp-space-020);
|
|
3894
|
+
--list-item-cell-actions-margin-block:var(--bp-space-020);
|
|
3895
|
+
--list-item-row-outline-offset-focus-and-selected:var(--outline-offset-focus-and-selected-row-datatable, -.35rem);
|
|
3896
|
+
--list-item-row-hover-after-element-border:var(--bp-border-01) solid #0000;
|
|
3897
|
+
}
|
|
3898
|
+
.bp_main_module_resizableTableContainer--ceed4[data-modern=true] .bp_main_module_resizableTable--ceed4{
|
|
3899
|
+
table-layout:fixed !important;
|
|
3900
|
+
}
|
|
3901
|
+
|
|
3902
|
+
.bp_main_module_tableHeader--ceed4 tr > th{
|
|
3810
3903
|
font-family:var(--caption-default-font-family);
|
|
3811
3904
|
font-size:var(--caption-default-font-size);
|
|
3812
3905
|
font-weight:var(--caption-default-font-weight);
|
|
@@ -3820,128 +3913,133 @@
|
|
|
3820
3913
|
text-transform:var(--caption-default-text-case);
|
|
3821
3914
|
white-space:nowrap;
|
|
3822
3915
|
}
|
|
3823
|
-
.bp_main_module_tableHeader--
|
|
3824
|
-
border-radius:var(--
|
|
3916
|
+
.bp_main_module_tableHeader--ceed4 tr > th:first-child{
|
|
3917
|
+
border-radius:var(--list-item-first-column-item-radius);
|
|
3825
3918
|
}
|
|
3826
|
-
.bp_main_module_tableHeader--
|
|
3827
|
-
border-radius:
|
|
3919
|
+
.bp_main_module_tableHeader--ceed4 tr > th:last-child{
|
|
3920
|
+
border-radius:var(--list-item-last-column-item-radius);
|
|
3828
3921
|
}
|
|
3829
|
-
.bp_main_module_tableHeader--
|
|
3830
|
-
color:var(--
|
|
3922
|
+
.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4{
|
|
3923
|
+
color:var(--list-item-header-text-color-unsorted);
|
|
3831
3924
|
outline:none;
|
|
3832
3925
|
overflow:visible;
|
|
3833
3926
|
text-align:left;
|
|
3834
3927
|
}
|
|
3835
|
-
.bp_main_module_tableHeader--
|
|
3928
|
+
.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_columnNameWrapper--ceed4{
|
|
3836
3929
|
align-items:center;
|
|
3837
3930
|
display:flex;
|
|
3838
3931
|
flex:1 0 0;
|
|
3839
|
-
gap:var(--
|
|
3932
|
+
gap:var(--list-item-header-gap);
|
|
3840
3933
|
overflow:hidden;
|
|
3841
3934
|
}
|
|
3842
|
-
.bp_main_module_tableHeader--
|
|
3935
|
+
.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_columnNameWrapper--ceed4 .bp_main_module_columnName--ceed4{
|
|
3843
3936
|
min-width:0;
|
|
3844
3937
|
overflow:hidden;
|
|
3845
3938
|
text-overflow:ellipsis;
|
|
3846
3939
|
white-space:nowrap;
|
|
3847
3940
|
}
|
|
3848
|
-
.bp_main_module_tableHeader--
|
|
3941
|
+
.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_columnNameWrapper--ceed4:focus-visible{
|
|
3849
3942
|
outline:none;
|
|
3850
3943
|
}
|
|
3851
|
-
.bp_main_module_tableHeader--
|
|
3852
|
-
|
|
3853
|
-
outline
|
|
3944
|
+
.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_columnNameWrapper--ceed4.bp_main_module_focusVisible--ceed4{
|
|
3945
|
+
border-radius:var(--list-item-header-column-focus-outline-radius);
|
|
3946
|
+
outline:var(--list-item-header-column-focus-outline);
|
|
3947
|
+
outline-offset:var(--list-item-header-column-focus-outline-offset);
|
|
3854
3948
|
}
|
|
3855
|
-
.bp_main_module_tableHeader--
|
|
3949
|
+
.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4[colspan]{
|
|
3856
3950
|
text-align:center;
|
|
3857
3951
|
}
|
|
3858
|
-
.bp_main_module_tableHeader--
|
|
3952
|
+
.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_rotateArrow--ceed4{
|
|
3859
3953
|
transform:rotateX(180deg);
|
|
3860
3954
|
}
|
|
3861
|
-
.bp_main_module_tableHeader--
|
|
3862
|
-
color:var(--
|
|
3955
|
+
.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_sorted--ceed4{
|
|
3956
|
+
color:var(--list-item-header-text-color-sorted);
|
|
3863
3957
|
font-weight:bold;
|
|
3864
3958
|
}
|
|
3865
|
-
.bp_main_module_tableHeader--
|
|
3959
|
+
.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_sortingFlexWrapper--ceed4{
|
|
3866
3960
|
align-items:center;
|
|
3867
3961
|
display:flex;
|
|
3868
|
-
gap:var(--
|
|
3869
|
-
padding:var(--
|
|
3962
|
+
gap:var(--list-item-header-gap);
|
|
3963
|
+
padding:var(--list-item-header-column-padding);
|
|
3870
3964
|
position:relative;
|
|
3871
3965
|
}
|
|
3872
|
-
.bp_main_module_tableHeader--
|
|
3966
|
+
.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_sortingFlexWrapper--ceed4 svg{
|
|
3873
3967
|
flex-shrink:0;
|
|
3874
3968
|
}
|
|
3875
|
-
.bp_main_module_tableHeader--
|
|
3876
|
-
background-color:var(--
|
|
3969
|
+
.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_columnResizer--ceed4{
|
|
3970
|
+
background-color:var(--list-item-header-column-resizer-background-color);
|
|
3877
3971
|
flex:0 0 auto;
|
|
3878
|
-
height:var(--
|
|
3972
|
+
height:var(--list-item-header-column-resizer-height);
|
|
3879
3973
|
position:absolute;
|
|
3880
3974
|
right:0;
|
|
3881
3975
|
touch-action:none;
|
|
3882
|
-
width:var(--
|
|
3976
|
+
width:var(--list-item-header-column-resizer-width);
|
|
3883
3977
|
}
|
|
3884
|
-
.bp_main_module_tableHeader--
|
|
3978
|
+
.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_columnResizer--ceed4[data-resizable-direction=both]{
|
|
3885
3979
|
cursor:ew-resize;
|
|
3886
3980
|
}
|
|
3887
|
-
.bp_main_module_tableHeader--
|
|
3981
|
+
.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_columnResizer--ceed4[data-resizable-direction=left]{
|
|
3888
3982
|
cursor:e-resize;
|
|
3889
3983
|
}
|
|
3890
|
-
.bp_main_module_tableHeader--
|
|
3984
|
+
.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_columnResizer--ceed4[data-resizable-direction=right]{
|
|
3891
3985
|
cursor:w-resize;
|
|
3892
3986
|
}
|
|
3893
|
-
.bp_main_module_tableHeader--
|
|
3894
|
-
|
|
3895
|
-
outline
|
|
3987
|
+
.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_columnResizer--ceed4[data-focus-visible]{
|
|
3988
|
+
border-radius:var(--list-item-header-column-focus-outline-radius);
|
|
3989
|
+
outline:var(--list-item-header-column-resizer-outline);
|
|
3990
|
+
outline-offset:var(--list-item-header-column-resizer-outline-offset);
|
|
3896
3991
|
}
|
|
3897
|
-
.bp_main_module_tableHeader--
|
|
3992
|
+
.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_columnResizer--ceed4[data-resizing]{
|
|
3993
|
+
background-color:var(--list-item-header-column-resizer-background-color-active);
|
|
3994
|
+
}
|
|
3995
|
+
.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4:last-of-type .bp_main_module_columnResizer--ceed4{
|
|
3898
3996
|
display:none;
|
|
3899
3997
|
}
|
|
3900
|
-
.bp_main_module_tableHeader--
|
|
3901
|
-
color:var(--
|
|
3998
|
+
.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4:hover:not([data-sort-direction])[data-allows-sorting],.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4[data-focus-visible]:not([data-sort-direction])[data-allows-sorting]{
|
|
3999
|
+
color:var(--list-item-header-text-color-sorted);
|
|
3902
4000
|
font-weight:bold;
|
|
3903
4001
|
}
|
|
3904
|
-
.bp_main_module_tableHeader--
|
|
4002
|
+
.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4:hover:not([data-sort-direction]) svg,.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4[data-focus-visible]:not([data-sort-direction]) svg{
|
|
3905
4003
|
transform:rotateX(180deg);
|
|
3906
4004
|
visibility:visible;
|
|
3907
4005
|
}
|
|
3908
4006
|
|
|
3909
|
-
.bp_main_module_dropdownHeaderContainer--
|
|
3910
|
-
margin-bottom:var(--
|
|
4007
|
+
.bp_main_module_dropdownHeaderContainer--ceed4{
|
|
4008
|
+
margin-bottom:var(--list-item-dropdown-header-margin-bottom);
|
|
3911
4009
|
}
|
|
3912
4010
|
|
|
3913
|
-
.bp_main_module_column--
|
|
4011
|
+
.bp_main_module_column--ceed4.bp_main_module_droppableColumn--ceed4{
|
|
3914
4012
|
min-width:160px;
|
|
3915
4013
|
}
|
|
3916
4014
|
|
|
3917
|
-
.bp_main_module_column--
|
|
4015
|
+
.bp_main_module_column--ceed4.bp_main_module_actionColumn--ceed4{
|
|
3918
4016
|
min-width:1px;
|
|
3919
4017
|
}
|
|
3920
4018
|
|
|
3921
|
-
.bp_main_module_column--
|
|
4019
|
+
.bp_main_module_column--ceed4.bp_main_module_hiddenColumn--ceed4{
|
|
3922
4020
|
display:none;
|
|
3923
4021
|
}
|
|
3924
4022
|
|
|
3925
|
-
.bp_main_module_tableBody--
|
|
4023
|
+
.bp_main_module_tableBody--ceed4[data-empty]{
|
|
3926
4024
|
text-align:center;
|
|
3927
4025
|
}
|
|
3928
|
-
.bp_main_module_tableBody--
|
|
3929
|
-
background:var(--item-background);
|
|
3930
|
-
border-radius:var(--border-radius);
|
|
3931
|
-
color:var(--
|
|
4026
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4{
|
|
4027
|
+
background:var(--list-item-row-background);
|
|
4028
|
+
border-radius:var(--list-item-row-border-radius);
|
|
4029
|
+
color:var(--list-item-row-text-color);
|
|
3932
4030
|
cursor:default;
|
|
3933
|
-
height:var(--
|
|
4031
|
+
height:var(--list-item-row-height);
|
|
3934
4032
|
outline:none;
|
|
3935
4033
|
overflow:hidden;
|
|
3936
4034
|
position:relative;
|
|
3937
4035
|
transform:translateZ(0);
|
|
3938
4036
|
}
|
|
3939
|
-
.bp_main_module_tableBody--
|
|
4037
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4::after{
|
|
3940
4038
|
background:#0000;
|
|
3941
|
-
border-top:var(--
|
|
4039
|
+
border-top:var(--list-item-row-divider);
|
|
3942
4040
|
box-sizing:border-box;
|
|
3943
4041
|
content:"";
|
|
3944
|
-
height:var(--
|
|
4042
|
+
height:var(--list-item-row-height);
|
|
3945
4043
|
left:0;
|
|
3946
4044
|
pointer-events:none;
|
|
3947
4045
|
position:absolute;
|
|
@@ -3949,63 +4047,63 @@
|
|
|
3949
4047
|
width:100%;
|
|
3950
4048
|
z-index:999;
|
|
3951
4049
|
}
|
|
3952
|
-
.bp_main_module_tableBody--
|
|
3953
|
-
--item-background:var(--
|
|
4050
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[aria-selected=true]{
|
|
4051
|
+
--list-item-row-background:var(--list-item-row-background-selected);
|
|
3954
4052
|
}
|
|
3955
|
-
.bp_main_module_tableBody--
|
|
3956
|
-
border:var(--
|
|
3957
|
-
border-radius:var(--border-radius);
|
|
4053
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[aria-selected=true]::after{
|
|
4054
|
+
border:var(--list-item-row-background-selected-border);
|
|
4055
|
+
border-radius:var(--list-item-row-border-radius);
|
|
3958
4056
|
}
|
|
3959
|
-
.bp_main_module_tableBody--
|
|
4057
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[aria-selected=true] .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4{
|
|
3960
4058
|
opacity:1;
|
|
3961
4059
|
}
|
|
3962
|
-
.bp_main_module_tableBody--
|
|
4060
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[aria-selected=true] .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4 .bp_main_module_actionChildren--ceed4{
|
|
3963
4061
|
display:none;
|
|
3964
4062
|
}
|
|
3965
|
-
.bp_main_module_tableBody--
|
|
4063
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4 .bp_main_module_cell--ceed4{
|
|
3966
4064
|
max-width:0;
|
|
3967
4065
|
outline:none;
|
|
3968
4066
|
overflow:hidden;
|
|
3969
|
-
padding:var(--
|
|
4067
|
+
padding:var(--list-item-cell-padding);
|
|
3970
4068
|
text-align:start;
|
|
3971
4069
|
text-overflow:ellipsis;
|
|
3972
4070
|
transform:translateZ(0);
|
|
3973
4071
|
white-space:nowrap;
|
|
3974
4072
|
}
|
|
3975
|
-
.bp_main_module_tableBody--
|
|
3976
|
-
outline:var(--
|
|
3977
|
-
outline-offset:var(--
|
|
4073
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4 .bp_main_module_cell--ceed4[data-focus-visible]{
|
|
4074
|
+
outline:var(--list-item-cell-focus-outline);
|
|
4075
|
+
outline-offset:var(--list-item-cell-focus-outline-offset);
|
|
3978
4076
|
position:relative;
|
|
3979
4077
|
}
|
|
3980
|
-
.bp_main_module_tableBody--
|
|
3981
|
-
border-radius:var(--
|
|
4078
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4 .bp_main_module_cell--ceed4:first-child{
|
|
4079
|
+
border-radius:var(--list-item-first-column-item-radius);
|
|
3982
4080
|
}
|
|
3983
|
-
.bp_main_module_tableBody--
|
|
3984
|
-
border-radius:
|
|
4081
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4 .bp_main_module_cell--ceed4:last-child{
|
|
4082
|
+
border-radius:var(--list-item-last-column-item-radius);
|
|
3985
4083
|
}
|
|
3986
|
-
.bp_main_module_tableBody--
|
|
4084
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4 .bp_main_module_cell--ceed4.bp_main_module_actions--ceed4{
|
|
3987
4085
|
overflow:unset;
|
|
3988
4086
|
padding:0;
|
|
3989
4087
|
position:sticky;
|
|
3990
4088
|
right:0;
|
|
3991
|
-
width:var(--
|
|
4089
|
+
width:var(--list-item-cell-actions-width);
|
|
3992
4090
|
}
|
|
3993
|
-
.bp_main_module_tableBody--
|
|
4091
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4 .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4{
|
|
3994
4092
|
align-items:center;
|
|
3995
|
-
background:var(--item-background);
|
|
4093
|
+
background:var(--list-item-row-background);
|
|
3996
4094
|
bottom:0;
|
|
3997
4095
|
display:flex;
|
|
3998
|
-
gap:var(--
|
|
4096
|
+
gap:var(--list-item-cell-actions-gap);
|
|
3999
4097
|
justify-content:center;
|
|
4000
|
-
margin-block:var(--
|
|
4098
|
+
margin-block:var(--list-item-cell-actions-margin-block);
|
|
4001
4099
|
opacity:0;
|
|
4002
|
-
padding:
|
|
4100
|
+
padding:var(--list-item-cell-actions-padding);
|
|
4003
4101
|
position:absolute;
|
|
4004
|
-
right:var(--
|
|
4102
|
+
right:var(--list-item-cell-actions-right-offset);
|
|
4005
4103
|
top:0;
|
|
4006
4104
|
}
|
|
4007
|
-
.bp_main_module_tableBody--
|
|
4008
|
-
box-shadow:-.25rem 0 .625rem .625rem var(--item-background);
|
|
4105
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4 .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4::before{
|
|
4106
|
+
box-shadow:-.25rem 0 .625rem .625rem var(--list-item-row-background);
|
|
4009
4107
|
content:"";
|
|
4010
4108
|
display:block;
|
|
4011
4109
|
height:50%;
|
|
@@ -4014,68 +4112,68 @@
|
|
|
4014
4112
|
width:0;
|
|
4015
4113
|
z-index:0;
|
|
4016
4114
|
}
|
|
4017
|
-
.bp_main_module_tableBody--
|
|
4115
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4 .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4[data-state=open]{
|
|
4018
4116
|
opacity:1;
|
|
4019
4117
|
}
|
|
4020
|
-
.bp_main_module_tableBody--
|
|
4118
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4 .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4[data-state=open] .bp_main_module_actionChildren--ceed4{
|
|
4021
4119
|
display:block;
|
|
4022
4120
|
}
|
|
4023
|
-
.bp_main_module_tableBody--
|
|
4121
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4 .bp_main_module_cell--ceed4.bp_main_module_isCellHidden--ceed4{
|
|
4024
4122
|
display:none;
|
|
4025
4123
|
}
|
|
4026
|
-
.bp_main_module_tableBody--
|
|
4124
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-dragging]{
|
|
4027
4125
|
opacity:.5;
|
|
4028
4126
|
transform:translateZ(0);
|
|
4029
4127
|
}
|
|
4030
|
-
.bp_main_module_tableBody--
|
|
4031
|
-
outline:var(--
|
|
4032
|
-
outline-offset:var(--
|
|
4128
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible]{
|
|
4129
|
+
outline:var(--list-item-row-focus-outline);
|
|
4130
|
+
outline-offset:var(--list-item-row-focus-outline-offset);
|
|
4033
4131
|
}
|
|
4034
|
-
.bp_main_module_tableBody--
|
|
4035
|
-
background:var(--item-background);
|
|
4036
|
-
outline-offset:var(--outline-offset-focus-and-selected
|
|
4132
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible][aria-selected=true]{
|
|
4133
|
+
background:var(--list-item-row-background);
|
|
4134
|
+
outline-offset:var(--list-item-row-outline-offset-focus-and-selected);
|
|
4037
4135
|
}
|
|
4038
|
-
.bp_main_module_tableBody--
|
|
4136
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:last-child::after{
|
|
4039
4137
|
border-bottom:var(--border-1) solid var(--gray-10);
|
|
4040
4138
|
}
|
|
4041
|
-
.bp_main_module_tableBody--
|
|
4042
|
-
border-bottom:var(--
|
|
4139
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:last-child[aria-selected=true]::after{
|
|
4140
|
+
border-bottom:var(--list-item-row-background-selected-border);
|
|
4043
4141
|
}
|
|
4044
|
-
.bp_main_module_tableBody--
|
|
4142
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:focus-within,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible],.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-hovered]{
|
|
4045
4143
|
z-index:1;
|
|
4046
4144
|
}
|
|
4047
|
-
.bp_main_module_tableBody--
|
|
4048
|
-
border-bottom:var(--border
|
|
4049
|
-
border-radius:var(--border-radius);
|
|
4050
|
-
border-top:var(--border
|
|
4145
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:focus-within:not([aria-selected=true])::after,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible]:not([aria-selected=true])::after,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-hovered]:not([aria-selected=true])::after{
|
|
4146
|
+
border-bottom:var(--list-item-row-hover-after-element-border);
|
|
4147
|
+
border-radius:var(--list-item-border-radius);
|
|
4148
|
+
border-top:var(--list-item-row-hover-after-element-border);
|
|
4051
4149
|
box-shadow:var(--dropshadow-2);
|
|
4052
4150
|
}
|
|
4053
|
-
.bp_main_module_tableBody--
|
|
4054
|
-
border-bottom:var(--border
|
|
4151
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:focus-within:last-child:not([aria-selected=true])::after,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible]:last-child:not([aria-selected=true])::after,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-hovered]:last-child:not([aria-selected=true])::after{
|
|
4152
|
+
border-bottom:var(--list-item-row-hover-after-element-border);
|
|
4055
4153
|
}
|
|
4056
|
-
.bp_main_module_tableBody--
|
|
4057
|
-
border-top:var(--border
|
|
4154
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:focus-within + :not([data-hovered], [data-focus-visible], [aria-selected=true])::after, .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible] + :not([data-hovered], [data-focus-visible], [aria-selected=true])::after, .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-hovered] + :not([data-hovered], [data-focus-visible], [aria-selected=true])::after{
|
|
4155
|
+
border-top:var(--list-item-row-hover-after-element-border);
|
|
4058
4156
|
}
|
|
4059
|
-
.bp_main_module_tableBody--
|
|
4157
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:focus-within[data-dragging] .bp_main_module_actionsWrapper--ceed4,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:focus-within[data-pressed] .bp_main_module_actionsWrapper--ceed4,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible][data-dragging] .bp_main_module_actionsWrapper--ceed4,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible][data-pressed] .bp_main_module_actionsWrapper--ceed4,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-hovered][data-dragging] .bp_main_module_actionsWrapper--ceed4,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-hovered][data-pressed] .bp_main_module_actionsWrapper--ceed4{
|
|
4060
4158
|
opacity:1;
|
|
4061
4159
|
}
|
|
4062
|
-
.bp_main_module_tableBody--
|
|
4063
|
-
border:var(--border-
|
|
4064
|
-
border-radius:var(--border-radius);
|
|
4160
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:focus-within:not(:is([data-focus-visible], [aria-selected=true]))::after, .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible]:not(:is([data-focus-visible], [aria-selected=true]))::after, .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-hovered]:not(:is([data-focus-visible], [aria-selected=true]))::after{
|
|
4161
|
+
border:var(--list-item-row-border-hover);
|
|
4162
|
+
border-radius:var(--list-item-border-radius);
|
|
4065
4163
|
}
|
|
4066
|
-
.bp_main_module_tableBody--
|
|
4164
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:focus-within .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible] .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-hovered] .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4{
|
|
4067
4165
|
opacity:1;
|
|
4068
4166
|
}
|
|
4069
|
-
.bp_main_module_tableBody--
|
|
4167
|
+
.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:focus-within .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4 .bp_main_module_actionChildren--ceed4,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible] .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4 .bp_main_module_actionChildren--ceed4,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-hovered] .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4 .bp_main_module_actionChildren--ceed4{
|
|
4070
4168
|
display:block;
|
|
4071
4169
|
}
|
|
4072
4170
|
@supports selector(:has(*)){
|
|
4073
|
-
.bp_main_module_row--
|
|
4171
|
+
.bp_main_module_row--ceed4[aria-selected=true] + .bp_main_module_dropIndicator--ceed4 + [aria-selected=true]::after,.bp_main_module_row--ceed4[aria-selected=true] + [aria-selected=true] .bp_main_module_cell--ceed4:first-child,.bp_main_module_row--ceed4[aria-selected=true] + [aria-selected=true] .bp_main_module_cell--ceed4:last-child,.bp_main_module_row--ceed4[aria-selected=true] + [aria-selected=true]::after{
|
|
4074
4172
|
border-start-end-radius:0;
|
|
4075
4173
|
border-start-start-radius:0;
|
|
4076
4174
|
border-top-width:var(--border-1);
|
|
4077
4175
|
}
|
|
4078
|
-
.bp_main_module_row--
|
|
4176
|
+
.bp_main_module_row--ceed4[aria-selected=true]:has(+ .bp_main_module_dropIndicator--ceed4 + [aria-selected=true]) .bp_main_module_cell--ceed4:last-child,.bp_main_module_row--ceed4[aria-selected=true]:has(+ .bp_main_module_dropIndicator--ceed4 + [aria-selected=true])::after,.bp_main_module_row--ceed4[aria-selected=true]:has(+ [aria-selected=true]) .bp_main_module_cell--ceed4:first-child,.bp_main_module_row--ceed4[aria-selected=true]:has(+ [aria-selected=true])::after{
|
|
4079
4177
|
border-bottom-width:var(--border-1);
|
|
4080
4178
|
border-end-end-radius:0;
|
|
4081
4179
|
border-end-start-radius:0;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"tableSortingContainer":"bp_main_module_tableSortingContainer--
|
|
2
|
+
var styles = {"tableSortingContainer":"bp_main_module_tableSortingContainer--ceed4","resizableTableContainer":"bp_main_module_resizableTableContainer--ceed4","resizableTable":"bp_main_module_resizableTable--ceed4","tableHeader":"bp_main_module_tableHeader--ceed4","column":"bp_main_module_column--ceed4","columnNameWrapper":"bp_main_module_columnNameWrapper--ceed4","columnName":"bp_main_module_columnName--ceed4","focusVisible":"bp_main_module_focusVisible--ceed4","rotateArrow":"bp_main_module_rotateArrow--ceed4","sorted":"bp_main_module_sorted--ceed4","sortingFlexWrapper":"bp_main_module_sortingFlexWrapper--ceed4","columnResizer":"bp_main_module_columnResizer--ceed4","dropdownHeaderContainer":"bp_main_module_dropdownHeaderContainer--ceed4","droppableColumn":"bp_main_module_droppableColumn--ceed4","actionColumn":"bp_main_module_actionColumn--ceed4","hiddenColumn":"bp_main_module_hiddenColumn--ceed4","tableBody":"bp_main_module_tableBody--ceed4","row":"bp_main_module_row--ceed4","cell":"bp_main_module_cell--ceed4","actionsWrapper":"bp_main_module_actionsWrapper--ceed4","actionChildren":"bp_main_module_actionChildren--ceed4","actions":"bp_main_module_actions--ceed4","isCellHidden":"bp_main_module_isCellHidden--ceed4","dropIndicator":"bp_main_module_dropIndicator--ceed4"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { ArrowUp, ArrowDown } from '@box/blueprint-web-assets/icons/Fill';
|
|
2
|
+
import { ArrowUp as ArrowUp$1, ArrowDown as ArrowDown$1 } from '@box/blueprint-web-assets/icons/Fill';
|
|
3
|
+
import { ArrowUp, ArrowDown } from '@box/blueprint-web-assets/icons/Medium';
|
|
4
|
+
import { bpTextTextOnLight, TextTextOnLight, bpSize040, Size4 } from '@box/blueprint-web-assets/tokens/tokens';
|
|
3
5
|
import clsx from 'clsx';
|
|
4
6
|
import { forwardRef } from 'react';
|
|
5
7
|
import { useFocusRing } from 'react-aria';
|
|
6
8
|
import { Column as Column$1, ColumnResizer } from 'react-aria-components';
|
|
9
|
+
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
7
10
|
import { Focusable } from '../focusable/focusable.js';
|
|
8
11
|
import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
|
|
9
12
|
import { VisuallyHidden } from '../visually-hidden/visually-hidden.js';
|
|
@@ -14,16 +17,26 @@ function SortingArrowIcon({
|
|
|
14
17
|
visibility = 'visible',
|
|
15
18
|
direction
|
|
16
19
|
}) {
|
|
20
|
+
const {
|
|
21
|
+
enableModernizedComponents
|
|
22
|
+
} = useBlueprintModernization();
|
|
17
23
|
const props = {
|
|
18
|
-
color:
|
|
19
|
-
height:
|
|
24
|
+
color: enableModernizedComponents ? bpTextTextOnLight : TextTextOnLight,
|
|
25
|
+
height: enableModernizedComponents ? bpSize040 : Size4,
|
|
20
26
|
role: 'presentation',
|
|
21
27
|
visibility,
|
|
22
|
-
width:
|
|
28
|
+
width: enableModernizedComponents ? bpSize040 : Size4
|
|
23
29
|
};
|
|
24
|
-
|
|
30
|
+
if (enableModernizedComponents) {
|
|
31
|
+
return direction === 'up' ? jsx(ArrowUp, {
|
|
32
|
+
...props
|
|
33
|
+
}) : jsx(ArrowDown, {
|
|
34
|
+
...props
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
return direction === 'up' ? jsx(ArrowUp$1, {
|
|
25
38
|
...props
|
|
26
|
-
}) : jsx(ArrowDown, {
|
|
39
|
+
}) : jsx(ArrowDown$1, {
|
|
27
40
|
...props
|
|
28
41
|
});
|
|
29
42
|
}
|
|
@@ -3,6 +3,7 @@ import noop from 'lodash/noop';
|
|
|
3
3
|
import { forwardRef, useRef } from 'react';
|
|
4
4
|
import { ResizableTableContainer, Table as Table$1 } from 'react-aria-components';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
|
+
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
6
7
|
import styles from './main.module.js';
|
|
7
8
|
import { ColumnVisibilityProvider, useColumnVisibilityContext } from './utils/column-visibility-context/columnVisibilityContext.js';
|
|
8
9
|
import { TableSortingProvider, useTableSortingContext } from './utils/table-sorting-context/tableSortingContext.js';
|
|
@@ -27,6 +28,9 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
27
28
|
} = props;
|
|
28
29
|
const resizableContainerRef = useRef(null);
|
|
29
30
|
const dropdownHeaderContainerRef = useRef(null);
|
|
31
|
+
const {
|
|
32
|
+
enableModernizedComponents
|
|
33
|
+
} = useBlueprintModernization();
|
|
30
34
|
return jsx(TableSortingProvider, {
|
|
31
35
|
defaultSortDescriptor: defaultSortDescriptor,
|
|
32
36
|
dropdownHeaderContainerRef: dropdownHeaderContainerRef,
|
|
@@ -44,6 +48,7 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
44
48
|
children: jsx(ResizableTableContainer, {
|
|
45
49
|
ref: resizableContainerRef,
|
|
46
50
|
className: styles.resizableTableContainer,
|
|
51
|
+
"data-modern": enableModernizedComponents,
|
|
47
52
|
...resizableTableContainerProps,
|
|
48
53
|
children: jsx(TableInner, {
|
|
49
54
|
ref: ref,
|