@box/blueprint-web 13.8.3 → 13.9.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 +125 -69
- package/dist/lib-esm/primitives/base-text-input/base-text-input.module.js +1 -1
- package/dist/lib-esm/primitives/link/link.figma.d.ts +1 -0
- package/dist/lib-esm/text-area/text-area-autosize/text-area-autosize.js +52 -54
- package/dist/lib-esm/text-area/text-area-autosize/text-area-autosize.module.js +1 -1
- package/dist/lib-esm/text-input/text-input.js +9 -3
- package/package.json +3 -3
package/dist/lib-esm/index.css
CHANGED
|
@@ -3741,7 +3741,7 @@
|
|
|
3741
3741
|
font-family:monospace;
|
|
3742
3742
|
transform:scale(1.2);
|
|
3743
3743
|
}
|
|
3744
|
-
.bp_text_area_autosize_module_textArea--
|
|
3744
|
+
.bp_text_area_autosize_module_textArea--475fe[data-modern=false]{
|
|
3745
3745
|
--text-area-text-color:var(--text-text-on-light);
|
|
3746
3746
|
--text-area-inner-shadow:var(--innershadow-1);
|
|
3747
3747
|
--text-area-background-color:var(--surface-input-surface);
|
|
@@ -3760,18 +3760,23 @@
|
|
|
3760
3760
|
text-decoration:var(--body-default-text-decoration);
|
|
3761
3761
|
text-transform:var(--body-default-text-case);
|
|
3762
3762
|
}
|
|
3763
|
+
.bp_text_area_autosize_module_textArea--475fe[data-modern=false].bp_text_area_autosize_module_loading--475fe{
|
|
3764
|
+
padding-inline-end:var(--text-area-icon-padding);
|
|
3765
|
+
}
|
|
3763
3766
|
|
|
3764
|
-
.bp_text_area_autosize_module_textArea--
|
|
3767
|
+
.bp_text_area_autosize_module_textArea--475fe[data-modern=true]{
|
|
3765
3768
|
--text-area-inner-shadow:var(--innershadow-1);
|
|
3766
3769
|
--text-area-text-color:var(--bp-text-text-on-light);
|
|
3767
3770
|
--text-area-background-color:var(--bp-surface-input-surface);
|
|
3768
|
-
--text-area-padding-inline:var(--bp-
|
|
3771
|
+
--text-area-padding-inline:var(--bp-space-030);
|
|
3769
3772
|
--text-area-padding-block:0.625rem;
|
|
3773
|
+
--text-area-icon-padding:var(--bp-space-020);
|
|
3770
3774
|
--text-area-placeholder-color:var(--bp-text-text-on-light-secondary);
|
|
3771
3775
|
--text-area-error-background-color:var(--bp-surface-input-surface-error);
|
|
3772
3776
|
--text-area-error-background-focus:var(--bp-surface-input-surface-focus);
|
|
3773
3777
|
--text-area-error-background-hover:var(--bp-surface-input-surface-hover);
|
|
3774
|
-
--text-area-
|
|
3778
|
+
--text-area-read-only-color:var(--bp-text-text-on-light-secondary);
|
|
3779
|
+
--text-area-read-only-background-color:var(--bp-surface-input-surface-read-only);
|
|
3775
3780
|
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
3776
3781
|
font-size:var(--bp-font-size-05);
|
|
3777
3782
|
font-style:normal;
|
|
@@ -3779,8 +3784,16 @@
|
|
|
3779
3784
|
letter-spacing:var(--bp-font-letter-spacing-01);
|
|
3780
3785
|
line-height:var(--bp-font-line-height-04);
|
|
3781
3786
|
}
|
|
3787
|
+
.bp_text_area_autosize_module_textArea--475fe[data-modern=true].bp_text_area_autosize_module_readOnly--475fe{
|
|
3788
|
+
background-color:var(--text-area-read-only-background-color);
|
|
3789
|
+
color:var(--text-area-read-only-color);
|
|
3790
|
+
cursor:default;
|
|
3791
|
+
}
|
|
3792
|
+
.bp_text_area_autosize_module_textArea--475fe[data-modern=true].bp_text_area_autosize_module_withEndIcon--475fe{
|
|
3793
|
+
padding-inline-end:calc(var(--text-area-padding-inline) + var(--end-icon-width) + var(--text-area-icon-padding));
|
|
3794
|
+
}
|
|
3782
3795
|
|
|
3783
|
-
.bp_text_area_autosize_module_textArea--
|
|
3796
|
+
.bp_text_area_autosize_module_textArea--475fe{
|
|
3784
3797
|
background:var(--text-area-background-color);
|
|
3785
3798
|
border:none;
|
|
3786
3799
|
box-shadow:var(--text-area-inner-shadow);
|
|
@@ -3791,48 +3804,45 @@
|
|
|
3791
3804
|
resize:none;
|
|
3792
3805
|
width:100%;
|
|
3793
3806
|
}
|
|
3794
|
-
.bp_text_area_autosize_module_textArea--
|
|
3807
|
+
.bp_text_area_autosize_module_textArea--475fe::placeholder{
|
|
3795
3808
|
color:var(--text-area-placeholder-color);
|
|
3796
3809
|
opacity:1;
|
|
3797
3810
|
}
|
|
3798
|
-
.bp_text_area_autosize_module_textArea--
|
|
3811
|
+
.bp_text_area_autosize_module_textArea--475fe.bp_text_area_autosize_module_error--475fe{
|
|
3799
3812
|
background:var(--text-area-error-background-color);
|
|
3800
3813
|
outline:0;
|
|
3801
3814
|
}
|
|
3802
|
-
.bp_text_area_autosize_module_textArea--
|
|
3815
|
+
.bp_text_area_autosize_module_textArea--475fe:focus{
|
|
3803
3816
|
border:none;
|
|
3804
3817
|
}
|
|
3805
|
-
.bp_text_area_autosize_module_textArea--
|
|
3818
|
+
.bp_text_area_autosize_module_textArea--475fe:hover{
|
|
3806
3819
|
box-shadow:var(--text-area-inner-shadow);
|
|
3807
3820
|
}
|
|
3808
|
-
.bp_text_area_autosize_module_textArea--
|
|
3821
|
+
.bp_text_area_autosize_module_textArea--475fe:focus-visible{
|
|
3809
3822
|
background:var(--text-area-error-background-focus);
|
|
3810
3823
|
outline:0;
|
|
3811
3824
|
}
|
|
3812
|
-
.bp_text_area_autosize_module_textArea--
|
|
3825
|
+
.bp_text_area_autosize_module_textArea--475fe:disabled{
|
|
3813
3826
|
background:var(--text-area-background-color);
|
|
3814
3827
|
border:none;
|
|
3815
3828
|
box-shadow:var(--text-area-inner-shadow);
|
|
3816
3829
|
color:var(--text-area-text-color);
|
|
3817
3830
|
}
|
|
3818
|
-
.bp_text_area_autosize_module_textArea--
|
|
3831
|
+
.bp_text_area_autosize_module_textArea--475fe:not(:disabled, :focus-visible, .bp_text_area_autosize_module_error--475fe):hover{
|
|
3819
3832
|
background:var(--text-area-error-background-hover);
|
|
3820
3833
|
}
|
|
3821
|
-
.bp_text_area_autosize_module_textArea--23f18.bp_text_area_autosize_module_loading--23f18{
|
|
3822
|
-
padding-inline-end:var(--text-area-icon-padding);
|
|
3823
|
-
}
|
|
3824
3834
|
|
|
3825
|
-
.bp_text_area_autosize_module_loadingIndicator--
|
|
3835
|
+
.bp_text_area_autosize_module_loadingIndicator--475fe[data-modern=false]{
|
|
3826
3836
|
--text-area-loading-indicator-width:var(--size-6);
|
|
3827
3837
|
--text-area-loading-indicator-height:var(--size-6);
|
|
3828
3838
|
}
|
|
3829
3839
|
|
|
3830
|
-
.bp_text_area_autosize_module_loadingIndicator--
|
|
3840
|
+
.bp_text_area_autosize_module_loadingIndicator--475fe[data-modern=true]{
|
|
3831
3841
|
--text-area-loading-indicator-width:var(--bp-size-060);
|
|
3832
3842
|
--text-area-loading-indicator-height:var(--bp-size-060);
|
|
3833
3843
|
}
|
|
3834
3844
|
|
|
3835
|
-
.bp_text_area_autosize_module_loadingIndicator--
|
|
3845
|
+
.bp_text_area_autosize_module_loadingIndicator--475fe{
|
|
3836
3846
|
bottom:.375rem;
|
|
3837
3847
|
display:inline-block;
|
|
3838
3848
|
height:var(--text-area-loading-indicator-height);
|
|
@@ -3842,25 +3852,70 @@
|
|
|
3842
3852
|
width:var(--text-area-loading-indicator-width);
|
|
3843
3853
|
}
|
|
3844
3854
|
|
|
3845
|
-
.
|
|
3855
|
+
.bp_text_area_autosize_module_loadingIndicatorReset--475fe div{
|
|
3856
|
+
position:static;
|
|
3857
|
+
}
|
|
3858
|
+
|
|
3859
|
+
.bp_text_area_autosize_module_border--475fe[data-modern=false]{
|
|
3846
3860
|
--text-area-radius:var(--radius-2);
|
|
3847
3861
|
--text-area-border-width:var(--border-1);
|
|
3848
3862
|
--text-area-shadow-color:var(--border-input-border);
|
|
3863
|
+
--text-area-border-width-focus:var(--border-2);
|
|
3864
|
+
--text-area-border-color-focus:var(--border-input-border-focus);
|
|
3865
|
+
--text-area-border-width-error:var(--border-2);
|
|
3866
|
+
--text-area-border-color-error:var(--border-input-border-error);
|
|
3867
|
+
--text-area-border-color-hover:var(--border-input-border-hover);
|
|
3868
|
+
--text-area-border-color-read-only:var(--border-collapsible-border);
|
|
3849
3869
|
}
|
|
3850
3870
|
|
|
3851
|
-
.bp_text_area_autosize_module_border--
|
|
3871
|
+
.bp_text_area_autosize_module_border--475fe[data-modern=true]{
|
|
3852
3872
|
--text-area-radius:var(--bp-radius-06);
|
|
3853
3873
|
--text-area-border-width:var(--bp-border-01);
|
|
3854
3874
|
--text-area-shadow-color:var(--bp-border-input-border);
|
|
3875
|
+
--text-area-border-width-focus:var(--bp-border-02);
|
|
3876
|
+
--text-area-border-color-focus:var(--bp-border-input-border-focus);
|
|
3877
|
+
--text-area-border-width-error:var(--bp-border-02);
|
|
3878
|
+
--text-area-border-color-error:var(--bp-border-input-border-error);
|
|
3879
|
+
--text-area-border-color-read-only:var(--bp-border-input-border-read-only);
|
|
3880
|
+
--text-area-border-color-hover:var(--bp-border-input-border-hover);
|
|
3881
|
+
--text-area-padding-inline:var(--bp-space-030);
|
|
3855
3882
|
}
|
|
3856
3883
|
|
|
3857
|
-
.bp_text_area_autosize_module_border--
|
|
3884
|
+
.bp_text_area_autosize_module_border--475fe{
|
|
3858
3885
|
border-radius:var(--text-area-radius);
|
|
3859
3886
|
box-shadow:0 0 0 var(--text-area-border-width) var(--text-area-shadow-color);
|
|
3860
3887
|
display:flex;
|
|
3861
3888
|
overflow:hidden;
|
|
3889
|
+
position:relative;
|
|
3862
3890
|
transform:translateZ(0);
|
|
3863
3891
|
}
|
|
3892
|
+
.bp_text_area_autosize_module_border--475fe.bp_text_area_autosize_module_readOnly--475fe{
|
|
3893
|
+
box-shadow:0 0 0 var(--text-area-border-width) var(--text-area-border-color-read-only);
|
|
3894
|
+
cursor:default;
|
|
3895
|
+
}
|
|
3896
|
+
.bp_text_area_autosize_module_border--475fe:focus-within{
|
|
3897
|
+
box-shadow:0 0 0 var(--text-area-border-width-focus) var(--text-area-border-color-focus);
|
|
3898
|
+
}
|
|
3899
|
+
.bp_text_area_autosize_module_border--475fe:hover:not(:focus-within, .bp_text_area_autosize_module_hasError--475fe, .bp_text_area_autosize_module_disabled--475fe){
|
|
3900
|
+
box-shadow:0 0 0 var(--text-area-border-width) var(--text-area-border-color-hover);
|
|
3901
|
+
}
|
|
3902
|
+
.bp_text_area_autosize_module_border--475fe.bp_text_area_autosize_module_hasError--475fe{
|
|
3903
|
+
box-shadow:0 0 0 var(--text-area-border-width-error) var(--text-area-border-color-error);
|
|
3904
|
+
}
|
|
3905
|
+
.bp_text_area_autosize_module_border--475fe .bp_text_area_autosize_module_endIconWrap--475fe{
|
|
3906
|
+
height:var(--bp-space-100);
|
|
3907
|
+
pointer-events:none;
|
|
3908
|
+
position:absolute;
|
|
3909
|
+
right:0;
|
|
3910
|
+
top:0;
|
|
3911
|
+
}
|
|
3912
|
+
.bp_text_area_autosize_module_border--475fe .bp_text_area_autosize_module_endIconWrap--475fe .bp_text_area_autosize_module_endIcon--475fe{
|
|
3913
|
+
pointer-events:auto;
|
|
3914
|
+
position:absolute;
|
|
3915
|
+
right:calc(var(--text-area-padding-inline) + var(--text-area-border-width));
|
|
3916
|
+
top:50%;
|
|
3917
|
+
transform:translateY(-50%);
|
|
3918
|
+
}
|
|
3864
3919
|
.bp_text_area_module_textAreaContainer--62c43[data-modern=false]{
|
|
3865
3920
|
--text-area-container-row-gap:var(--space-2);
|
|
3866
3921
|
--text-area-container-label-color:var(--text-text-on-light);
|
|
@@ -8704,14 +8759,14 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
8704
8759
|
.bp_password_input_module_passwordInput--b74ce .bp_password_input_module_iconButton--b74ce:active,.bp_password_input_module_passwordInput--b74ce .bp_password_input_module_iconButton--b74ce:hover{
|
|
8705
8760
|
background:none;
|
|
8706
8761
|
}
|
|
8707
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8762
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693[data-modern=false]{
|
|
8708
8763
|
--text-input-border-width:var(--border-1);
|
|
8709
8764
|
--text-input-border-width-focused:var(--border-2);
|
|
8710
8765
|
--text-input-border-width-error:var(--border-2);
|
|
8711
|
-
--text-input-padding-
|
|
8766
|
+
--text-input-padding-inline:var(--space-3);
|
|
8712
8767
|
--text-input-icon-padding:var(--space-2);
|
|
8713
|
-
--text-input-padding-
|
|
8714
|
-
--text-input-padding-
|
|
8768
|
+
--text-input-padding-inline-focused:calc(var(--text-input-padding-inline) - var(--text-input-border-width-focused) + var(--text-input-border-width));
|
|
8769
|
+
--text-input-padding-inline-error:calc(var(--text-input-padding-inline) - var(--text-input-border-width-error) + var(--text-input-border-width));
|
|
8715
8770
|
--text-input-inline-error-subtext-block-margin:var(--space-2);
|
|
8716
8771
|
--text-input-row-gap:var(--space-2);
|
|
8717
8772
|
--text-input-label-color:var(--text-text-on-light);
|
|
@@ -8741,7 +8796,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
8741
8796
|
text-decoration:var(--body-default-text-decoration);
|
|
8742
8797
|
text-transform:var(--body-default-text-case);
|
|
8743
8798
|
}
|
|
8744
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8799
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693[data-modern=false] .bp_base_text_input_module_label--f7693{
|
|
8745
8800
|
font-family:var(--body-default-bold-font-family);
|
|
8746
8801
|
font-size:var(--body-default-bold-font-size);
|
|
8747
8802
|
font-weight:var(--body-default-bold-font-weight);
|
|
@@ -8750,7 +8805,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
8750
8805
|
text-decoration:var(--body-default-bold-text-decoration);
|
|
8751
8806
|
text-transform:var(--body-default-bold-text-case);
|
|
8752
8807
|
}
|
|
8753
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8808
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693[data-modern=false] .bp_base_text_input_module_textInputContainer--f7693 .bp_base_text_input_module_textInput--f7693,.bp_base_text_input_module_textInputContainerOuter--f7693[data-modern=false] .bp_base_text_input_module_textInputContainer--f7693 input[type=number].bp_base_text_input_module_textInput--f7693,.bp_base_text_input_module_textInputContainerOuter--f7693[data-modern=false] .bp_base_text_input_module_textInputContainer--f7693 input[type=text].bp_base_text_input_module_textInput--f7693{
|
|
8754
8809
|
font-family:var(--body-default-font-family);
|
|
8755
8810
|
font-size:var(--body-default-font-size);
|
|
8756
8811
|
font-weight:var(--body-default-font-weight);
|
|
@@ -8760,14 +8815,14 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
8760
8815
|
text-transform:var(--body-default-text-case);
|
|
8761
8816
|
}
|
|
8762
8817
|
|
|
8763
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8818
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693[data-modern=true]{
|
|
8764
8819
|
--text-input-border-width:var(--bp-border-01);
|
|
8765
8820
|
--text-input-border-width-focused:var(--bp-border-02);
|
|
8766
8821
|
--text-input-border-width-error:var(--bp-border-02);
|
|
8767
|
-
--text-input-padding-
|
|
8822
|
+
--text-input-padding-inline:var(--bp-space-030);
|
|
8768
8823
|
--text-input-icon-padding:var(--bp-space-020);
|
|
8769
|
-
--text-input-padding-
|
|
8770
|
-
--text-input-padding-
|
|
8824
|
+
--text-input-padding-inline-focused:calc(var(--text-input-padding-inline) - var(--text-input-border-width-focused) + var(--text-input-border-width));
|
|
8825
|
+
--text-input-padding-inline-error:calc(var(--text-input-padding-inline) - var(--text-input-border-width-error) + var(--text-input-border-width));
|
|
8771
8826
|
--text-input-inline-error-subtext-block-margin:var(--bp-space-020);
|
|
8772
8827
|
--text-input-row-gap:var(--bp-space-020);
|
|
8773
8828
|
--text-input-label-color:var(--bp-text-text-on-light);
|
|
@@ -8781,7 +8836,8 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
8781
8836
|
--text-input-error-background:var(--bp-surface-input-surface-error);
|
|
8782
8837
|
--text-input-error-border-color:var(--bp-border-input-border-error);
|
|
8783
8838
|
--text-input-read-only-color:var(--bp-text-text-on-light-secondary);
|
|
8784
|
-
--text-input-read-only-
|
|
8839
|
+
--text-input-read-only-background:var(--bp-surface-input-surface-read-only);
|
|
8840
|
+
--text-input-read-only-border-color:var(--bp-border-input-border-read-only);
|
|
8785
8841
|
--text-input-disabled-color:var(--bp-text-text-on-light);
|
|
8786
8842
|
--text-input-disabled-background:var(--bp-surface-input-surface);
|
|
8787
8843
|
--text-input-disabled-border-color:var(--bp-border-input-border);
|
|
@@ -8791,17 +8847,17 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
8791
8847
|
--text-input-hover-border-color:var(--bp-border-input-border-hover);
|
|
8792
8848
|
font-weight:var(--bp-font-weight-regular);
|
|
8793
8849
|
}
|
|
8794
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8850
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693[data-modern=true],.bp_base_text_input_module_textInputContainerOuter--f7693[data-modern=true] .bp_base_text_input_module_label--f7693{
|
|
8795
8851
|
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
8796
8852
|
font-size:var(--bp-font-size-05);
|
|
8797
8853
|
font-style:normal;
|
|
8798
8854
|
letter-spacing:var(--bp-font-letter-spacing-01);
|
|
8799
8855
|
line-height:var(--bp-font-line-height-04);
|
|
8800
8856
|
}
|
|
8801
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8857
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693[data-modern=true] .bp_base_text_input_module_label--f7693{
|
|
8802
8858
|
font-weight:var(--bp-font-weight-bold);
|
|
8803
8859
|
}
|
|
8804
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8860
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693[data-modern=true] .bp_base_text_input_module_textInputContainer--f7693 .bp_base_text_input_module_textInput--f7693,.bp_base_text_input_module_textInputContainerOuter--f7693[data-modern=true] .bp_base_text_input_module_textInputContainer--f7693 input[type=number].bp_base_text_input_module_textInput--f7693,.bp_base_text_input_module_textInputContainerOuter--f7693[data-modern=true] .bp_base_text_input_module_textInputContainer--f7693 input[type=text].bp_base_text_input_module_textInput--f7693{
|
|
8805
8861
|
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
8806
8862
|
font-size:var(--bp-font-size-05);
|
|
8807
8863
|
font-style:normal;
|
|
@@ -8810,26 +8866,26 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
8810
8866
|
line-height:var(--bp-font-line-height-04);
|
|
8811
8867
|
}
|
|
8812
8868
|
|
|
8813
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8869
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693{
|
|
8814
8870
|
--disabled-opacity:var(--text-input-disabled-opacity-api, 60%);
|
|
8815
8871
|
display:flex;
|
|
8816
8872
|
flex-direction:column;
|
|
8817
8873
|
}
|
|
8818
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8874
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_label--f7693{
|
|
8819
8875
|
color:var(--text-input-label-color);
|
|
8820
8876
|
flex:0 0 fit-content;
|
|
8821
8877
|
width:-moz-fit-content;
|
|
8822
8878
|
width:fit-content;
|
|
8823
8879
|
}
|
|
8824
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8880
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_label--f7693:not(.bp_base_text_input_module_hidden--f7693){
|
|
8825
8881
|
margin-block-end:var(--text-input-row-gap);
|
|
8826
8882
|
}
|
|
8827
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8883
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693{
|
|
8828
8884
|
display:flex;
|
|
8829
8885
|
height:var(--size-10);
|
|
8830
8886
|
position:relative;
|
|
8831
8887
|
}
|
|
8832
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8888
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 .bp_base_text_input_module_textInput--f7693,.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=number].bp_base_text_input_module_textInput--f7693,.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=text].bp_base_text_input_module_textInput--f7693{
|
|
8833
8889
|
background:var(--text-input-background);
|
|
8834
8890
|
border:var(--text-input-border-width) solid var(--text-input-border-color);
|
|
8835
8891
|
border-radius:var(--text-input-border-radius);
|
|
@@ -8838,80 +8894,80 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
8838
8894
|
color:var(--text-input-color);
|
|
8839
8895
|
height:100%;
|
|
8840
8896
|
padding-block:0;
|
|
8841
|
-
padding-inline:var(--text-input-padding-
|
|
8897
|
+
padding-inline:var(--text-input-padding-inline);
|
|
8842
8898
|
width:100%;
|
|
8843
8899
|
}
|
|
8844
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8900
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 .bp_base_text_input_module_textInput--f7693:hover,.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=number].bp_base_text_input_module_textInput--f7693:hover,.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=text].bp_base_text_input_module_textInput--f7693:hover{
|
|
8845
8901
|
box-shadow:var(--text-input-box-shadow);
|
|
8846
8902
|
}
|
|
8847
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8903
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 .bp_base_text_input_module_textInput--f7693::placeholder,.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=number].bp_base_text_input_module_textInput--f7693::placeholder,.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=text].bp_base_text_input_module_textInput--f7693::placeholder{
|
|
8848
8904
|
color:var(--text-input-placeholder-color);
|
|
8849
8905
|
opacity:1;
|
|
8850
8906
|
}
|
|
8851
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8907
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 .bp_base_text_input_module_textInput--f7693.bp_base_text_input_module_error--f7693,.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=number].bp_base_text_input_module_textInput--f7693.bp_base_text_input_module_error--f7693,.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=text].bp_base_text_input_module_textInput--f7693.bp_base_text_input_module_error--f7693{
|
|
8852
8908
|
background:var(--text-input-error-background);
|
|
8853
8909
|
border:var(--text-input-border-width-error) solid var(--text-input-error-border-color);
|
|
8854
8910
|
outline:0;
|
|
8855
|
-
padding-inline-start:var(--text-input-padding-
|
|
8911
|
+
padding-inline-start:var(--text-input-padding-inline-error);
|
|
8856
8912
|
}
|
|
8857
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8913
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 .bp_base_text_input_module_textInput--f7693.bp_base_text_input_module_readOnly--f7693,.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=number].bp_base_text_input_module_textInput--f7693.bp_base_text_input_module_readOnly--f7693,.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=text].bp_base_text_input_module_textInput--f7693.bp_base_text_input_module_readOnly--f7693{
|
|
8914
|
+
background-color:var(--text-input-read-only-background);
|
|
8858
8915
|
border-color:var(--text-input-read-only-border-color);
|
|
8859
8916
|
box-shadow:var(--text-input-box-shadow);
|
|
8860
8917
|
color:var(--text-input-read-only-color);
|
|
8918
|
+
cursor:default;
|
|
8861
8919
|
}
|
|
8862
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8920
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 .bp_base_text_input_module_textInput--f7693.bp_base_text_input_module_readOnly--f7693:focus-visible,.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=number].bp_base_text_input_module_textInput--f7693.bp_base_text_input_module_readOnly--f7693:focus-visible,.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=text].bp_base_text_input_module_textInput--f7693.bp_base_text_input_module_readOnly--f7693:focus-visible{
|
|
8863
8921
|
border:var(--text-input-border-width-focused) solid var(--text-input-border-color-focus);
|
|
8864
8922
|
}
|
|
8865
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8866
|
-
cursor:default;
|
|
8867
|
-
}
|
|
8868
|
-
.bp_base_text_input_module_textInputContainerOuter--b6125 .bp_base_text_input_module_textInputContainer--b6125 .bp_base_text_input_module_textInput--b6125:disabled,.bp_base_text_input_module_textInputContainerOuter--b6125 .bp_base_text_input_module_textInputContainer--b6125 input[type=number].bp_base_text_input_module_textInput--b6125:disabled,.bp_base_text_input_module_textInputContainerOuter--b6125 .bp_base_text_input_module_textInputContainer--b6125 input[type=text].bp_base_text_input_module_textInput--b6125:disabled{
|
|
8923
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 .bp_base_text_input_module_textInput--f7693:disabled,.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=number].bp_base_text_input_module_textInput--f7693:disabled,.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=text].bp_base_text_input_module_textInput--f7693:disabled{
|
|
8869
8924
|
background:var(--text-input-disabled-background);
|
|
8870
8925
|
border-color:var(--text-input-disabled-border-color);
|
|
8871
8926
|
box-shadow:var(--text-input-box-shadow);
|
|
8872
8927
|
color:var(--text-input-disabled-color);
|
|
8873
8928
|
}
|
|
8874
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8929
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 .bp_base_text_input_module_textInput--f7693:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=number].bp_base_text_input_module_textInput--f7693:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=text].bp_base_text_input_module_textInput--f7693:disabled:hover{
|
|
8875
8930
|
border-color:var(--text-input-border-color);
|
|
8876
8931
|
}
|
|
8877
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8932
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 .bp_base_text_input_module_textInput--f7693:focus-visible,.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=number].bp_base_text_input_module_textInput--f7693:focus-visible,.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=text].bp_base_text_input_module_textInput--f7693:focus-visible{
|
|
8878
8933
|
background:var(--text-input-focused-background);
|
|
8879
8934
|
border:var(--text-input-border-width-focused) solid var(--text-input-focused-border-color);
|
|
8880
8935
|
outline:0;
|
|
8881
|
-
padding-inline-start:var(--text-input-padding-
|
|
8936
|
+
padding-inline-start:var(--text-input-padding-inline-focused);
|
|
8882
8937
|
}
|
|
8883
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8884
|
-
padding-inline-end:calc(var(--text-input-padding-
|
|
8938
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 .bp_base_text_input_module_textInput--f7693:has(+ .bp_base_text_input_module_endIcon--f7693),.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=number].bp_base_text_input_module_textInput--f7693:has(+ .bp_base_text_input_module_endIcon--f7693),.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=text].bp_base_text_input_module_textInput--f7693:has(+ .bp_base_text_input_module_endIcon--f7693){
|
|
8939
|
+
padding-inline-end:calc(var(--text-input-padding-inline) + var(--end-icon-width) + var(--text-input-icon-padding));
|
|
8885
8940
|
}
|
|
8886
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8941
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 .bp_base_text_input_module_textInput--f7693:not(:disabled, :focus-visible, .bp_base_text_input_module_error--f7693):hover, .bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=number].bp_base_text_input_module_textInput--f7693:not(:disabled, :focus-visible, .bp_base_text_input_module_error--f7693):hover, .bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 input[type=text].bp_base_text_input_module_textInput--f7693:not(:disabled, :focus-visible, .bp_base_text_input_module_error--f7693):hover{
|
|
8887
8942
|
background:var(--text-input-hover-background);
|
|
8888
8943
|
border:var(--border-1) solid var(--text-input-hover-border-color);
|
|
8889
8944
|
}
|
|
8890
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8891
|
-
left:calc(var(--text-input-padding-
|
|
8945
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 .bp_base_text_input_module_startIcon--f7693{
|
|
8946
|
+
left:calc(var(--text-input-padding-inline) + var(--text-input-border-width));
|
|
8892
8947
|
position:absolute;
|
|
8893
8948
|
top:50%;
|
|
8894
8949
|
transform:translateY(-50%);
|
|
8895
8950
|
}
|
|
8896
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8897
|
-
|
|
8951
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 .bp_base_text_input_module_startIcon--f7693 + input.bp_base_text_input_module_textInput--f7693{
|
|
8952
|
+
--text-input-start-icon-space:calc(var(--text-input-icon-padding) + var(--start-icon-width));
|
|
8953
|
+
padding-inline-start:calc(var(--text-input-padding-inline) + var(--text-input-start-icon-space));
|
|
8898
8954
|
}
|
|
8899
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8900
|
-
padding-inline-start:calc(var(--text-input-padding-
|
|
8955
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 .bp_base_text_input_module_startIcon--f7693 + input.bp_base_text_input_module_textInput--f7693:focus-visible{
|
|
8956
|
+
padding-inline-start:calc(var(--text-input-padding-inline-focused) + var(--text-input-start-icon-space));
|
|
8901
8957
|
}
|
|
8902
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8903
|
-
padding-inline-start:calc(var(--text-input-padding-
|
|
8958
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 .bp_base_text_input_module_startIcon--f7693 + input.bp_base_text_input_module_textInput--f7693.bp_base_text_input_module_error--f7693{
|
|
8959
|
+
padding-inline-start:calc(var(--text-input-padding-inline-error) + var(--text-input-start-icon-space));
|
|
8904
8960
|
}
|
|
8905
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8961
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_textInputContainer--f7693 .bp_base_text_input_module_endIcon--f7693{
|
|
8906
8962
|
position:absolute;
|
|
8907
|
-
right:calc(var(--text-input-padding-
|
|
8963
|
+
right:calc(var(--text-input-padding-inline) + var(--text-input-border-width));
|
|
8908
8964
|
top:50%;
|
|
8909
8965
|
transform:translateY(-50%);
|
|
8910
8966
|
}
|
|
8911
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8967
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693.bp_base_text_input_module_disabled--f7693{
|
|
8912
8968
|
opacity:var(--disabled-opacity);
|
|
8913
8969
|
}
|
|
8914
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
8970
|
+
.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_inlineError--f7693,.bp_base_text_input_module_textInputContainerOuter--f7693 .bp_base_text_input_module_subtext--f7693{
|
|
8915
8971
|
margin-block-start:var(--text-input-inline-error-subtext-block-margin);
|
|
8916
8972
|
}
|
|
8917
8973
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"textInputContainerOuter":"bp_base_text_input_module_textInputContainerOuter--
|
|
2
|
+
var styles = {"textInputContainerOuter":"bp_base_text_input_module_textInputContainerOuter--f7693","label":"bp_base_text_input_module_label--f7693","textInputContainer":"bp_base_text_input_module_textInputContainer--f7693","textInput":"bp_base_text_input_module_textInput--f7693","hidden":"bp_base_text_input_module_hidden--f7693","error":"bp_base_text_input_module_error--f7693","readOnly":"bp_base_text_input_module_readOnly--f7693","endIcon":"bp_base_text_input_module_endIcon--f7693","startIcon":"bp_base_text_input_module_startIcon--f7693","disabled":"bp_base_text_input_module_disabled--f7693","inlineError":"bp_base_text_input_module_inlineError--f7693","subtext":"bp_base_text_input_module_subtext--f7693"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { PencilCrossed } from '@box/blueprint-web-assets/icons/Medium';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
|
-
import { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
|
|
4
|
+
import { forwardRef, useRef, useState, useCallback, useEffect, useMemo, cloneElement } from 'react';
|
|
5
5
|
import { flushSync } from 'react-dom';
|
|
6
6
|
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
7
7
|
import { LoadingIndicator } from '../../loading-indicator/loading-indicator.js';
|
|
@@ -14,9 +14,6 @@ import styles from './text-area-autosize.module.js';
|
|
|
14
14
|
function convertToDecimalNumber(value) {
|
|
15
15
|
return parseInt(value, 10) || 0;
|
|
16
16
|
}
|
|
17
|
-
function getBoxShadowStyle(width, color) {
|
|
18
|
-
return `0px 0px 0px ${width} ${color}`;
|
|
19
|
-
}
|
|
20
17
|
const getScrollbarWidth = () => {
|
|
21
18
|
const outer = document.createElement('div');
|
|
22
19
|
outer.style.visibility = 'hidden';
|
|
@@ -59,6 +56,7 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
|
|
|
59
56
|
hasError,
|
|
60
57
|
loading = false,
|
|
61
58
|
loadingAriaLabel,
|
|
59
|
+
readOnly,
|
|
62
60
|
onFocus,
|
|
63
61
|
onBlur,
|
|
64
62
|
...rest
|
|
@@ -76,12 +74,12 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
|
|
|
76
74
|
const [state, setState] = useState({
|
|
77
75
|
outerHeightStyle: 0
|
|
78
76
|
});
|
|
79
|
-
const [isFocused, setIsFocused] = useState(false);
|
|
80
77
|
const [isScrollbarVisible, setIsScrollbarVisible] = useState(false);
|
|
81
78
|
const isLoading = !props.disabled && loading && loadingAriaLabel;
|
|
82
79
|
const focusTextArea = useCallback(() => {
|
|
83
80
|
inputRef.current?.focus();
|
|
84
81
|
}, []);
|
|
82
|
+
const [endIconWidth, setEndIconWidth] = useState(null);
|
|
85
83
|
const getUpdatedState = useCallback(() => {
|
|
86
84
|
const fallbackHeight = {
|
|
87
85
|
outerHeightStyle: 0
|
|
@@ -236,60 +234,56 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
|
|
|
236
234
|
useEffect(() => {
|
|
237
235
|
setIsScrollbarVisible(getScrollbarWidth() > 0);
|
|
238
236
|
}, []);
|
|
239
|
-
// border management
|
|
240
|
-
const handleBlur = e => {
|
|
241
|
-
setIsFocused(false);
|
|
242
|
-
if (onBlur) {
|
|
243
|
-
onBlur(e);
|
|
244
|
-
}
|
|
245
|
-
};
|
|
246
|
-
const handleFocus = e => {
|
|
247
|
-
setIsFocused(true);
|
|
248
|
-
if (onFocus) {
|
|
249
|
-
onFocus(e);
|
|
250
|
-
}
|
|
251
|
-
};
|
|
252
|
-
const handleHover = e => {
|
|
253
|
-
if (isFocused || rest.disabled || hasError) {
|
|
254
|
-
return;
|
|
255
|
-
}
|
|
256
|
-
e.currentTarget.style.boxShadow = getBoxShadowStyle(Border1, BorderInputBorderHover);
|
|
257
|
-
};
|
|
258
|
-
const handleOnMouseOut = e => {
|
|
259
|
-
if (isFocused || rest.disabled || hasError) {
|
|
260
|
-
return;
|
|
261
|
-
}
|
|
262
|
-
e.currentTarget.style.boxShadow = '';
|
|
263
|
-
};
|
|
264
|
-
let borderInlineStyle = {};
|
|
265
|
-
if (isFocused) {
|
|
266
|
-
borderInlineStyle = {
|
|
267
|
-
boxShadow: getBoxShadowStyle(Border2, BorderInputBorderFocus)
|
|
268
|
-
};
|
|
269
|
-
} else if (hasError) {
|
|
270
|
-
borderInlineStyle = {
|
|
271
|
-
boxShadow: getBoxShadowStyle(Border2, BorderInputBorderError)
|
|
272
|
-
};
|
|
273
|
-
}
|
|
274
237
|
const classNames = clsx([styles.textArea], {
|
|
275
238
|
[styles.error]: hasError,
|
|
276
|
-
[styles.loading]: isLoading
|
|
239
|
+
[styles.loading]: isLoading && !enableModernizedComponents
|
|
277
240
|
});
|
|
278
|
-
const shouldCompensateScrollbar = !state.overflow && !isScrollbarVisible && (hasError || isLoading);
|
|
241
|
+
const shouldCompensateScrollbar = !state.overflow && !isScrollbarVisible && (hasError || isLoading && !enableModernizedComponents);
|
|
242
|
+
const endIcon = useMemo(() => {
|
|
243
|
+
if (!enableModernizedComponents) {
|
|
244
|
+
return null;
|
|
245
|
+
}
|
|
246
|
+
if (isLoading) {
|
|
247
|
+
return jsx("div", {
|
|
248
|
+
className: styles.loadingIndicatorReset,
|
|
249
|
+
children: jsx(LoadingIndicator, {
|
|
250
|
+
"aria-label": loadingAriaLabel,
|
|
251
|
+
onClick: focusTextArea
|
|
252
|
+
})
|
|
253
|
+
});
|
|
254
|
+
}
|
|
255
|
+
if (readOnly) {
|
|
256
|
+
return jsx(PencilCrossed, {
|
|
257
|
+
onClick: focusTextArea,
|
|
258
|
+
role: "presentation"
|
|
259
|
+
});
|
|
260
|
+
}
|
|
261
|
+
return null;
|
|
262
|
+
}, [enableModernizedComponents, isLoading, loadingAriaLabel, readOnly, focusTextArea]);
|
|
263
|
+
const endIconComponent = useMemo(() => endIcon && /*#__PURE__*/cloneElement(endIcon, {
|
|
264
|
+
ref: node => {
|
|
265
|
+
if (node) {
|
|
266
|
+
setEndIconWidth(node.getBoundingClientRect().width);
|
|
267
|
+
}
|
|
268
|
+
},
|
|
269
|
+
className: clsx(endIcon.props?.className, styles.endIcon)
|
|
270
|
+
}), [endIcon]);
|
|
279
271
|
return jsxs("div", {
|
|
280
|
-
className: styles.border,
|
|
272
|
+
className: clsx(styles.border, hasError && styles.hasError, readOnly && styles.readOnly, rest.disabled && styles.disabled),
|
|
281
273
|
"data-modern": enableModernizedComponents ? 'true' : 'false',
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
274
|
+
style: {
|
|
275
|
+
'--end-icon-width': endIconWidth ? `${endIconWidth}px` : '0px'
|
|
276
|
+
},
|
|
285
277
|
children: [jsx("textarea", {
|
|
286
278
|
...rest,
|
|
287
279
|
ref: handleRef,
|
|
288
|
-
className: classNames,
|
|
280
|
+
className: clsx(classNames, {
|
|
281
|
+
[styles.withEndIcon]: !!endIconComponent
|
|
282
|
+
}, readOnly && styles.readOnly),
|
|
289
283
|
"data-modern": enableModernizedComponents ? 'true' : 'false',
|
|
290
|
-
onBlur:
|
|
284
|
+
onBlur: onBlur,
|
|
291
285
|
onChange: handleChange,
|
|
292
|
-
onFocus:
|
|
286
|
+
onFocus: onFocus,
|
|
293
287
|
// Apply the rows prop to get a "correct" first SSR paint
|
|
294
288
|
rows: minRows,
|
|
295
289
|
style: {
|
|
@@ -302,7 +296,8 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
|
|
|
302
296
|
} : {}),
|
|
303
297
|
...inlineStyle
|
|
304
298
|
},
|
|
305
|
-
value: value
|
|
299
|
+
value: value,
|
|
300
|
+
readOnly: readOnly
|
|
306
301
|
}), jsx("textarea", {
|
|
307
302
|
ref: shadowRef,
|
|
308
303
|
"aria-hidden": true,
|
|
@@ -315,14 +310,17 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
|
|
|
315
310
|
padding: 0
|
|
316
311
|
},
|
|
317
312
|
tabIndex: -1
|
|
318
|
-
}), isLoading && jsx(LoadingIndicator, {
|
|
313
|
+
}), !enableModernizedComponents && isLoading && jsx(LoadingIndicator, {
|
|
319
314
|
"aria-label": loadingAriaLabel,
|
|
320
315
|
className: styles.loadingIndicator,
|
|
321
|
-
"data-modern":
|
|
316
|
+
"data-modern": "false",
|
|
322
317
|
onClick: focusTextArea,
|
|
323
318
|
style: !state.overflow ? {
|
|
324
319
|
right: '0.75rem'
|
|
325
320
|
} : {}
|
|
321
|
+
}), enableModernizedComponents && endIconComponent && jsx("div", {
|
|
322
|
+
className: styles.endIconWrap,
|
|
323
|
+
children: endIconComponent
|
|
326
324
|
})]
|
|
327
325
|
});
|
|
328
326
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"textArea":"bp_text_area_autosize_module_textArea--
|
|
2
|
+
var styles = {"textArea":"bp_text_area_autosize_module_textArea--475fe","loading":"bp_text_area_autosize_module_loading--475fe","readOnly":"bp_text_area_autosize_module_readOnly--475fe","withEndIcon":"bp_text_area_autosize_module_withEndIcon--475fe","error":"bp_text_area_autosize_module_error--475fe","loadingIndicator":"bp_text_area_autosize_module_loadingIndicator--475fe","loadingIndicatorReset":"bp_text_area_autosize_module_loadingIndicatorReset--475fe","border":"bp_text_area_autosize_module_border--475fe","hasError":"bp_text_area_autosize_module_hasError--475fe","disabled":"bp_text_area_autosize_module_disabled--475fe","endIconWrap":"bp_text_area_autosize_module_endIconWrap--475fe","endIcon":"bp_text_area_autosize_module_endIcon--475fe"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { PencilCrossed } from '@box/blueprint-web-assets/icons/Fill';
|
|
2
|
+
import { PencilCrossed as PencilCrossed$1 } from '@box/blueprint-web-assets/icons/Fill';
|
|
3
|
+
import { PencilCrossed } from '@box/blueprint-web-assets/icons/Medium';
|
|
3
4
|
import clsx from 'clsx';
|
|
4
5
|
import { forwardRef, useRef, useCallback, useMemo, cloneElement } from 'react';
|
|
5
6
|
import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
|
|
6
7
|
import { BaseTextInput } from '../primitives/base-text-input/base-text-input.js';
|
|
7
8
|
import { useForkRef } from '../utils/useForkRef.js';
|
|
8
9
|
import styles from './text-input.module.js';
|
|
10
|
+
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
9
11
|
|
|
10
12
|
const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
11
13
|
const {
|
|
@@ -16,6 +18,9 @@ const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
16
18
|
loadingAriaLabel,
|
|
17
19
|
...rest
|
|
18
20
|
} = props;
|
|
21
|
+
const {
|
|
22
|
+
enableModernizedComponents
|
|
23
|
+
} = useBlueprintModernization();
|
|
19
24
|
const inputRef = useRef(null);
|
|
20
25
|
const focusInput = useCallback(() => {
|
|
21
26
|
inputRef.current?.focus();
|
|
@@ -37,13 +42,14 @@ const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
37
42
|
});
|
|
38
43
|
}
|
|
39
44
|
if (readOnly) {
|
|
40
|
-
|
|
45
|
+
const PencilCrossedIcon = enableModernizedComponents ? PencilCrossed : PencilCrossed$1;
|
|
46
|
+
return jsx(PencilCrossedIcon, {
|
|
41
47
|
onClick: focusInput,
|
|
42
48
|
role: "presentation"
|
|
43
49
|
});
|
|
44
50
|
}
|
|
45
51
|
return null;
|
|
46
|
-
}, [isLoading, endIcon, readOnly, loadingAriaLabel, focusInput]);
|
|
52
|
+
}, [isLoading, endIcon, readOnly, loadingAriaLabel, focusInput, enableModernizedComponents]);
|
|
47
53
|
const startIconLocal = useMemo(() => {
|
|
48
54
|
if (startIcon) {
|
|
49
55
|
return /*#__PURE__*/cloneElement(startIcon, {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/blueprint-web",
|
|
3
|
-
"version": "13.
|
|
3
|
+
"version": "13.9.0",
|
|
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.109.
|
|
50
|
+
"@box/blueprint-web-assets": "^4.109.4",
|
|
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.16.
|
|
80
|
+
"@box/storybook-utils": "^0.16.84",
|
|
81
81
|
"@figma/code-connect": "1.3.12",
|
|
82
82
|
"@types/react": "^18.0.0",
|
|
83
83
|
"@types/react-dom": "^18.0.0",
|