@fluentui/react-textarea 9.6.1 → 9.6.3
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/CHANGELOG.md +27 -2
- package/lib/components/Textarea/useTextareaStyles.styles.js +1 -3
- package/lib/components/Textarea/useTextareaStyles.styles.js.map +1 -1
- package/lib/components/Textarea/useTextareaStyles.styles.raw.js +0 -4
- package/lib/components/Textarea/useTextareaStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Textarea/useTextareaStyles.styles.js +0 -4
- package/lib-commonjs/components/Textarea/useTextareaStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Textarea/useTextareaStyles.styles.raw.js +0 -4
- package/lib-commonjs/components/Textarea/useTextareaStyles.styles.raw.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,37 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-textarea
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 07 Aug 2025 09:59:09 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.6.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.6.3)
|
|
8
|
+
|
|
9
|
+
Thu, 07 Aug 2025 09:59:09 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.6.2..@fluentui/react-textarea_v9.6.3)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: remove custom selection styles ([PR #34897](https://github.com/microsoft/fluentui/pull/34897) by vgenaev@gmail.com)
|
|
15
|
+
- Bump @fluentui/react-field to v9.4.3 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
16
|
+
- Bump @fluentui/react-utilities to v9.23.2 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
17
|
+
- Bump @fluentui/react-jsx-runtime to v9.1.5 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
18
|
+
|
|
19
|
+
## [9.6.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.6.2)
|
|
20
|
+
|
|
21
|
+
Wed, 30 Jul 2025 13:10:57 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.6.1..@fluentui/react-textarea_v9.6.2)
|
|
23
|
+
|
|
24
|
+
### Patches
|
|
25
|
+
|
|
26
|
+
- Bump @fluentui/react-field to v9.4.2 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
|
|
27
|
+
- Bump @fluentui/react-shared-contexts to v9.24.1 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
|
|
28
|
+
- Bump @fluentui/react-theme to v9.2.0 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
|
|
29
|
+
- Bump @fluentui/react-utilities to v9.23.1 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
|
|
30
|
+
- Bump @fluentui/react-jsx-runtime to v9.1.4 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
|
|
31
|
+
|
|
7
32
|
## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.6.1)
|
|
8
33
|
|
|
9
|
-
Mon, 28 Jul 2025 18:
|
|
34
|
+
Mon, 28 Jul 2025 18:48:21 GMT
|
|
10
35
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.6.0..@fluentui/react-textarea_v9.6.1)
|
|
11
36
|
|
|
12
37
|
### Patches
|
|
@@ -302,8 +302,6 @@ const useTextareaStyles = /*#__PURE__*/__styles({
|
|
|
302
302
|
Bqenvij: "f1l02sjl",
|
|
303
303
|
yvdlaj: "fwyc1cq",
|
|
304
304
|
B3o7kgh: "f13ta7ih",
|
|
305
|
-
B4brmom: "f1vw9udw",
|
|
306
|
-
Brrnbx2: "fbb3kq8",
|
|
307
305
|
oeaueh: "f1s6fcnf"
|
|
308
306
|
},
|
|
309
307
|
disabled: {
|
|
@@ -353,7 +351,7 @@ const useTextareaStyles = /*#__PURE__*/__styles({
|
|
|
353
351
|
}, {
|
|
354
352
|
d: [".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", [".f1s184ao{margin:0;}", {
|
|
355
353
|
p: -1
|
|
356
|
-
}], ".f3rmtva{background-color:transparent;}", ".f1ewtqcl{box-sizing:border-box;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fqerorx{flex-grow:1;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1l02sjl{height:100%;}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".
|
|
354
|
+
}], ".f3rmtva{background-color:transparent;}", ".f1ewtqcl{box-sizing:border-box;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fqerorx{flex-grow:1;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1l02sjl{height:100%;}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".f1s6fcnf{outline-style:none;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".f1w5jphr{min-height:40px;}", [".f1pnffij{padding:var(--spacingVerticalXS) calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", {
|
|
357
355
|
p: -1
|
|
358
356
|
}], ".f192z54u{max-height:200px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fvmd9f{min-height:52px;}", [".f1ww82xo{padding:var(--spacingVerticalSNudge) calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", {
|
|
359
357
|
p: -1
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","mc9l5x","B7ck84d","qhf8xq","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","ha4doy","disabled","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","interactive","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","Bbr2w1p","Bduesf4","Bpq79vn","filled","q7v0qe","kmh5ft","nagaa4","B1yhkcb","E5pizo","outline","outlineInteractive","kzujx5","oetu4i","gvrnp0","xv9156","jek2p4","gg5e9n","Beu9t3s","dt87k2","Bt1vbvt","Bwzppfd","Bop6t4b","B2zwrfe","Bwp2tzp","Bgoe8wy","Bf40cpq","ckks6v","Baalond","v2iqwr","wmxk5l","Bj33j0h","Bs0cc2w","qwjtx1","B50zh58","f7epvg","e1hlit","B7mkhst","ak43y8","Bbcopvn","Bvecx4l","lwioe0","B6oc9vd","e2sjt0","uqwnxt","asj8p9","Br8fjdy","zoxjo1","Bt3ojkv","B7pmvfx","Bfht2n1","an54nd","t1ykpo","Belqbek","bbt1vd","Brahy3i","r7b1zc","rexu52","ovtnii","Bvq3b66","Bawrxx6","Bbs6y8j","B2qpgjt","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","d","p","m","w","h","a","useTextareaStyles","sj55zd","Bh6795r","Bahqtrf","Bqenvij","yvdlaj","B3o7kgh","B4brmom","Brrnbx2","oeaueh","Bceei9c","small","sshi5w","Bxyxcbc","Be2twd7","Bhrd7zp","Bg96gwp","medium","large","useTextareaResizeStyles","none","B3rzk8w","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","resize","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"sources":["useTextareaStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const textareaClassNames = {\n root: 'fui-Textarea',\n textarea: 'fui-Textarea__textarea'\n};\n/**\n * Styles for the root(wrapper) slot\n */ const useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n position: 'relative',\n // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n padding: `0 0 ${tokens.strokeWidthThick} 0`,\n margin: '0',\n borderRadius: tokens.borderRadiusMedium,\n verticalAlign: 'top'\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n },\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n },\n ':focus-within': {\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n outlineColor: 'transparent'\n }\n },\n filled: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ':hover,:focus-within': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1\n },\n 'filled-darker-shadow': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2\n },\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n ':hover': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n },\n ':active': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n ':focus-within': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorCompoundBrandStroke\n }\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n }\n});\n/**\n * Styles for the textarea slot\n */ const useTextareaStyles = makeStyles({\n base: {\n ...shorthands.borderStyle('none'),\n margin: '0',\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n flexGrow: 1,\n fontFamily: tokens.fontFamilyBase,\n height: '100%',\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1\n },\n '::selection': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorNeutralBackgroundInverted\n },\n outlineStyle: 'none'\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n // affected by changing the padding of the root.\n small: {\n minHeight: '40px',\n padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '200px',\n ...typographyStyles.caption1\n },\n medium: {\n minHeight: '52px',\n padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '260px',\n ...typographyStyles.body1\n },\n large: {\n minHeight: '64px',\n padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '320px',\n ...typographyStyles.body2\n }\n});\n/**\n * Styles for the textarea's resize property\n */ const useTextareaResizeStyles = makeStyles({\n none: {\n resize: 'none'\n },\n both: {\n resize: 'both'\n },\n horizontal: {\n resize: 'horizontal'\n },\n vertical: {\n resize: 'vertical'\n }\n});\n/**\n * Apply styling to the Textarea slots based on the state\n */ export const useTextareaStyles_unstable = (state)=>{\n 'use no memo';\n const { size, appearance, resize } = state;\n const disabled = state.textarea.disabled;\n const invalid = `${state.textarea['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(textareaClassNames.root, rootStyles.base, disabled && rootStyles.disabled, !disabled && filled && rootStyles.filled, !disabled && rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && invalid && rootStyles.invalid, state.root.className);\n const textareaStyles = useTextareaStyles();\n const textareaResizeStyles = useTextareaResizeStyles();\n state.textarea.className = mergeClasses(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","mc9l5x","B7ck84d","qhf8xq","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","ha4doy","disabled","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","interactive","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","Bbr2w1p","Bduesf4","Bpq79vn","filled","q7v0qe","kmh5ft","nagaa4","B1yhkcb","E5pizo","outline","outlineInteractive","kzujx5","oetu4i","gvrnp0","xv9156","jek2p4","gg5e9n","Beu9t3s","dt87k2","Bt1vbvt","Bwzppfd","Bop6t4b","B2zwrfe","Bwp2tzp","Bgoe8wy","Bf40cpq","ckks6v","Baalond","v2iqwr","wmxk5l","Bj33j0h","Bs0cc2w","qwjtx1","B50zh58","f7epvg","e1hlit","B7mkhst","ak43y8","Bbcopvn","Bvecx4l","lwioe0","B6oc9vd","e2sjt0","uqwnxt","asj8p9","Br8fjdy","zoxjo1","Bt3ojkv","B7pmvfx","Bfht2n1","an54nd","t1ykpo","Belqbek","bbt1vd","Brahy3i","r7b1zc","rexu52","ovtnii","Bvq3b66","Bawrxx6","Bbs6y8j","B2qpgjt","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","d","p","m","w","h","a","useTextareaStyles","sj55zd","Bh6795r","Bahqtrf","Bqenvij","yvdlaj","B3o7kgh","oeaueh","Bceei9c","small","sshi5w","Bxyxcbc","Be2twd7","Bhrd7zp","Bg96gwp","medium","large","useTextareaResizeStyles","none","B3rzk8w","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","resize","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"sources":["useTextareaStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const textareaClassNames = {\n root: 'fui-Textarea',\n textarea: 'fui-Textarea__textarea'\n};\n/**\n * Styles for the root(wrapper) slot\n */ const useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n position: 'relative',\n // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n padding: `0 0 ${tokens.strokeWidthThick} 0`,\n margin: '0',\n borderRadius: tokens.borderRadiusMedium,\n verticalAlign: 'top'\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n },\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n },\n ':focus-within': {\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n outlineColor: 'transparent'\n }\n },\n filled: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ':hover,:focus-within': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1\n },\n 'filled-darker-shadow': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2\n },\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n ':hover': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n },\n ':active': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n ':focus-within': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorCompoundBrandStroke\n }\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n }\n});\n/**\n * Styles for the textarea slot\n */ const useTextareaStyles = makeStyles({\n base: {\n ...shorthands.borderStyle('none'),\n margin: '0',\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n flexGrow: 1,\n fontFamily: tokens.fontFamilyBase,\n height: '100%',\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1\n },\n outlineStyle: 'none'\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n // affected by changing the padding of the root.\n small: {\n minHeight: '40px',\n padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '200px',\n ...typographyStyles.caption1\n },\n medium: {\n minHeight: '52px',\n padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '260px',\n ...typographyStyles.body1\n },\n large: {\n minHeight: '64px',\n padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '320px',\n ...typographyStyles.body2\n }\n});\n/**\n * Styles for the textarea's resize property\n */ const useTextareaResizeStyles = makeStyles({\n none: {\n resize: 'none'\n },\n both: {\n resize: 'both'\n },\n horizontal: {\n resize: 'horizontal'\n },\n vertical: {\n resize: 'vertical'\n }\n});\n/**\n * Apply styling to the Textarea slots based on the state\n */ export const useTextareaStyles_unstable = (state)=>{\n 'use no memo';\n const { size, appearance, resize } = state;\n const disabled = state.textarea.disabled;\n const invalid = `${state.textarea['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(textareaClassNames.root, rootStyles.base, disabled && rootStyles.disabled, !disabled && filled && rootStyles.filled, !disabled && rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && invalid && rootStyles.invalid, state.root.className);\n const textareaStyles = useTextareaStyles();\n const textareaResizeStyles = useTextareaResizeStyles();\n state.textarea.className = mergeClasses(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -141,10 +141,6 @@ export const textareaClassNames = {
|
|
|
141
141
|
color: tokens.colorNeutralForeground4,
|
|
142
142
|
opacity: 1
|
|
143
143
|
},
|
|
144
|
-
'::selection': {
|
|
145
|
-
color: tokens.colorNeutralForegroundInverted,
|
|
146
|
-
backgroundColor: tokens.colorNeutralBackgroundInverted
|
|
147
|
-
},
|
|
148
144
|
outlineStyle: 'none'
|
|
149
145
|
},
|
|
150
146
|
disabled: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Textarea/useTextareaStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n root: 'fui-Textarea',\n textarea: 'fui-Textarea__textarea',\n};\n\n/**\n * Styles for the root(wrapper) slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n position: 'relative',\n // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n padding: `0 0 ${tokens.strokeWidthThick} 0`,\n margin: '0',\n borderRadius: tokens.borderRadiusMedium,\n verticalAlign: 'top',\n },\n\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n\n filled: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ':hover,:focus-within': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker-shadow': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2,\n },\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2,\n },\n\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n ':hover': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n\n ':active': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n\n ':focus-within': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorCompoundBrandStroke,\n },\n },\n\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n});\n\n/**\n * Styles for the textarea slot\n */\nconst useTextareaStyles = makeStyles({\n base: {\n ...shorthands.borderStyle('none'),\n margin: '0',\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n flexGrow: 1,\n fontFamily: tokens.fontFamilyBase,\n height: '100%',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1,\n },\n\n '::selection': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorNeutralBackgroundInverted,\n },\n\n outlineStyle: 'none', // disable default browser outline\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n // affected by changing the padding of the root.\n small: {\n minHeight: '40px',\n padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '200px',\n ...typographyStyles.caption1,\n },\n medium: {\n minHeight: '52px',\n padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '260px',\n ...typographyStyles.body1,\n },\n large: {\n minHeight: '64px',\n padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '320px',\n ...typographyStyles.body2,\n },\n});\n\n/**\n * Styles for the textarea's resize property\n */\nconst useTextareaResizeStyles = makeStyles({\n none: {\n resize: 'none',\n },\n both: {\n resize: 'both',\n },\n horizontal: {\n resize: 'horizontal',\n },\n vertical: {\n resize: 'vertical',\n },\n});\n\n/**\n * Apply styling to the Textarea slots based on the state\n */\nexport const useTextareaStyles_unstable = (state: TextareaState): TextareaState => {\n 'use no memo';\n\n const { size, appearance, resize } = state;\n const disabled = state.textarea.disabled;\n const invalid = `${state.textarea['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n textareaClassNames.root,\n rootStyles.base,\n disabled && rootStyles.disabled,\n !disabled && filled && rootStyles.filled,\n !disabled && rootStyles[appearance],\n !disabled && rootStyles.interactive,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && invalid && rootStyles.invalid,\n state.root.className,\n );\n\n const textareaStyles = useTextareaStyles();\n const textareaResizeStyles = useTextareaResizeStyles();\n state.textarea.className = mergeClasses(\n textareaClassNames.textarea,\n textareaStyles.base,\n textareaStyles[size],\n textareaResizeStyles[resize],\n disabled && textareaStyles.disabled,\n state.textarea.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","display","boxSizing","position","padding","strokeWidthThick","margin","borderRadius","borderRadiusMedium","verticalAlign","disabled","backgroundColor","colorTransparentBackground","border","strokeWidthThin","colorNeutralStrokeDisabled","borderColor","interactive","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","outlineWidth","outlineStyle","outlineColor","filled","colorTransparentStroke","colorTransparentStrokeInteractive","colorNeutralBackground3","colorNeutralBackground1","boxShadow","shadow2","outline","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","invalid","colorPaletteRedBorder2","useTextareaStyles","borderStyle","color","colorNeutralForeground1","flexGrow","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","colorNeutralForegroundInverted","colorNeutralBackgroundInverted","colorNeutralForegroundDisabled","cursor","small","minHeight","spacingVerticalXS","spacingHorizontalSNudge","spacingHorizontalXXS","maxHeight","caption1","medium","spacingVerticalSNudge","spacingHorizontalMNudge","body1","large","spacingVerticalS","spacingHorizontalM","body2","useTextareaResizeStyles","none","resize","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAIjE,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAgBR,WAAW;IAC/BS,MAAM;QACJC,SAAS;QACTC,WAAW;QACXC,UAAU;QACV,oHAAoH;QACpHC,SAAS,CAAC,IAAI,EAAEV,OAAOW,gBAAgB,CAAC,EAAE,CAAC;QAC3CC,QAAQ;QACRC,cAAcb,OAAOc,kBAAkB;QACvCC,eAAe;IACjB;IAEAC,UAAU;QACRC,iBAAiBjB,OAAOkB,0BAA0B;QAClDC,QAAQ,GAAGnB,OAAOoB,eAAe,CAAC,OAAO,EAAEpB,OAAOqB,0BAA0B,EAAE;QAE9E,kCAAkC;YAChC,GAAGtB,WAAWuB,WAAW,CAAC,WAAW;QACvC;IACF;IAEAC,aAAa;QACX,2CAA2C;QAC3C,+FAA+F;QAC/F,WAAW;YACTf,WAAW;YACXgB,SAAS;YACTf,UAAU;YACVgB,MAAM;YACNC,QAAQ;YACRC,OAAO;YAEP,yCAAyC;YACzC,sFAAsF;YACtF,gFAAgF;YAChF,qGAAqG;YACrGC,QAAQ,CAAC,IAAI,EAAE5B,OAAOW,gBAAgB,CAAC,EAAE,EAAEX,OAAOc,kBAAkB,CAAC,CAAC,CAAC;YACvEe,wBAAwB7B,OAAOc,kBAAkB;YACjDgB,yBAAyB9B,OAAOc,kBAAkB;YAElD,mBAAmB;YACnB,8FAA8F;YAC9F,2FAA2F;YAC3F,4EAA4E;YAC5EiB,cAAc,GAAG/B,OAAOW,gBAAgB,CAAC,OAAO,EAAEX,OAAOgC,wBAAwB,EAAE;YACnFC,UAAU,CAAC,kBAAkB,EAAEjC,OAAOW,gBAAgB,CAAC,QAAQ,CAAC;YAEhE,0BAA0B;YAC1BuB,WAAW;YACXC,oBAAoB;YACpBC,oBAAoBpC,OAAOqC,iBAAiB;YAC5CC,iBAAiBtC,OAAOuC,kBAAkB;YAE1C,sDAAsD;gBACpDH,oBAAoB;gBACpBE,iBAAiB;YACnB;QACF;QACA,wBAAwB;YACtB,yBAAyB;YACzBJ,WAAW;YACXC,oBAAoB;YACpBC,oBAAoBpC,OAAOwC,cAAc;YACzCF,iBAAiBtC,OAAOyC,kBAAkB;YAE1C,sDAAsD;gBACpDL,oBAAoB;gBACpBE,iBAAiB;YACnB;QACF;QACA,+BAA+B;YAC7B,wEAAwE;YACxEI,mBAAmB1C,OAAO2C,+BAA+B;QAC3D;QACA,iBAAiB;YACfC,cAAc5C,OAAOW,gBAAgB;YACrCkC,cAAc;YACdC,cAAc;QAChB;IACF;IAEAC,QAAQ;QACN5B,QAAQ,GAAGnB,OAAOoB,eAAe,CAAC,OAAO,EAAEpB,OAAOgD,sBAAsB,EAAE;QAC1E,wBAAwB;YACtB,GAAGjD,WAAWuB,WAAW,CAACtB,OAAOiD,iCAAiC,CAAC;QACrE;IACF;IACA,iBAAiB;QACfhC,iBAAiBjB,OAAOkD,uBAAuB;IACjD;IACA,kBAAkB;QAChBjC,iBAAiBjB,OAAOmD,uBAAuB;IACjD;IACA,wBAAwB;QACtBlC,iBAAiBjB,OAAOkD,uBAAuB;QAC/C/B,QAAQ,GAAGnB,OAAOoB,eAAe,CAAC,OAAO,EAAEpB,OAAOiD,iCAAiC,EAAE;QACrFG,WAAWpD,OAAOqD,OAAO;IAC3B;IACA,yBAAyB;QACvBpC,iBAAiBjB,OAAOmD,uBAAuB;QAC/ChC,QAAQ,GAAGnB,OAAOoB,eAAe,CAAC,OAAO,EAAEpB,OAAOiD,iCAAiC,EAAE;QACrFG,WAAWpD,OAAOqD,OAAO;IAC3B;IAEAC,SAAS;QACPrC,iBAAiBjB,OAAOmD,uBAAuB;QAC/ChC,QAAQ,GAAGnB,OAAOoB,eAAe,CAAC,OAAO,EAAEpB,OAAOuD,mBAAmB,EAAE;QACvEb,mBAAmB1C,OAAOwD,4BAA4B;IACxD;IACAC,oBAAoB;QAClB,UAAU;YACRtC,QAAQ,GAAGnB,OAAOoB,eAAe,CAAC,OAAO,EAAEpB,OAAO0D,wBAAwB,EAAE;YAC5EhB,mBAAmB1C,OAAO2D,iCAAiC;QAC7D;QAEA,WAAW;YACTxC,QAAQ,GAAGnB,OAAOoB,eAAe,CAAC,OAAO,EAAEpB,OAAO4D,0BAA0B,EAAE;YAC9ElB,mBAAmB1C,OAAO6D,mCAAmC;QAC/D;QAEA,iBAAiB;YACf1C,QAAQ,GAAGnB,OAAOoB,eAAe,CAAC,OAAO,EAAEpB,OAAO4D,0BAA0B,EAAE;YAC9ElB,mBAAmB1C,OAAOgC,wBAAwB;QACpD;IACF;IAEA8B,SAAS;QACP,iDAAiD;YAC/C,GAAG/D,WAAWuB,WAAW,CAACtB,OAAO+D,sBAAsB,CAAC;QAC1D;IACF;AACF;AAEA;;CAEC,GACD,MAAMC,oBAAoBnE,WAAW;IACnCS,MAAM;QACJ,GAAGP,WAAWkE,WAAW,CAAC,OAAO;QACjCrD,QAAQ;QACRK,iBAAiB;QACjBT,WAAW;QACX0D,OAAOlE,OAAOmE,uBAAuB;QACrCC,UAAU;QACVC,YAAYrE,OAAOsE,cAAc;QACjC1C,QAAQ;QAER,iBAAiB;YACfsC,OAAOlE,OAAOuE,uBAAuB;YACrCC,SAAS;QACX;QAEA,eAAe;YACbN,OAAOlE,OAAOyE,8BAA8B;YAC5CxD,iBAAiBjB,OAAO0E,8BAA8B;QACxD;QAEA7B,cAAc;IAChB;IAEA7B,UAAU;QACRkD,OAAOlE,OAAO2E,8BAA8B;QAC5CC,QAAQ;QACR,iBAAiB;YACfV,OAAOlE,OAAO2E,8BAA8B;QAC9C;IACF;IAEA,gHAAgH;IAChH,gDAAgD;IAChDE,OAAO;QACLC,WAAW;QACXpE,SAAS,GAAGV,OAAO+E,iBAAiB,CAAC,MAAM,EAAE/E,OAAOgF,uBAAuB,CAAC,GAAG,EAAEhF,OAAOiF,oBAAoB,CAAC,CAAC,CAAC;QAC/GC,WAAW;QACX,GAAGjF,iBAAiBkF,QAAQ;IAC9B;IACAC,QAAQ;QACNN,WAAW;QACXpE,SAAS,GAAGV,OAAOqF,qBAAqB,CAAC,MAAM,EAAErF,OAAOsF,uBAAuB,CAAC,GAAG,EAAEtF,OAAOiF,oBAAoB,CAAC,CAAC,CAAC;QACnHC,WAAW;QACX,GAAGjF,iBAAiBsF,KAAK;IAC3B;IACAC,OAAO;QACLV,WAAW;QACXpE,SAAS,GAAGV,OAAOyF,gBAAgB,CAAC,MAAM,EAAEzF,OAAO0F,kBAAkB,CAAC,GAAG,EAAE1F,OAAOiF,oBAAoB,CAAC,CAAC,CAAC;QACzGC,WAAW;QACX,GAAGjF,iBAAiB0F,KAAK;IAC3B;AACF;AAEA;;CAEC,GACD,MAAMC,0BAA0B/F,WAAW;IACzCgG,MAAM;QACJC,QAAQ;IACV;IACAC,MAAM;QACJD,QAAQ;IACV;IACAE,YAAY;QACVF,QAAQ;IACV;IACAG,UAAU;QACRH,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAMI,6BAA6B,CAACC;IACzC;IAEA,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAEP,MAAM,EAAE,GAAGK;IACrC,MAAMnF,WAAWmF,MAAM/F,QAAQ,CAACY,QAAQ;IACxC,MAAM8C,UAAU,GAAGqC,MAAM/F,QAAQ,CAAC,eAAe,EAAE,KAAK;IACxD,MAAM2C,SAASsD,WAAWC,UAAU,CAAC;IAErC,MAAMC,aAAalG;IACnB8F,MAAMhG,IAAI,CAACqG,SAAS,GAAG1G,aACrBI,mBAAmBC,IAAI,EACvBoG,WAAWjG,IAAI,EACfU,YAAYuF,WAAWvF,QAAQ,EAC/B,CAACA,YAAY+B,UAAUwD,WAAWxD,MAAM,EACxC,CAAC/B,YAAYuF,UAAU,CAACF,WAAW,EACnC,CAACrF,YAAYuF,WAAWhF,WAAW,EACnC,CAACP,YAAYqF,eAAe,aAAaE,WAAW9C,kBAAkB,EACtE,CAACzC,YAAY8C,WAAWyC,WAAWzC,OAAO,EAC1CqC,MAAMhG,IAAI,CAACqG,SAAS;IAGtB,MAAMC,iBAAiBzC;IACvB,MAAM0C,uBAAuBd;IAC7BO,MAAM/F,QAAQ,CAACoG,SAAS,GAAG1G,aACzBI,mBAAmBE,QAAQ,EAC3BqG,eAAenG,IAAI,EACnBmG,cAAc,CAACL,KAAK,EACpBM,oBAAoB,CAACZ,OAAO,EAC5B9E,YAAYyF,eAAezF,QAAQ,EACnCmF,MAAM/F,QAAQ,CAACoG,SAAS;IAG1B,OAAOL;AACT,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Textarea/useTextareaStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n root: 'fui-Textarea',\n textarea: 'fui-Textarea__textarea',\n};\n\n/**\n * Styles for the root(wrapper) slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n position: 'relative',\n // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n padding: `0 0 ${tokens.strokeWidthThick} 0`,\n margin: '0',\n borderRadius: tokens.borderRadiusMedium,\n verticalAlign: 'top',\n },\n\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n\n filled: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ':hover,:focus-within': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker-shadow': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2,\n },\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2,\n },\n\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n ':hover': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n\n ':active': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n\n ':focus-within': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorCompoundBrandStroke,\n },\n },\n\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n});\n\n/**\n * Styles for the textarea slot\n */\nconst useTextareaStyles = makeStyles({\n base: {\n ...shorthands.borderStyle('none'),\n margin: '0',\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n flexGrow: 1,\n fontFamily: tokens.fontFamilyBase,\n height: '100%',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1,\n },\n\n outlineStyle: 'none', // disable default browser outline\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n // affected by changing the padding of the root.\n small: {\n minHeight: '40px',\n padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '200px',\n ...typographyStyles.caption1,\n },\n medium: {\n minHeight: '52px',\n padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '260px',\n ...typographyStyles.body1,\n },\n large: {\n minHeight: '64px',\n padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '320px',\n ...typographyStyles.body2,\n },\n});\n\n/**\n * Styles for the textarea's resize property\n */\nconst useTextareaResizeStyles = makeStyles({\n none: {\n resize: 'none',\n },\n both: {\n resize: 'both',\n },\n horizontal: {\n resize: 'horizontal',\n },\n vertical: {\n resize: 'vertical',\n },\n});\n\n/**\n * Apply styling to the Textarea slots based on the state\n */\nexport const useTextareaStyles_unstable = (state: TextareaState): TextareaState => {\n 'use no memo';\n\n const { size, appearance, resize } = state;\n const disabled = state.textarea.disabled;\n const invalid = `${state.textarea['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n textareaClassNames.root,\n rootStyles.base,\n disabled && rootStyles.disabled,\n !disabled && filled && rootStyles.filled,\n !disabled && rootStyles[appearance],\n !disabled && rootStyles.interactive,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && invalid && rootStyles.invalid,\n state.root.className,\n );\n\n const textareaStyles = useTextareaStyles();\n const textareaResizeStyles = useTextareaResizeStyles();\n state.textarea.className = mergeClasses(\n textareaClassNames.textarea,\n textareaStyles.base,\n textareaStyles[size],\n textareaResizeStyles[resize],\n disabled && textareaStyles.disabled,\n state.textarea.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","display","boxSizing","position","padding","strokeWidthThick","margin","borderRadius","borderRadiusMedium","verticalAlign","disabled","backgroundColor","colorTransparentBackground","border","strokeWidthThin","colorNeutralStrokeDisabled","borderColor","interactive","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","outlineWidth","outlineStyle","outlineColor","filled","colorTransparentStroke","colorTransparentStrokeInteractive","colorNeutralBackground3","colorNeutralBackground1","boxShadow","shadow2","outline","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","invalid","colorPaletteRedBorder2","useTextareaStyles","borderStyle","color","colorNeutralForeground1","flexGrow","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","colorNeutralForegroundDisabled","cursor","small","minHeight","spacingVerticalXS","spacingHorizontalSNudge","spacingHorizontalXXS","maxHeight","caption1","medium","spacingVerticalSNudge","spacingHorizontalMNudge","body1","large","spacingVerticalS","spacingHorizontalM","body2","useTextareaResizeStyles","none","resize","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"mappings":"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"}
|
|
@@ -476,8 +476,6 @@ const textareaClassNames = {
|
|
|
476
476
|
Bqenvij: "f1l02sjl",
|
|
477
477
|
yvdlaj: "fwyc1cq",
|
|
478
478
|
B3o7kgh: "f13ta7ih",
|
|
479
|
-
B4brmom: "f1vw9udw",
|
|
480
|
-
Brrnbx2: "fbb3kq8",
|
|
481
479
|
oeaueh: "f1s6fcnf"
|
|
482
480
|
},
|
|
483
481
|
disabled: {
|
|
@@ -546,8 +544,6 @@ const textareaClassNames = {
|
|
|
546
544
|
".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}",
|
|
547
545
|
".f13ta7ih::-webkit-input-placeholder{opacity:1;}",
|
|
548
546
|
".f13ta7ih::-moz-placeholder{opacity:1;}",
|
|
549
|
-
".f1vw9udw::selection{color:var(--colorNeutralForegroundInverted);}",
|
|
550
|
-
".fbb3kq8::selection{background-color:var(--colorNeutralBackgroundInverted);}",
|
|
551
547
|
".f1s6fcnf{outline-style:none;}",
|
|
552
548
|
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
|
|
553
549
|
".fdrzuqr{cursor:not-allowed;}",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTextareaStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const textareaClassNames = {\n root: 'fui-Textarea',\n textarea: 'fui-Textarea__textarea'\n};\n/**\n * Styles for the root(wrapper) slot\n */ const useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n position: 'relative',\n // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n padding: `0 0 ${tokens.strokeWidthThick} 0`,\n margin: '0',\n borderRadius: tokens.borderRadiusMedium,\n verticalAlign: 'top'\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n },\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n },\n ':focus-within': {\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n outlineColor: 'transparent'\n }\n },\n filled: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ':hover,:focus-within': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1\n },\n 'filled-darker-shadow': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2\n },\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n ':hover': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n },\n ':active': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n ':focus-within': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorCompoundBrandStroke\n }\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n }\n});\n/**\n * Styles for the textarea slot\n */ const useTextareaStyles = makeStyles({\n base: {\n ...shorthands.borderStyle('none'),\n margin: '0',\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n flexGrow: 1,\n fontFamily: tokens.fontFamilyBase,\n height: '100%',\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1\n },\n '::selection': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorNeutralBackgroundInverted\n },\n outlineStyle: 'none'\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n // affected by changing the padding of the root.\n small: {\n minHeight: '40px',\n padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '200px',\n ...typographyStyles.caption1\n },\n medium: {\n minHeight: '52px',\n padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '260px',\n ...typographyStyles.body1\n },\n large: {\n minHeight: '64px',\n padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '320px',\n ...typographyStyles.body2\n }\n});\n/**\n * Styles for the textarea's resize property\n */ const useTextareaResizeStyles = makeStyles({\n none: {\n resize: 'none'\n },\n both: {\n resize: 'both'\n },\n horizontal: {\n resize: 'horizontal'\n },\n vertical: {\n resize: 'vertical'\n }\n});\n/**\n * Apply styling to the Textarea slots based on the state\n */ export const useTextareaStyles_unstable = (state)=>{\n 'use no memo';\n const { size, appearance, resize } = state;\n const disabled = state.textarea.disabled;\n const invalid = `${state.textarea['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(textareaClassNames.root, rootStyles.base, disabled && rootStyles.disabled, !disabled && filled && rootStyles.filled, !disabled && rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && invalid && rootStyles.invalid, state.root.className);\n const textareaStyles = useTextareaStyles();\n const textareaResizeStyles = useTextareaResizeStyles();\n state.textarea.className = mergeClasses(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","mc9l5x","B7ck84d","qhf8xq","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","ha4doy","disabled","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","interactive","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","Bbr2w1p","Bduesf4","Bpq79vn","filled","q7v0qe","kmh5ft","nagaa4","B1yhkcb","E5pizo","outline","outlineInteractive","kzujx5","oetu4i","gvrnp0","xv9156","jek2p4","gg5e9n","Beu9t3s","dt87k2","Bt1vbvt","Bwzppfd","Bop6t4b","B2zwrfe","Bwp2tzp","Bgoe8wy","Bf40cpq","ckks6v","Baalond","v2iqwr","wmxk5l","Bj33j0h","Bs0cc2w","qwjtx1","B50zh58","f7epvg","e1hlit","B7mkhst","ak43y8","Bbcopvn","Bvecx4l","lwioe0","B6oc9vd","e2sjt0","uqwnxt","asj8p9","Br8fjdy","zoxjo1","Bt3ojkv","B7pmvfx","Bfht2n1","an54nd","t1ykpo","Belqbek","bbt1vd","Brahy3i","r7b1zc","rexu52","ovtnii","Bvq3b66","Bawrxx6","Bbs6y8j","B2qpgjt","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","d","p","m","w","h","a","useTextareaStyles","sj55zd","Bh6795r","Bahqtrf","Bqenvij","yvdlaj","B3o7kgh","B4brmom","Brrnbx2","oeaueh","Bceei9c","small","sshi5w","Bxyxcbc","Be2twd7","Bhrd7zp","Bg96gwp","medium","large","useTextareaResizeStyles","none","B3rzk8w","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","resize","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useTextareaStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const textareaClassNames = {\n root: 'fui-Textarea',\n textarea: 'fui-Textarea__textarea'\n};\n/**\n * Styles for the root(wrapper) slot\n */ const useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n position: 'relative',\n // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n padding: `0 0 ${tokens.strokeWidthThick} 0`,\n margin: '0',\n borderRadius: tokens.borderRadiusMedium,\n verticalAlign: 'top'\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n },\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n },\n ':focus-within': {\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n outlineColor: 'transparent'\n }\n },\n filled: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ':hover,:focus-within': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1\n },\n 'filled-darker-shadow': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2\n },\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n ':hover': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n },\n ':active': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n ':focus-within': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorCompoundBrandStroke\n }\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n }\n});\n/**\n * Styles for the textarea slot\n */ const useTextareaStyles = makeStyles({\n base: {\n ...shorthands.borderStyle('none'),\n margin: '0',\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n flexGrow: 1,\n fontFamily: tokens.fontFamilyBase,\n height: '100%',\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1\n },\n outlineStyle: 'none'\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n // affected by changing the padding of the root.\n small: {\n minHeight: '40px',\n padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '200px',\n ...typographyStyles.caption1\n },\n medium: {\n minHeight: '52px',\n padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '260px',\n ...typographyStyles.body1\n },\n large: {\n minHeight: '64px',\n padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '320px',\n ...typographyStyles.body2\n }\n});\n/**\n * Styles for the textarea's resize property\n */ const useTextareaResizeStyles = makeStyles({\n none: {\n resize: 'none'\n },\n both: {\n resize: 'both'\n },\n horizontal: {\n resize: 'horizontal'\n },\n vertical: {\n resize: 'vertical'\n }\n});\n/**\n * Apply styling to the Textarea slots based on the state\n */ export const useTextareaStyles_unstable = (state)=>{\n 'use no memo';\n const { size, appearance, resize } = state;\n const disabled = state.textarea.disabled;\n const invalid = `${state.textarea['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(textareaClassNames.root, rootStyles.base, disabled && rootStyles.disabled, !disabled && filled && rootStyles.filled, !disabled && rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && invalid && rootStyles.invalid, state.root.className);\n const textareaStyles = useTextareaStyles();\n const textareaResizeStyles = useTextareaResizeStyles();\n state.textarea.className = mergeClasses(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","mc9l5x","B7ck84d","qhf8xq","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","ha4doy","disabled","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","interactive","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","Bbr2w1p","Bduesf4","Bpq79vn","filled","q7v0qe","kmh5ft","nagaa4","B1yhkcb","E5pizo","outline","outlineInteractive","kzujx5","oetu4i","gvrnp0","xv9156","jek2p4","gg5e9n","Beu9t3s","dt87k2","Bt1vbvt","Bwzppfd","Bop6t4b","B2zwrfe","Bwp2tzp","Bgoe8wy","Bf40cpq","ckks6v","Baalond","v2iqwr","wmxk5l","Bj33j0h","Bs0cc2w","qwjtx1","B50zh58","f7epvg","e1hlit","B7mkhst","ak43y8","Bbcopvn","Bvecx4l","lwioe0","B6oc9vd","e2sjt0","uqwnxt","asj8p9","Br8fjdy","zoxjo1","Bt3ojkv","B7pmvfx","Bfht2n1","an54nd","t1ykpo","Belqbek","bbt1vd","Brahy3i","r7b1zc","rexu52","ovtnii","Bvq3b66","Bawrxx6","Bbs6y8j","B2qpgjt","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","d","p","m","w","h","a","useTextareaStyles","sj55zd","Bh6795r","Bahqtrf","Bqenvij","yvdlaj","B3o7kgh","oeaueh","Bceei9c","small","sshi5w","Bxyxcbc","Be2twd7","Bhrd7zp","Bg96gwp","medium","large","useTextareaResizeStyles","none","B3rzk8w","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","resize","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"mappings":"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"}
|
|
@@ -159,10 +159,6 @@ const textareaClassNames = {
|
|
|
159
159
|
color: _reacttheme.tokens.colorNeutralForeground4,
|
|
160
160
|
opacity: 1
|
|
161
161
|
},
|
|
162
|
-
'::selection': {
|
|
163
|
-
color: _reacttheme.tokens.colorNeutralForegroundInverted,
|
|
164
|
-
backgroundColor: _reacttheme.tokens.colorNeutralBackgroundInverted
|
|
165
|
-
},
|
|
166
162
|
outlineStyle: 'none'
|
|
167
163
|
},
|
|
168
164
|
disabled: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Textarea/useTextareaStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n root: 'fui-Textarea',\n textarea: 'fui-Textarea__textarea',\n};\n\n/**\n * Styles for the root(wrapper) slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n position: 'relative',\n // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n padding: `0 0 ${tokens.strokeWidthThick} 0`,\n margin: '0',\n borderRadius: tokens.borderRadiusMedium,\n verticalAlign: 'top',\n },\n\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n\n filled: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ':hover,:focus-within': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker-shadow': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2,\n },\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2,\n },\n\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n ':hover': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n\n ':active': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n\n ':focus-within': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorCompoundBrandStroke,\n },\n },\n\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n});\n\n/**\n * Styles for the textarea slot\n */\nconst useTextareaStyles = makeStyles({\n base: {\n ...shorthands.borderStyle('none'),\n margin: '0',\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n flexGrow: 1,\n fontFamily: tokens.fontFamilyBase,\n height: '100%',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1,\n },\n\n '::selection': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorNeutralBackgroundInverted,\n },\n\n outlineStyle: 'none', // disable default browser outline\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n // affected by changing the padding of the root.\n small: {\n minHeight: '40px',\n padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '200px',\n ...typographyStyles.caption1,\n },\n medium: {\n minHeight: '52px',\n padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '260px',\n ...typographyStyles.body1,\n },\n large: {\n minHeight: '64px',\n padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '320px',\n ...typographyStyles.body2,\n },\n});\n\n/**\n * Styles for the textarea's resize property\n */\nconst useTextareaResizeStyles = makeStyles({\n none: {\n resize: 'none',\n },\n both: {\n resize: 'both',\n },\n horizontal: {\n resize: 'horizontal',\n },\n vertical: {\n resize: 'vertical',\n },\n});\n\n/**\n * Apply styling to the Textarea slots based on the state\n */\nexport const useTextareaStyles_unstable = (state: TextareaState): TextareaState => {\n 'use no memo';\n\n const { size, appearance, resize } = state;\n const disabled = state.textarea.disabled;\n const invalid = `${state.textarea['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n textareaClassNames.root,\n rootStyles.base,\n disabled && rootStyles.disabled,\n !disabled && filled && rootStyles.filled,\n !disabled && rootStyles[appearance],\n !disabled && rootStyles.interactive,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && invalid && rootStyles.invalid,\n state.root.className,\n );\n\n const textareaStyles = useTextareaStyles();\n const textareaResizeStyles = useTextareaResizeStyles();\n state.textarea.className = mergeClasses(\n textareaClassNames.textarea,\n textareaStyles.base,\n textareaStyles[size],\n textareaResizeStyles[resize],\n disabled && textareaStyles.disabled,\n state.textarea.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","display","boxSizing","position","padding","strokeWidthThick","margin","borderRadius","borderRadiusMedium","verticalAlign","disabled","backgroundColor","colorTransparentBackground","border","strokeWidthThin","colorNeutralStrokeDisabled","borderColor","interactive","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","outlineWidth","outlineStyle","outlineColor","filled","colorTransparentStroke","colorTransparentStrokeInteractive","colorNeutralBackground3","colorNeutralBackground1","boxShadow","shadow2","outline","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","invalid","colorPaletteRedBorder2","useTextareaStyles","borderStyle","color","colorNeutralForeground1","flexGrow","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","colorNeutralForegroundInverted","colorNeutralBackgroundInverted","colorNeutralForegroundDisabled","cursor","small","minHeight","spacingVerticalXS","spacingHorizontalSNudge","spacingHorizontalXXS","maxHeight","caption1","medium","spacingVerticalSNudge","spacingHorizontalMNudge","body1","large","spacingVerticalS","spacingHorizontalM","body2","useTextareaResizeStyles","none","resize","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"mappings":";;;;;;;;;;;IAKaK,kBAAAA;;;8BA2NAgG;eAAAA;;;uBAhOwC,iBAAiB;4BAC7B,wBAAwB;AAI1D,2BAA0D;IAC/D/F,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,oBAAgBR,iBAAAA,EAAW;IAC/BS,MAAM;QACJC,SAAS;QACTC,WAAW;QACXC,UAAU;QACV,oHAAoH;QACpHC,SAAS,CAAC,IAAI,EAAEV,kBAAAA,CAAOW,gBAAgB,CAAC,EAAE,CAAC;QAC3CC,QAAQ;QACRC,cAAcb,kBAAAA,CAAOc,kBAAkB;QACvCC,eAAe;IACjB;IAEAC,UAAU;QACRC,iBAAiBjB,kBAAAA,CAAOkB,0BAA0B;QAClDC,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAOqB,0BAA0B,EAAE;QAE9E,kCAAkC;YAChC,GAAGtB,iBAAAA,CAAWuB,WAAW,CAAC,WAAW;QACvC;IACF;IAEAC,aAAa;QACX,2CAA2C;QAC3C,+FAA+F;QAC/F,WAAW;YACTf,WAAW;YACXgB,SAAS;YACTf,UAAU;YACVgB,MAAM;YACNC,QAAQ;YACRC,OAAO;YAEP,yCAAyC;YACzC,sFAAsF;YACtF,gFAAgF;YAChF,qGAAqG;YACrGC,QAAQ,CAAC,IAAI,EAAE5B,kBAAAA,CAAOW,gBAAgB,CAAC,EAAE,EAAEX,kBAAAA,CAAOc,kBAAkB,CAAC,CAAC,CAAC;YACvEe,wBAAwB7B,kBAAAA,CAAOc,kBAAkB;YACjDgB,yBAAyB9B,kBAAAA,CAAOc,kBAAkB;YAElD,mBAAmB;YACnB,8FAA8F;YAC9F,2FAA2F;YAC3F,4EAA4E;YAC5EiB,cAAc,GAAG/B,kBAAAA,CAAOW,gBAAgB,CAAC,OAAO,EAAEX,kBAAAA,CAAOgC,wBAAwB,EAAE;YACnFC,UAAU,CAAC,kBAAkB,EAAEjC,kBAAAA,CAAOW,gBAAgB,CAAC,QAAQ,CAAC;YAEhE,0BAA0B;YAC1BuB,WAAW;YACXC,oBAAoB;YACpBC,oBAAoBpC,kBAAAA,CAAOqC,iBAAiB;YAC5CC,iBAAiBtC,kBAAAA,CAAOuC,kBAAkB;YAE1C,sDAAsD;gBACpDH,oBAAoB;gBACpBE,iBAAiB;YACnB;QACF;QACA,wBAAwB;YACtB,yBAAyB;YACzBJ,WAAW;YACXC,oBAAoB;YACpBC,oBAAoBpC,kBAAAA,CAAOwC,cAAc;YACzCF,iBAAiBtC,kBAAAA,CAAOyC,kBAAkB;YAE1C,sDAAsD;gBACpDL,oBAAoB;gBACpBE,iBAAiB;YACnB;QACF;QACA,+BAA+B;YAC7B,wEAAwE;YACxEI,mBAAmB1C,kBAAAA,CAAO2C,+BAA+B;QAC3D;QACA,iBAAiB;YACfC,cAAc5C,kBAAAA,CAAOW,gBAAgB;YACrCkC,cAAc;YACdC,cAAc;QAChB;IACF;IAEAC,QAAQ;QACN5B,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAOgD,sBAAsB,EAAE;QAC1E,wBAAwB;YACtB,GAAGjD,iBAAAA,CAAWuB,WAAW,CAACtB,kBAAAA,CAAOiD,iCAAiC,CAAC;QACrE;IACF;IACA,iBAAiB;QACfhC,iBAAiBjB,kBAAAA,CAAOkD,uBAAuB;IACjD;IACA,kBAAkB;QAChBjC,iBAAiBjB,kBAAAA,CAAOmD,uBAAuB;IACjD;IACA,wBAAwB;QACtBlC,iBAAiBjB,kBAAAA,CAAOkD,uBAAuB;QAC/C/B,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAOiD,iCAAiC,EAAE;QACrFG,WAAWpD,kBAAAA,CAAOqD,OAAO;IAC3B;IACA,yBAAyB;QACvBpC,iBAAiBjB,kBAAAA,CAAOmD,uBAAuB;QAC/ChC,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAOiD,iCAAiC,EAAE;QACrFG,WAAWpD,kBAAAA,CAAOqD,OAAO;IAC3B;IAEAC,SAAS;QACPrC,iBAAiBjB,kBAAAA,CAAOmD,uBAAuB;QAC/ChC,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAOuD,mBAAmB,EAAE;QACvEb,mBAAmB1C,kBAAAA,CAAOwD,4BAA4B;IACxD;IACAC,oBAAoB;QAClB,UAAU;YACRtC,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAO0D,wBAAwB,EAAE;YAC5EhB,mBAAmB1C,kBAAAA,CAAO2D,iCAAiC;QAC7D;QAEA,WAAW;YACTxC,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAO4D,0BAA0B,EAAE;YAC9ElB,mBAAmB1C,kBAAAA,CAAO6D,mCAAmC;QAC/D;QAEA,iBAAiB;YACf1C,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAO4D,0BAA0B,EAAE;YAC9ElB,mBAAmB1C,kBAAAA,CAAOgC,wBAAwB;QACpD;IACF;IAEA8B,SAAS;QACP,iDAAiD;YAC/C,GAAG/D,iBAAAA,CAAWuB,WAAW,CAACtB,kBAAAA,CAAO+D,sBAAsB,CAAC;QAC1D;IACF;AACF;AAEA;;CAEC,GACD,MAAMC,wBAAoBnE,iBAAAA,EAAW;IACnCS,MAAM;QACJ,GAAGP,iBAAAA,CAAWkE,WAAW,CAAC,OAAO;QACjCrD,QAAQ;QACRK,iBAAiB;QACjBT,WAAW;QACX0D,OAAOlE,kBAAAA,CAAOmE,uBAAuB;QACrCC,UAAU;QACVC,YAAYrE,kBAAAA,CAAOsE,cAAc;QACjC1C,QAAQ;QAER,iBAAiB;YACfsC,OAAOlE,kBAAAA,CAAOuE,uBAAuB;YACrCC,SAAS;QACX;QAEA,eAAe;YACbN,OAAOlE,kBAAAA,CAAOyE,8BAA8B;YAC5CxD,iBAAiBjB,kBAAAA,CAAO0E,8BAA8B;QACxD;QAEA7B,cAAc;IAChB;IAEA7B,UAAU;QACRkD,OAAOlE,kBAAAA,CAAO2E,8BAA8B;QAC5CC,QAAQ;QACR,iBAAiB;YACfV,OAAOlE,kBAAAA,CAAO2E,8BAA8B;QAC9C;IACF;IAEA,gHAAgH;IAChH,gDAAgD;IAChDE,OAAO;QACLC,WAAW;QACXpE,SAAS,GAAGV,kBAAAA,CAAO+E,iBAAiB,CAAC,MAAM,EAAE/E,kBAAAA,CAAOgF,uBAAuB,CAAC,GAAG,EAAEhF,kBAAAA,CAAOiF,oBAAoB,CAAC,CAAC,CAAC;QAC/GC,WAAW;QACX,GAAGjF,4BAAAA,CAAiBkF,QAAQ;IAC9B;IACAC,QAAQ;QACNN,WAAW;QACXpE,SAAS,GAAGV,kBAAAA,CAAOqF,qBAAqB,CAAC,MAAM,EAAErF,kBAAAA,CAAOsF,uBAAuB,CAAC,GAAG,EAAEtF,kBAAAA,CAAOiF,oBAAoB,CAAC,CAAC,CAAC;QACnHC,WAAW;QACX,GAAGjF,4BAAAA,CAAiBsF,KAAK;IAC3B;IACAC,OAAO;QACLV,WAAW;QACXpE,SAAS,GAAGV,kBAAAA,CAAOyF,gBAAgB,CAAC,MAAM,EAAEzF,kBAAAA,CAAO0F,kBAAkB,CAAC,GAAG,EAAE1F,kBAAAA,CAAOiF,oBAAoB,CAAC,CAAC,CAAC;QACzGC,WAAW;QACX,GAAGjF,4BAAAA,CAAiB0F,KAAK;IAC3B;AACF;AAEA;;CAEC,GACD,MAAMC,0BAA0B/F,qBAAAA,EAAW;IACzCgG,MAAM;QACJC,QAAQ;IACV;IACAC,MAAM;QACJD,QAAQ;IACV;IACAE,YAAY;QACVF,QAAQ;IACV;IACAG,UAAU;QACRH,QAAQ;IACV;AACF;AAKO,mCAAmC,CAACK;IACzC;IAEA,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAEP,MAAM,EAAE,GAAGK;IACrC,MAAMnF,WAAWmF,MAAM/F,QAAQ,CAACY,QAAQ;IACxC,MAAM8C,UAAU,GAAGqC,MAAM/F,QAAQ,CAAC,eAAe,EAAE,KAAK;IACxD,MAAM2C,SAASsD,WAAWC,UAAU,CAAC;IAErC,MAAMC,aAAalG;IACnB8F,MAAMhG,IAAI,CAACqG,SAAS,OAAG1G,mBAAAA,EACrBI,mBAAmBC,IAAI,EACvBoG,WAAWjG,IAAI,EACfU,YAAYuF,WAAWvF,QAAQ,EAC/B,CAACA,YAAY+B,UAAUwD,WAAWxD,MAAM,EACxC,CAAC/B,YAAYuF,UAAU,CAACF,WAAW,EACnC,CAACrF,YAAYuF,WAAWhF,WAAW,EACnC,CAACP,YAAYqF,eAAe,aAAaE,WAAW9C,kBAAkB,EACtE,CAACzC,YAAY8C,WAAWyC,WAAWzC,OAAO,EAC1CqC,MAAMhG,IAAI,CAACqG,SAAS;IAGtB,MAAMC,iBAAiBzC;IACvB,MAAM0C,uBAAuBd;IAC7BO,MAAM/F,QAAQ,CAACoG,SAAS,OAAG1G,mBAAAA,EACzBI,mBAAmBE,QAAQ,EAC3BqG,eAAenG,IAAI,EACnBmG,cAAc,CAACL,KAAK,EACpBM,oBAAoB,CAACZ,OAAO,EAC5B9E,YAAYyF,eAAezF,QAAQ,EACnCmF,MAAM/F,QAAQ,CAACoG,SAAS;IAG1B,OAAOL;AACT,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Textarea/useTextareaStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n root: 'fui-Textarea',\n textarea: 'fui-Textarea__textarea',\n};\n\n/**\n * Styles for the root(wrapper) slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n position: 'relative',\n // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n padding: `0 0 ${tokens.strokeWidthThick} 0`,\n margin: '0',\n borderRadius: tokens.borderRadiusMedium,\n verticalAlign: 'top',\n },\n\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n\n filled: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ':hover,:focus-within': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker-shadow': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2,\n },\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2,\n },\n\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n ':hover': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n\n ':active': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n\n ':focus-within': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorCompoundBrandStroke,\n },\n },\n\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n});\n\n/**\n * Styles for the textarea slot\n */\nconst useTextareaStyles = makeStyles({\n base: {\n ...shorthands.borderStyle('none'),\n margin: '0',\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n flexGrow: 1,\n fontFamily: tokens.fontFamilyBase,\n height: '100%',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1,\n },\n\n outlineStyle: 'none', // disable default browser outline\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n // affected by changing the padding of the root.\n small: {\n minHeight: '40px',\n padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '200px',\n ...typographyStyles.caption1,\n },\n medium: {\n minHeight: '52px',\n padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '260px',\n ...typographyStyles.body1,\n },\n large: {\n minHeight: '64px',\n padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '320px',\n ...typographyStyles.body2,\n },\n});\n\n/**\n * Styles for the textarea's resize property\n */\nconst useTextareaResizeStyles = makeStyles({\n none: {\n resize: 'none',\n },\n both: {\n resize: 'both',\n },\n horizontal: {\n resize: 'horizontal',\n },\n vertical: {\n resize: 'vertical',\n },\n});\n\n/**\n * Apply styling to the Textarea slots based on the state\n */\nexport const useTextareaStyles_unstable = (state: TextareaState): TextareaState => {\n 'use no memo';\n\n const { size, appearance, resize } = state;\n const disabled = state.textarea.disabled;\n const invalid = `${state.textarea['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n textareaClassNames.root,\n rootStyles.base,\n disabled && rootStyles.disabled,\n !disabled && filled && rootStyles.filled,\n !disabled && rootStyles[appearance],\n !disabled && rootStyles.interactive,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && invalid && rootStyles.invalid,\n state.root.className,\n );\n\n const textareaStyles = useTextareaStyles();\n const textareaResizeStyles = useTextareaResizeStyles();\n state.textarea.className = mergeClasses(\n textareaClassNames.textarea,\n textareaStyles.base,\n textareaStyles[size],\n textareaResizeStyles[resize],\n disabled && textareaStyles.disabled,\n state.textarea.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","display","boxSizing","position","padding","strokeWidthThick","margin","borderRadius","borderRadiusMedium","verticalAlign","disabled","backgroundColor","colorTransparentBackground","border","strokeWidthThin","colorNeutralStrokeDisabled","borderColor","interactive","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","outlineWidth","outlineStyle","outlineColor","filled","colorTransparentStroke","colorTransparentStrokeInteractive","colorNeutralBackground3","colorNeutralBackground1","boxShadow","shadow2","outline","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","invalid","colorPaletteRedBorder2","useTextareaStyles","borderStyle","color","colorNeutralForeground1","flexGrow","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","colorNeutralForegroundDisabled","cursor","small","minHeight","spacingVerticalXS","spacingHorizontalSNudge","spacingHorizontalXXS","maxHeight","caption1","medium","spacingVerticalSNudge","spacingHorizontalMNudge","body1","large","spacingVerticalS","spacingHorizontalM","body2","useTextareaResizeStyles","none","resize","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-textarea",
|
|
3
|
-
"version": "9.6.
|
|
3
|
+
"version": "9.6.3",
|
|
4
4
|
"description": "Fluent UI TextArea component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -18,11 +18,11 @@
|
|
|
18
18
|
"@fluentui/scripts-api-extractor": "*"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@fluentui/react-field": "^9.4.
|
|
22
|
-
"@fluentui/react-shared-contexts": "^9.24.
|
|
23
|
-
"@fluentui/react-theme": "^9.
|
|
24
|
-
"@fluentui/react-utilities": "^9.23.
|
|
25
|
-
"@fluentui/react-jsx-runtime": "^9.1.
|
|
21
|
+
"@fluentui/react-field": "^9.4.3",
|
|
22
|
+
"@fluentui/react-shared-contexts": "^9.24.1",
|
|
23
|
+
"@fluentui/react-theme": "^9.2.0",
|
|
24
|
+
"@fluentui/react-utilities": "^9.23.2",
|
|
25
|
+
"@fluentui/react-jsx-runtime": "^9.1.5",
|
|
26
26
|
"@griffel/react": "^1.5.22",
|
|
27
27
|
"@swc/helpers": "^0.5.1"
|
|
28
28
|
},
|