@fluentui/react-field 9.0.0-alpha.15 → 9.0.0-alpha.17
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/CHANGELOG.json +67 -1
- package/CHANGELOG.md +26 -2
- package/dist/index.d.ts +60 -86
- package/lib/components/Field/Field.js +11 -0
- package/lib/components/Field/Field.js.map +1 -0
- package/lib/components/Field/Field.types.js.map +1 -1
- package/lib/components/Field/index.js +1 -0
- package/lib/components/Field/index.js.map +1 -1
- package/lib/components/Field/renderField.js +4 -6
- package/lib/components/Field/renderField.js.map +1 -1
- package/lib/components/Field/useField.js +39 -72
- package/lib/components/Field/useField.js.map +1 -1
- package/lib/components/Field/useFieldStyles.js +48 -70
- package/lib/components/Field/useFieldStyles.js.map +1 -1
- package/lib/index.js +3 -1
- package/lib/index.js.map +1 -1
- package/lib/util/makeDeprecatedField.js +71 -0
- package/lib/util/makeDeprecatedField.js.map +1 -0
- package/lib-amd/components/Field/Field.js +12 -0
- package/lib-amd/components/Field/Field.js.map +1 -0
- package/lib-amd/components/Field/Field.types.js.map +1 -1
- package/lib-amd/components/Field/index.js +2 -1
- package/lib-amd/components/Field/index.js.map +1 -1
- package/lib-amd/components/Field/renderField.js +4 -3
- package/lib-amd/components/Field/renderField.js.map +1 -1
- package/lib-amd/components/Field/useField.js +31 -53
- package/lib-amd/components/Field/useField.js.map +1 -1
- package/lib-amd/components/Field/useFieldStyles.js +55 -58
- package/lib-amd/components/Field/useFieldStyles.js.map +1 -1
- package/lib-amd/index.js +6 -3
- package/lib-amd/index.js.map +1 -1
- package/lib-amd/util/makeDeprecatedField.js +38 -0
- package/lib-amd/util/makeDeprecatedField.js.map +1 -0
- package/lib-commonjs/components/Field/Field.js +17 -0
- package/lib-commonjs/components/Field/Field.js.map +1 -0
- package/lib-commonjs/components/Field/index.js +1 -0
- package/lib-commonjs/components/Field/index.js.map +1 -1
- package/lib-commonjs/components/Field/renderField.js +4 -6
- package/lib-commonjs/components/Field/renderField.js.map +1 -1
- package/lib-commonjs/components/Field/useField.js +40 -74
- package/lib-commonjs/components/Field/useField.js.map +1 -1
- package/lib-commonjs/components/Field/useFieldStyles.js +48 -71
- package/lib-commonjs/components/Field/useFieldStyles.js.map +1 -1
- package/lib-commonjs/index.js +23 -3
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/util/makeDeprecatedField.js +79 -0
- package/lib-commonjs/util/makeDeprecatedField.js.map +1 -0
- package/package.json +5 -4
- package/lib/components/Field/SlotComponent.types.js +0 -2
- package/lib/components/Field/SlotComponent.types.js.map +0 -1
- package/lib-amd/components/Field/SlotComponent.types.js +0 -5
- package/lib-amd/components/Field/SlotComponent.types.js.map +0 -1
- package/lib-commonjs/components/Field/SlotComponent.types.js +0 -6
- package/lib-commonjs/components/Field/SlotComponent.types.js.map +0 -1
@@ -1,32 +1,12 @@
|
|
1
1
|
define(["require", "exports", "tslib", "react", "@fluentui/react-icons", "@fluentui/react-label", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_icons_1, react_label_1, react_utilities_1) {
|
2
2
|
"use strict";
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.useField_unstable =
|
4
|
+
exports.useField_unstable = void 0;
|
5
5
|
var validationMessageIcons = {
|
6
6
|
error: React.createElement(react_icons_1.ErrorCircle12Filled, null),
|
7
7
|
warning: React.createElement(react_icons_1.Warning12Filled, null),
|
8
8
|
success: React.createElement(react_icons_1.CheckmarkCircle12Filled, null),
|
9
9
|
};
|
10
|
-
/**
|
11
|
-
* Partition the props used by the Field itself, from the props that are passed to the underlying field component.
|
12
|
-
*/
|
13
|
-
var getPartitionedFieldProps = function (props) {
|
14
|
-
var className = props.className, control = props.control, hint = props.hint, label = props.label, orientation = props.orientation, root = props.root, style = props.style, validationMessage = props.validationMessage, validationMessageIcon = props.validationMessageIcon, validationState = props.validationState, restOfProps = tslib_1.__rest(props, ["className", "control", "hint", "label", "orientation", "root", "style", "validationMessage", "validationMessageIcon", "validationState"]);
|
15
|
-
var fieldProps = {
|
16
|
-
className: className,
|
17
|
-
control: control,
|
18
|
-
hint: hint,
|
19
|
-
label: label,
|
20
|
-
orientation: orientation,
|
21
|
-
root: root,
|
22
|
-
style: style,
|
23
|
-
validationMessage: validationMessage,
|
24
|
-
validationMessageIcon: validationMessageIcon,
|
25
|
-
validationState: validationState,
|
26
|
-
};
|
27
|
-
return [fieldProps, restOfProps];
|
28
|
-
};
|
29
|
-
exports.getPartitionedFieldProps = getPartitionedFieldProps;
|
30
10
|
/**
|
31
11
|
* Create the state required to render Field.
|
32
12
|
*
|
@@ -34,46 +14,46 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-icons", "@fluen
|
|
34
14
|
* before being passed to renderField_unstable.
|
35
15
|
*
|
36
16
|
* @param props - Props passed to this field
|
37
|
-
* @param ref - Ref to the
|
38
|
-
* @param params - Configuration parameters for this Field
|
17
|
+
* @param ref - Ref to the root
|
39
18
|
*/
|
40
|
-
var useField_unstable = function (props, ref
|
41
|
-
var _a, _b, _c;
|
42
|
-
var
|
43
|
-
var _e = fieldProps.orientation, orientation = _e === void 0 ? 'vertical' : _e, validationState = fieldProps.validationState;
|
44
|
-
var _f = params.labelConnection, labelConnection = _f === void 0 ? 'htmlFor' : _f, _g = params.ariaInvalidOnError, ariaInvalidOnError = _g === void 0 ? true : _g;
|
19
|
+
var useField_unstable = function (props, ref) {
|
20
|
+
var _a, _b, _c, _d;
|
21
|
+
var children = props.children, _e = props.orientation, orientation = _e === void 0 ? 'vertical' : _e, required = props.required, validationState = props.validationState, size = props.size;
|
45
22
|
var baseId = react_utilities_1.useId('field-');
|
46
|
-
var root = react_utilities_1.
|
47
|
-
|
48
|
-
defaultProps: react_utilities_1.getNativeElementProps('div', fieldProps),
|
49
|
-
});
|
50
|
-
var label = react_utilities_1.resolveShorthand(fieldProps.label, {
|
23
|
+
var root = react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign({}, props), { ref: ref }), /*excludedPropNames:*/ ['children']);
|
24
|
+
var label = react_utilities_1.resolveShorthand(props.label, {
|
51
25
|
defaultProps: {
|
52
26
|
id: baseId + '__label',
|
53
|
-
required:
|
54
|
-
size:
|
27
|
+
required: required,
|
28
|
+
size: size,
|
55
29
|
// htmlFor is handled below
|
56
30
|
},
|
57
31
|
});
|
58
|
-
var validationMessage = react_utilities_1.resolveShorthand(
|
32
|
+
var validationMessage = react_utilities_1.resolveShorthand(props.validationMessage, {
|
59
33
|
defaultProps: {
|
60
34
|
id: baseId + '__validationMessage',
|
35
|
+
role: validationState === 'error' ? 'alert' : undefined,
|
61
36
|
},
|
62
37
|
});
|
63
|
-
var hint = react_utilities_1.resolveShorthand(
|
38
|
+
var hint = react_utilities_1.resolveShorthand(props.hint, {
|
64
39
|
defaultProps: {
|
65
40
|
id: baseId + '__hint',
|
66
41
|
},
|
67
42
|
});
|
68
|
-
var validationMessageIcon = react_utilities_1.resolveShorthand(
|
43
|
+
var validationMessageIcon = react_utilities_1.resolveShorthand(props.validationMessageIcon, {
|
69
44
|
required: !!validationState,
|
70
45
|
defaultProps: {
|
71
46
|
children: validationState ? validationMessageIcons[validationState] : undefined,
|
72
47
|
},
|
73
48
|
});
|
74
|
-
|
75
|
-
if (label
|
49
|
+
var controlProps = React.isValidElement(children) ? tslib_1.__assign({}, children.props) : {};
|
50
|
+
if (label) {
|
76
51
|
(_a = controlProps['aria-labelledby']) !== null && _a !== void 0 ? _a : (controlProps['aria-labelledby'] = label.id);
|
52
|
+
if (!label.htmlFor) {
|
53
|
+
// Assign the child a generated ID if doesn't already have an ID
|
54
|
+
(_b = controlProps.id) !== null && _b !== void 0 ? _b : (controlProps.id = baseId + '__control');
|
55
|
+
label.htmlFor = controlProps.id;
|
56
|
+
}
|
77
57
|
}
|
78
58
|
if (validationMessage || hint) {
|
79
59
|
// The control is described by the validation message, or hint, or both
|
@@ -83,36 +63,34 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-icons", "@fluen
|
|
83
63
|
.filter(Boolean)
|
84
64
|
.join(' ');
|
85
65
|
}
|
86
|
-
if (validationState === 'error'
|
87
|
-
(
|
66
|
+
if (validationState === 'error') {
|
67
|
+
(_c = controlProps['aria-invalid']) !== null && _c !== void 0 ? _c : (controlProps['aria-invalid'] = true);
|
88
68
|
}
|
89
|
-
|
90
|
-
required: true
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
69
|
+
if (required) {
|
70
|
+
(_d = controlProps['aria-required']) !== null && _d !== void 0 ? _d : (controlProps['aria-required'] = true);
|
71
|
+
}
|
72
|
+
if (React.isValidElement(children)) {
|
73
|
+
root.children = React.cloneElement(children, controlProps);
|
74
|
+
}
|
75
|
+
else if (typeof children === 'function') {
|
76
|
+
root.children = children(controlProps);
|
95
77
|
}
|
96
|
-
|
78
|
+
return {
|
97
79
|
orientation: orientation,
|
98
80
|
validationState: validationState,
|
99
|
-
classNames: params.classNames,
|
100
81
|
components: {
|
101
82
|
root: 'div',
|
102
|
-
control: params.component,
|
103
83
|
label: react_label_1.Label,
|
104
84
|
validationMessage: 'div',
|
105
85
|
validationMessageIcon: 'span',
|
106
86
|
hint: 'div',
|
107
87
|
},
|
108
88
|
root: root,
|
109
|
-
control: control,
|
110
89
|
label: label,
|
111
90
|
validationMessageIcon: validationMessageIcon,
|
112
91
|
validationMessage: validationMessage,
|
113
92
|
hint: hint,
|
114
93
|
};
|
115
|
-
return state;
|
116
94
|
};
|
117
95
|
exports.useField_unstable = useField_unstable;
|
118
96
|
});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/useField.tsx"],"names":[],"mappings":";;;;
|
1
|
+
{"version":3,"file":"useField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/useField.tsx"],"names":[],"mappings":"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","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} 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 { children, orientation = 'vertical', required, validationState, size } = 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 validationMessageIcon = resolveShorthand(props.validationMessageIcon, {\n required: !!validationState,\n defaultProps: {\n children: validationState ? validationMessageIcons[validationState] : undefined,\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,80 +1,79 @@
|
|
1
1
|
define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"], function (require, exports, tslib_1, react_theme_1, react_1) {
|
2
2
|
"use strict";
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.useFieldStyles_unstable = exports.
|
5
|
-
|
6
|
-
root: "fui-"
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
4
|
+
exports.useFieldStyles_unstable = exports.fieldClassNames = void 0;
|
5
|
+
exports.fieldClassNames = {
|
6
|
+
root: "fui-Field",
|
7
|
+
label: "fui-Field__label",
|
8
|
+
validationMessage: "fui-Field__validationMessage",
|
9
|
+
validationMessageIcon: "fui-Field__validationMessageIcon",
|
10
|
+
hint: "fui-Field__hint",
|
11
|
+
};
|
12
|
+
// Size of the icon in the validation message
|
13
|
+
var iconSize = '12px';
|
14
14
|
/**
|
15
15
|
* Styles for the root slot
|
16
16
|
*/
|
17
17
|
var useRootStyles = react_1.makeStyles({
|
18
18
|
base: {
|
19
19
|
display: 'grid',
|
20
|
-
gridAutoFlow: 'row',
|
21
|
-
gridTemplateColumns: 'auto 1fr',
|
22
|
-
gridTemplateAreas: "\n \"label label\"\n \"control control\"\n \"validationIcon validationMessage\"\n \"hint hint\"\n ",
|
23
|
-
justifyItems: 'start',
|
24
20
|
},
|
21
|
+
// In horizontal layout, the field is a grid with the label taking up the entire first column.
|
22
|
+
// The last row is slack space in case the label is taller than the rest of the content.
|
25
23
|
horizontal: {
|
26
|
-
gridTemplateColumns: '33%
|
27
|
-
|
28
|
-
},
|
29
|
-
label: {
|
30
|
-
gridColumnStart: 'label',
|
31
|
-
gridColumnEnd: 'label',
|
32
|
-
gridRowStart: 'label',
|
33
|
-
gridRowEnd: 'label',
|
34
|
-
},
|
35
|
-
control: {
|
36
|
-
gridColumnStart: 'control',
|
37
|
-
gridColumnEnd: 'control',
|
38
|
-
},
|
39
|
-
validationIcon: {
|
40
|
-
gridColumnStart: 'validationIcon',
|
41
|
-
gridColumnEnd: 'validationIcon',
|
24
|
+
gridTemplateColumns: '33% 1fr',
|
25
|
+
gridTemplateRows: 'auto auto auto 1fr',
|
42
26
|
},
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
gridColumnStart: 'hint',
|
49
|
-
gridColumnEnd: 'hint',
|
27
|
+
// In horizontal layout without a label, replace the label's column with padding.
|
28
|
+
// This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.
|
29
|
+
horizontalNoLabel: {
|
30
|
+
paddingLeft: '33%',
|
31
|
+
gridTemplateColumns: '1fr',
|
50
32
|
},
|
51
33
|
});
|
52
34
|
var useLabelStyles = react_1.makeStyles({
|
53
35
|
base: {
|
54
|
-
|
36
|
+
paddingTop: react_theme_1.tokens.spacingVerticalXXS,
|
37
|
+
paddingBottom: react_theme_1.tokens.spacingVerticalXXS,
|
38
|
+
},
|
39
|
+
large: {
|
40
|
+
paddingTop: '1px',
|
41
|
+
paddingBottom: '1px',
|
42
|
+
},
|
43
|
+
vertical: {
|
55
44
|
marginBottom: react_theme_1.tokens.spacingVerticalXXS,
|
56
45
|
},
|
46
|
+
verticalLarge: {
|
47
|
+
marginBottom: react_theme_1.tokens.spacingVerticalXS,
|
48
|
+
},
|
57
49
|
horizontal: {
|
58
50
|
marginRight: react_theme_1.tokens.spacingHorizontalM,
|
59
|
-
|
60
|
-
|
51
|
+
gridRowStart: '1',
|
52
|
+
gridRowEnd: '-1',
|
61
53
|
},
|
62
54
|
});
|
55
|
+
var useSecondaryTextBaseClassName = react_1.makeResetStyles(tslib_1.__assign({ marginTop: react_theme_1.tokens.spacingVerticalXXS, color: react_theme_1.tokens.colorNeutralForeground3 }, react_theme_1.typographyStyles.caption1));
|
63
56
|
var useSecondaryTextStyles = react_1.makeStyles({
|
64
|
-
base: tslib_1.__assign({ marginTop: react_theme_1.tokens.spacingVerticalXXS, color: react_theme_1.tokens.colorNeutralForeground3 }, react_theme_1.typographyStyles.caption1),
|
65
57
|
error: {
|
66
58
|
color: react_theme_1.tokens.colorPaletteRedForeground1,
|
67
59
|
},
|
60
|
+
withIcon: {
|
61
|
+
// Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.
|
62
|
+
paddingLeft: "calc(" + iconSize + " + " + react_theme_1.tokens.spacingHorizontalXS + ")",
|
63
|
+
},
|
64
|
+
});
|
65
|
+
var useValidationMessageIconBaseClassName = react_1.makeResetStyles({
|
66
|
+
display: 'inline-block',
|
67
|
+
fontSize: iconSize,
|
68
|
+
// Negative left margin puts the icon in the gutter of the validation message div's withIcon style.
|
69
|
+
marginLeft: "calc(-" + iconSize + " - " + react_theme_1.tokens.spacingHorizontalXS + ")",
|
70
|
+
marginRight: react_theme_1.tokens.spacingHorizontalXS,
|
71
|
+
// Line height of 0 prevents the verticalAlign from affecting the line height of the text.
|
72
|
+
lineHeight: '0',
|
73
|
+
// Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).
|
74
|
+
verticalAlign: '-1px',
|
68
75
|
});
|
69
76
|
var useValidationMessageIconStyles = react_1.makeStyles({
|
70
|
-
base: {
|
71
|
-
display: 'block',
|
72
|
-
alignSelf: 'start',
|
73
|
-
fontSize: '12px',
|
74
|
-
lineHeight: '12px',
|
75
|
-
marginRight: react_theme_1.tokens.spacingHorizontalXS,
|
76
|
-
marginTop: react_theme_1.tokens.spacingVerticalXS,
|
77
|
-
},
|
78
77
|
error: {
|
79
78
|
color: react_theme_1.tokens.colorPaletteRedForeground1,
|
80
79
|
},
|
@@ -89,28 +88,26 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"
|
|
89
88
|
* Apply styling to the Field slots based on the state
|
90
89
|
*/
|
91
90
|
var useFieldStyles_unstable = function (state) {
|
92
|
-
var classNames = state.classNames;
|
93
91
|
var validationState = state.validationState;
|
94
92
|
var horizontal = state.orientation === 'horizontal';
|
95
93
|
var rootStyles = useRootStyles();
|
96
|
-
state.root.className = react_1.mergeClasses(
|
97
|
-
if (state.control) {
|
98
|
-
state.control.className = react_1.mergeClasses(classNames.control, rootStyles.control, state.control.className);
|
99
|
-
}
|
94
|
+
state.root.className = react_1.mergeClasses(exports.fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
|
100
95
|
var labelStyles = useLabelStyles();
|
101
96
|
if (state.label) {
|
102
|
-
state.label.className = react_1.mergeClasses(
|
97
|
+
state.label.className = react_1.mergeClasses(exports.fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size === 'large' && labelStyles.large, !horizontal && state.label.size === 'large' && labelStyles.verticalLarge, state.label.className);
|
103
98
|
}
|
99
|
+
var validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
|
104
100
|
var validationMessageIconStyles = useValidationMessageIconStyles();
|
105
101
|
if (state.validationMessageIcon) {
|
106
|
-
state.validationMessageIcon.className = react_1.mergeClasses(
|
102
|
+
state.validationMessageIcon.className = react_1.mergeClasses(exports.fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
|
107
103
|
}
|
104
|
+
var secondaryTextBaseClassName = useSecondaryTextBaseClassName();
|
108
105
|
var secondaryTextStyles = useSecondaryTextStyles();
|
109
106
|
if (state.validationMessage) {
|
110
|
-
state.validationMessage.className = react_1.mergeClasses(
|
107
|
+
state.validationMessage.className = react_1.mergeClasses(exports.fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
|
111
108
|
}
|
112
109
|
if (state.hint) {
|
113
|
-
state.hint.className = react_1.mergeClasses(
|
110
|
+
state.hint.className = react_1.mergeClasses(exports.fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
|
114
111
|
}
|
115
112
|
};
|
116
113
|
exports.useFieldStyles_unstable = useFieldStyles_unstable;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useFieldStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"names":[],"mappings":";;;;
|
1
|
+
{"version":3,"file":"useFieldStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"names":[],"mappings":";;;;IAKa,QAAA,eAAe,GAA+B;QACzD,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,kBAAkB;QACzB,iBAAiB,EAAE,8BAA8B;QACjD,qBAAqB,EAAE,kCAAkC;QACzD,IAAI,EAAE,iBAAiB;KACxB,CAAC;IAEF,6CAA6C;IAC7C,IAAM,QAAQ,GAAG,MAAM,CAAC;IAExB;;OAEG;IACH,IAAM,aAAa,GAAG,kBAAU,CAAC;QAC/B,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;SAChB;QAED,8FAA8F;QAC9F,wFAAwF;QACxF,UAAU,EAAE;YACV,mBAAmB,EAAE,SAAS;YAC9B,gBAAgB,EAAE,oBAAoB;SACvC;QAED,iFAAiF;QACjF,gHAAgH;QAChH,iBAAiB,EAAE;YACjB,WAAW,EAAE,KAAK;YAClB,mBAAmB,EAAE,KAAK;SAC3B;KACF,CAAC,CAAC;IAEH,IAAM,cAAc,GAAG,kBAAU,CAAC;QAChC,IAAI,EAAE;YACJ,UAAU,EAAE,oBAAM,CAAC,kBAAkB;YACrC,aAAa,EAAE,oBAAM,CAAC,kBAAkB;SACzC;QAED,KAAK,EAAE;YACL,UAAU,EAAE,KAAK;YACjB,aAAa,EAAE,KAAK;SACrB;QAED,QAAQ,EAAE;YACR,YAAY,EAAE,oBAAM,CAAC,kBAAkB;SACxC;QAED,aAAa,EAAE;YACb,YAAY,EAAE,oBAAM,CAAC,iBAAiB;SACvC;QAED,UAAU,EAAE;YACV,WAAW,EAAE,oBAAM,CAAC,kBAAkB;YACtC,YAAY,EAAE,GAAG;YACjB,UAAU,EAAE,IAAI;SACjB;KACF,CAAC,CAAC;IAEH,IAAM,6BAA6B,GAAG,uBAAe,oBACnD,SAAS,EAAE,oBAAM,CAAC,kBAAkB,EACpC,KAAK,EAAE,oBAAM,CAAC,uBAAuB,IAClC,8BAAgB,CAAC,QAAQ,EAC5B,CAAC;IAEH,IAAM,sBAAsB,GAAG,kBAAU,CAAC;QACxC,KAAK,EAAE;YACL,KAAK,EAAE,oBAAM,CAAC,0BAA0B;SACzC;QAED,QAAQ,EAAE;YACR,kGAAkG;YAClG,WAAW,EAAE,UAAQ,QAAQ,WAAM,oBAAM,CAAC,mBAAmB,MAAG;SACjE;KACF,CAAC,CAAC;IAEH,IAAM,qCAAqC,GAAG,uBAAe,CAAC;QAC5D,OAAO,EAAE,cAAc;QACvB,QAAQ,EAAE,QAAQ;QAClB,mGAAmG;QACnG,UAAU,EAAE,WAAS,QAAQ,WAAM,oBAAM,CAAC,mBAAmB,MAAG;QAChE,WAAW,EAAE,oBAAM,CAAC,mBAAmB;QACvC,0FAA0F;QAC1F,UAAU,EAAE,GAAG;QACf,uGAAuG;QACvG,aAAa,EAAE,MAAM;KACtB,CAAC,CAAC;IAEH,IAAM,8BAA8B,GAAG,kBAAU,CAAC;QAChD,KAAK,EAAE;YACL,KAAK,EAAE,oBAAM,CAAC,0BAA0B;SACzC;QACD,OAAO,EAAE;YACP,KAAK,EAAE,oBAAM,CAAC,iCAAiC;SAChD;QACD,OAAO,EAAE;YACP,KAAK,EAAE,oBAAM,CAAC,4BAA4B;SAC3C;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,uBAAuB,GAAG,UAAC,KAAiB;QAC/C,IAAA,eAAe,GAAK,KAAK,gBAAV,CAAW;QAClC,IAAM,UAAU,GAAG,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC;QAEtD,IAAM,UAAU,GAAG,aAAa,EAAE,CAAC;QACnC,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CACjC,uBAAe,CAAC,IAAI,EACpB,UAAU,CAAC,IAAI,EACf,UAAU,IAAI,UAAU,CAAC,UAAU,EACnC,UAAU,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,UAAU,CAAC,iBAAiB,EAC1D,KAAK,CAAC,IAAI,CAAC,SAAS,CACrB,CAAC;QAEF,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;QACrC,IAAI,KAAK,CAAC,KAAK,EAAE;YACf,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,oBAAY,CAClC,uBAAe,CAAC,KAAK,EACrB,WAAW,CAAC,IAAI,EAChB,UAAU,IAAI,WAAW,CAAC,UAAU,EACpC,CAAC,UAAU,IAAI,WAAW,CAAC,QAAQ,EACnC,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,WAAW,CAAC,KAAK,EACjD,CAAC,UAAU,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,WAAW,CAAC,aAAa,EACxE,KAAK,CAAC,KAAK,CAAC,SAAS,CACtB,CAAC;SACH;QAED,IAAM,kCAAkC,GAAG,qCAAqC,EAAE,CAAC;QACnF,IAAM,2BAA2B,GAAG,8BAA8B,EAAE,CAAC;QACrE,IAAI,KAAK,CAAC,qBAAqB,EAAE;YAC/B,KAAK,CAAC,qBAAqB,CAAC,SAAS,GAAG,oBAAY,CAClD,uBAAe,CAAC,qBAAqB,EACrC,kCAAkC,EAClC,CAAC,CAAC,eAAe,IAAI,2BAA2B,CAAC,eAAe,CAAC,EACjE,KAAK,CAAC,qBAAqB,CAAC,SAAS,CACtC,CAAC;SACH;QAED,IAAM,0BAA0B,GAAG,6BAA6B,EAAE,CAAC;QACnE,IAAM,mBAAmB,GAAG,sBAAsB,EAAE,CAAC;QACrD,IAAI,KAAK,CAAC,iBAAiB,EAAE;YAC3B,KAAK,CAAC,iBAAiB,CAAC,SAAS,GAAG,oBAAY,CAC9C,uBAAe,CAAC,iBAAiB,EACjC,0BAA0B,EAC1B,eAAe,KAAK,OAAO,IAAI,mBAAmB,CAAC,KAAK,EACxD,CAAC,CAAC,KAAK,CAAC,qBAAqB,IAAI,mBAAmB,CAAC,QAAQ,EAC7D,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAClC,CAAC;SACH;QAED,IAAI,KAAK,CAAC,IAAI,EAAE;YACd,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,uBAAe,CAAC,IAAI,EAAE,0BAA0B,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SAC7G;IACH,CAAC,CAAC;IApDW,QAAA,uBAAuB,2BAoDlC","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 && 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-amd/index.js
CHANGED
@@ -1,10 +1,13 @@
|
|
1
|
-
define(["require", "exports", "./Field"], function (require, exports, Field_1) {
|
1
|
+
define(["require", "exports", "./Field", "./util/makeDeprecatedField"], function (require, exports, Field_1, makeDeprecatedField_1) {
|
2
2
|
"use strict";
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.useField_unstable = exports.useFieldStyles_unstable = exports.renderField_unstable = exports.
|
5
|
-
Object.defineProperty(exports, "
|
4
|
+
exports.makeDeprecatedField = exports.getDeprecatedFieldClassNames = exports.useField_unstable = exports.useFieldStyles_unstable = exports.renderField_unstable = exports.fieldClassNames = exports.Field = void 0;
|
5
|
+
Object.defineProperty(exports, "Field", { enumerable: true, get: function () { return Field_1.Field; } });
|
6
|
+
Object.defineProperty(exports, "fieldClassNames", { enumerable: true, get: function () { return Field_1.fieldClassNames; } });
|
6
7
|
Object.defineProperty(exports, "renderField_unstable", { enumerable: true, get: function () { return Field_1.renderField_unstable; } });
|
7
8
|
Object.defineProperty(exports, "useFieldStyles_unstable", { enumerable: true, get: function () { return Field_1.useFieldStyles_unstable; } });
|
8
9
|
Object.defineProperty(exports, "useField_unstable", { enumerable: true, get: function () { return Field_1.useField_unstable; } });
|
10
|
+
Object.defineProperty(exports, "getDeprecatedFieldClassNames", { enumerable: true, get: function () { return makeDeprecatedField_1.getDeprecatedFieldClassNames; } });
|
11
|
+
Object.defineProperty(exports, "makeDeprecatedField", { enumerable: true, get: function () { return makeDeprecatedField_1.makeDeprecatedField; } });
|
9
12
|
});
|
10
13
|
//# sourceMappingURL=index.js.map
|
package/lib-amd/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-field/src/index.ts"],"names":[],"mappings":";;;;IAAS,
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-field/src/index.ts"],"names":[],"mappings":";;;;IAAS,8FAAA,KAAK,OAAA;IAAE,wGAAA,eAAe,OAAA;IAAE,6GAAA,oBAAoB,OAAA;IAAE,gHAAA,uBAAuB,OAAA;IAAE,0GAAA,iBAAiB,OAAA;IAIxF,mIAAA,4BAA4B,OAAA;IAAE,0HAAA,mBAAmB,OAAA","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"]}
|
@@ -0,0 +1,38 @@
|
|
1
|
+
define(["require", "exports", "tslib", "react", "../Field"], function (require, exports, tslib_1, React, Field_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.getDeprecatedFieldClassNames = exports.makeDeprecatedField = void 0;
|
5
|
+
/**
|
6
|
+
* Partition the props used by the Field itself, from the props that are passed to the underlying field component.
|
7
|
+
*/
|
8
|
+
function getPartitionedFieldProps(props) {
|
9
|
+
var className = props.className, control = props.control, hint = props.hint, label = props.label, orientation = props.orientation, required = props.required, root = props.root, size = props.size, style = props.style, validationMessage = props.validationMessage, validationMessageIcon = props.validationMessageIcon, validationState = props.validationState, restOfProps = tslib_1.__rest(props, ["className", "control", "hint", "label", "orientation", "required", "root", "size", "style", "validationMessage", "validationMessageIcon", "validationState"]);
|
10
|
+
return [
|
11
|
+
tslib_1.__assign({ className: className, hint: hint, label: label, orientation: orientation, required: required, size: size, style: style, validationMessage: validationMessage, validationMessageIcon: validationMessageIcon, validationState: validationState }, root),
|
12
|
+
tslib_1.__assign(tslib_1.__assign({ required: required, size: size }, restOfProps), control),
|
13
|
+
];
|
14
|
+
}
|
15
|
+
/**
|
16
|
+
* @deprecated Only for use to make deprecated [Control]Field shim components.
|
17
|
+
* @internal
|
18
|
+
*/
|
19
|
+
function makeDeprecatedField(Control, options) {
|
20
|
+
if (options === void 0) { options = {}; }
|
21
|
+
var _a = options.mapProps, mapProps = _a === void 0 ? function (props) { return props; } : _a, _b = options.displayName, displayName = _b === void 0 ? Control.displayName + "Field" : _b;
|
22
|
+
var DeprecatedField = React.forwardRef(function (props, ref) {
|
23
|
+
var _a = getPartitionedFieldProps(mapProps(props)), fieldProps = _a[0], controlProps = _a[1];
|
24
|
+
return (React.createElement(Field_1.Field, tslib_1.__assign({}, fieldProps),
|
25
|
+
React.createElement(Control, tslib_1.__assign({}, controlProps, { ref: ref }))));
|
26
|
+
});
|
27
|
+
DeprecatedField.displayName = displayName;
|
28
|
+
return DeprecatedField;
|
29
|
+
}
|
30
|
+
exports.makeDeprecatedField = makeDeprecatedField;
|
31
|
+
/**
|
32
|
+
* @deprecated Only for use to make deprecated [Control]Field shim components.
|
33
|
+
* @internal
|
34
|
+
*/
|
35
|
+
var getDeprecatedFieldClassNames = function (controlRootClassName) { return (tslib_1.__assign(tslib_1.__assign({}, Field_1.fieldClassNames), { control: controlRootClassName })); };
|
36
|
+
exports.getDeprecatedFieldClassNames = getDeprecatedFieldClassNames;
|
37
|
+
});
|
38
|
+
//# sourceMappingURL=makeDeprecatedField.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"makeDeprecatedField.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-field/src/util/makeDeprecatedField.tsx"],"names":[],"mappings":";;;;IAyBA;;OAEG;IACH,SAAS,wBAAwB,CAC/B,KAAiF;QAG/E,IAAA,SAAS,GAaP,KAAK,UAbE,EACT,OAAO,GAYL,KAAK,QAZA,EACP,IAAI,GAWF,KAAK,KAXH,EACJ,KAAK,GAUH,KAAK,MAVF,EACL,WAAW,GAST,KAAK,YATI,EACX,QAAQ,GAQN,KAAK,SARC,EACR,IAAI,GAOF,KAAK,KAPH,EACJ,IAAI,GAMF,KAAK,KANH,EACJ,KAAK,GAKH,KAAK,MALF,EACL,iBAAiB,GAIf,KAAK,kBAJU,EACjB,qBAAqB,GAGnB,KAAK,sBAHc,EACrB,eAAe,GAEb,KAAK,gBAFQ,EACZ,WAAW,kBACZ,KAAK,EAdH,8JAcL,CADe,CACN;QAEV,OAAO;+BAEH,SAAS,WAAA,EACT,IAAI,MAAA,EACJ,KAAK,OAAA,EACL,WAAW,aAAA,EACX,QAAQ,UAAA,EACR,IAAI,MAAA,EACJ,KAAK,OAAA,EACL,iBAAiB,mBAAA,EACjB,qBAAqB,uBAAA,EACrB,eAAe,iBAAA,IACZ,IAAI;gDAGP,QAAQ,UAAA,EACR,IAAI,MAAA,IACD,WAAW,GACX,OAAO;SAEb,CAAC;IACJ,CAAC;IAED;;;OAGG;IACH,SAAgB,mBAAmB,CACjC,OAA0C,EAC1C,OAGM;QAHN,wBAAA,EAAA,YAGM;QAEE,IAAA,KAA2E,OAAO,SAAzD,EAAzB,QAAQ,mBAAG,UAAA,KAAK,IAAI,OAAA,KAAK,EAAL,CAAK,KAAA,EAAE,KAAgD,OAAO,YAAZ,EAA3C,WAAW,mBAAM,OAAO,CAAC,WAAW,UAAO,KAAA,CAAa;QAE3F,IAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;YAC5C,IAAA,KAA6B,wBAAwB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAArE,UAAU,QAAA,EAAE,YAAY,QAA6C,CAAC;YAC7E,OAAO,CACL,oBAAC,aAAK,uBAAK,UAAU;gBAEnB,oBAAC,OAAO,uBAAM,YAAoB,IAAE,GAAG,EAAE,GAAU,IAAI,CACjD,CACT,CAAC;QACJ,CAAC,CAA4D,CAAC;QAE9D,eAAe,CAAC,WAAW,GAAG,WAAW,CAAC;QAE1C,OAAO,eAAe,CAAC;IACzB,CAAC;IAtBD,kDAsBC;IAED;;;OAGG;IACI,IAAM,4BAA4B,GAAG,UAAC,oBAA4B,IAAK,OAAA,uCACzE,uBAAe,KAClB,OAAO,EAAE,oBAAoB,IAC7B,EAH4E,CAG5E,CAAC;IAHU,QAAA,4BAA4B,gCAGtC","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,\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"]}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
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);
|
15
|
+
});
|
16
|
+
exports.Field.displayName = 'Field';
|
17
|
+
//# sourceMappingURL=Field.js.map
|
@@ -0,0 +1 @@
|
|
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":"../src/","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"]}
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
7
7
|
tslib_1.__exportStar(require("./Field.types"), exports);
|
8
|
+
tslib_1.__exportStar(require("./Field"), exports);
|
8
9
|
tslib_1.__exportStar(require("./renderField"), exports);
|
9
10
|
tslib_1.__exportStar(require("./useField"), exports);
|
10
11
|
tslib_1.__exportStar(require("./useFieldStyles"), exports);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/index.ts"],"sourcesContent":["export * from './Field.types';\nexport * from './renderField';\nexport * from './useField';\nexport * from './useFieldStyles';\n"]}
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","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"]}
|
@@ -18,13 +18,11 @@ const renderField_unstable = state => {
|
|
18
18
|
...slotProps.root
|
19
19
|
}, slots.label && React.createElement(slots.label, {
|
20
20
|
...slotProps.label
|
21
|
-
}), slots.
|
22
|
-
...slotProps.control
|
23
|
-
}), slots.validationMessage && slots.validationMessageIcon && React.createElement(slots.validationMessageIcon, {
|
24
|
-
...slotProps.validationMessageIcon
|
25
|
-
}), slots.validationMessage && React.createElement(slots.validationMessage, {
|
21
|
+
}), slotProps.root.children, slots.validationMessage && React.createElement(slots.validationMessage, {
|
26
22
|
...slotProps.validationMessage
|
27
|
-
}
|
23
|
+
}, slots.validationMessageIcon && React.createElement(slots.validationMessageIcon, {
|
24
|
+
...slotProps.validationMessageIcon
|
25
|
+
}), slotProps.validationMessage.children), slots.hint && React.createElement(slots.hint, {
|
28
26
|
...slotProps.hint
|
29
27
|
}));
|
30
28
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,oBAAoB,
|
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":"../src/","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"]}
|