@fluentui/react-input 9.0.0-beta.4 → 9.0.0-beta.7

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 (24) hide show
  1. package/CHANGELOG.json +114 -1
  2. package/CHANGELOG.md +38 -2
  3. package/Spec-styling.md +8 -8
  4. package/dist/react-input.d.ts +8 -7
  5. package/lib/components/Input/Input.types.d.ts +2 -7
  6. package/lib/components/Input/Input.types.js.map +1 -1
  7. package/lib/components/Input/useInput.js +0 -2
  8. package/lib/components/Input/useInput.js.map +1 -1
  9. package/lib/components/Input/useInputStyles.d.ts +6 -1
  10. package/lib/components/Input/useInputStyles.js +55 -39
  11. package/lib/components/Input/useInputStyles.js.map +1 -1
  12. package/lib/index.d.ts +2 -1
  13. package/lib/index.js +2 -1
  14. package/lib/index.js.map +1 -1
  15. package/lib-commonjs/components/Input/Input.types.d.ts +2 -7
  16. package/lib-commonjs/components/Input/useInput.js +0 -2
  17. package/lib-commonjs/components/Input/useInput.js.map +1 -1
  18. package/lib-commonjs/components/Input/useInputStyles.d.ts +6 -1
  19. package/lib-commonjs/components/Input/useInputStyles.js +56 -40
  20. package/lib-commonjs/components/Input/useInputStyles.js.map +1 -1
  21. package/lib-commonjs/index.d.ts +2 -1
  22. package/lib-commonjs/index.js +39 -2
  23. package/lib-commonjs/index.js.map +1 -1
  24. package/package.json +13 -16
package/CHANGELOG.json CHANGED
@@ -2,7 +2,120 @@
2
2
  "name": "@fluentui/react-input",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 01 Mar 2022 02:16:10 GMT",
5
+ "date": "Mon, 25 Apr 2022 09:31:20 GMT",
6
+ "tag": "@fluentui/react-input_v9.0.0-beta.7",
7
+ "version": "9.0.0-beta.7",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "seanmonahan@microsoft.com",
12
+ "package": "@fluentui/react-input",
13
+ "commit": "8dfec41a7126d9d1514d46d6ef15e9316e6b8ee1",
14
+ "comment": "use ::after pseudo element in styles"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Tue, 19 Apr 2022 19:17:25 GMT",
21
+ "tag": "@fluentui/react-input_v9.0.0-beta.6",
22
+ "version": "9.0.0-beta.6",
23
+ "comments": {
24
+ "prerelease": [
25
+ {
26
+ "author": "Humberto.Morimoto@microsoft.com",
27
+ "package": "@fluentui/react-input",
28
+ "commit": "3651218a1e8069fd6fcb095ef5d30139f8c01ff4",
29
+ "comment": "Removing star exports."
30
+ },
31
+ {
32
+ "author": "seanmonahan@microsoft.com",
33
+ "package": "@fluentui/react-input",
34
+ "commit": "43cb8a8072c6f9340296f080c725d2d6c9dfa325",
35
+ "comment": "Update onChange event type"
36
+ },
37
+ {
38
+ "author": "elcraig@microsoft.com",
39
+ "package": "@fluentui/react-input",
40
+ "commit": "3e9421d1cf1545a8ab9fce425f3695e62ac99d73",
41
+ "comment": "BREAKING CHANGE: Remove `inline` prop and use `display: inline-flex` by default"
42
+ },
43
+ {
44
+ "author": "olfedias@microsoft.com",
45
+ "package": "@fluentui/react-input",
46
+ "commit": "e569d6e04d83cbcc6225e61db52ff81d2addd363",
47
+ "comment": "chore: Update Griffel to latest version"
48
+ },
49
+ {
50
+ "author": "seanmonahan@microsoft.com",
51
+ "package": "@fluentui/react-input",
52
+ "commit": "086a675fd0c648944ff4048450190a0a13467de3",
53
+ "comment": "Add static classnames to Input"
54
+ },
55
+ {
56
+ "author": "beachball",
57
+ "package": "@fluentui/react-input",
58
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
59
+ "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
60
+ },
61
+ {
62
+ "author": "beachball",
63
+ "package": "@fluentui/react-input",
64
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
65
+ "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
66
+ },
67
+ {
68
+ "author": "beachball",
69
+ "package": "@fluentui/react-input",
70
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4",
71
+ "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
72
+ }
73
+ ],
74
+ "none": [
75
+ {
76
+ "author": "elcraig@microsoft.com",
77
+ "package": "@fluentui/react-input",
78
+ "commit": "b7f17e976f9e058f39c9fce4f0f9bb6eb4dfa577",
79
+ "comment": "Update React dev deps and hoist them to the repo root"
80
+ },
81
+ {
82
+ "author": "mgodbolt@microsoft.com",
83
+ "package": "@fluentui/react-input",
84
+ "commit": "905e46db07ada986fd7885531f72a71b7bbaabdc",
85
+ "comment": "create v9 api extractor config and set all v9 packags to use it, suppress forgotten export"
86
+ }
87
+ ]
88
+ }
89
+ },
90
+ {
91
+ "date": "Fri, 04 Mar 2022 05:17:37 GMT",
92
+ "tag": "@fluentui/react-input_v9.0.0-beta.5",
93
+ "version": "9.0.0-beta.5",
94
+ "comments": {
95
+ "prerelease": [
96
+ {
97
+ "author": "dzearing@microsoft.com",
98
+ "package": "@fluentui/react-input",
99
+ "commit": "f2f1c0ea948cc3517eeb442c05433eb0918def29",
100
+ "comment": "Adding explicit export maps on all consumer packages for FUIR 8 and 9."
101
+ },
102
+ {
103
+ "author": "beachball",
104
+ "package": "@fluentui/react-input",
105
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.4",
106
+ "commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
107
+ },
108
+ {
109
+ "author": "beachball",
110
+ "package": "@fluentui/react-input",
111
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.5",
112
+ "commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
113
+ }
114
+ ]
115
+ }
116
+ },
117
+ {
118
+ "date": "Tue, 01 Mar 2022 02:17:36 GMT",
6
119
  "tag": "@fluentui/react-input_v9.0.0-beta.4",
7
120
  "version": "9.0.0-beta.4",
8
121
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,48 @@
1
1
  # Change Log - @fluentui/react-input
2
2
 
3
- This log was last generated on Tue, 01 Mar 2022 02:16:10 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 25 Apr 2022 09:31:20 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.7)
8
+
9
+ Mon, 25 Apr 2022 09:31:20 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.6..@fluentui/react-input_v9.0.0-beta.7)
11
+
12
+ ### Changes
13
+
14
+ - use ::after pseudo element in styles ([PR #22591](https://github.com/microsoft/fluentui/pull/22591) by seanmonahan@microsoft.com)
15
+
16
+ ## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.6)
17
+
18
+ Tue, 19 Apr 2022 19:17:25 GMT
19
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.5..@fluentui/react-input_v9.0.0-beta.6)
20
+
21
+ ### Changes
22
+
23
+ - Removing star exports. ([PR #22140](https://github.com/microsoft/fluentui/pull/22140) by Humberto.Morimoto@microsoft.com)
24
+ - Update onChange event type ([PR #22233](https://github.com/microsoft/fluentui/pull/22233) by seanmonahan@microsoft.com)
25
+ - BREAKING CHANGE: Remove `inline` prop and use `display: inline-flex` by default ([PR #21935](https://github.com/microsoft/fluentui/pull/21935) by elcraig@microsoft.com)
26
+ - chore: Update Griffel to latest version ([PR #21976](https://github.com/microsoft/fluentui/pull/21976) by olfedias@microsoft.com)
27
+ - Add static classnames to Input ([PR #21960](https://github.com/microsoft/fluentui/pull/21960) by seanmonahan@microsoft.com)
28
+ - Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
29
+ - Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
30
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
31
+
32
+ ## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.5)
33
+
34
+ Fri, 04 Mar 2022 05:17:37 GMT
35
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.4..@fluentui/react-input_v9.0.0-beta.5)
36
+
37
+ ### Changes
38
+
39
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
40
+ - Bump @fluentui/react-theme to v9.0.0-rc.4 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
41
+ - Bump @fluentui/react-utilities to v9.0.0-rc.5 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
42
+
7
43
  ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.4)
8
44
 
9
- Tue, 01 Mar 2022 02:16:10 GMT
45
+ Tue, 01 Mar 2022 02:17:36 GMT
10
46
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.3..@fluentui/react-input_v9.0.0-beta.4)
11
47
 
12
48
  ### Changes
package/Spec-styling.md CHANGED
@@ -28,14 +28,14 @@ Notes:
28
28
 
29
29
  ### Varying by field size
30
30
 
31
- | Style | Application | small | medium | large |
32
- | ----------------------------- | ------------------------------ | ------------------- | ---------------- | ------------- |
33
- | height | root `minHeight` | 24px | 32px | 40px |
34
- | left/right padding | root | sNudge | mNudge | m |
35
- | left/right padding in content | input | xxs | xxs | sNudge |
36
- | content size | root, input (doesn't inherit) | caption1 (base.200) | body1 (base.300) | base.400 |
37
- | ~~"icon" size~~ | n/a (icons not built in) | ~~16Regular~~ | ~~20Regular~~ | ~~24Regular~~ |
38
- | spacing within root | root `display: flex`, flex gap | xxs | xxs | sNudge |
31
+ | Style | Application | small | medium | large |
32
+ | ----------------------------- | ------------------------------ | ------------------- | ---------------- | --------- |
33
+ | height | root `minHeight` | 24px | 32px | 40px |
34
+ | left/right padding | root | sNudge | mNudge | m |
35
+ | left/right padding in content | input | xxs | xxs | sNudge |
36
+ | content size | root, input (doesn't inherit) | caption1 (base.200) | body1 (base.300) | base.400 |
37
+ | "icon" size | contentBefore/after `> svg` | 16Regular | 20Regular | 24Regular |
38
+ | spacing within root | root `display: flex`, flex gap | xxs | xxs | sNudge |
39
39
 
40
40
  ## Appearance colors and strokes
41
41
 
package/dist/react-input.d.ts CHANGED
@@ -3,14 +3,20 @@ import type { ComponentState } from '@fluentui/react-utilities';
3
3
  import type { ForwardRefComponent } from '@fluentui/react-utilities';
4
4
  import * as React_2 from 'react';
5
5
  import type { Slot } from '@fluentui/react-utilities';
6
+ import type { SlotClassNames } from '@fluentui/react-utilities';
6
7
 
7
8
  /**
8
9
  * The Input component allows people to enter and edit text.
9
10
  */
10
11
  export declare const Input: ForwardRefComponent<InputProps>;
11
12
 
13
+ /**
14
+ * @deprecated Use `inputClassNames.root` instead.
15
+ */
12
16
  export declare const inputClassName = "fui-Input";
13
17
 
18
+ export declare const inputClassNames: SlotClassNames<InputSlots>;
19
+
14
20
  /**
15
21
  * Data passed to the `onChange` callback when a user changes the input's value.
16
22
  */
@@ -27,11 +33,6 @@ export declare type InputProps = Omit<ComponentProps<Partial<InputSlots>, 'input
27
33
  * @default 'medium'
28
34
  */
29
35
  size?: 'small' | 'medium' | 'large';
30
- /**
31
- * If true, the input will have inline display, allowing it be used within text content.
32
- * If false (the default), the input will have block display.
33
- */
34
- inline?: boolean;
35
36
  /**
36
37
  * Controls the colors and borders of the input.
37
38
  * @default 'outline'
@@ -54,7 +55,7 @@ export declare type InputProps = Omit<ComponentProps<Partial<InputSlots>, 'input
54
55
  /**
55
56
  * Called when the user changes the input's value.
56
57
  */
57
- onChange?: (ev: React_2.FormEvent<HTMLInputElement>, data: InputOnChangeData) => void;
58
+ onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void;
58
59
  /**
59
60
  * An input can have different text-based [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types)
60
61
  * based on the type of value the user will enter.
@@ -95,7 +96,7 @@ export declare type InputSlots = {
95
96
  /**
96
97
  * State used in rendering Input.
97
98
  */
98
- export declare type InputState = Required<Pick<InputProps, 'appearance' | 'inline' | 'size'>> & ComponentState<InputSlots>;
99
+ export declare type InputState = Required<Pick<InputProps, 'appearance' | 'size'>> & ComponentState<InputSlots>;
99
100
 
100
101
  /**
101
102
  * Render the final JSX of Input
package/lib/components/Input/Input.types.d.ts CHANGED
@@ -30,11 +30,6 @@ export declare type InputProps = Omit<ComponentProps<Partial<InputSlots>, 'input
30
30
  * @default 'medium'
31
31
  */
32
32
  size?: 'small' | 'medium' | 'large';
33
- /**
34
- * If true, the input will have inline display, allowing it be used within text content.
35
- * If false (the default), the input will have block display.
36
- */
37
- inline?: boolean;
38
33
  /**
39
34
  * Controls the colors and borders of the input.
40
35
  * @default 'outline'
@@ -57,7 +52,7 @@ export declare type InputProps = Omit<ComponentProps<Partial<InputSlots>, 'input
57
52
  /**
58
53
  * Called when the user changes the input's value.
59
54
  */
60
- onChange?: (ev: React.FormEvent<HTMLInputElement>, data: InputOnChangeData) => void;
55
+ onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void;
61
56
  /**
62
57
  * An input can have different text-based [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types)
63
58
  * based on the type of value the user will enter.
@@ -74,7 +69,7 @@ export declare type InputProps = Omit<ComponentProps<Partial<InputSlots>, 'input
74
69
  /**
75
70
  * State used in rendering Input.
76
71
  */
77
- export declare type InputState = Required<Pick<InputProps, 'appearance' | 'inline' | 'size'>> & ComponentState<InputSlots>;
72
+ export declare type InputState = Required<Pick<InputProps, 'appearance' | 'size'>> & ComponentState<InputSlots>;
78
73
  /**
79
74
  * Data passed to the `onChange` callback when a user changes the input's value.
80
75
  */
package/lib/components/Input/Input.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.types.js","sourceRoot":"../src/","sources":["components/Input/Input.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type InputSlots = {\n /**\n * Wrapper element which visually appears to be the input and is used for borders, focus styling, etc.\n * (A wrapper is needed to properly position `contentBefore` and `contentAfter` relative to `input`.)\n *\n * The root slot receives the `className` and `style` specified directly on the `<Input>`.\n * All other top-level native props will be applied to the primary slot, `input`.\n */\n root: NonNullable<Slot<'span'>>;\n\n /**\n * The actual `<input>` element. `type=\"text\"` will be automatically applied unless overridden.\n *\n * This is the \"primary\" slot, so native props specified directly on the `<Input>` will go here\n * (except `className` and `style`, which go to the `root` slot). The top-level `ref` will\n * also go here.\n */\n input: NonNullable<Slot<'input'>>;\n\n /** Element before the input text, within the input border */\n contentBefore?: Slot<'span'>;\n\n /** Element after the input text, within the input border */\n contentAfter?: Slot<'span'>;\n};\n\nexport type InputProps = Omit<\n ComponentProps<Partial<InputSlots>, 'input'>,\n // `children` is unsupported. The rest of these native props have customized definitions.\n 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'\n> & {\n /** Input can't have children. */\n children?: never;\n\n /**\n * Size of the input (changes the font size and spacing).\n * @default 'medium'\n */\n // This name overlaps with the native `size` prop, but that prop isn't very useful in practice\n // (we could add `htmlSize` for the native functionality if someone needs it)\n // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/size\n size?: 'small' | 'medium' | 'large';\n\n /**\n * If true, the input will have inline display, allowing it be used within text content.\n * If false (the default), the input will have block display.\n */\n inline?: boolean;\n\n /**\n * Controls the colors and borders of the input.\n * @default 'outline'\n */\n appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';\n\n /**\n * Default value of the input. Provide this if the input should be an uncontrolled component\n * which tracks its current state internally; otherwise, use `value`.\n *\n * (This prop is mutually exclusive with `value`.)\n */\n defaultValue?: string;\n\n /**\n * Current value of the input. Provide this if the input is a controlled component where you\n * are maintaining its current state; otherwise, use `defaultValue`.\n *\n * (This prop is mutually exclusive with `defaultValue`.)\n */\n value?: string;\n\n /**\n * Called when the user changes the input's value.\n */\n onChange?: (ev: React.FormEvent<HTMLInputElement>, data: InputOnChangeData) => void;\n\n /**\n * An input can have different text-based [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types)\n * based on the type of value the user will enter.\n *\n * Note that no custom styling is currently applied for alternative types, and some types may\n * activate browser-default styling which does not match the Fluent design language.\n *\n * (For non-text-based types such as `button` or `checkbox`, use the appropriate component or an\n * `<input>` element instead.)\n * @default 'text'\n */\n type?:\n | 'text'\n | 'email'\n | 'password'\n | 'search'\n | 'tel'\n | 'url'\n | 'date'\n | 'datetime-local'\n | 'month'\n | 'number'\n | 'time'\n | 'week';\n};\n\n/**\n * State used in rendering Input.\n */\nexport type InputState = Required<Pick<InputProps, 'appearance' | 'inline' | 'size'>> & ComponentState<InputSlots>;\n\n/**\n * Data passed to the `onChange` callback when a user changes the input's value.\n */\nexport type InputOnChangeData = {\n /** Updated input value from the user */\n value: string;\n};\n"]}
1
+ {"version":3,"file":"Input.types.js","sourceRoot":"../src/","sources":["components/Input/Input.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type InputSlots = {\n /**\n * Wrapper element which visually appears to be the input and is used for borders, focus styling, etc.\n * (A wrapper is needed to properly position `contentBefore` and `contentAfter` relative to `input`.)\n *\n * The root slot receives the `className` and `style` specified directly on the `<Input>`.\n * All other top-level native props will be applied to the primary slot, `input`.\n */\n root: NonNullable<Slot<'span'>>;\n\n /**\n * The actual `<input>` element. `type=\"text\"` will be automatically applied unless overridden.\n *\n * This is the \"primary\" slot, so native props specified directly on the `<Input>` will go here\n * (except `className` and `style`, which go to the `root` slot). The top-level `ref` will\n * also go here.\n */\n input: NonNullable<Slot<'input'>>;\n\n /** Element before the input text, within the input border */\n contentBefore?: Slot<'span'>;\n\n /** Element after the input text, within the input border */\n contentAfter?: Slot<'span'>;\n};\n\nexport type InputProps = Omit<\n ComponentProps<Partial<InputSlots>, 'input'>,\n // `children` is unsupported. The rest of these native props have customized definitions.\n 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'\n> & {\n /** Input can't have children. */\n children?: never;\n\n /**\n * Size of the input (changes the font size and spacing).\n * @default 'medium'\n */\n // This name overlaps with the native `size` prop, but that prop isn't very useful in practice\n // (we could add `htmlSize` for the native functionality if someone needs it)\n // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/size\n size?: 'small' | 'medium' | 'large';\n\n /**\n * Controls the colors and borders of the input.\n * @default 'outline'\n */\n appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';\n\n /**\n * Default value of the input. Provide this if the input should be an uncontrolled component\n * which tracks its current state internally; otherwise, use `value`.\n *\n * (This prop is mutually exclusive with `value`.)\n */\n defaultValue?: string;\n\n /**\n * Current value of the input. Provide this if the input is a controlled component where you\n * are maintaining its current state; otherwise, use `defaultValue`.\n *\n * (This prop is mutually exclusive with `defaultValue`.)\n */\n value?: string;\n\n /**\n * Called when the user changes the input's value.\n */\n onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void;\n\n /**\n * An input can have different text-based [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types)\n * based on the type of value the user will enter.\n *\n * Note that no custom styling is currently applied for alternative types, and some types may\n * activate browser-default styling which does not match the Fluent design language.\n *\n * (For non-text-based types such as `button` or `checkbox`, use the appropriate component or an\n * `<input>` element instead.)\n * @default 'text'\n */\n type?:\n | 'text'\n | 'email'\n | 'password'\n | 'search'\n | 'tel'\n | 'url'\n | 'date'\n | 'datetime-local'\n | 'month'\n | 'number'\n | 'time'\n | 'week';\n};\n\n/**\n * State used in rendering Input.\n */\nexport type InputState = Required<Pick<InputProps, 'appearance' | 'size'>> & ComponentState<InputSlots>;\n\n/**\n * Data passed to the `onChange` callback when a user changes the input's value.\n */\nexport type InputOnChangeData = {\n /** Updated input value from the user */\n value: string;\n};\n"]}
package/lib/components/Input/useInput.js CHANGED
@@ -13,7 +13,6 @@ export const useInput_unstable = (props, ref) => {
13
13
  const {
14
14
  size = 'medium',
15
15
  appearance = 'outline',
16
- inline = false,
17
16
  onChange
18
17
  } = props;
19
18
  const [value, setValue] = useControllableState({
@@ -29,7 +28,6 @@ export const useInput_unstable = (props, ref) => {
29
28
  const state = {
30
29
  size,
31
30
  appearance,
32
- inline,
33
31
  components: {
34
32
  root: 'span',
35
33
  input: 'input',
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;AACnG,QAAM;AAAE,IAAA,IAAI,GAAG,QAAT;AAAmB,IAAA,UAAU,GAAG,SAAhC;AAA2C,IAAA,MAAM,GAAG,KAApD;AAA2D,IAAA;AAA3D,MAAwE,KAA9E;AAEA,QAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,oBAAoB,CAAC;AAC7C,IAAA,KAAK,EAAE,KAAK,CAAC,KADgC;AAE7C,IAAA,YAAY,EAAE,KAAK,CAAC,YAFyB;AAG7C,IAAA,YAAY,EAAE;AAH+B,GAAD,CAA9C;AAMA,QAAM,WAAW,GAAG,yBAAyB,CAAC;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,MAAD,EAAS,UAAT,EAAqB,OAArB,EAA8B,cAA9B;AAHyB,GAAD,CAA7C;AAMA,QAAM,KAAK,GAAe;AACxB,IAAA,IADwB;AAExB,IAAA,UAFwB;AAGxB,IAAA,MAHwB;AAIxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,MADI;AAEV,MAAA,KAAK,EAAE,OAFG;AAGV,MAAA,aAAa,EAAE,MAHL;AAIV,MAAA,YAAY,EAAE;AAJJ,KAJY;AAUxB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;AACnC,MAAA,QAAQ,EAAE,IADyB;AAEnC,MAAA,YAAY,EAAE;AACZ,QAAA,IAAI,EAAE,MADM;AAEZ,QAAA,GAFY;AAGZ,WAAG,WAAW,CAAC;AAHH;AAFqB,KAAd,CAVC;AAkBxB,IAAA,YAAY,EAAE,gBAAgB,CAAC,KAAK,CAAC,YAAP,CAlBN;AAmBxB,IAAA,aAAa,EAAE,gBAAgB,CAAC,KAAK,CAAC,aAAP,CAnBP;AAoBxB,IAAA,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;AACjC,MAAA,QAAQ,EAAE,IADuB;AAEjC,MAAA,YAAY,EAAE,WAAW,CAAC;AAFO,KAAb;AApBE,GAA1B;AA0BA,EAAA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,KAApB;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,gBAAgB,CAAC,EAAE,IAAG;AAC3C,UAAM,QAAQ,GAAG,EAAE,CAAC,MAAH,CAAU,KAA3B;AACA,IAAA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;AAAE,MAAA,KAAK,EAAE;AAAT,KAAP,CAAR;AACA,IAAA,QAAQ,CAAC,QAAD,CAAR;AACD,GAJsC,CAAvC;AAMA,SAAO,KAAP;AACD,CAjDM","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', inline = false, 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 inline,\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;AACnG,QAAM;AAAE,IAAA,IAAI,GAAG,QAAT;AAAmB,IAAA,UAAU,GAAG,SAAhC;AAA2C,IAAA;AAA3C,MAAwD,KAA9D;AAEA,QAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,oBAAoB,CAAC;AAC7C,IAAA,KAAK,EAAE,KAAK,CAAC,KADgC;AAE7C,IAAA,YAAY,EAAE,KAAK,CAAC,YAFyB;AAG7C,IAAA,YAAY,EAAE;AAH+B,GAAD,CAA9C;AAMA,QAAM,WAAW,GAAG,yBAAyB,CAAC;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,MAAD,EAAS,UAAT,EAAqB,OAArB,EAA8B,cAA9B;AAHyB,GAAD,CAA7C;AAMA,QAAM,KAAK,GAAe;AACxB,IAAA,IADwB;AAExB,IAAA,UAFwB;AAGxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,MADI;AAEV,MAAA,KAAK,EAAE,OAFG;AAGV,MAAA,aAAa,EAAE,MAHL;AAIV,MAAA,YAAY,EAAE;AAJJ,KAHY;AASxB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;AACnC,MAAA,QAAQ,EAAE,IADyB;AAEnC,MAAA,YAAY,EAAE;AACZ,QAAA,IAAI,EAAE,MADM;AAEZ,QAAA,GAFY;AAGZ,WAAG,WAAW,CAAC;AAHH;AAFqB,KAAd,CATC;AAiBxB,IAAA,YAAY,EAAE,gBAAgB,CAAC,KAAK,CAAC,YAAP,CAjBN;AAkBxB,IAAA,aAAa,EAAE,gBAAgB,CAAC,KAAK,CAAC,aAAP,CAlBP;AAmBxB,IAAA,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;AACjC,MAAA,QAAQ,EAAE,IADuB;AAEjC,MAAA,YAAY,EAAE,WAAW,CAAC;AAFO,KAAb;AAnBE,GAA1B;AAyBA,EAAA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,KAApB;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,gBAAgB,CAAC,EAAE,IAAG;AAC3C,UAAM,QAAQ,GAAG,EAAE,CAAC,MAAH,CAAU,KAA3B;AACA,IAAA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;AAAE,MAAA,KAAK,EAAE;AAAT,KAAP,CAAR;AACA,IAAA,QAAQ,CAAC,QAAD,CAAR;AACD,GAJsC,CAAvC;AAMA,SAAO,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/"}
package/lib/components/Input/useInputStyles.d.ts CHANGED
@@ -1,5 +1,10 @@
1
- import type { InputState } from './Input.types';
1
+ import type { InputSlots, InputState } from './Input.types';
2
+ import type { SlotClassNames } from '@fluentui/react-utilities';
3
+ /**
4
+ * @deprecated Use `inputClassNames.root` instead.
5
+ */
2
6
  export declare const inputClassName = "fui-Input";
7
+ export declare const inputClassNames: SlotClassNames<InputSlots>;
3
8
  /**
4
9
  * Apply styling to the Input slots based on the state
5
10
  */
package/lib/components/Input/useInputStyles.js CHANGED
@@ -1,6 +1,16 @@
1
1
  import { __styles, mergeClasses, shorthands } from '@griffel/react';
2
2
  import { tokens } from '@fluentui/react-theme';
3
- export const inputClassName = 'fui-Input'; // TODO(sharing) use theme values once available
3
+ /**
4
+ * @deprecated Use `inputClassNames.root` instead.
5
+ */
6
+
7
+ export const inputClassName = 'fui-Input';
8
+ export const inputClassNames = {
9
+ root: 'fui-Input',
10
+ input: 'fui-Input__input',
11
+ contentBefore: 'fui-Input__contentBefore',
12
+ contentAfter: 'fui-Input__contentAfter'
13
+ }; // TODO(sharing) use theme values once available
4
14
 
5
15
  const horizontalSpacing = {
6
16
  xxs: '2px',
@@ -42,7 +52,7 @@ const fieldHeights = {
42
52
 
43
53
  const useRootStyles = /*#__PURE__*/__styles({
44
54
  "base": {
45
- "mc9l5x": "f22iagw",
55
+ "mc9l5x": "ftuwxu6",
46
56
  "Bt984gj": "f122n59",
47
57
  "Eh141a": "flvyvdh",
48
58
  "i8kkvl": "f16mnhsx",
@@ -56,28 +66,28 @@ const useRootStyles = /*#__PURE__*/__styles({
56
66
  "B7ck84d": "f1ewtqcl"
57
67
  },
58
68
  "interactive": {
59
- "oqd9ik": "ffdc0f3",
60
- "Bs6t6z0": "fqc6z8f",
61
- "Hdbjpj": "f11ef69",
62
- "jc51t6": ["f383sj6", "fpmdmpy"],
63
- "Bj55yzk": "fqmzrrm",
64
- "cnmfks": ["fpmdmpy", "f383sj6"],
65
- "mpb1vu": "f1iv82i4",
66
- "B9nohqn": ["f1j2a01o", "fvxed1z"],
67
- "frdscb": ["fvxed1z", "f1j2a01o"],
68
- "B3zxwmv": "f1gw3il9",
69
- "J4s2b0": "fd0py6g",
70
- "Bk8j60v": "f1ta67ae",
71
- "B5pt6m4": "fabrkco",
72
- "xn0juu": "f1lmmjng",
73
- "wbfbqe": "fopw4to",
74
- "mafdb0": "f1dw3w9y",
75
- "s1xtto": "f1n2ytmg",
76
- "Hbcoss": "fnqdfvx",
77
- "lq1u8j": "fbqc2tv",
78
- "B37x0ls": "fvvig05",
79
- "H8rp7s": "f1nwpqpa",
80
- "uvoyur": "f1e6xsgv",
69
+ "li1rpt": "f1gw3sf2",
70
+ "Bsft5z2": "f13zj6fq",
71
+ "E3zdtr": "f1mdlcz9",
72
+ "Eqx8gd": ["f1a7op3", "f1cjjd47"],
73
+ "By385i5": "f1gboi2j",
74
+ "B1piin3": ["f1cjjd47", "f1a7op3"],
75
+ "Dlnsje": "f145g4dw",
76
+ "d9w3h3": ["f1kp91vd", "f1ibwz09"],
77
+ "B3778ie": ["f1ibwz09", "f1kp91vd"],
78
+ "Bcgy8vk": "f1cb6c3",
79
+ "Bw17bha": "f1lh990p",
80
+ "B1q35kw": "f1jc6hxc",
81
+ "Gjdm7m": "f13evtba",
82
+ "b1kco5": "f1yk9hq",
83
+ "Ba2ppi3": "fhwpy7i",
84
+ "F2fol1": "fh0z7ck",
85
+ "lck23g": "f117tx5t",
86
+ "umuwi5": "fjw5xc1",
87
+ "Blcqepd": "f1xdyd5c",
88
+ "nplu4u": "f1b9wyyr",
89
+ "Bioka5o": "f15goup",
90
+ "Bercvud": "f1ibeo51",
81
91
  "Bbr2w1p": "f14a1fxs",
82
92
  "Bduesf4": "f3e99gv",
83
93
  "Bpq79vn": "fhljsf7"
@@ -111,9 +121,6 @@ const useRootStyles = /*#__PURE__*/__styles({
111
121
  "i8kkvl": "fgfbwa2",
112
122
  "Belr9w4": "f1y3hx6l"
113
123
  },
114
- "inline": {
115
- "mc9l5x": "ftuwxu6"
116
- },
117
124
  "outline": {
118
125
  "De3pzq": "fxugw4r",
119
126
  "B4j52fo": "f5ogflp",
@@ -152,10 +159,10 @@ const useRootStyles = /*#__PURE__*/__styles({
152
159
  "underlineInteractive": {
153
160
  "oetu4i": "f1l4zc64",
154
161
  "Be8ivqh": "f1klwx88",
155
- "frdscb": ["fqvcdsd", "f9cg6ix"],
156
- "B9nohqn": ["f9cg6ix", "fqvcdsd"],
157
- "B1dhsta": ["f1pvm60u", "f179ivkp"],
158
- "Bjdmjzx": ["f179ivkp", "f1pvm60u"]
162
+ "B3778ie": ["f1nf3wye", "feulmo5"],
163
+ "d9w3h3": ["feulmo5", "f1nf3wye"],
164
+ "Bl18szs": ["f18vqdqu", "f53nyzz"],
165
+ "B4j8arr": ["f53nyzz", "f18vqdqu"]
159
166
  },
160
167
  "filled": {
161
168
  "E5pizo": "fyed02w",
@@ -209,8 +216,8 @@ const useRootStyles = /*#__PURE__*/__styles({
209
216
  "n51gp8": ["f14g86mu", "f1rvyvqg"]
210
217
  }
211
218
  }, {
212
- "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".fbi42co{row-gap:2px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".f11ef69:after{position:absolute;}", ".f383sj6:after{left:-1px;}", ".fpmdmpy:after{right:-1px;}", ".fqmzrrm:after{bottom:-1px;}", ".f1iv82i4:after{height:max(2px, var(--borderRadiusMedium));}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1gw3il9:after{border-bottom-width:2px;}", ".fd0py6g:after{border-bottom-style:solid;}", ".f1ta67ae:after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".fabrkco:after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1lmmjng:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fopw4to:after{transition-property:transform;}", ".f1dw3w9y:after{transition-duration:0.05s;}", ".f1n2ytmg:after{transition-delay:cubic-bezier(0.7,0,1,0.5);}", ".f1pha7fy{min-height:24px;}", ".f1g0x7ka{padding-top:0;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1qch9an{padding-bottom:0;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1nxs5xn{min-height:32px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1w5jphr{min-height:40px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fgfbwa2{-webkit-column-gap:6px;column-gap:6px;}", ".f1y3hx6l{row-gap:6px;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".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;}", ".fqvcdsd:after{border-bottom-right-radius:0;}", ".f9cg6ix:after{border-bottom-left-radius:0;}", ".f1pvm60u:after{border-top-right-radius:0;}", ".f179ivkp: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);}"],
213
- "w": [".fnqdfvx:focus-within:after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".fbqc2tv:focus-within:after{transition-property:transform;}", ".fvvig05:focus-within:after{transition-duration:0.2s;}", ".f1nwpqpa:focus-within:after{transition-delay:cubic-bezier(0.1,0.9,0.2,1);}", ".f1e6xsgv: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;}"],
219
+ "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".fbi42co{row-gap:2px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1cb6c3::after{border-bottom-width:2px;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".fh0z7ck::after{transition-duration:0.05s;}", ".f117tx5t::after{transition-delay:cubic-bezier(0.7,0,1,0.5);}", ".f1pha7fy{min-height:24px;}", ".f1g0x7ka{padding-top:0;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1qch9an{padding-bottom:0;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1nxs5xn{min-height:32px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1w5jphr{min-height:40px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fgfbwa2{-webkit-column-gap:6px;column-gap:6px;}", ".f1y3hx6l{row-gap:6px;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1nf3wye::after{border-bottom-right-radius:0;}", ".feulmo5::after{border-bottom-left-radius:0;}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".fyed02w{box-shadow:var(--shadow2);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
220
+ "w": [".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".f1b9wyyr:focus-within::after{transition-duration:0.2s;}", ".f15goup:focus-within::after{transition-delay:cubic-bezier(0.1,0.9,0.2,1);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}"],
214
221
  "h": [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".ftmjh5b:hover,.ftmjh5b:focus-within{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,.f17blpuu:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}"],
215
222
  "a": [".f8vnjqi:active,.f8vnjqi:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,.fz1etlk:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1hc16gm:active,:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1klwx88:active,.f1klwx88:focus-within{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1hc16gm:active,.f1hc16gm:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}"],
216
223
  "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;}}"]
@@ -270,9 +277,18 @@ const useContentStyles = /*#__PURE__*/__styles({
270
277
  },
271
278
  "disabled": {
272
279
  "sj55zd": "f1s2aq7o"
280
+ },
281
+ "small": {
282
+ "kwki1k": "f3u2cy0"
283
+ },
284
+ "medium": {
285
+ "kwki1k": "f1oqplr0"
286
+ },
287
+ "large": {
288
+ "kwki1k": "fa420co"
273
289
  }
274
290
  }, {
275
- "d": [".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fyuhxbn>svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"]
291
+ "d": [".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fyuhxbn>svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f3u2cy0>svg{font-size:16px;}", ".f1oqplr0>svg{font-size:20px;}", ".fa420co>svg{font-size:24px;}"]
276
292
  });
277
293
  /**
278
294
  * Apply styling to the Input slots based on the state
@@ -289,16 +305,16 @@ export const useInputStyles_unstable = state => {
289
305
  const rootStyles = useRootStyles();
290
306
  const inputStyles = useInputElementStyles();
291
307
  const contentStyles = useContentStyles();
292
- state.root.className = mergeClasses(inputClassName, rootStyles.base, rootStyles[size], rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, state.inline && rootStyles.inline, filled && rootStyles.filled, disabled && rootStyles.disabled, state.root.className);
293
- state.input.className = mergeClasses(inputStyles.base, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
294
- const contentClasses = [contentStyles.base, disabled && contentStyles.disabled];
308
+ state.root.className = mergeClasses(inputClassNames.root, rootStyles.base, rootStyles[size], rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, disabled && rootStyles.disabled, state.root.className);
309
+ state.input.className = mergeClasses(inputClassNames.input, inputStyles.base, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
310
+ const contentClasses = [contentStyles.base, disabled && contentStyles.disabled, contentStyles[size]];
295
311
 
296
312
  if (state.contentBefore) {
297
- state.contentBefore.className = mergeClasses(...contentClasses, state.contentBefore.className);
313
+ state.contentBefore.className = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
298
314
  }
299
315
 
300
316
  if (state.contentAfter) {
301
- state.contentAfter.className = mergeClasses(...contentClasses, state.contentAfter.className);
317
+ state.contentAfter.className = mergeClasses(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
302
318
  }
303
319
 
304
320
  return state;
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 } from '@fluentui/react-theme';\nimport type { InputState } from './Input.types';\n\nexport const inputClassName = 'fui-Input';\n\n// TODO(sharing) use theme values once available\nconst horizontalSpacing = {\n xxs: '2px',\n xs: '4px',\n sNudge: '6px',\n s: '8px',\n mNudge: '10px',\n m: '12px',\n};\nconst motionDurations = {\n ultraFast: '0.05s',\n normal: '0.2s',\n};\nconst motionCurves = {\n accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',\n decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)',\n};\nconst contentSizes = {\n // TODO(sharing) shouldn't these be in the theme?\n body1: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n caption1: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n flexWrap: 'nowrap',\n ...shorthands.gap(horizontalSpacing.xxs),\n fontFamily: tokens.fontFamilyBase,\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // used for all but underline\n position: 'relative',\n boxSizing: 'border-box',\n },\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n ':after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n ...shorthands.borderBottom('2px', 'solid', tokens.colorCompoundBrandStroke),\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: motionDurations.ultraFast,\n transitionDelay: motionCurves.accelerateMid,\n },\n ':focus-within:after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: motionDurations.normal,\n transitionDelay: motionCurves.decelerateMid,\n },\n ':focus-within:active:after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n small: {\n minHeight: fieldHeights.small,\n ...shorthands.padding('0', horizontalSpacing.sNudge),\n ...contentSizes.caption1,\n },\n medium: {\n minHeight: fieldHeights.medium,\n ...shorthands.padding('0', horizontalSpacing.mNudge),\n ...contentSizes.body1,\n },\n large: {\n minHeight: fieldHeights.large,\n ...shorthands.padding('0', horizontalSpacing.m),\n ...contentSizes[400],\n ...shorthands.gap(horizontalSpacing.sNudge),\n },\n inline: {\n display: 'inline-flex',\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n ':hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderRadius(0), // corners look strange if rounded\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n },\n underlineInteractive: {\n ':hover': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n ':after': shorthands.borderRadius(0), // remove rounded corners from focus underline\n },\n filled: {\n boxShadow: tokens.shadow2, // optional shadow for filled appearances\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filledDarker: {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n filledLighter: {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n});\n\nconst useInputElementStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n flexGrow: 1,\n minWidth: 0, // required to make the input shrink to fit the wrapper\n ...shorthands.borderStyle('none'), // input itself never has a border (this is handled by inputWrapper)\n ...shorthands.padding('0', horizontalSpacing.xxs),\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1, // browser style override\n },\n ':focus-visible': {\n outlineStyle: 'none', // disable default browser outline\n },\n },\n small: {\n // This is set on root but doesn't inherit\n ...contentSizes.caption1,\n },\n medium: {\n ...contentSizes.body1,\n },\n large: {\n ...contentSizes[400],\n ...shorthands.padding('0', horizontalSpacing.sNudge),\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useContentStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n // special case styling for icons (most common case) to ensure they're centered vertically\n '> svg': { display: 'block' },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n});\n\n/**\n * Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = (state: InputState): InputState => {\n const { size, appearance } = state;\n const disabled = state.input.disabled;\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const inputStyles = useInputElementStyles();\n const contentStyles = useContentStyles();\n\n state.root.className = mergeClasses(\n inputClassName,\n rootStyles.base,\n rootStyles[size],\n rootStyles[appearance],\n !disabled && rootStyles.interactive,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n state.inline && rootStyles.inline,\n filled && rootStyles.filled,\n disabled && rootStyles.disabled,\n state.root.className,\n );\n\n state.input.className = mergeClasses(\n inputStyles.base,\n inputStyles[size],\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n const contentClasses = [contentStyles.base, disabled && contentStyles.disabled];\n if (state.contentBefore) {\n state.contentBefore.className = mergeClasses(...contentClasses, state.contentBefore.className);\n }\n if (state.contentAfter) {\n state.contentAfter.className = mergeClasses(...contentClasses, state.contentAfter.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Input/useInputStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { InputSlots, InputState } from './Input.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `inputClassNames.root` instead.\n */\nexport const inputClassName = 'fui-Input';\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n root: 'fui-Input',\n input: 'fui-Input__input',\n contentBefore: 'fui-Input__contentBefore',\n contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) use theme values once available\nconst horizontalSpacing = {\n xxs: '2px',\n xs: '4px',\n sNudge: '6px',\n s: '8px',\n mNudge: '10px',\n m: '12px',\n};\nconst motionDurations = {\n ultraFast: '0.05s',\n normal: '0.2s',\n};\nconst motionCurves = {\n accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',\n decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)',\n};\nconst contentSizes = {\n // TODO(sharing) shouldn't these be in the theme?\n body1: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n caption1: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n alignItems: 'center',\n flexWrap: 'nowrap',\n ...shorthands.gap(horizontalSpacing.xxs),\n fontFamily: tokens.fontFamilyBase,\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // used for all but underline\n position: 'relative',\n boxSizing: 'border-box',\n },\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n ...shorthands.borderBottom('2px', 'solid', tokens.colorCompoundBrandStroke),\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: motionDurations.ultraFast,\n transitionDelay: motionCurves.accelerateMid,\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: motionDurations.normal,\n transitionDelay: motionCurves.decelerateMid,\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n small: {\n minHeight: fieldHeights.small,\n ...shorthands.padding('0', horizontalSpacing.sNudge),\n ...contentSizes.caption1,\n },\n medium: {\n minHeight: fieldHeights.medium,\n ...shorthands.padding('0', horizontalSpacing.mNudge),\n ...contentSizes.body1,\n },\n large: {\n minHeight: fieldHeights.large,\n ...shorthands.padding('0', horizontalSpacing.m),\n ...contentSizes[400],\n ...shorthands.gap(horizontalSpacing.sNudge),\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n ':hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderRadius(0), // corners look strange if rounded\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n },\n underlineInteractive: {\n ':hover': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n '::after': shorthands.borderRadius(0), // remove rounded corners from focus underline\n },\n filled: {\n boxShadow: tokens.shadow2, // optional shadow for filled appearances\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filledDarker: {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n filledLighter: {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n});\n\nconst useInputElementStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n flexGrow: 1,\n minWidth: 0, // required to make the input shrink to fit the wrapper\n ...shorthands.borderStyle('none'), // input itself never has a border (this is handled by inputWrapper)\n ...shorthands.padding('0', horizontalSpacing.xxs),\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1, // browser style override\n },\n ':focus-visible': {\n outlineStyle: 'none', // disable default browser outline\n },\n },\n small: {\n // This is set on root but doesn't inherit\n ...contentSizes.caption1,\n },\n medium: {\n ...contentSizes.body1,\n },\n large: {\n ...contentSizes[400],\n ...shorthands.padding('0', horizontalSpacing.sNudge),\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useContentStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n // special case styling for icons (most common case) to ensure they're centered vertically\n '> svg': { display: 'block' },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': { fontSize: '16px' },\n },\n medium: {\n '> svg': { fontSize: '20px' },\n },\n large: {\n '> svg': { fontSize: '24px' },\n },\n});\n\n/**\n * Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = (state: InputState): InputState => {\n const { size, appearance } = state;\n const disabled = state.input.disabled;\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const inputStyles = useInputElementStyles();\n const contentStyles = useContentStyles();\n\n state.root.className = mergeClasses(\n inputClassNames.root,\n rootStyles.base,\n rootStyles[size],\n rootStyles[appearance],\n !disabled && rootStyles.interactive,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n filled && rootStyles.filled,\n disabled && rootStyles.disabled,\n state.root.className,\n );\n\n state.input.className = mergeClasses(\n inputClassNames.input,\n inputStyles.base,\n inputStyles[size],\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n const contentClasses = [contentStyles.base, disabled && contentStyles.disabled, contentStyles[size]];\n if (state.contentBefore) {\n state.contentBefore.className = mergeClasses(\n inputClassNames.contentBefore,\n ...contentClasses,\n state.contentBefore.className,\n );\n }\n if (state.contentAfter) {\n state.contentAfter.className = mergeClasses(\n inputClassNames.contentAfter,\n ...contentClasses,\n state.contentAfter.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib/index.d.ts CHANGED
@@ -1 +1,2 @@
1
- export * from './Input';
1
+ export { Input, inputClassName, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable, } from './Input';
2
+ export type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';
package/lib/index.js CHANGED
@@ -1,2 +1,3 @@
1
- export * from './Input';
1
+ export { Input, // eslint-disable-next-line deprecation/deprecation
2
+ inputClassName, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';
2
3
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC","sourcesContent":["export * from './Input';\n"]}
1
+ {"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,KADF,EAEE;AACA,cAHF,EAIE,eAJF,EAKE,oBALF,EAME,uBANF,EAOE,iBAPF,QAQO,SARP","sourcesContent":["export {\n Input,\n // eslint-disable-next-line deprecation/deprecation\n inputClassName,\n inputClassNames,\n renderInput_unstable,\n useInputStyles_unstable,\n useInput_unstable,\n} from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Input/Input.types.d.ts CHANGED
@@ -30,11 +30,6 @@ export declare type InputProps = Omit<ComponentProps<Partial<InputSlots>, 'input
30
30
  * @default 'medium'
31
31
  */
32
32
  size?: 'small' | 'medium' | 'large';
33
- /**
34
- * If true, the input will have inline display, allowing it be used within text content.
35
- * If false (the default), the input will have block display.
36
- */
37
- inline?: boolean;
38
33
  /**
39
34
  * Controls the colors and borders of the input.
40
35
  * @default 'outline'
@@ -57,7 +52,7 @@ export declare type InputProps = Omit<ComponentProps<Partial<InputSlots>, 'input
57
52
  /**
58
53
  * Called when the user changes the input's value.
59
54
  */
60
- onChange?: (ev: React.FormEvent<HTMLInputElement>, data: InputOnChangeData) => void;
55
+ onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void;
61
56
  /**
62
57
  * An input can have different text-based [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types)
63
58
  * based on the type of value the user will enter.
@@ -74,7 +69,7 @@ export declare type InputProps = Omit<ComponentProps<Partial<InputSlots>, 'input
74
69
  /**
75
70
  * State used in rendering Input.
76
71
  */
77
- export declare type InputState = Required<Pick<InputProps, 'appearance' | 'inline' | 'size'>> & ComponentState<InputSlots>;
72
+ export declare type InputState = Required<Pick<InputProps, 'appearance' | 'size'>> & ComponentState<InputSlots>;
78
73
  /**
79
74
  * Data passed to the `onChange` callback when a user changes the input's value.
80
75
  */
package/lib-commonjs/components/Input/useInput.js CHANGED
@@ -21,7 +21,6 @@ const useInput_unstable = (props, ref) => {
21
21
  const {
22
22
  size = 'medium',
23
23
  appearance = 'outline',
24
- inline = false,
25
24
  onChange
26
25
  } = props;
27
26
  const [value, setValue] = react_utilities_1.useControllableState({
@@ -37,7 +36,6 @@ const useInput_unstable = (props, ref) => {
37
36
  const state = {
38
37
  size,
39
38
  appearance,
40
- inline,
41
39
  components: {
42
40
  root: 'span',
43
41
  input: 'input',
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;AACnG,QAAM;AAAE,IAAA,IAAI,GAAG,QAAT;AAAmB,IAAA,UAAU,GAAG,SAAhC;AAA2C,IAAA,MAAM,GAAG,KAApD;AAA2D,IAAA;AAA3D,MAAwE,KAA9E;AAEA,QAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,iBAAA,CAAA,oBAAA,CAAqB;AAC7C,IAAA,KAAK,EAAE,KAAK,CAAC,KADgC;AAE7C,IAAA,YAAY,EAAE,KAAK,CAAC,YAFyB;AAG7C,IAAA,YAAY,EAAE;AAH+B,GAArB,CAA1B;AAMA,QAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,MAAD,EAAS,UAAT,EAAqB,OAArB,EAA8B,cAA9B;AAHyB,GAA1B,CAApB;AAMA,QAAM,KAAK,GAAe;AACxB,IAAA,IADwB;AAExB,IAAA,UAFwB;AAGxB,IAAA,MAHwB;AAIxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,MADI;AAEV,MAAA,KAAK,EAAE,OAFG;AAGV,MAAA,aAAa,EAAE,MAHL;AAIV,MAAA,YAAY,EAAE;AAJJ,KAJY;AAUxB,IAAA,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;AACnC,MAAA,QAAQ,EAAE,IADyB;AAEnC,MAAA,YAAY,EAAE;AACZ,QAAA,IAAI,EAAE,MADM;AAEZ,QAAA,GAFY;AAGZ,WAAG,WAAW,CAAC;AAHH;AAFqB,KAA9B,CAViB;AAkBxB,IAAA,YAAY,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,YAAvB,CAlBU;AAmBxB,IAAA,aAAa,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,aAAvB,CAnBS;AAoBxB,IAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;AACjC,MAAA,QAAQ,EAAE,IADuB;AAEjC,MAAA,YAAY,EAAE,WAAW,CAAC;AAFO,KAA7B;AApBkB,GAA1B;AA0BA,EAAA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,KAApB;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,iBAAA,CAAA,gBAAA,CAAiB,EAAE,IAAG;AAC3C,UAAM,QAAQ,GAAG,EAAE,CAAC,MAAH,CAAU,KAA3B;AACA,IAAA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;AAAE,MAAA,KAAK,EAAE;AAAT,KAAP,CAAR;AACA,IAAA,QAAQ,CAAC,QAAD,CAAR;AACD,GAJsB,CAAvB;AAMA,SAAO,KAAP;AACD,CAjDM;;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', inline = false, 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 inline,\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;AACnG,QAAM;AAAE,IAAA,IAAI,GAAG,QAAT;AAAmB,IAAA,UAAU,GAAG,SAAhC;AAA2C,IAAA;AAA3C,MAAwD,KAA9D;AAEA,QAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,iBAAA,CAAA,oBAAA,CAAqB;AAC7C,IAAA,KAAK,EAAE,KAAK,CAAC,KADgC;AAE7C,IAAA,YAAY,EAAE,KAAK,CAAC,YAFyB;AAG7C,IAAA,YAAY,EAAE;AAH+B,GAArB,CAA1B;AAMA,QAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,MAAD,EAAS,UAAT,EAAqB,OAArB,EAA8B,cAA9B;AAHyB,GAA1B,CAApB;AAMA,QAAM,KAAK,GAAe;AACxB,IAAA,IADwB;AAExB,IAAA,UAFwB;AAGxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,MADI;AAEV,MAAA,KAAK,EAAE,OAFG;AAGV,MAAA,aAAa,EAAE,MAHL;AAIV,MAAA,YAAY,EAAE;AAJJ,KAHY;AASxB,IAAA,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;AACnC,MAAA,QAAQ,EAAE,IADyB;AAEnC,MAAA,YAAY,EAAE;AACZ,QAAA,IAAI,EAAE,MADM;AAEZ,QAAA,GAFY;AAGZ,WAAG,WAAW,CAAC;AAHH;AAFqB,KAA9B,CATiB;AAiBxB,IAAA,YAAY,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,YAAvB,CAjBU;AAkBxB,IAAA,aAAa,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,aAAvB,CAlBS;AAmBxB,IAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;AACjC,MAAA,QAAQ,EAAE,IADuB;AAEjC,MAAA,YAAY,EAAE,WAAW,CAAC;AAFO,KAA7B;AAnBkB,GAA1B;AAyBA,EAAA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,KAApB;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,iBAAA,CAAA,gBAAA,CAAiB,EAAE,IAAG;AAC3C,UAAM,QAAQ,GAAG,EAAE,CAAC,MAAH,CAAU,KAA3B;AACA,IAAA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;AAAE,MAAA,KAAK,EAAE;AAAT,KAAP,CAAR;AACA,IAAA,QAAQ,CAAC,QAAD,CAAR;AACD,GAJsB,CAAvB;AAMA,SAAO,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/"}
package/lib-commonjs/components/Input/useInputStyles.d.ts CHANGED
@@ -1,5 +1,10 @@
1
- import type { InputState } from './Input.types';
1
+ import type { InputSlots, InputState } from './Input.types';
2
+ import type { SlotClassNames } from '@fluentui/react-utilities';
3
+ /**
4
+ * @deprecated Use `inputClassNames.root` instead.
5
+ */
2
6
  export declare const inputClassName = "fui-Input";
7
+ export declare const inputClassNames: SlotClassNames<InputSlots>;
3
8
  /**
4
9
  * Apply styling to the Input slots based on the state
5
10
  */
package/lib-commonjs/components/Input/useInputStyles.js CHANGED
@@ -3,13 +3,23 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useInputStyles_unstable = exports.inputClassName = void 0;
6
+ exports.useInputStyles_unstable = exports.inputClassNames = exports.inputClassName = void 0;
7
7
 
8
8
  const react_1 = /*#__PURE__*/require("@griffel/react");
9
9
 
10
10
  const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
11
+ /**
12
+ * @deprecated Use `inputClassNames.root` instead.
13
+ */
14
+
11
15
 
12
- exports.inputClassName = 'fui-Input'; // TODO(sharing) use theme values once available
16
+ exports.inputClassName = 'fui-Input';
17
+ exports.inputClassNames = {
18
+ root: 'fui-Input',
19
+ input: 'fui-Input__input',
20
+ contentBefore: 'fui-Input__contentBefore',
21
+ contentAfter: 'fui-Input__contentAfter'
22
+ }; // TODO(sharing) use theme values once available
13
23
 
14
24
  const horizontalSpacing = {
15
25
  xxs: '2px',
@@ -51,7 +61,7 @@ const fieldHeights = {
51
61
 
52
62
  const useRootStyles = /*#__PURE__*/react_1.__styles({
53
63
  "base": {
54
- "mc9l5x": "f22iagw",
64
+ "mc9l5x": "ftuwxu6",
55
65
  "Bt984gj": "f122n59",
56
66
  "Eh141a": "flvyvdh",
57
67
  "i8kkvl": "f16mnhsx",
@@ -65,28 +75,28 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
65
75
  "B7ck84d": "f1ewtqcl"
66
76
  },
67
77
  "interactive": {
68
- "oqd9ik": "ffdc0f3",
69
- "Bs6t6z0": "fqc6z8f",
70
- "Hdbjpj": "f11ef69",
71
- "jc51t6": ["f383sj6", "fpmdmpy"],
72
- "Bj55yzk": "fqmzrrm",
73
- "cnmfks": ["fpmdmpy", "f383sj6"],
74
- "mpb1vu": "f1iv82i4",
75
- "B9nohqn": ["f1j2a01o", "fvxed1z"],
76
- "frdscb": ["fvxed1z", "f1j2a01o"],
77
- "B3zxwmv": "f1gw3il9",
78
- "J4s2b0": "fd0py6g",
79
- "Bk8j60v": "f1ta67ae",
80
- "B5pt6m4": "fabrkco",
81
- "xn0juu": "f1lmmjng",
82
- "wbfbqe": "fopw4to",
83
- "mafdb0": "f1dw3w9y",
84
- "s1xtto": "f1n2ytmg",
85
- "Hbcoss": "fnqdfvx",
86
- "lq1u8j": "fbqc2tv",
87
- "B37x0ls": "fvvig05",
88
- "H8rp7s": "f1nwpqpa",
89
- "uvoyur": "f1e6xsgv",
78
+ "li1rpt": "f1gw3sf2",
79
+ "Bsft5z2": "f13zj6fq",
80
+ "E3zdtr": "f1mdlcz9",
81
+ "Eqx8gd": ["f1a7op3", "f1cjjd47"],
82
+ "By385i5": "f1gboi2j",
83
+ "B1piin3": ["f1cjjd47", "f1a7op3"],
84
+ "Dlnsje": "f145g4dw",
85
+ "d9w3h3": ["f1kp91vd", "f1ibwz09"],
86
+ "B3778ie": ["f1ibwz09", "f1kp91vd"],
87
+ "Bcgy8vk": "f1cb6c3",
88
+ "Bw17bha": "f1lh990p",
89
+ "B1q35kw": "f1jc6hxc",
90
+ "Gjdm7m": "f13evtba",
91
+ "b1kco5": "f1yk9hq",
92
+ "Ba2ppi3": "fhwpy7i",
93
+ "F2fol1": "fh0z7ck",
94
+ "lck23g": "f117tx5t",
95
+ "umuwi5": "fjw5xc1",
96
+ "Blcqepd": "f1xdyd5c",
97
+ "nplu4u": "f1b9wyyr",
98
+ "Bioka5o": "f15goup",
99
+ "Bercvud": "f1ibeo51",
90
100
  "Bbr2w1p": "f14a1fxs",
91
101
  "Bduesf4": "f3e99gv",
92
102
  "Bpq79vn": "fhljsf7"
@@ -120,9 +130,6 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
120
130
  "i8kkvl": "fgfbwa2",
121
131
  "Belr9w4": "f1y3hx6l"
122
132
  },
123
- "inline": {
124
- "mc9l5x": "ftuwxu6"
125
- },
126
133
  "outline": {
127
134
  "De3pzq": "fxugw4r",
128
135
  "B4j52fo": "f5ogflp",
@@ -161,10 +168,10 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
161
168
  "underlineInteractive": {
162
169
  "oetu4i": "f1l4zc64",
163
170
  "Be8ivqh": "f1klwx88",
164
- "frdscb": ["fqvcdsd", "f9cg6ix"],
165
- "B9nohqn": ["f9cg6ix", "fqvcdsd"],
166
- "B1dhsta": ["f1pvm60u", "f179ivkp"],
167
- "Bjdmjzx": ["f179ivkp", "f1pvm60u"]
171
+ "B3778ie": ["f1nf3wye", "feulmo5"],
172
+ "d9w3h3": ["feulmo5", "f1nf3wye"],
173
+ "Bl18szs": ["f18vqdqu", "f53nyzz"],
174
+ "B4j8arr": ["f53nyzz", "f18vqdqu"]
168
175
  },
169
176
  "filled": {
170
177
  "E5pizo": "fyed02w",
@@ -218,8 +225,8 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
218
225
  "n51gp8": ["f14g86mu", "f1rvyvqg"]
219
226
  }
220
227
  }, {
221
- "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".fbi42co{row-gap:2px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".f11ef69:after{position:absolute;}", ".f383sj6:after{left:-1px;}", ".fpmdmpy:after{right:-1px;}", ".fqmzrrm:after{bottom:-1px;}", ".f1iv82i4:after{height:max(2px, var(--borderRadiusMedium));}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1gw3il9:after{border-bottom-width:2px;}", ".fd0py6g:after{border-bottom-style:solid;}", ".f1ta67ae:after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".fabrkco:after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1lmmjng:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fopw4to:after{transition-property:transform;}", ".f1dw3w9y:after{transition-duration:0.05s;}", ".f1n2ytmg:after{transition-delay:cubic-bezier(0.7,0,1,0.5);}", ".f1pha7fy{min-height:24px;}", ".f1g0x7ka{padding-top:0;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1qch9an{padding-bottom:0;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1nxs5xn{min-height:32px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1w5jphr{min-height:40px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fgfbwa2{-webkit-column-gap:6px;column-gap:6px;}", ".f1y3hx6l{row-gap:6px;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".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;}", ".fqvcdsd:after{border-bottom-right-radius:0;}", ".f9cg6ix:after{border-bottom-left-radius:0;}", ".f1pvm60u:after{border-top-right-radius:0;}", ".f179ivkp: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);}"],
222
- "w": [".fnqdfvx:focus-within:after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".fbqc2tv:focus-within:after{transition-property:transform;}", ".fvvig05:focus-within:after{transition-duration:0.2s;}", ".f1nwpqpa:focus-within:after{transition-delay:cubic-bezier(0.1,0.9,0.2,1);}", ".f1e6xsgv: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;}"],
228
+ "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".fbi42co{row-gap:2px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1cb6c3::after{border-bottom-width:2px;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".fh0z7ck::after{transition-duration:0.05s;}", ".f117tx5t::after{transition-delay:cubic-bezier(0.7,0,1,0.5);}", ".f1pha7fy{min-height:24px;}", ".f1g0x7ka{padding-top:0;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1qch9an{padding-bottom:0;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1nxs5xn{min-height:32px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1w5jphr{min-height:40px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fgfbwa2{-webkit-column-gap:6px;column-gap:6px;}", ".f1y3hx6l{row-gap:6px;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1nf3wye::after{border-bottom-right-radius:0;}", ".feulmo5::after{border-bottom-left-radius:0;}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".fyed02w{box-shadow:var(--shadow2);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
229
+ "w": [".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".f1b9wyyr:focus-within::after{transition-duration:0.2s;}", ".f15goup:focus-within::after{transition-delay:cubic-bezier(0.1,0.9,0.2,1);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}"],
223
230
  "h": [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".ftmjh5b:hover,.ftmjh5b:focus-within{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,.f17blpuu:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}"],
224
231
  "a": [".f8vnjqi:active,.f8vnjqi:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,.fz1etlk:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1hc16gm:active,:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1klwx88:active,.f1klwx88:focus-within{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1hc16gm:active,.f1hc16gm:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}"],
225
232
  "t": ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", "@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}"]
@@ -279,9 +286,18 @@ const useContentStyles = /*#__PURE__*/react_1.__styles({
279
286
  },
280
287
  "disabled": {
281
288
  "sj55zd": "f1s2aq7o"
289
+ },
290
+ "small": {
291
+ "kwki1k": "f3u2cy0"
292
+ },
293
+ "medium": {
294
+ "kwki1k": "f1oqplr0"
295
+ },
296
+ "large": {
297
+ "kwki1k": "fa420co"
282
298
  }
283
299
  }, {
284
- "d": [".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fyuhxbn>svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"]
300
+ "d": [".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fyuhxbn>svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f3u2cy0>svg{font-size:16px;}", ".f1oqplr0>svg{font-size:20px;}", ".fa420co>svg{font-size:24px;}"]
285
301
  });
286
302
  /**
287
303
  * Apply styling to the Input slots based on the state
@@ -298,16 +314,16 @@ const useInputStyles_unstable = state => {
298
314
  const rootStyles = useRootStyles();
299
315
  const inputStyles = useInputElementStyles();
300
316
  const contentStyles = useContentStyles();
301
- state.root.className = react_1.mergeClasses(exports.inputClassName, rootStyles.base, rootStyles[size], rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, state.inline && rootStyles.inline, filled && rootStyles.filled, disabled && rootStyles.disabled, state.root.className);
302
- state.input.className = react_1.mergeClasses(inputStyles.base, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
303
- const contentClasses = [contentStyles.base, disabled && contentStyles.disabled];
317
+ state.root.className = react_1.mergeClasses(exports.inputClassNames.root, rootStyles.base, rootStyles[size], rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, disabled && rootStyles.disabled, state.root.className);
318
+ state.input.className = react_1.mergeClasses(exports.inputClassNames.input, inputStyles.base, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
319
+ const contentClasses = [contentStyles.base, disabled && contentStyles.disabled, contentStyles[size]];
304
320
 
305
321
  if (state.contentBefore) {
306
- state.contentBefore.className = react_1.mergeClasses(...contentClasses, state.contentBefore.className);
322
+ state.contentBefore.className = react_1.mergeClasses(exports.inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
307
323
  }
308
324
 
309
325
  if (state.contentAfter) {
310
- state.contentAfter.className = react_1.mergeClasses(...contentClasses, state.contentAfter.className);
326
+ state.contentAfter.className = react_1.mergeClasses(exports.inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
311
327
  }
312
328
 
313
329
  return state;
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 } from '@fluentui/react-theme';\nimport type { InputState } from './Input.types';\n\nexport const inputClassName = 'fui-Input';\n\n// TODO(sharing) use theme values once available\nconst horizontalSpacing = {\n xxs: '2px',\n xs: '4px',\n sNudge: '6px',\n s: '8px',\n mNudge: '10px',\n m: '12px',\n};\nconst motionDurations = {\n ultraFast: '0.05s',\n normal: '0.2s',\n};\nconst motionCurves = {\n accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',\n decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)',\n};\nconst contentSizes = {\n // TODO(sharing) shouldn't these be in the theme?\n body1: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n caption1: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n flexWrap: 'nowrap',\n ...shorthands.gap(horizontalSpacing.xxs),\n fontFamily: tokens.fontFamilyBase,\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // used for all but underline\n position: 'relative',\n boxSizing: 'border-box',\n },\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n ':after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n ...shorthands.borderBottom('2px', 'solid', tokens.colorCompoundBrandStroke),\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: motionDurations.ultraFast,\n transitionDelay: motionCurves.accelerateMid,\n },\n ':focus-within:after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: motionDurations.normal,\n transitionDelay: motionCurves.decelerateMid,\n },\n ':focus-within:active:after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n small: {\n minHeight: fieldHeights.small,\n ...shorthands.padding('0', horizontalSpacing.sNudge),\n ...contentSizes.caption1,\n },\n medium: {\n minHeight: fieldHeights.medium,\n ...shorthands.padding('0', horizontalSpacing.mNudge),\n ...contentSizes.body1,\n },\n large: {\n minHeight: fieldHeights.large,\n ...shorthands.padding('0', horizontalSpacing.m),\n ...contentSizes[400],\n ...shorthands.gap(horizontalSpacing.sNudge),\n },\n inline: {\n display: 'inline-flex',\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n ':hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderRadius(0), // corners look strange if rounded\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n },\n underlineInteractive: {\n ':hover': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n ':after': shorthands.borderRadius(0), // remove rounded corners from focus underline\n },\n filled: {\n boxShadow: tokens.shadow2, // optional shadow for filled appearances\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filledDarker: {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n filledLighter: {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n});\n\nconst useInputElementStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n flexGrow: 1,\n minWidth: 0, // required to make the input shrink to fit the wrapper\n ...shorthands.borderStyle('none'), // input itself never has a border (this is handled by inputWrapper)\n ...shorthands.padding('0', horizontalSpacing.xxs),\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1, // browser style override\n },\n ':focus-visible': {\n outlineStyle: 'none', // disable default browser outline\n },\n },\n small: {\n // This is set on root but doesn't inherit\n ...contentSizes.caption1,\n },\n medium: {\n ...contentSizes.body1,\n },\n large: {\n ...contentSizes[400],\n ...shorthands.padding('0', horizontalSpacing.sNudge),\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useContentStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n // special case styling for icons (most common case) to ensure they're centered vertically\n '> svg': { display: 'block' },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n});\n\n/**\n * Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = (state: InputState): InputState => {\n const { size, appearance } = state;\n const disabled = state.input.disabled;\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const inputStyles = useInputElementStyles();\n const contentStyles = useContentStyles();\n\n state.root.className = mergeClasses(\n inputClassName,\n rootStyles.base,\n rootStyles[size],\n rootStyles[appearance],\n !disabled && rootStyles.interactive,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n state.inline && rootStyles.inline,\n filled && rootStyles.filled,\n disabled && rootStyles.disabled,\n state.root.className,\n );\n\n state.input.className = mergeClasses(\n inputStyles.base,\n inputStyles[size],\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n const contentClasses = [contentStyles.base, disabled && contentStyles.disabled];\n if (state.contentBefore) {\n state.contentBefore.className = mergeClasses(...contentClasses, state.contentBefore.className);\n }\n if (state.contentAfter) {\n state.contentAfter.className = mergeClasses(...contentClasses, state.contentAfter.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Input/useInputStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { InputSlots, InputState } from './Input.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `inputClassNames.root` instead.\n */\nexport const inputClassName = 'fui-Input';\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n root: 'fui-Input',\n input: 'fui-Input__input',\n contentBefore: 'fui-Input__contentBefore',\n contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) use theme values once available\nconst horizontalSpacing = {\n xxs: '2px',\n xs: '4px',\n sNudge: '6px',\n s: '8px',\n mNudge: '10px',\n m: '12px',\n};\nconst motionDurations = {\n ultraFast: '0.05s',\n normal: '0.2s',\n};\nconst motionCurves = {\n accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',\n decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)',\n};\nconst contentSizes = {\n // TODO(sharing) shouldn't these be in the theme?\n body1: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n caption1: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n alignItems: 'center',\n flexWrap: 'nowrap',\n ...shorthands.gap(horizontalSpacing.xxs),\n fontFamily: tokens.fontFamilyBase,\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // used for all but underline\n position: 'relative',\n boxSizing: 'border-box',\n },\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n ...shorthands.borderBottom('2px', 'solid', tokens.colorCompoundBrandStroke),\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: motionDurations.ultraFast,\n transitionDelay: motionCurves.accelerateMid,\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: motionDurations.normal,\n transitionDelay: motionCurves.decelerateMid,\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n small: {\n minHeight: fieldHeights.small,\n ...shorthands.padding('0', horizontalSpacing.sNudge),\n ...contentSizes.caption1,\n },\n medium: {\n minHeight: fieldHeights.medium,\n ...shorthands.padding('0', horizontalSpacing.mNudge),\n ...contentSizes.body1,\n },\n large: {\n minHeight: fieldHeights.large,\n ...shorthands.padding('0', horizontalSpacing.m),\n ...contentSizes[400],\n ...shorthands.gap(horizontalSpacing.sNudge),\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n ':hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderRadius(0), // corners look strange if rounded\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n },\n underlineInteractive: {\n ':hover': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n '::after': shorthands.borderRadius(0), // remove rounded corners from focus underline\n },\n filled: {\n boxShadow: tokens.shadow2, // optional shadow for filled appearances\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filledDarker: {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n filledLighter: {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n});\n\nconst useInputElementStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n flexGrow: 1,\n minWidth: 0, // required to make the input shrink to fit the wrapper\n ...shorthands.borderStyle('none'), // input itself never has a border (this is handled by inputWrapper)\n ...shorthands.padding('0', horizontalSpacing.xxs),\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1, // browser style override\n },\n ':focus-visible': {\n outlineStyle: 'none', // disable default browser outline\n },\n },\n small: {\n // This is set on root but doesn't inherit\n ...contentSizes.caption1,\n },\n medium: {\n ...contentSizes.body1,\n },\n large: {\n ...contentSizes[400],\n ...shorthands.padding('0', horizontalSpacing.sNudge),\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useContentStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n // special case styling for icons (most common case) to ensure they're centered vertically\n '> svg': { display: 'block' },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': { fontSize: '16px' },\n },\n medium: {\n '> svg': { fontSize: '20px' },\n },\n large: {\n '> svg': { fontSize: '24px' },\n },\n});\n\n/**\n * Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = (state: InputState): InputState => {\n const { size, appearance } = state;\n const disabled = state.input.disabled;\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const inputStyles = useInputElementStyles();\n const contentStyles = useContentStyles();\n\n state.root.className = mergeClasses(\n inputClassNames.root,\n rootStyles.base,\n rootStyles[size],\n rootStyles[appearance],\n !disabled && rootStyles.interactive,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n filled && rootStyles.filled,\n disabled && rootStyles.disabled,\n state.root.className,\n );\n\n state.input.className = mergeClasses(\n inputClassNames.input,\n inputStyles.base,\n inputStyles[size],\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n const contentClasses = [contentStyles.base, disabled && contentStyles.disabled, contentStyles[size]];\n if (state.contentBefore) {\n state.contentBefore.className = mergeClasses(\n inputClassNames.contentBefore,\n ...contentClasses,\n state.contentBefore.className,\n );\n }\n if (state.contentAfter) {\n state.contentAfter.className = mergeClasses(\n inputClassNames.contentAfter,\n ...contentClasses,\n state.contentAfter.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/index.d.ts CHANGED
@@ -1 +1,2 @@
1
- export * from './Input';
1
+ export { Input, inputClassName, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable, } from './Input';
2
+ export type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';
package/lib-commonjs/index.js CHANGED
@@ -3,8 +3,45 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ exports.useInput_unstable = exports.useInputStyles_unstable = exports.renderInput_unstable = exports.inputClassNames = exports.inputClassName = exports.Input = void 0;
6
7
 
7
- const tslib_1 = /*#__PURE__*/require("tslib");
8
+ var Input_1 = /*#__PURE__*/require("./Input");
8
9
 
9
- tslib_1.__exportStar(require("./Input"), exports);
10
+ Object.defineProperty(exports, "Input", {
11
+ enumerable: true,
12
+ get: function () {
13
+ return Input_1.Input;
14
+ }
15
+ }); // eslint-disable-next-line deprecation/deprecation
16
+
17
+ Object.defineProperty(exports, "inputClassName", {
18
+ enumerable: true,
19
+ get: function () {
20
+ return Input_1.inputClassName;
21
+ }
22
+ });
23
+ Object.defineProperty(exports, "inputClassNames", {
24
+ enumerable: true,
25
+ get: function () {
26
+ return Input_1.inputClassNames;
27
+ }
28
+ });
29
+ Object.defineProperty(exports, "renderInput_unstable", {
30
+ enumerable: true,
31
+ get: function () {
32
+ return Input_1.renderInput_unstable;
33
+ }
34
+ });
35
+ Object.defineProperty(exports, "useInputStyles_unstable", {
36
+ enumerable: true,
37
+ get: function () {
38
+ return Input_1.useInputStyles_unstable;
39
+ }
40
+ });
41
+ Object.defineProperty(exports, "useInput_unstable", {
42
+ enumerable: true,
43
+ get: function () {
44
+ return Input_1.useInput_unstable;
45
+ }
46
+ });
10
47
  //# sourceMappingURL=index.js.map
package/lib-commonjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Input';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,KAAA;AAAK;AAAL,CAAA,E,CACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,cAAA;AAAc;AAAd,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA","sourcesContent":["export {\n Input,\n // eslint-disable-next-line deprecation/deprecation\n inputClassName,\n inputClassNames,\n renderInput_unstable,\n useInputStyles_unstable,\n useInput_unstable,\n} from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-input",
3
- "version": "9.0.0-beta.4",
3
+ "version": "9.0.0-beta.7",
4
4
  "description": "Fluent UI React Input component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -28,23 +28,13 @@
28
28
  "devDependencies": {
29
29
  "@fluentui/eslint-plugin": "*",
30
30
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "9.0.0-beta.3",
32
- "@fluentui/scripts": "^1.0.0",
33
- "@types/enzyme": "3.10.3",
34
- "@types/enzyme-adapter-react-16": "1.0.3",
35
- "@types/react": "16.9.42",
36
- "@types/react-dom": "16.9.10",
37
- "@types/react-test-renderer": "^16.0.0",
38
- "enzyme": "~3.10.0",
39
- "enzyme-adapter-react-16": "^1.15.0",
40
- "react": "16.8.6",
41
- "react-dom": "16.8.6",
42
- "react-test-renderer": "^16.3.0"
31
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.4",
32
+ "@fluentui/scripts": "^1.0.0"
43
33
  },
44
34
  "dependencies": {
45
- "@fluentui/react-theme": "9.0.0-rc.3",
46
- "@fluentui/react-utilities": "9.0.0-rc.4",
47
- "@griffel/react": "1.0.0",
35
+ "@fluentui/react-theme": "9.0.0-rc.5",
36
+ "@fluentui/react-utilities": "9.0.0-rc.6",
37
+ "@griffel/react": "1.0.3",
48
38
  "tslib": "^2.1.0"
49
39
  },
50
40
  "peerDependencies": {
@@ -59,5 +49,12 @@
59
49
  "minor",
60
50
  "patch"
61
51
  ]
52
+ },
53
+ "exports": {
54
+ ".": {
55
+ "types": "./lib/index.d.ts",
56
+ "import": "./lib/index.js",
57
+ "require": "./lib-commonjs/index.js"
58
+ }
62
59
  }
63
60
  }