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

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 (53) hide show
  1. package/.swcrc +30 -0
  2. package/CHANGELOG.json +58 -1
  3. package/CHANGELOG.md +18 -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"]}