@fluentui/react-input 9.4.4 → 9.4.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.swcrc +30 -0
- package/CHANGELOG.json +85 -1
- package/CHANGELOG.md +29 -2
- package/lib/Input.js.map +1 -1
- package/lib/InputField.js.map +1 -1
- package/lib/components/Input/Input.js.map +1 -1
- package/lib/components/Input/Input.types.js +1 -1
- package/lib/components/Input/Input.types.js.map +1 -1
- package/lib/components/Input/index.js.map +1 -1
- package/lib/components/Input/renderInput.js +1 -9
- package/lib/components/Input/renderInput.js.map +1 -1
- package/lib/components/Input/useInput.js +3 -2
- package/lib/components/Input/useInput.js.map +1 -1
- package/lib/components/Input/useInputStyles.js.map +1 -1
- package/lib/components/InputField/InputField.js +1 -2
- package/lib/components/InputField/InputField.js.map +1 -1
- package/lib/components/InputField/index.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Input.js +5 -4
- package/lib-commonjs/Input.js.map +1 -1
- package/lib-commonjs/InputField.js +5 -4
- package/lib-commonjs/InputField.js.map +1 -1
- package/lib-commonjs/components/Input/Input.js +19 -20
- package/lib-commonjs/components/Input/Input.js.map +1 -1
- package/lib-commonjs/components/Input/Input.types.js +5 -2
- package/lib-commonjs/components/Input/Input.types.js.map +1 -1
- package/lib-commonjs/components/Input/index.js +9 -8
- package/lib-commonjs/components/Input/index.js.map +1 -1
- package/lib-commonjs/components/Input/renderInput.js +13 -24
- package/lib-commonjs/components/Input/renderInput.js.map +1 -1
- package/lib-commonjs/components/Input/useInput.js +66 -70
- package/lib-commonjs/components/Input/useInput.js.map +1 -1
- package/lib-commonjs/components/Input/useInputStyles.js +394 -178
- package/lib-commonjs/components/Input/useInputStyles.js.map +1 -1
- package/lib-commonjs/components/InputField/InputField.js +17 -11
- package/lib-commonjs/components/InputField/InputField.js.map +1 -1
- package/lib-commonjs/components/InputField/index.js +5 -4
- package/lib-commonjs/components/InputField/index.js.map +1 -1
- package/lib-commonjs/index.js +21 -49
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +10 -9
- package/lib-amd/Input.js +0 -6
- package/lib-amd/Input.js.map +0 -1
- package/lib-amd/InputField.js +0 -6
- package/lib-amd/InputField.js.map +0 -1
- package/lib-amd/components/Input/Input.js +0 -17
- package/lib-amd/components/Input/Input.js.map +0 -1
- package/lib-amd/components/Input/Input.types.js +0 -5
- package/lib-amd/components/Input/Input.types.js.map +0 -1
- package/lib-amd/components/Input/index.js +0 -10
- package/lib-amd/components/Input/index.js.map +0 -1
- package/lib-amd/components/Input/renderInput.js +0 -17
- package/lib-amd/components/Input/renderInput.js.map +0 -1
- package/lib-amd/components/Input/useInput.js +0 -64
- package/lib-amd/components/Input/useInput.js.map +0 -1
- package/lib-amd/components/Input/useInputStyles.js +0 -214
- package/lib-amd/components/Input/useInputStyles.js.map +0 -1
- package/lib-amd/components/InputField/InputField.js +0 -10
- package/lib-amd/components/InputField/InputField.js.map +0 -1
- package/lib-amd/components/InputField/index.js +0 -6
- package/lib-amd/components/InputField/index.js.map +0 -1
- package/lib-amd/index.js +0 -13
- package/lib-amd/index.js.map +0 -1
package/.swcrc
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/swcrc",
|
|
3
|
+
"exclude": [
|
|
4
|
+
"/testing",
|
|
5
|
+
"/**/*.cy.ts",
|
|
6
|
+
"/**/*.cy.tsx",
|
|
7
|
+
"/**/*.spec.ts",
|
|
8
|
+
"/**/*.spec.tsx",
|
|
9
|
+
"/**/*.test.ts",
|
|
10
|
+
"/**/*.test.tsx"
|
|
11
|
+
],
|
|
12
|
+
"jsc": {
|
|
13
|
+
"parser": {
|
|
14
|
+
"syntax": "typescript",
|
|
15
|
+
"tsx": true,
|
|
16
|
+
"decorators": false,
|
|
17
|
+
"dynamicImport": false
|
|
18
|
+
},
|
|
19
|
+
"externalHelpers": true,
|
|
20
|
+
"transform": {
|
|
21
|
+
"react": {
|
|
22
|
+
"runtime": "classic",
|
|
23
|
+
"useSpread": true
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"target": "es2019"
|
|
27
|
+
},
|
|
28
|
+
"minify": false,
|
|
29
|
+
"sourceMaps": true
|
|
30
|
+
}
|
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,91 @@
|
|
|
2
2
|
"name": "@fluentui/react-input",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Thu,
|
|
5
|
+
"date": "Thu, 23 Mar 2023 12:28:45 GMT",
|
|
6
|
+
"tag": "@fluentui/react-input_v9.4.6",
|
|
7
|
+
"version": "9.4.6",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-input",
|
|
13
|
+
"comment": "Bump @fluentui/react-field to v9.0.0-alpha.28",
|
|
14
|
+
"commit": "be0ca69899300abe3c8478c435e0f6837138479b"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-input",
|
|
19
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.3.3",
|
|
20
|
+
"commit": "be0ca69899300abe3c8478c435e0f6837138479b"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-input",
|
|
25
|
+
"comment": "Bump @fluentui/react-text to v9.3.3",
|
|
26
|
+
"commit": "be0ca69899300abe3c8478c435e0f6837138479b"
|
|
27
|
+
}
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"date": "Tue, 21 Mar 2023 21:23:37 GMT",
|
|
33
|
+
"tag": "@fluentui/react-input_v9.4.5",
|
|
34
|
+
"version": "9.4.5",
|
|
35
|
+
"comments": {
|
|
36
|
+
"patch": [
|
|
37
|
+
{
|
|
38
|
+
"author": "tristan.watanabe@gmail.com",
|
|
39
|
+
"package": "@fluentui/react-input",
|
|
40
|
+
"commit": "2fac1a139149bd13b76b1306207bc988dca9c72c",
|
|
41
|
+
"comment": "chore: migrate to swc transpilation approach."
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "tristan.watanabe@gmail.com",
|
|
45
|
+
"package": "@fluentui/react-input",
|
|
46
|
+
"commit": "ead1c6d4c2ac3f3596b62b8cbc07b0a03041f11f",
|
|
47
|
+
"comment": "fix: add node field to package.json exports map."
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-input",
|
|
52
|
+
"comment": "Bump @fluentui/react-field to v9.0.0-alpha.27",
|
|
53
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"author": "beachball",
|
|
57
|
+
"package": "@fluentui/react-input",
|
|
58
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.3.2",
|
|
59
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-input",
|
|
64
|
+
"comment": "Bump @fluentui/react-theme to v9.1.7",
|
|
65
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-input",
|
|
70
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.2",
|
|
71
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-input",
|
|
76
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20",
|
|
77
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "beachball",
|
|
81
|
+
"package": "@fluentui/react-input",
|
|
82
|
+
"comment": "Bump @fluentui/react-text to v9.3.2",
|
|
83
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
84
|
+
}
|
|
85
|
+
]
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"date": "Thu, 16 Mar 2023 14:36:59 GMT",
|
|
6
90
|
"tag": "@fluentui/react-input_v9.4.4",
|
|
7
91
|
"version": "9.4.4",
|
|
8
92
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,39 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-input
|
|
2
2
|
|
|
3
|
-
This log was last generated on Thu,
|
|
3
|
+
This log was last generated on Thu, 23 Mar 2023 12:28:45 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.4.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.4.6)
|
|
8
|
+
|
|
9
|
+
Thu, 23 Mar 2023 12:28:45 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.4.5..@fluentui/react-input_v9.4.6)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-field to v9.0.0-alpha.28 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v9.3.3 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
|
|
16
|
+
- Bump @fluentui/react-text to v9.3.3 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
|
|
17
|
+
|
|
18
|
+
## [9.4.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.4.5)
|
|
19
|
+
|
|
20
|
+
Tue, 21 Mar 2023 21:23:37 GMT
|
|
21
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.4.4..@fluentui/react-input_v9.4.5)
|
|
22
|
+
|
|
23
|
+
### Patches
|
|
24
|
+
|
|
25
|
+
- chore: migrate to swc transpilation approach. ([PR #27250](https://github.com/microsoft/fluentui/pull/27250) by tristan.watanabe@gmail.com)
|
|
26
|
+
- fix: add node field to package.json exports map. ([PR #27154](https://github.com/microsoft/fluentui/pull/27154) by tristan.watanabe@gmail.com)
|
|
27
|
+
- Bump @fluentui/react-field to v9.0.0-alpha.27 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
28
|
+
- Bump @fluentui/react-shared-contexts to v9.3.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
29
|
+
- Bump @fluentui/react-theme to v9.1.7 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
30
|
+
- Bump @fluentui/react-utilities to v9.7.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
31
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
32
|
+
- Bump @fluentui/react-text to v9.3.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
33
|
+
|
|
7
34
|
## [9.4.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.4.4)
|
|
8
35
|
|
|
9
|
-
Thu, 16 Mar 2023 14:
|
|
36
|
+
Thu, 16 Mar 2023 14:36:59 GMT
|
|
10
37
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.4.3..@fluentui/react-input_v9.4.4)
|
|
11
38
|
|
|
12
39
|
### Patches
|
package/lib/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../src/Input.ts"],"sourcesContent":["export * from './components/Input/index';\n"],"mappings":"AAAA,cAAc"}
|
package/lib/InputField.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../src/InputField.ts"],"sourcesContent":["export * from './components/InputField/index';\n"],"mappings":"AAAA,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useInput_unstable","renderInput_unstable","useInputStyles_unstable","useCustomStyleHooks_unstable","Input","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","useInput_unstable","renderInput_unstable","useInputStyles_unstable","useCustomStyleHooks_unstable","Input","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles';\nimport type { InputProps } from './Input.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The Input component allows people to enter and edit text.\n */\nexport const Input: ForwardRefComponent<InputProps> = React.forwardRef((props, ref) => {\n const state = useInput_unstable(props, ref);\n\n useInputStyles_unstable(state);\n\n const { useInputStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderInput_unstable(state);\n});\n\nInput.displayName = 'Input';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,oBAAoB,QAAQ;AACrC,SAASC,uBAAuB,QAAQ;AAGxC,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,KAAA,gBAAyCL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrF,MAAMC,KAAA,GAAQR,iBAAA,CAAkBM,KAAA,EAAOC,GAAA;EAEvCL,uBAAA,CAAwBM,KAAA;EAExB,MAAM;IAAEN,uBAAA,EAAyBO;EAAe,CAAE,GAAGN,4BAAA;EACrDM,eAAA,CAAgBD,KAAA;EAEhB,OAAOP,oBAAA,CAAqBO,KAAA;AAC9B;AAEAJ,KAAA,CAAMM,WAAW,GAAG"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from 'react';
|
|
2
2
|
//# sourceMappingURL=Input.types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React"],"sources":["../../../src/components/Input/Input.types.ts"],"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 * Note: 'filled-darker-shadow' and 'filled-lighter-shadow' are deprecated and will be removed in the future.\n */\n appearance?:\n | 'outline'\n | 'underline'\n | 'filled-darker'\n | 'filled-lighter'\n | 'filled-darker-shadow'\n | 'filled-lighter-shadow';\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"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../../../src/components/Input/index.ts"],"sourcesContent":["export * from './Input';\nexport * from './Input.types';\nexport * from './renderInput';\nexport * from './useInput';\nexport * from './useInputStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|
|
@@ -8,14 +8,6 @@ export const renderInput_unstable = state => {
|
|
|
8
8
|
slots,
|
|
9
9
|
slotProps
|
|
10
10
|
} = getSlots(state);
|
|
11
|
-
return /*#__PURE__*/React.createElement(slots.root,
|
|
12
|
-
...slotProps.root
|
|
13
|
-
}, slots.contentBefore && /*#__PURE__*/React.createElement(slots.contentBefore, {
|
|
14
|
-
...slotProps.contentBefore
|
|
15
|
-
}), /*#__PURE__*/React.createElement(slots.input, {
|
|
16
|
-
...slotProps.input
|
|
17
|
-
}), slots.contentAfter && /*#__PURE__*/React.createElement(slots.contentAfter, {
|
|
18
|
-
...slotProps.contentAfter
|
|
19
|
-
}));
|
|
11
|
+
return /*#__PURE__*/React.createElement(slots.root, slotProps.root, slots.contentBefore && /*#__PURE__*/React.createElement(slots.contentBefore, slotProps.contentBefore), /*#__PURE__*/React.createElement(slots.input, slotProps.input), slots.contentAfter && /*#__PURE__*/React.createElement(slots.contentAfter, slotProps.contentAfter));
|
|
20
12
|
};
|
|
21
13
|
//# sourceMappingURL=renderInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","getSlots","renderInput_unstable","state","slots","slotProps","createElement","root","contentBefore","input","contentAfter"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","getSlots","renderInput_unstable","state","slots","slotProps","createElement","root","contentBefore","input","contentAfter"],"sources":["../../../src/components/Input/renderInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { InputSlots, InputState } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputState) => {\n const { slots, slotProps } = getSlots<InputSlots>(state);\n return (\n <slots.root {...slotProps.root}>\n {slots.contentBefore && <slots.contentBefore {...slotProps.contentBefore} />}\n <slots.input {...slotProps.input} />\n {slots.contentAfter && <slots.contentAfter {...slotProps.contentAfter} />}\n </slots.root>\n );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,oBAAA,GAAwBC,KAAA,IAAsB;EACzD,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAAqBE,KAAA;EAClD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,EAC3BH,KAAA,CAAMI,aAAa,iBAAIR,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMI,aAAa,EAAKH,SAAA,CAAUG,aAAa,gBACxER,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMK,KAAK,EAAKJ,SAAA,CAAUI,KAAK,GAC/BL,KAAA,CAAMM,YAAY,iBAAIV,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMM,YAAY,EAAKL,SAAA,CAAUK,YAAY;AAG3E"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
import { getPartitionedNativeProps, resolveShorthand, useControllableState, useEventCallback } from '@fluentui/react-utilities';
|
|
2
3
|
import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';
|
|
3
4
|
/**
|
|
@@ -10,11 +11,11 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
|
|
|
10
11
|
* @param ref - reference to `<input>` element of Input
|
|
11
12
|
*/
|
|
12
13
|
export const useInput_unstable = (props, ref) => {
|
|
13
|
-
var _a;
|
|
14
14
|
const overrides = useOverrides();
|
|
15
|
+
var _overrides_inputDefaultAppearance;
|
|
15
16
|
const {
|
|
16
17
|
size = 'medium',
|
|
17
|
-
appearance = (
|
|
18
|
+
appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline',
|
|
18
19
|
onChange
|
|
19
20
|
} = props;
|
|
20
21
|
if (process.env.NODE_ENV !== 'production' && (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getPartitionedNativeProps","resolveShorthand","useControllableState","useEventCallback","useOverrides_unstable","useOverrides","useInput_unstable","props","ref","overrides","
|
|
1
|
+
{"version":3,"names":["React","getPartitionedNativeProps","resolveShorthand","useControllableState","useEventCallback","useOverrides_unstable","useOverrides","useInput_unstable","props","ref","overrides","_overrides_inputDefaultAppearance","size","appearance","inputDefaultAppearance","onChange","process","env","NODE_ENV","console","error","value","setValue","state","defaultState","defaultValue","initialState","nativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","required","defaultProps","type","primary","ev","newValue","target"],"sources":["../../../src/components/Input/useInput.ts"],"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';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\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 overrides = useOverrides();\n\n const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', onChange } = props;\n\n if (\n process.env.NODE_ENV !== 'production' &&\n (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n ) {\n // eslint-disable-next-line no-console\n console.error(\n \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n ' future.',\n );\n }\n\n const [value, setValue] = useControllableState({\n state: props.value,\n defaultState: props.defaultValue,\n initialState: '',\n });\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['size', 'onChange', 'value', 'defaultValue'],\n });\n\n const state: InputState = {\n size,\n appearance,\n components: {\n root: 'span',\n input: 'input',\n contentBefore: 'span',\n contentAfter: 'span',\n },\n input: resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n type: 'text',\n ref,\n ...nativeProps.primary,\n },\n }),\n contentAfter: resolveShorthand(props.contentAfter),\n contentBefore: resolveShorthand(props.contentBefore),\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: nativeProps.root,\n }),\n };\n\n state.input.value = value;\n state.input.onChange = useEventCallback(ev => {\n const newValue = ev.target.value;\n onChange?.(ev, { value: newValue });\n setValue(newValue);\n });\n\n return state;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SACEC,yBAAyB,EACzBC,gBAAgB,EAChBC,oBAAoB,EACpBC,gBAAgB,QACX;AAEP,SAASC,qBAAA,IAAyBC,YAAY,QAAQ;AAEtD;;;;;;;;;AASA,OAAO,MAAMC,iBAAA,GAAoBA,CAACC,KAAA,EAAmBC,GAAA,KAAiD;EACpG,MAAMC,SAAA,GAAYJ,YAAA;MAEoBK,iCAAA;EAAtC,MAAM;IAAEC,IAAA,GAAO;IAAUC,UAAA,GAAa,CAAAF,iCAAA,GAAAD,SAAA,CAAUI,sBAAsB,cAAhCH,iCAAA,cAAAA,iCAAA,GAAoC,SAAS;IAAEI;EAAQ,CAAE,GAAGP,KAAA;EAElG,IACEQ,OAAA,CAAQC,GAAG,CAACC,QAAQ,KAAK,iBACxBL,UAAA,KAAe,0BAA0BA,UAAA,KAAe,uBAAsB,GAC/E;IACA;IACAM,OAAA,CAAQC,KAAK,CACX,iHACE;EAEN;EAEA,MAAM,CAACC,KAAA,EAAOC,QAAA,CAAS,GAAGnB,oBAAA,CAAqB;IAC7CoB,KAAA,EAAOf,KAAA,CAAMa,KAAK;IAClBG,YAAA,EAAchB,KAAA,CAAMiB,YAAY;IAChCC,YAAA,EAAc;EAChB;EAEA,MAAMC,WAAA,GAAc1B,yBAAA,CAA0B;IAC5CO,KAAA;IACAoB,kBAAA,EAAoB;IACpBC,iBAAA,EAAmB,CAAC,QAAQ,YAAY,SAAS;EACnD;EAEA,MAAMN,KAAA,GAAoB;IACxBX,IAAA;IACAC,UAAA;IACAiB,UAAA,EAAY;MACVC,IAAA,EAAM;MACNC,KAAA,EAAO;MACPC,aAAA,EAAe;MACfC,YAAA,EAAc;IAChB;IACAF,KAAA,EAAO9B,gBAAA,CAAiBM,KAAA,CAAMwB,KAAK,EAAE;MACnCG,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZC,IAAA,EAAM;QACN5B,GAAA;QACA,GAAGkB,WAAA,CAAYW;MACjB;IACF;IACAJ,YAAA,EAAchC,gBAAA,CAAiBM,KAAA,CAAM0B,YAAY;IACjDD,aAAA,EAAe/B,gBAAA,CAAiBM,KAAA,CAAMyB,aAAa;IACnDF,IAAA,EAAM7B,gBAAA,CAAiBM,KAAA,CAAMuB,IAAI,EAAE;MACjCI,QAAA,EAAU,IAAI;MACdC,YAAA,EAAcT,WAAA,CAAYI;IAC5B;EACF;EAEAR,KAAA,CAAMS,KAAK,CAACX,KAAK,GAAGA,KAAA;EACpBE,KAAA,CAAMS,KAAK,CAACjB,QAAQ,GAAGX,gBAAA,CAAiBmC,EAAA,IAAM;IAC5C,MAAMC,QAAA,GAAWD,EAAA,CAAGE,MAAM,CAACpB,KAAK;IAChCN,QAAA,aAAAA,QAAA,uBAAAA,QAAA,CAAWwB,EAAA,EAAI;MAAElB,KAAA,EAAOmB;IAAS;IACjClB,QAAA,CAASkB,QAAA;EACX;EAEA,OAAOjB,KAAA;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","useRootClassName","useRootStyles","sshi5w","uwmqm3","z189sj","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","i8kkvl","Belr9w4","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Drbcw7","udz0bu","Be8ivqh","ofdepl","underline","De3pzq","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","icvyot","vrafjx","wvpqe5","Eqx8gd","B1piin3","underlineInteractive","B3778ie","d9w3h3","Bl18szs","B4j8arr","filled","g2u3we","h3c5rm","B9xav0g","zhjwy3","filledInteractive","q7v0qe","kmh5ft","nagaa4","B1yhkcb","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","E5pizo","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bsft5z2","Bduesf4","d","h","a","m","w","useInputClassName","useInputElementStyles","sj55zd","yvdlaj","useContentClassName","useContentStyles","kwki1k","useInputStyles_unstable","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","contentClasses"],"sources":["../src/packages/react-components/react-input/src/components/Input/useInputStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InputSlots, InputState } from './Input.types';\n\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n root: 'fui-Input',\n input: 'fui-Input__input',\n contentBefore: 'fui-Input__contentBefore',\n contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n alignItems: 'center',\n flexWrap: 'nowrap',\n gap: tokens.spacingHorizontalXXS,\n borderRadius: tokens.borderRadiusMedium, // used for all but underline\n position: 'relative',\n boxSizing: 'border-box',\n\n // size: medium (default)\n minHeight: fieldHeights.medium,\n padding: `0 ${tokens.spacingHorizontalMNudge}`,\n ...typographyStyles.body1,\n\n // appearance: outline (default)\n backgroundColor: tokens.colorNeutralBackground1,\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n\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 borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outline: '2px solid transparent',\n },\n});\n\nconst useRootStyles = makeStyles({\n small: {\n minHeight: fieldHeights.small,\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalSNudge,\n ...typographyStyles.caption1,\n },\n medium: {\n // included in rootBaseStyles\n },\n large: {\n minHeight: fieldHeights.large,\n paddingLeft: tokens.spacingHorizontalM,\n paddingRight: tokens.spacingHorizontalM,\n ...typographyStyles.body2,\n ...shorthands.gap(tokens.spacingHorizontalSNudge),\n },\n outline: {\n // included in rootBaseStyles\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 // border is specified in rootBaseStyles, but we only want a bottom border here\n borderTopStyle: 'none',\n borderRightStyle: 'none',\n borderLeftStyle: 'none',\n // Make the focus underline (::after) match the width of the bottom border\n '::after': {\n left: 0,\n right: 0,\n },\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 ...shorthands.borderColor(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 invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker-shadow': {\n backgroundColor: tokens.colorNeutralBackground3,\n boxShadow: tokens.shadow2,\n },\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow2,\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n // remove the focus border\n '::after': {\n content: 'unset',\n },\n // remove the focus outline\n ':focus-within': {\n outlineStyle: 'none',\n },\n },\n});\n\nconst useInputClassName = makeResetStyles({\n boxSizing: 'border-box',\n flexGrow: 1,\n minWidth: 0, // required to make the input shrink to fit the wrapper\n borderStyle: 'none', // input itself never has a border (this is handled by inputWrapper)\n padding: `0 ${tokens.spacingHorizontalXXS}`,\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1, // browser style override\n },\n\n outlineStyle: 'none', // disable default browser outline\n\n // Inherit typography styles from root\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n lineHeight: 'inherit',\n});\n\nconst useInputElementStyles = makeStyles({\n large: {\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useContentClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n display: 'flex',\n // special case styling for icons (most common case) to ensure they're centered vertically\n // size: medium (default)\n '> svg': { fontSize: '20px' },\n});\n\nconst useContentStyles = makeStyles({\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 // included in useContentClassName\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 invalid = `${state.input['aria-invalid']}` === 'true';\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 useRootClassName(),\n rootStyles[size],\n rootStyles[appearance],\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n filled && rootStyles.filled,\n !disabled && invalid && rootStyles.invalid,\n disabled && rootStyles.disabled,\n state.root.className,\n );\n\n state.input.className = mergeClasses(\n inputClassNames.input,\n useInputClassName(),\n size === 'large' && inputStyles.large,\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n const contentClasses = [useContentClassName(), 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"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","useRootClassName","useRootStyles","sshi5w","uwmqm3","z189sj","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","i8kkvl","Belr9w4","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Drbcw7","udz0bu","Be8ivqh","ofdepl","underline","De3pzq","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","icvyot","vrafjx","wvpqe5","Eqx8gd","B1piin3","underlineInteractive","B3778ie","d9w3h3","Bl18szs","B4j8arr","filled","g2u3we","h3c5rm","B9xav0g","zhjwy3","filledInteractive","q7v0qe","kmh5ft","nagaa4","B1yhkcb","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","E5pizo","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bsft5z2","Bduesf4","d","h","a","m","w","useInputClassName","useInputElementStyles","sj55zd","yvdlaj","useContentClassName","useContentStyles","kwki1k","useInputStyles_unstable","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","contentClasses"],"sources":["../../../src/components/Input/useInputStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InputSlots, InputState } from './Input.types';\n\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n root: 'fui-Input',\n input: 'fui-Input__input',\n contentBefore: 'fui-Input__contentBefore',\n contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n alignItems: 'center',\n flexWrap: 'nowrap',\n gap: tokens.spacingHorizontalXXS,\n borderRadius: tokens.borderRadiusMedium, // used for all but underline\n position: 'relative',\n boxSizing: 'border-box',\n\n // size: medium (default)\n minHeight: fieldHeights.medium,\n padding: `0 ${tokens.spacingHorizontalMNudge}`,\n ...typographyStyles.body1,\n\n // appearance: outline (default)\n backgroundColor: tokens.colorNeutralBackground1,\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n\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 borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outline: '2px solid transparent',\n },\n});\n\nconst useRootStyles = makeStyles({\n small: {\n minHeight: fieldHeights.small,\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalSNudge,\n ...typographyStyles.caption1,\n },\n medium: {\n // included in rootBaseStyles\n },\n large: {\n minHeight: fieldHeights.large,\n paddingLeft: tokens.spacingHorizontalM,\n paddingRight: tokens.spacingHorizontalM,\n ...typographyStyles.body2,\n ...shorthands.gap(tokens.spacingHorizontalSNudge),\n },\n outline: {\n // included in rootBaseStyles\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 // border is specified in rootBaseStyles, but we only want a bottom border here\n borderTopStyle: 'none',\n borderRightStyle: 'none',\n borderLeftStyle: 'none',\n // Make the focus underline (::after) match the width of the bottom border\n '::after': {\n left: 0,\n right: 0,\n },\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 ...shorthands.borderColor(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 invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker-shadow': {\n backgroundColor: tokens.colorNeutralBackground3,\n boxShadow: tokens.shadow2,\n },\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow2,\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n // remove the focus border\n '::after': {\n content: 'unset',\n },\n // remove the focus outline\n ':focus-within': {\n outlineStyle: 'none',\n },\n },\n});\n\nconst useInputClassName = makeResetStyles({\n boxSizing: 'border-box',\n flexGrow: 1,\n minWidth: 0, // required to make the input shrink to fit the wrapper\n borderStyle: 'none', // input itself never has a border (this is handled by inputWrapper)\n padding: `0 ${tokens.spacingHorizontalXXS}`,\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1, // browser style override\n },\n\n outlineStyle: 'none', // disable default browser outline\n\n // Inherit typography styles from root\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n lineHeight: 'inherit',\n});\n\nconst useInputElementStyles = makeStyles({\n large: {\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useContentClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n display: 'flex',\n // special case styling for icons (most common case) to ensure they're centered vertically\n // size: medium (default)\n '> svg': { fontSize: '20px' },\n});\n\nconst useContentStyles = makeStyles({\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 // included in useContentClassName\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 invalid = `${state.input['aria-invalid']}` === 'true';\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 useRootClassName(),\n rootStyles[size],\n rootStyles[appearance],\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n filled && rootStyles.filled,\n !disabled && invalid && rootStyles.invalid,\n disabled && rootStyles.disabled,\n state.root.className,\n );\n\n state.input.className = mergeClasses(\n inputClassNames.input,\n useInputClassName(),\n size === 'large' && inputStyles.large,\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n const contentClasses = [useContentClassName(), 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"],"mappings":"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"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
/* eslint-disable deprecation/deprecation */
|
|
2
|
-
import { getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';
|
|
1
|
+
/* eslint-disable deprecation/deprecation */import { getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';
|
|
3
2
|
import { Input, inputClassNames } from '../../Input';
|
|
4
3
|
/** @deprecated Use Field with Input: `<Field><Input /></Field>` */
|
|
5
4
|
export const inputFieldClassNames = /*#__PURE__*/getDeprecatedFieldClassNames(inputClassNames.root);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getDeprecatedFieldClassNames","makeDeprecatedField","Input","inputClassNames","inputFieldClassNames","root","InputField"],"sources":["
|
|
1
|
+
{"version":3,"names":["getDeprecatedFieldClassNames","makeDeprecatedField","Input","inputClassNames","inputFieldClassNames","root","InputField"],"sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Input, inputClassNames, InputProps } from '../../Input';\n\n/** @deprecated Use Field with Input: `<Field><Input /></Field>` */\nexport type InputFieldProps = DeprecatedFieldProps<InputProps>;\n/** @deprecated Use Field with Input: `<Field><Input /></Field>` */\nexport const inputFieldClassNames = getDeprecatedFieldClassNames(inputClassNames.root);\n/** @deprecated Use Field with Input: `<Field><Input /></Field>` */\nexport const InputField: ForwardRefComponent<InputFieldProps> = makeDeprecatedField(Input);\n"],"mappings":"AAAA,4CACA,SAA+BA,4BAA4B,EAAEC,mBAAmB,QAAQ;AAExF,SAASC,KAAK,EAAEC,eAAe,QAAoB;AAInD;AACA,OAAO,MAAMC,oBAAA,gBAAuBJ,4BAAA,CAA6BG,eAAA,CAAgBE,IAAI;AACrF;AACA,OAAO,MAAMC,UAAA,gBAAmDL,mBAAA,CAAoBC,KAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../../../src/components/InputField/index.ts"],"sourcesContent":["export * from './InputField';\n"],"mappings":"AAAA,cAAc"}
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["Input","inputClassNames","renderInput_unstable","useInputStyles_unstable","useInput_unstable","InputField","InputField_unstable","inputFieldClassNames"],"sources":["../src/index.ts"],"sourcesContent":["export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { InputField as InputField_unstable, inputFieldClassNames } from './InputField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { InputFieldProps as InputFieldProps_unstable } from './InputField';\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ;AAGzG;AACA,SAASC,UAAA,IAAcC,mBAAmB,EAAEC,oBAAoB,QAAQ"}
|
package/lib-commonjs/Input.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
6
|
-
const
|
|
7
|
-
|
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
|
+
_exportStar(require("./components/Input/index"), exports);
|
|
7
|
+
//# sourceMappingURL=Input.js.map
|
|
8
|
+
|
|
8
9
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../lib/Input.js"],"sourcesContent":["export * from './components/Input/index';\n//# sourceMappingURL=Input.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,iCAAiC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
6
|
-
const
|
|
7
|
-
|
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
|
+
_exportStar(require("./components/InputField/index"), exports);
|
|
7
|
+
//# sourceMappingURL=InputField.js.map
|
|
8
|
+
|
|
8
9
|
//# sourceMappingURL=InputField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../lib/InputField.js"],"sourcesContent":["export * from './components/InputField/index';\n//# sourceMappingURL=InputField.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,sCAAsC"}
|
|
@@ -1,25 +1,24 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "Input", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: ()=>Input
|
|
5
8
|
});
|
|
6
|
-
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
const {
|
|
19
|
-
useInputStyles_unstable: useCustomStyles
|
|
20
|
-
} = react_shared_contexts_1.useCustomStyleHooks_unstable();
|
|
21
|
-
useCustomStyles(state);
|
|
22
|
-
return renderInput_1.renderInput_unstable(state);
|
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
11
|
+
const _useInput = require("./useInput");
|
|
12
|
+
const _renderInput = require("./renderInput");
|
|
13
|
+
const _useInputStyles = require("./useInputStyles");
|
|
14
|
+
const _reactSharedContexts = require("@fluentui/react-shared-contexts");
|
|
15
|
+
const Input = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
16
|
+
const state = (0, _useInput.useInput_unstable)(props, ref);
|
|
17
|
+
(0, _useInputStyles.useInputStyles_unstable)(state);
|
|
18
|
+
const { useInputStyles_unstable: useCustomStyles } = (0, _reactSharedContexts.useCustomStyleHooks_unstable)();
|
|
19
|
+
useCustomStyles(state);
|
|
20
|
+
return (0, _renderInput.renderInput_unstable)(state);
|
|
23
21
|
});
|
|
24
|
-
|
|
22
|
+
Input.displayName = 'Input'; //# sourceMappingURL=Input.js.map
|
|
23
|
+
|
|
25
24
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Input/Input.js"],"sourcesContent":["import * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n/**\n * The Input component allows people to enter and edit text.\n */\nexport const Input = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useInput_unstable(props, ref);\n useInputStyles_unstable(state);\n const {\n useInputStyles_unstable: useCustomStyles\n } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n return renderInput_unstable(state);\n});\nInput.displayName = 'Input';\n//# sourceMappingURL=Input.js.map"],"names":["Input","React","forwardRef","props","ref","state","useInput_unstable","useInputStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderInput_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;0BACW;6BACG;gCACG;qCACK;AAItC,MAAMA,QAAQ,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjE,MAAMC,QAAQC,IAAAA,2BAAiB,EAACH,OAAOC;IACvCG,IAAAA,uCAAuB,EAACF;IACxB,MAAM,EACJE,yBAAyBC,gBAAe,EACzC,GAAGC,IAAAA,iDAA4B;IAChCD,gBAAgBH;IAChB,OAAOK,IAAAA,iCAAoB,EAACL;AAC9B;AACAL,MAAMW,WAAW,GAAG,SACpB,iCAAiC"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
5
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
6
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
7
|
+
//# sourceMappingURL=Input.types.js.map
|
|
8
|
+
|
|
6
9
|
//# sourceMappingURL=Input.types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Input/Input.types.js"],"sourcesContent":["import * as React from 'react';\n//# sourceMappingURL=Input.types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CACvB,uCAAuC"}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
|
+
_exportStar(require("./Input"), exports);
|
|
7
|
+
_exportStar(require("./Input.types"), exports);
|
|
8
|
+
_exportStar(require("./renderInput"), exports);
|
|
9
|
+
_exportStar(require("./useInput"), exports);
|
|
10
|
+
_exportStar(require("./useInputStyles"), exports);
|
|
11
|
+
//# sourceMappingURL=index.js.map
|
|
12
|
+
|
|
12
13
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Input/index.js"],"sourcesContent":["export * from './Input';\nexport * from './Input.types';\nexport * from './renderInput';\nexport * from './useInput';\nexport * from './useInputStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
|