@box/blueprint-web 12.14.0 → 12.16.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/card/card.js +5 -0
- package/dist/lib-esm/card/card.module.js +1 -1
- package/dist/lib-esm/index.css +255 -112
- package/dist/lib-esm/primitives/base-text-input/base-text-input.js +5 -0
- package/dist/lib-esm/primitives/base-text-input/base-text-input.module.js +1 -1
- package/dist/lib-esm/text-area/text-area-autosize/text-area-autosize.js +7 -0
- package/dist/lib-esm/text-area/text-area-autosize/text-area-autosize.module.js +1 -1
- package/dist/lib-esm/text-area/text-area.js +6 -1
- package/dist/lib-esm/text-area/text-area.module.js +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
|
+
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
4
5
|
import styles from './card.module.js';
|
|
5
6
|
|
|
6
7
|
/**
|
|
@@ -13,10 +14,14 @@ const Card = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
13
14
|
elevation: elevationToken,
|
|
14
15
|
...rest
|
|
15
16
|
} = props;
|
|
17
|
+
const {
|
|
18
|
+
enableModernizedComponents
|
|
19
|
+
} = useBlueprintModernization();
|
|
16
20
|
return jsx("div", {
|
|
17
21
|
...rest,
|
|
18
22
|
ref: forwardedRef,
|
|
19
23
|
className: clsx(styles.card, elevationToken && styles[elevationToken], className),
|
|
24
|
+
"data-modern": enableModernizedComponents,
|
|
20
25
|
children: children
|
|
21
26
|
});
|
|
22
27
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"card":"bp_card_module_card--
|
|
2
|
+
var styles = {"card":"bp_card_module_card--c61ad","dropshadow-1":"bp_card_module_dropshadow-1--c61ad","dropshadow-3":"bp_card_module_dropshadow-3--c61ad"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
package/dist/lib-esm/index.css
CHANGED
|
@@ -1101,17 +1101,37 @@
|
|
|
1101
1101
|
.bp_button_wrapper_module_buttonWrapper--b0897{
|
|
1102
1102
|
all:unset;
|
|
1103
1103
|
}
|
|
1104
|
-
.bp_card_module_card--
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
padding:var(--space-
|
|
1104
|
+
.bp_card_module_card--c61ad[data-modern=true]{
|
|
1105
|
+
--bp-card-dropshadow-1:var(--dropshadow-1);
|
|
1106
|
+
--bp-card-dropshadow-3:var(--dropshadow-3);
|
|
1107
|
+
--card-radius:var(--bp-radius-10);
|
|
1108
|
+
--card-padding:var(--bp-space-060);
|
|
1109
|
+
--card-background:var(--bp-surface-card-surface);
|
|
1110
|
+
--card-border:var(--bp-border-01) solid var(--bp-border-card-border);
|
|
1111
|
+
--card-dropshadow-1:var(--bp-card-dropshadow-1);
|
|
1112
|
+
--card-dropshadow-3:var(--bp-card-dropshadow-3);
|
|
1109
1113
|
}
|
|
1110
|
-
|
|
1111
|
-
|
|
1114
|
+
|
|
1115
|
+
.bp_card_module_card--c61ad[data-modern=false]{
|
|
1116
|
+
--card-padding:var(--space-4);
|
|
1117
|
+
--card-background:var(--surface-card-surface);
|
|
1118
|
+
--card-border:var(--border-1) solid var(--border-card-border);
|
|
1119
|
+
--card-radius:var(--radius-4);
|
|
1120
|
+
--card-dropshadow-1:var(--dropshadow-1);
|
|
1121
|
+
--card-dropshadow-3:var(--dropshadow-3);
|
|
1112
1122
|
}
|
|
1113
|
-
|
|
1114
|
-
|
|
1123
|
+
|
|
1124
|
+
.bp_card_module_card--c61ad{
|
|
1125
|
+
background:var(--card-background);
|
|
1126
|
+
border:var(--card-border);
|
|
1127
|
+
border-radius:var(--card-radius);
|
|
1128
|
+
padding:var(--card-padding);
|
|
1129
|
+
}
|
|
1130
|
+
.bp_card_module_card--c61ad.bp_card_module_dropshadow-1--c61ad{
|
|
1131
|
+
box-shadow:var(--card-dropshadow-1);
|
|
1132
|
+
}
|
|
1133
|
+
.bp_card_module_card--c61ad.bp_card_module_dropshadow-3--c61ad{
|
|
1134
|
+
box-shadow:var(--card-dropshadow-3);
|
|
1115
1135
|
}
|
|
1116
1136
|
|
|
1117
1137
|
.bp_card_tooltip_module_content--efa88{
|
|
@@ -1747,76 +1767,145 @@
|
|
|
1747
1767
|
flex-grow:0;
|
|
1748
1768
|
flex-shrink:0;
|
|
1749
1769
|
}
|
|
1770
|
+
.bp_labelable_module_required--25dbc{
|
|
1771
|
+
align-items:center;
|
|
1772
|
+
display:inline-flex;
|
|
1773
|
+
gap:var(--space-1);
|
|
1774
|
+
}
|
|
1775
|
+
.bp_labelable_module_required--25dbc::before{
|
|
1776
|
+
color:var(--icon-icon-required-on-light);
|
|
1777
|
+
content:"*";
|
|
1778
|
+
font-family:monospace;
|
|
1779
|
+
transform:scale(1.2);
|
|
1780
|
+
}
|
|
1750
1781
|
|
|
1751
|
-
.bp_text_area_autosize_module_textArea--
|
|
1752
|
-
|
|
1782
|
+
.bp_text_area_autosize_module_textArea--4fa6a[data-modern=false]{
|
|
1783
|
+
--text-area-text-color:var(--text-text-on-light);
|
|
1784
|
+
--text-area-inner-shadow:var(--innershadow-1);
|
|
1785
|
+
--text-area-background-color:var(--surface-input-surface);
|
|
1786
|
+
--text-area-padding-inline:var(--space-3);
|
|
1787
|
+
--text-area-padding-block:0.625rem;
|
|
1788
|
+
--text-area-placeholder-color:var(--text-text-on-light-secondary);
|
|
1789
|
+
--text-area-error-background-color:var(--surface-input-surface-error);
|
|
1790
|
+
--text-area-error-background-focus:var(--surface-input-surface-focus);
|
|
1791
|
+
--text-area-error-background-hover:var(--surface-input-surface-hover);
|
|
1792
|
+
--text-area-icon-padding:1.875rem;
|
|
1793
|
+
}
|
|
1794
|
+
|
|
1795
|
+
.bp_text_area_autosize_module_textArea--4fa6a[data-modern=true]{
|
|
1796
|
+
--text-area-inner-shadow:var(--innershadow-1);
|
|
1797
|
+
--text-area-text-color:var(--bp-text-text-on-light);
|
|
1798
|
+
--text-area-background-color:var(--bp-surface-input-surface);
|
|
1799
|
+
--text-area-padding-inline:var(--bp-size-030);
|
|
1800
|
+
--text-area-padding-block:0.625rem;
|
|
1801
|
+
--text-area-placeholder-color:var(--bp-text-text-on-light-secondary);
|
|
1802
|
+
--text-area-error-background-color:var(--bp-surface-input-surface-error);
|
|
1803
|
+
--text-area-error-background-focus:var(--bp-surface-input-surface-focus);
|
|
1804
|
+
--text-area-error-background-hover:var(--bp-surface-input-surface-hover);
|
|
1805
|
+
--text-area-icon-padding:1.875rem;
|
|
1806
|
+
}
|
|
1807
|
+
|
|
1808
|
+
.bp_text_area_autosize_module_textArea--4fa6a{
|
|
1809
|
+
background:var(--text-area-background-color);
|
|
1753
1810
|
border:none;
|
|
1754
|
-
box-shadow:var(--
|
|
1755
|
-
color:var(--text-text-
|
|
1811
|
+
box-shadow:var(--text-area-inner-shadow);
|
|
1812
|
+
color:var(--text-area-text-color);
|
|
1756
1813
|
font-family:var(--body-default-font-family);
|
|
1757
1814
|
font-size:var(--body-default-font-size);
|
|
1758
1815
|
font-weight:var(--body-default-font-weight);
|
|
1759
1816
|
letter-spacing:var(--body-default-letter-spacing);
|
|
1760
1817
|
line-height:var(--body-default-line-height);
|
|
1761
1818
|
margin:0;
|
|
1762
|
-
padding-block
|
|
1763
|
-
padding-inline:var(--
|
|
1819
|
+
padding-block:var(--text-area-padding-block);
|
|
1820
|
+
padding-inline:var(--text-area-padding-inline);
|
|
1764
1821
|
resize:none;
|
|
1765
1822
|
-webkit-text-decoration:var(--body-default-text-decoration);
|
|
1766
1823
|
text-decoration:var(--body-default-text-decoration);
|
|
1767
1824
|
text-transform:var(--body-default-text-case);
|
|
1768
1825
|
width:100%;
|
|
1769
1826
|
}
|
|
1770
|
-
.bp_text_area_autosize_module_textArea--
|
|
1771
|
-
color:var(--text-
|
|
1827
|
+
.bp_text_area_autosize_module_textArea--4fa6a::placeholder{
|
|
1828
|
+
color:var(--text-area-placeholder-color);
|
|
1772
1829
|
opacity:1;
|
|
1773
1830
|
}
|
|
1774
|
-
.bp_text_area_autosize_module_textArea--
|
|
1775
|
-
background:var(--
|
|
1831
|
+
.bp_text_area_autosize_module_textArea--4fa6a.bp_text_area_autosize_module_error--4fa6a{
|
|
1832
|
+
background:var(--text-area-error-background-color);
|
|
1776
1833
|
outline:0;
|
|
1777
1834
|
}
|
|
1778
|
-
.bp_text_area_autosize_module_textArea--
|
|
1835
|
+
.bp_text_area_autosize_module_textArea--4fa6a:focus{
|
|
1779
1836
|
border:none;
|
|
1780
1837
|
}
|
|
1781
|
-
.bp_text_area_autosize_module_textArea--
|
|
1782
|
-
box-shadow:var(--
|
|
1838
|
+
.bp_text_area_autosize_module_textArea--4fa6a:hover{
|
|
1839
|
+
box-shadow:var(--text-area-inner-shadow);
|
|
1783
1840
|
}
|
|
1784
|
-
.bp_text_area_autosize_module_textArea--
|
|
1785
|
-
background:var(--
|
|
1841
|
+
.bp_text_area_autosize_module_textArea--4fa6a:focus-visible{
|
|
1842
|
+
background:var(--text-area-error-background-focus);
|
|
1786
1843
|
outline:0;
|
|
1787
1844
|
}
|
|
1788
|
-
.bp_text_area_autosize_module_textArea--
|
|
1789
|
-
background:var(--
|
|
1845
|
+
.bp_text_area_autosize_module_textArea--4fa6a:disabled{
|
|
1846
|
+
background:var(--text-area-background-color);
|
|
1790
1847
|
border:none;
|
|
1791
|
-
box-shadow:var(--
|
|
1792
|
-
color:var(--text-text-
|
|
1848
|
+
box-shadow:var(--text-area-inner-shadow);
|
|
1849
|
+
color:var(--text-area-text-color);
|
|
1793
1850
|
}
|
|
1794
|
-
.bp_text_area_autosize_module_textArea--
|
|
1795
|
-
background:var(--
|
|
1851
|
+
.bp_text_area_autosize_module_textArea--4fa6a:not(:disabled):not(:focus-visible):not(.bp_text_area_autosize_module_error--4fa6a):hover{
|
|
1852
|
+
background:var(--text-area-error-background-hover);
|
|
1796
1853
|
}
|
|
1797
|
-
.bp_text_area_autosize_module_textArea--
|
|
1798
|
-
padding-inline-end:
|
|
1854
|
+
.bp_text_area_autosize_module_textArea--4fa6a.bp_text_area_autosize_module_loading--4fa6a{
|
|
1855
|
+
padding-inline-end:var(--text-area-icon-padding);
|
|
1856
|
+
}
|
|
1857
|
+
|
|
1858
|
+
.bp_text_area_autosize_module_loadingIndicator--4fa6a[data-modern=false]{
|
|
1859
|
+
--text-area-loading-indicator-width:var(--size-6);
|
|
1860
|
+
--text-area-loading-indicator-height:var(--size-6);
|
|
1861
|
+
}
|
|
1862
|
+
|
|
1863
|
+
.bp_text_area_autosize_module_loadingIndicator--4fa6a[data-modern=true]{
|
|
1864
|
+
--text-area-loading-indicator-width:var(--bp-size-060);
|
|
1865
|
+
--text-area-loading-indicator-height:var(--bp-size-060);
|
|
1799
1866
|
}
|
|
1800
1867
|
|
|
1801
|
-
.bp_text_area_autosize_module_loadingIndicator--
|
|
1868
|
+
.bp_text_area_autosize_module_loadingIndicator--4fa6a{
|
|
1802
1869
|
bottom:.375rem;
|
|
1803
1870
|
display:inline-block;
|
|
1804
|
-
height:var(--
|
|
1871
|
+
height:var(--text-area-loading-indicator-height);
|
|
1805
1872
|
left:unset;
|
|
1806
1873
|
position:absolute;
|
|
1807
1874
|
right:0;
|
|
1808
|
-
width:var(--
|
|
1875
|
+
width:var(--text-area-loading-indicator-width);
|
|
1809
1876
|
}
|
|
1810
1877
|
|
|
1811
|
-
.bp_text_area_autosize_module_border--
|
|
1812
|
-
|
|
1813
|
-
|
|
1878
|
+
.bp_text_area_autosize_module_border--4fa6a[data-modern=false]{
|
|
1879
|
+
--text-area-radius:var(--radius-2);
|
|
1880
|
+
--text-area-border-width:var(--border-1);
|
|
1881
|
+
--text-area-shadow-color:var(--border-input-border);
|
|
1882
|
+
}
|
|
1883
|
+
|
|
1884
|
+
.bp_text_area_autosize_module_border--4fa6a[data-modern=true]{
|
|
1885
|
+
--text-area-radius:var(--bp-radius-06);
|
|
1886
|
+
--text-area-border-width:var(--bp-border-01);
|
|
1887
|
+
--text-area-shadow-color:var(--bp-border-input-border);
|
|
1888
|
+
}
|
|
1889
|
+
|
|
1890
|
+
.bp_text_area_autosize_module_border--4fa6a{
|
|
1891
|
+
border-radius:var(--text-area-radius);
|
|
1892
|
+
box-shadow:0 0 0 var(--text-area-border-width) var(--text-area-shadow-color);
|
|
1814
1893
|
display:flex;
|
|
1815
1894
|
overflow:hidden;
|
|
1816
1895
|
transform:translateZ(0);
|
|
1817
1896
|
}
|
|
1818
1897
|
|
|
1819
|
-
.bp_text_area_module_textAreaContainer--
|
|
1898
|
+
.bp_text_area_module_textAreaContainer--bf753[data-modern=false]{
|
|
1899
|
+
--text-area-container-row-gap:var(--space-2);
|
|
1900
|
+
--text-area-container-label-color:var(--text-text-on-light);
|
|
1901
|
+
}
|
|
1902
|
+
|
|
1903
|
+
.bp_text_area_module_textAreaContainer--bf753[data-modern=true]{
|
|
1904
|
+
--text-area-container-row-gap:var(--bp-size-020);
|
|
1905
|
+
--text-area-container-label-color:var(--bp-text-text-on-light);
|
|
1906
|
+
}
|
|
1907
|
+
|
|
1908
|
+
.bp_text_area_module_textAreaContainer--bf753{
|
|
1820
1909
|
display:flex;
|
|
1821
1910
|
flex-direction:column;
|
|
1822
1911
|
font-family:var(--body-default-font-family);
|
|
@@ -1829,8 +1918,8 @@
|
|
|
1829
1918
|
text-decoration:var(--body-default-text-decoration);
|
|
1830
1919
|
text-transform:var(--body-default-text-case);
|
|
1831
1920
|
}
|
|
1832
|
-
.bp_text_area_module_textAreaContainer--
|
|
1833
|
-
color:var(--text-
|
|
1921
|
+
.bp_text_area_module_textAreaContainer--bf753 .bp_text_area_module_label--bf753{
|
|
1922
|
+
color:var(--text-area-container-label-color);
|
|
1834
1923
|
flex:0 0 fit-content;
|
|
1835
1924
|
font-family:var(--body-default-bold-font-family);
|
|
1836
1925
|
font-size:var(--body-default-bold-font-size);
|
|
@@ -1843,25 +1932,14 @@
|
|
|
1843
1932
|
width:-moz-fit-content;
|
|
1844
1933
|
width:fit-content;
|
|
1845
1934
|
}
|
|
1846
|
-
.bp_text_area_module_textAreaContainer--
|
|
1847
|
-
margin-block-end:var(--
|
|
1935
|
+
.bp_text_area_module_textAreaContainer--bf753 .bp_text_area_module_label--bf753:not(.bp_text_area_module_hidden--bf753){
|
|
1936
|
+
margin-block-end:var(--text-area-container-row-gap);
|
|
1848
1937
|
}
|
|
1849
|
-
.bp_text_area_module_textAreaContainer--
|
|
1938
|
+
.bp_text_area_module_textAreaContainer--bf753.bp_text_area_module_disabled--bf753{
|
|
1850
1939
|
opacity:60%;
|
|
1851
1940
|
}
|
|
1852
|
-
.bp_text_area_module_textAreaContainer--
|
|
1853
|
-
margin-block-start:var(--
|
|
1854
|
-
}
|
|
1855
|
-
.bp_labelable_module_required--25dbc{
|
|
1856
|
-
align-items:center;
|
|
1857
|
-
display:inline-flex;
|
|
1858
|
-
gap:var(--space-1);
|
|
1859
|
-
}
|
|
1860
|
-
.bp_labelable_module_required--25dbc::before{
|
|
1861
|
-
color:var(--icon-icon-required-on-light);
|
|
1862
|
-
content:"*";
|
|
1863
|
-
font-family:monospace;
|
|
1864
|
-
transform:scale(1.2);
|
|
1941
|
+
.bp_text_area_module_textAreaContainer--bf753 .bp_text_area_module_inlineError--bf753{
|
|
1942
|
+
margin-block-start:var(--text-area-container-row-gap);
|
|
1865
1943
|
}
|
|
1866
1944
|
|
|
1867
1945
|
.bp_combobox_module_container--d598b{
|
|
@@ -4933,7 +5011,69 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
|
|
|
4933
5011
|
background:none;
|
|
4934
5012
|
}
|
|
4935
5013
|
|
|
4936
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5014
|
+
.bp_base_text_input_module_textInputContainerOuter--61258[data-modern=false]{
|
|
5015
|
+
--text-input-border-width:var(--border-1);
|
|
5016
|
+
--text-input-border-width-focused:var(--border-2);
|
|
5017
|
+
--text-input-border-width-error:var(--border-2);
|
|
5018
|
+
--text-input-padding-x:var(--space-3);
|
|
5019
|
+
--text-input-icon-padding:var(--space-2);
|
|
5020
|
+
--text-input-padding-x-focused:calc(var(--text-input-padding-x) - var(--text-input-border-width-focused) + var(--text-input-border-width));
|
|
5021
|
+
--text-input-padding-x-error:calc(var(--text-input-padding-x) - var(--text-input-border-width-error) + var(--text-input-border-width));
|
|
5022
|
+
--text-input-inline-error-subtext-block-margin:var(--space-2);
|
|
5023
|
+
--text-input-row-gap:var(--space-2);
|
|
5024
|
+
--text-input-label-color:var(--text-text-on-light);
|
|
5025
|
+
--text-input-color:var(--text-text-on-light);
|
|
5026
|
+
--text-input-background:var(--surface-input-surface);
|
|
5027
|
+
--text-input-border-color:var(--border-input-border);
|
|
5028
|
+
--text-input-border-radius:var(--radius-2);
|
|
5029
|
+
--text-input-box-shadow:var(--innershadow-1);
|
|
5030
|
+
--text-input-border-color-focus:var(--border-input-border-focus);
|
|
5031
|
+
--text-input-placeholder-color:var(--text-text-on-light-secondary);
|
|
5032
|
+
--text-input-error-background:var(--surface-input-surface-error);
|
|
5033
|
+
--text-input-error-border-color:var(--border-input-border-error);
|
|
5034
|
+
--text-input-read-only-color:var(--text-text-on-light-secondary);
|
|
5035
|
+
--text-input-read-only-border-color:var(--border-collapsible-border);
|
|
5036
|
+
--text-input-disabled-color:var(--text-text-on-light);
|
|
5037
|
+
--text-input-disabled-background:var(--surface-input-surface);
|
|
5038
|
+
--text-input-disabled-border-color:var(--border-input-border);
|
|
5039
|
+
--text-input-focused-background:var(--surface-input-surface-focus);
|
|
5040
|
+
--text-input-focused-border-color:var(--border-input-border-focus);
|
|
5041
|
+
--text-input-hover-background:var(--surface-input-surface-hover);
|
|
5042
|
+
--text-input-hover-border-color:var(--border-input-border-hover);
|
|
5043
|
+
}
|
|
5044
|
+
|
|
5045
|
+
.bp_base_text_input_module_textInputContainerOuter--61258[data-modern=true]{
|
|
5046
|
+
--text-input-border-width:var(--bp-border-01);
|
|
5047
|
+
--text-input-border-width-focused:var(--bp-border-02);
|
|
5048
|
+
--text-input-border-width-error:var(--bp-border-02);
|
|
5049
|
+
--text-input-padding-x:var(--bp-space-030);
|
|
5050
|
+
--text-input-icon-padding:var(--bp-space-020);
|
|
5051
|
+
--text-input-padding-x-focused:calc(var(--text-input-padding-x) - var(--text-input-border-width-focused) + var(--text-input-border-width));
|
|
5052
|
+
--text-input-padding-x-error:calc(var(--text-input-padding-x) - var(--text-input-border-width-error) + var(--text-input-border-width));
|
|
5053
|
+
--text-input-inline-error-subtext-block-margin:var(--bp-space-020);
|
|
5054
|
+
--text-input-row-gap:var(--bp-space-020);
|
|
5055
|
+
--text-input-label-color:var(--bp-text-text-on-light);
|
|
5056
|
+
--text-input-color:var(--bp-text-text-on-light);
|
|
5057
|
+
--text-input-background:var(--bp-surface-input-surface);
|
|
5058
|
+
--text-input-border-color:var(--bp-border-input-border);
|
|
5059
|
+
--text-input-border-radius:var(--bp-radius-06);
|
|
5060
|
+
--text-input-box-shadow:var(--innershadow-1);
|
|
5061
|
+
--text-input-border-color-focus:var(--bp-border-input-border-focus);
|
|
5062
|
+
--text-input-placeholder-color:var(--bp-text-text-on-light-secondary);
|
|
5063
|
+
--text-input-error-background:var(--bp-surface-input-surface-error);
|
|
5064
|
+
--text-input-error-border-color:var(--bp-border-input-border-error);
|
|
5065
|
+
--text-input-read-only-color:var(--bp-text-text-on-light-secondary);
|
|
5066
|
+
--text-input-read-only-border-color:var(--bp-border-collapsible-border);
|
|
5067
|
+
--text-input-disabled-color:var(--bp-text-text-on-light);
|
|
5068
|
+
--text-input-disabled-background:var(--bp-surface-input-surface);
|
|
5069
|
+
--text-input-disabled-border-color:var(--bp-border-input-border);
|
|
5070
|
+
--text-input-focused-background:var(--bp-surface-input-surface-focus);
|
|
5071
|
+
--text-input-focused-border-color:var(--bp-border-input-border-focus);
|
|
5072
|
+
--text-input-hover-background:var(--bp-surface-input-surface-hover);
|
|
5073
|
+
--text-input-hover-border-color:var(--bp-border-input-border-hover);
|
|
5074
|
+
}
|
|
5075
|
+
|
|
5076
|
+
.bp_base_text_input_module_textInputContainerOuter--61258{
|
|
4937
5077
|
--disabled-opacity:var(--text-input-disabled-opacity-api, 60%);
|
|
4938
5078
|
display:flex;
|
|
4939
5079
|
flex-direction:column;
|
|
@@ -4946,8 +5086,8 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
|
|
|
4946
5086
|
text-decoration:var(--body-default-text-decoration);
|
|
4947
5087
|
text-transform:var(--body-default-text-case);
|
|
4948
5088
|
}
|
|
4949
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4950
|
-
color:var(--text-
|
|
5089
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_label--61258{
|
|
5090
|
+
color:var(--text-input-label-color);
|
|
4951
5091
|
flex:0 0 fit-content;
|
|
4952
5092
|
font-family:var(--body-default-bold-font-family);
|
|
4953
5093
|
font-size:var(--body-default-bold-font-size);
|
|
@@ -4960,21 +5100,21 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
|
|
|
4960
5100
|
width:-moz-fit-content;
|
|
4961
5101
|
width:fit-content;
|
|
4962
5102
|
}
|
|
4963
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4964
|
-
margin-block-end:var(--
|
|
5103
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_label--61258:not(.bp_base_text_input_module_hidden--61258){
|
|
5104
|
+
margin-block-end:var(--text-input-row-gap);
|
|
4965
5105
|
}
|
|
4966
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5106
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258{
|
|
4967
5107
|
display:flex;
|
|
4968
5108
|
height:var(--size-10);
|
|
4969
5109
|
position:relative;
|
|
4970
5110
|
}
|
|
4971
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4972
|
-
background:var(--
|
|
4973
|
-
border:var(--border-
|
|
4974
|
-
border-radius:var(--radius
|
|
4975
|
-
box-shadow:var(--
|
|
5111
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258{
|
|
5112
|
+
background:var(--text-input-background);
|
|
5113
|
+
border:var(--text-input-border-width) solid var(--text-input-border-color);
|
|
5114
|
+
border-radius:var(--text-input-border-radius);
|
|
5115
|
+
box-shadow:var(--text-input-box-shadow);
|
|
4976
5116
|
box-sizing:border-box;
|
|
4977
|
-
color:var(--text-
|
|
5117
|
+
color:var(--text-input-color);
|
|
4978
5118
|
font-family:var(--body-default-font-family);
|
|
4979
5119
|
font-size:var(--body-default-font-size);
|
|
4980
5120
|
font-weight:var(--body-default-font-weight);
|
|
@@ -4982,81 +5122,84 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
|
|
|
4982
5122
|
letter-spacing:var(--body-default-letter-spacing);
|
|
4983
5123
|
line-height:var(--body-default-line-height);
|
|
4984
5124
|
padding-block:0;
|
|
4985
|
-
padding-inline:var(--
|
|
5125
|
+
padding-inline:var(--text-input-padding-x);
|
|
4986
5126
|
-webkit-text-decoration:var(--body-default-text-decoration);
|
|
4987
5127
|
text-decoration:var(--body-default-text-decoration);
|
|
4988
5128
|
text-transform:var(--body-default-text-case);
|
|
4989
5129
|
width:100%;
|
|
4990
5130
|
}
|
|
4991
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4992
|
-
box-shadow:var(--
|
|
5131
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258:hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258:hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258:hover{
|
|
5132
|
+
box-shadow:var(--text-input-box-shadow);
|
|
4993
5133
|
}
|
|
4994
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4995
|
-
color:var(--text-
|
|
5134
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258::placeholder,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258::placeholder,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258::placeholder{
|
|
5135
|
+
color:var(--text-input-placeholder-color);
|
|
4996
5136
|
opacity:1;
|
|
4997
5137
|
}
|
|
4998
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4999
|
-
background:var(--
|
|
5000
|
-
border:var(--border-
|
|
5138
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258.bp_base_text_input_module_error--61258,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_error--61258,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_error--61258{
|
|
5139
|
+
background:var(--text-input-error-background);
|
|
5140
|
+
border:var(--text-input-border-width-error) solid var(--text-input-error-border-color);
|
|
5001
5141
|
outline:0;
|
|
5002
|
-
padding-inline-start:
|
|
5142
|
+
padding-inline-start:var(--text-input-padding-x-error);
|
|
5003
5143
|
}
|
|
5004
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5005
|
-
border-color:var(--
|
|
5006
|
-
box-shadow:var(--
|
|
5007
|
-
color:var(--text-
|
|
5144
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258{
|
|
5145
|
+
border-color:var(--text-input-read-only-border-color);
|
|
5146
|
+
box-shadow:var(--text-input-box-shadow);
|
|
5147
|
+
color:var(--text-input-read-only-color);
|
|
5008
5148
|
}
|
|
5009
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5010
|
-
border:var(--border-
|
|
5149
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258:focus-visible,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258:focus-visible,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258:focus-visible{
|
|
5150
|
+
border:var(--text-input-border-width-focused) solid var(--text-input-border-color-focus);
|
|
5011
5151
|
}
|
|
5012
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5152
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258:hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258:hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258:hover{
|
|
5013
5153
|
cursor:default;
|
|
5014
5154
|
}
|
|
5015
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5016
|
-
background:var(--
|
|
5017
|
-
border-color:var(--
|
|
5018
|
-
box-shadow:var(--
|
|
5019
|
-
color:var(--text-
|
|
5155
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258:disabled,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258:disabled,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258:disabled{
|
|
5156
|
+
background:var(--text-input-disabled-background);
|
|
5157
|
+
border-color:var(--text-input-disabled-border-color);
|
|
5158
|
+
box-shadow:var(--text-input-box-shadow);
|
|
5159
|
+
color:var(--text-input-disabled-color);
|
|
5020
5160
|
}
|
|
5021
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5022
|
-
border-color:var(--
|
|
5161
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258:disabled:hover{
|
|
5162
|
+
border-color:var(--text-input-border-color);
|
|
5023
5163
|
}
|
|
5024
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5025
|
-
background:var(--
|
|
5026
|
-
border:var(--border-
|
|
5164
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258:focus-visible,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258:focus-visible,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258:focus-visible{
|
|
5165
|
+
background:var(--text-input-focused-background);
|
|
5166
|
+
border:var(--text-input-border-width-focused) solid var(--text-input-focused-border-color);
|
|
5027
5167
|
outline:0;
|
|
5028
|
-
padding-inline-start:
|
|
5168
|
+
padding-inline-start:var(--text-input-padding-x-focused);
|
|
5029
5169
|
}
|
|
5030
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5031
|
-
padding-inline-end:calc(var(--
|
|
5170
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258:has(+ .bp_base_text_input_module_endIcon--61258),.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258:has(+ .bp_base_text_input_module_endIcon--61258),.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258:has(+ .bp_base_text_input_module_endIcon--61258){
|
|
5171
|
+
padding-inline-end:calc(var(--text-input-padding-x) + var(--end-icon-width) + var(--text-input-icon-padding));
|
|
5032
5172
|
}
|
|
5033
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5034
|
-
background:var(--
|
|
5035
|
-
border:var(--border-1) solid var(--
|
|
5173
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--61258):hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--61258):hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--61258):hover{
|
|
5174
|
+
background:var(--text-input-hover-background);
|
|
5175
|
+
border:var(--border-1) solid var(--text-input-hover-border-color);
|
|
5036
5176
|
}
|
|
5037
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5038
|
-
left:calc(var(--
|
|
5177
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_startIcon--61258{
|
|
5178
|
+
left:calc(var(--text-input-padding-x) + var(--text-input-border-width));
|
|
5039
5179
|
position:absolute;
|
|
5040
5180
|
top:50%;
|
|
5041
5181
|
transform:translateY(-50%);
|
|
5042
5182
|
}
|
|
5043
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5044
|
-
padding-inline-start:calc(var(--
|
|
5183
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_startIcon--61258 + input.bp_base_text_input_module_textInput--61258{
|
|
5184
|
+
padding-inline-start:calc(var(--text-input-padding-x) + var(--text-input-icon-padding) + var(--start-icon-width));
|
|
5045
5185
|
}
|
|
5046
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5047
|
-
padding-inline-start:calc(var(--
|
|
5186
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_startIcon--61258 + input.bp_base_text_input_module_textInput--61258:focus-visible{
|
|
5187
|
+
padding-inline-start:calc(var(--text-input-padding-x-focused) + var(--text-input-icon-padding) + var(--start-icon-width));
|
|
5048
5188
|
}
|
|
5049
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5189
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_startIcon--61258 + input.bp_base_text_input_module_textInput--61258.bp_base_text_input_module_error--61258{
|
|
5190
|
+
padding-inline-start:calc(var(--text-input-padding-x-error) + var(--text-input-icon-padding) + var(--start-icon-width));
|
|
5191
|
+
}
|
|
5192
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_endIcon--61258{
|
|
5050
5193
|
position:absolute;
|
|
5051
|
-
right:calc(var(--
|
|
5194
|
+
right:calc(var(--text-input-padding-x) + var(--text-input-border-width));
|
|
5052
5195
|
top:50%;
|
|
5053
5196
|
transform:translateY(-50%);
|
|
5054
5197
|
}
|
|
5055
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5198
|
+
.bp_base_text_input_module_textInputContainerOuter--61258.bp_base_text_input_module_disabled--61258{
|
|
5056
5199
|
opacity:var(--disabled-opacity);
|
|
5057
5200
|
}
|
|
5058
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5059
|
-
margin-block-start:var(--
|
|
5201
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_inlineError--61258,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_subtext--61258{
|
|
5202
|
+
margin-block-start:var(--text-input-inline-error-subtext-block-margin);
|
|
5060
5203
|
}
|
|
5061
5204
|
.bp_chip_module_chip--96f83{
|
|
5062
5205
|
align-items:center;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { forwardRef, useState, useMemo, cloneElement } from 'react';
|
|
4
|
+
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
4
5
|
import { Text } from '../../text/text.js';
|
|
5
6
|
import { useLabelable } from '../../util-components/labelable/useLabelable.js';
|
|
6
7
|
import { useUniqueId } from '../../utils/useUniqueId.js';
|
|
@@ -63,11 +64,15 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
63
64
|
className: clsx(endIcon.props?.className, styles.endIcon)
|
|
64
65
|
}), [endIcon]);
|
|
65
66
|
const Label = useLabelable(label, inputId, required);
|
|
67
|
+
const {
|
|
68
|
+
enableModernizedComponents
|
|
69
|
+
} = useBlueprintModernization();
|
|
66
70
|
return jsxs("div", {
|
|
67
71
|
className: clsx(styles.textInputContainerOuter, {
|
|
68
72
|
[styles.disabled]: disabled,
|
|
69
73
|
[styles.error]: shouldMarkError
|
|
70
74
|
}, className),
|
|
75
|
+
"data-modern": enableModernizedComponents,
|
|
71
76
|
children: [jsx(Label, {
|
|
72
77
|
className: clsx([styles.label], {
|
|
73
78
|
[styles.hidden]: hideLabel
|
|
@@ -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--61258","label":"bp_base_text_input_module_label--61258","hidden":"bp_base_text_input_module_hidden--61258","textInputContainer":"bp_base_text_input_module_textInputContainer--61258","textInput":"bp_base_text_input_module_textInput--61258","error":"bp_base_text_input_module_error--61258","readOnly":"bp_base_text_input_module_readOnly--61258","endIcon":"bp_base_text_input_module_endIcon--61258","startIcon":"bp_base_text_input_module_startIcon--61258","disabled":"bp_base_text_input_module_disabled--61258","inlineError":"bp_base_text_input_module_inlineError--61258","subtext":"bp_base_text_input_module_subtext--61258"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -3,6 +3,7 @@ import { BorderInputBorderHover, Border1, BorderInputBorderFocus, Border2, Borde
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
|
|
5
5
|
import { flushSync } from 'react-dom';
|
|
6
|
+
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
6
7
|
import { LoadingIndicator } from '../../loading-indicator/loading-indicator.js';
|
|
7
8
|
import { debounce } from '../../utils/debounce.js';
|
|
8
9
|
import { ownerWindow } from '../../utils/ownerWindow.js';
|
|
@@ -62,6 +63,9 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
|
|
|
62
63
|
onBlur,
|
|
63
64
|
...rest
|
|
64
65
|
} = props;
|
|
66
|
+
const {
|
|
67
|
+
enableModernizedComponents
|
|
68
|
+
} = useBlueprintModernization();
|
|
65
69
|
const {
|
|
66
70
|
current: isControlled
|
|
67
71
|
} = useRef(value != null);
|
|
@@ -274,6 +278,7 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
|
|
|
274
278
|
const shouldCompensateScrollbar = !state.overflow && !isScrollbarVisible && (hasError || isLoading);
|
|
275
279
|
return jsxs("div", {
|
|
276
280
|
className: styles.border,
|
|
281
|
+
"data-modern": enableModernizedComponents,
|
|
277
282
|
onMouseEnter: handleHover,
|
|
278
283
|
onMouseLeave: handleOnMouseOut,
|
|
279
284
|
style: borderInlineStyle,
|
|
@@ -281,6 +286,7 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
|
|
|
281
286
|
...rest,
|
|
282
287
|
ref: handleRef,
|
|
283
288
|
className: classNames,
|
|
289
|
+
"data-modern": enableModernizedComponents,
|
|
284
290
|
onBlur: handleBlur,
|
|
285
291
|
onChange: handleChange,
|
|
286
292
|
onFocus: handleFocus,
|
|
@@ -311,6 +317,7 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
|
|
|
311
317
|
}), isLoading && jsx(LoadingIndicator, {
|
|
312
318
|
"aria-label": loadingAriaLabel,
|
|
313
319
|
className: styles.loadingIndicator,
|
|
320
|
+
"data-modern": enableModernizedComponents,
|
|
314
321
|
onClick: focusTextArea,
|
|
315
322
|
style: !state.overflow ? {
|
|
316
323
|
right: '0.75rem'
|
|
@@ -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--4fa6a","error":"bp_text_area_autosize_module_error--4fa6a","loading":"bp_text_area_autosize_module_loading--4fa6a","loadingIndicator":"bp_text_area_autosize_module_loadingIndicator--4fa6a","border":"bp_text_area_autosize_module_border--4fa6a"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
|
+
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
4
5
|
import { InlineError } from '../primitives/inline-error/inline-error.js';
|
|
6
|
+
import { useLabelable } from '../util-components/labelable/useLabelable.js';
|
|
5
7
|
import { useUniqueId } from '../utils/useUniqueId.js';
|
|
6
8
|
import { TextAreaAutosize } from './text-area-autosize/text-area-autosize.js';
|
|
7
9
|
import styles from './text-area.module.js';
|
|
8
|
-
import { useLabelable } from '../util-components/labelable/useLabelable.js';
|
|
9
10
|
|
|
10
11
|
const TextArea = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
11
12
|
const {
|
|
@@ -20,6 +21,9 @@ const TextArea = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
20
21
|
maxRows,
|
|
21
22
|
...rest
|
|
22
23
|
} = props;
|
|
24
|
+
const {
|
|
25
|
+
enableModernizedComponents
|
|
26
|
+
} = useBlueprintModernization();
|
|
23
27
|
const textAreaId = useUniqueId('text-area-');
|
|
24
28
|
const inlineErrorId = useUniqueId('inline-error-');
|
|
25
29
|
const hasError = !!error && !disabled;
|
|
@@ -32,6 +36,7 @@ const TextArea = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
32
36
|
[styles.disabled]: disabled,
|
|
33
37
|
[styles.error]: hasError
|
|
34
38
|
}, className),
|
|
39
|
+
"data-modern": enableModernizedComponents,
|
|
35
40
|
children: [jsx(Label, {
|
|
36
41
|
className: clsx([styles.label], {
|
|
37
42
|
[styles.hidden]: hideLabel
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"textAreaContainer":"bp_text_area_module_textAreaContainer--
|
|
2
|
+
var styles = {"textAreaContainer":"bp_text_area_module_textAreaContainer--bf753","label":"bp_text_area_module_label--bf753","hidden":"bp_text_area_module_hidden--bf753","disabled":"bp_text_area_module_disabled--bf753","inlineError":"bp_text_area_module_inlineError--bf753"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|