@fluentui/react-input 9.0.3 → 9.0.4

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.
Files changed (11) hide show
  1. package/CHANGELOG.json +50 -3
  2. package/CHANGELOG.md +17 -4
  3. package/lib/components/Input/useInput.js +1 -1
  4. package/lib/components/Input/useInput.js.map +1 -1
  5. package/lib/components/Input/useInputStyles.js +17 -5
  6. package/lib/components/Input/useInputStyles.js.map +1 -1
  7. package/lib-commonjs/components/Input/useInput.js +1 -1
  8. package/lib-commonjs/components/Input/useInput.js.map +1 -1
  9. package/lib-commonjs/components/Input/useInputStyles.js +17 -5
  10. package/lib-commonjs/components/Input/useInputStyles.js.map +1 -1
  11. package/package.json +6 -5
package/CHANGELOG.json CHANGED
@@ -2,7 +2,54 @@
2
2
  "name": "@fluentui/react-input",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 14 Jul 2022 21:18:46 GMT",
5
+ "date": "Wed, 03 Aug 2022 16:00:16 GMT",
6
+ "tag": "@fluentui/react-input_v9.0.4",
7
+ "version": "9.0.4",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "bernardo.sunderhus@gmail.com",
12
+ "package": "@fluentui/react-input",
13
+ "commit": "ee025ccd3a919f2f4dcdd3a74dbe6d2abfed24ff",
14
+ "comment": "Adds proper initialValue to value on useInput"
15
+ },
16
+ {
17
+ "author": "sarah.higley@microsoft.com",
18
+ "package": "@fluentui/react-input",
19
+ "commit": "c66808887bcd7fd150c22eda462b325075742694",
20
+ "comment": "bugfix: add reduced motion styles for avatar, spinner, switch, and input focus styles"
21
+ },
22
+ {
23
+ "author": "miroslav.stastny@microsoft.com",
24
+ "package": "@fluentui/react-input",
25
+ "commit": "08563664778fd80284561d3c9d254307a0a32362",
26
+ "comment": "chore: Bump Griffel dependencies"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-input",
31
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
32
+ "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-input",
37
+ "comment": "Bump @fluentui/react-text to v9.0.4",
38
+ "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
39
+ }
40
+ ],
41
+ "none": [
42
+ {
43
+ "author": "lingfangao@hotmail.com",
44
+ "package": "@fluentui/react-input",
45
+ "commit": "99cc385631d04a76ee10ebc143cb9fecd99640b6",
46
+ "comment": "chore: Add `prerelease` as disallowed changetype for 9.0.0 packages"
47
+ }
48
+ ]
49
+ }
50
+ },
51
+ {
52
+ "date": "Thu, 14 Jul 2022 21:21:12 GMT",
6
53
  "tag": "@fluentui/react-input_v9.0.3",
7
54
  "version": "9.0.3",
8
55
  "comments": {
@@ -17,13 +64,13 @@
17
64
  "author": "beachball",
18
65
  "package": "@fluentui/react-input",
19
66
  "comment": "Bump @fluentui/react-utilities to v9.0.2",
20
- "commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2"
67
+ "commit": "79b513146194367544160f364b0a7dd749ed93e4"
21
68
  },
22
69
  {
23
70
  "author": "beachball",
24
71
  "package": "@fluentui/react-input",
25
72
  "comment": "Bump @fluentui/react-text to v9.0.3",
26
- "commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2"
73
+ "commit": "79b513146194367544160f364b0a7dd749ed93e4"
27
74
  }
28
75
  ]
29
76
  }
package/CHANGELOG.md CHANGED
@@ -1,19 +1,32 @@
1
1
  # Change Log - @fluentui/react-input
2
2
 
3
- This log was last generated on Thu, 14 Jul 2022 21:18:46 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 03 Aug 2022 16:00:16 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.4)
8
+
9
+ Wed, 03 Aug 2022 16:00:16 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.3..@fluentui/react-input_v9.0.4)
11
+
12
+ ### Patches
13
+
14
+ - Adds proper initialValue to value on useInput ([PR #24084](https://github.com/microsoft/fluentui/pull/24084) by bernardo.sunderhus@gmail.com)
15
+ - bugfix: add reduced motion styles for avatar, spinner, switch, and input focus styles ([PR #23788](https://github.com/microsoft/fluentui/pull/23788) by sarah.higley@microsoft.com)
16
+ - chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
17
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
18
+ - Bump @fluentui/react-text to v9.0.4 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
19
+
7
20
  ## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.3)
8
21
 
9
- Thu, 14 Jul 2022 21:18:46 GMT
22
+ Thu, 14 Jul 2022 21:21:12 GMT
10
23
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.2..@fluentui/react-input_v9.0.3)
11
24
 
12
25
  ### Patches
13
26
 
14
27
  - fix: Fixing bad version bump of @fluentui/react-utilities. ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by Humberto.Morimoto@microsoft.com)
15
- - Bump @fluentui/react-utilities to v9.0.2 ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by beachball)
16
- - Bump @fluentui/react-text to v9.0.3 ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by beachball)
28
+ - Bump @fluentui/react-utilities to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
29
+ - Bump @fluentui/react-text to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
17
30
 
18
31
  ## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.2)
19
32
 
package/lib/components/Input/useInput.js CHANGED
@@ -18,7 +18,7 @@ export const useInput_unstable = (props, ref) => {
18
18
  const [value, setValue] = useControllableState({
19
19
  state: props.value,
20
20
  defaultState: props.defaultValue,
21
- initialState: undefined
21
+ initialState: ''
22
22
  });
23
23
  const nativeProps = getPartitionedNativeProps({
24
24
  props,
package/lib/components/Input/useInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Input/useInput.ts"],"names":[],"mappings":"AACA,SACE,yBADF,EAEE,gBAFF,EAGE,oBAHF,EAIE,gBAJF,QAKO,2BALP;AAQA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;EACnG,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,UAAU,GAAG,SAAhC;IAA2C;EAA3C,IAAwD,KAA9D;EAEA,MAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,oBAAoB,CAAC;IAC7C,KAAK,EAAE,KAAK,CAAC,KADgC;IAE7C,YAAY,EAAE,KAAK,CAAC,YAFyB;IAG7C,YAAY,EAAE;EAH+B,CAAD,CAA9C;EAMA,MAAM,WAAW,GAAG,yBAAyB,CAAC;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,MAAD,EAAS,UAAT,EAAqB,OAArB,EAA8B,cAA9B;EAHyB,CAAD,CAA7C;EAMA,MAAM,KAAK,GAAe;IACxB,IADwB;IAExB,UAFwB;IAGxB,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,KAAK,EAAE,OAFG;MAGV,aAAa,EAAE,MAHL;MAIV,YAAY,EAAE;IAJJ,CAHY;IASxB,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;MACnC,QAAQ,EAAE,IADyB;MAEnC,YAAY,EAAE;QACZ,IAAI,EAAE,MADM;QAEZ,GAFY;QAGZ,GAAG,WAAW,CAAC;MAHH;IAFqB,CAAd,CATC;IAiBxB,YAAY,EAAE,gBAAgB,CAAC,KAAK,CAAC,YAAP,CAjBN;IAkBxB,aAAa,EAAE,gBAAgB,CAAC,KAAK,CAAC,aAAP,CAlBP;IAmBxB,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE,WAAW,CAAC;IAFO,CAAb;EAnBE,CAA1B;EAyBA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,KAApB;EACA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,gBAAgB,CAAC,EAAE,IAAG;IAC3C,MAAM,QAAQ,GAAG,EAAE,CAAC,MAAH,CAAU,KAA3B;IACA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;MAAE,KAAK,EAAE;IAAT,CAAP,CAAR;IACA,QAAQ,CAAC,QAAD,CAAR;EACD,CAJsC,CAAvC;EAMA,OAAO,KAAP;AACD,CAhDM","sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n useControllableState,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { InputProps, InputState } from './Input.types';\n\n/**\n * Create the state required to render Input.\n *\n * The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n *\n * @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n */\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n const { size = 'medium', appearance = 'outline', onChange } = props;\n\n const [value, setValue] = useControllableState({\n state: props.value,\n defaultState: props.defaultValue,\n initialState: undefined,\n });\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['size', 'onChange', 'value', 'defaultValue'],\n });\n\n const state: InputState = {\n size,\n appearance,\n components: {\n root: 'span',\n input: 'input',\n contentBefore: 'span',\n contentAfter: 'span',\n },\n input: resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n type: 'text',\n ref,\n ...nativeProps.primary,\n },\n }),\n contentAfter: resolveShorthand(props.contentAfter),\n contentBefore: resolveShorthand(props.contentBefore),\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: nativeProps.root,\n }),\n };\n\n state.input.value = value;\n state.input.onChange = useEventCallback(ev => {\n const newValue = ev.target.value;\n onChange?.(ev, { value: newValue });\n setValue(newValue);\n });\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Input/useInput.ts"],"names":[],"mappings":"AACA,SACE,yBADF,EAEE,gBAFF,EAGE,oBAHF,EAIE,gBAJF,QAKO,2BALP;AAQA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;EACnG,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,UAAU,GAAG,SAAhC;IAA2C;EAA3C,IAAwD,KAA9D;EAEA,MAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,oBAAoB,CAAC;IAC7C,KAAK,EAAE,KAAK,CAAC,KADgC;IAE7C,YAAY,EAAE,KAAK,CAAC,YAFyB;IAG7C,YAAY,EAAE;EAH+B,CAAD,CAA9C;EAMA,MAAM,WAAW,GAAG,yBAAyB,CAAC;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,MAAD,EAAS,UAAT,EAAqB,OAArB,EAA8B,cAA9B;EAHyB,CAAD,CAA7C;EAMA,MAAM,KAAK,GAAe;IACxB,IADwB;IAExB,UAFwB;IAGxB,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,KAAK,EAAE,OAFG;MAGV,aAAa,EAAE,MAHL;MAIV,YAAY,EAAE;IAJJ,CAHY;IASxB,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;MACnC,QAAQ,EAAE,IADyB;MAEnC,YAAY,EAAE;QACZ,IAAI,EAAE,MADM;QAEZ,GAFY;QAGZ,GAAG,WAAW,CAAC;MAHH;IAFqB,CAAd,CATC;IAiBxB,YAAY,EAAE,gBAAgB,CAAC,KAAK,CAAC,YAAP,CAjBN;IAkBxB,aAAa,EAAE,gBAAgB,CAAC,KAAK,CAAC,aAAP,CAlBP;IAmBxB,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE,WAAW,CAAC;IAFO,CAAb;EAnBE,CAA1B;EAyBA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,KAApB;EACA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,gBAAgB,CAAC,EAAE,IAAG;IAC3C,MAAM,QAAQ,GAAG,EAAE,CAAC,MAAH,CAAU,KAA3B;IACA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;MAAE,KAAK,EAAE;IAAT,CAAP,CAAR;IACA,QAAQ,CAAC,QAAD,CAAR;EACD,CAJsC,CAAvC;EAMA,OAAO,KAAP;AACD,CAhDM","sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n useControllableState,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { InputProps, InputState } from './Input.types';\n\n/**\n * Create the state required to render Input.\n *\n * The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n *\n * @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n */\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n const { size = 'medium', appearance = 'outline', onChange } = props;\n\n const [value, setValue] = useControllableState({\n state: props.value,\n defaultState: props.defaultValue,\n initialState: '',\n });\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['size', 'onChange', 'value', 'defaultValue'],\n });\n\n const state: InputState = {\n size,\n appearance,\n components: {\n root: 'span',\n input: 'input',\n contentBefore: 'span',\n contentAfter: 'span',\n },\n input: resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n type: 'text',\n ref,\n ...nativeProps.primary,\n },\n }),\n contentAfter: resolveShorthand(props.contentAfter),\n contentBefore: resolveShorthand(props.contentBefore),\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: nativeProps.root,\n }),\n };\n\n state.input.value = value;\n state.input.onChange = useEventCallback(ev => {\n const newValue = ev.target.value;\n onChange?.(ev, { value: newValue });\n setValue(newValue);\n });\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib/components/Input/useInputStyles.js CHANGED
@@ -55,10 +55,14 @@ const useRootStyles = /*#__PURE__*/__styles({
55
55
  "Ba2ppi3": "fhwpy7i",
56
56
  "F2fol1": "f14ee0xe",
57
57
  "lck23g": "f1xhbsuh",
58
+ "df92cz": "fv8e3ye",
59
+ "I188md": "ftb5wc6",
58
60
  "umuwi5": "fjw5xc1",
59
61
  "Blcqepd": "f1xdyd5c",
60
62
  "nplu4u": "fatpbeo",
61
63
  "Bioka5o": "fb7uyps",
64
+ "H713fs": "f1cmft4k",
65
+ "B9ooomg": "f1x58t8o",
62
66
  "Bercvud": "f1ibeo51",
63
67
  "Bbr2w1p": "f14a1fxs",
64
68
  "Bduesf4": "f3e99gv",
@@ -193,10 +197,15 @@ const useRootStyles = /*#__PURE__*/__styles({
193
197
  }
194
198
  }, {
195
199
  "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);}"],
196
- "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;}"],
197
- "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);}"],
198
- "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);}"],
199
- "m": [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
200
+ "m": [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
201
+ "m": "screen and (prefers-reduced-motion: reduce)"
202
+ }], ["@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}", {
203
+ "m": "screen and (prefers-reduced-motion: reduce)"
204
+ }], ["@media screen and (prefers-reduced-motion: reduce){.f1cmft4k:focus-within::after{transition-duration:0.01ms;}}", {
205
+ "m": "screen and (prefers-reduced-motion: reduce)"
206
+ }], ["@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}", {
207
+ "m": "screen and (prefers-reduced-motion: reduce)"
208
+ }], ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
200
209
  "m": "(forced-colors: active)"
201
210
  }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
202
211
  "m": "(forced-colors: active)"
@@ -204,7 +213,10 @@ const useRootStyles = /*#__PURE__*/__styles({
204
213
  "m": "(forced-colors: active)"
205
214
  }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
206
215
  "m": "(forced-colors: active)"
207
- }]]
216
+ }]],
217
+ "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;}"],
218
+ "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);}"],
219
+ "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);}"]
208
220
  });
209
221
 
210
222
  const useInputElementStyles = /*#__PURE__*/__styles({
package/lib/components/Input/useInputStyles.js.map CHANGED
@@ -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, typographyStyles } from '@fluentui/react-theme';\nimport type { InputSlots, InputState } from './Input.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\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 contentSizes = {\n // TODO: This 400 style is not in the typography styles.\n // May need a design change\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(tokens.spacingHorizontalXXS),\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: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\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 ':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', tokens.spacingHorizontalSNudge),\n ...typographyStyles.caption1,\n },\n medium: {\n minHeight: fieldHeights.medium,\n ...shorthands.padding('0', tokens.spacingHorizontalMNudge),\n ...typographyStyles.body1,\n },\n large: {\n minHeight: fieldHeights.large,\n ...shorthands.padding('0', tokens.spacingHorizontalM),\n ...contentSizes[400],\n ...shorthands.gap(tokens.spacingHorizontalSNudge),\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 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n 'filled-lighter': {\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', tokens.spacingHorizontalXXS),\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\n outlineStyle: 'none', // disable default browser outline\n },\n small: {\n // This is set on root but doesn't inherit\n ...typographyStyles.caption1,\n },\n medium: {\n ...typographyStyles.body1,\n },\n large: {\n ...contentSizes[400],\n ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\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/"}
1
+ {"version":3,"sources":["components/Input/useInputStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { InputSlots, InputState } from './Input.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\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 contentSizes = {\n // TODO: This 400 style is not in the typography styles.\n // May need a design change\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(tokens.spacingHorizontalXXS),\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: 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: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n small: {\n minHeight: fieldHeights.small,\n ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n ...typographyStyles.caption1,\n },\n medium: {\n minHeight: fieldHeights.medium,\n ...shorthands.padding('0', tokens.spacingHorizontalMNudge),\n ...typographyStyles.body1,\n },\n large: {\n minHeight: fieldHeights.large,\n ...shorthands.padding('0', tokens.spacingHorizontalM),\n ...contentSizes[400],\n ...shorthands.gap(tokens.spacingHorizontalSNudge),\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 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n 'filled-lighter': {\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', tokens.spacingHorizontalXXS),\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\n outlineStyle: 'none', // disable default browser outline\n },\n small: {\n // This is set on root but doesn't inherit\n ...typographyStyles.caption1,\n },\n medium: {\n ...typographyStyles.body1,\n },\n large: {\n ...contentSizes[400],\n ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\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/components/Input/useInput.js CHANGED
@@ -26,7 +26,7 @@ const useInput_unstable = (props, ref) => {
26
26
  const [value, setValue] = react_utilities_1.useControllableState({
27
27
  state: props.value,
28
28
  defaultState: props.defaultValue,
29
- initialState: undefined
29
+ initialState: ''
30
30
  });
31
31
  const nativeProps = react_utilities_1.getPartitionedNativeProps({
32
32
  props,
package/lib-commonjs/components/Input/useInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Input/useInput.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAQA;;;;;;;;AAQG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;EACnG,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,UAAU,GAAG,SAAhC;IAA2C;EAA3C,IAAwD,KAA9D;EAEA,MAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,iBAAA,CAAA,oBAAA,CAAqB;IAC7C,KAAK,EAAE,KAAK,CAAC,KADgC;IAE7C,YAAY,EAAE,KAAK,CAAC,YAFyB;IAG7C,YAAY,EAAE;EAH+B,CAArB,CAA1B;EAMA,MAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,MAAD,EAAS,UAAT,EAAqB,OAArB,EAA8B,cAA9B;EAHyB,CAA1B,CAApB;EAMA,MAAM,KAAK,GAAe;IACxB,IADwB;IAExB,UAFwB;IAGxB,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,KAAK,EAAE,OAFG;MAGV,aAAa,EAAE,MAHL;MAIV,YAAY,EAAE;IAJJ,CAHY;IASxB,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;MACnC,QAAQ,EAAE,IADyB;MAEnC,YAAY,EAAE;QACZ,IAAI,EAAE,MADM;QAEZ,GAFY;QAGZ,GAAG,WAAW,CAAC;MAHH;IAFqB,CAA9B,CATiB;IAiBxB,YAAY,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,YAAvB,CAjBU;IAkBxB,aAAa,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,aAAvB,CAlBS;IAmBxB,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE,WAAW,CAAC;IAFO,CAA7B;EAnBkB,CAA1B;EAyBA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,KAApB;EACA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,iBAAA,CAAA,gBAAA,CAAiB,EAAE,IAAG;IAC3C,MAAM,QAAQ,GAAG,EAAE,CAAC,MAAH,CAAU,KAA3B;IACA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;MAAE,KAAK,EAAE;IAAT,CAAP,CAAR;IACA,QAAQ,CAAC,QAAD,CAAR;EACD,CAJsB,CAAvB;EAMA,OAAO,KAAP;AACD,CAhDM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n useControllableState,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { InputProps, InputState } from './Input.types';\n\n/**\n * Create the state required to render Input.\n *\n * The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n *\n * @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n */\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n const { size = 'medium', appearance = 'outline', onChange } = props;\n\n const [value, setValue] = useControllableState({\n state: props.value,\n defaultState: props.defaultValue,\n initialState: undefined,\n });\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['size', 'onChange', 'value', 'defaultValue'],\n });\n\n const state: InputState = {\n size,\n appearance,\n components: {\n root: 'span',\n input: 'input',\n contentBefore: 'span',\n contentAfter: 'span',\n },\n input: resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n type: 'text',\n ref,\n ...nativeProps.primary,\n },\n }),\n contentAfter: resolveShorthand(props.contentAfter),\n contentBefore: resolveShorthand(props.contentBefore),\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: nativeProps.root,\n }),\n };\n\n state.input.value = value;\n state.input.onChange = useEventCallback(ev => {\n const newValue = ev.target.value;\n onChange?.(ev, { value: newValue });\n setValue(newValue);\n });\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Input/useInput.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAQA;;;;;;;;AAQG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;EACnG,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,UAAU,GAAG,SAAhC;IAA2C;EAA3C,IAAwD,KAA9D;EAEA,MAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,iBAAA,CAAA,oBAAA,CAAqB;IAC7C,KAAK,EAAE,KAAK,CAAC,KADgC;IAE7C,YAAY,EAAE,KAAK,CAAC,YAFyB;IAG7C,YAAY,EAAE;EAH+B,CAArB,CAA1B;EAMA,MAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,MAAD,EAAS,UAAT,EAAqB,OAArB,EAA8B,cAA9B;EAHyB,CAA1B,CAApB;EAMA,MAAM,KAAK,GAAe;IACxB,IADwB;IAExB,UAFwB;IAGxB,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,KAAK,EAAE,OAFG;MAGV,aAAa,EAAE,MAHL;MAIV,YAAY,EAAE;IAJJ,CAHY;IASxB,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;MACnC,QAAQ,EAAE,IADyB;MAEnC,YAAY,EAAE;QACZ,IAAI,EAAE,MADM;QAEZ,GAFY;QAGZ,GAAG,WAAW,CAAC;MAHH;IAFqB,CAA9B,CATiB;IAiBxB,YAAY,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,YAAvB,CAjBU;IAkBxB,aAAa,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,aAAvB,CAlBS;IAmBxB,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE,WAAW,CAAC;IAFO,CAA7B;EAnBkB,CAA1B;EAyBA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,KAApB;EACA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,iBAAA,CAAA,gBAAA,CAAiB,EAAE,IAAG;IAC3C,MAAM,QAAQ,GAAG,EAAE,CAAC,MAAH,CAAU,KAA3B;IACA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;MAAE,KAAK,EAAE;IAAT,CAAP,CAAR;IACA,QAAQ,CAAC,QAAD,CAAR;EACD,CAJsB,CAAvB;EAMA,OAAO,KAAP;AACD,CAhDM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n useControllableState,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { InputProps, InputState } from './Input.types';\n\n/**\n * Create the state required to render Input.\n *\n * The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n *\n * @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n */\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n const { size = 'medium', appearance = 'outline', onChange } = props;\n\n const [value, setValue] = useControllableState({\n state: props.value,\n defaultState: props.defaultValue,\n initialState: '',\n });\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['size', 'onChange', 'value', 'defaultValue'],\n });\n\n const state: InputState = {\n size,\n appearance,\n components: {\n root: 'span',\n input: 'input',\n contentBefore: 'span',\n contentAfter: 'span',\n },\n input: resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n type: 'text',\n ref,\n ...nativeProps.primary,\n },\n }),\n contentAfter: resolveShorthand(props.contentAfter),\n contentBefore: resolveShorthand(props.contentBefore),\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: nativeProps.root,\n }),\n };\n\n state.input.value = value;\n state.input.onChange = useEventCallback(ev => {\n const newValue = ev.target.value;\n onChange?.(ev, { value: newValue });\n setValue(newValue);\n });\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Input/useInputStyles.js CHANGED
@@ -64,10 +64,14 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
64
64
  "Ba2ppi3": "fhwpy7i",
65
65
  "F2fol1": "f14ee0xe",
66
66
  "lck23g": "f1xhbsuh",
67
+ "df92cz": "fv8e3ye",
68
+ "I188md": "ftb5wc6",
67
69
  "umuwi5": "fjw5xc1",
68
70
  "Blcqepd": "f1xdyd5c",
69
71
  "nplu4u": "fatpbeo",
70
72
  "Bioka5o": "fb7uyps",
73
+ "H713fs": "f1cmft4k",
74
+ "B9ooomg": "f1x58t8o",
71
75
  "Bercvud": "f1ibeo51",
72
76
  "Bbr2w1p": "f14a1fxs",
73
77
  "Bduesf4": "f3e99gv",
@@ -202,10 +206,15 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
202
206
  }
203
207
  }, {
204
208
  "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);}"],
205
- "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;}"],
206
- "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);}"],
207
- "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);}"],
208
- "m": [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
209
+ "m": [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
210
+ "m": "screen and (prefers-reduced-motion: reduce)"
211
+ }], ["@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}", {
212
+ "m": "screen and (prefers-reduced-motion: reduce)"
213
+ }], ["@media screen and (prefers-reduced-motion: reduce){.f1cmft4k:focus-within::after{transition-duration:0.01ms;}}", {
214
+ "m": "screen and (prefers-reduced-motion: reduce)"
215
+ }], ["@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}", {
216
+ "m": "screen and (prefers-reduced-motion: reduce)"
217
+ }], ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
209
218
  "m": "(forced-colors: active)"
210
219
  }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
211
220
  "m": "(forced-colors: active)"
@@ -213,7 +222,10 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
213
222
  "m": "(forced-colors: active)"
214
223
  }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
215
224
  "m": "(forced-colors: active)"
216
- }]]
225
+ }]],
226
+ "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;}"],
227
+ "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);}"],
228
+ "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);}"]
217
229
  });
218
230
 
219
231
  const useInputElementStyles = /*#__PURE__*/react_1.__styles({
package/lib-commonjs/components/Input/useInputStyles.js.map CHANGED
@@ -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, typographyStyles } from '@fluentui/react-theme';\nimport type { InputSlots, InputState } from './Input.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\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 contentSizes = {\n // TODO: This 400 style is not in the typography styles.\n // May need a design change\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(tokens.spacingHorizontalXXS),\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: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\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 ':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', tokens.spacingHorizontalSNudge),\n ...typographyStyles.caption1,\n },\n medium: {\n minHeight: fieldHeights.medium,\n ...shorthands.padding('0', tokens.spacingHorizontalMNudge),\n ...typographyStyles.body1,\n },\n large: {\n minHeight: fieldHeights.large,\n ...shorthands.padding('0', tokens.spacingHorizontalM),\n ...contentSizes[400],\n ...shorthands.gap(tokens.spacingHorizontalSNudge),\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 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n 'filled-lighter': {\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', tokens.spacingHorizontalXXS),\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\n outlineStyle: 'none', // disable default browser outline\n },\n small: {\n // This is set on root but doesn't inherit\n ...typographyStyles.caption1,\n },\n medium: {\n ...typographyStyles.body1,\n },\n large: {\n ...contentSizes[400],\n ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\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/"}
1
+ {"version":3,"sources":["components/Input/useInputStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { InputSlots, InputState } from './Input.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\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 contentSizes = {\n // TODO: This 400 style is not in the typography styles.\n // May need a design change\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(tokens.spacingHorizontalXXS),\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: 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: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n small: {\n minHeight: fieldHeights.small,\n ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n ...typographyStyles.caption1,\n },\n medium: {\n minHeight: fieldHeights.medium,\n ...shorthands.padding('0', tokens.spacingHorizontalMNudge),\n ...typographyStyles.body1,\n },\n large: {\n minHeight: fieldHeights.large,\n ...shorthands.padding('0', tokens.spacingHorizontalM),\n ...contentSizes[400],\n ...shorthands.gap(tokens.spacingHorizontalSNudge),\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 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n 'filled-lighter': {\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', tokens.spacingHorizontalXXS),\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\n outlineStyle: 'none', // disable default browser outline\n },\n small: {\n // This is set on root but doesn't inherit\n ...typographyStyles.caption1,\n },\n medium: {\n ...typographyStyles.body1,\n },\n large: {\n ...contentSizes[400],\n ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-input",
3
- "version": "9.0.3",
3
+ "version": "9.0.4",
4
4
  "description": "Fluent UI React Input component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -28,14 +28,14 @@
28
28
  "devDependencies": {
29
29
  "@fluentui/eslint-plugin": "*",
30
30
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "9.0.0-beta.11",
32
- "@fluentui/react-text": "^9.0.3",
31
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.12",
32
+ "@fluentui/react-text": "^9.0.4",
33
33
  "@fluentui/scripts": "^1.0.0"
34
34
  },
35
35
  "dependencies": {
36
36
  "@fluentui/react-theme": "^9.0.0",
37
37
  "@fluentui/react-utilities": "^9.0.2",
38
- "@griffel/react": "^1.2.0",
38
+ "@griffel/react": "^1.2.3",
39
39
  "tslib": "^2.1.0"
40
40
  },
41
41
  "peerDependencies": {
@@ -46,7 +46,8 @@
46
46
  },
47
47
  "beachball": {
48
48
  "disallowedChangeTypes": [
49
- "major"
49
+ "major",
50
+ "prerelease"
50
51
  ]
51
52
  },
52
53
  "exports": {