@fluentui/react-field 0.0.0-nightly-20221010-0422.1 → 0.0.0-nightly-20221012-0423.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +33 -33
- package/CHANGELOG.md +19 -19
- package/dist/index.d.ts +2 -2
- package/lib/components/Field/Field.types.js.map +1 -1
- package/lib/components/Field/useField.js +2 -2
- package/lib/components/Field/useField.js.map +1 -1
- package/lib/components/Field/useFieldStyles.js +2 -2
- package/lib/components/Field/useFieldStyles.js.map +1 -1
- package/lib-commonjs/components/Field/useField.js +2 -2
- package/lib-commonjs/components/Field/useField.js.map +1 -1
- package/lib-commonjs/components/Field/useFieldStyles.js +2 -2
- package/lib-commonjs/components/Field/useFieldStyles.js.map +1 -1
- package/package.json +17 -17
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": "Wed, 12 Oct 2022 04:30:15 GMT",
|
|
6
|
+
"tag": "@fluentui/react-field_v0.0.0-nightly-20221012-0423.1",
|
|
7
|
+
"version": "0.0.0-nightly-20221012-0423.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,92 +16,92 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-field",
|
|
19
|
-
"comment": "Bump @fluentui/react-checkbox to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-checkbox to v0.0.0-nightly-20221012-0423.1",
|
|
20
|
+
"commit": "182980ff8126c109ac937f37354c28cfec7bab0b"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-field",
|
|
25
|
-
"comment": "Bump @fluentui/react-combobox to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-combobox to v0.0.0-nightly-20221012-0423.1",
|
|
26
|
+
"commit": "182980ff8126c109ac937f37354c28cfec7bab0b"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-field",
|
|
31
|
-
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20221012-0423.1",
|
|
32
|
+
"commit": "182980ff8126c109ac937f37354c28cfec7bab0b"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-field",
|
|
37
|
-
"comment": "Bump @fluentui/react-input to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-input to v0.0.0-nightly-20221012-0423.1",
|
|
38
|
+
"commit": "182980ff8126c109ac937f37354c28cfec7bab0b"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-field",
|
|
43
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20221012-0423.1",
|
|
44
|
+
"commit": "182980ff8126c109ac937f37354c28cfec7bab0b"
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
"author": "beachball",
|
|
48
48
|
"package": "@fluentui/react-field",
|
|
49
|
-
"comment": "Bump @fluentui/react-progress to v0.0.0-nightly-
|
|
50
|
-
"commit": "
|
|
49
|
+
"comment": "Bump @fluentui/react-progress to v0.0.0-nightly-20221012-0423.1",
|
|
50
|
+
"commit": "182980ff8126c109ac937f37354c28cfec7bab0b"
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
"author": "beachball",
|
|
54
54
|
"package": "@fluentui/react-field",
|
|
55
|
-
"comment": "Bump @fluentui/react-radio to v0.0.0-nightly-
|
|
56
|
-
"commit": "
|
|
55
|
+
"comment": "Bump @fluentui/react-radio to v0.0.0-nightly-20221012-0423.1",
|
|
56
|
+
"commit": "182980ff8126c109ac937f37354c28cfec7bab0b"
|
|
57
57
|
},
|
|
58
58
|
{
|
|
59
59
|
"author": "beachball",
|
|
60
60
|
"package": "@fluentui/react-field",
|
|
61
|
-
"comment": "Bump @fluentui/react-select to v0.0.0-nightly-
|
|
62
|
-
"commit": "
|
|
61
|
+
"comment": "Bump @fluentui/react-select to v0.0.0-nightly-20221012-0423.1",
|
|
62
|
+
"commit": "182980ff8126c109ac937f37354c28cfec7bab0b"
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
65
|
"author": "beachball",
|
|
66
66
|
"package": "@fluentui/react-field",
|
|
67
|
-
"comment": "Bump @fluentui/react-slider to v0.0.0-nightly-
|
|
68
|
-
"commit": "
|
|
67
|
+
"comment": "Bump @fluentui/react-slider to v0.0.0-nightly-20221012-0423.1",
|
|
68
|
+
"commit": "182980ff8126c109ac937f37354c28cfec7bab0b"
|
|
69
69
|
},
|
|
70
70
|
{
|
|
71
71
|
"author": "beachball",
|
|
72
72
|
"package": "@fluentui/react-field",
|
|
73
|
-
"comment": "Bump @fluentui/react-spinbutton to v0.0.0-nightly-
|
|
74
|
-
"commit": "
|
|
73
|
+
"comment": "Bump @fluentui/react-spinbutton to v0.0.0-nightly-20221012-0423.1",
|
|
74
|
+
"commit": "182980ff8126c109ac937f37354c28cfec7bab0b"
|
|
75
75
|
},
|
|
76
76
|
{
|
|
77
77
|
"author": "beachball",
|
|
78
78
|
"package": "@fluentui/react-field",
|
|
79
|
-
"comment": "Bump @fluentui/react-switch to v0.0.0-nightly-
|
|
80
|
-
"commit": "
|
|
79
|
+
"comment": "Bump @fluentui/react-switch to v0.0.0-nightly-20221012-0423.1",
|
|
80
|
+
"commit": "182980ff8126c109ac937f37354c28cfec7bab0b"
|
|
81
81
|
},
|
|
82
82
|
{
|
|
83
83
|
"author": "beachball",
|
|
84
84
|
"package": "@fluentui/react-field",
|
|
85
|
-
"comment": "Bump @fluentui/react-textarea to v0.0.0-nightly-
|
|
86
|
-
"commit": "
|
|
85
|
+
"comment": "Bump @fluentui/react-textarea to v0.0.0-nightly-20221012-0423.1",
|
|
86
|
+
"commit": "182980ff8126c109ac937f37354c28cfec7bab0b"
|
|
87
87
|
},
|
|
88
88
|
{
|
|
89
89
|
"author": "beachball",
|
|
90
90
|
"package": "@fluentui/react-field",
|
|
91
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
92
|
-
"commit": "
|
|
91
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221012-0423.1",
|
|
92
|
+
"commit": "182980ff8126c109ac937f37354c28cfec7bab0b"
|
|
93
93
|
},
|
|
94
94
|
{
|
|
95
95
|
"author": "beachball",
|
|
96
96
|
"package": "@fluentui/react-field",
|
|
97
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
98
|
-
"commit": "
|
|
97
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221012-0423.1",
|
|
98
|
+
"commit": "182980ff8126c109ac937f37354c28cfec7bab0b"
|
|
99
99
|
},
|
|
100
100
|
{
|
|
101
101
|
"author": "beachball",
|
|
102
102
|
"package": "@fluentui/react-field",
|
|
103
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
104
|
-
"commit": "
|
|
103
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221012-0423.1",
|
|
104
|
+
"commit": "182980ff8126c109ac937f37354c28cfec7bab0b"
|
|
105
105
|
}
|
|
106
106
|
]
|
|
107
107
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-field
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 12 Oct 2022 04:30:15 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-20221012-0423.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20221012-0423.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.3..@fluentui/react-field_v0.0.0-nightly-
|
|
9
|
+
Wed, 12 Oct 2022 04:30:15 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.3..@fluentui/react-field_v0.0.0-nightly-20221012-0423.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-checkbox to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-combobox to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-input to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-progress to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-radio to v0.0.0-nightly-
|
|
22
|
-
- Bump @fluentui/react-select to v0.0.0-nightly-
|
|
23
|
-
- Bump @fluentui/react-slider to v0.0.0-nightly-
|
|
24
|
-
- Bump @fluentui/react-spinbutton to v0.0.0-nightly-
|
|
25
|
-
- Bump @fluentui/react-switch to v0.0.0-nightly-
|
|
26
|
-
- Bump @fluentui/react-textarea to v0.0.0-nightly-
|
|
27
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
28
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
29
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-checkbox to v0.0.0-nightly-20221012-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/182980ff8126c109ac937f37354c28cfec7bab0b) by beachball)
|
|
16
|
+
- Bump @fluentui/react-combobox to v0.0.0-nightly-20221012-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/182980ff8126c109ac937f37354c28cfec7bab0b) by beachball)
|
|
17
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20221012-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/182980ff8126c109ac937f37354c28cfec7bab0b) by beachball)
|
|
18
|
+
- Bump @fluentui/react-input to v0.0.0-nightly-20221012-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/182980ff8126c109ac937f37354c28cfec7bab0b) by beachball)
|
|
19
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20221012-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/182980ff8126c109ac937f37354c28cfec7bab0b) by beachball)
|
|
20
|
+
- Bump @fluentui/react-progress to v0.0.0-nightly-20221012-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/182980ff8126c109ac937f37354c28cfec7bab0b) by beachball)
|
|
21
|
+
- Bump @fluentui/react-radio to v0.0.0-nightly-20221012-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/182980ff8126c109ac937f37354c28cfec7bab0b) by beachball)
|
|
22
|
+
- Bump @fluentui/react-select to v0.0.0-nightly-20221012-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/182980ff8126c109ac937f37354c28cfec7bab0b) by beachball)
|
|
23
|
+
- Bump @fluentui/react-slider to v0.0.0-nightly-20221012-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/182980ff8126c109ac937f37354c28cfec7bab0b) by beachball)
|
|
24
|
+
- Bump @fluentui/react-spinbutton to v0.0.0-nightly-20221012-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/182980ff8126c109ac937f37354c28cfec7bab0b) by beachball)
|
|
25
|
+
- Bump @fluentui/react-switch to v0.0.0-nightly-20221012-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/182980ff8126c109ac937f37354c28cfec7bab0b) by beachball)
|
|
26
|
+
- Bump @fluentui/react-textarea to v0.0.0-nightly-20221012-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/182980ff8126c109ac937f37354c28cfec7bab0b) by beachball)
|
|
27
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20221012-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/182980ff8126c109ac937f37354c28cfec7bab0b) by beachball)
|
|
28
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20221012-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/182980ff8126c109ac937f37354c28cfec7bab0b) by beachball)
|
|
29
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221012-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/182980ff8126c109ac937f37354c28cfec7bab0b) by beachball)
|
|
30
30
|
|
|
31
31
|
## [9.0.0-alpha.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.3)
|
|
32
32
|
|
package/dist/index.d.ts
CHANGED
|
@@ -131,7 +131,7 @@ export declare type FieldSlots<T extends FieldComponent> = {
|
|
|
131
131
|
/**
|
|
132
132
|
* A message about the validation state. The appearance of the `validationMessage` depends on `validationState`.
|
|
133
133
|
*/
|
|
134
|
-
validationMessage?: Slot<'
|
|
134
|
+
validationMessage?: Slot<'div'>;
|
|
135
135
|
/**
|
|
136
136
|
* The icon associated with the `validationMessage`. If the `validationState` prop is set, this will default to an
|
|
137
137
|
* icon corresponding to that state.
|
|
@@ -142,7 +142,7 @@ export declare type FieldSlots<T extends FieldComponent> = {
|
|
|
142
142
|
/**
|
|
143
143
|
* Additional hint text below the field.
|
|
144
144
|
*/
|
|
145
|
-
hint?: Slot<'
|
|
145
|
+
hint?: Slot<'div'>;
|
|
146
146
|
};
|
|
147
147
|
|
|
148
148
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.types.js","sourceRoot":"","sources":["../../../src/components/Field/Field.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot, SlotClassNames } from '@fluentui/react-utilities';\nimport type { SlotComponent } from './SlotComponent.types';\n\n/**\n * The minimum requirement for a component used by Field.\n *\n * Note: the use of VoidFunctionComponent means that component is not *required* to have a children prop,\n * but it is still allowed to have a children prop.\n */\nexport type FieldComponent = React.VoidFunctionComponent<\n Pick<\n React.HTMLAttributes<HTMLElement>,\n 'id' | 'className' | 'style' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-errormessage'\n >\n>;\n\n/**\n * Slots added by Field\n */\nexport type FieldSlots<T extends FieldComponent> = {\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The underlying component wrapped by this field.\n */\n control: SlotComponent<T>;\n\n /**\n * The label associated with the field.\n */\n label?: Slot<typeof Label>;\n\n /**\n * A message about the validation state. The appearance of the `validationMessage` depends on `validationState`.\n */\n validationMessage?: Slot<'
|
|
1
|
+
{"version":3,"file":"Field.types.js","sourceRoot":"","sources":["../../../src/components/Field/Field.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot, SlotClassNames } from '@fluentui/react-utilities';\nimport type { SlotComponent } from './SlotComponent.types';\n\n/**\n * The minimum requirement for a component used by Field.\n *\n * Note: the use of VoidFunctionComponent means that component is not *required* to have a children prop,\n * but it is still allowed to have a children prop.\n */\nexport type FieldComponent = React.VoidFunctionComponent<\n Pick<\n React.HTMLAttributes<HTMLElement>,\n 'id' | 'className' | 'style' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-errormessage'\n >\n>;\n\n/**\n * Slots added by Field\n */\nexport type FieldSlots<T extends FieldComponent> = {\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The underlying component wrapped by this field.\n */\n control: SlotComponent<T>;\n\n /**\n * The label associated with the field.\n */\n label?: Slot<typeof Label>;\n\n /**\n * A message about the validation state. The appearance of the `validationMessage` depends on `validationState`.\n */\n validationMessage?: Slot<'div'>;\n\n /**\n * The icon associated with the `validationMessage`. If the `validationState` prop is set, this will default to an\n * icon corresponding to that state.\n *\n * This will only be displayed if `validationMessage` is set.\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<T extends FieldComponent> = ComponentProps<Partial<FieldSlots<T>>, 'control'> & {\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 color of the `validationMessage`, the `validationMessageIcon`, and for some\n * field components, an `validationState=\"error\"` causes the border to become red.\n *\n * @default undefined\n */\n validationState?: 'error' | 'warning' | 'success';\n};\n\n/**\n * FieldProps plus extra optional props that are supported by useField_unstable, but not required to be part of the\n * API of every Field component.\n *\n * This allows Field to forward the required and size props to the label if the underlying component supports them,\n * but doesn't add them to the public API of fields that don't support them.\n */\nexport type FieldPropsWithOptionalComponentProps<T extends FieldComponent> = FieldProps<T> & {\n /**\n * Whether the field label should be marked as required.\n */\n required?: boolean;\n\n /**\n * Size of the field label.\n *\n * Number sizes will be ignored, but are allowed because the HTML `<input>` element has a prop `size?: number`.\n */\n size?: 'small' | 'medium' | 'large' | number;\n};\n\n/**\n * Configuration parameters for a Field class, passed to useField_unstable\n */\nexport type FieldConfig<T extends FieldComponent> = {\n /**\n * The underlying input component that this field is wrapping.\n */\n component: T;\n\n /**\n * Class names for this component, created by `getFieldClassNames`.\n */\n classNames: SlotClassNames<FieldSlots<T>>;\n\n /**\n * How the label be connected to the control.\n * * htmlFor - Set the Label's htmlFor prop to the component's ID (and generate an ID if not provided).\n * This is the preferred method for components that use the underlying <input> tag.\n * * aria-labelledby - Set the component's aria-labelledby prop to the Label's ID. Use this for components\n * that are not directly <input> elements (such as RadioGroup).\n *\n * @default htmlFor\n */\n labelConnection?: 'htmlFor' | 'aria-labelledby';\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState<T extends FieldComponent> = ComponentState<Required<FieldSlots<T>>> &\n Pick<FieldProps<T>, 'orientation' | 'validationState'> & {\n classNames: SlotClassNames<FieldSlots<T>>;\n };\n"]}
|
|
@@ -130,9 +130,9 @@ export const useField_unstable = (props, ref, params) => {
|
|
|
130
130
|
root: 'div',
|
|
131
131
|
control: params.component,
|
|
132
132
|
label: Label,
|
|
133
|
-
validationMessage: '
|
|
133
|
+
validationMessage: 'div',
|
|
134
134
|
validationMessageIcon: 'span',
|
|
135
|
-
hint: '
|
|
135
|
+
hint: 'div'
|
|
136
136
|
},
|
|
137
137
|
root,
|
|
138
138
|
control,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Field/useField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,EAAkC,mBAAlC,EAAuD,eAAvD,QAA8E,uBAA9E;AACA,SAAS,KAAT,QAAsB,uBAAtB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AASA,MAAM,sBAAsB,GAAG;EAC7B,KAAK,eAAE,KAAA,CAAA,aAAA,CAAC,mBAAD,EAAoB,IAApB,CADsB;EAE7B,OAAO,eAAE,KAAA,CAAA,aAAA,CAAC,eAAD,EAAgB,IAAhB,CAFoB;EAG7B,OAAO,eAAE,KAAA,CAAA,aAAA,CAAC,uBAAD,EAAwB,IAAxB;AAHoB,CAA/B;AAMA;;AAEG;;AACH,OAAO,MAAM,wBAAwB,GAA8C,KAA3C,IAA2D;EACjG,MAAM;IACJ,SADI;IAEJ,OAFI;IAGJ,IAHI;IAIJ,KAJI;IAKJ,WALI;IAMJ,IANI;IAOJ,KAPI;IAQJ,iBARI;IASJ,qBATI;IAUJ,eAVI;IAWJ,GAAG;EAXC,IAYF,KAZJ;EAcA,MAAM,UAAU,GAAG;IACjB,SADiB;IAEjB,OAFiB;IAGjB,IAHiB;IAIjB,KAJiB;IAKjB,WALiB;IAMjB,IANiB;IAOjB,KAPiB;IAQjB,iBARiB;IASjB,qBATiB;IAUjB;EAViB,CAAnB;EAaA,OAAO,CAAC,UAAD,EAAa,WAAb,CAAP;AACD,CA7BM;AA+BP;;;;;;;;;AASG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAC/B,KAD+B,EAE/B,GAF+B,EAG/B,MAH+B,KAId;;;EACjB,MAAM,CAAC,UAAD,EAAa,YAAb,IAA6B,wBAAwB,CAAC,KAAD,CAA3D;EACA,MAAM;IAAE,WAAW,GAAG,UAAhB;IAA4B;EAA5B,IAAgD,UAAtD;EACA,MAAM;IAAE,eAAe,GAAG;EAApB,IAAkC,MAAxC;EAEA,MAAM,MAAM,GAAG,KAAK,CAAC,QAAD,CAApB;EAEA,MAAM,IAAI,GAAG,gBAAgB,CAAC,UAAU,CAAC,IAAZ,EAAkB;IAC7C,QAAQ,EAAE,IADmC;IAE7C,YAAY,EAAE,qBAAqB,CAAC,KAAD,EAAQ,UAAR;EAFU,CAAlB,CAA7B;EAKA,MAAM,OAAO,GAAG,gBAAgB,CAAC,UAAU,CAAC,OAAZ,EAAqB;IACnD,QAAQ,EAAE,IADyC;IAEnD,YAAY,EAAE;MACZ,GADY;MAEZ,EAAE,EAAE,MAAM,GAAG,WAFD;MAGZ,GAAG;IAHS;EAFqC,CAArB,CAAhC;EASA,MAAM,KAAK,GAAG,gBAAgB,CAAC,UAAU,CAAC,KAAZ,EAAmB;IAC/C,YAAY,EAAE;MACZ,EAAE,EAAE,MAAM,GAAG,SADD;MAEZ,QAAQ,EAAE,YAAY,CAAC,QAFX;MAGZ,IAAI,EAAE,OAAO,YAAY,CAAC,IAApB,KAA6B,QAA7B,GAAwC,YAAY,CAAC,IAArD,GAA4D,SAHtD;MAIZ,OAAO,EAAE,eAAe,KAAK,SAApB,GAAgC,OAAO,CAAC,EAAxC,GAA6C;IAJ1C;EADiC,CAAnB,CAA9B;EASA,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,UAAU,CAAC,iBAAZ,EAA+B;IACvE,YAAY,EAAE;MACZ,EAAE,EAAE,MAAM,GAAG;IADD;EADyD,CAA/B,CAA1C;EAMA,MAAM,IAAI,GAAG,gBAAgB,CAAC,UAAU,CAAC,IAAZ,EAAkB;IAC7C,YAAY,EAAE;MACZ,EAAE,EAAE,MAAM,GAAG;IADD;EAD+B,CAAlB,CAA7B;EAMA,MAAM,qBAAqB,GAAG,gBAAgB,CAAC,UAAU,CAAC,qBAAZ,EAAmC;IAC/E,QAAQ,EAAE,CAAC,CAAC,eADmE;IAE/E,YAAY,EAAE;MACZ,QAAQ,EAAE,eAAe,GAAG,sBAAsB,CAAC,eAAD,CAAzB,GAA6C;IAD1D;EAFiE,CAAnC,CAA9C,CA1CiB,CAiDjB;;EACA,IAAI,KAAK,IAAI,eAAe,KAAK,iBAAjC,EAAoD;IAClD,CAAA,EAAA,GAAA,OAAO,CAAC,iBAAD,CAAP,MAAyB,IAAzB,IAAyB,EAAA,KAAA,KAAA,CAAzB,GAAyB,EAAzB,GAAA,OAAO,CAAC,iBAAD,CAAP,GAA+B,KAAK,CAAC,EAArC;EACD;;EAED,IAAI,eAAe,KAAK,OAAxB,EAAiC;IAC/B,CAAA,EAAA,GAAA,OAAO,CAAC,cAAD,CAAP,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,EAAtB,GAAA,OAAO,CAAC,cAAD,CAAP,GAA4B,IAA5B;;IACA,IAAI,iBAAJ,EAAuB;MACrB,CAAA,EAAA,GAAA,OAAO,CAAC,mBAAD,CAAP,MAA2B,IAA3B,IAA2B,EAAA,KAAA,KAAA,CAA3B,GAA2B,EAA3B,GAAA,OAAO,CAAC,mBAAD,CAAP,GAAiC,iBAAiB,CAAC,EAAnD;IACD;;IACD,IAAI,IAAJ,EAAU;MACR,CAAA,EAAA,GAAA,OAAO,CAAC,kBAAD,CAAP,MAA0B,IAA1B,IAA0B,EAAA,KAAA,KAAA,CAA1B,GAA0B,EAA1B,GAAA,OAAO,CAAC,kBAAD,CAAP,GAAgC,IAAI,CAAC,EAArC;IACD;EACF,CARD,MAQO;IACL;IACA,MAAM,WAAW,GAAG,iBAAiB,IAAI,IAAzC;;IACA,IAAI,WAAJ,EAAiB;MACf,CAAA,EAAA,GAAA,OAAO,CAAC,kBAAD,CAAP,MAA0B,IAA1B,IAA0B,EAAA,KAAA,KAAA,CAA1B,GAA0B,EAA1B,GAAA,OAAO,CAAC,kBAAD,CAAP,GAAgC,iBAAiB,IAAI,IAArB,GAA4B,GAAG,iBAAiB,CAAC,EAAE,IAAI,IAAI,CAAC,EAAE,EAA9D,GAAmE,WAAW,CAAC,EAA/G;IACD;EACF;;EAED,MAAM,KAAK,GAA+B;IACxC,WADwC;IAExC,eAFwC;IAGxC,UAAU,EAAE,MAAM,CAAC,UAHqB;IAIxC,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,OAAO,EAAE,MAAM,CAAC,SAFN;MAGV,KAAK,EAAE,KAHG;MAIV,iBAAiB,EAAE,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Field/useField.tsx"],"names":[],"mappings":"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","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 {\n FieldComponent,\n FieldConfig,\n FieldProps,\n FieldPropsWithOptionalComponentProps,\n FieldState,\n} 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 extends FieldProps<FieldComponent>>(props: Props) => {\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 FieldComponent>(\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' } = 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 control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\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: labelConnection === 'htmlFor' ? control.id : undefined,\n },\n });\n\n const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\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 control['aria-labelledby'] ??= label.id;\n }\n\n if (validationState === 'error') {\n control['aria-invalid'] ??= true;\n if (validationMessage) {\n control['aria-errormessage'] ??= validationMessage.id;\n }\n if (hint) {\n control['aria-describedby'] ??= hint.id;\n }\n } else {\n // If the state is not an error, then the control is described by the validation message, or hint, or both\n const describedby = validationMessage || hint;\n if (describedby) {\n control['aria-describedby'] ??= validationMessage && hint ? `${validationMessage.id} ${hint.id}` : describedby.id;\n }\n }\n\n const state: FieldState<FieldComponent> = {\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"],"sourceRoot":""}
|
|
@@ -14,7 +14,7 @@ export const getFieldClassNames = name => ({
|
|
|
14
14
|
|
|
15
15
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
16
16
|
"base": {
|
|
17
|
-
"mc9l5x": "
|
|
17
|
+
"mc9l5x": "f13qh94s",
|
|
18
18
|
"Bxotwcr": "f14np9u9",
|
|
19
19
|
"B7hvi0a": "f1m2n5bn"
|
|
20
20
|
},
|
|
@@ -26,7 +26,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
26
26
|
"Br312pm": "fd46tj4"
|
|
27
27
|
}
|
|
28
28
|
}, {
|
|
29
|
-
"d": [".
|
|
29
|
+
"d": [".f13qh94s{display:grid;}", ".f14np9u9{grid-auto-flow:row;}", ".f1m2n5bn{justify-items:start;}", ".fai812u{grid-template-rows:auto auto auto auto;}", ".fckz59x{grid-template-columns:1fr 2fr;}", ".fd46tj4{grid-column-start:2;}"]
|
|
30
30
|
});
|
|
31
31
|
|
|
32
32
|
const useLabelStyles = /*#__PURE__*/__styles({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Field/useFieldStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldComponent, FieldProps, FieldSlots, FieldState } from './Field.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldComponent>> => ({\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/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: '
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Field/useFieldStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldComponent, FieldProps, FieldSlots, FieldState } from './Field.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldComponent>> => ({\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/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'grid',\n gridAutoFlow: 'row',\n justifyItems: 'start',\n },\n\n horizontal: {\n gridTemplateRows: 'auto auto auto auto',\n gridTemplateColumns: '1fr 2fr',\n },\n\n secondColumn: {\n gridColumnStart: '2',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n horizontal: {\n gridRowStart: '1',\n gridRowEnd: '-1',\n marginRight: tokens.spacingHorizontalM,\n alignSelf: 'start',\n justifySelf: 'stretch',\n },\n});\n\nconst useSecondaryTextStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1,\n },\n\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n base: {\n fontSize: '12px',\n lineHeight: '12px',\n verticalAlign: 'middle',\n marginRight: tokens.spacingHorizontalXS,\n },\n\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 FieldComponent>(state: FieldState<T>) => {\n const classNames = state.classNames;\n const validationState: FieldProps<FieldComponent>['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 state.root.className,\n );\n\n if (state.control) {\n state.control.className = mergeClasses(\n classNames.control,\n horizontal && rootStyles.secondColumn,\n state.control.className,\n );\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 state.label.className,\n );\n }\n\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n classNames.validationMessageIcon,\n validationMessageIconStyles.base,\n !!validationState && validationMessageIconStyles[validationState],\n state.validationMessageIcon.className,\n );\n }\n\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(\n classNames.validationMessage,\n secondaryTextStyles.base,\n horizontal && rootStyles.secondColumn,\n validationState === 'error' && secondaryTextStyles.error,\n state.validationMessage.className,\n );\n }\n\n if (state.hint) {\n state.hint.className = mergeClasses(\n classNames.hint,\n secondaryTextStyles.base,\n horizontal && rootStyles.secondColumn,\n state.hint.className,\n );\n }\n};\n"],"sourceRoot":""}
|
|
@@ -143,9 +143,9 @@ const useField_unstable = (props, ref, params) => {
|
|
|
143
143
|
root: 'div',
|
|
144
144
|
control: params.component,
|
|
145
145
|
label: react_label_1.Label,
|
|
146
|
-
validationMessage: '
|
|
146
|
+
validationMessage: 'div',
|
|
147
147
|
validationMessageIcon: 'span',
|
|
148
|
-
hint: '
|
|
148
|
+
hint: 'div'
|
|
149
149
|
},
|
|
150
150
|
root,
|
|
151
151
|
control,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Field/useField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AASA,MAAM,sBAAsB,GAAG;EAC7B,KAAK,eAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,mBAAD,EAAoB,IAApB,CADsB;EAE7B,OAAO,eAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,eAAD,EAAgB,IAAhB,CAFoB;EAG7B,OAAO,eAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,uBAAD,EAAwB,IAAxB;AAHoB,CAA/B;AAMA;;AAEG;;AACI,MAAM,wBAAwB,GAA8C,KAA3C,IAA2D;EACjG,MAAM;IACJ,SADI;IAEJ,OAFI;IAGJ,IAHI;IAIJ,KAJI;IAKJ,WALI;IAMJ,IANI;IAOJ,KAPI;IAQJ,iBARI;IASJ,qBATI;IAUJ,eAVI;IAWJ,GAAG;EAXC,IAYF,KAZJ;EAcA,MAAM,UAAU,GAAG;IACjB,SADiB;IAEjB,OAFiB;IAGjB,IAHiB;IAIjB,KAJiB;IAKjB,WALiB;IAMjB,IANiB;IAOjB,KAPiB;IAQjB,iBARiB;IASjB,qBATiB;IAUjB;EAViB,CAAnB;EAaA,OAAO,CAAC,UAAD,EAAa,WAAb,CAAP;AACD,CA7BM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB;AA+Bb;;;;;;;;;AASG;;AACI,MAAM,iBAAiB,GAAG,CAC/B,KAD+B,EAE/B,GAF+B,EAG/B,MAH+B,KAId;;;EACjB,MAAM,CAAC,UAAD,EAAa,YAAb,IAA6B,OAAA,CAAA,wBAAA,CAAyB,KAAzB,CAAnC;EACA,MAAM;IAAE,WAAW,GAAG,UAAhB;IAA4B;EAA5B,IAAgD,UAAtD;EACA,MAAM;IAAE,eAAe,GAAG;EAApB,IAAkC,MAAxC;EAEA,MAAM,MAAM,GAAG,iBAAA,CAAA,KAAA,CAAM,QAAN,CAAf;EAEA,MAAM,IAAI,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAU,CAAC,IAA5B,EAAkC;IAC7C,QAAQ,EAAE,IADmC;IAE7C,YAAY,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,UAA7B;EAF+B,CAAlC,CAAb;EAKA,MAAM,OAAO,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAU,CAAC,OAA5B,EAAqC;IACnD,QAAQ,EAAE,IADyC;IAEnD,YAAY,EAAE;MACZ,GADY;MAEZ,EAAE,EAAE,MAAM,GAAG,WAFD;MAGZ,GAAG;IAHS;EAFqC,CAArC,CAAhB;EASA,MAAM,KAAK,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAU,CAAC,KAA5B,EAAmC;IAC/C,YAAY,EAAE;MACZ,EAAE,EAAE,MAAM,GAAG,SADD;MAEZ,QAAQ,EAAE,YAAY,CAAC,QAFX;MAGZ,IAAI,EAAE,OAAO,YAAY,CAAC,IAApB,KAA6B,QAA7B,GAAwC,YAAY,CAAC,IAArD,GAA4D,SAHtD;MAIZ,OAAO,EAAE,eAAe,KAAK,SAApB,GAAgC,OAAO,CAAC,EAAxC,GAA6C;IAJ1C;EADiC,CAAnC,CAAd;EASA,MAAM,iBAAiB,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAU,CAAC,iBAA5B,EAA+C;IACvE,YAAY,EAAE;MACZ,EAAE,EAAE,MAAM,GAAG;IADD;EADyD,CAA/C,CAA1B;EAMA,MAAM,IAAI,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAU,CAAC,IAA5B,EAAkC;IAC7C,YAAY,EAAE;MACZ,EAAE,EAAE,MAAM,GAAG;IADD;EAD+B,CAAlC,CAAb;EAMA,MAAM,qBAAqB,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAU,CAAC,qBAA5B,EAAmD;IAC/E,QAAQ,EAAE,CAAC,CAAC,eADmE;IAE/E,YAAY,EAAE;MACZ,QAAQ,EAAE,eAAe,GAAG,sBAAsB,CAAC,eAAD,CAAzB,GAA6C;IAD1D;EAFiE,CAAnD,CAA9B,CA1CiB,CAiDjB;;EACA,IAAI,KAAK,IAAI,eAAe,KAAK,iBAAjC,EAAoD;IAClD,CAAA,EAAA,GAAA,OAAO,CAAC,iBAAD,CAAP,MAAyB,IAAzB,IAAyB,EAAA,KAAA,KAAA,CAAzB,GAAyB,EAAzB,GAAA,OAAO,CAAC,iBAAD,CAAP,GAA+B,KAAK,CAAC,EAArC;EACD;;EAED,IAAI,eAAe,KAAK,OAAxB,EAAiC;IAC/B,CAAA,EAAA,GAAA,OAAO,CAAC,cAAD,CAAP,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,EAAtB,GAAA,OAAO,CAAC,cAAD,CAAP,GAA4B,IAA5B;;IACA,IAAI,iBAAJ,EAAuB;MACrB,CAAA,EAAA,GAAA,OAAO,CAAC,mBAAD,CAAP,MAA2B,IAA3B,IAA2B,EAAA,KAAA,KAAA,CAA3B,GAA2B,EAA3B,GAAA,OAAO,CAAC,mBAAD,CAAP,GAAiC,iBAAiB,CAAC,EAAnD;IACD;;IACD,IAAI,IAAJ,EAAU;MACR,CAAA,EAAA,GAAA,OAAO,CAAC,kBAAD,CAAP,MAA0B,IAA1B,IAA0B,EAAA,KAAA,KAAA,CAA1B,GAA0B,EAA1B,GAAA,OAAO,CAAC,kBAAD,CAAP,GAAgC,IAAI,CAAC,EAArC;IACD;EACF,CARD,MAQO;IACL;IACA,MAAM,WAAW,GAAG,iBAAiB,IAAI,IAAzC;;IACA,IAAI,WAAJ,EAAiB;MACf,CAAA,EAAA,GAAA,OAAO,CAAC,kBAAD,CAAP,MAA0B,IAA1B,IAA0B,EAAA,KAAA,KAAA,CAA1B,GAA0B,EAA1B,GAAA,OAAO,CAAC,kBAAD,CAAP,GAAgC,iBAAiB,IAAI,IAArB,GAA4B,GAAG,iBAAiB,CAAC,EAAE,IAAI,IAAI,CAAC,EAAE,EAA9D,GAAmE,WAAW,CAAC,EAA/G;IACD;EACF;;EAED,MAAM,KAAK,GAA+B;IACxC,WADwC;IAExC,eAFwC;IAGxC,UAAU,EAAE,MAAM,CAAC,UAHqB;IAIxC,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,OAAO,EAAE,MAAM,CAAC,SAFN;MAGV,KAAK,EAAE,aAAA,CAAA,KAHG;MAIV,iBAAiB,EAAE,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Field/useField.tsx"],"names":[],"mappings":"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","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 {\n FieldComponent,\n FieldConfig,\n FieldProps,\n FieldPropsWithOptionalComponentProps,\n FieldState,\n} 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 extends FieldProps<FieldComponent>>(props: Props) => {\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 FieldComponent>(\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' } = 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 control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\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: labelConnection === 'htmlFor' ? control.id : undefined,\n },\n });\n\n const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\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 control['aria-labelledby'] ??= label.id;\n }\n\n if (validationState === 'error') {\n control['aria-invalid'] ??= true;\n if (validationMessage) {\n control['aria-errormessage'] ??= validationMessage.id;\n }\n if (hint) {\n control['aria-describedby'] ??= hint.id;\n }\n } else {\n // If the state is not an error, then the control is described by the validation message, or hint, or both\n const describedby = validationMessage || hint;\n if (describedby) {\n control['aria-describedby'] ??= validationMessage && hint ? `${validationMessage.id} ${hint.id}` : describedby.id;\n }\n }\n\n const state: FieldState<FieldComponent> = {\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"],"sourceRoot":""}
|
|
@@ -25,7 +25,7 @@ exports.getFieldClassNames = getFieldClassNames;
|
|
|
25
25
|
|
|
26
26
|
const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
27
27
|
"base": {
|
|
28
|
-
"mc9l5x": "
|
|
28
|
+
"mc9l5x": "f13qh94s",
|
|
29
29
|
"Bxotwcr": "f14np9u9",
|
|
30
30
|
"B7hvi0a": "f1m2n5bn"
|
|
31
31
|
},
|
|
@@ -37,7 +37,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
37
37
|
"Br312pm": "fd46tj4"
|
|
38
38
|
}
|
|
39
39
|
}, {
|
|
40
|
-
"d": [".
|
|
40
|
+
"d": [".f13qh94s{display:grid;}", ".f14np9u9{grid-auto-flow:row;}", ".f1m2n5bn{justify-items:start;}", ".fai812u{grid-template-rows:auto auto auto auto;}", ".fckz59x{grid-template-columns:1fr 2fr;}", ".fd46tj4{grid-column-start:2;}"]
|
|
41
41
|
});
|
|
42
42
|
|
|
43
43
|
const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Field/useFieldStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldComponent, FieldProps, FieldSlots, FieldState } from './Field.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldComponent>> => ({\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/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: '
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Field/useFieldStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldComponent, FieldProps, FieldSlots, FieldState } from './Field.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldComponent>> => ({\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/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'grid',\n gridAutoFlow: 'row',\n justifyItems: 'start',\n },\n\n horizontal: {\n gridTemplateRows: 'auto auto auto auto',\n gridTemplateColumns: '1fr 2fr',\n },\n\n secondColumn: {\n gridColumnStart: '2',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n horizontal: {\n gridRowStart: '1',\n gridRowEnd: '-1',\n marginRight: tokens.spacingHorizontalM,\n alignSelf: 'start',\n justifySelf: 'stretch',\n },\n});\n\nconst useSecondaryTextStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1,\n },\n\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n base: {\n fontSize: '12px',\n lineHeight: '12px',\n verticalAlign: 'middle',\n marginRight: tokens.spacingHorizontalXS,\n },\n\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 FieldComponent>(state: FieldState<T>) => {\n const classNames = state.classNames;\n const validationState: FieldProps<FieldComponent>['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 state.root.className,\n );\n\n if (state.control) {\n state.control.className = mergeClasses(\n classNames.control,\n horizontal && rootStyles.secondColumn,\n state.control.className,\n );\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 state.label.className,\n );\n }\n\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n classNames.validationMessageIcon,\n validationMessageIconStyles.base,\n !!validationState && validationMessageIconStyles[validationState],\n state.validationMessageIcon.className,\n );\n }\n\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(\n classNames.validationMessage,\n secondaryTextStyles.base,\n horizontal && rootStyles.secondColumn,\n validationState === 'error' && secondaryTextStyles.error,\n state.validationMessage.className,\n );\n }\n\n if (state.hint) {\n state.hint.className = mergeClasses(\n classNames.hint,\n secondaryTextStyles.base,\n horizontal && rootStyles.secondColumn,\n state.hint.className,\n );\n }\n};\n"],"sourceRoot":""}
|
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-20221012-0423.1",
|
|
4
4
|
"description": "Fluent UI Field components",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,26 +27,26 @@
|
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
29
|
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
30
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20221012-0423.1",
|
|
31
31
|
"@fluentui/scripts": "^1.0.0"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@fluentui/react-checkbox": "0.0.0-nightly-
|
|
35
|
-
"@fluentui/react-combobox": "0.0.0-nightly-
|
|
36
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
|
34
|
+
"@fluentui/react-checkbox": "0.0.0-nightly-20221012-0423.1",
|
|
35
|
+
"@fluentui/react-combobox": "0.0.0-nightly-20221012-0423.1",
|
|
36
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20221012-0423.1",
|
|
37
37
|
"@fluentui/react-icons": "^2.0.175",
|
|
38
|
-
"@fluentui/react-input": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
|
40
|
-
"@fluentui/react-progress": "0.0.0-nightly-
|
|
41
|
-
"@fluentui/react-radio": "0.0.0-nightly-
|
|
42
|
-
"@fluentui/react-select": "0.0.0-nightly-
|
|
43
|
-
"@fluentui/react-slider": "0.0.0-nightly-
|
|
44
|
-
"@fluentui/react-spinbutton": "0.0.0-nightly-
|
|
45
|
-
"@fluentui/react-switch": "0.0.0-nightly-
|
|
46
|
-
"@fluentui/react-textarea": "0.0.0-nightly-
|
|
47
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
48
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
49
|
-
"@griffel/react": "^1.
|
|
38
|
+
"@fluentui/react-input": "0.0.0-nightly-20221012-0423.1",
|
|
39
|
+
"@fluentui/react-label": "0.0.0-nightly-20221012-0423.1",
|
|
40
|
+
"@fluentui/react-progress": "0.0.0-nightly-20221012-0423.1",
|
|
41
|
+
"@fluentui/react-radio": "0.0.0-nightly-20221012-0423.1",
|
|
42
|
+
"@fluentui/react-select": "0.0.0-nightly-20221012-0423.1",
|
|
43
|
+
"@fluentui/react-slider": "0.0.0-nightly-20221012-0423.1",
|
|
44
|
+
"@fluentui/react-spinbutton": "0.0.0-nightly-20221012-0423.1",
|
|
45
|
+
"@fluentui/react-switch": "0.0.0-nightly-20221012-0423.1",
|
|
46
|
+
"@fluentui/react-textarea": "0.0.0-nightly-20221012-0423.1",
|
|
47
|
+
"@fluentui/react-theme": "0.0.0-nightly-20221012-0423.1",
|
|
48
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20221012-0423.1",
|
|
49
|
+
"@griffel/react": "^1.4.0",
|
|
50
50
|
"tslib": "^2.1.0"
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|