@fluentui/react-input 9.0.0-beta.5 → 9.0.0-beta.8
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.json +122 -1
- package/CHANGELOG.md +81 -45
- package/Spec-styling.md +8 -8
- package/dist/{react-input.d.ts → index.d.ts} +8 -7
- package/lib/components/Input/Input.types.d.ts +2 -7
- package/lib/components/Input/Input.types.js.map +1 -1
- package/lib/components/Input/useInput.js +0 -2
- package/lib/components/Input/useInput.js.map +1 -1
- package/lib/components/Input/useInputStyles.d.ts +6 -1
- package/lib/components/Input/useInputStyles.js +55 -39
- package/lib/components/Input/useInputStyles.js.map +1 -1
- package/lib/index.d.ts +2 -1
- package/lib/index.js +2 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Input/Input.types.d.ts +2 -7
- package/lib-commonjs/components/Input/useInput.js +0 -2
- package/lib-commonjs/components/Input/useInput.js.map +1 -1
- package/lib-commonjs/components/Input/useInputStyles.d.ts +6 -1
- package/lib-commonjs/components/Input/useInputStyles.js +56 -40
- package/lib-commonjs/components/Input/useInputStyles.js.map +1 -1
- package/lib-commonjs/index.d.ts +2 -1
- package/lib-commonjs/index.js +39 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +8 -18
|
@@ -3,13 +3,23 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useInputStyles_unstable = exports.inputClassName = void 0;
|
|
6
|
+
exports.useInputStyles_unstable = exports.inputClassNames = exports.inputClassName = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
10
10
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
11
|
+
/**
|
|
12
|
+
* @deprecated Use `inputClassNames.root` instead.
|
|
13
|
+
*/
|
|
14
|
+
|
|
11
15
|
|
|
12
|
-
exports.inputClassName = 'fui-Input';
|
|
16
|
+
exports.inputClassName = 'fui-Input';
|
|
17
|
+
exports.inputClassNames = {
|
|
18
|
+
root: 'fui-Input',
|
|
19
|
+
input: 'fui-Input__input',
|
|
20
|
+
contentBefore: 'fui-Input__contentBefore',
|
|
21
|
+
contentAfter: 'fui-Input__contentAfter'
|
|
22
|
+
}; // TODO(sharing) use theme values once available
|
|
13
23
|
|
|
14
24
|
const horizontalSpacing = {
|
|
15
25
|
xxs: '2px',
|
|
@@ -51,7 +61,7 @@ const fieldHeights = {
|
|
|
51
61
|
|
|
52
62
|
const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
53
63
|
"base": {
|
|
54
|
-
"mc9l5x": "
|
|
64
|
+
"mc9l5x": "ftuwxu6",
|
|
55
65
|
"Bt984gj": "f122n59",
|
|
56
66
|
"Eh141a": "flvyvdh",
|
|
57
67
|
"i8kkvl": "f16mnhsx",
|
|
@@ -65,28 +75,28 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
65
75
|
"B7ck84d": "f1ewtqcl"
|
|
66
76
|
},
|
|
67
77
|
"interactive": {
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"
|
|
74
|
-
"
|
|
75
|
-
"
|
|
76
|
-
"
|
|
77
|
-
"
|
|
78
|
-
"
|
|
79
|
-
"
|
|
80
|
-
"
|
|
81
|
-
"
|
|
82
|
-
"
|
|
83
|
-
"
|
|
84
|
-
"
|
|
85
|
-
"
|
|
86
|
-
"
|
|
87
|
-
"
|
|
88
|
-
"
|
|
89
|
-
"
|
|
78
|
+
"li1rpt": "f1gw3sf2",
|
|
79
|
+
"Bsft5z2": "f13zj6fq",
|
|
80
|
+
"E3zdtr": "f1mdlcz9",
|
|
81
|
+
"Eqx8gd": ["f1a7op3", "f1cjjd47"],
|
|
82
|
+
"By385i5": "f1gboi2j",
|
|
83
|
+
"B1piin3": ["f1cjjd47", "f1a7op3"],
|
|
84
|
+
"Dlnsje": "f145g4dw",
|
|
85
|
+
"d9w3h3": ["f1kp91vd", "f1ibwz09"],
|
|
86
|
+
"B3778ie": ["f1ibwz09", "f1kp91vd"],
|
|
87
|
+
"Bcgy8vk": "f1cb6c3",
|
|
88
|
+
"Bw17bha": "f1lh990p",
|
|
89
|
+
"B1q35kw": "f1jc6hxc",
|
|
90
|
+
"Gjdm7m": "f13evtba",
|
|
91
|
+
"b1kco5": "f1yk9hq",
|
|
92
|
+
"Ba2ppi3": "fhwpy7i",
|
|
93
|
+
"F2fol1": "fh0z7ck",
|
|
94
|
+
"lck23g": "f117tx5t",
|
|
95
|
+
"umuwi5": "fjw5xc1",
|
|
96
|
+
"Blcqepd": "f1xdyd5c",
|
|
97
|
+
"nplu4u": "f1b9wyyr",
|
|
98
|
+
"Bioka5o": "f15goup",
|
|
99
|
+
"Bercvud": "f1ibeo51",
|
|
90
100
|
"Bbr2w1p": "f14a1fxs",
|
|
91
101
|
"Bduesf4": "f3e99gv",
|
|
92
102
|
"Bpq79vn": "fhljsf7"
|
|
@@ -120,9 +130,6 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
120
130
|
"i8kkvl": "fgfbwa2",
|
|
121
131
|
"Belr9w4": "f1y3hx6l"
|
|
122
132
|
},
|
|
123
|
-
"inline": {
|
|
124
|
-
"mc9l5x": "ftuwxu6"
|
|
125
|
-
},
|
|
126
133
|
"outline": {
|
|
127
134
|
"De3pzq": "fxugw4r",
|
|
128
135
|
"B4j52fo": "f5ogflp",
|
|
@@ -161,10 +168,10 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
161
168
|
"underlineInteractive": {
|
|
162
169
|
"oetu4i": "f1l4zc64",
|
|
163
170
|
"Be8ivqh": "f1klwx88",
|
|
164
|
-
"
|
|
165
|
-
"
|
|
166
|
-
"
|
|
167
|
-
"
|
|
171
|
+
"B3778ie": ["f1nf3wye", "feulmo5"],
|
|
172
|
+
"d9w3h3": ["feulmo5", "f1nf3wye"],
|
|
173
|
+
"Bl18szs": ["f18vqdqu", "f53nyzz"],
|
|
174
|
+
"B4j8arr": ["f53nyzz", "f18vqdqu"]
|
|
168
175
|
},
|
|
169
176
|
"filled": {
|
|
170
177
|
"E5pizo": "fyed02w",
|
|
@@ -218,8 +225,8 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
218
225
|
"n51gp8": ["f14g86mu", "f1rvyvqg"]
|
|
219
226
|
}
|
|
220
227
|
}, {
|
|
221
|
-
"d": [".
|
|
222
|
-
"w": [".
|
|
228
|
+
"d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".fbi42co{row-gap:2px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1cb6c3::after{border-bottom-width:2px;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".fh0z7ck::after{transition-duration:0.05s;}", ".f117tx5t::after{transition-delay:cubic-bezier(0.7,0,1,0.5);}", ".f1pha7fy{min-height:24px;}", ".f1g0x7ka{padding-top:0;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1qch9an{padding-bottom:0;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1nxs5xn{min-height:32px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1w5jphr{min-height:40px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fgfbwa2{-webkit-column-gap:6px;column-gap:6px;}", ".f1y3hx6l{row-gap:6px;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1nf3wye::after{border-bottom-right-radius:0;}", ".feulmo5::after{border-bottom-left-radius:0;}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".fyed02w{box-shadow:var(--shadow2);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
|
|
229
|
+
"w": [".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".f1b9wyyr:focus-within::after{transition-duration:0.2s;}", ".f15goup:focus-within::after{transition-delay:cubic-bezier(0.1,0.9,0.2,1);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}"],
|
|
223
230
|
"h": [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".ftmjh5b:hover,.ftmjh5b:focus-within{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,.f17blpuu:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}"],
|
|
224
231
|
"a": [".f8vnjqi:active,.f8vnjqi:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,.fz1etlk:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1hc16gm:active,:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1klwx88:active,.f1klwx88:focus-within{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1hc16gm:active,.f1hc16gm:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}"],
|
|
225
232
|
"t": ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", "@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}"]
|
|
@@ -279,9 +286,18 @@ const useContentStyles = /*#__PURE__*/react_1.__styles({
|
|
|
279
286
|
},
|
|
280
287
|
"disabled": {
|
|
281
288
|
"sj55zd": "f1s2aq7o"
|
|
289
|
+
},
|
|
290
|
+
"small": {
|
|
291
|
+
"kwki1k": "f3u2cy0"
|
|
292
|
+
},
|
|
293
|
+
"medium": {
|
|
294
|
+
"kwki1k": "f1oqplr0"
|
|
295
|
+
},
|
|
296
|
+
"large": {
|
|
297
|
+
"kwki1k": "fa420co"
|
|
282
298
|
}
|
|
283
299
|
}, {
|
|
284
|
-
"d": [".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fyuhxbn>svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"]
|
|
300
|
+
"d": [".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fyuhxbn>svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f3u2cy0>svg{font-size:16px;}", ".f1oqplr0>svg{font-size:20px;}", ".fa420co>svg{font-size:24px;}"]
|
|
285
301
|
});
|
|
286
302
|
/**
|
|
287
303
|
* Apply styling to the Input slots based on the state
|
|
@@ -298,16 +314,16 @@ const useInputStyles_unstable = state => {
|
|
|
298
314
|
const rootStyles = useRootStyles();
|
|
299
315
|
const inputStyles = useInputElementStyles();
|
|
300
316
|
const contentStyles = useContentStyles();
|
|
301
|
-
state.root.className = react_1.mergeClasses(exports.
|
|
302
|
-
state.input.className = react_1.mergeClasses(inputStyles.base, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
|
|
303
|
-
const contentClasses = [contentStyles.base, disabled && contentStyles.disabled];
|
|
317
|
+
state.root.className = react_1.mergeClasses(exports.inputClassNames.root, rootStyles.base, rootStyles[size], rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, disabled && rootStyles.disabled, state.root.className);
|
|
318
|
+
state.input.className = react_1.mergeClasses(exports.inputClassNames.input, inputStyles.base, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
|
|
319
|
+
const contentClasses = [contentStyles.base, disabled && contentStyles.disabled, contentStyles[size]];
|
|
304
320
|
|
|
305
321
|
if (state.contentBefore) {
|
|
306
|
-
state.contentBefore.className = react_1.mergeClasses(...contentClasses, state.contentBefore.className);
|
|
322
|
+
state.contentBefore.className = react_1.mergeClasses(exports.inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
|
|
307
323
|
}
|
|
308
324
|
|
|
309
325
|
if (state.contentAfter) {
|
|
310
|
-
state.contentAfter.className = react_1.mergeClasses(...contentClasses, state.contentAfter.className);
|
|
326
|
+
state.contentAfter.className = react_1.mergeClasses(exports.inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
|
|
311
327
|
}
|
|
312
328
|
|
|
313
329
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Input/useInputStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { InputState } from './Input.types';\n\nexport const inputClassName = 'fui-Input';\n\n// TODO(sharing) use theme values once available\nconst horizontalSpacing = {\n xxs: '2px',\n xs: '4px',\n sNudge: '6px',\n s: '8px',\n mNudge: '10px',\n m: '12px',\n};\nconst motionDurations = {\n ultraFast: '0.05s',\n normal: '0.2s',\n};\nconst motionCurves = {\n accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',\n decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)',\n};\nconst contentSizes = {\n // TODO(sharing) shouldn't these be in the theme?\n body1: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n caption1: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n flexWrap: 'nowrap',\n ...shorthands.gap(horizontalSpacing.xxs),\n fontFamily: tokens.fontFamilyBase,\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // used for all but underline\n position: 'relative',\n boxSizing: 'border-box',\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(2px, ${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 ...shorthands.borderBottom('2px', 'solid', tokens.colorCompoundBrandStroke),\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: motionDurations.ultraFast,\n transitionDelay: motionCurves.accelerateMid,\n },\n ':focus-within:after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: motionDurations.normal,\n transitionDelay: motionCurves.decelerateMid,\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: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n small: {\n minHeight: fieldHeights.small,\n ...shorthands.padding('0', horizontalSpacing.sNudge),\n ...contentSizes.caption1,\n },\n medium: {\n minHeight: fieldHeights.medium,\n ...shorthands.padding('0', horizontalSpacing.mNudge),\n ...contentSizes.body1,\n },\n large: {\n minHeight: fieldHeights.large,\n ...shorthands.padding('0', horizontalSpacing.m),\n ...contentSizes[400],\n ...shorthands.gap(horizontalSpacing.sNudge),\n },\n inline: {\n display: 'inline-flex',\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n ':hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderRadius(0), // corners look strange if rounded\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n },\n underlineInteractive: {\n ':hover': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n ':after': shorthands.borderRadius(0), // remove rounded corners from focus underline\n },\n filled: {\n boxShadow: tokens.shadow2, // optional shadow for filled appearances\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filledDarker: {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n filledLighter: {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n});\n\nconst useInputElementStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n flexGrow: 1,\n minWidth: 0, // required to make the input shrink to fit the wrapper\n ...shorthands.borderStyle('none'), // input itself never has a border (this is handled by inputWrapper)\n ...shorthands.padding('0', horizontalSpacing.xxs),\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1, // browser style override\n },\n ':focus-visible': {\n outlineStyle: 'none', // disable default browser outline\n },\n },\n small: {\n // This is set on root but doesn't inherit\n ...contentSizes.caption1,\n },\n medium: {\n ...contentSizes.body1,\n },\n large: {\n ...contentSizes[400],\n ...shorthands.padding('0', horizontalSpacing.sNudge),\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useContentStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n // special case styling for icons (most common case) to ensure they're centered vertically\n '> svg': { display: 'block' },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n});\n\n/**\n * Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = (state: InputState): InputState => {\n const { size, appearance } = state;\n const disabled = state.input.disabled;\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const inputStyles = useInputElementStyles();\n const contentStyles = useContentStyles();\n\n state.root.className = mergeClasses(\n inputClassName,\n rootStyles.base,\n rootStyles[size],\n rootStyles[appearance],\n !disabled && rootStyles.interactive,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n state.inline && rootStyles.inline,\n filled && rootStyles.filled,\n disabled && rootStyles.disabled,\n state.root.className,\n );\n\n state.input.className = mergeClasses(\n inputStyles.base,\n inputStyles[size],\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n const contentClasses = [contentStyles.base, disabled && contentStyles.disabled];\n if (state.contentBefore) {\n state.contentBefore.className = mergeClasses(...contentClasses, state.contentBefore.className);\n }\n if (state.contentAfter) {\n state.contentAfter.className = mergeClasses(...contentClasses, state.contentAfter.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["components/Input/useInputStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { InputSlots, InputState } from './Input.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `inputClassNames.root` instead.\n */\nexport const inputClassName = 'fui-Input';\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n root: 'fui-Input',\n input: 'fui-Input__input',\n contentBefore: 'fui-Input__contentBefore',\n contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) use theme values once available\nconst horizontalSpacing = {\n xxs: '2px',\n xs: '4px',\n sNudge: '6px',\n s: '8px',\n mNudge: '10px',\n m: '12px',\n};\nconst motionDurations = {\n ultraFast: '0.05s',\n normal: '0.2s',\n};\nconst motionCurves = {\n accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',\n decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)',\n};\nconst contentSizes = {\n // TODO(sharing) shouldn't these be in the theme?\n body1: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n caption1: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n alignItems: 'center',\n flexWrap: 'nowrap',\n ...shorthands.gap(horizontalSpacing.xxs),\n fontFamily: tokens.fontFamilyBase,\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // used for all but underline\n position: 'relative',\n boxSizing: 'border-box',\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(2px, ${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 ...shorthands.borderBottom('2px', 'solid', tokens.colorCompoundBrandStroke),\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: motionDurations.ultraFast,\n transitionDelay: motionCurves.accelerateMid,\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: motionDurations.normal,\n transitionDelay: motionCurves.decelerateMid,\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: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n small: {\n minHeight: fieldHeights.small,\n ...shorthands.padding('0', horizontalSpacing.sNudge),\n ...contentSizes.caption1,\n },\n medium: {\n minHeight: fieldHeights.medium,\n ...shorthands.padding('0', horizontalSpacing.mNudge),\n ...contentSizes.body1,\n },\n large: {\n minHeight: fieldHeights.large,\n ...shorthands.padding('0', horizontalSpacing.m),\n ...contentSizes[400],\n ...shorthands.gap(horizontalSpacing.sNudge),\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n ':hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderRadius(0), // corners look strange if rounded\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n },\n underlineInteractive: {\n ':hover': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n '::after': shorthands.borderRadius(0), // remove rounded corners from focus underline\n },\n filled: {\n boxShadow: tokens.shadow2, // optional shadow for filled appearances\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filledDarker: {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n filledLighter: {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n});\n\nconst useInputElementStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n flexGrow: 1,\n minWidth: 0, // required to make the input shrink to fit the wrapper\n ...shorthands.borderStyle('none'), // input itself never has a border (this is handled by inputWrapper)\n ...shorthands.padding('0', horizontalSpacing.xxs),\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1, // browser style override\n },\n ':focus-visible': {\n outlineStyle: 'none', // disable default browser outline\n },\n },\n small: {\n // This is set on root but doesn't inherit\n ...contentSizes.caption1,\n },\n medium: {\n ...contentSizes.body1,\n },\n large: {\n ...contentSizes[400],\n ...shorthands.padding('0', horizontalSpacing.sNudge),\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useContentStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n // special case styling for icons (most common case) to ensure they're centered vertically\n '> svg': { display: 'block' },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': { fontSize: '16px' },\n },\n medium: {\n '> svg': { fontSize: '20px' },\n },\n large: {\n '> svg': { fontSize: '24px' },\n },\n});\n\n/**\n * Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = (state: InputState): InputState => {\n const { size, appearance } = state;\n const disabled = state.input.disabled;\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const inputStyles = useInputElementStyles();\n const contentStyles = useContentStyles();\n\n state.root.className = mergeClasses(\n inputClassNames.root,\n rootStyles.base,\n rootStyles[size],\n rootStyles[appearance],\n !disabled && rootStyles.interactive,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n filled && rootStyles.filled,\n disabled && rootStyles.disabled,\n state.root.className,\n );\n\n state.input.className = mergeClasses(\n inputClassNames.input,\n inputStyles.base,\n inputStyles[size],\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n const contentClasses = [contentStyles.base, disabled && contentStyles.disabled, contentStyles[size]];\n if (state.contentBefore) {\n state.contentBefore.className = mergeClasses(\n inputClassNames.contentBefore,\n ...contentClasses,\n state.contentBefore.className,\n );\n }\n if (state.contentAfter) {\n state.contentAfter.className = mergeClasses(\n inputClassNames.contentAfter,\n ...contentClasses,\n state.contentAfter.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/lib-commonjs/index.d.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { Input, inputClassName, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable, } from './Input';
|
|
2
|
+
export type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';
|
package/lib-commonjs/index.js
CHANGED
|
@@ -3,8 +3,45 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
exports.useInput_unstable = exports.useInputStyles_unstable = exports.renderInput_unstable = exports.inputClassNames = exports.inputClassName = exports.Input = void 0;
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
var Input_1 = /*#__PURE__*/require("./Input");
|
|
8
9
|
|
|
9
|
-
|
|
10
|
+
Object.defineProperty(exports, "Input", {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () {
|
|
13
|
+
return Input_1.Input;
|
|
14
|
+
}
|
|
15
|
+
}); // eslint-disable-next-line deprecation/deprecation
|
|
16
|
+
|
|
17
|
+
Object.defineProperty(exports, "inputClassName", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: function () {
|
|
20
|
+
return Input_1.inputClassName;
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
Object.defineProperty(exports, "inputClassNames", {
|
|
24
|
+
enumerable: true,
|
|
25
|
+
get: function () {
|
|
26
|
+
return Input_1.inputClassNames;
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
Object.defineProperty(exports, "renderInput_unstable", {
|
|
30
|
+
enumerable: true,
|
|
31
|
+
get: function () {
|
|
32
|
+
return Input_1.renderInput_unstable;
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
Object.defineProperty(exports, "useInputStyles_unstable", {
|
|
36
|
+
enumerable: true,
|
|
37
|
+
get: function () {
|
|
38
|
+
return Input_1.useInputStyles_unstable;
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
Object.defineProperty(exports, "useInput_unstable", {
|
|
42
|
+
enumerable: true,
|
|
43
|
+
get: function () {
|
|
44
|
+
return Input_1.useInput_unstable;
|
|
45
|
+
}
|
|
46
|
+
});
|
|
10
47
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,KAAA;AAAK;AAAL,CAAA,E,CACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,cAAA;AAAc;AAAd,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA","sourcesContent":["export {\n Input,\n // eslint-disable-next-line deprecation/deprecation\n inputClassName,\n inputClassNames,\n renderInput_unstable,\n useInputStyles_unstable,\n useInput_unstable,\n} from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-input",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.8",
|
|
4
4
|
"description": "Fluent UI React Input component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -21,30 +21,20 @@
|
|
|
21
21
|
"start": "yarn storybook",
|
|
22
22
|
"test": "jest --passWithNoTests",
|
|
23
23
|
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
|
24
|
-
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node
|
|
25
|
-
"storybook": "node
|
|
24
|
+
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-input/src && yarn docs",
|
|
25
|
+
"storybook": "node ../../../scripts/storybook/runner",
|
|
26
26
|
"type-check": "tsc -b tsconfig.json"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
32
|
-
"@fluentui/scripts": "^1.0.0"
|
|
33
|
-
"@types/enzyme": "3.10.3",
|
|
34
|
-
"@types/enzyme-adapter-react-16": "1.0.3",
|
|
35
|
-
"@types/react": "16.9.42",
|
|
36
|
-
"@types/react-dom": "16.9.10",
|
|
37
|
-
"@types/react-test-renderer": "^16.0.0",
|
|
38
|
-
"enzyme": "~3.10.0",
|
|
39
|
-
"enzyme-adapter-react-16": "^1.15.0",
|
|
40
|
-
"react": "16.8.6",
|
|
41
|
-
"react-dom": "16.8.6",
|
|
42
|
-
"react-test-renderer": "^16.3.0"
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.4",
|
|
32
|
+
"@fluentui/scripts": "^1.0.0"
|
|
43
33
|
},
|
|
44
34
|
"dependencies": {
|
|
45
|
-
"@fluentui/react-theme": "9.0.0-rc.
|
|
46
|
-
"@fluentui/react-utilities": "9.0.0-rc.
|
|
47
|
-
"@griffel/react": "1.0.
|
|
35
|
+
"@fluentui/react-theme": "9.0.0-rc.6",
|
|
36
|
+
"@fluentui/react-utilities": "9.0.0-rc.7",
|
|
37
|
+
"@griffel/react": "1.0.3",
|
|
48
38
|
"tslib": "^2.1.0"
|
|
49
39
|
},
|
|
50
40
|
"peerDependencies": {
|