@fluentui/react-field 0.0.0-nightly-20230804-0415.1 → 0.0.0-nightly-20230808-0415.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +56 -17
- package/CHANGELOG.md +24 -11
- package/lib/components/Field/renderField.js +3 -3
- package/lib/components/Field/renderField.js.map +1 -1
- package/lib/components/Field/useField.js +18 -12
- package/lib/components/Field/useField.js.map +1 -1
- package/lib-commonjs/components/Field/renderField.js +2 -2
- package/lib-commonjs/components/Field/renderField.js.map +1 -1
- package/lib-commonjs/components/Field/useField.js +17 -11
- package/lib-commonjs/components/Field/useField.js.map +1 -1
- package/package.json +8 -8
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": "Tue, 08 Aug 2023 04:22:20 GMT",
|
|
6
|
+
"tag": "@fluentui/react-field_v0.0.0-nightly-20230808-0415.1",
|
|
7
|
+
"version": "0.0.0-nightly-20230808-0415.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,44 +16,83 @@
|
|
|
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-20230808-0415.1",
|
|
20
|
+
"commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-field",
|
|
25
|
-
"comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230808-0415.1",
|
|
26
|
+
"commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-field",
|
|
31
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230808-0415.1",
|
|
32
|
+
"commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-field",
|
|
37
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230808-0415.1",
|
|
38
|
+
"commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-field",
|
|
43
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230808-0415.1",
|
|
44
|
+
"commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
"author": "beachball",
|
|
48
48
|
"package": "@fluentui/react-field",
|
|
49
|
-
"comment": "Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
50
|
-
"commit": "
|
|
49
|
+
"comment": "Bump @fluentui/react-conformance to v0.0.0-nightly-20230808-0415.1",
|
|
50
|
+
"commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
"author": "beachball",
|
|
54
54
|
"package": "@fluentui/react-field",
|
|
55
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
56
|
-
"commit": "
|
|
55
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230808-0415.1",
|
|
56
|
+
"commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
|
|
57
|
+
}
|
|
58
|
+
]
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"date": "Fri, 04 Aug 2023 08:52:58 GMT",
|
|
63
|
+
"tag": "@fluentui/react-field_v9.1.15",
|
|
64
|
+
"version": "9.1.15",
|
|
65
|
+
"comments": {
|
|
66
|
+
"patch": [
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-field",
|
|
70
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.27",
|
|
71
|
+
"commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-field",
|
|
76
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13",
|
|
77
|
+
"commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "beachball",
|
|
81
|
+
"package": "@fluentui/react-field",
|
|
82
|
+
"comment": "Bump @fluentui/react-label to v9.1.23",
|
|
83
|
+
"commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"author": "beachball",
|
|
87
|
+
"package": "@fluentui/react-field",
|
|
88
|
+
"comment": "Bump @fluentui/react-theme to v9.1.10",
|
|
89
|
+
"commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"author": "beachball",
|
|
93
|
+
"package": "@fluentui/react-field",
|
|
94
|
+
"comment": "Bump @fluentui/react-utilities to v9.11.0",
|
|
95
|
+
"commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
|
|
57
96
|
}
|
|
58
97
|
]
|
|
59
98
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,24 +1,37 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-field
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 08 Aug 2023 04:22:20 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-20230808-0415.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20230808-0415.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.1.
|
|
9
|
+
Tue, 08 Aug 2023 04:22:20 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.1.15..@fluentui/react-field_v0.0.0-nightly-20230808-0415.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-jsx-runtime to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
|
|
17
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
|
|
18
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
|
|
20
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
|
|
21
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
|
|
22
|
+
|
|
23
|
+
## [9.1.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.1.15)
|
|
24
|
+
|
|
25
|
+
Fri, 04 Aug 2023 08:52:58 GMT
|
|
26
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.1.14..@fluentui/react-field_v9.1.15)
|
|
27
|
+
|
|
28
|
+
### Patches
|
|
29
|
+
|
|
30
|
+
- Bump @fluentui/react-context-selector to v9.1.27 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
|
|
31
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
|
|
32
|
+
- Bump @fluentui/react-label to v9.1.23 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
|
|
33
|
+
- Bump @fluentui/react-theme to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
|
|
34
|
+
- Bump @fluentui/react-utilities to v9.11.0 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
|
|
22
35
|
|
|
23
36
|
## [9.1.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.1.14)
|
|
24
37
|
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
|
|
2
|
-
import {
|
|
2
|
+
import { assertSlots } from '@fluentui/react-utilities';
|
|
3
3
|
import { FieldContextProvider, getFieldControlProps } from '../../contexts/index';
|
|
4
4
|
/**
|
|
5
5
|
* Render the final JSX of Field
|
|
6
6
|
*/ export const renderField_unstable = (state, contextValues)=>{
|
|
7
|
-
|
|
7
|
+
assertSlots(state);
|
|
8
8
|
let { children } = state;
|
|
9
9
|
if (typeof children === 'function') {
|
|
10
10
|
children = children(getFieldControlProps(contextValues.field) || {});
|
|
11
11
|
}
|
|
12
12
|
return /*#__PURE__*/ createElement(FieldContextProvider, {
|
|
13
13
|
value: contextValues === null || contextValues === void 0 ? void 0 : contextValues.field
|
|
14
|
-
}, /*#__PURE__*/ createElement(
|
|
14
|
+
}, /*#__PURE__*/ createElement(state.root, null, state.label && /*#__PURE__*/ createElement(state.label, null), children, state.validationMessage && /*#__PURE__*/ createElement(state.validationMessage, null, state.validationMessageIcon && /*#__PURE__*/ createElement(state.validationMessageIcon, null), state.validationMessage.children), state.hint && /*#__PURE__*/ createElement(state.hint, null)));
|
|
15
15
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderField.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport {
|
|
1
|
+
{"version":3,"sources":["renderField.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { FieldContextProvider, getFieldControlProps } from '../../contexts/index';\nimport type { FieldContextValues, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = (state: FieldState, contextValues: FieldContextValues) => {\n assertSlots<FieldSlots>(state);\n\n let { children } = state;\n if (typeof children === 'function') {\n children = children(getFieldControlProps(contextValues.field) || {});\n }\n\n return (\n <FieldContextProvider value={contextValues?.field}>\n <state.root>\n {state.label && <state.label />}\n {children}\n {state.validationMessage && (\n <state.validationMessage>\n {state.validationMessageIcon && <state.validationMessageIcon />}\n {state.validationMessage.children}\n </state.validationMessage>\n )}\n\n {state.hint && <state.hint />}\n </state.root>\n </FieldContextProvider>\n );\n};\n"],"names":["createElement","assertSlots","FieldContextProvider","getFieldControlProps","renderField_unstable","state","contextValues","children","field","value","root","label","validationMessage","validationMessageIcon","hint"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,oBAAoB,EAAEC,oBAAoB,QAAQ,uBAAuB;AAGlF;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAmBC,gBAAsC;IAC5FL,YAAwBI;IAExB,IAAI,EAAEE,SAAQ,EAAE,GAAGF;IACnB,IAAI,OAAOE,aAAa,YAAY;QAClCA,WAAWA,SAASJ,qBAAqBG,cAAcE,KAAK,KAAK,CAAC;IACpE,CAAC;IAED,qBACE,AApBJ,cAoBKN;QAAqBO,OAAOH,0BAAAA,2BAAAA,KAAAA,IAAAA,cAAeE,KAAK;qBAC/C,AArBN,cAqBOH,MAAMK,IAAI,QACRL,MAAMM,KAAK,kBAAI,AAtBxB,cAsByBN,MAAMM,KAAK,SAC3BJ,UACAF,MAAMO,iBAAiB,kBACtB,AAzBV,cAyBWP,MAAMO,iBAAiB,QACrBP,MAAMQ,qBAAqB,kBAAI,AA1B5C,cA0B6CR,MAAMQ,qBAAqB,SAC3DR,MAAMO,iBAAiB,CAACL,QAAQ,GAIpCF,MAAMS,IAAI,kBAAI,AA/BvB,cA+BwBT,MAAMS,IAAI;AAIlC,EAAE"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';
|
|
3
3
|
import { Label } from '@fluentui/react-label';
|
|
4
|
-
import { getNativeElementProps,
|
|
4
|
+
import { getNativeElementProps, useId, slot } from '@fluentui/react-utilities';
|
|
5
5
|
const validationMessageIcons = {
|
|
6
6
|
error: /*#__PURE__*/ React.createElement(ErrorCircle12Filled, null),
|
|
7
7
|
warning: /*#__PURE__*/ React.createElement(Warning12Filled, null),
|
|
@@ -20,37 +20,43 @@ const validationMessageIcons = {
|
|
|
20
20
|
const { children , orientation ='vertical' , required =false , validationState =props.validationMessage ? 'error' : 'none' , size ='medium' } = props;
|
|
21
21
|
const baseId = useId('field-');
|
|
22
22
|
const generatedControlId = baseId + '__control';
|
|
23
|
-
const root = getNativeElementProps('div', {
|
|
23
|
+
const root = slot.always(getNativeElementProps('div', {
|
|
24
24
|
...props,
|
|
25
25
|
ref
|
|
26
26
|
}, /*excludedPropNames:*/ [
|
|
27
27
|
'children'
|
|
28
|
-
])
|
|
29
|
-
|
|
28
|
+
]), {
|
|
29
|
+
elementType: 'div'
|
|
30
|
+
});
|
|
31
|
+
const label = slot.optional(props.label, {
|
|
30
32
|
defaultProps: {
|
|
31
33
|
htmlFor: generatedControlId,
|
|
32
34
|
id: baseId + '__label',
|
|
33
35
|
required,
|
|
34
36
|
size
|
|
35
|
-
}
|
|
37
|
+
},
|
|
38
|
+
elementType: Label
|
|
36
39
|
});
|
|
37
|
-
const validationMessage =
|
|
40
|
+
const validationMessage = slot.optional(props.validationMessage, {
|
|
38
41
|
defaultProps: {
|
|
39
42
|
id: baseId + '__validationMessage',
|
|
40
43
|
role: validationState === 'error' ? 'alert' : undefined
|
|
41
|
-
}
|
|
44
|
+
},
|
|
45
|
+
elementType: 'div'
|
|
42
46
|
});
|
|
43
|
-
const hint =
|
|
47
|
+
const hint = slot.optional(props.hint, {
|
|
44
48
|
defaultProps: {
|
|
45
49
|
id: baseId + '__hint'
|
|
46
|
-
}
|
|
50
|
+
},
|
|
51
|
+
elementType: 'div'
|
|
47
52
|
});
|
|
48
53
|
const defaultIcon = validationMessageIcons[validationState];
|
|
49
|
-
const validationMessageIcon =
|
|
50
|
-
|
|
54
|
+
const validationMessageIcon = slot.optional(props.validationMessageIcon, {
|
|
55
|
+
renderByDefault: !!defaultIcon,
|
|
51
56
|
defaultProps: {
|
|
52
57
|
children: defaultIcon
|
|
53
|
-
}
|
|
58
|
+
},
|
|
59
|
+
elementType: 'span'
|
|
54
60
|
});
|
|
55
61
|
return {
|
|
56
62
|
children,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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,
|
|
1
|
+
{"version":3,"sources":["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, useId, slot } from '@fluentui/react-utilities';\nimport type { 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 = false,\n validationState = props.validationMessage ? 'error' : 'none',\n size = 'medium',\n } = props;\n\n const baseId = useId('field-');\n const generatedControlId = baseId + '__control';\n\n const root = slot.always(getNativeElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']), {\n elementType: 'div',\n });\n const label = slot.optional(props.label, {\n defaultProps: { htmlFor: generatedControlId, id: baseId + '__label', required, size },\n elementType: Label,\n });\n const validationMessage = slot.optional(props.validationMessage, {\n defaultProps: { id: baseId + '__validationMessage', role: validationState === 'error' ? 'alert' : undefined },\n elementType: 'div',\n });\n const hint = slot.optional(props.hint, { defaultProps: { id: baseId + '__hint' }, elementType: 'div' });\n const defaultIcon = validationMessageIcons[validationState];\n const validationMessageIcon = slot.optional(props.validationMessageIcon, {\n renderByDefault: !!defaultIcon,\n defaultProps: { children: defaultIcon },\n elementType: 'span',\n });\n return {\n children,\n generatedControlId,\n orientation,\n required,\n size,\n validationState,\n components: { root: 'div', label: Label, validationMessage: 'div', validationMessageIcon: 'span', hint: 'div' },\n root,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n};\n"],"names":["React","CheckmarkCircle12Filled","ErrorCircle12Filled","Warning12Filled","Label","getNativeElementProps","useId","slot","validationMessageIcons","error","warning","success","none","undefined","useField_unstable","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","generatedControlId","root","always","elementType","label","optional","defaultProps","htmlFor","id","role","hint","defaultIcon","validationMessageIcon","renderByDefault","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,EAAEC,mBAAmB,EAAEC,eAAe,QAAQ,wBAAwB;AACtG,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,qBAAqB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAG/E,MAAMC,yBAAyB;IAC7BC,qBAAO,oBAACP;IACRQ,uBAAS,oBAACP;IACVQ,uBAAS,oBAACV;IACVW,MAAMC;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC,MAA+C;IAClG,MAAM,EACJC,SAAQ,EACRC,aAAc,WAAU,EACxBC,UAAW,KAAK,CAAA,EAChBC,iBAAkBL,MAAMM,iBAAiB,GAAG,UAAU,MAAM,CAAA,EAC5DC,MAAO,SAAQ,EAChB,GAAGP;IAEJ,MAAMQ,SAASjB,MAAM;IACrB,MAAMkB,qBAAqBD,SAAS;IAEpC,MAAME,OAAOlB,KAAKmB,MAAM,CAACrB,sBAAsB,OAAO;QAAE,GAAGU,KAAK;QAAEC;IAAI,GAAG,oBAAoB,GAAG;QAAC;KAAW,GAAG;QAC7GW,aAAa;IACf;IACA,MAAMC,QAAQrB,KAAKsB,QAAQ,CAACd,MAAMa,KAAK,EAAE;QACvCE,cAAc;YAAEC,SAASP;YAAoBQ,IAAIT,SAAS;YAAWJ;YAAUG;QAAK;QACpFK,aAAavB;IACf;IACA,MAAMiB,oBAAoBd,KAAKsB,QAAQ,CAACd,MAAMM,iBAAiB,EAAE;QAC/DS,cAAc;YAAEE,IAAIT,SAAS;YAAuBU,MAAMb,oBAAoB,UAAU,UAAUP,SAAS;QAAC;QAC5Gc,aAAa;IACf;IACA,MAAMO,OAAO3B,KAAKsB,QAAQ,CAACd,MAAMmB,IAAI,EAAE;QAAEJ,cAAc;YAAEE,IAAIT,SAAS;QAAS;QAAGI,aAAa;IAAM;IACrG,MAAMQ,cAAc3B,sBAAsB,CAACY,gBAAgB;IAC3D,MAAMgB,wBAAwB7B,KAAKsB,QAAQ,CAACd,MAAMqB,qBAAqB,EAAE;QACvEC,iBAAiB,CAAC,CAACF;QACnBL,cAAc;YAAEb,UAAUkB;QAAY;QACtCR,aAAa;IACf;IACA,OAAO;QACLV;QACAO;QACAN;QACAC;QACAG;QACAF;QACAkB,YAAY;YAAEb,MAAM;YAAOG,OAAOxB;YAAOiB,mBAAmB;YAAOe,uBAAuB;YAAQF,MAAM;QAAM;QAC9GT;QACAG;QACAQ;QACAf;QACAa;IACF;AACF,EAAE"}
|
|
@@ -10,12 +10,12 @@ const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
|
|
|
10
10
|
const _reactUtilities = require("@fluentui/react-utilities");
|
|
11
11
|
const _index = require("../../contexts/index");
|
|
12
12
|
const renderField_unstable = (state, contextValues)=>{
|
|
13
|
-
|
|
13
|
+
(0, _reactUtilities.assertSlots)(state);
|
|
14
14
|
let { children } = state;
|
|
15
15
|
if (typeof children === 'function') {
|
|
16
16
|
children = children((0, _index.getFieldControlProps)(contextValues.field) || {});
|
|
17
17
|
}
|
|
18
18
|
return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_index.FieldContextProvider, {
|
|
19
19
|
value: contextValues === null || contextValues === void 0 ? void 0 : contextValues.field
|
|
20
|
-
}, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(
|
|
20
|
+
}, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null, state.label && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.label, null), children, state.validationMessage && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.validationMessage, null, state.validationMessageIcon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.validationMessageIcon, null), state.validationMessage.children), state.hint && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.hint, null)));
|
|
21
21
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderField.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport {
|
|
1
|
+
{"version":3,"sources":["renderField.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { FieldContextProvider, getFieldControlProps } from '../../contexts/index';\n/**\n * Render the final JSX of Field\n */ export const renderField_unstable = (state, contextValues)=>{\n assertSlots(state);\n let { children } = state;\n if (typeof children === 'function') {\n children = children(getFieldControlProps(contextValues.field) || {});\n }\n return /*#__PURE__*/ createElement(FieldContextProvider, {\n value: contextValues === null || contextValues === void 0 ? void 0 : contextValues.field\n }, /*#__PURE__*/ createElement(state.root, null, state.label && /*#__PURE__*/ createElement(state.label, null), children, state.validationMessage && /*#__PURE__*/ createElement(state.validationMessage, null, state.validationMessageIcon && /*#__PURE__*/ createElement(state.validationMessageIcon, null), state.validationMessage.children), state.hint && /*#__PURE__*/ createElement(state.hint, null)));\n};\n"],"names":["renderField_unstable","state","contextValues","assertSlots","children","getFieldControlProps","field","createElement","FieldContextProvider","value","root","label","validationMessage","validationMessageIcon","hint"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACvD;uBAC+B;AAGhD,MAAMA,uBAAuB,CAACC,OAAOC,gBAAgB;IAC5DC,IAAAA,2BAAW,EAACF;IACZ,IAAI,EAAEG,SAAQ,EAAG,GAAGH;IACpB,IAAI,OAAOG,aAAa,YAAY;QAChCA,WAAWA,SAASC,IAAAA,2BAAoB,EAACH,cAAcI,KAAK,KAAK,CAAC;IACtE,CAAC;IACD,OAAO,WAAW,GAAGC,IAAAA,8BAAa,EAACC,2BAAoB,EAAE;QACrDC,OAAOP,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcI,KAAK;IAC5F,GAAG,WAAW,GAAGC,IAAAA,8BAAa,EAACN,MAAMS,IAAI,EAAE,IAAI,EAAET,MAAMU,KAAK,IAAI,WAAW,GAAGJ,IAAAA,8BAAa,EAACN,MAAMU,KAAK,EAAE,IAAI,GAAGP,UAAUH,MAAMW,iBAAiB,IAAI,WAAW,GAAGL,IAAAA,8BAAa,EAACN,MAAMW,iBAAiB,EAAE,IAAI,EAAEX,MAAMY,qBAAqB,IAAI,WAAW,GAAGN,IAAAA,8BAAa,EAACN,MAAMY,qBAAqB,EAAE,IAAI,GAAGZ,MAAMW,iBAAiB,CAACR,QAAQ,GAAGH,MAAMa,IAAI,IAAI,WAAW,GAAGP,IAAAA,8BAAa,EAACN,MAAMa,IAAI,EAAE,IAAI;AAChZ"}
|
|
@@ -21,37 +21,43 @@ const useField_unstable = (props, ref)=>{
|
|
|
21
21
|
const { children , orientation ='vertical' , required =false , validationState =props.validationMessage ? 'error' : 'none' , size ='medium' } = props;
|
|
22
22
|
const baseId = (0, _reactUtilities.useId)('field-');
|
|
23
23
|
const generatedControlId = baseId + '__control';
|
|
24
|
-
const root = (0, _reactUtilities.getNativeElementProps)('div', {
|
|
24
|
+
const root = _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
|
|
25
25
|
...props,
|
|
26
26
|
ref
|
|
27
27
|
}, /*excludedPropNames:*/ [
|
|
28
28
|
'children'
|
|
29
|
-
])
|
|
30
|
-
|
|
29
|
+
]), {
|
|
30
|
+
elementType: 'div'
|
|
31
|
+
});
|
|
32
|
+
const label = _reactUtilities.slot.optional(props.label, {
|
|
31
33
|
defaultProps: {
|
|
32
34
|
htmlFor: generatedControlId,
|
|
33
35
|
id: baseId + '__label',
|
|
34
36
|
required,
|
|
35
37
|
size
|
|
36
|
-
}
|
|
38
|
+
},
|
|
39
|
+
elementType: _reactLabel.Label
|
|
37
40
|
});
|
|
38
|
-
const validationMessage =
|
|
41
|
+
const validationMessage = _reactUtilities.slot.optional(props.validationMessage, {
|
|
39
42
|
defaultProps: {
|
|
40
43
|
id: baseId + '__validationMessage',
|
|
41
44
|
role: validationState === 'error' ? 'alert' : undefined
|
|
42
|
-
}
|
|
45
|
+
},
|
|
46
|
+
elementType: 'div'
|
|
43
47
|
});
|
|
44
|
-
const hint =
|
|
48
|
+
const hint = _reactUtilities.slot.optional(props.hint, {
|
|
45
49
|
defaultProps: {
|
|
46
50
|
id: baseId + '__hint'
|
|
47
|
-
}
|
|
51
|
+
},
|
|
52
|
+
elementType: 'div'
|
|
48
53
|
});
|
|
49
54
|
const defaultIcon = validationMessageIcons[validationState];
|
|
50
|
-
const validationMessageIcon =
|
|
51
|
-
|
|
55
|
+
const validationMessageIcon = _reactUtilities.slot.optional(props.validationMessageIcon, {
|
|
56
|
+
renderByDefault: !!defaultIcon,
|
|
52
57
|
defaultProps: {
|
|
53
58
|
children: defaultIcon
|
|
54
|
-
}
|
|
59
|
+
},
|
|
60
|
+
elementType: 'span'
|
|
55
61
|
});
|
|
56
62
|
return {
|
|
57
63
|
children,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useField.js"],"sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps,
|
|
1
|
+
{"version":3,"sources":["useField.js"],"sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, useId, slot } from '@fluentui/react-utilities';\nconst validationMessageIcons = {\n error: /*#__PURE__*/ React.createElement(ErrorCircle12Filled, null),\n warning: /*#__PURE__*/ React.createElement(Warning12Filled, null),\n success: /*#__PURE__*/ React.createElement(CheckmarkCircle12Filled, null),\n none: undefined\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 */ export const useField_unstable = (props, ref)=>{\n const { children , orientation ='vertical' , required =false , validationState =props.validationMessage ? 'error' : 'none' , size ='medium' } = props;\n const baseId = useId('field-');\n const generatedControlId = baseId + '__control';\n const root = slot.always(getNativeElementProps('div', {\n ...props,\n ref\n }, /*excludedPropNames:*/ [\n 'children'\n ]), {\n elementType: 'div'\n });\n const label = slot.optional(props.label, {\n defaultProps: {\n htmlFor: generatedControlId,\n id: baseId + '__label',\n required,\n size\n },\n elementType: Label\n });\n const validationMessage = slot.optional(props.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n role: validationState === 'error' ? 'alert' : undefined\n },\n elementType: 'div'\n });\n const hint = slot.optional(props.hint, {\n defaultProps: {\n id: baseId + '__hint'\n },\n elementType: 'div'\n });\n const defaultIcon = validationMessageIcons[validationState];\n const validationMessageIcon = slot.optional(props.validationMessageIcon, {\n renderByDefault: !!defaultIcon,\n defaultProps: {\n children: defaultIcon\n },\n elementType: 'span'\n });\n return {\n children,\n generatedControlId,\n orientation,\n required,\n size,\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"],"names":["useField_unstable","validationMessageIcons","error","React","createElement","ErrorCircle12Filled","warning","Warning12Filled","success","CheckmarkCircle12Filled","none","undefined","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","useId","generatedControlId","root","slot","always","getNativeElementProps","elementType","label","optional","defaultProps","htmlFor","id","Label","role","hint","defaultIcon","validationMessageIcon","renderByDefault","components"],"mappings":";;;;+BAkBiBA;;aAAAA;;;6DAlBM;4BACuD;4BACxD;gCAC6B;AACnD,MAAMC,yBAAyB;IAC3BC,OAAO,WAAW,GAAGC,OAAMC,aAAa,CAACC,+BAAmB,EAAE,IAAI;IAClEC,SAAS,WAAW,GAAGH,OAAMC,aAAa,CAACG,2BAAe,EAAE,IAAI;IAChEC,SAAS,WAAW,GAAGL,OAAMC,aAAa,CAACK,mCAAuB,EAAE,IAAI;IACxEC,MAAMC;AACV;AASW,MAAMX,oBAAoB,CAACY,OAAOC,MAAM;IAC/C,MAAM,EAAEC,SAAQ,EAAGC,aAAa,WAAU,EAAGC,UAAU,KAAK,CAAA,EAAGC,iBAAiBL,MAAMM,iBAAiB,GAAG,UAAU,MAAM,CAAA,EAAGC,MAAM,SAAQ,EAAG,GAAGP;IACjJ,MAAMQ,SAASC,IAAAA,qBAAK,EAAC;IACrB,MAAMC,qBAAqBF,SAAS;IACpC,MAAMG,OAAOC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;QAClD,GAAGd,KAAK;QACRC;IACJ,GAAG,oBAAoB,GAAG;QACtB;KACH,GAAG;QACAc,aAAa;IACjB;IACA,MAAMC,QAAQJ,oBAAI,CAACK,QAAQ,CAACjB,MAAMgB,KAAK,EAAE;QACrCE,cAAc;YACVC,SAAST;YACTU,IAAIZ,SAAS;YACbJ;YACAG;QACJ;QACAQ,aAAaM,iBAAK;IACtB;IACA,MAAMf,oBAAoBM,oBAAI,CAACK,QAAQ,CAACjB,MAAMM,iBAAiB,EAAE;QAC7DY,cAAc;YACVE,IAAIZ,SAAS;YACbc,MAAMjB,oBAAoB,UAAU,UAAUN,SAAS;QAC3D;QACAgB,aAAa;IACjB;IACA,MAAMQ,OAAOX,oBAAI,CAACK,QAAQ,CAACjB,MAAMuB,IAAI,EAAE;QACnCL,cAAc;YACVE,IAAIZ,SAAS;QACjB;QACAO,aAAa;IACjB;IACA,MAAMS,cAAcnC,sBAAsB,CAACgB,gBAAgB;IAC3D,MAAMoB,wBAAwBb,oBAAI,CAACK,QAAQ,CAACjB,MAAMyB,qBAAqB,EAAE;QACrEC,iBAAiB,CAAC,CAACF;QACnBN,cAAc;YACVhB,UAAUsB;QACd;QACAT,aAAa;IACjB;IACA,OAAO;QACHb;QACAQ;QACAP;QACAC;QACAG;QACAF;QACAsB,YAAY;YACRhB,MAAM;YACNK,OAAOK,iBAAK;YACZf,mBAAmB;YACnBmB,uBAAuB;YACvBF,MAAM;QACV;QACAZ;QACAK;QACAS;QACAnB;QACAiB;IACJ;AACJ"}
|
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-20230808-0415.1",
|
|
4
4
|
"description": "Fluent UI Field components",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,18 +27,18 @@
|
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
|
31
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
30
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20230808-0415.1",
|
|
31
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20230808-0415.1",
|
|
32
32
|
"@fluentui/scripts-api-extractor": "*",
|
|
33
33
|
"@fluentui/scripts-tasks": "*"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
|
36
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20230808-0415.1",
|
|
37
37
|
"@fluentui/react-icons": "^2.0.207",
|
|
38
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
|
40
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
41
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
38
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20230808-0415.1",
|
|
39
|
+
"@fluentui/react-label": "0.0.0-nightly-20230808-0415.1",
|
|
40
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230808-0415.1",
|
|
41
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230808-0415.1",
|
|
42
42
|
"@griffel/react": "^1.5.7",
|
|
43
43
|
"@swc/helpers": "^0.4.14"
|
|
44
44
|
},
|