@box/blueprint-web 12.46.1 → 12.47.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
|
@@ -2631,24 +2631,84 @@
|
|
|
2631
2631
|
--blueprint-select-border-error-left-width:none;
|
|
2632
2632
|
}
|
|
2633
2633
|
|
|
2634
|
-
.bp_select_module_container--
|
|
2634
|
+
.bp_select_module_container--a39b9[data-modern=false]{
|
|
2635
|
+
--select-gap:var(--space-2);
|
|
2636
|
+
--select-label-color:var(--text-text-on-light);
|
|
2637
|
+
--select-trigger-btn-gap:var(--space-2);
|
|
2638
|
+
--select-trigger-btn-height:var(--size-10);
|
|
2639
|
+
--select-trigger-btn-color:var(--text-text-on-light);
|
|
2640
|
+
--select-trigger-btn-bg-color:var(--surface-dropdown-surface);
|
|
2641
|
+
--select-trigger-btn-border-top:var(--blueprint-select-border-top-width, var(--border-1)) solid var(--border-dropdown-border);
|
|
2642
|
+
--select-trigger-btn-border-right:var(--blueprint-select-border-right-width, var(--border-1)) solid var(--border-dropdown-border);
|
|
2643
|
+
--select-trigger-btn-border-bottom:var(--blueprint-select-border-bottom-width, var(--border-1)) solid var(--border-dropdown-border);
|
|
2644
|
+
--select-trigger-btn-border-left:var(--blueprint-select-border-left-width, var(--border-1)) solid var(--border-dropdown-border);
|
|
2645
|
+
--select-trigger-btn-radius:var(--blueprint-select-trigger-radius, var(--radius-2));
|
|
2646
|
+
--select-trigger-btn-box-shadow:var(--dropshadow-2);
|
|
2647
|
+
--select-trigger-btn-padding-inline:var(--space-3);
|
|
2648
|
+
--select-trigger-btn-error-bg-color:var(--surface-dropdown-surface-error);
|
|
2649
|
+
--select-trigger-btn-focus-bg-color:var(--surface-dropdown-surface-error);
|
|
2650
|
+
--select-trigger-btn-error-border-top:var(--blueprint-select-border-error-top-width, var(--border-2)) solid var(--border-dropdown-border-error);
|
|
2651
|
+
--select-trigger-btn-error-border-right:var(--blueprint-select-border-error-right-width, var(--border-2)) solid var(--border-dropdown-border-error);
|
|
2652
|
+
--select-trigger-btn-error-border-bottom:var(--blueprint-select-border-error-bottom-width, var(--border-2)) solid var(--border-dropdown-border-error);
|
|
2653
|
+
--select-trigger-btn-error-border-left:var(--blueprint-select-border-error-left-width, var(--border-2)) solid var(--border-dropdown-border-error);
|
|
2654
|
+
--select-trigger-btn-focus-border:var(--border-2) solid var(--outline-focus-on-light);
|
|
2655
|
+
--select-trigger-btn-hover-bg-color:var(--surface-dropdown-surface-hover);
|
|
2656
|
+
--select-trigger-btn-hover-border-color:var(--border-dropdown-border-hover);
|
|
2657
|
+
--select-trigger-btn-caret-width:var(--size-2);
|
|
2658
|
+
--select-trigger-btn-caret-height:var(--size-2);
|
|
2659
|
+
--select-trigger-btn-caret-color:var(--icon-icon-on-light);
|
|
2660
|
+
--select-trigger-btn-pencil-width:var(--size-4);
|
|
2661
|
+
--select-trigger-btn-pencil-height:var(--size-4);
|
|
2662
|
+
}
|
|
2663
|
+
|
|
2664
|
+
.bp_select_module_container--a39b9[data-modern=true]{
|
|
2665
|
+
--select-gap:var(--bp-space-020);
|
|
2666
|
+
--select-label-color:var(--bp-text-text-on-light);
|
|
2667
|
+
--select-trigger-btn-gap:var(--bp-space-020);
|
|
2668
|
+
--select-trigger-btn-height:var(--bp-size-100);
|
|
2669
|
+
--select-trigger-btn-color:var(--bp-text-text-on-light);
|
|
2670
|
+
--select-trigger-btn-bg-color:var(--bp-surface-dropdown-surface);
|
|
2671
|
+
--select-trigger-btn-border-top:var(--blueprint-select-border-top-width, var(--bp-border-01)) solid var(--bp-border-dropdown-border);
|
|
2672
|
+
--select-trigger-btn-border-right:var(--blueprint-select-border-right-width, var(--bp-border-01)) solid var(--bp-border-dropdown-border);
|
|
2673
|
+
--select-trigger-btn-border-bottom:var(--blueprint-select-border-bottom-width, var(--bp-border-01)) solid var(--bp-border-dropdown-border);
|
|
2674
|
+
--select-trigger-btn-border-left:var(--blueprint-select-border-left-width, var(--border-1)) solid var(--bp-border-dropdown-border);
|
|
2675
|
+
--select-trigger-btn-radius:var(--blueprint-select-trigger-radius, var(--bp-radius-06));
|
|
2676
|
+
--select-trigger-btn-box-shadow:var(--dropshadow-2);
|
|
2677
|
+
--select-trigger-btn-padding-inline:var(--bp-space-030);
|
|
2678
|
+
--select-trigger-btn-error-bg-color:var(--bp-surface-dropdown-surface-error);
|
|
2679
|
+
--select-trigger-btn-focus-bg-color:var(--bp-surface-dropdown-surface-error-focus);
|
|
2680
|
+
--select-trigger-btn-error-border-top:var(--blueprint-select-border-error-top-width, var(--bp-border-02)) solid var(--bp-border-dropdown-border-error);
|
|
2681
|
+
--select-trigger-btn-error-border-right:var(--blueprint-select-border-error-right-width, var(--bp-border-02)) solid var(--bp-border-dropdown-border-error);
|
|
2682
|
+
--select-trigger-btn-error-border-bottom:var(--blueprint-select-border-error-bottom-width, var(--bp-border-02)) solid var(--bp-border-dropdown-border-error);
|
|
2683
|
+
--select-trigger-btn-error-border-left:var(--blueprint-select-border-error-left-width, var(--bp-border-02)) solid var(--bp-border-dropdown-border-error);
|
|
2684
|
+
--select-trigger-btn-focus-border:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
|
|
2685
|
+
--select-trigger-btn-hover-bg-color:var(--bp-surface-dropdown-surface-hover);
|
|
2686
|
+
--select-trigger-btn-hover-border-color:var(--bp-border-dropdown-border-hover);
|
|
2687
|
+
--select-trigger-btn-caret-width:var(--bp-size-030);
|
|
2688
|
+
--select-trigger-btn-caret-height:var(--bp-size-030);
|
|
2689
|
+
--select-trigger-btn-caret-color:var(--bp-icon-icon-on-light);
|
|
2690
|
+
--select-trigger-btn-pencil-width:var(--bp-size-040);
|
|
2691
|
+
--select-trigger-btn-pencil-height:var(--bp-size-040);
|
|
2692
|
+
}
|
|
2693
|
+
|
|
2694
|
+
.bp_select_module_container--a39b9{
|
|
2635
2695
|
display:flex;
|
|
2636
2696
|
flex-direction:column;
|
|
2637
2697
|
font-family:var(--body-default-font-family);
|
|
2638
2698
|
font-size:var(--body-default-font-size);
|
|
2639
2699
|
font-weight:var(--body-default-font-weight);
|
|
2640
|
-
gap:var(--
|
|
2700
|
+
gap:var(--select-gap);
|
|
2641
2701
|
letter-spacing:var(--body-default-letter-spacing);
|
|
2642
2702
|
line-height:var(--body-default-line-height);
|
|
2643
2703
|
-webkit-text-decoration:var(--body-default-text-decoration);
|
|
2644
2704
|
text-decoration:var(--body-default-text-decoration);
|
|
2645
2705
|
text-transform:var(--body-default-text-case);
|
|
2646
2706
|
}
|
|
2647
|
-
.bp_select_module_container--
|
|
2707
|
+
.bp_select_module_container--a39b9.bp_select_module_disabled--a39b9{
|
|
2648
2708
|
opacity:60%;
|
|
2649
2709
|
}
|
|
2650
|
-
.bp_select_module_container--
|
|
2651
|
-
color:var(--
|
|
2710
|
+
.bp_select_module_container--a39b9 .bp_select_module_label--a39b9{
|
|
2711
|
+
color:var(--select-label-color);
|
|
2652
2712
|
flex:0 0 fit-content;
|
|
2653
2713
|
font-family:var(--body-default-bold-font-family);
|
|
2654
2714
|
font-size:var(--body-default-bold-font-size);
|
|
@@ -2660,90 +2720,143 @@
|
|
|
2660
2720
|
text-decoration:var(--body-default-bold-text-decoration);
|
|
2661
2721
|
text-transform:var(--body-default-bold-text-case);
|
|
2662
2722
|
}
|
|
2663
|
-
.bp_select_module_container--
|
|
2723
|
+
.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9{
|
|
2664
2724
|
align-items:center;
|
|
2665
|
-
background-color:var(--
|
|
2666
|
-
border-bottom:var(--
|
|
2667
|
-
border-left:var(--
|
|
2668
|
-
border-radius:var(--
|
|
2669
|
-
border-right:var(--
|
|
2670
|
-
border-top:var(--
|
|
2671
|
-
box-shadow:var(--
|
|
2672
|
-
color:var(--
|
|
2725
|
+
background-color:var(--select-trigger-btn-bg-color);
|
|
2726
|
+
border-bottom:var(--select-trigger-btn-border-bottom);
|
|
2727
|
+
border-left:var(--select-trigger-btn-border-left);
|
|
2728
|
+
border-radius:var(--select-trigger-btn-radius);
|
|
2729
|
+
border-right:var(--select-trigger-btn-border-right);
|
|
2730
|
+
border-top:var(--select-trigger-btn-border-top);
|
|
2731
|
+
box-shadow:var(--select-trigger-btn-box-shadow);
|
|
2732
|
+
color:var(--select-trigger-btn-color);
|
|
2673
2733
|
cursor:pointer;
|
|
2674
2734
|
display:flex;
|
|
2675
2735
|
font-family:var(--body-default-font-family);
|
|
2676
2736
|
font-size:var(--body-default-font-size);
|
|
2677
2737
|
font-weight:var(--body-default-font-weight);
|
|
2678
|
-
gap:var(--
|
|
2679
|
-
height:var(--
|
|
2738
|
+
gap:var(--select-trigger-btn-gap);
|
|
2739
|
+
height:var(--select-trigger-btn-height);
|
|
2680
2740
|
justify-content:space-between;
|
|
2681
2741
|
letter-spacing:var(--body-default-letter-spacing);
|
|
2682
2742
|
line-height:var(--body-default-line-height);
|
|
2683
2743
|
outline:none;
|
|
2684
2744
|
padding-block:0;
|
|
2685
|
-
padding-inline:var(--
|
|
2745
|
+
padding-inline:var(--select-trigger-btn-padding-inline);
|
|
2686
2746
|
text-align:start;
|
|
2687
2747
|
-webkit-text-decoration:var(--body-default-text-decoration);
|
|
2688
2748
|
text-decoration:var(--body-default-text-decoration);
|
|
2689
2749
|
text-transform:var(--body-default-text-case);
|
|
2690
2750
|
width:100%;
|
|
2691
2751
|
}
|
|
2692
|
-
.bp_select_module_container--
|
|
2752
|
+
.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9 span:first-child{
|
|
2693
2753
|
overflow:hidden;
|
|
2694
2754
|
text-overflow:ellipsis;
|
|
2695
2755
|
white-space:nowrap;
|
|
2696
2756
|
}
|
|
2697
|
-
.bp_select_module_container--
|
|
2757
|
+
.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9:disabled{
|
|
2698
2758
|
cursor:default;
|
|
2699
2759
|
}
|
|
2700
|
-
.bp_select_module_container--
|
|
2760
|
+
.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9.bp_select_module_readonly--a39b9:not(:disabled){
|
|
2701
2761
|
background-color:var(--gray-02);
|
|
2702
2762
|
box-shadow:none;
|
|
2703
2763
|
color:var(--text-text-on-light-secondary);
|
|
2704
2764
|
cursor:default;
|
|
2705
2765
|
}
|
|
2706
|
-
.bp_select_module_container--
|
|
2707
|
-
background-color:var(
|
|
2708
|
-
border-bottom:var(--
|
|
2709
|
-
border-left:var(--
|
|
2710
|
-
border-right:var(--
|
|
2711
|
-
border-top:var(--
|
|
2766
|
+
.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9:not(.bp_select_module_readonly--a39b9):not(:disabled).bp_select_module_error--a39b9,.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9:not(.bp_select_module_readonly--a39b9):not(:disabled)[aria-invalid=true]{
|
|
2767
|
+
background-color:var(----select-trigger-btn-error-bg-color);
|
|
2768
|
+
border-bottom:var(--select-trigger-btn-error-border-bottom);
|
|
2769
|
+
border-left:var(--select-trigger-btn-error-border-left);
|
|
2770
|
+
border-right:var(--select-trigger-btn-error-border-right);
|
|
2771
|
+
border-top:var(--select-trigger-btn-error-border-top);
|
|
2712
2772
|
}
|
|
2713
|
-
.bp_select_module_container--
|
|
2714
|
-
background-color:var(--
|
|
2715
|
-
border:var(--
|
|
2773
|
+
.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9:not(.bp_select_module_readonly--a39b9):focus,.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9:not(.bp_select_module_readonly--a39b9):not(:disabled).bp_select_module_error--a39b9:focus,.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9:not(.bp_select_module_readonly--a39b9):not(:disabled)[aria-invalid=true]:focus{
|
|
2774
|
+
background-color:var(--select-trigger-btn-focus-bg-color);
|
|
2775
|
+
border:var(--select-trigger-btn-focus-border);
|
|
2716
2776
|
}
|
|
2717
|
-
.bp_select_module_container--
|
|
2718
|
-
background-color:var(--
|
|
2719
|
-
border-color:var(--
|
|
2777
|
+
.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9:not(.bp_select_module_readonly--a39b9):not(:disabled):not(:focus):not(.bp_select_module_error--a39b9):not([aria-invalid]):hover{
|
|
2778
|
+
background-color:var(--select-trigger-btn-hover-bg-color);
|
|
2779
|
+
border-color:var(--select-trigger-btn-hover-border-color);
|
|
2720
2780
|
}
|
|
2721
|
-
.bp_select_module_container--
|
|
2781
|
+
.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9 .bp_select_module_iconWrapper--a39b9{
|
|
2722
2782
|
flex-shrink:0;
|
|
2723
2783
|
-webkit-user-select:none;
|
|
2724
2784
|
user-select:none;
|
|
2725
2785
|
}
|
|
2726
|
-
.bp_select_module_container--
|
|
2786
|
+
.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9 .bp_select_module_iconCaret--a39b9{
|
|
2727
2787
|
display:block;
|
|
2728
|
-
height:var(--
|
|
2729
|
-
width:var(--
|
|
2788
|
+
height:var(--select-trigger-btn-caret-height);
|
|
2789
|
+
width:var(--select-trigger-btn-caret-width);
|
|
2730
2790
|
}
|
|
2731
|
-
.bp_select_module_container--
|
|
2732
|
-
fill:var(--
|
|
2791
|
+
.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9 .bp_select_module_iconCaret--a39b9 path{
|
|
2792
|
+
fill:var(--select-trigger-btn-caret-color);
|
|
2733
2793
|
}
|
|
2734
|
-
.bp_select_module_container--
|
|
2794
|
+
.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9 .bp_select_module_iconPencilCrossed--a39b9{
|
|
2735
2795
|
display:block;
|
|
2736
|
-
height:var(--
|
|
2737
|
-
width:var(--
|
|
2796
|
+
height:var(--select-trigger-btn-pencil-height);
|
|
2797
|
+
width:var(--select-trigger-btn-pencil-width);
|
|
2738
2798
|
}
|
|
2739
|
-
.bp_select_module_container--
|
|
2799
|
+
.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9[data-state=open] .bp_select_module_icon--a39b9{
|
|
2740
2800
|
transform:rotate(180deg);
|
|
2741
2801
|
}
|
|
2742
2802
|
|
|
2743
|
-
.bp_select_module_content--
|
|
2744
|
-
|
|
2745
|
-
|
|
2746
|
-
border
|
|
2803
|
+
.bp_select_module_content--a39b9[data-modern=false]{
|
|
2804
|
+
--select-content-bg-color:var(--surface-menu-surface);
|
|
2805
|
+
--select-content-backdrop-filter:none;
|
|
2806
|
+
--select-content-border:var(--border-1) solid var(--border-card-border);
|
|
2807
|
+
--select-content-border-radius:var(--radius-3);
|
|
2808
|
+
--select-content-viewport-padding-block:var(--space-3);
|
|
2809
|
+
--select-content-viewport-padding-inline:var(--space-3);
|
|
2810
|
+
--select-content-viewport-option-gap:var(--space-2);
|
|
2811
|
+
--select-content-viewport-option-border:var(--border-2) solid #0000;
|
|
2812
|
+
--select-content-viewport-option-border-radius:var(--space-2);
|
|
2813
|
+
--select-content-viewport-option-padding-block:var(--space-2);
|
|
2814
|
+
--select-content-viewport-option-padding-inline:var(--space-10) var(--space-2);
|
|
2815
|
+
--select-content-viewport-option-focus-bg-color:var(--surface-menu-surface-focus);
|
|
2816
|
+
--select-content-viewport-option-focus-border:var(--border-2) solid var(--outline-focus-on-light);
|
|
2817
|
+
--select-content-viewport-option-active-bg-color:var(--surface-menu-surface-hover);
|
|
2818
|
+
--select-content-viewport-option-active-border:var(--border-2) solid #0000;
|
|
2819
|
+
--select-content-viewport-option-hover-bg-color:var(--surface-menu-surface-hover);
|
|
2820
|
+
--select-content-viewport-option-secondary-text-color:var(--text-text-on-light-secondary);
|
|
2821
|
+
--select-content-viewport-option-indicator-left:var(--space-2);
|
|
2822
|
+
--select-content-viewport-option-indicator-height:var(--size-9);
|
|
2823
|
+
--select-content-viewport-option-indicator-color:var(--icon-icon-on-light);
|
|
2824
|
+
--select-content-viewport-option-separator-height:var(--border-1);
|
|
2825
|
+
--select-content-viewport-option-separator-bg-color:var(--border-divider-border);
|
|
2826
|
+
--select-content-viewport-option-separator-margin-block:var(--space-2);
|
|
2827
|
+
}
|
|
2828
|
+
|
|
2829
|
+
.bp_select_module_content--a39b9[data-modern=true]{
|
|
2830
|
+
--select-content-bg-color:var(--bp-surface-menu-surface-dropdown);
|
|
2831
|
+
--select-content-backdrop-filter:blur(16px);
|
|
2832
|
+
--select-content-border:var(--bp-border-01) solid var(--bp-border-card-border);
|
|
2833
|
+
--select-content-border-radius:var(--bp-radius-10);
|
|
2834
|
+
--select-content-viewport-padding-block:var(--bp-space-030);
|
|
2835
|
+
--select-content-viewport-padding-inline:var(--bp-space-030);
|
|
2836
|
+
--select-content-viewport-option-gap:var(--bp-space-020);
|
|
2837
|
+
--select-content-viewport-option-border:var(--bp-border-02) solid #0000;
|
|
2838
|
+
--select-content-viewport-option-border-radius:var(--bp-radius-10);
|
|
2839
|
+
--select-content-viewport-option-padding-block:var(--bp-space-020);
|
|
2840
|
+
--select-content-viewport-option-padding-inline:var(--bp-space-100) var(--bp-space-020);
|
|
2841
|
+
--select-content-viewport-option-focus-bg-color:var(--bp-surface-menu-item-surface-hover);
|
|
2842
|
+
--select-content-viewport-option-focus-border:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
|
|
2843
|
+
--select-content-viewport-option-active-bg-color:var(--bp-surface-menu-item-surface-hover);
|
|
2844
|
+
--select-content-viewport-option-active-border:var(--bp-border-02) solid #0000;
|
|
2845
|
+
--select-content-viewport-option-hover-bg-color:var(--bp-surface-menu-item-surface-hover);
|
|
2846
|
+
--select-content-viewport-option-secondary-text-color:var(--bp-text-text-on-light-secondary);
|
|
2847
|
+
--select-content-viewport-option-indicator-left:var(--bp-space-020);
|
|
2848
|
+
--select-content-viewport-option-indicator-height:var(--bp-size-090);
|
|
2849
|
+
--select-content-viewport-option-indicator-color:var(--bp-icon-icon-on-light);
|
|
2850
|
+
--select-content-viewport-option-separator-height:var(--bp-border-01);
|
|
2851
|
+
--select-content-viewport-option-separator-bg-color:var(--bp-border-divider-border);
|
|
2852
|
+
--select-content-viewport-option-separator-margin-block:var(--bp-space-020);
|
|
2853
|
+
}
|
|
2854
|
+
|
|
2855
|
+
.bp_select_module_content--a39b9{
|
|
2856
|
+
backdrop-filter:var(--select-content-backdrop-filter);
|
|
2857
|
+
background-color:var(--select-content-bg-color);
|
|
2858
|
+
border:var(--select-content-border);
|
|
2859
|
+
border-radius:var(--select-content-border-radius);
|
|
2747
2860
|
box-shadow:var(--dropshadow-3);
|
|
2748
2861
|
font-family:var(--body-default-font-family);
|
|
2749
2862
|
font-size:var(--body-default-font-size);
|
|
@@ -2759,64 +2872,64 @@
|
|
|
2759
2872
|
text-transform:var(--body-default-text-case);
|
|
2760
2873
|
z-index:380;
|
|
2761
2874
|
}
|
|
2762
|
-
.bp_select_module_content--
|
|
2763
|
-
padding-block:var(--
|
|
2764
|
-
padding-inline:var(--
|
|
2875
|
+
.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9{
|
|
2876
|
+
padding-block:var(--select-content-viewport-padding-block);
|
|
2877
|
+
padding-inline:var(--select-content-viewport-padding-inline);
|
|
2765
2878
|
}
|
|
2766
|
-
.bp_select_module_content--
|
|
2767
|
-
border:var(--border
|
|
2768
|
-
border-radius:var(--radius
|
|
2879
|
+
.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9{
|
|
2880
|
+
border:var(--select-content-viewport-option-border);
|
|
2881
|
+
border-radius:var(--select-content-viewport-option-border-radius);
|
|
2769
2882
|
cursor:pointer;
|
|
2770
2883
|
display:flex;
|
|
2771
2884
|
flex-wrap:wrap;
|
|
2772
|
-
gap:var(--
|
|
2885
|
+
gap:var(--select-content-viewport-option-gap);
|
|
2773
2886
|
justify-content:space-between;
|
|
2774
2887
|
outline:none;
|
|
2775
|
-
padding-block:var(--
|
|
2776
|
-
padding-inline:var(--
|
|
2888
|
+
padding-block:var(--select-content-viewport-option-padding-block);
|
|
2889
|
+
padding-inline:var(--select-content-viewport-option-padding-inline);
|
|
2777
2890
|
position:relative;
|
|
2778
2891
|
-webkit-user-select:none;
|
|
2779
2892
|
user-select:none;
|
|
2780
2893
|
}
|
|
2781
|
-
.bp_select_module_content--
|
|
2894
|
+
.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9[data-disabled]{
|
|
2782
2895
|
opacity:60%;
|
|
2783
2896
|
pointer-events:none;
|
|
2784
2897
|
}
|
|
2785
|
-
.bp_select_module_content--
|
|
2786
|
-
background-color:var(--
|
|
2787
|
-
border:var(--
|
|
2898
|
+
.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9[data-highlighted]{
|
|
2899
|
+
background-color:var(--select-content-viewport-option-focus-bg-color);
|
|
2900
|
+
border:var(--select-content-viewport-option-focus-border);
|
|
2788
2901
|
}
|
|
2789
|
-
.bp_select_module_content--
|
|
2790
|
-
background-color:var(--
|
|
2791
|
-
border:var(--border
|
|
2902
|
+
.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9:active{
|
|
2903
|
+
background-color:var(--select-content-viewport-option-active-bg-color);
|
|
2904
|
+
border:var(--select-content-viewport-option-active-border);
|
|
2792
2905
|
}
|
|
2793
|
-
.bp_select_module_content--
|
|
2794
|
-
background-color:var(--
|
|
2906
|
+
.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9:hover{
|
|
2907
|
+
background-color:var(--select-content-viewport-option-hover-bg-color);
|
|
2795
2908
|
}
|
|
2796
|
-
.bp_select_module_content--
|
|
2909
|
+
.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9 span:first-child{
|
|
2797
2910
|
overflow:hidden;
|
|
2798
2911
|
overflow-wrap:break-word;
|
|
2799
2912
|
}
|
|
2800
|
-
.bp_select_module_content--
|
|
2801
|
-
color:var(--
|
|
2913
|
+
.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9 .bp_select_module_secondaryText--a39b9{
|
|
2914
|
+
color:var(--select-content-viewport-option-secondary-text-color);
|
|
2802
2915
|
}
|
|
2803
|
-
.bp_select_module_content--
|
|
2916
|
+
.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9 .bp_select_module_indicator--a39b9{
|
|
2804
2917
|
align-items:center;
|
|
2805
2918
|
display:flex;
|
|
2806
|
-
height:var(--
|
|
2919
|
+
height:var(--select-content-viewport-option-indicator-height);
|
|
2807
2920
|
justify-content:center;
|
|
2808
|
-
left:var(--
|
|
2921
|
+
left:var(--select-content-viewport-option-indicator-left);
|
|
2809
2922
|
position:absolute;
|
|
2810
2923
|
top:0;
|
|
2811
2924
|
}
|
|
2812
|
-
.bp_select_module_content--
|
|
2813
|
-
fill:var(--
|
|
2925
|
+
.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9 .bp_select_module_indicator--a39b9 path{
|
|
2926
|
+
fill:var(--select-content-viewport-option-indicator-color);
|
|
2814
2927
|
}
|
|
2815
|
-
.bp_select_module_content--
|
|
2816
|
-
background-color:var(--
|
|
2928
|
+
.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_separator--a39b9{
|
|
2929
|
+
background-color:var(--select-content-bg-color-viewport-option-separator-bg-color);
|
|
2817
2930
|
flex-shrink:0;
|
|
2818
|
-
height:var(--
|
|
2819
|
-
margin-block:var(--
|
|
2931
|
+
height:var(--select-content-bg-color-viewport-option-separator-height);
|
|
2932
|
+
margin-block:var(--select-content-bg-color-viewport-option-separator-margin-block);
|
|
2820
2933
|
}
|
|
2821
2934
|
|
|
2822
2935
|
.bp_content_card_module_card--0a584{
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { PencilCrossed, Caret, Checkmark } from '@box/blueprint-web-assets/icons/Fill';
|
|
3
|
+
import { CheckmarkCircle } from '@box/blueprint-web-assets/icons/Medium';
|
|
4
|
+
import { Size5 } from '@box/blueprint-web-assets/tokens/px-tokens';
|
|
3
5
|
import * as ScrollArea from '@radix-ui/react-scroll-area';
|
|
4
6
|
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
5
7
|
import clsx from 'clsx';
|
|
6
8
|
import { forwardRef, useCallback } from 'react';
|
|
9
|
+
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
7
10
|
import { InlineError } from '../primitives/inline-error/inline-error.js';
|
|
8
11
|
import { Text } from '../text/text.js';
|
|
9
12
|
import { useLabelable } from '../util-components/labelable/useLabelable.js';
|
|
@@ -66,10 +69,14 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
66
69
|
}) : jsx(Caret, {
|
|
67
70
|
className: styles.iconCaret
|
|
68
71
|
});
|
|
72
|
+
const {
|
|
73
|
+
enableModernizedComponents
|
|
74
|
+
} = useBlueprintModernization();
|
|
69
75
|
return jsxs("div", {
|
|
70
76
|
className: clsx(styles.container, {
|
|
71
77
|
[styles.disabled]: disabled
|
|
72
78
|
}, className),
|
|
79
|
+
"data-modern": enableModernizedComponents,
|
|
73
80
|
children: [jsx(Label, {
|
|
74
81
|
className: styles.label,
|
|
75
82
|
hideLabel: hideLabel
|
|
@@ -114,12 +121,16 @@ const Content = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
114
121
|
container,
|
|
115
122
|
...contentProps
|
|
116
123
|
} = props;
|
|
124
|
+
const {
|
|
125
|
+
enableModernizedComponents
|
|
126
|
+
} = useBlueprintModernization();
|
|
117
127
|
return jsx(SelectPrimitive.Portal, {
|
|
118
128
|
container: container,
|
|
119
129
|
children: jsx(SelectPrimitive.Content, {
|
|
120
130
|
...contentProps,
|
|
121
131
|
ref: forwardedRef,
|
|
122
132
|
className: clsx(styles.content, className),
|
|
133
|
+
"data-modern": enableModernizedComponents,
|
|
123
134
|
position: "popper",
|
|
124
135
|
sideOffset: 8,
|
|
125
136
|
children: jsx(ScrollArea.Root, {
|
|
@@ -144,6 +155,9 @@ const Option = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
144
155
|
} = props;
|
|
145
156
|
const onPointerLeave = useCallback(event => event.preventDefault(), []);
|
|
146
157
|
const onPointerMove = useCallback(event => event.preventDefault(), []);
|
|
158
|
+
const {
|
|
159
|
+
enableModernizedComponents
|
|
160
|
+
} = useBlueprintModernization();
|
|
147
161
|
return jsxs(SelectPrimitive.Item, {
|
|
148
162
|
...itemProps,
|
|
149
163
|
ref: forwardedRef,
|
|
@@ -157,7 +171,10 @@ const Option = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
157
171
|
children: secondaryText
|
|
158
172
|
}), !itemProps.disabled && jsx(SelectPrimitive.ItemIndicator, {
|
|
159
173
|
className: styles.indicator,
|
|
160
|
-
children: jsx(
|
|
174
|
+
children: enableModernizedComponents ? jsx(CheckmarkCircle, {
|
|
175
|
+
height: Size5,
|
|
176
|
+
width: Size5
|
|
177
|
+
}) : jsx(Checkmark, {})
|
|
161
178
|
})]
|
|
162
179
|
});
|
|
163
180
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"container":"bp_select_module_container--
|
|
2
|
+
var styles = {"container":"bp_select_module_container--a39b9","disabled":"bp_select_module_disabled--a39b9","label":"bp_select_module_label--a39b9","triggerBtn":"bp_select_module_triggerBtn--a39b9","readonly":"bp_select_module_readonly--a39b9","error":"bp_select_module_error--a39b9","iconWrapper":"bp_select_module_iconWrapper--a39b9","iconCaret":"bp_select_module_iconCaret--a39b9","iconPencilCrossed":"bp_select_module_iconPencilCrossed--a39b9","icon":"bp_select_module_icon--a39b9","content":"bp_select_module_content--a39b9","viewport":"bp_select_module_viewport--a39b9","option":"bp_select_module_option--a39b9","secondaryText":"bp_select_module_secondaryText--a39b9","indicator":"bp_select_module_indicator--a39b9","separator":"bp_select_module_separator--a39b9"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|