@fluentui/react-field 0.0.0-nightly-20230807-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 +17 -17
- package/CHANGELOG.md +11 -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,44 @@
|
|
|
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
57
|
}
|
|
58
58
|
]
|
|
59
59
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
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.15..@fluentui/react-field_v0.0.0-nightly-
|
|
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
22
|
|
|
23
23
|
## [9.1.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.1.15)
|
|
24
24
|
|
|
@@ -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
|
},
|