@fluentui/react-field 9.0.0-alpha.25 → 9.0.0-alpha.27

Sign up to get free protection for your applications and to get access to all the features.
Files changed (53) hide show
  1. package/.swcrc +30 -0
  2. package/CHANGELOG.json +85 -1
  3. package/CHANGELOG.md +29 -2
  4. package/lib/Field.js.map +1 -1
  5. package/lib/components/Field/Field.js.map +1 -1
  6. package/lib/components/Field/Field.types.js +1 -1
  7. package/lib/components/Field/Field.types.js.map +1 -1
  8. package/lib/components/Field/index.js.map +1 -1
  9. package/lib/components/Field/renderField.js +1 -11
  10. package/lib/components/Field/renderField.js.map +1 -1
  11. package/lib/components/Field/useField.js +12 -9
  12. package/lib/components/Field/useField.js.map +1 -1
  13. package/lib/components/Field/useFieldStyles.js.map +1 -1
  14. package/lib/index.js.map +1 -1
  15. package/lib/util/makeDeprecatedField.js +2 -5
  16. package/lib/util/makeDeprecatedField.js.map +1 -1
  17. package/lib-commonjs/Field.js +5 -4
  18. package/lib-commonjs/Field.js.map +1 -1
  19. package/lib-commonjs/components/Field/Field.js +16 -12
  20. package/lib-commonjs/components/Field/Field.js.map +1 -1
  21. package/lib-commonjs/components/Field/Field.types.js +5 -2
  22. package/lib-commonjs/components/Field/Field.types.js.map +1 -1
  23. package/lib-commonjs/components/Field/index.js +9 -8
  24. package/lib-commonjs/components/Field/index.js.map +1 -1
  25. package/lib-commonjs/components/Field/renderField.js +13 -26
  26. package/lib-commonjs/components/Field/renderField.js.map +1 -1
  27. package/lib-commonjs/components/Field/useField.js +98 -102
  28. package/lib-commonjs/components/Field/useField.js.map +1 -1
  29. package/lib-commonjs/components/Field/useFieldStyles.js +137 -96
  30. package/lib-commonjs/components/Field/useFieldStyles.js.map +1 -1
  31. package/lib-commonjs/index.js +21 -49
  32. package/lib-commonjs/index.js.map +1 -1
  33. package/lib-commonjs/util/makeDeprecatedField.js +53 -71
  34. package/lib-commonjs/util/makeDeprecatedField.js.map +1 -1
  35. package/package.json +10 -9
  36. package/lib-amd/Field.js +0 -6
  37. package/lib-amd/Field.js.map +0 -1
  38. package/lib-amd/components/Field/Field.js +0 -12
  39. package/lib-amd/components/Field/Field.js.map +0 -1
  40. package/lib-amd/components/Field/Field.types.js +0 -5
  41. package/lib-amd/components/Field/Field.types.js.map +0 -1
  42. package/lib-amd/components/Field/index.js +0 -10
  43. package/lib-amd/components/Field/index.js.map +0 -1
  44. package/lib-amd/components/Field/renderField.js +0 -20
  45. package/lib-amd/components/Field/renderField.js.map +0 -1
  46. package/lib-amd/components/Field/useField.js +0 -99
  47. package/lib-amd/components/Field/useField.js.map +0 -1
  48. package/lib-amd/components/Field/useFieldStyles.js +0 -115
  49. package/lib-amd/components/Field/useFieldStyles.js.map +0 -1
  50. package/lib-amd/index.js +0 -13
  51. package/lib-amd/index.js.map +0 -1
  52. package/lib-amd/util/makeDeprecatedField.js +0 -38
  53. package/lib-amd/util/makeDeprecatedField.js.map +0 -1
@@ -1,115 +0,0 @@
1
- define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"], function (require, exports, tslib_1, react_theme_1, react_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
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
- /**
15
- * Styles for the root slot
16
- */
17
- var useRootStyles = react_1.makeStyles({
18
- base: {
19
- display: 'grid',
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.
23
- horizontal: {
24
- gridTemplateColumns: '33% 1fr',
25
- gridTemplateRows: 'auto auto auto 1fr',
26
- },
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',
32
- },
33
- });
34
- var useLabelStyles = react_1.makeStyles({
35
- base: {
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: {
44
- marginBottom: react_theme_1.tokens.spacingVerticalXXS,
45
- },
46
- verticalLarge: {
47
- marginBottom: react_theme_1.tokens.spacingVerticalXS,
48
- },
49
- horizontal: {
50
- marginRight: react_theme_1.tokens.spacingHorizontalM,
51
- gridRowStart: '1',
52
- gridRowEnd: '-1',
53
- },
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));
56
- var useSecondaryTextStyles = react_1.makeStyles({
57
- error: {
58
- color: react_theme_1.tokens.colorPaletteRedForeground1,
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',
75
- });
76
- var useValidationMessageIconStyles = react_1.makeStyles({
77
- error: {
78
- color: react_theme_1.tokens.colorPaletteRedForeground1,
79
- },
80
- warning: {
81
- color: react_theme_1.tokens.colorPaletteDarkOrangeForeground1,
82
- },
83
- success: {
84
- color: react_theme_1.tokens.colorPaletteGreenForeground1,
85
- },
86
- });
87
- /**
88
- * Apply styling to the Field slots based on the state
89
- */
90
- var useFieldStyles_unstable = function (state) {
91
- var validationState = state.validationState;
92
- var horizontal = state.orientation === 'horizontal';
93
- var rootStyles = useRootStyles();
94
- state.root.className = react_1.mergeClasses(exports.fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
95
- var labelStyles = useLabelStyles();
96
- if (state.label) {
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);
98
- }
99
- var validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
100
- var validationMessageIconStyles = useValidationMessageIconStyles();
101
- if (state.validationMessageIcon) {
102
- state.validationMessageIcon.className = react_1.mergeClasses(exports.fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
103
- }
104
- var secondaryTextBaseClassName = useSecondaryTextBaseClassName();
105
- var secondaryTextStyles = useSecondaryTextStyles();
106
- if (state.validationMessage) {
107
- state.validationMessage.className = react_1.mergeClasses(exports.fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
108
- }
109
- if (state.hint) {
110
- state.hint.className = react_1.mergeClasses(exports.fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
111
- }
112
- };
113
- exports.useFieldStyles_unstable = useFieldStyles_unstable;
114
- });
115
- //# sourceMappingURL=useFieldStyles.js.map
@@ -1 +0,0 @@
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 !== 'none' && validationMessageIconStyles[validationState],\n state.validationMessageIcon.className,\n );\n }\n\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(\n fieldClassNames.validationMessage,\n secondaryTextBaseClassName,\n validationState === 'error' && secondaryTextStyles.error,\n !!state.validationMessageIcon && secondaryTextStyles.withIcon,\n state.validationMessage.className,\n );\n }\n\n if (state.hint) {\n state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n }\n};\n"]}
package/lib-amd/index.js DELETED
@@ -1,13 +0,0 @@
1
- define(["require", "exports", "./Field", "./util/makeDeprecatedField"], function (require, exports, Field_1, makeDeprecatedField_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
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; } });
7
- Object.defineProperty(exports, "renderField_unstable", { enumerable: true, get: function () { return Field_1.renderField_unstable; } });
8
- Object.defineProperty(exports, "useFieldStyles_unstable", { enumerable: true, get: function () { return Field_1.useFieldStyles_unstable; } });
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; } });
12
- });
13
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
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"]}
@@ -1,38 +0,0 @@
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, _a = props.validationState, validationState = _a === void 0 ? 'none' : _a, 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
@@ -1 +0,0 @@
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,KAEE,KAAK,gBAFiB,EAAxB,eAAe,mBAAG,MAAM,KAAA,EACrB,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 = 'none',\n ...restOfProps\n } = props;\n\n return [\n {\n className,\n hint,\n label,\n orientation,\n required,\n size,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...root,\n },\n {\n required,\n size,\n ...restOfProps,\n ...control,\n },\n ];\n}\n\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport function makeDeprecatedField<ControlProps>(\n Control: React.ComponentType<ControlProps>,\n options: {\n mapProps?: (props: DeprecatedFieldProps<ControlProps>) => DeprecatedFieldProps<ControlProps>;\n displayName?: string;\n } = {},\n) {\n const { mapProps = props => props, displayName = `${Control.displayName}Field` } = options;\n\n const DeprecatedField = React.forwardRef((props, ref) => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(mapProps(props));\n return (\n <Field {...fieldProps}>\n {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n <Control {...(controlProps as any)} ref={ref as any} />\n </Field>\n );\n }) as ForwardRefComponent<DeprecatedFieldProps<ControlProps>>;\n\n DeprecatedField.displayName = displayName;\n\n return DeprecatedField;\n}\n\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport const getDeprecatedFieldClassNames = (controlRootClassName: string) => ({\n ...fieldClassNames,\n control: controlRootClassName,\n});\n"]}