@fluentui/react-field 0.0.0-nightly-20230223-2115.1 → 0.0.0-nightly-20230227-0424.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +13 -13
- package/CHANGELOG.md +9 -9
- 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 +11 -2
- package/lib/components/Field/renderField.js.map +1 -1
- package/lib/components/Field/useField.js +9 -8
- 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 +7 -5
- package/lib/util/makeDeprecatedField.js.map +1 -1
- package/lib-commonjs/Field.js +4 -5
- package/lib-commonjs/Field.js.map +1 -1
- package/lib-commonjs/components/Field/Field.js +12 -16
- package/lib-commonjs/components/Field/Field.js.map +1 -1
- package/lib-commonjs/components/Field/Field.types.js +2 -5
- package/lib-commonjs/components/Field/Field.types.js.map +1 -1
- package/lib-commonjs/components/Field/index.js +8 -9
- package/lib-commonjs/components/Field/index.js.map +1 -1
- package/lib-commonjs/components/Field/renderField.js +26 -15
- package/lib-commonjs/components/Field/renderField.js.map +1 -1
- package/lib-commonjs/components/Field/useField.js +102 -94
- package/lib-commonjs/components/Field/useField.js.map +1 -1
- package/lib-commonjs/components/Field/useFieldStyles.js +96 -137
- package/lib-commonjs/components/Field/useFieldStyles.js.map +1 -1
- package/lib-commonjs/index.js +49 -21
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/util/makeDeprecatedField.js +72 -56
- package/lib-commonjs/util/makeDeprecatedField.js.map +1 -1
- package/package.json +8 -8
- package/.swcrc +0 -33
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-field",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-field_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Mon, 27 Feb 2023 04:31:23 GMT",
|
|
6
|
+
"tag": "@fluentui/react-field_v0.0.0-nightly-20230227-0424.1",
|
|
7
|
+
"version": "0.0.0-nightly-20230227-0424.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,32 +16,32 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-field",
|
|
19
|
-
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230227-0424.1",
|
|
20
|
+
"commit": "aa8e336db1e2cb3ce6a73000564bfb59f2fbdf3d"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-field",
|
|
25
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230227-0424.1",
|
|
26
|
+
"commit": "aa8e336db1e2cb3ce6a73000564bfb59f2fbdf3d"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-field",
|
|
31
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230227-0424.1",
|
|
32
|
+
"commit": "aa8e336db1e2cb3ce6a73000564bfb59f2fbdf3d"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-field",
|
|
37
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230227-0424.1",
|
|
38
|
+
"commit": "aa8e336db1e2cb3ce6a73000564bfb59f2fbdf3d"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-field",
|
|
43
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230227-0424.1",
|
|
44
|
+
"commit": "aa8e336db1e2cb3ce6a73000564bfb59f2fbdf3d"
|
|
45
45
|
}
|
|
46
46
|
]
|
|
47
47
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-field
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 27 Feb 2023 04:31:23 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20230227-0424.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20230227-0424.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.21..@fluentui/react-field_v0.0.0-nightly-
|
|
9
|
+
Mon, 27 Feb 2023 04:31:23 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.21..@fluentui/react-field_v0.0.0-nightly-20230227-0424.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20230227-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/aa8e336db1e2cb3ce6a73000564bfb59f2fbdf3d) by beachball)
|
|
16
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20230227-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/aa8e336db1e2cb3ce6a73000564bfb59f2fbdf3d) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230227-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/aa8e336db1e2cb3ce6a73000564bfb59f2fbdf3d) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230227-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/aa8e336db1e2cb3ce6a73000564bfb59f2fbdf3d) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230227-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/aa8e336db1e2cb3ce6a73000564bfb59f2fbdf3d) by beachball)
|
|
20
20
|
|
|
21
21
|
## [9.0.0-alpha.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.21)
|
|
22
22
|
|
package/lib/Field.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-field/src/Field.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Field/index';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,uBAAuB,QAAQ,kBAAkB;AAE1D,OAAO,MAAMC,KAAK,gBAAoCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGN,iBAAiB,CAACI,KAAK,EAAEC,GAAG,CAAC;EAC3CJ,uBAAuB,CAACK,KAAK,CAAC;EAC9B,OAAOP,oBAAoB,CAACO,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,KAAK,CAACK,WAAW,GAAG,OAAO","names":["React","renderField_unstable","useField_unstable","useFieldStyles_unstable","Field","forwardRef","props","ref","state","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/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"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
export {};
|
|
2
2
|
//# sourceMappingURL=Field.types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Field.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/Field.types.ts"],"names":[],"mappings":"","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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Field.types';\nexport * from './Field';\nexport * from './renderField';\nexport * from './useField';\nexport * from './useFieldStyles';\n"]}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import _extends from "@swc/helpers/src/_extends.mjs";
|
|
2
1
|
import * as React from 'react';
|
|
3
2
|
import { getSlots } from '@fluentui/react-utilities';
|
|
4
3
|
/**
|
|
@@ -9,6 +8,16 @@ export const renderField_unstable = state => {
|
|
|
9
8
|
slots,
|
|
10
9
|
slotProps
|
|
11
10
|
} = getSlots(state);
|
|
12
|
-
return /*#__PURE__*/React.createElement(slots.root,
|
|
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
|
+
}));
|
|
13
22
|
};
|
|
14
23
|
//# sourceMappingURL=renderField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAaE,KAAK,CAAC;EAExD,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BF,KAAK,CAACG,KAAK,iBAAIP,oBAACI,KAAK,CAACG,KAAK;IAAA,GAAKF,SAAS,CAACE;EAAK,EAAI,EACnDF,SAAS,CAACC,IAAI,CAACE,QAAQ,EACvBJ,KAAK,CAACK,iBAAiB,iBACtBT,oBAACI,KAAK,CAACK,iBAAiB;IAAA,GAAKJ,SAAS,CAACI;EAAiB,GACrDL,KAAK,CAACM,qBAAqB,iBAAIV,oBAACI,KAAK,CAACM,qBAAqB;IAAA,GAAKL,SAAS,CAACK;EAAqB,EAAI,EACnGL,SAAS,CAACI,iBAAiB,CAACD,QAAQ,CAExC,EACAJ,KAAK,CAACO,IAAI,iBAAIX,oBAACI,KAAK,CAACO,IAAI;IAAA,GAAKN,SAAS,CAACM;EAAI,EAAI,CACtC;AAEjB,CAAC","names":["React","getSlots","renderField_unstable","state","slots","slotProps","root","label","children","validationMessage","validationMessageIcon","hint"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/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"]}
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
var _controlProps, _arialabelledby,
|
|
2
|
-
// Assign the child a generated ID if doesn't already have an ID
|
|
3
|
-
_controlProps1, _controlProps2, _ariainvalid, _controlProps3, _ariarequired;
|
|
4
1
|
import * as React from 'react';
|
|
5
2
|
import { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';
|
|
6
3
|
import { Label } from '@fluentui/react-label';
|
|
@@ -21,6 +18,7 @@ const validationMessageIcons = {
|
|
|
21
18
|
* @param ref - Ref to the root
|
|
22
19
|
*/
|
|
23
20
|
export const useField_unstable = (props, ref) => {
|
|
21
|
+
var _a, _b, _c, _d;
|
|
24
22
|
const {
|
|
25
23
|
children,
|
|
26
24
|
orientation = 'vertical',
|
|
@@ -38,8 +36,10 @@ export const useField_unstable = (props, ref) => {
|
|
|
38
36
|
id: baseId + '__label',
|
|
39
37
|
required,
|
|
40
38
|
size
|
|
39
|
+
// htmlFor is handled below
|
|
41
40
|
}
|
|
42
41
|
});
|
|
42
|
+
|
|
43
43
|
const validationMessage = resolveShorthand(props.validationMessage, {
|
|
44
44
|
defaultProps: {
|
|
45
45
|
id: baseId + '__validationMessage',
|
|
@@ -58,13 +58,14 @@ export const useField_unstable = (props, ref) => {
|
|
|
58
58
|
children: defaultIcon
|
|
59
59
|
}
|
|
60
60
|
});
|
|
61
|
-
const controlProps = /*#__PURE__*/
|
|
61
|
+
const controlProps = /*#__PURE__*/React.isValidElement(children) ? {
|
|
62
62
|
...children.props
|
|
63
63
|
} : {};
|
|
64
64
|
if (label) {
|
|
65
|
-
(
|
|
65
|
+
(_a = controlProps['aria-labelledby']) !== null && _a !== void 0 ? _a : controlProps['aria-labelledby'] = label.id;
|
|
66
66
|
if (!label.htmlFor) {
|
|
67
|
-
|
|
67
|
+
// Assign the child a generated ID if doesn't already have an ID
|
|
68
|
+
(_b = controlProps.id) !== null && _b !== void 0 ? _b : controlProps.id = baseId + '__control';
|
|
68
69
|
label.htmlFor = controlProps.id;
|
|
69
70
|
}
|
|
70
71
|
}
|
|
@@ -75,10 +76,10 @@ export const useField_unstable = (props, ref) => {
|
|
|
75
76
|
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(' ');
|
|
76
77
|
}
|
|
77
78
|
if (validationState === 'error') {
|
|
78
|
-
(
|
|
79
|
+
(_c = controlProps['aria-invalid']) !== null && _c !== void 0 ? _c : controlProps['aria-invalid'] = true;
|
|
79
80
|
}
|
|
80
81
|
if (required) {
|
|
81
|
-
(
|
|
82
|
+
(_d = controlProps['aria-required']) !== null && _d !== void 0 ? _d : controlProps['aria-required'] = true;
|
|
82
83
|
}
|
|
83
84
|
if ( /*#__PURE__*/React.isValidElement(children)) {
|
|
84
85
|
root.children = /*#__PURE__*/React.cloneElement(children, controlProps);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,uBAAuB,EAAEC,mBAAmB,EAAEC,eAAe,QAAQ,uBAAuB;AACrG,SAASC,KAAK,QAAQ,uBAAuB;AAC7C,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,2BAA2B;AAG1F,MAAMC,sBAAsB,GAAG;EAC7BC,KAAK,eAAET,oBAACE,mBAAmB,OAAG;EAC9BQ,OAAO,eAAEV,oBAACG,eAAe,OAAG;EAC5BQ,OAAO,eAAEX,oBAACC,uBAAuB,OAAG;EACpCW,IAAI,EAAEC;CACE;AAEV;;;;;;;;;AASA,OAAO,MAAMC,iBAAiB,GAAG,CAACC,KAAiB,EAAEC,GAA8B,KAAgB;;EACjG,MAAM;IACJC,QAAQ;IACRC,WAAW,GAAG,UAAU;IACxBC,QAAQ;IACRC,eAAe,GAAGL,KAAK,CAACM,iBAAiB,GAAG,OAAO,GAAG,MAAM;IAC5DC;EAAI,CACL,GAAGP,KAAK;EAET,MAAMQ,MAAM,GAAGhB,KAAK,CAAC,QAAQ,CAAC;EAE9B,MAAMiB,IAAI,GAAGnB,qBAAqB,CAAC,KAAK,EAAE;IAAE,GAAGU,KAAK;IAAEC;EAAG,CAAE,EAAE,sBAAuB,CAAC,UAAU,CAAC,CAAC;EAEjG,MAAMS,KAAK,GAAGnB,gBAAgB,CAACS,KAAK,CAACU,KAAK,EAAE;IAC1CC,YAAY,EAAE;MACZC,EAAE,EAAEJ,MAAM,GAAG,SAAS;MACtBJ,QAAQ;MACRG;MACA;;GAEH,CAAC;;EAEF,MAAMD,iBAAiB,GAAGf,gBAAgB,CAACS,KAAK,CAACM,iBAAiB,EAAE;IAClEK,YAAY,EAAE;MACZC,EAAE,EAAEJ,MAAM,GAAG,qBAAqB;MAClCK,IAAI,EAAER,eAAe,KAAK,OAAO,GAAG,OAAO,GAAGP;;GAEjD,CAAC;EAEF,MAAMgB,IAAI,GAAGvB,gBAAgB,CAACS,KAAK,CAACc,IAAI,EAAE;IACxCH,YAAY,EAAE;MACZC,EAAE,EAAEJ,MAAM,GAAG;;GAEhB,CAAC;EAEF,MAAMO,WAAW,GAAGtB,sBAAsB,CAACY,eAAe,CAAC;EAC3D,MAAMW,qBAAqB,GAAGzB,gBAAgB,CAACS,KAAK,CAACgB,qBAAqB,EAAE;IAC1EZ,QAAQ,EAAE,CAAC,CAACW,WAAW;IACvBJ,YAAY,EAAE;MACZT,QAAQ,EAAEa;;GAEb,CAAC;EAEF,MAAME,YAAY,GAAoB,kBAAK,CAACC,cAAc,CAAChB,QAAQ,CAAC,GAAG;IAAE,GAAGA,QAAQ,CAACF;EAAK,CAAE,GAAG,EAAE;EAEjG,IAAIU,KAAK,EAAE;IACT,kBAAY,CAAC,iBAAiB,oCAA9BO,YAAY,CAAC,iBAAiB,IAAMP,KAAK,CAACE,EAAE;IAE5C,IAAI,CAACF,KAAK,CAACS,OAAO,EAAE;MAClB;MACA,kBAAY,CAACP,EAAE,mCAAfK,YAAY,CAACL,EAAE,GAAKJ,MAAM,GAAG,WAAW;MACxCE,KAAK,CAACS,OAAO,GAAGF,YAAY,CAACL,EAAE;;;EAInC,IAAIN,iBAAiB,IAAIQ,IAAI,EAAE;IAC7B;IACA;IACA;IACAG,YAAY,CAAC,kBAAkB,CAAC,GAAG,CAACX,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAEM,EAAE,EAAEE,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEF,EAAE,EAAEK,YAAY,CAAC,kBAAkB,CAAC,CAAC,CACnGG,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,GAAG,CAAC;;EAGd,IAAIjB,eAAe,KAAK,OAAO,EAAE;IAC/B,kBAAY,CAAC,cAAc,oCAA3BY,YAAY,CAAC,cAAc,IAAM,IAAI;;EAGvC,IAAIb,QAAQ,EAAE;IACZ,kBAAY,CAAC,eAAe,oCAA5Ba,YAAY,CAAC,eAAe,IAAM,IAAI;;EAGxC,kBAAIhC,KAAK,CAACiC,cAAc,CAAChB,QAAQ,CAAC,EAAE;IAClCO,IAAI,CAACP,QAAQ,gBAAGjB,KAAK,CAACsC,YAAY,CAACrB,QAAQ,EAAEe,YAAY,CAAC;GAC3D,MAAM,IAAI,OAAOf,QAAQ,KAAK,UAAU,EAAE;IACzCO,IAAI,CAACP,QAAQ,GAAGA,QAAQ,CAACe,YAAY,CAAC;;EAGxC,OAAO;IACLd,WAAW;IACXE,eAAe;IACfmB,UAAU,EAAE;MACVf,IAAI,EAAE,KAAK;MACXC,KAAK,EAAErB,KAAK;MACZiB,iBAAiB,EAAE,KAAK;MACxBU,qBAAqB,EAAE,MAAM;MAC7BF,IAAI,EAAE;KACP;IACDL,IAAI;IACJC,KAAK;IACLM,qBAAqB;IACrBV,iBAAiB;IACjBQ;GACD;AACH,CAAC","names":["React","CheckmarkCircle12Filled","ErrorCircle12Filled","Warning12Filled","Label","getNativeElementProps","resolveShorthand","useId","validationMessageIcons","error","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","filter","Boolean","join","cloneElement","components"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,SAASA,MAAM,EAAEC,gBAAgB,QAAQ;
|
|
1
|
+
{"version":3,"mappings":"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","names":["tokens","typographyStyles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","useLabelStyles","useSecondaryTextBaseClassName","useSecondaryTextStyles","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","useFieldStyles_unstable","state","validationState","horizontal","orientation","rootStyles","className","base","horizontalNoLabel","labelStyles","vertical","size","large","verticalLarge","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles","error","withIcon"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/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"]}
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-field/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGnH,mDAAmD;AACnD,OAAO,EAAE,4BAA4B,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC","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"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* eslint-disable deprecation/deprecation */
|
|
1
|
+
/* eslint-disable deprecation/deprecation */
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { Field, fieldClassNames } from '../Field';
|
|
4
4
|
/**
|
|
@@ -43,17 +43,19 @@ function getPartitionedFieldProps(props) {
|
|
|
43
43
|
* @deprecated Only for use to make deprecated [Control]Field shim components.
|
|
44
44
|
* @internal
|
|
45
45
|
*/
|
|
46
|
-
export function makeDeprecatedField(Control) {
|
|
47
|
-
let options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
|
|
46
|
+
export function makeDeprecatedField(Control, options = {}) {
|
|
48
47
|
const {
|
|
49
48
|
mapProps = props => props,
|
|
50
49
|
displayName = `${Control.displayName}Field`
|
|
51
50
|
} = options;
|
|
52
51
|
const DeprecatedField = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
53
52
|
const [fieldProps, controlProps] = getPartitionedFieldProps(mapProps(props));
|
|
54
|
-
return /*#__PURE__*/React.createElement(Field,
|
|
53
|
+
return /*#__PURE__*/React.createElement(Field, {
|
|
54
|
+
...fieldProps
|
|
55
|
+
}, /*#__PURE__*/React.createElement(Control, {
|
|
56
|
+
...controlProps,
|
|
55
57
|
ref: ref
|
|
56
|
-
}))
|
|
58
|
+
}));
|
|
57
59
|
});
|
|
58
60
|
DeprecatedField.displayName = displayName;
|
|
59
61
|
return DeprecatedField;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA
|
|
1
|
+
{"version":3,"mappings":"AAAA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SAASC,KAAK,EAAEC,eAAe,QAAQ,UAAU;AAqBjD;;;AAGA,SAASC,wBAAwB,CAC/BC,KAAiF;EAEjF,MAAM;IACJC,SAAS;IACTC,OAAO;IACPC,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,QAAQ;IACRC,IAAI;IACJC,IAAI;IACJC,KAAK;IACLC,iBAAiB;IACjBC,qBAAqB;IACrBC,eAAe,GAAG,MAAM;IACxB,GAAGC;EAAW,CACf,GAAGb,KAAK;EAET,OAAO,CACL;IACEC,SAAS;IACTE,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,QAAQ;IACRE,IAAI;IACJC,KAAK;IACLC,iBAAiB;IACjBC,qBAAqB;IACrBC,eAAe;IACf,GAAGL;GACJ,EACD;IACED,QAAQ;IACRE,IAAI;IACJ,GAAGK,WAAW;IACd,GAAGX;GACJ,CACF;AACH;AAEA;;;;AAIA,OAAM,SAAUY,mBAAmB,CACjCC,OAA0C,EAC1CC,UAGI,EAAE;EAEN,MAAM;IAAEC,QAAQ,GAAGjB,KAAK,IAAIA,KAAK;IAAEkB,WAAW,GAAG,GAAGH,OAAO,CAACG,WAAW;EAAO,CAAE,GAAGF,OAAO;EAE1F,MAAMG,eAAe,gBAAGvB,KAAK,CAACwB,UAAU,CAAC,CAACpB,KAAK,EAAEqB,GAAG,KAAI;IACtD,MAAM,CAACC,UAAU,EAAEC,YAAY,CAAC,GAAGxB,wBAAwB,CAACkB,QAAQ,CAACjB,KAAK,CAAC,CAAC;IAC5E,oBACEJ,oBAACC,KAAK;MAAA,GAAKyB;IAAU,gBAEnB1B,oBAACmB,OAAO;MAAA,GAAMQ,YAAoB;MAAEF,GAAG,EAAEA;IAAU,EAAI,CACjD;EAEZ,CAAC,CAA4D;EAE7DF,eAAe,CAACD,WAAW,GAAGA,WAAW;EAEzC,OAAOC,eAAe;AACxB;AAEA;;;;AAIA,OAAO,MAAMK,4BAA4B,GAAIC,oBAA4B,KAAM;EAC7E,GAAG3B,eAAe;EAClBI,OAAO,EAAEuB;CACV,CAAC","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","getDeprecatedFieldClassNames","controlRootClassName"],"sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-field/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"]}
|
package/lib-commonjs/Field.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
|
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
|
|
4
|
+
value: true
|
|
4
5
|
});
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
//# sourceMappingURL=Field.js.map
|
|
8
|
-
|
|
6
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
7
|
+
tslib_1.__exportStar(require("./components/Field/index"), exports);
|
|
9
8
|
//# sourceMappingURL=Field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"","sources":["../../../../../../../packages/react-components/react-field/src/Field.ts"],"sourcesContent":["export * from './components/Field/index';\n"]}
|
|
@@ -1,21 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
|
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "Field", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: ()=>Field
|
|
4
|
+
value: true
|
|
8
5
|
});
|
|
9
|
-
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
6
|
+
exports.Field = void 0;
|
|
7
|
+
const React = /*#__PURE__*/require("react");
|
|
8
|
+
const renderField_1 = /*#__PURE__*/require("./renderField");
|
|
9
|
+
const useField_1 = /*#__PURE__*/require("./useField");
|
|
10
|
+
const useFieldStyles_1 = /*#__PURE__*/require("./useFieldStyles");
|
|
11
|
+
exports.Field = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
12
|
+
const state = useField_1.useField_unstable(props, ref);
|
|
13
|
+
useFieldStyles_1.useFieldStyles_unstable(state);
|
|
14
|
+
return renderField_1.renderField_unstable(state);
|
|
18
15
|
});
|
|
19
|
-
Field.displayName = 'Field';
|
|
20
|
-
|
|
16
|
+
exports.Field.displayName = 'Field';
|
|
21
17
|
//# sourceMappingURL=Field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAGA;AACA;AACA;AAEaA,aAAK,gBAAoCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGC,4BAAiB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAC3CG,wCAAuB,CAACF,KAAK,CAAC;EAC9B,OAAOG,kCAAoB,CAACH,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFL,aAAK,CAACS,WAAW,GAAG,OAAO","names":["exports","React","forwardRef","props","ref","state","useField_1","useFieldStyles_1","renderField_1","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/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"]}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
|
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
|
|
4
|
+
value: true
|
|
4
5
|
});
|
|
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
|
-
|
|
9
6
|
//# sourceMappingURL=Field.types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"","names":[],"sourceRoot":"","sources":[],"sourcesContent":[]}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
|
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
|
|
4
|
+
value: true
|
|
4
5
|
});
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
//# sourceMappingURL=index.js.map
|
|
12
|
-
|
|
6
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
7
|
+
tslib_1.__exportStar(require("./Field.types"), exports);
|
|
8
|
+
tslib_1.__exportStar(require("./Field"), exports);
|
|
9
|
+
tslib_1.__exportStar(require("./renderField"), exports);
|
|
10
|
+
tslib_1.__exportStar(require("./useField"), exports);
|
|
11
|
+
tslib_1.__exportStar(require("./useFieldStyles"), exports);
|
|
13
12
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/index.ts"],"sourcesContent":["export * from './Field.types';\nexport * from './Field';\nexport * from './renderField';\nexport * from './useField';\nexport * from './useFieldStyles';\n"]}
|
|
@@ -1,19 +1,30 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
|
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "renderField_unstable", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: ()=>renderField_unstable
|
|
4
|
+
value: true
|
|
8
5
|
});
|
|
9
|
-
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
6
|
+
exports.renderField_unstable = void 0;
|
|
7
|
+
const React = /*#__PURE__*/require("react");
|
|
8
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
|
+
/**
|
|
10
|
+
* Render the final JSX of Field
|
|
11
|
+
*/
|
|
12
|
+
const renderField_unstable = state => {
|
|
13
|
+
const {
|
|
14
|
+
slots,
|
|
15
|
+
slotProps
|
|
16
|
+
} = react_utilities_1.getSlots(state);
|
|
17
|
+
return React.createElement(slots.root, {
|
|
18
|
+
...slotProps.root
|
|
19
|
+
}, slots.label && React.createElement(slots.label, {
|
|
20
|
+
...slotProps.label
|
|
21
|
+
}), slotProps.root.children, slots.validationMessage && React.createElement(slots.validationMessage, {
|
|
22
|
+
...slotProps.validationMessage
|
|
23
|
+
}, slots.validationMessageIcon && React.createElement(slots.validationMessageIcon, {
|
|
24
|
+
...slotProps.validationMessageIcon
|
|
25
|
+
}), slotProps.validationMessage.children), slots.hint && React.createElement(slots.hint, {
|
|
26
|
+
...slotProps.hint
|
|
27
|
+
}));
|
|
28
|
+
};
|
|
29
|
+
exports.renderField_unstable = renderField_unstable;
|
|
19
30
|
//# sourceMappingURL=renderField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAaH,KAAK,CAAC;EAExD,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,KAAK,IAAIF,oBAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EACnDJ,SAAS,CAACG,IAAI,CAACE,QAAQ,EACvBN,KAAK,CAACO,iBAAiB,IACtBJ,oBAACH,KAAK,CAACO,iBAAiB;IAAA,GAAKN,SAAS,CAACM;EAAiB,GACrDP,KAAK,CAACQ,qBAAqB,IAAIL,oBAACH,KAAK,CAACQ,qBAAqB;IAAA,GAAKP,SAAS,CAACO;EAAqB,EAAI,EACnGP,SAAS,CAACM,iBAAiB,CAACD,QAAQ,CAExC,EACAN,KAAK,CAACS,IAAI,IAAIN,oBAACH,KAAK,CAACS,IAAI;IAAA,GAAKR,SAAS,CAACQ;EAAI,EAAI,CACtC;AAEjB,CAAC;AAhBYC,4BAAoB","names":["renderField_unstable","state","slots","slotProps","react_utilities_1","React","root","label","children","validationMessage","validationMessageIcon","hint","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/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"]}
|