@fluentui/react-field 0.0.0-nightly-20230124-0417.1 → 0.0.0-nightly-20230126-0420.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +13 -13
- package/CHANGELOG.md +9 -9
- package/dist/index.d.ts +60 -86
- package/lib/components/Field/Field.js +11 -0
- package/lib/components/Field/Field.js.map +1 -0
- package/lib/components/Field/Field.types.js.map +1 -1
- package/lib/components/Field/index.js +1 -0
- package/lib/components/Field/index.js.map +1 -1
- package/lib/components/Field/renderField.js +1 -3
- package/lib/components/Field/renderField.js.map +1 -1
- package/lib/components/Field/useField.js +37 -71
- package/lib/components/Field/useField.js.map +1 -1
- package/lib/components/Field/useFieldStyles.js +15 -18
- package/lib/components/Field/useFieldStyles.js.map +1 -1
- package/lib/index.js +3 -1
- package/lib/index.js.map +1 -1
- package/lib/util/makeDeprecatedField.js +71 -0
- package/lib/util/makeDeprecatedField.js.map +1 -0
- package/lib-commonjs/components/Field/Field.js +17 -0
- package/lib-commonjs/components/Field/Field.js.map +1 -0
- package/lib-commonjs/components/Field/index.js +1 -0
- package/lib-commonjs/components/Field/index.js.map +1 -1
- package/lib-commonjs/components/Field/renderField.js +1 -3
- package/lib-commonjs/components/Field/renderField.js.map +1 -1
- package/lib-commonjs/components/Field/useField.js +38 -73
- package/lib-commonjs/components/Field/useField.js.map +1 -1
- package/lib-commonjs/components/Field/useFieldStyles.js +16 -20
- package/lib-commonjs/components/Field/useFieldStyles.js.map +1 -1
- package/lib-commonjs/index.js +23 -3
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/util/makeDeprecatedField.js +79 -0
- package/lib-commonjs/util/makeDeprecatedField.js.map +1 -0
- package/package.json +7 -6
- package/lib/components/Field/SlotComponent.types.js +0 -2
- package/lib/components/Field/SlotComponent.types.js.map +0 -1
- package/lib-commonjs/components/Field/SlotComponent.types.js +0 -6
- package/lib-commonjs/components/Field/SlotComponent.types.js.map +0 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AAEA;
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAEA;AAGaA,uBAAe,GAA+B;EACzDC,IAAI,EAAE,WAAW;EACjBC,KAAK,EAAE,kBAAkB;EACzBC,iBAAiB,EAAE,8BAA8B;EACjDC,qBAAqB,EAAE,kCAAkC;EACzDC,IAAI,EAAE;CACP;AAED;AACA,MAAMC,QAAQ,GAAG,MAAM;AAEvB;;;AAGA,MAAMC,aAAa,gBAAGC,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAkB9B;AAEF,MAAMC,cAAc,gBAAGD,gBAAU;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAwB/B;AAEF,MAAME,6BAA6B,gBAAGF,qBAAe,wPAInD;AAEF,MAAMG,sBAAsB,gBAAGH,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EASvC;AAEF,MAAMI,qCAAqC,gBAAGJ,qBAAe,4XAU3D;AAEF,MAAMK,8BAA8B,gBAAGL,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAU/C;AAEF;;;AAGO,MAAMM,uBAAuB,GAAIC,KAAiB,IAAI;EAC3D,MAAM;IAAEC;EAAe,CAAE,GAAGD,KAAK;EACjC,MAAME,UAAU,GAAGF,KAAK,CAACG,WAAW,KAAK,YAAY;EAErD,MAAMC,UAAU,GAAGZ,aAAa,EAAE;EAClCQ,KAAK,CAACd,IAAI,CAACmB,SAAS,GAAGZ,oBAAY,CACjCR,uBAAe,CAACC,IAAI,EACpBkB,UAAU,CAACE,IAAI,EACfJ,UAAU,IAAIE,UAAU,CAACF,UAAU,EACnCA,UAAU,IAAI,CAACF,KAAK,CAACb,KAAK,IAAIiB,UAAU,CAACG,iBAAiB,EAC1DP,KAAK,CAACd,IAAI,CAACmB,SAAS,CACrB;EAED,MAAMG,WAAW,GAAGd,cAAc,EAAE;EACpC,IAAIM,KAAK,CAACb,KAAK,EAAE;IACfa,KAAK,CAACb,KAAK,CAACkB,SAAS,GAAGZ,oBAAY,CAClCR,uBAAe,CAACE,KAAK,EACrBqB,WAAW,CAACF,IAAI,EAChBJ,UAAU,IAAIM,WAAW,CAACN,UAAU,EACpC,CAACA,UAAU,IAAIM,WAAW,CAACC,QAAQ,EACnCT,KAAK,CAACb,KAAK,CAACuB,IAAI,KAAK,OAAO,IAAIF,WAAW,CAACG,KAAK,EACjD,CAACT,UAAU,IAAIF,KAAK,CAACb,KAAK,CAACuB,IAAI,KAAK,OAAO,IAAIF,WAAW,CAACI,aAAa,EACxEZ,KAAK,CAACb,KAAK,CAACkB,SAAS,CACtB;;EAGH,MAAMQ,kCAAkC,GAAGhB,qCAAqC,EAAE;EAClF,MAAMiB,2BAA2B,GAAGhB,8BAA8B,EAAE;EACpE,IAAIE,KAAK,CAACX,qBAAqB,EAAE;IAC/BW,KAAK,CAACX,qBAAqB,CAACgB,SAAS,GAAGZ,oBAAY,CAClDR,uBAAe,CAACI,qBAAqB,EACrCwB,kCAAkC,EAClC,CAAC,CAACZ,eAAe,IAAIa,2BAA2B,CAACb,eAAe,CAAC,EACjED,KAAK,CAACX,qBAAqB,CAACgB,SAAS,CACtC;;EAGH,MAAMU,0BAA0B,GAAGpB,6BAA6B,EAAE;EAClE,MAAMqB,mBAAmB,GAAGpB,sBAAsB,EAAE;EACpD,IAAII,KAAK,CAACZ,iBAAiB,EAAE;IAC3BY,KAAK,CAACZ,iBAAiB,CAACiB,SAAS,GAAGZ,oBAAY,CAC9CR,uBAAe,CAACG,iBAAiB,EACjC2B,0BAA0B,EAC1Bd,eAAe,KAAK,OAAO,IAAIe,mBAAmB,CAACC,KAAK,EACxD,CAAC,CAACjB,KAAK,CAACX,qBAAqB,IAAI2B,mBAAmB,CAACE,QAAQ,EAC7DlB,KAAK,CAACZ,iBAAiB,CAACiB,SAAS,CAClC;;EAGH,IAAIL,KAAK,CAACV,IAAI,EAAE;IACdU,KAAK,CAACV,IAAI,CAACe,SAAS,GAAGZ,oBAAY,CAACR,uBAAe,CAACK,IAAI,EAAEyB,0BAA0B,EAAEf,KAAK,CAACV,IAAI,CAACe,SAAS,CAAC;;AAE/G,CAAC;AApDYpB,+BAAuB","names":["exports","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","react_1","useLabelStyles","useSecondaryTextBaseClassName","useSecondaryTextStyles","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","useFieldStyles_unstable","state","validationState","horizontal","orientation","rootStyles","className","base","horizontalNoLabel","labelStyles","vertical","size","large","verticalLarge","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles","error","withIcon"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldSlots, FieldState } from './Field.types';\n\nexport const fieldClassNames: SlotClassNames<FieldSlots> = {\n root: `fui-Field`,\n label: `fui-Field__label`,\n validationMessage: `fui-Field__validationMessage`,\n validationMessageIcon: `fui-Field__validationMessageIcon`,\n hint: `fui-Field__hint`,\n};\n\n// Size of the icon in the validation message\nconst iconSize = '12px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'grid',\n },\n\n // In horizontal layout, the field is a grid with the label taking up the entire first column.\n // The last row is slack space in case the label is taller than the rest of the content.\n horizontal: {\n gridTemplateColumns: '33% 1fr',\n gridTemplateRows: 'auto auto auto 1fr',\n },\n\n // In horizontal layout without a label, replace the label's column with padding.\n // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n horizontalNoLabel: {\n paddingLeft: '33%',\n gridTemplateColumns: '1fr',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n paddingTop: tokens.spacingVerticalXXS,\n paddingBottom: tokens.spacingVerticalXXS,\n },\n\n large: {\n paddingTop: '1px',\n paddingBottom: '1px',\n },\n\n vertical: {\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n verticalLarge: {\n marginBottom: tokens.spacingVerticalXS,\n },\n\n horizontal: {\n marginRight: tokens.spacingHorizontalM,\n gridRowStart: '1',\n gridRowEnd: '-1',\n },\n});\n\nconst useSecondaryTextBaseClassName = makeResetStyles({\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1,\n});\n\nconst useSecondaryTextStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n\n withIcon: {\n // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`,\n },\n});\n\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n display: 'inline-block',\n fontSize: iconSize,\n // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n marginRight: tokens.spacingHorizontalXS,\n // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n lineHeight: '0',\n // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n verticalAlign: '-1px',\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n warning: {\n color: tokens.colorPaletteDarkOrangeForeground1,\n },\n success: {\n color: tokens.colorPaletteGreenForeground1,\n },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = (state: FieldState) => {\n const { validationState } = state;\n const horizontal = state.orientation === 'horizontal';\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n fieldClassNames.root,\n rootStyles.base,\n horizontal && rootStyles.horizontal,\n horizontal && !state.label && rootStyles.horizontalNoLabel,\n state.root.className,\n );\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n fieldClassNames.label,\n labelStyles.base,\n horizontal && labelStyles.horizontal,\n !horizontal && labelStyles.vertical,\n state.label.size === 'large' && labelStyles.large,\n !horizontal && state.label.size === 'large' && labelStyles.verticalLarge,\n state.label.className,\n );\n }\n\n const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n fieldClassNames.validationMessageIcon,\n validationMessageIconBaseClassName,\n !!validationState && 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-commonjs/index.js
CHANGED
@@ -3,12 +3,18 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.useField_unstable = exports.useFieldStyles_unstable = exports.renderField_unstable = exports.
|
6
|
+
exports.makeDeprecatedField = exports.getDeprecatedFieldClassNames = exports.useField_unstable = exports.useFieldStyles_unstable = exports.renderField_unstable = exports.fieldClassNames = exports.Field = void 0;
|
7
7
|
var Field_1 = /*#__PURE__*/require("./Field");
|
8
|
-
Object.defineProperty(exports, "
|
8
|
+
Object.defineProperty(exports, "Field", {
|
9
9
|
enumerable: true,
|
10
10
|
get: function () {
|
11
|
-
return Field_1.
|
11
|
+
return Field_1.Field;
|
12
|
+
}
|
13
|
+
});
|
14
|
+
Object.defineProperty(exports, "fieldClassNames", {
|
15
|
+
enumerable: true,
|
16
|
+
get: function () {
|
17
|
+
return Field_1.fieldClassNames;
|
12
18
|
}
|
13
19
|
});
|
14
20
|
Object.defineProperty(exports, "renderField_unstable", {
|
@@ -29,4 +35,18 @@ Object.defineProperty(exports, "useField_unstable", {
|
|
29
35
|
return Field_1.useField_unstable;
|
30
36
|
}
|
31
37
|
});
|
38
|
+
// eslint-disable-next-line deprecation/deprecation
|
39
|
+
var makeDeprecatedField_1 = /*#__PURE__*/require("./util/makeDeprecatedField");
|
40
|
+
Object.defineProperty(exports, "getDeprecatedFieldClassNames", {
|
41
|
+
enumerable: true,
|
42
|
+
get: function () {
|
43
|
+
return makeDeprecatedField_1.getDeprecatedFieldClassNames;
|
44
|
+
}
|
45
|
+
});
|
46
|
+
Object.defineProperty(exports, "makeDeprecatedField", {
|
47
|
+
enumerable: true,
|
48
|
+
get: function () {
|
49
|
+
return makeDeprecatedField_1.makeDeprecatedField;
|
50
|
+
}
|
51
|
+
});
|
32
52
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AAASA;EAAAC;EAAAC;IAAA,
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAASA;EAAAC;EAAAC;IAAA,oBAAK;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,8BAAe;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,mCAAoB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,sCAAuB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,gCAAiB;EAAA;AAAA;AAGjG;AACA;AAASF;EAAAC;EAAAC;IAAA,yDAA4B;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,gDAAmB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"","sources":["../../../../../../../packages/react-components/react-field/src/index.ts"],"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,79 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.getDeprecatedFieldClassNames = exports.makeDeprecatedField = void 0;
|
7
|
+
/* eslint-disable deprecation/deprecation */
|
8
|
+
const React = /*#__PURE__*/require("react");
|
9
|
+
const Field_1 = /*#__PURE__*/require("../Field");
|
10
|
+
/**
|
11
|
+
* Partition the props used by the Field itself, from the props that are passed to the underlying field component.
|
12
|
+
*/
|
13
|
+
function getPartitionedFieldProps(props) {
|
14
|
+
const {
|
15
|
+
className,
|
16
|
+
control,
|
17
|
+
hint,
|
18
|
+
label,
|
19
|
+
orientation,
|
20
|
+
required,
|
21
|
+
root,
|
22
|
+
size,
|
23
|
+
style,
|
24
|
+
validationMessage,
|
25
|
+
validationMessageIcon,
|
26
|
+
validationState,
|
27
|
+
...restOfProps
|
28
|
+
} = props;
|
29
|
+
return [{
|
30
|
+
className,
|
31
|
+
hint,
|
32
|
+
label,
|
33
|
+
orientation,
|
34
|
+
required,
|
35
|
+
size,
|
36
|
+
style,
|
37
|
+
validationMessage,
|
38
|
+
validationMessageIcon,
|
39
|
+
validationState,
|
40
|
+
...root
|
41
|
+
}, {
|
42
|
+
required,
|
43
|
+
size,
|
44
|
+
...restOfProps,
|
45
|
+
...control
|
46
|
+
}];
|
47
|
+
}
|
48
|
+
/**
|
49
|
+
* @deprecated Only for use to make deprecated [Control]Field shim components.
|
50
|
+
* @internal
|
51
|
+
*/
|
52
|
+
function makeDeprecatedField(Control, options = {}) {
|
53
|
+
const {
|
54
|
+
mapProps = props => props,
|
55
|
+
displayName = `${Control.displayName}Field`
|
56
|
+
} = options;
|
57
|
+
const DeprecatedField = React.forwardRef((props, ref) => {
|
58
|
+
const [fieldProps, controlProps] = getPartitionedFieldProps(mapProps(props));
|
59
|
+
return React.createElement(Field_1.Field, {
|
60
|
+
...fieldProps
|
61
|
+
}, React.createElement(Control, {
|
62
|
+
...controlProps,
|
63
|
+
ref: ref
|
64
|
+
}));
|
65
|
+
});
|
66
|
+
DeprecatedField.displayName = displayName;
|
67
|
+
return DeprecatedField;
|
68
|
+
}
|
69
|
+
exports.makeDeprecatedField = makeDeprecatedField;
|
70
|
+
/**
|
71
|
+
* @deprecated Only for use to make deprecated [Control]Field shim components.
|
72
|
+
* @internal
|
73
|
+
*/
|
74
|
+
const getDeprecatedFieldClassNames = controlRootClassName => ({
|
75
|
+
...Field_1.fieldClassNames,
|
76
|
+
control: controlRootClassName
|
77
|
+
});
|
78
|
+
exports.getDeprecatedFieldClassNames = getDeprecatedFieldClassNames;
|
79
|
+
//# sourceMappingURL=makeDeprecatedField.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;AAqBA;;;AAGA,SAASA,wBAAwB,CAC/BC,KAAiF;EAEjF,MAAM;IACJC,SAAS;IACTC,OAAO;IACPC,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,QAAQ;IACRC,IAAI;IACJC,IAAI;IACJC,KAAK;IACLC,iBAAiB;IACjBC,qBAAqB;IACrBC,eAAe;IACf,GAAGC;EAAW,CACf,GAAGb,KAAK;EAET,OAAO,CACL;IACEC,SAAS;IACTE,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,QAAQ;IACRE,IAAI;IACJC,KAAK;IACLC,iBAAiB;IACjBC,qBAAqB;IACrBC,eAAe;IACf,GAAGL;GACJ,EACD;IACED,QAAQ;IACRE,IAAI;IACJ,GAAGK,WAAW;IACd,GAAGX;GACJ,CACF;AACH;AAEA;;;;AAIA,SAAgBY,mBAAmB,CACjCC,OAA0C,EAC1CC,UAGI,EAAE;EAEN,MAAM;IAAEC,QAAQ,GAAGjB,KAAK,IAAIA,KAAK;IAAEkB,WAAW,GAAG,GAAGH,OAAO,CAACG,WAAW;EAAO,CAAE,GAAGF,OAAO;EAE1F,MAAMG,eAAe,GAAGC,KAAK,CAACC,UAAU,CAAC,CAACrB,KAAK,EAAEsB,GAAG,KAAI;IACtD,MAAM,CAACC,UAAU,EAAEC,YAAY,CAAC,GAAGzB,wBAAwB,CAACkB,QAAQ,CAACjB,KAAK,CAAC,CAAC;IAC5E,OACEoB,oBAACK,aAAK;MAAA,GAAKF;IAAU,GAEnBH,oBAACL,OAAO;MAAA,GAAMS,YAAoB;MAAEF,GAAG,EAAEA;IAAU,EAAI,CACjD;EAEZ,CAAC,CAA4D;EAE7DH,eAAe,CAACD,WAAW,GAAGA,WAAW;EAEzC,OAAOC,eAAe;AACxB;AAtBAO;AAwBA;;;;AAIO,MAAMC,4BAA4B,GAAIC,oBAA4B,KAAM;EAC7E,GAAGH,uBAAe;EAClBvB,OAAO,EAAE0B;CACV,CAAC;AAHWF,oCAA4B","names":["getPartitionedFieldProps","props","className","control","hint","label","orientation","required","root","size","style","validationMessage","validationMessageIcon","validationState","restOfProps","makeDeprecatedField","Control","options","mapProps","displayName","DeprecatedField","React","forwardRef","ref","fieldProps","controlProps","Field_1","exports","getDeprecatedFieldClassNames","controlRootClassName"],"sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-field/src/util/makeDeprecatedField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport * as React from 'react';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../Field';\nimport { Field, fieldClassNames } from '../Field';\n\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport type DeprecatedFieldProps<ControlProps> = ControlProps & {\n root?: FieldProps;\n control?: ControlProps;\n} & Pick<\n FieldProps,\n | 'className'\n | 'hint'\n | 'label'\n | 'orientation'\n | 'style'\n | 'validationMessage'\n | 'validationMessageIcon'\n | 'validationState'\n >;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nfunction getPartitionedFieldProps<ControlProps>(\n props: DeprecatedFieldProps<ControlProps> & Pick<FieldProps, 'required' | 'size'>,\n) {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n required,\n root,\n size,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...restOfProps\n } = props;\n\n return [\n {\n className,\n hint,\n label,\n orientation,\n required,\n size,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...root,\n },\n {\n required,\n size,\n ...restOfProps,\n ...control,\n },\n ];\n}\n\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport function makeDeprecatedField<ControlProps>(\n Control: React.ComponentType<ControlProps>,\n options: {\n mapProps?: (props: DeprecatedFieldProps<ControlProps>) => DeprecatedFieldProps<ControlProps>;\n displayName?: string;\n } = {},\n) {\n const { mapProps = props => props, displayName = `${Control.displayName}Field` } = options;\n\n const DeprecatedField = React.forwardRef((props, ref) => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(mapProps(props));\n return (\n <Field {...fieldProps}>\n {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n <Control {...(controlProps as any)} ref={ref as any} />\n </Field>\n );\n }) as ForwardRefComponent<DeprecatedFieldProps<ControlProps>>;\n\n DeprecatedField.displayName = displayName;\n\n return DeprecatedField;\n}\n\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport const getDeprecatedFieldClassNames = (controlRootClassName: string) => ({\n ...fieldClassNames,\n control: controlRootClassName,\n});\n"]}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-field",
|
3
|
-
"version": "0.0.0-nightly-
|
3
|
+
"version": "0.0.0-nightly-20230126-0420.1",
|
4
4
|
"description": "Fluent UI Field components",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -13,6 +13,7 @@
|
|
13
13
|
"license": "MIT",
|
14
14
|
"scripts": {
|
15
15
|
"build": "just-scripts build",
|
16
|
+
"bundle-size": "bundle-size measure",
|
16
17
|
"clean": "just-scripts clean",
|
17
18
|
"code-style": "just-scripts code-style",
|
18
19
|
"just": "just-scripts",
|
@@ -26,16 +27,16 @@
|
|
26
27
|
"devDependencies": {
|
27
28
|
"@fluentui/eslint-plugin": "*",
|
28
29
|
"@fluentui/react-conformance": "*",
|
29
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
30
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20230126-0420.1",
|
30
31
|
"@fluentui/scripts-api-extractor": "*",
|
31
32
|
"@fluentui/scripts-tasks": "*"
|
32
33
|
},
|
33
34
|
"dependencies": {
|
34
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
35
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20230126-0420.1",
|
35
36
|
"@fluentui/react-icons": "^2.0.175",
|
36
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
37
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
38
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
37
|
+
"@fluentui/react-label": "0.0.0-nightly-20230126-0420.1",
|
38
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230126-0420.1",
|
39
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230126-0420.1",
|
39
40
|
"@griffel/react": "^1.5.2",
|
40
41
|
"tslib": "^2.1.0"
|
41
42
|
},
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"SlotComponent.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/SlotComponent.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { SlotShorthandValue, SlotRenderFunction } from '@fluentui/react-utilities';\n\n//\n// TEMPORARY definition of the SlotComponent type, until it is available from react-utilities\n//\n\nexport type SlotComponent<Type extends React.ComponentType | React.VoidFunctionComponent> = WithSlotShorthandValue<\n Type extends React.ComponentType<infer Props>\n ? // If this is a VoidFunctionComponent that doesn't allow children, add { children?: never }\n WithSlotRenderFunction<Props extends { children?: unknown } ? Props : Props & { children?: never }>\n : never\n>;\n\n//\n// TEMPORARY copied versions of the non-exported helper types from react-utilities\n//\n\ntype WithSlotShorthandValue<Props extends { children?: unknown }> =\n | Props\n | Extract<SlotShorthandValue, Props['children']>;\n\ntype WithSlotRenderFunction<Props extends { children?: unknown }> = Props & {\n children?: Props['children'] | SlotRenderFunction<Props>;\n};\n"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"mappings":"","names":[],"sourceRoot":"","sources":[],"sourcesContent":[]}
|