@fluentui/react-field 9.0.0-alpha.20 → 9.0.0-alpha.22
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +55 -1
- package/CHANGELOG.md +24 -2
- package/lib/components/Field/Field.js.map +1 -1
- package/lib/components/Field/renderField.js.map +1 -1
- package/lib/components/Field/useField.js.map +1 -1
- package/lib/components/Field/useFieldStyles.js.map +1 -1
- package/lib/util/makeDeprecatedField.js.map +1 -1
- package/lib-commonjs/Field.js.map +1 -1
- package/lib-commonjs/components/Field/Field.js.map +1 -1
- package/lib-commonjs/components/Field/Field.types.js.map +1 -1
- package/lib-commonjs/components/Field/index.js.map +1 -1
- package/lib-commonjs/components/Field/renderField.js.map +1 -1
- package/lib-commonjs/components/Field/useField.js.map +1 -1
- package/lib-commonjs/components/Field/useFieldStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/util/makeDeprecatedField.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,61 @@
|
|
|
2
2
|
"name": "@fluentui/react-field",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 08 Mar 2023 17:39:19 GMT",
|
|
6
|
+
"tag": "@fluentui/react-field_v9.0.0-alpha.22",
|
|
7
|
+
"version": "9.0.0-alpha.22",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-field",
|
|
13
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.11",
|
|
14
|
+
"commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-field",
|
|
19
|
+
"comment": "Bump @fluentui/react-label to v9.1.0",
|
|
20
|
+
"commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-field",
|
|
25
|
+
"comment": "Bump @fluentui/react-utilities to v9.6.1",
|
|
26
|
+
"commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
|
|
27
|
+
}
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"date": "Wed, 15 Feb 2023 11:44:52 GMT",
|
|
33
|
+
"tag": "@fluentui/react-field_v9.0.0-alpha.21",
|
|
34
|
+
"version": "9.0.0-alpha.21",
|
|
35
|
+
"comments": {
|
|
36
|
+
"prerelease": [
|
|
37
|
+
{
|
|
38
|
+
"author": "beachball",
|
|
39
|
+
"package": "@fluentui/react-field",
|
|
40
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.10",
|
|
41
|
+
"commit": "087d981aab96bef2e332a373069a19bc702a7ca2"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "beachball",
|
|
45
|
+
"package": "@fluentui/react-field",
|
|
46
|
+
"comment": "Bump @fluentui/react-label to v9.0.22",
|
|
47
|
+
"commit": "087d981aab96bef2e332a373069a19bc702a7ca2"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-field",
|
|
52
|
+
"comment": "Bump @fluentui/react-utilities to v9.6.0",
|
|
53
|
+
"commit": "087d981aab96bef2e332a373069a19bc702a7ca2"
|
|
54
|
+
}
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"date": "Mon, 13 Feb 2023 23:43:14 GMT",
|
|
6
60
|
"tag": "@fluentui/react-field_v9.0.0-alpha.20",
|
|
7
61
|
"version": "9.0.0-alpha.20",
|
|
8
62
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,34 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-field
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 08 Mar 2023 17:39:19 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-alpha.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.22)
|
|
8
|
+
|
|
9
|
+
Wed, 08 Mar 2023 17:39:19 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.21..@fluentui/react-field_v9.0.0-alpha.22)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-context-selector to v9.1.11 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
|
|
15
|
+
- Bump @fluentui/react-label to v9.1.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
|
|
16
|
+
- Bump @fluentui/react-utilities to v9.6.1 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
|
|
17
|
+
|
|
18
|
+
## [9.0.0-alpha.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.21)
|
|
19
|
+
|
|
20
|
+
Wed, 15 Feb 2023 11:44:52 GMT
|
|
21
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.20..@fluentui/react-field_v9.0.0-alpha.21)
|
|
22
|
+
|
|
23
|
+
### Changes
|
|
24
|
+
|
|
25
|
+
- Bump @fluentui/react-context-selector to v9.1.10 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
|
|
26
|
+
- Bump @fluentui/react-label to v9.0.22 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
|
|
27
|
+
- Bump @fluentui/react-utilities to v9.6.0 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
|
|
28
|
+
|
|
7
29
|
## [9.0.0-alpha.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.20)
|
|
8
30
|
|
|
9
|
-
Mon, 13 Feb 2023 23:
|
|
31
|
+
Mon, 13 Feb 2023 23:43:14 GMT
|
|
10
32
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.19..@fluentui/react-field_v9.0.0-alpha.20)
|
|
11
33
|
|
|
12
34
|
### Changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","renderField_unstable","useField_unstable","useFieldStyles_unstable","Field","forwardRef","props","ref","state","displayName"],"sources":["../src/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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,uBAAuB,QAAQ,kBAAkB;AAE1D,OAAO,MAAMC,KAAK,gBAAoCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGN,iBAAiB,CAACI,KAAK,EAAEC,GAAG,CAAC;EAC3CJ,uBAAuB,CAACK,KAAK,CAAC;EAC9B,OAAOP,oBAAoB,CAACO,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,KAAK,CAACK,WAAW,GAAG,OAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","getSlots","renderField_unstable","state","slots","slotProps","createElement","root","label","children","validationMessage","validationMessageIcon","hint"],"sources":["../src/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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAaE,KAAK,CAAC;EAExD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAC3BH,KAAK,CAACI,KAAK,iBAAIR,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACI,KAAK;IAAA,GAAKH,SAAS,CAACG;EAAK,EAAI,EACnDH,SAAS,CAACE,IAAI,CAACE,QAAQ,EACvBL,KAAK,CAACM,iBAAiB,iBACtBV,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACM,iBAAiB;IAAA,GAAKL,SAAS,CAACK;EAAiB,GACrDN,KAAK,CAACO,qBAAqB,iBAAIX,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACO,qBAAqB;IAAA,GAAKN,SAAS,CAACM;EAAqB,EAAI,EACnGN,SAAS,CAACK,iBAAiB,CAACD,QAAQ,CAExC,EACAL,KAAK,CAACQ,IAAI,iBAAIZ,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACQ,IAAI;IAAA,GAAKP,SAAS,CAACO;EAAI,EAAI,CACtC;AAEjB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","CheckmarkCircle12Filled","ErrorCircle12Filled","Warning12Filled","Label","getNativeElementProps","resolveShorthand","useId","validationMessageIcons","error","createElement","warning","success","none","undefined","useField_unstable","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","root","label","defaultProps","id","role","hint","defaultIcon","validationMessageIcon","controlProps","isValidElement","_a","htmlFor","_b","filter","Boolean","join","_c","_d","cloneElement","components"],"sources":["../src/packages/react-components/react-field/src/components/Field/useField.tsx"],"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 none: undefined,\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 {\n children,\n orientation = 'vertical',\n required,\n validationState = props.validationMessage ? 'error' : 'none',\n size,\n } = 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 defaultIcon = validationMessageIcons[validationState];\n const validationMessageIcon = resolveShorthand(props.validationMessageIcon, {\n required: !!defaultIcon,\n defaultProps: {\n children: defaultIcon,\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"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","z8tnut","Byoj8tv","large","vertical","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","useSecondaryTextBaseClassName","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","useFieldStyles_unstable","state","validationState","orientation","rootStyles","className","labelStyles","size","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"sources":["../src/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 !== '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"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","Field","fieldClassNames","getPartitionedFieldProps","props","className","control","hint","label","orientation","required","root","size","style","validationMessage","validationMessageIcon","validationState","restOfProps","makeDeprecatedField","Control","options","mapProps","displayName","DeprecatedField","forwardRef","ref","fieldProps","controlProps","createElement","getDeprecatedFieldClassNames","controlRootClassName"],"sources":["../src/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 = '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"],"mappings":"AAAA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SAASC,KAAK,EAAEC,eAAe,QAAQ,UAAU;AAqBjD;;;AAGA,SAASC,wBAAwBA,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,GAAG,MAAM;IACxB,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,OAAM,SAAUY,mBAAmBA,CACjCC,OAA0C,EAC1CC,OAAA,GAGI,EAAE;EAEN,MAAM;IAAEC,QAAQ,GAAGjB,KAAK,IAAIA,KAAK;IAAEkB,WAAW,GAAG,GAAGH,OAAO,CAACG,WAAW;EAAO,CAAE,GAAGF,OAAO;EAE1F,MAAMG,eAAe,gBAAGvB,KAAK,CAACwB,UAAU,CAAC,CAACpB,KAAK,EAAEqB,GAAG,KAAI;IACtD,MAAM,CAACC,UAAU,EAAEC,YAAY,CAAC,GAAGxB,wBAAwB,CAACkB,QAAQ,CAACjB,KAAK,CAAC,CAAC;IAC5E,oBACEJ,KAAA,CAAA4B,aAAA,CAAC3B,KAAK;MAAA,GAAKyB;IAAU,gBAEnB1B,KAAA,CAAA4B,aAAA,CAACT,OAAO;MAAA,GAAMQ,YAAoB;MAAEF,GAAG,EAAEA;IAAU,EAAI,CACjD;EAEZ,CAAC,CAA4D;EAE7DF,eAAe,CAACD,WAAW,GAAGA,WAAW;EAEzC,OAAOC,eAAe;AACxB;AAEA;;;;AAIA,OAAO,MAAMM,4BAA4B,GAAIC,oBAA4B,KAAM;EAC7E,GAAG5B,eAAe;EAClBI,OAAO,EAAEwB;CACV,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-field/src/Field.ts"],"sourcesContent":["export * from './components/Field/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,8BAAAC,OAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","require","renderField_1","useField_1","useFieldStyles_1","exports","Field","forwardRef","props","ref","state","useField_unstable","useFieldStyles_unstable","renderField_unstable","displayName"],"sources":["../src/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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AAGA,MAAAC,aAAA,gBAAAD,OAAA;AACA,MAAAE,UAAA,gBAAAF,OAAA;AACA,MAAAG,gBAAA,gBAAAH,OAAA;AAEaI,OAAA,CAAAC,KAAK,gBAAoCN,KAAK,CAACO,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGP,UAAA,CAAAQ,iBAAiB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAC3CL,gBAAA,CAAAQ,uBAAuB,CAACF,KAAK,CAAC;EAC9B,OAAOR,aAAA,CAAAW,oBAAoB,CAACH,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFL,OAAA,CAAAC,KAAK,CAACQ,WAAW,GAAG,OAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../src/packages/react-components/react-field/src/components/Field/Field.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * The props added to the Field's child element.\n */\nexport type FieldChildProps = Pick<\n React.HTMLAttributes<HTMLElement>,\n 'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'\n>;\n\n/**\n * Slots of the Field component\n */\nexport type FieldSlots = {\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The label associated with the field.\n */\n label?: Slot<typeof Label>;\n\n /**\n * A message about the validation state. By default, this is an error message, but it can be a success, warning,\n * or custom message by setting `validationState`.\n */\n validationMessage?: Slot<'div'>;\n\n /**\n * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.\n *\n * The default depends on `validationState`:\n * * error: `<ErrorCircle12Filled />`\n * * warning: `<Warning12Filled />`\n * * success: `<CheckmarkCircle12Filled />`\n * * none: `null`\n */\n validationMessageIcon?: Slot<'span'>;\n\n /**\n * Additional hint text below the field.\n */\n hint?: Slot<'div'>;\n};\n\n/**\n * Field Props\n */\nexport type FieldProps = Omit<ComponentProps<FieldSlots>, 'children'> & {\n /**\n * The Field's child can be a single form control, or a render function that takes the props that should be spread on\n * a form control.\n *\n * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`), as well\n * as intrinsic form controls like `<input>` or `<textarea>`. Custom controls can also be used as long as they\n * accept FieldChildProps and spread them on the appropriate element.\n *\n * For more complex scenarios, a render function can be used to pass the FieldChildProps to the appropriate control.\n */\n children?: React.ReactElement<FieldChildProps> | null | ((props: FieldChildProps) => React.ReactNode);\n\n /**\n * The orientation of the label relative to the field component.\n * This only affects the label, and not the validationMessage or hint (which always appear below the field component).\n *\n * @default vertical\n */\n orientation?: 'vertical' | 'horizontal';\n\n /**\n * The `validationState` affects the display of the `validationMessage` and `validationMessageIcon`.\n *\n * * error: (default) The validation message has a red error icon and red text, with `role=\"alert\"` so it is\n * announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a\n * red border to some field components (such as `Input`).\n * * success: The validation message has a green checkmark icon and gray text.\n * * warning: The validation message has a yellow exclamation icon and gray text.\n * * none: The validation message has no icon and gray text.\n *\n * @default error when validationMessage is set; none otherwise.\n */\n validationState?: 'error' | 'warning' | 'success' | 'none';\n\n /**\n * Marks the Field as required. If `true`, an asterisk will be appended to the label, and `aria-required` will be set\n * on the Field's child.\n */\n required?: boolean;\n\n /**\n * The size of the Field's label.\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState = ComponentState<Required<FieldSlots>> &\n Required<Pick<FieldProps, 'orientation' | 'validationState'>>;\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/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"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,mBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,aAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,mBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,gBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,sBAAAC,OAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","require","react_utilities_1","renderField_unstable","state","slots","slotProps","getSlots","createElement","root","label","children","validationMessage","validationMessageIcon","hint","exports"],"sources":["../src/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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAGA;;;AAGO,MAAME,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,iBAAA,CAAAK,QAAQ,CAAaH,KAAK,CAAC;EAExD,OACEJ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,KAAK,IAAIV,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EACnDJ,SAAS,CAACG,IAAI,CAACE,QAAQ,EACvBN,KAAK,CAACO,iBAAiB,IACtBZ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACO,iBAAiB;IAAA,GAAKN,SAAS,CAACM;EAAiB,GACrDP,KAAK,CAACQ,qBAAqB,IAAIb,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACQ,qBAAqB;IAAA,GAAKP,SAAS,CAACO;EAAqB,EAAI,EACnGP,SAAS,CAACM,iBAAiB,CAACD,QAAQ,CAExC,EACAN,KAAK,CAACS,IAAI,IAAId,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACS,IAAI;IAAA,GAAKR,SAAS,CAACQ;EAAI,EAAI,CACtC;AAEjB,CAAC;AAhBYC,OAAA,CAAAZ,oBAAoB,GAAAA,oBAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","require","react_icons_1","react_label_1","react_utilities_1","validationMessageIcons","error","createElement","ErrorCircle12Filled","warning","Warning12Filled","success","CheckmarkCircle12Filled","none","undefined","useField_unstable","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","useId","root","getNativeElementProps","label","resolveShorthand","defaultProps","id","role","hint","defaultIcon","validationMessageIcon","controlProps","isValidElement","_a","htmlFor","_b","filter","Boolean","join","_c","_d","cloneElement","components","Label","exports"],"sources":["../src/packages/react-components/react-field/src/components/Field/useField.tsx"],"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 none: undefined,\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 {\n children,\n orientation = 'vertical',\n required,\n validationState = props.validationMessage ? 'error' : 'none',\n size,\n } = 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 defaultIcon = validationMessageIcons[validationState];\n const validationMessageIcon = resolveShorthand(props.validationMessageIcon, {\n required: !!defaultIcon,\n defaultProps: {\n children: defaultIcon,\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"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["react_theme_1","require","react_1","exports","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","__styles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","z8tnut","Byoj8tv","large","vertical","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","useSecondaryTextBaseClassName","__resetStyles","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","useFieldStyles_unstable","state","validationState","orientation","rootStyles","className","mergeClasses","labelStyles","size","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"sources":["../src/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 !== '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"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["Field_1","require","Object","defineProperty","exports","enumerable","get","Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","makeDeprecatedField_1","getDeprecatedFieldClassNames","makeDeprecatedField"],"sources":["../src/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"],"mappings":";;;;;;AAAA,IAAAA,OAAA,gBAAAC,OAAA;AAASC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAO,KAAK;EAAA;AAAA;AAAEL,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAQ,eAAe;EAAA;AAAA;AAAEN,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAS,oBAAoB;EAAA;AAAA;AAAEP,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAU,uBAAuB;EAAA;AAAA;AAAER,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAW,iBAAiB;EAAA;AAAA;AAGjG;AACA,IAAAC,qBAAA,gBAAAX,OAAA;AAASC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAM,qBAAA,CAAAC,4BAA4B;EAAA;AAAA;AAAEX,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAM,qBAAA,CAAAE,mBAAmB;EAAA;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","require","Field_1","getPartitionedFieldProps","props","className","control","hint","label","orientation","required","root","size","style","validationMessage","validationMessageIcon","validationState","restOfProps","makeDeprecatedField","Control","options","mapProps","displayName","DeprecatedField","forwardRef","ref","fieldProps","controlProps","createElement","Field","exports","getDeprecatedFieldClassNames","controlRootClassName","fieldClassNames"],"sources":["../src/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 = '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"],"mappings":";;;;;;AAAA;AACA,MAAAA,KAAA,gBAAAC,OAAA;AAGA,MAAAC,OAAA,gBAAAD,OAAA;AAqBA;;;AAGA,SAASE,wBAAwBA,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,GAAG,MAAM;IACxB,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,mBAAmBA,CACjCC,OAA0C,EAC1CC,OAAA,GAGI,EAAE;EAEN,MAAM;IAAEC,QAAQ,GAAGjB,KAAK,IAAIA,KAAK;IAAEkB,WAAW,GAAG,GAAGH,OAAO,CAACG,WAAW;EAAO,CAAE,GAAGF,OAAO;EAE1F,MAAMG,eAAe,GAAGvB,KAAK,CAACwB,UAAU,CAAC,CAACpB,KAAK,EAAEqB,GAAG,KAAI;IACtD,MAAM,CAACC,UAAU,EAAEC,YAAY,CAAC,GAAGxB,wBAAwB,CAACkB,QAAQ,CAACjB,KAAK,CAAC,CAAC;IAC5E,OACEJ,KAAA,CAAA4B,aAAA,CAAC1B,OAAA,CAAA2B,KAAK;MAAA,GAAKH;IAAU,GAEnB1B,KAAA,CAAA4B,aAAA,CAACT,OAAO;MAAA,GAAMQ,YAAoB;MAAEF,GAAG,EAAEA;IAAU,EAAI,CACjD;EAEZ,CAAC,CAA4D;EAE7DF,eAAe,CAACD,WAAW,GAAGA,WAAW;EAEzC,OAAOC,eAAe;AACxB;AAtBAO,OAAA,CAAAZ,mBAAA,GAAAA,mBAAA;AAwBA;;;;AAIO,MAAMa,4BAA4B,GAAIC,oBAA4B,KAAM;EAC7E,GAAG9B,OAAA,CAAA+B,eAAe;EAClB3B,OAAO,EAAE0B;CACV,CAAC;AAHWF,OAAA,CAAAC,4BAA4B,GAAAA,4BAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-field",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.22",
|
|
4
4
|
"description": "Fluent UI Field components",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
"@fluentui/scripts-tasks": "*"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
35
|
+
"@fluentui/react-context-selector": "^9.1.11",
|
|
36
36
|
"@fluentui/react-icons": "^2.0.175",
|
|
37
|
-
"@fluentui/react-label": "^9.0
|
|
37
|
+
"@fluentui/react-label": "^9.1.0",
|
|
38
38
|
"@fluentui/react-theme": "^9.1.5",
|
|
39
|
-
"@fluentui/react-utilities": "^9.
|
|
39
|
+
"@fluentui/react-utilities": "^9.6.1",
|
|
40
40
|
"@griffel/react": "^1.5.2",
|
|
41
41
|
"tslib": "^2.1.0"
|
|
42
42
|
},
|