@fluentui/react-input 9.0.0-beta.9 → 9.0.0-rc.2
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 +70 -1
- package/CHANGELOG.md +20 -2
- package/README.md +32 -0
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/components/Input/useInputStyles.js +2 -2
- package/lib-commonjs/components/Input/useInputStyles.js +2 -2
- package/package.json +7 -6
- package/lib/Input.d.ts +0 -1
- package/lib/components/Input/Input.d.ts +0 -6
- package/lib/components/Input/Input.types.d.ts +0 -79
- package/lib/components/Input/index.d.ts +0 -5
- package/lib/components/Input/renderInput.d.ts +0 -5
- package/lib/components/Input/useInput.d.ts +0 -12
- package/lib/components/Input/useInputStyles.d.ts +0 -11
- package/lib/index.d.ts +0 -2
- package/lib-commonjs/Input.d.ts +0 -1
- package/lib-commonjs/components/Input/Input.d.ts +0 -6
- package/lib-commonjs/components/Input/Input.types.d.ts +0 -79
- package/lib-commonjs/components/Input/index.d.ts +0 -5
- package/lib-commonjs/components/Input/renderInput.d.ts +0 -5
- package/lib-commonjs/components/Input/useInput.d.ts +0 -12
- package/lib-commonjs/components/Input/useInputStyles.d.ts +0 -11
- package/lib-commonjs/index.d.ts +0 -2
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,76 @@
|
|
|
2
2
|
"name": "@fluentui/react-input",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 23 May 2022 12:10:43 GMT",
|
|
6
|
+
"tag": "@fluentui/react-input_v9.0.0-rc.2",
|
|
7
|
+
"version": "9.0.0-rc.2",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "seanmonahan@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-input",
|
|
13
|
+
"commit": "1f5dc959ca89bb722fb9cea57b6880aedb5759aa",
|
|
14
|
+
"comment": "write readme"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "seanmonahan@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-input",
|
|
19
|
+
"commit": "bcafc0d8c2fdaa68473a317b6d179c5534257602",
|
|
20
|
+
"comment": "react-input: update appearance stories background contrast"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "martinhochel@microsoft.com",
|
|
24
|
+
"package": "@fluentui/react-input",
|
|
25
|
+
"commit": "692e6916819ee07a1dfb0d99ac2ffbdd0d75252f",
|
|
26
|
+
"comment": "feat: ship rolluped only dts"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "olfedias@microsoft.com",
|
|
30
|
+
"package": "@fluentui/react-input",
|
|
31
|
+
"commit": "f120fe9160ad7311a87af0cfacd8d2fb26275e34",
|
|
32
|
+
"comment": "chore: Update Griffel to latest version"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "seanmonahan@microsoft.com",
|
|
36
|
+
"package": "@fluentui/react-input",
|
|
37
|
+
"commit": "70164a1d13eb58eec6693f735029a8974b7aac70",
|
|
38
|
+
"comment": "Move from beta to release candidate."
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "olfedias@microsoft.com",
|
|
42
|
+
"package": "@fluentui/react-input",
|
|
43
|
+
"commit": "60804cec07a495b8a5d1fc66338bf0443b212144",
|
|
44
|
+
"comment": "chore: Update Griffel to latest version"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-input",
|
|
49
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.8",
|
|
50
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui/react-input",
|
|
55
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.9",
|
|
56
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"author": "beachball",
|
|
60
|
+
"package": "@fluentui/react-input",
|
|
61
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6",
|
|
62
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"author": "beachball",
|
|
66
|
+
"package": "@fluentui/react-input",
|
|
67
|
+
"comment": "Bump @fluentui/react-text to v9.0.0-rc.9",
|
|
68
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
69
|
+
}
|
|
70
|
+
]
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"date": "Thu, 05 May 2022 18:26:24 GMT",
|
|
6
75
|
"tag": "@fluentui/react-input_v9.0.0-beta.9",
|
|
7
76
|
"version": "9.0.0-beta.9",
|
|
8
77
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-input
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 23 May 2022 12:10:43 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-rc.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-rc.2)
|
|
8
|
+
|
|
9
|
+
Mon, 23 May 2022 12:10:43 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.9..@fluentui/react-input_v9.0.0-rc.2)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- write readme ([PR #22993](https://github.com/microsoft/fluentui/pull/22993) by seanmonahan@microsoft.com)
|
|
15
|
+
- react-input: update appearance stories background contrast ([PR #22966](https://github.com/microsoft/fluentui/pull/22966) by seanmonahan@microsoft.com)
|
|
16
|
+
- feat: ship rolluped only dts ([PR #22793](https://github.com/microsoft/fluentui/pull/22793) by martinhochel@microsoft.com)
|
|
17
|
+
- chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
|
|
18
|
+
- Move from beta to release candidate. ([PR #23090](https://github.com/microsoft/fluentui/pull/23090) by seanmonahan@microsoft.com)
|
|
19
|
+
- chore: Update Griffel to latest version ([PR #23029](https://github.com/microsoft/fluentui/pull/23029) by olfedias@microsoft.com)
|
|
20
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
21
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
22
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
23
|
+
- Bump @fluentui/react-text to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
24
|
+
|
|
7
25
|
## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.9)
|
|
8
26
|
|
|
9
|
-
Thu, 05 May 2022 18:24
|
|
27
|
+
Thu, 05 May 2022 18:26:24 GMT
|
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.8..@fluentui/react-input_v9.0.0-beta.9)
|
|
11
29
|
|
|
12
30
|
### Changes
|
package/README.md
CHANGED
|
@@ -3,3 +3,35 @@
|
|
|
3
3
|
**React Input components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
|
|
4
4
|
|
|
5
5
|
These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
|
|
6
|
+
|
|
7
|
+
Inputs give people a way to enter and edit text.
|
|
8
|
+
|
|
9
|
+
### Usage
|
|
10
|
+
|
|
11
|
+
Import Input:
|
|
12
|
+
|
|
13
|
+
```js
|
|
14
|
+
import { Input } from '@fluentui/react-components';
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
#### Examples
|
|
18
|
+
|
|
19
|
+
```jsx
|
|
20
|
+
<Input defaultValue="Hello, World!" />
|
|
21
|
+
<Input value={value} onChange={onInputChange} />
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
See [Fluent UI Storybook](https://aka.ms/fluentui-storybook) for more detailed usage examples.
|
|
25
|
+
|
|
26
|
+
Alternatively, run Storybook locally with:
|
|
27
|
+
|
|
28
|
+
1. `yarn start`
|
|
29
|
+
2. Select `react-input` from the list.
|
|
30
|
+
|
|
31
|
+
### Specification
|
|
32
|
+
|
|
33
|
+
See [Spec.md](./Spec.md)
|
|
34
|
+
|
|
35
|
+
### Upgrade Guide
|
|
36
|
+
|
|
37
|
+
If you're upgrading to Fluent UI v9 see the upgrade guide in [Storybook](https://aka.ms/fluentui-storybook) under Concepts > Upgrading.
|
|
File without changes
|
|
@@ -199,8 +199,8 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
199
199
|
}, {
|
|
200
200
|
"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;}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".fiut8dr{row-gap:var(--spacingHorizontalXXS);}", ".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;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1pha7fy{min-height:24px;}", ".f1g0x7ka{padding-top:0;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1qch9an{padding-bottom:0;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1nxs5xn{min-height:32px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1w5jphr{min-height:40px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".f1r7g2jn{row-gap:var(--spacingHorizontalSNudge);}", ".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);}"],
|
|
201
201
|
"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;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".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;}"],
|
|
202
|
-
"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
|
|
203
|
-
"a": [".f8vnjqi:active,.f8vnjqi:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,.fz1etlk:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1hc16gm:active
|
|
202
|
+
"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,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}"],
|
|
203
|
+
"a": [".f8vnjqi:active,.f8vnjqi:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,.fz1etlk:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1hc16gm:active,.f1hc16gm:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1klwx88:active,.f1klwx88:focus-within{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"],
|
|
204
204
|
"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;}}"]
|
|
205
205
|
});
|
|
206
206
|
|
|
@@ -208,8 +208,8 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
208
208
|
}, {
|
|
209
209
|
"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;}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".fiut8dr{row-gap:var(--spacingHorizontalXXS);}", ".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;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1pha7fy{min-height:24px;}", ".f1g0x7ka{padding-top:0;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1qch9an{padding-bottom:0;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1nxs5xn{min-height:32px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1w5jphr{min-height:40px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".f1r7g2jn{row-gap:var(--spacingHorizontalSNudge);}", ".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);}"],
|
|
210
210
|
"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;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".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;}"],
|
|
211
|
-
"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
|
|
212
|
-
"a": [".f8vnjqi:active,.f8vnjqi:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,.fz1etlk:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1hc16gm:active
|
|
211
|
+
"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,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}"],
|
|
212
|
+
"a": [".f8vnjqi:active,.f8vnjqi:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,.fz1etlk:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1hc16gm:active,.f1hc16gm:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1klwx88:active,.f1klwx88:focus-within{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"],
|
|
213
213
|
"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;}}"]
|
|
214
214
|
});
|
|
215
215
|
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-input",
|
|
3
|
-
"version": "9.0.0-
|
|
3
|
+
"version": "9.0.0-rc.2",
|
|
4
4
|
"description": "Fluent UI React Input component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
7
|
-
"typings": "
|
|
7
|
+
"typings": "dist/index.d.ts",
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
@@ -28,13 +28,14 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.6",
|
|
32
|
+
"@fluentui/react-text": "9.0.0-rc.9",
|
|
32
33
|
"@fluentui/scripts": "^1.0.0"
|
|
33
34
|
},
|
|
34
35
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-theme": "9.0.0-rc.
|
|
36
|
-
"@fluentui/react-utilities": "9.0.0-rc.
|
|
37
|
-
"@griffel/react": "1.0.
|
|
36
|
+
"@fluentui/react-theme": "9.0.0-rc.8",
|
|
37
|
+
"@fluentui/react-utilities": "9.0.0-rc.9",
|
|
38
|
+
"@griffel/react": "1.0.5",
|
|
38
39
|
"tslib": "^2.1.0"
|
|
39
40
|
},
|
|
40
41
|
"peerDependencies": {
|
package/lib/Input.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components/Input/index';
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
3
|
-
export declare type InputSlots = {
|
|
4
|
-
/**
|
|
5
|
-
* Wrapper element which visually appears to be the input and is used for borders, focus styling, etc.
|
|
6
|
-
* (A wrapper is needed to properly position `contentBefore` and `contentAfter` relative to `input`.)
|
|
7
|
-
*
|
|
8
|
-
* The root slot receives the `className` and `style` specified directly on the `<Input>`.
|
|
9
|
-
* All other top-level native props will be applied to the primary slot, `input`.
|
|
10
|
-
*/
|
|
11
|
-
root: NonNullable<Slot<'span'>>;
|
|
12
|
-
/**
|
|
13
|
-
* The actual `<input>` element. `type="text"` will be automatically applied unless overridden.
|
|
14
|
-
*
|
|
15
|
-
* This is the "primary" slot, so native props specified directly on the `<Input>` will go here
|
|
16
|
-
* (except `className` and `style`, which go to the `root` slot). The top-level `ref` will
|
|
17
|
-
* also go here.
|
|
18
|
-
*/
|
|
19
|
-
input: NonNullable<Slot<'input'>>;
|
|
20
|
-
/** Element before the input text, within the input border */
|
|
21
|
-
contentBefore?: Slot<'span'>;
|
|
22
|
-
/** Element after the input text, within the input border */
|
|
23
|
-
contentAfter?: Slot<'span'>;
|
|
24
|
-
};
|
|
25
|
-
export declare type InputProps = Omit<ComponentProps<Partial<InputSlots>, 'input'>, 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'> & {
|
|
26
|
-
/** Input can't have children. */
|
|
27
|
-
children?: never;
|
|
28
|
-
/**
|
|
29
|
-
* Size of the input (changes the font size and spacing).
|
|
30
|
-
* @default 'medium'
|
|
31
|
-
*/
|
|
32
|
-
size?: 'small' | 'medium' | 'large';
|
|
33
|
-
/**
|
|
34
|
-
* Controls the colors and borders of the input.
|
|
35
|
-
* @default 'outline'
|
|
36
|
-
*/
|
|
37
|
-
appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
|
|
38
|
-
/**
|
|
39
|
-
* Default value of the input. Provide this if the input should be an uncontrolled component
|
|
40
|
-
* which tracks its current state internally; otherwise, use `value`.
|
|
41
|
-
*
|
|
42
|
-
* (This prop is mutually exclusive with `value`.)
|
|
43
|
-
*/
|
|
44
|
-
defaultValue?: string;
|
|
45
|
-
/**
|
|
46
|
-
* Current value of the input. Provide this if the input is a controlled component where you
|
|
47
|
-
* are maintaining its current state; otherwise, use `defaultValue`.
|
|
48
|
-
*
|
|
49
|
-
* (This prop is mutually exclusive with `defaultValue`.)
|
|
50
|
-
*/
|
|
51
|
-
value?: string;
|
|
52
|
-
/**
|
|
53
|
-
* Called when the user changes the input's value.
|
|
54
|
-
*/
|
|
55
|
-
onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void;
|
|
56
|
-
/**
|
|
57
|
-
* An input can have different text-based [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types)
|
|
58
|
-
* based on the type of value the user will enter.
|
|
59
|
-
*
|
|
60
|
-
* Note that no custom styling is currently applied for alternative types, and some types may
|
|
61
|
-
* activate browser-default styling which does not match the Fluent design language.
|
|
62
|
-
*
|
|
63
|
-
* (For non-text-based types such as `button` or `checkbox`, use the appropriate component or an
|
|
64
|
-
* `<input>` element instead.)
|
|
65
|
-
* @default 'text'
|
|
66
|
-
*/
|
|
67
|
-
type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'datetime-local' | 'month' | 'number' | 'time' | 'week';
|
|
68
|
-
};
|
|
69
|
-
/**
|
|
70
|
-
* State used in rendering Input.
|
|
71
|
-
*/
|
|
72
|
-
export declare type InputState = Required<Pick<InputProps, 'appearance' | 'size'>> & ComponentState<InputSlots>;
|
|
73
|
-
/**
|
|
74
|
-
* Data passed to the `onChange` callback when a user changes the input's value.
|
|
75
|
-
*/
|
|
76
|
-
export declare type InputOnChangeData = {
|
|
77
|
-
/** Updated input value from the user */
|
|
78
|
-
value: string;
|
|
79
|
-
};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { InputProps, InputState } from './Input.types';
|
|
3
|
-
/**
|
|
4
|
-
* Create the state required to render Input.
|
|
5
|
-
*
|
|
6
|
-
* The returned state can be modified with hooks such as useInputStyles_unstable,
|
|
7
|
-
* before being passed to renderInput_unstable.
|
|
8
|
-
*
|
|
9
|
-
* @param props - props from this instance of Input
|
|
10
|
-
* @param ref - reference to `<input>` element of Input
|
|
11
|
-
*/
|
|
12
|
-
export declare const useInput_unstable: (props: InputProps, ref: React.Ref<HTMLInputElement>) => InputState;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { InputSlots, InputState } from './Input.types';
|
|
2
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated Use `inputClassNames.root` instead.
|
|
5
|
-
*/
|
|
6
|
-
export declare const inputClassName = "fui-Input";
|
|
7
|
-
export declare const inputClassNames: SlotClassNames<InputSlots>;
|
|
8
|
-
/**
|
|
9
|
-
* Apply styling to the Input slots based on the state
|
|
10
|
-
*/
|
|
11
|
-
export declare const useInputStyles_unstable: (state: InputState) => InputState;
|
package/lib/index.d.ts
DELETED
package/lib-commonjs/Input.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components/Input/index';
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
3
|
-
export declare type InputSlots = {
|
|
4
|
-
/**
|
|
5
|
-
* Wrapper element which visually appears to be the input and is used for borders, focus styling, etc.
|
|
6
|
-
* (A wrapper is needed to properly position `contentBefore` and `contentAfter` relative to `input`.)
|
|
7
|
-
*
|
|
8
|
-
* The root slot receives the `className` and `style` specified directly on the `<Input>`.
|
|
9
|
-
* All other top-level native props will be applied to the primary slot, `input`.
|
|
10
|
-
*/
|
|
11
|
-
root: NonNullable<Slot<'span'>>;
|
|
12
|
-
/**
|
|
13
|
-
* The actual `<input>` element. `type="text"` will be automatically applied unless overridden.
|
|
14
|
-
*
|
|
15
|
-
* This is the "primary" slot, so native props specified directly on the `<Input>` will go here
|
|
16
|
-
* (except `className` and `style`, which go to the `root` slot). The top-level `ref` will
|
|
17
|
-
* also go here.
|
|
18
|
-
*/
|
|
19
|
-
input: NonNullable<Slot<'input'>>;
|
|
20
|
-
/** Element before the input text, within the input border */
|
|
21
|
-
contentBefore?: Slot<'span'>;
|
|
22
|
-
/** Element after the input text, within the input border */
|
|
23
|
-
contentAfter?: Slot<'span'>;
|
|
24
|
-
};
|
|
25
|
-
export declare type InputProps = Omit<ComponentProps<Partial<InputSlots>, 'input'>, 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'> & {
|
|
26
|
-
/** Input can't have children. */
|
|
27
|
-
children?: never;
|
|
28
|
-
/**
|
|
29
|
-
* Size of the input (changes the font size and spacing).
|
|
30
|
-
* @default 'medium'
|
|
31
|
-
*/
|
|
32
|
-
size?: 'small' | 'medium' | 'large';
|
|
33
|
-
/**
|
|
34
|
-
* Controls the colors and borders of the input.
|
|
35
|
-
* @default 'outline'
|
|
36
|
-
*/
|
|
37
|
-
appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
|
|
38
|
-
/**
|
|
39
|
-
* Default value of the input. Provide this if the input should be an uncontrolled component
|
|
40
|
-
* which tracks its current state internally; otherwise, use `value`.
|
|
41
|
-
*
|
|
42
|
-
* (This prop is mutually exclusive with `value`.)
|
|
43
|
-
*/
|
|
44
|
-
defaultValue?: string;
|
|
45
|
-
/**
|
|
46
|
-
* Current value of the input. Provide this if the input is a controlled component where you
|
|
47
|
-
* are maintaining its current state; otherwise, use `defaultValue`.
|
|
48
|
-
*
|
|
49
|
-
* (This prop is mutually exclusive with `defaultValue`.)
|
|
50
|
-
*/
|
|
51
|
-
value?: string;
|
|
52
|
-
/**
|
|
53
|
-
* Called when the user changes the input's value.
|
|
54
|
-
*/
|
|
55
|
-
onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void;
|
|
56
|
-
/**
|
|
57
|
-
* An input can have different text-based [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types)
|
|
58
|
-
* based on the type of value the user will enter.
|
|
59
|
-
*
|
|
60
|
-
* Note that no custom styling is currently applied for alternative types, and some types may
|
|
61
|
-
* activate browser-default styling which does not match the Fluent design language.
|
|
62
|
-
*
|
|
63
|
-
* (For non-text-based types such as `button` or `checkbox`, use the appropriate component or an
|
|
64
|
-
* `<input>` element instead.)
|
|
65
|
-
* @default 'text'
|
|
66
|
-
*/
|
|
67
|
-
type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'datetime-local' | 'month' | 'number' | 'time' | 'week';
|
|
68
|
-
};
|
|
69
|
-
/**
|
|
70
|
-
* State used in rendering Input.
|
|
71
|
-
*/
|
|
72
|
-
export declare type InputState = Required<Pick<InputProps, 'appearance' | 'size'>> & ComponentState<InputSlots>;
|
|
73
|
-
/**
|
|
74
|
-
* Data passed to the `onChange` callback when a user changes the input's value.
|
|
75
|
-
*/
|
|
76
|
-
export declare type InputOnChangeData = {
|
|
77
|
-
/** Updated input value from the user */
|
|
78
|
-
value: string;
|
|
79
|
-
};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { InputProps, InputState } from './Input.types';
|
|
3
|
-
/**
|
|
4
|
-
* Create the state required to render Input.
|
|
5
|
-
*
|
|
6
|
-
* The returned state can be modified with hooks such as useInputStyles_unstable,
|
|
7
|
-
* before being passed to renderInput_unstable.
|
|
8
|
-
*
|
|
9
|
-
* @param props - props from this instance of Input
|
|
10
|
-
* @param ref - reference to `<input>` element of Input
|
|
11
|
-
*/
|
|
12
|
-
export declare const useInput_unstable: (props: InputProps, ref: React.Ref<HTMLInputElement>) => InputState;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { InputSlots, InputState } from './Input.types';
|
|
2
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated Use `inputClassNames.root` instead.
|
|
5
|
-
*/
|
|
6
|
-
export declare const inputClassName = "fui-Input";
|
|
7
|
-
export declare const inputClassNames: SlotClassNames<InputSlots>;
|
|
8
|
-
/**
|
|
9
|
-
* Apply styling to the Input slots based on the state
|
|
10
|
-
*/
|
|
11
|
-
export declare const useInputStyles_unstable: (state: InputState) => InputState;
|
package/lib-commonjs/index.d.ts
DELETED