@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.
Files changed (54) hide show
  1. package/CHANGELOG.json +67 -1
  2. package/CHANGELOG.md +26 -2
  3. package/dist/index.d.ts +60 -86
  4. package/lib/components/Field/Field.js +11 -0
  5. package/lib/components/Field/Field.js.map +1 -0
  6. package/lib/components/Field/Field.types.js.map +1 -1
  7. package/lib/components/Field/index.js +1 -0
  8. package/lib/components/Field/index.js.map +1 -1
  9. package/lib/components/Field/renderField.js +4 -6
  10. package/lib/components/Field/renderField.js.map +1 -1
  11. package/lib/components/Field/useField.js +39 -72
  12. package/lib/components/Field/useField.js.map +1 -1
  13. package/lib/components/Field/useFieldStyles.js +48 -70
  14. package/lib/components/Field/useFieldStyles.js.map +1 -1
  15. package/lib/index.js +3 -1
  16. package/lib/index.js.map +1 -1
  17. package/lib/util/makeDeprecatedField.js +71 -0
  18. package/lib/util/makeDeprecatedField.js.map +1 -0
  19. package/lib-amd/components/Field/Field.js +12 -0
  20. package/lib-amd/components/Field/Field.js.map +1 -0
  21. package/lib-amd/components/Field/Field.types.js.map +1 -1
  22. package/lib-amd/components/Field/index.js +2 -1
  23. package/lib-amd/components/Field/index.js.map +1 -1
  24. package/lib-amd/components/Field/renderField.js +4 -3
  25. package/lib-amd/components/Field/renderField.js.map +1 -1
  26. package/lib-amd/components/Field/useField.js +31 -53
  27. package/lib-amd/components/Field/useField.js.map +1 -1
  28. package/lib-amd/components/Field/useFieldStyles.js +55 -58
  29. package/lib-amd/components/Field/useFieldStyles.js.map +1 -1
  30. package/lib-amd/index.js +6 -3
  31. package/lib-amd/index.js.map +1 -1
  32. package/lib-amd/util/makeDeprecatedField.js +38 -0
  33. package/lib-amd/util/makeDeprecatedField.js.map +1 -0
  34. package/lib-commonjs/components/Field/Field.js +17 -0
  35. package/lib-commonjs/components/Field/Field.js.map +1 -0
  36. package/lib-commonjs/components/Field/index.js +1 -0
  37. package/lib-commonjs/components/Field/index.js.map +1 -1
  38. package/lib-commonjs/components/Field/renderField.js +4 -6
  39. package/lib-commonjs/components/Field/renderField.js.map +1 -1
  40. package/lib-commonjs/components/Field/useField.js +40 -74
  41. package/lib-commonjs/components/Field/useField.js.map +1 -1
  42. package/lib-commonjs/components/Field/useFieldStyles.js +48 -71
  43. package/lib-commonjs/components/Field/useFieldStyles.js.map +1 -1
  44. package/lib-commonjs/index.js +23 -3
  45. package/lib-commonjs/index.js.map +1 -1
  46. package/lib-commonjs/util/makeDeprecatedField.js +79 -0
  47. package/lib-commonjs/util/makeDeprecatedField.js.map +1 -0
  48. package/package.json +5 -4
  49. package/lib/components/Field/SlotComponent.types.js +0 -2
  50. package/lib/components/Field/SlotComponent.types.js.map +0 -1
  51. package/lib-amd/components/Field/SlotComponent.types.js +0 -5
  52. package/lib-amd/components/Field/SlotComponent.types.js.map +0 -1
  53. package/lib-commonjs/components/Field/SlotComponent.types.js +0 -6
  54. 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 = exports.getPartitionedFieldProps = void 0;
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 control slot (primary slot)
38
- * @param params - Configuration parameters for this Field
17
+ * @param ref - Ref to the root
39
18
  */
40
- var useField_unstable = function (props, ref, params) {
41
- var _a, _b, _c;
42
- var _d = exports.getPartitionedFieldProps(props), fieldProps = _d[0], controlProps = _d[1];
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.resolveShorthand(fieldProps.root, {
47
- required: true,
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: controlProps.required,
54
- size: typeof controlProps.size === 'string' ? controlProps.size : undefined,
27
+ required: required,
28
+ size: size,
55
29
  // htmlFor is handled below
56
30
  },
57
31
  });
58
- var validationMessage = react_utilities_1.resolveShorthand(fieldProps.validationMessage, {
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(fieldProps.hint, {
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(fieldProps.validationMessageIcon, {
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
- // Hook up aria props on the control
75
- if (label && labelConnection === 'aria-labelledby') {
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' && ariaInvalidOnError) {
87
- (_b = controlProps['aria-invalid']) !== null && _b !== void 0 ? _b : (controlProps['aria-invalid'] = true);
66
+ if (validationState === 'error') {
67
+ (_c = controlProps['aria-invalid']) !== null && _c !== void 0 ? _c : (controlProps['aria-invalid'] = true);
88
68
  }
89
- var control = react_utilities_1.resolveShorthand(fieldProps.control, {
90
- required: true,
91
- defaultProps: tslib_1.__assign({ ref: ref, id: baseId + '__control' }, controlProps),
92
- });
93
- if (label && labelConnection === 'htmlFor') {
94
- (_c = label.htmlFor) !== null && _c !== void 0 ? _c : (label.htmlFor = control.id);
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
- var state = {
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":"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","sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldConfig, FieldControl, FieldPropsWithOptionalComponentProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = (props: FieldPropsWithOptionalComponentProps<FieldControl>) => {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...restOfProps\n } = props;\n\n const fieldProps = {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n };\n\n return [fieldProps, restOfProps] as const;\n};\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 control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldControl>(\n props: FieldPropsWithOptionalComponentProps<T>,\n ref: React.Ref<HTMLElement>,\n params: FieldConfig<T>,\n): FieldState<T> => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n const { orientation = 'vertical', validationState } = fieldProps;\n const { labelConnection = 'htmlFor', ariaInvalidOnError = true } = params;\n\n const baseId = useId('field-');\n\n const root = resolveShorthand(fieldProps.root, {\n required: true,\n defaultProps: getNativeElementProps('div', fieldProps),\n });\n\n const label = resolveShorthand(fieldProps.label, {\n defaultProps: {\n id: baseId + '__label',\n required: controlProps.required,\n size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n // htmlFor is handled below\n },\n });\n\n const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n },\n });\n\n const hint = resolveShorthand(fieldProps.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n required: !!validationState,\n defaultProps: {\n children: validationState ? validationMessageIcons[validationState] : undefined,\n },\n });\n\n // Hook up aria props on the control\n if (label && labelConnection === 'aria-labelledby') {\n controlProps['aria-labelledby'] ??= label.id;\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' && ariaInvalidOnError) {\n controlProps['aria-invalid'] ??= true;\n }\n\n const control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\n });\n\n if (label && labelConnection === 'htmlFor') {\n label.htmlFor ??= control.id;\n }\n\n const state: FieldState<FieldControl> = {\n orientation,\n validationState,\n classNames: params.classNames,\n components: {\n root: 'div',\n control: params.component,\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div',\n },\n root,\n control,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n\n return state as FieldState<T>;\n};\n"]}
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.getFieldClassNames = void 0;
5
- var getFieldClassNames = function (name) { return ({
6
- root: "fui-" + name,
7
- control: "fui-" + name + "__control",
8
- label: "fui-" + name + "__label",
9
- validationMessage: "fui-" + name + "__validationMessage",
10
- validationMessageIcon: "fui-" + name + "__validationMessageIcon",
11
- hint: "fui-" + name + "__hint",
12
- }); };
13
- exports.getFieldClassNames = getFieldClassNames;
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% auto 1fr',
27
- gridTemplateAreas: "\n \"label control control\"\n \"label validationIcon validationMessage\"\n \"label hint hint\"\n \"label . .\"\n ",
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
- validationMessage: {
44
- gridColumnStart: 'validationMessage',
45
- gridColumnEnd: 'validationMessage',
46
- },
47
- hint: {
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
- marginTop: react_theme_1.tokens.spacingVerticalXXS,
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
- alignSelf: 'start',
60
- justifySelf: 'stretch',
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(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, state.root.className);
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(classNames.label, rootStyles.label, labelStyles.base, state.label.className);
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(classNames.validationMessageIcon, rootStyles.validationIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
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(classNames.validationMessage, rootStyles.validationMessage, secondaryTextStyles.base, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
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(classNames.hint, secondaryTextStyles.base, rootStyles.hint, state.hint.className);
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":"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","sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldControl, FieldProps, FieldSlots, FieldState } from './Field.types';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldControl>> => ({\n root: `fui-${name}`,\n control: `fui-${name}__control`,\n label: `fui-${name}__label`,\n validationMessage: `fui-${name}__validationMessage`,\n validationMessageIcon: `fui-${name}__validationMessageIcon`,\n hint: `fui-${name}__hint`,\n});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'grid',\n gridAutoFlow: 'row',\n gridTemplateColumns: 'auto 1fr',\n gridTemplateAreas: `\n \"label label\"\n \"control control\"\n \"validationIcon validationMessage\"\n \"hint hint\"\n `,\n justifyItems: 'start',\n },\n\n horizontal: {\n gridTemplateColumns: '33% auto 1fr',\n gridTemplateAreas: `\n \"label control control\"\n \"label validationIcon validationMessage\"\n \"label hint hint\"\n \"label . .\"\n `,\n },\n\n label: {\n gridColumnStart: 'label',\n gridColumnEnd: 'label',\n gridRowStart: 'label',\n gridRowEnd: 'label',\n },\n\n control: {\n gridColumnStart: 'control',\n gridColumnEnd: 'control',\n },\n\n validationIcon: {\n gridColumnStart: 'validationIcon',\n gridColumnEnd: 'validationIcon',\n },\n\n validationMessage: {\n gridColumnStart: 'validationMessage',\n gridColumnEnd: 'validationMessage',\n },\n\n hint: {\n gridColumnStart: 'hint',\n gridColumnEnd: 'hint',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n horizontal: {\n marginRight: tokens.spacingHorizontalM,\n alignSelf: 'start',\n justifySelf: 'stretch',\n },\n});\n\nconst useSecondaryTextStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1,\n },\n\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n base: {\n display: 'block',\n alignSelf: 'start',\n fontSize: '12px',\n lineHeight: '12px',\n marginRight: tokens.spacingHorizontalXS,\n marginTop: tokens.spacingVerticalXS,\n },\n\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 = <T extends FieldControl>(state: FieldState<T>) => {\n const classNames = state.classNames;\n const validationState: FieldProps<FieldControl>['validationState'] = state.validationState;\n const horizontal = state.orientation === 'horizontal';\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n classNames.root,\n rootStyles.base,\n horizontal && rootStyles.horizontal,\n state.root.className,\n );\n\n if (state.control) {\n state.control.className = mergeClasses(classNames.control, rootStyles.control, state.control.className);\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);\n }\n\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n classNames.validationMessageIcon,\n rootStyles.validationIcon,\n validationMessageIconStyles.base,\n !!validationState && validationMessageIconStyles[validationState],\n state.validationMessageIcon.className,\n );\n }\n\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(\n classNames.validationMessage,\n rootStyles.validationMessage,\n secondaryTextStyles.base,\n validationState === 'error' && secondaryTextStyles.error,\n state.validationMessage.className,\n );\n }\n\n if (state.hint) {\n state.hint.className = mergeClasses(\n classNames.hint,\n secondaryTextStyles.base,\n rootStyles.hint,\n state.hint.className,\n );\n }\n};\n"]}
1
+ {"version":3,"file":"useFieldStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"names":[],"mappings":"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","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.getFieldClassNames = void 0;
5
- Object.defineProperty(exports, "getFieldClassNames", { enumerable: true, get: function () { return Field_1.getFieldClassNames; } });
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
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-field/src/index.ts"],"names":[],"mappings":";;;;IAAS,2GAAA,kBAAkB,OAAA;IAAE,6GAAA,oBAAoB,OAAA;IAAE,gHAAA,uBAAuB,OAAA;IAAE,0GAAA,iBAAiB,OAAA","sourcesContent":["export { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport type { FieldConfig, FieldControl, FieldProps, FieldSlots, FieldState } from './Field';\n"]}
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.control && React.createElement(slots.control, {
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
- }), slots.hint && React.createElement(slots.hint, {
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,GAA4BC,KAAoB,IAAI;EACnF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAA2BH,KAAiC,CAAC;EAElG,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,EAEnDL,KAAK,CAACM,OAAO,IAAIH,oBAACH,KAAK,CAACM,OAAO;IAAA,GAAML,SAAS,CAACK;EAAe,EAAI,EAClEN,KAAK,CAACO,iBAAiB,IAAIP,KAAK,CAACQ,qBAAqB,IACrDL,oBAACH,KAAK,CAACQ,qBAAqB;IAAA,GAAKP,SAAS,CAACO;EAAqB,EACjE,EACAR,KAAK,CAACO,iBAAiB,IAAIJ,oBAACH,KAAK,CAACO,iBAAiB;IAAA,GAAKN,SAAS,CAACM;EAAiB,EAAI,EACvFP,KAAK,CAACS,IAAI,IAAIN,oBAACH,KAAK,CAACS,IAAI;IAAA,GAAKR,SAAS,CAACQ;EAAI,EAAI,CACtC;AAEjB,CAAC;AAfYC,4BAAoB","names":["renderField_unstable","state","slots","slotProps","react_utilities_1","React","root","label","control","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 { FieldControl, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const { slots, slotProps } = getSlots<FieldSlots<FieldControl>>(state as FieldState<FieldControl>);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label} />}\n {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n {slots.control && <slots.control {...(slotProps.control as any)} />}\n {slots.validationMessage && slots.validationMessageIcon && (\n <slots.validationMessageIcon {...slotProps.validationMessageIcon} />\n )}\n {slots.validationMessage && <slots.validationMessage {...slotProps.validationMessage} />}\n {slots.hint && <slots.hint {...slotProps.hint} />}\n </slots.root>\n );\n};\n"]}
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"]}