@fluentui/react-field 0.0.0-nightly-20230119-0422.1 → 0.0.0-nightly-20230123-0418.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/lib/components/Field/useField.js +2 -1
- package/lib/components/Field/useField.js.map +1 -1
- package/lib/components/Field/useFieldStyles.js +16 -9
- package/lib/components/Field/useFieldStyles.js.map +1 -1
- package/lib-commonjs/components/Field/useField.js +2 -1
- package/lib-commonjs/components/Field/useField.js.map +1 -1
- package/lib-commonjs/components/Field/useFieldStyles.js +16 -9
- package/lib-commonjs/components/Field/useFieldStyles.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-field",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-field_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Mon, 23 Jan 2023 04:26:03 GMT",
|
|
6
|
+
"tag": "@fluentui/react-field_v0.0.0-nightly-20230123-0418.1",
|
|
7
|
+
"version": "0.0.0-nightly-20230123-0418.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,32 +16,32 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-field",
|
|
19
|
-
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230123-0418.1",
|
|
20
|
+
"commit": "03a7f3d490eb6abc6742889afc60a9d50c302a9a"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-field",
|
|
25
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230123-0418.1",
|
|
26
|
+
"commit": "03a7f3d490eb6abc6742889afc60a9d50c302a9a"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-field",
|
|
31
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230123-0418.1",
|
|
32
|
+
"commit": "03a7f3d490eb6abc6742889afc60a9d50c302a9a"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-field",
|
|
37
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230123-0418.1",
|
|
38
|
+
"commit": "03a7f3d490eb6abc6742889afc60a9d50c302a9a"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-field",
|
|
43
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230123-0418.1",
|
|
44
|
+
"commit": "03a7f3d490eb6abc6742889afc60a9d50c302a9a"
|
|
45
45
|
}
|
|
46
46
|
]
|
|
47
47
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-field
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 23 Jan 2023 04:26:03 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20230123-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20230123-0418.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.15..@fluentui/react-field_v0.0.0-nightly-
|
|
9
|
+
Mon, 23 Jan 2023 04:26:03 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.15..@fluentui/react-field_v0.0.0-nightly-20230123-0418.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20230123-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/03a7f3d490eb6abc6742889afc60a9d50c302a9a) by beachball)
|
|
16
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20230123-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/03a7f3d490eb6abc6742889afc60a9d50c302a9a) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230123-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/03a7f3d490eb6abc6742889afc60a9d50c302a9a) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230123-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/03a7f3d490eb6abc6742889afc60a9d50c302a9a) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230123-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/03a7f3d490eb6abc6742889afc60a9d50c302a9a) by beachball)
|
|
20
20
|
|
|
21
21
|
## [9.0.0-alpha.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.15)
|
|
22
22
|
|
|
@@ -75,7 +75,8 @@ export const useField_unstable = (props, ref, params) => {
|
|
|
75
75
|
|
|
76
76
|
const validationMessage = resolveShorthand(fieldProps.validationMessage, {
|
|
77
77
|
defaultProps: {
|
|
78
|
-
id: baseId + '__validationMessage'
|
|
78
|
+
id: baseId + '__validationMessage',
|
|
79
|
+
role: validationState === 'error' ? 'alert' : undefined
|
|
79
80
|
}
|
|
80
81
|
});
|
|
81
82
|
const hint = resolveShorthand(fieldProps.hint, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,EAAEC,mBAAmB,EAAEC,eAAe,QAAQ,uBAAuB;AACrG,SAASC,KAAK,QAAQ,uBAAuB;AAC7C,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,2BAA2B;AAG1F,MAAMC,sBAAsB,GAAG;EAC7BC,KAAK,eAAET,oBAACE,mBAAmB,OAAG;EAC9BQ,OAAO,eAAEV,oBAACG,eAAe,OAAG;EAC5BQ,OAAO,eAAEX,oBAACC,uBAAuB;CACzB;AAEV;;;AAGA,OAAO,MAAMW,wBAAwB,GAAIC,KAAyD,IAAI;EACpG,MAAM;IACJC,SAAS;IACTC,OAAO;IACPC,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,IAAI;IACJC,KAAK;IACLC,iBAAiB;IACjBC,qBAAqB;IACrBC,eAAe;IACf,GAAGC;EAAW,CACf,GAAGX,KAAK;EAET,MAAMY,UAAU,GAAG;IACjBX,SAAS;IACTC,OAAO;IACPC,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,IAAI;IACJC,KAAK;IACLC,iBAAiB;IACjBC,qBAAqB;IACrBC;GACD;EAED,OAAO,CAACE,UAAU,EAAED,WAAW,CAAU;AAC3C,CAAC;AAED;;;;;;;;;;AAUA,OAAO,MAAME,iBAAiB,GAAG,CAC/Bb,KAA8C,EAC9Cc,GAA2B,EAC3BC,MAAsB,KACL;;EACjB,MAAM,CAACH,UAAU,EAAEI,YAAY,CAAC,GAAGjB,wBAAwB,CAACC,KAAK,CAAC;EAClE,MAAM;IAAEK,WAAW,GAAG,UAAU;IAAEK;EAAe,CAAE,GAAGE,UAAU;EAChE,MAAM;IAAEK,eAAe,GAAG,SAAS;IAAEC,kBAAkB,GAAG;EAAI,CAAE,GAAGH,MAAM;EAEzE,MAAMI,MAAM,GAAGzB,KAAK,CAAC,QAAQ,CAAC;EAE9B,MAAMY,IAAI,GAAGb,gBAAgB,CAACmB,UAAU,CAACN,IAAI,EAAE;IAC7Cc,QAAQ,EAAE,IAAI;IACdC,YAAY,EAAE7B,qBAAqB,CAAC,KAAK,EAAEoB,UAAU;GACtD,CAAC;EAEF,MAAMR,KAAK,GAAGX,gBAAgB,CAACmB,UAAU,CAACR,KAAK,EAAE;IAC/CiB,YAAY,EAAE;MACZC,EAAE,EAAEH,MAAM,GAAG,SAAS;MACtBC,QAAQ,EAAEJ,YAAY,CAACI,QAAQ;MAC/BG,IAAI,EAAE,OAAOP,YAAY,CAACO,IAAI,KAAK,QAAQ,GAAGP,YAAY,CAACO,IAAI,GAAGC;MAClE;;GAEH,CAAC;;EAEF,MAAMhB,iBAAiB,GAAGf,gBAAgB,CAACmB,UAAU,CAACJ,iBAAiB,EAAE;IACvEa,YAAY,EAAE;MACZC,EAAE,EAAEH,MAAM,GAAG;;
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,EAAEC,mBAAmB,EAAEC,eAAe,QAAQ,uBAAuB;AACrG,SAASC,KAAK,QAAQ,uBAAuB;AAC7C,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,2BAA2B;AAG1F,MAAMC,sBAAsB,GAAG;EAC7BC,KAAK,eAAET,oBAACE,mBAAmB,OAAG;EAC9BQ,OAAO,eAAEV,oBAACG,eAAe,OAAG;EAC5BQ,OAAO,eAAEX,oBAACC,uBAAuB;CACzB;AAEV;;;AAGA,OAAO,MAAMW,wBAAwB,GAAIC,KAAyD,IAAI;EACpG,MAAM;IACJC,SAAS;IACTC,OAAO;IACPC,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,IAAI;IACJC,KAAK;IACLC,iBAAiB;IACjBC,qBAAqB;IACrBC,eAAe;IACf,GAAGC;EAAW,CACf,GAAGX,KAAK;EAET,MAAMY,UAAU,GAAG;IACjBX,SAAS;IACTC,OAAO;IACPC,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,IAAI;IACJC,KAAK;IACLC,iBAAiB;IACjBC,qBAAqB;IACrBC;GACD;EAED,OAAO,CAACE,UAAU,EAAED,WAAW,CAAU;AAC3C,CAAC;AAED;;;;;;;;;;AAUA,OAAO,MAAME,iBAAiB,GAAG,CAC/Bb,KAA8C,EAC9Cc,GAA2B,EAC3BC,MAAsB,KACL;;EACjB,MAAM,CAACH,UAAU,EAAEI,YAAY,CAAC,GAAGjB,wBAAwB,CAACC,KAAK,CAAC;EAClE,MAAM;IAAEK,WAAW,GAAG,UAAU;IAAEK;EAAe,CAAE,GAAGE,UAAU;EAChE,MAAM;IAAEK,eAAe,GAAG,SAAS;IAAEC,kBAAkB,GAAG;EAAI,CAAE,GAAGH,MAAM;EAEzE,MAAMI,MAAM,GAAGzB,KAAK,CAAC,QAAQ,CAAC;EAE9B,MAAMY,IAAI,GAAGb,gBAAgB,CAACmB,UAAU,CAACN,IAAI,EAAE;IAC7Cc,QAAQ,EAAE,IAAI;IACdC,YAAY,EAAE7B,qBAAqB,CAAC,KAAK,EAAEoB,UAAU;GACtD,CAAC;EAEF,MAAMR,KAAK,GAAGX,gBAAgB,CAACmB,UAAU,CAACR,KAAK,EAAE;IAC/CiB,YAAY,EAAE;MACZC,EAAE,EAAEH,MAAM,GAAG,SAAS;MACtBC,QAAQ,EAAEJ,YAAY,CAACI,QAAQ;MAC/BG,IAAI,EAAE,OAAOP,YAAY,CAACO,IAAI,KAAK,QAAQ,GAAGP,YAAY,CAACO,IAAI,GAAGC;MAClE;;GAEH,CAAC;;EAEF,MAAMhB,iBAAiB,GAAGf,gBAAgB,CAACmB,UAAU,CAACJ,iBAAiB,EAAE;IACvEa,YAAY,EAAE;MACZC,EAAE,EAAEH,MAAM,GAAG,qBAAqB;MAClCM,IAAI,EAAEf,eAAe,KAAK,OAAO,GAAG,OAAO,GAAGc;;GAEjD,CAAC;EAEF,MAAMrB,IAAI,GAAGV,gBAAgB,CAACmB,UAAU,CAACT,IAAI,EAAE;IAC7CkB,YAAY,EAAE;MACZC,EAAE,EAAEH,MAAM,GAAG;;GAEhB,CAAC;EAEF,MAAMV,qBAAqB,GAAGhB,gBAAgB,CAACmB,UAAU,CAACH,qBAAqB,EAAE;IAC/EW,QAAQ,EAAE,CAAC,CAACV,eAAe;IAC3BW,YAAY,EAAE;MACZK,QAAQ,EAAEhB,eAAe,GAAGf,sBAAsB,CAACe,eAAe,CAAC,GAAGc;;GAEzE,CAAC;EAEF;EACA,IAAIpB,KAAK,IAAIa,eAAe,KAAK,iBAAiB,EAAE;IAClD,kBAAY,CAAC,iBAAiB,oCAA9BD,YAAY,CAAC,iBAAiB,IAAMZ,KAAK,CAACkB,EAAE;;EAG9C,IAAId,iBAAiB,IAAIL,IAAI,EAAE;IAC7B;IACA;IACA;IACAa,YAAY,CAAC,kBAAkB,CAAC,GAAG,CAACR,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAEc,EAAE,EAAEnB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEmB,EAAE,EAAEN,YAAY,CAAC,kBAAkB,CAAC,CAAC,CACnGW,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,GAAG,CAAC;;EAGd,IAAInB,eAAe,KAAK,OAAO,IAAIQ,kBAAkB,EAAE;IACrD,kBAAY,CAAC,cAAc,oCAA3BF,YAAY,CAAC,cAAc,IAAM,IAAI;;EAGvC,MAAMd,OAAO,GAAGT,gBAAgB,CAACmB,UAAU,CAACV,OAAO,EAAE;IACnDkB,QAAQ,EAAE,IAAI;IACdC,YAAY,EAAE;MACZP,GAAG;MACHQ,EAAE,EAAEH,MAAM,GAAG,WAAW;MACxB,GAAGH;;GAEN,CAAC;EAEF,IAAIZ,KAAK,IAAIa,eAAe,KAAK,SAAS,EAAE;IAC1C,WAAK,CAACa,OAAO,mCAAb1B,KAAK,CAAC0B,OAAO,GAAK5B,OAAO,CAACoB,EAAE;;EAG9B,MAAMS,KAAK,GAA6B;IACtC1B,WAAW;IACXK,eAAe;IACfsB,UAAU,EAAEjB,MAAM,CAACiB,UAAU;IAC7BC,UAAU,EAAE;MACV3B,IAAI,EAAE,KAAK;MACXJ,OAAO,EAAEa,MAAM,CAACmB,SAAS;MACzB9B,KAAK,EAAEb,KAAK;MACZiB,iBAAiB,EAAE,KAAK;MACxBC,qBAAqB,EAAE,MAAM;MAC7BN,IAAI,EAAE;KACP;IACDG,IAAI;IACJJ,OAAO;IACPE,KAAK;IACLK,qBAAqB;IACrBD,iBAAiB;IACjBL;GACD;EAED,OAAO4B,KAAsB;AAC/B,CAAC","names":["React","CheckmarkCircle12Filled","ErrorCircle12Filled","Warning12Filled","Label","getNativeElementProps","resolveShorthand","useId","validationMessageIcons","error","warning","success","getPartitionedFieldProps","props","className","control","hint","label","orientation","root","style","validationMessage","validationMessageIcon","validationState","restOfProps","fieldProps","useField_unstable","ref","params","controlProps","labelConnection","ariaInvalidOnError","baseId","required","defaultProps","id","size","undefined","role","children","filter","Boolean","join","htmlFor","state","classNames","components","component"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldConfig, FieldControl, FieldPropsWithOptionalComponentProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = (props: FieldPropsWithOptionalComponentProps<FieldControl>) => {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...restOfProps\n } = props;\n\n const fieldProps = {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n };\n\n return [fieldProps, restOfProps] as const;\n};\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldControl>(\n props: FieldPropsWithOptionalComponentProps<T>,\n ref: React.Ref<HTMLElement>,\n params: FieldConfig<T>,\n): FieldState<T> => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n const { orientation = 'vertical', validationState } = fieldProps;\n const { labelConnection = 'htmlFor', ariaInvalidOnError = true } = params;\n\n const baseId = useId('field-');\n\n const root = resolveShorthand(fieldProps.root, {\n required: true,\n defaultProps: getNativeElementProps('div', fieldProps),\n });\n\n const label = resolveShorthand(fieldProps.label, {\n defaultProps: {\n id: baseId + '__label',\n required: controlProps.required,\n size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n // htmlFor is handled below\n },\n });\n\n const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n role: validationState === 'error' ? 'alert' : undefined,\n },\n });\n\n const hint = resolveShorthand(fieldProps.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n required: !!validationState,\n defaultProps: {\n children: validationState ? validationMessageIcons[validationState] : undefined,\n },\n });\n\n // Hook up aria props on the control\n if (label && labelConnection === 'aria-labelledby') {\n controlProps['aria-labelledby'] ??= label.id;\n }\n\n if (validationMessage || hint) {\n // The control is described by the validation message, or hint, or both\n // We also preserve and append any aria-describedby supplied by the user\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n controlProps['aria-describedby'] = [validationMessage?.id, hint?.id, controlProps['aria-describedby']]\n .filter(Boolean)\n .join(' ');\n }\n\n if (validationState === 'error' && ariaInvalidOnError) {\n controlProps['aria-invalid'] ??= true;\n }\n\n const control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\n });\n\n if (label && labelConnection === 'htmlFor') {\n label.htmlFor ??= control.id;\n }\n\n const state: FieldState<FieldControl> = {\n orientation,\n validationState,\n classNames: params.classNames,\n components: {\n root: 'div',\n control: params.component,\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div',\n },\n root,\n control,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n\n return state as FieldState<T>;\n};\n"]}
|
|
@@ -15,8 +15,7 @@ const iconSize = '12px';
|
|
|
15
15
|
*/
|
|
16
16
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
17
17
|
base: {
|
|
18
|
-
mc9l5x: "f13qh94s"
|
|
19
|
-
B7hvi0a: "f1m2n5bn"
|
|
18
|
+
mc9l5x: "f13qh94s"
|
|
20
19
|
},
|
|
21
20
|
horizontal: {
|
|
22
21
|
Budl1dq: "f2wwaib",
|
|
@@ -27,22 +26,30 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
27
26
|
Budl1dq: "f1c2z91y"
|
|
28
27
|
}
|
|
29
28
|
}, {
|
|
30
|
-
d: [".f13qh94s{display:grid;}", ".
|
|
29
|
+
d: [".f13qh94s{display:grid;}", ".f2wwaib{grid-template-columns:33% 1fr;}", ".f1645dqt{grid-template-rows:auto auto auto 1fr;}", ".f15jqgz8{padding-left:33%;}", ".fggqkej{padding-right:33%;}", ".f1c2z91y{grid-template-columns:1fr;}"]
|
|
31
30
|
});
|
|
32
31
|
const useLabelStyles = /*#__PURE__*/__styles({
|
|
33
32
|
base: {
|
|
34
|
-
|
|
33
|
+
z8tnut: "fclwglc",
|
|
34
|
+
Byoj8tv: "fywfov9"
|
|
35
|
+
},
|
|
36
|
+
large: {
|
|
37
|
+
z8tnut: "f1sl3k7w",
|
|
38
|
+
Byoj8tv: "f1brlhvm"
|
|
39
|
+
},
|
|
40
|
+
vertical: {
|
|
35
41
|
jrapky: "fyacil5"
|
|
36
42
|
},
|
|
43
|
+
verticalLarge: {
|
|
44
|
+
jrapky: "f8l5zjj"
|
|
45
|
+
},
|
|
37
46
|
horizontal: {
|
|
38
47
|
t21cq0: ["fkujibs", "f199hnxi"],
|
|
39
48
|
Ijaq50: "f16hsg94",
|
|
40
|
-
nk6f5a: "f1nzqi2z"
|
|
41
|
-
qb2dma: "f9h729m",
|
|
42
|
-
Bdqf98w: "fhb5wj7"
|
|
49
|
+
nk6f5a: "f1nzqi2z"
|
|
43
50
|
}
|
|
44
51
|
}, {
|
|
45
|
-
d: [".
|
|
52
|
+
d: [".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}", ".f1sl3k7w{padding-top:1px;}", ".f1brlhvm{padding-bottom:1px;}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}"]
|
|
46
53
|
});
|
|
47
54
|
const useSecondaryTextBaseClassName = /*#__PURE__*/__resetStyles("r5c4z9l", null, [".r5c4z9l{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
|
|
48
55
|
const useSecondaryTextStyles = /*#__PURE__*/__styles({
|
|
@@ -83,7 +90,7 @@ export const useFieldStyles_unstable = state => {
|
|
|
83
90
|
}
|
|
84
91
|
const labelStyles = useLabelStyles();
|
|
85
92
|
if (state.label) {
|
|
86
|
-
state.label.className = mergeClasses(classNames.label, labelStyles.base, horizontal && labelStyles.horizontal, state.label.className);
|
|
93
|
+
state.label.className = mergeClasses(classNames.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);
|
|
87
94
|
}
|
|
88
95
|
const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
|
|
89
96
|
const validationMessageIconStyles = useValidationMessageIconStyles();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,SAASA,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAEhE,kCAAsCC,YAAY,QAAQ,gBAAgB;AAG1E,OAAO,MAAMC,kBAAkB,GAAIC,IAAY,KAAgD;EAC7FC,IAAI,EAAE,OAAOD,IAAI,EAAE;EACnBE,OAAO,EAAE,OAAOF,IAAI,WAAW;EAC/BG,KAAK,EAAE,OAAOH,IAAI,SAAS;EAC3BI,iBAAiB,EAAE,OAAOJ,IAAI,qBAAqB;EACnDK,qBAAqB,EAAE,OAAOL,IAAI,yBAAyB;EAC3DM,IAAI,EAAE,OAAON,IAAI;CAClB,CAAC;AAEF;AACA,MAAMO,QAAQ,GAAG,MAAM;AAEvB;;;AAGA,MAAMC,aAAa,gBAAG;EAAA;IAAA;
|
|
1
|
+
{"version":3,"mappings":"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","names":["tokens","typographyStyles","mergeClasses","getFieldClassNames","name","root","control","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","useLabelStyles","useSecondaryTextBaseClassName","useSecondaryTextStyles","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","useFieldStyles_unstable","state","classNames","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 { FieldControl, FieldProps, FieldSlots, FieldState } from './Field.types';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldControl>> => ({\n root: `fui-${name}`,\n control: `fui-${name}__control`,\n label: `fui-${name}__label`,\n validationMessage: `fui-${name}__validationMessage`,\n validationMessageIcon: `fui-${name}__validationMessageIcon`,\n hint: `fui-${name}__hint`,\n});\n\n// 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 = <T extends FieldControl>(state: FieldState<T>) => {\n const classNames = state.classNames;\n const validationState: FieldProps<FieldControl>['validationState'] = state.validationState;\n const horizontal = state.orientation === 'horizontal';\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n classNames.root,\n rootStyles.base,\n horizontal && rootStyles.horizontal,\n horizontal && !state.label && rootStyles.horizontalNoLabel,\n state.root.className,\n );\n\n if (state.control) {\n state.control.className = mergeClasses(classNames.control, state.control.className);\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n classNames.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 classNames.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 classNames.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(classNames.hint, secondaryTextBaseClassName, state.hint.className);\n }\n};\n"]}
|
|
@@ -82,7 +82,8 @@ const useField_unstable = (props, ref, params) => {
|
|
|
82
82
|
|
|
83
83
|
const validationMessage = react_utilities_1.resolveShorthand(fieldProps.validationMessage, {
|
|
84
84
|
defaultProps: {
|
|
85
|
-
id: baseId + '__validationMessage'
|
|
85
|
+
id: baseId + '__validationMessage',
|
|
86
|
+
role: validationState === 'error' ? 'alert' : undefined
|
|
86
87
|
}
|
|
87
88
|
});
|
|
88
89
|
const hint = react_utilities_1.resolveShorthand(fieldProps.hint, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAGA,MAAMA,sBAAsB,GAAG;EAC7BC,KAAK,eAAEC,oBAACC,iCAAmB,OAAG;EAC9BC,OAAO,eAAEF,oBAACC,6BAAe,OAAG;EAC5BE,OAAO,eAAEH,oBAACC,qCAAuB;CACzB;AAEV;;;AAGO,MAAMG,wBAAwB,GAAIC,KAAyD,IAAI;EACpG,MAAM;IACJC,SAAS;IACTC,OAAO;IACPC,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,IAAI;IACJC,KAAK;IACLC,iBAAiB;IACjBC,qBAAqB;IACrBC,eAAe;IACf,GAAGC;EAAW,CACf,GAAGX,KAAK;EAET,MAAMY,UAAU,GAAG;IACjBX,SAAS;IACTC,OAAO;IACPC,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,IAAI;IACJC,KAAK;IACLC,iBAAiB;IACjBC,qBAAqB;IACrBC;GACD;EAED,OAAO,CAACE,UAAU,EAAED,WAAW,CAAU;AAC3C,CAAC;AA7BYE,gCAAwB;AA+BrC;;;;;;;;;;AAUO,MAAMC,iBAAiB,GAAG,CAC/Bd,KAA8C,EAC9Ce,GAA2B,EAC3BC,MAAsB,KACL;;EACjB,MAAM,CAACJ,UAAU,EAAEK,YAAY,CAAC,GAAGJ,gCAAwB,CAACb,KAAK,CAAC;EAClE,MAAM;IAAEK,WAAW,GAAG,UAAU;IAAEK;EAAe,CAAE,GAAGE,UAAU;EAChE,MAAM;IAAEM,eAAe,GAAG,SAAS;IAAEC,kBAAkB,GAAG;EAAI,CAAE,GAAGH,MAAM;EAEzE,MAAMI,MAAM,GAAGC,uBAAK,CAAC,QAAQ,CAAC;EAE9B,MAAMf,IAAI,GAAGe,kCAAgB,CAACT,UAAU,CAACN,IAAI,EAAE;IAC7CgB,QAAQ,EAAE,IAAI;IACdC,YAAY,EAAEF,uCAAqB,CAAC,KAAK,EAAET,UAAU;GACtD,CAAC;EAEF,MAAMR,KAAK,GAAGiB,kCAAgB,CAACT,UAAU,CAACR,KAAK,EAAE;IAC/CmB,YAAY,EAAE;MACZC,EAAE,EAAEJ,MAAM,GAAG,SAAS;MACtBE,QAAQ,EAAEL,YAAY,CAACK,QAAQ;MAC/BG,IAAI,EAAE,OAAOR,YAAY,CAACQ,IAAI,KAAK,QAAQ,GAAGR,YAAY,CAACQ,IAAI,GAAGC;MAClE;;GAEH,CAAC;;EAEF,MAAMlB,iBAAiB,GAAGa,kCAAgB,CAACT,UAAU,CAACJ,iBAAiB,EAAE;IACvEe,YAAY,EAAE;MACZC,EAAE,EAAEJ,MAAM,GAAG;;
|
|
1
|
+
{"version":3,"mappings":"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","names":["validationMessageIcons","error","React","react_icons_1","warning","success","getPartitionedFieldProps","props","className","control","hint","label","orientation","root","style","validationMessage","validationMessageIcon","validationState","restOfProps","fieldProps","exports","useField_unstable","ref","params","controlProps","labelConnection","ariaInvalidOnError","baseId","react_utilities_1","required","defaultProps","id","size","undefined","role","children","filter","Boolean","join","htmlFor","state","classNames","components","component","react_label_1"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldConfig, FieldControl, FieldPropsWithOptionalComponentProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = (props: FieldPropsWithOptionalComponentProps<FieldControl>) => {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...restOfProps\n } = props;\n\n const fieldProps = {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n };\n\n return [fieldProps, restOfProps] as const;\n};\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldControl>(\n props: FieldPropsWithOptionalComponentProps<T>,\n ref: React.Ref<HTMLElement>,\n params: FieldConfig<T>,\n): FieldState<T> => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n const { orientation = 'vertical', validationState } = fieldProps;\n const { labelConnection = 'htmlFor', ariaInvalidOnError = true } = params;\n\n const baseId = useId('field-');\n\n const root = resolveShorthand(fieldProps.root, {\n required: true,\n defaultProps: getNativeElementProps('div', fieldProps),\n });\n\n const label = resolveShorthand(fieldProps.label, {\n defaultProps: {\n id: baseId + '__label',\n required: controlProps.required,\n size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n // htmlFor is handled below\n },\n });\n\n const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n role: validationState === 'error' ? 'alert' : undefined,\n },\n });\n\n const hint = resolveShorthand(fieldProps.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n required: !!validationState,\n defaultProps: {\n children: validationState ? validationMessageIcons[validationState] : undefined,\n },\n });\n\n // Hook up aria props on the control\n if (label && labelConnection === 'aria-labelledby') {\n controlProps['aria-labelledby'] ??= label.id;\n }\n\n if (validationMessage || hint) {\n // The control is described by the validation message, or hint, or both\n // We also preserve and append any aria-describedby supplied by the user\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n controlProps['aria-describedby'] = [validationMessage?.id, hint?.id, controlProps['aria-describedby']]\n .filter(Boolean)\n .join(' ');\n }\n\n if (validationState === 'error' && ariaInvalidOnError) {\n controlProps['aria-invalid'] ??= true;\n }\n\n const control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\n });\n\n if (label && labelConnection === 'htmlFor') {\n label.htmlFor ??= control.id;\n }\n\n const state: FieldState<FieldControl> = {\n orientation,\n validationState,\n classNames: params.classNames,\n components: {\n root: 'div',\n control: params.component,\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div',\n },\n root,\n control,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n\n return state as FieldState<T>;\n};\n"]}
|
|
@@ -22,8 +22,7 @@ const iconSize = '12px';
|
|
|
22
22
|
*/
|
|
23
23
|
const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
24
24
|
base: {
|
|
25
|
-
mc9l5x: "f13qh94s"
|
|
26
|
-
B7hvi0a: "f1m2n5bn"
|
|
25
|
+
mc9l5x: "f13qh94s"
|
|
27
26
|
},
|
|
28
27
|
horizontal: {
|
|
29
28
|
Budl1dq: "f2wwaib",
|
|
@@ -34,22 +33,30 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
34
33
|
Budl1dq: "f1c2z91y"
|
|
35
34
|
}
|
|
36
35
|
}, {
|
|
37
|
-
d: [".f13qh94s{display:grid;}", ".
|
|
36
|
+
d: [".f13qh94s{display:grid;}", ".f2wwaib{grid-template-columns:33% 1fr;}", ".f1645dqt{grid-template-rows:auto auto auto 1fr;}", ".f15jqgz8{padding-left:33%;}", ".fggqkej{padding-right:33%;}", ".f1c2z91y{grid-template-columns:1fr;}"]
|
|
38
37
|
});
|
|
39
38
|
const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
40
39
|
base: {
|
|
41
|
-
|
|
40
|
+
z8tnut: "fclwglc",
|
|
41
|
+
Byoj8tv: "fywfov9"
|
|
42
|
+
},
|
|
43
|
+
large: {
|
|
44
|
+
z8tnut: "f1sl3k7w",
|
|
45
|
+
Byoj8tv: "f1brlhvm"
|
|
46
|
+
},
|
|
47
|
+
vertical: {
|
|
42
48
|
jrapky: "fyacil5"
|
|
43
49
|
},
|
|
50
|
+
verticalLarge: {
|
|
51
|
+
jrapky: "f8l5zjj"
|
|
52
|
+
},
|
|
44
53
|
horizontal: {
|
|
45
54
|
t21cq0: ["fkujibs", "f199hnxi"],
|
|
46
55
|
Ijaq50: "f16hsg94",
|
|
47
|
-
nk6f5a: "f1nzqi2z"
|
|
48
|
-
qb2dma: "f9h729m",
|
|
49
|
-
Bdqf98w: "fhb5wj7"
|
|
56
|
+
nk6f5a: "f1nzqi2z"
|
|
50
57
|
}
|
|
51
58
|
}, {
|
|
52
|
-
d: [".
|
|
59
|
+
d: [".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}", ".f1sl3k7w{padding-top:1px;}", ".f1brlhvm{padding-bottom:1px;}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}"]
|
|
53
60
|
});
|
|
54
61
|
const useSecondaryTextBaseClassName = /*#__PURE__*/react_1.__resetStyles("r5c4z9l", null, [".r5c4z9l{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
|
|
55
62
|
const useSecondaryTextStyles = /*#__PURE__*/react_1.__styles({
|
|
@@ -90,7 +97,7 @@ const useFieldStyles_unstable = state => {
|
|
|
90
97
|
}
|
|
91
98
|
const labelStyles = useLabelStyles();
|
|
92
99
|
if (state.label) {
|
|
93
|
-
state.label.className = react_1.mergeClasses(classNames.label, labelStyles.base, horizontal && labelStyles.horizontal, state.label.className);
|
|
100
|
+
state.label.className = react_1.mergeClasses(classNames.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);
|
|
94
101
|
}
|
|
95
102
|
const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
|
|
96
103
|
const validationMessageIconStyles = useValidationMessageIconStyles();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AAEA;AAGO,MAAMA,kBAAkB,GAAIC,IAAY,KAAgD;EAC7FC,IAAI,EAAE,OAAOD,IAAI,EAAE;EACnBE,OAAO,EAAE,OAAOF,IAAI,WAAW;EAC/BG,KAAK,EAAE,OAAOH,IAAI,SAAS;EAC3BI,iBAAiB,EAAE,OAAOJ,IAAI,qBAAqB;EACnDK,qBAAqB,EAAE,OAAOL,IAAI,yBAAyB;EAC3DM,IAAI,EAAE,OAAON,IAAI;CAClB,CAAC;AAPWO,0BAAkB;AAS/B;AACA,MAAMC,QAAQ,GAAG,MAAM;AAEvB;;;AAGA,MAAMC,aAAa,gBAAGC,gBAAU;EAAA;IAAA;
|
|
1
|
+
{"version":3,"mappings":"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","names":["getFieldClassNames","name","root","control","label","validationMessage","validationMessageIcon","hint","exports","iconSize","useRootStyles","react_1","useLabelStyles","useSecondaryTextBaseClassName","useSecondaryTextStyles","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","useFieldStyles_unstable","state","classNames","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 { FieldControl, FieldProps, FieldSlots, FieldState } from './Field.types';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldControl>> => ({\n root: `fui-${name}`,\n control: `fui-${name}__control`,\n label: `fui-${name}__label`,\n validationMessage: `fui-${name}__validationMessage`,\n validationMessageIcon: `fui-${name}__validationMessageIcon`,\n hint: `fui-${name}__hint`,\n});\n\n// 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 = <T extends FieldControl>(state: FieldState<T>) => {\n const classNames = state.classNames;\n const validationState: FieldProps<FieldControl>['validationState'] = state.validationState;\n const horizontal = state.orientation === 'horizontal';\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n classNames.root,\n rootStyles.base,\n horizontal && rootStyles.horizontal,\n horizontal && !state.label && rootStyles.horizontalNoLabel,\n state.root.className,\n );\n\n if (state.control) {\n state.control.className = mergeClasses(classNames.control, state.control.className);\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n classNames.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 classNames.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 classNames.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(classNames.hint, secondaryTextBaseClassName, state.hint.className);\n }\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-20230123-0418.1",
|
|
4
4
|
"description": "Fluent UI Field components",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -26,16 +26,16 @@
|
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@fluentui/eslint-plugin": "*",
|
|
28
28
|
"@fluentui/react-conformance": "*",
|
|
29
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
29
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20230123-0418.1",
|
|
30
30
|
"@fluentui/scripts-api-extractor": "*",
|
|
31
31
|
"@fluentui/scripts-tasks": "*"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
|
34
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20230123-0418.1",
|
|
35
35
|
"@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-
|
|
36
|
+
"@fluentui/react-label": "0.0.0-nightly-20230123-0418.1",
|
|
37
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230123-0418.1",
|
|
38
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230123-0418.1",
|
|
39
39
|
"@griffel/react": "^1.5.2",
|
|
40
40
|
"tslib": "^2.1.0"
|
|
41
41
|
},
|