@fluentui/react-field 9.0.0-alpha.25 → 9.0.0-alpha.27
Sign up to get free protection for your applications and to get access to all the features.
- package/.swcrc +30 -0
- package/CHANGELOG.json +85 -1
- package/CHANGELOG.md +29 -2
- package/lib/Field.js.map +1 -1
- package/lib/components/Field/Field.js.map +1 -1
- package/lib/components/Field/Field.types.js +1 -1
- package/lib/components/Field/Field.types.js.map +1 -1
- package/lib/components/Field/index.js.map +1 -1
- package/lib/components/Field/renderField.js +1 -11
- package/lib/components/Field/renderField.js.map +1 -1
- package/lib/components/Field/useField.js +12 -9
- package/lib/components/Field/useField.js.map +1 -1
- package/lib/components/Field/useFieldStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/util/makeDeprecatedField.js +2 -5
- package/lib/util/makeDeprecatedField.js.map +1 -1
- package/lib-commonjs/Field.js +5 -4
- package/lib-commonjs/Field.js.map +1 -1
- package/lib-commonjs/components/Field/Field.js +16 -12
- package/lib-commonjs/components/Field/Field.js.map +1 -1
- package/lib-commonjs/components/Field/Field.types.js +5 -2
- package/lib-commonjs/components/Field/Field.types.js.map +1 -1
- package/lib-commonjs/components/Field/index.js +9 -8
- package/lib-commonjs/components/Field/index.js.map +1 -1
- package/lib-commonjs/components/Field/renderField.js +13 -26
- package/lib-commonjs/components/Field/renderField.js.map +1 -1
- package/lib-commonjs/components/Field/useField.js +98 -102
- package/lib-commonjs/components/Field/useField.js.map +1 -1
- package/lib-commonjs/components/Field/useFieldStyles.js +137 -96
- package/lib-commonjs/components/Field/useFieldStyles.js.map +1 -1
- package/lib-commonjs/index.js +21 -49
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/util/makeDeprecatedField.js +53 -71
- package/lib-commonjs/util/makeDeprecatedField.js.map +1 -1
- package/package.json +10 -9
- package/lib-amd/Field.js +0 -6
- package/lib-amd/Field.js.map +0 -1
- package/lib-amd/components/Field/Field.js +0 -12
- package/lib-amd/components/Field/Field.js.map +0 -1
- package/lib-amd/components/Field/Field.types.js +0 -5
- package/lib-amd/components/Field/Field.types.js.map +0 -1
- package/lib-amd/components/Field/index.js +0 -10
- package/lib-amd/components/Field/index.js.map +0 -1
- package/lib-amd/components/Field/renderField.js +0 -20
- package/lib-amd/components/Field/renderField.js.map +0 -1
- package/lib-amd/components/Field/useField.js +0 -99
- package/lib-amd/components/Field/useField.js.map +0 -1
- package/lib-amd/components/Field/useFieldStyles.js +0 -115
- package/lib-amd/components/Field/useFieldStyles.js.map +0 -1
- package/lib-amd/index.js +0 -13
- package/lib-amd/index.js.map +0 -1
- package/lib-amd/util/makeDeprecatedField.js +0 -38
- package/lib-amd/util/makeDeprecatedField.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-field",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
5
|
+
"date": "Tue, 21 Mar 2023 21:18:46 GMT",
|
6
|
+
"tag": "@fluentui/react-field_v9.0.0-alpha.27",
|
7
|
+
"version": "9.0.0-alpha.27",
|
8
|
+
"comments": {
|
9
|
+
"prerelease": [
|
10
|
+
{
|
11
|
+
"author": "makotom@microsoft.com",
|
12
|
+
"package": "@fluentui/react-field",
|
13
|
+
"commit": "7fde5c94869ff9841b142b7ff1d0a3df0ab58f74",
|
14
|
+
"comment": "chore: Bumping version of @fluentui/react-icons to ^2.0.196."
|
15
|
+
},
|
16
|
+
{
|
17
|
+
"author": "tristan.watanabe@gmail.com",
|
18
|
+
"package": "@fluentui/react-field",
|
19
|
+
"commit": "2fac1a139149bd13b76b1306207bc988dca9c72c",
|
20
|
+
"comment": "chore: migrate to swc transpilation approach."
|
21
|
+
},
|
22
|
+
{
|
23
|
+
"author": "tristan.watanabe@gmail.com",
|
24
|
+
"package": "@fluentui/react-field",
|
25
|
+
"commit": "ead1c6d4c2ac3f3596b62b8cbc07b0a03041f11f",
|
26
|
+
"comment": "fix: add node field to package.json exports map."
|
27
|
+
},
|
28
|
+
{
|
29
|
+
"author": "beachball",
|
30
|
+
"package": "@fluentui/react-field",
|
31
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.15",
|
32
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
33
|
+
},
|
34
|
+
{
|
35
|
+
"author": "beachball",
|
36
|
+
"package": "@fluentui/react-field",
|
37
|
+
"comment": "Bump @fluentui/react-label to v9.1.5",
|
38
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
39
|
+
},
|
40
|
+
{
|
41
|
+
"author": "beachball",
|
42
|
+
"package": "@fluentui/react-field",
|
43
|
+
"comment": "Bump @fluentui/react-theme to v9.1.7",
|
44
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
45
|
+
},
|
46
|
+
{
|
47
|
+
"author": "beachball",
|
48
|
+
"package": "@fluentui/react-field",
|
49
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.2",
|
50
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
51
|
+
},
|
52
|
+
{
|
53
|
+
"author": "beachball",
|
54
|
+
"package": "@fluentui/react-field",
|
55
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20",
|
56
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
57
|
+
}
|
58
|
+
]
|
59
|
+
}
|
60
|
+
},
|
61
|
+
{
|
62
|
+
"date": "Thu, 16 Mar 2023 14:36:59 GMT",
|
63
|
+
"tag": "@fluentui/react-field_v9.0.0-alpha.26",
|
64
|
+
"version": "9.0.0-alpha.26",
|
65
|
+
"comments": {
|
66
|
+
"prerelease": [
|
67
|
+
{
|
68
|
+
"author": "beachball",
|
69
|
+
"package": "@fluentui/react-field",
|
70
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.14",
|
71
|
+
"commit": "e7dcadf7cabae6bc6811ca04a630e7d850388f81"
|
72
|
+
},
|
73
|
+
{
|
74
|
+
"author": "beachball",
|
75
|
+
"package": "@fluentui/react-field",
|
76
|
+
"comment": "Bump @fluentui/react-label to v9.1.4",
|
77
|
+
"commit": "e7dcadf7cabae6bc6811ca04a630e7d850388f81"
|
78
|
+
},
|
79
|
+
{
|
80
|
+
"author": "beachball",
|
81
|
+
"package": "@fluentui/react-field",
|
82
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.1",
|
83
|
+
"commit": "e7dcadf7cabae6bc6811ca04a630e7d850388f81"
|
84
|
+
}
|
85
|
+
]
|
86
|
+
}
|
87
|
+
},
|
88
|
+
{
|
89
|
+
"date": "Wed, 15 Mar 2023 10:19:53 GMT",
|
6
90
|
"tag": "@fluentui/react-field_v9.0.0-alpha.25",
|
7
91
|
"version": "9.0.0-alpha.25",
|
8
92
|
"comments": {
|
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,39 @@
|
|
1
1
|
# Change Log - @fluentui/react-field
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Tue, 21 Mar 2023 21:18:46 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.0.0-alpha.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.27)
|
8
|
+
|
9
|
+
Tue, 21 Mar 2023 21:18:46 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.26..@fluentui/react-field_v9.0.0-alpha.27)
|
11
|
+
|
12
|
+
### Changes
|
13
|
+
|
14
|
+
- chore: Bumping version of @fluentui/react-icons to ^2.0.196. ([PR #27100](https://github.com/microsoft/fluentui/pull/27100) by makotom@microsoft.com)
|
15
|
+
- chore: migrate to swc transpilation approach. ([PR #27250](https://github.com/microsoft/fluentui/pull/27250) by tristan.watanabe@gmail.com)
|
16
|
+
- fix: add node field to package.json exports map. ([PR #27154](https://github.com/microsoft/fluentui/pull/27154) by tristan.watanabe@gmail.com)
|
17
|
+
- Bump @fluentui/react-context-selector to v9.1.15 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
18
|
+
- Bump @fluentui/react-label to v9.1.5 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
19
|
+
- Bump @fluentui/react-theme to v9.1.7 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
20
|
+
- Bump @fluentui/react-utilities to v9.7.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
21
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
22
|
+
|
23
|
+
## [9.0.0-alpha.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.26)
|
24
|
+
|
25
|
+
Thu, 16 Mar 2023 14:36:59 GMT
|
26
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.25..@fluentui/react-field_v9.0.0-alpha.26)
|
27
|
+
|
28
|
+
### Changes
|
29
|
+
|
30
|
+
- Bump @fluentui/react-context-selector to v9.1.14 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
|
31
|
+
- Bump @fluentui/react-label to v9.1.4 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
|
32
|
+
- Bump @fluentui/react-utilities to v9.7.1 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
|
33
|
+
|
7
34
|
## [9.0.0-alpha.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.25)
|
8
35
|
|
9
|
-
Wed, 15 Mar 2023 10:
|
36
|
+
Wed, 15 Mar 2023 10:19:53 GMT
|
10
37
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.24..@fluentui/react-field_v9.0.0-alpha.25)
|
11
38
|
|
12
39
|
### Changes
|
package/lib/Field.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":[],"sources":["../src/Field.ts"],"sourcesContent":["export * from './components/Field/index';\n"],"mappings":"AAAA,cAAc"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","renderField_unstable","useField_unstable","useFieldStyles_unstable","Field","forwardRef","props","ref","state","displayName"],"sources":["
|
1
|
+
{"version":3,"names":["React","renderField_unstable","useField_unstable","useFieldStyles_unstable","Field","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from './Field.types';\nimport { renderField_unstable } from './renderField';\nimport { useField_unstable } from './useField';\nimport { useFieldStyles_unstable } from './useFieldStyles';\n\nexport const Field: ForwardRefComponent<FieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref);\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nField.displayName = 'Field';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,iBAAiB,QAAQ;AAClC,SAASC,uBAAuB,QAAQ;AAExC,OAAO,MAAMC,KAAA,gBAAyCJ,KAAA,CAAMK,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrF,MAAMC,KAAA,GAAQN,iBAAA,CAAkBI,KAAA,EAAOC,GAAA;EACvCJ,uBAAA,CAAwBK,KAAA;EACxB,OAAOP,oBAAA,CAAqBO,KAAA;AAC9B;AAEAJ,KAAA,CAAMK,WAAW,GAAG"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
|
1
|
+
import * as React from 'react';
|
2
2
|
//# sourceMappingURL=Field.types.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["React"],"sources":["../../../src/components/Field/Field.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * The props added to the Field's child element.\n */\nexport type FieldChildProps = Pick<\n React.HTMLAttributes<HTMLElement>,\n 'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'\n>;\n\n/**\n * Slots of the Field component\n */\nexport type FieldSlots = {\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The label associated with the field.\n */\n label?: Slot<typeof Label>;\n\n /**\n * A message about the validation state. By default, this is an error message, but it can be a success, warning,\n * or custom message by setting `validationState`.\n */\n validationMessage?: Slot<'div'>;\n\n /**\n * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.\n *\n * The default depends on `validationState`:\n * * error: `<ErrorCircle12Filled />`\n * * warning: `<Warning12Filled />`\n * * success: `<CheckmarkCircle12Filled />`\n * * none: `null`\n */\n validationMessageIcon?: Slot<'span'>;\n\n /**\n * Additional hint text below the field.\n */\n hint?: Slot<'div'>;\n};\n\n/**\n * Field Props\n */\nexport type FieldProps = Omit<ComponentProps<FieldSlots>, 'children'> & {\n /**\n * The Field's child can be a single form control, or a render function that takes the props that should be spread on\n * a form control.\n *\n * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`), as well\n * as intrinsic form controls like `<input>` or `<textarea>`. Custom controls can also be used as long as they\n * accept FieldChildProps and spread them on the appropriate element.\n *\n * For more complex scenarios, a render function can be used to pass the FieldChildProps to the appropriate control.\n */\n children?: React.ReactElement<FieldChildProps> | null | ((props: FieldChildProps) => React.ReactNode);\n\n /**\n * The orientation of the label relative to the field component.\n * This only affects the label, and not the validationMessage or hint (which always appear below the field component).\n *\n * @default vertical\n */\n orientation?: 'vertical' | 'horizontal';\n\n /**\n * The `validationState` affects the display of the `validationMessage` and `validationMessageIcon`.\n *\n * * error: (default) The validation message has a red error icon and red text, with `role=\"alert\"` so it is\n * announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a\n * red border to some field components (such as `Input`).\n * * success: The validation message has a green checkmark icon and gray text.\n * * warning: The validation message has a yellow exclamation icon and gray text.\n * * none: The validation message has no icon and gray text.\n *\n * @default error when validationMessage is set; none otherwise.\n */\n validationState?: 'error' | 'warning' | 'success' | 'none';\n\n /**\n * Marks the Field as required. If `true`, an asterisk will be appended to the label, and `aria-required` will be set\n * on the Field's child.\n */\n required?: boolean;\n\n /**\n * The size of the Field's label.\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState = ComponentState<Required<FieldSlots>> &\n Required<Pick<FieldProps, 'orientation' | 'validationState'>>;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":[],"sources":["../../../src/components/Field/index.ts"],"sourcesContent":["export * from './Field.types';\nexport * from './Field';\nexport * from './renderField';\nexport * from './useField';\nexport * from './useFieldStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|
@@ -8,16 +8,6 @@ export const renderField_unstable = state => {
|
|
8
8
|
slots,
|
9
9
|
slotProps
|
10
10
|
} = getSlots(state);
|
11
|
-
return /*#__PURE__*/React.createElement(slots.root,
|
12
|
-
...slotProps.root
|
13
|
-
}, slots.label && /*#__PURE__*/React.createElement(slots.label, {
|
14
|
-
...slotProps.label
|
15
|
-
}), slotProps.root.children, slots.validationMessage && /*#__PURE__*/React.createElement(slots.validationMessage, {
|
16
|
-
...slotProps.validationMessage
|
17
|
-
}, slots.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, {
|
18
|
-
...slotProps.validationMessageIcon
|
19
|
-
}), slotProps.validationMessage.children), slots.hint && /*#__PURE__*/React.createElement(slots.hint, {
|
20
|
-
...slotProps.hint
|
21
|
-
}));
|
11
|
+
return /*#__PURE__*/React.createElement(slots.root, slotProps.root, slots.label && /*#__PURE__*/React.createElement(slots.label, slotProps.label), slotProps.root.children, slots.validationMessage && /*#__PURE__*/React.createElement(slots.validationMessage, slotProps.validationMessage, slots.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, slotProps.validationMessageIcon), slotProps.validationMessage.children), slots.hint && /*#__PURE__*/React.createElement(slots.hint, slotProps.hint));
|
22
12
|
};
|
23
13
|
//# sourceMappingURL=renderField.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","getSlots","renderField_unstable","state","slots","slotProps","createElement","root","label","children","validationMessage","validationMessageIcon","hint"],"sources":["
|
1
|
+
{"version":3,"names":["React","getSlots","renderField_unstable","state","slots","slotProps","createElement","root","label","children","validationMessage","validationMessageIcon","hint"],"sources":["../../../src/components/Field/renderField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = (state: FieldState) => {\n const { slots, slotProps } = getSlots<FieldSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label} />}\n {slotProps.root.children}\n {slots.validationMessage && (\n <slots.validationMessage {...slotProps.validationMessage}>\n {slots.validationMessageIcon && <slots.validationMessageIcon {...slotProps.validationMessageIcon} />}\n {slotProps.validationMessage.children}\n </slots.validationMessage>\n )}\n {slots.hint && <slots.hint {...slotProps.hint} />}\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;EAElD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,EAC3BH,KAAA,CAAMI,KAAK,iBAAIR,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMI,KAAK,EAAKH,SAAA,CAAUG,KAAK,GAC/CH,SAAA,CAAUE,IAAI,CAACE,QAAQ,EACvBL,KAAA,CAAMM,iBAAiB,iBACtBV,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMM,iBAAiB,EAAKL,SAAA,CAAUK,iBAAiB,EACrDN,KAAA,CAAMO,qBAAqB,iBAAIX,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMO,qBAAqB,EAAKN,SAAA,CAAUM,qBAAqB,GAC/FN,SAAA,CAAUK,iBAAiB,CAACD,QAAQ,GAGxCL,KAAA,CAAMQ,IAAI,iBAAIZ,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMQ,IAAI,EAAKP,SAAA,CAAUO,IAAI;AAGnD"}
|
@@ -1,3 +1,6 @@
|
|
1
|
+
var _controlProps, _arialabelledby,
|
2
|
+
// Assign the child a generated ID if doesn't already have an ID
|
3
|
+
_controlProps1, _controlProps2, _ariainvalid, _controlProps3, _ariarequired;
|
1
4
|
import * as React from 'react';
|
2
5
|
import { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';
|
3
6
|
import { Label } from '@fluentui/react-label';
|
@@ -18,7 +21,6 @@ const validationMessageIcons = {
|
|
18
21
|
* @param ref - Ref to the root
|
19
22
|
*/
|
20
23
|
export const useField_unstable = (props, ref) => {
|
21
|
-
var _a, _b, _c, _d;
|
22
24
|
const {
|
23
25
|
children,
|
24
26
|
orientation = 'vertical',
|
@@ -36,10 +38,8 @@ export const useField_unstable = (props, ref) => {
|
|
36
38
|
id: baseId + '__label',
|
37
39
|
required,
|
38
40
|
size
|
39
|
-
// htmlFor is handled below
|
40
41
|
}
|
41
42
|
});
|
42
|
-
|
43
43
|
const validationMessage = resolveShorthand(props.validationMessage, {
|
44
44
|
defaultProps: {
|
45
45
|
id: baseId + '__validationMessage',
|
@@ -58,14 +58,15 @@ export const useField_unstable = (props, ref) => {
|
|
58
58
|
children: defaultIcon
|
59
59
|
}
|
60
60
|
});
|
61
|
-
const controlProps = /*#__PURE__*/React.isValidElement(children) ? {
|
61
|
+
const controlProps = /*#__PURE__*/ /*#__PURE__*/React.isValidElement(children) ? {
|
62
62
|
...children.props
|
63
63
|
} : {};
|
64
64
|
if (label) {
|
65
|
-
|
65
|
+
var _;
|
66
|
+
(_ = (_controlProps = controlProps)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _controlProps[_arialabelledby] = label.id;
|
66
67
|
if (!label.htmlFor) {
|
67
|
-
|
68
|
-
(
|
68
|
+
var _id;
|
69
|
+
(_id = (_controlProps1 = controlProps).id) !== null && _id !== void 0 ? _id : _controlProps1.id = baseId + '__control';
|
69
70
|
label.htmlFor = controlProps.id;
|
70
71
|
}
|
71
72
|
}
|
@@ -76,10 +77,12 @@ export const useField_unstable = (props, ref) => {
|
|
76
77
|
controlProps['aria-describedby'] = [validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id, hint === null || hint === void 0 ? void 0 : hint.id, controlProps['aria-describedby']].filter(Boolean).join(' ');
|
77
78
|
}
|
78
79
|
if (validationState === 'error') {
|
79
|
-
|
80
|
+
var _1;
|
81
|
+
(_1 = (_controlProps2 = controlProps)[_ariainvalid = 'aria-invalid']) !== null && _1 !== void 0 ? _1 : _controlProps2[_ariainvalid] = true;
|
80
82
|
}
|
81
83
|
if (required) {
|
82
|
-
|
84
|
+
var _2;
|
85
|
+
(_2 = (_controlProps3 = controlProps)[_ariarequired = 'aria-required']) !== null && _2 !== void 0 ? _2 : _controlProps3[_ariarequired] = true;
|
83
86
|
}
|
84
87
|
if ( /*#__PURE__*/React.isValidElement(children)) {
|
85
88
|
root.children = /*#__PURE__*/React.cloneElement(children, controlProps);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","CheckmarkCircle12Filled","ErrorCircle12Filled","Warning12Filled","Label","getNativeElementProps","resolveShorthand","useId","validationMessageIcons","error","createElement","warning","success","none","undefined","useField_unstable","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","root","label","defaultProps","id","role","hint","defaultIcon","validationMessageIcon","controlProps","isValidElement","
|
1
|
+
{"version":3,"names":["_controlProps","_arialabelledby","_controlProps1","_controlProps2","_ariainvalid","_controlProps3","_ariarequired","React","CheckmarkCircle12Filled","ErrorCircle12Filled","Warning12Filled","Label","getNativeElementProps","resolveShorthand","useId","validationMessageIcons","error","createElement","warning","success","none","undefined","useField_unstable","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","root","label","defaultProps","id","role","hint","defaultIcon","validationMessageIcon","controlProps","isValidElement","_","htmlFor","_id","filter","Boolean","join","_1","_2","cloneElement","components"],"sources":["../../../src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldChildProps, FieldProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n none: undefined,\n} as const;\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivElement>): FieldState => {\n const {\n children,\n orientation = 'vertical',\n required,\n validationState = props.validationMessage ? 'error' : 'none',\n size,\n } = props;\n\n const baseId = useId('field-');\n\n const root = getNativeElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']);\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n id: baseId + '__label',\n required,\n size,\n // htmlFor is handled below\n },\n });\n\n const validationMessage = resolveShorthand(props.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n role: validationState === 'error' ? 'alert' : undefined,\n },\n });\n\n const hint = resolveShorthand(props.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const defaultIcon = validationMessageIcons[validationState];\n const validationMessageIcon = resolveShorthand(props.validationMessageIcon, {\n required: !!defaultIcon,\n defaultProps: {\n children: defaultIcon,\n },\n });\n\n const controlProps: FieldChildProps = React.isValidElement(children) ? { ...children.props } : {};\n\n if (label) {\n controlProps['aria-labelledby'] ??= label.id;\n\n if (!label.htmlFor) {\n // Assign the child a generated ID if doesn't already have an ID\n controlProps.id ??= baseId + '__control';\n label.htmlFor = controlProps.id;\n }\n }\n\n if (validationMessage || hint) {\n // The control is described by the validation message, or hint, or both\n // We also preserve and append any aria-describedby supplied by the user\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n controlProps['aria-describedby'] = [validationMessage?.id, hint?.id, controlProps['aria-describedby']]\n .filter(Boolean)\n .join(' ');\n }\n\n if (validationState === 'error') {\n controlProps['aria-invalid'] ??= true;\n }\n\n if (required) {\n controlProps['aria-required'] ??= true;\n }\n\n if (React.isValidElement(children)) {\n root.children = React.cloneElement(children, controlProps);\n } else if (typeof children === 'function') {\n root.children = children(controlProps);\n }\n\n return {\n orientation,\n validationState,\n components: {\n root: 'div',\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div',\n },\n root,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n};\n"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","z8tnut","Byoj8tv","large","vertical","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","useSecondaryTextBaseClassName","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","useFieldStyles_unstable","state","validationState","orientation","rootStyles","className","labelStyles","size","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"sources":["
|
1
|
+
{"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","z8tnut","Byoj8tv","large","vertical","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","useSecondaryTextBaseClassName","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","useFieldStyles_unstable","state","validationState","orientation","rootStyles","className","labelStyles","size","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"sources":["../../../src/components/Field/useFieldStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldSlots, FieldState } from './Field.types';\n\nexport const fieldClassNames: SlotClassNames<FieldSlots> = {\n root: `fui-Field`,\n label: `fui-Field__label`,\n validationMessage: `fui-Field__validationMessage`,\n validationMessageIcon: `fui-Field__validationMessageIcon`,\n hint: `fui-Field__hint`,\n};\n\n// Size of the icon in the validation message\nconst iconSize = '12px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'grid',\n },\n\n // In horizontal layout, the field is a grid with the label taking up the entire first column.\n // The last row is slack space in case the label is taller than the rest of the content.\n horizontal: {\n gridTemplateColumns: '33% 1fr',\n gridTemplateRows: 'auto auto auto 1fr',\n },\n\n // In horizontal layout without a label, replace the label's column with padding.\n // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n horizontalNoLabel: {\n paddingLeft: '33%',\n gridTemplateColumns: '1fr',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n paddingTop: tokens.spacingVerticalXXS,\n paddingBottom: tokens.spacingVerticalXXS,\n },\n\n large: {\n paddingTop: '1px',\n paddingBottom: '1px',\n },\n\n vertical: {\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n verticalLarge: {\n marginBottom: tokens.spacingVerticalXS,\n },\n\n horizontal: {\n marginRight: tokens.spacingHorizontalM,\n gridRowStart: '1',\n gridRowEnd: '-1',\n },\n});\n\nconst useSecondaryTextBaseClassName = makeResetStyles({\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1,\n});\n\nconst useSecondaryTextStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n\n withIcon: {\n // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`,\n },\n});\n\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n display: 'inline-block',\n fontSize: iconSize,\n // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n marginRight: tokens.spacingHorizontalXS,\n // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n lineHeight: '0',\n // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n verticalAlign: '-1px',\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n warning: {\n color: tokens.colorPaletteDarkOrangeForeground1,\n },\n success: {\n color: tokens.colorPaletteGreenForeground1,\n },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = (state: FieldState) => {\n const { validationState } = state;\n const horizontal = state.orientation === 'horizontal';\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n fieldClassNames.root,\n rootStyles.base,\n horizontal && rootStyles.horizontal,\n horizontal && !state.label && rootStyles.horizontalNoLabel,\n state.root.className,\n );\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n fieldClassNames.label,\n labelStyles.base,\n horizontal && labelStyles.horizontal,\n !horizontal && labelStyles.vertical,\n state.label.size === 'large' && labelStyles.large,\n !horizontal && state.label.size === 'large' && labelStyles.verticalLarge,\n state.label.className,\n );\n }\n\n const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n fieldClassNames.validationMessageIcon,\n validationMessageIconBaseClassName,\n validationState !== 'none' && validationMessageIconStyles[validationState],\n state.validationMessageIcon.className,\n );\n }\n\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(\n fieldClassNames.validationMessage,\n secondaryTextBaseClassName,\n validationState === 'error' && secondaryTextStyles.error,\n !!state.validationMessageIcon && secondaryTextStyles.withIcon,\n state.validationMessage.className,\n );\n }\n\n if (state.hint) {\n state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n }\n};\n"],"mappings":"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"}
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","getDeprecatedFieldClassNames","makeDeprecatedField"],"sources":["../src/index.ts"],"sourcesContent":["export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport type { FieldProps, FieldSlots, FieldState } from './Field';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { getDeprecatedFieldClassNames, makeDeprecatedField } from './util/makeDeprecatedField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { DeprecatedFieldProps } from './util/makeDeprecatedField';\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ;AAGzG;AACA,SAASC,4BAA4B,EAAEC,mBAAmB,QAAQ"}
|
@@ -1,5 +1,4 @@
|
|
1
|
-
/* eslint-disable deprecation/deprecation */
|
2
|
-
import * as React from 'react';
|
1
|
+
/* eslint-disable deprecation/deprecation */import * as React from 'react';
|
3
2
|
import { Field, fieldClassNames } from '../Field';
|
4
3
|
/**
|
5
4
|
* Partition the props used by the Field itself, from the props that are passed to the underlying field component.
|
@@ -50,9 +49,7 @@ export function makeDeprecatedField(Control, options = {}) {
|
|
50
49
|
} = options;
|
51
50
|
const DeprecatedField = /*#__PURE__*/React.forwardRef((props, ref) => {
|
52
51
|
const [fieldProps, controlProps] = getPartitionedFieldProps(mapProps(props));
|
53
|
-
return /*#__PURE__*/React.createElement(Field, {
|
54
|
-
...fieldProps
|
55
|
-
}, /*#__PURE__*/React.createElement(Control, {
|
52
|
+
return /*#__PURE__*/React.createElement(Field, fieldProps, /*#__PURE__*/React.createElement(Control, {
|
56
53
|
...controlProps,
|
57
54
|
ref: ref
|
58
55
|
}));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","Field","fieldClassNames","getPartitionedFieldProps","props","className","control","hint","label","orientation","required","root","size","style","validationMessage","validationMessageIcon","validationState","restOfProps","makeDeprecatedField","Control","options","mapProps","displayName","DeprecatedField","forwardRef","ref","fieldProps","controlProps","createElement","getDeprecatedFieldClassNames","controlRootClassName"],"sources":["
|
1
|
+
{"version":3,"names":["React","Field","fieldClassNames","getPartitionedFieldProps","props","className","control","hint","label","orientation","required","root","size","style","validationMessage","validationMessageIcon","validationState","restOfProps","makeDeprecatedField","Control","options","mapProps","displayName","DeprecatedField","forwardRef","ref","fieldProps","controlProps","createElement","getDeprecatedFieldClassNames","controlRootClassName"],"sources":["../../src/util/makeDeprecatedField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport * as React from 'react';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../Field';\nimport { Field, fieldClassNames } from '../Field';\n\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport type DeprecatedFieldProps<ControlProps> = ControlProps & {\n root?: FieldProps;\n control?: ControlProps;\n} & Pick<\n FieldProps,\n | 'className'\n | 'hint'\n | 'label'\n | 'orientation'\n | 'style'\n | 'validationMessage'\n | 'validationMessageIcon'\n | 'validationState'\n >;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nfunction getPartitionedFieldProps<ControlProps>(\n props: DeprecatedFieldProps<ControlProps> & Pick<FieldProps, 'required' | 'size'>,\n) {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n required,\n root,\n size,\n style,\n validationMessage,\n validationMessageIcon,\n validationState = 'none',\n ...restOfProps\n } = props;\n\n return [\n {\n className,\n hint,\n label,\n orientation,\n required,\n size,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...root,\n },\n {\n required,\n size,\n ...restOfProps,\n ...control,\n },\n ];\n}\n\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport function makeDeprecatedField<ControlProps>(\n Control: React.ComponentType<ControlProps>,\n options: {\n mapProps?: (props: DeprecatedFieldProps<ControlProps>) => DeprecatedFieldProps<ControlProps>;\n displayName?: string;\n } = {},\n) {\n const { mapProps = props => props, displayName = `${Control.displayName}Field` } = options;\n\n const DeprecatedField = React.forwardRef((props, ref) => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(mapProps(props));\n return (\n <Field {...fieldProps}>\n {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n <Control {...(controlProps as any)} ref={ref as any} />\n </Field>\n );\n }) as ForwardRefComponent<DeprecatedFieldProps<ControlProps>>;\n\n DeprecatedField.displayName = displayName;\n\n return DeprecatedField;\n}\n\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport const getDeprecatedFieldClassNames = (controlRootClassName: string) => ({\n ...fieldClassNames,\n control: controlRootClassName,\n});\n"],"mappings":"AAAA,4CACA,YAAYA,KAAA,MAAW;AAGvB,SAASC,KAAK,EAAEC,eAAe,QAAQ;AAqBvC;;;AAGA,SAASC,yBACPC,KAAiF,EACjF;EACA,MAAM;IACJC,SAAA;IACAC,OAAA;IACAC,IAAA;IACAC,KAAA;IACAC,WAAA;IACAC,QAAA;IACAC,IAAA;IACAC,IAAA;IACAC,KAAA;IACAC,iBAAA;IACAC,qBAAA;IACAC,eAAA,GAAkB;IAClB,GAAGC;EAAA,CACJ,GAAGb,KAAA;EAEJ,OAAO,CACL;IACEC,SAAA;IACAE,IAAA;IACAC,KAAA;IACAC,WAAA;IACAC,QAAA;IACAE,IAAA;IACAC,KAAA;IACAC,iBAAA;IACAC,qBAAA;IACAC,eAAA;IACA,GAAGL;EACL,GACA;IACED,QAAA;IACAE,IAAA;IACA,GAAGK,WAAW;IACd,GAAGX;EACL,EACD;AACH;AAEA;;;;AAIA,OAAO,SAASY,oBACdC,OAA0C,EAC1CC,OAAA,GAGI,CAAC,CAAC,EACN;EACA,MAAM;IAAEC,QAAA,GAAWjB,KAAA,IAASA,KAAA;IAAOkB,WAAA,GAAe,GAAEH,OAAA,CAAQG,WAAY;EAAM,CAAE,GAAGF,OAAA;EAEnF,MAAMG,eAAA,gBAAkBvB,KAAA,CAAMwB,UAAU,CAAC,CAACpB,KAAA,EAAOqB,GAAA,KAAQ;IACvD,MAAM,CAACC,UAAA,EAAYC,YAAA,CAAa,GAAGxB,wBAAA,CAAyBkB,QAAA,CAASjB,KAAA;IACrE,oBACEJ,KAAA,CAAA4B,aAAA,CAAC3B,KAAA,EAAUyB,UAAA,eAET1B,KAAA,CAAA4B,aAAA,CAACT,OAAA;MAAS,GAAIQ,YAAY;MAAUF,GAAA,EAAKA;;EAG/C;EAEAF,eAAA,CAAgBD,WAAW,GAAGA,WAAA;EAE9B,OAAOC,eAAA;AACT;AAEA;;;;AAIA,OAAO,MAAMM,4BAAA,GAAgCC,oBAAA,KAAkC;EAC7E,GAAG5B,eAAe;EAClBI,OAAA,EAASwB;AACX"}
|
package/lib-commonjs/Field.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/Field/index"), exports);
|
7
|
+
//# sourceMappingURL=Field.js.map
|
8
|
+
|
8
9
|
//# sourceMappingURL=Field.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../lib/Field.js"],"sourcesContent":["export * from './components/Field/index';\n//# sourceMappingURL=Field.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,iCAAiC"}
|
@@ -1,17 +1,21 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "Field", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>Field
|
5
8
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
const
|
9
|
-
const
|
10
|
-
const
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
11
|
+
const _renderField = require("./renderField");
|
12
|
+
const _useField = require("./useField");
|
13
|
+
const _useFieldStyles = require("./useFieldStyles");
|
14
|
+
const Field = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
15
|
+
const state = (0, _useField.useField_unstable)(props, ref);
|
16
|
+
(0, _useFieldStyles.useFieldStyles_unstable)(state);
|
17
|
+
return (0, _renderField.renderField_unstable)(state);
|
15
18
|
});
|
16
|
-
|
19
|
+
Field.displayName = 'Field'; //# sourceMappingURL=Field.js.map
|
20
|
+
|
17
21
|
//# sourceMappingURL=Field.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../lib/components/Field/Field.js"],"sourcesContent":["import * as React from 'react';\nimport { renderField_unstable } from './renderField';\nimport { useField_unstable } from './useField';\nimport { useFieldStyles_unstable } from './useFieldStyles';\nexport const Field = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref);\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\nField.displayName = 'Field';\n//# sourceMappingURL=Field.js.map"],"names":["Field","React","forwardRef","props","ref","state","useField_unstable","useFieldStyles_unstable","renderField_unstable","displayName"],"mappings":";;;;+BAIaA;;aAAAA;;;6DAJU;6BACc;0BACH;gCACM;AACjC,MAAMA,QAAQ,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjE,MAAMC,QAAQC,IAAAA,2BAAiB,EAACH,OAAOC;IACvCG,IAAAA,uCAAuB,EAACF;IACxB,OAAOG,IAAAA,iCAAoB,EAACH;AAC9B;AACAL,MAAMS,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=Field.types.js.map
|
8
|
+
|
6
9
|
//# sourceMappingURL=Field.types.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../lib/components/Field/Field.types.js"],"sourcesContent":["import * as React from 'react';\n//# sourceMappingURL=Field.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("./Field.types"), exports);
|
7
|
+
_exportStar(require("./Field"), exports);
|
8
|
+
_exportStar(require("./renderField"), exports);
|
9
|
+
_exportStar(require("./useField"), exports);
|
10
|
+
_exportStar(require("./useFieldStyles"), exports);
|
11
|
+
//# sourceMappingURL=index.js.map
|
12
|
+
|
12
13
|
//# sourceMappingURL=index.js.map
|