@fluentui/react-field 0.0.0-nightly-20230317-0436.1 → 0.0.0-nightly-20230317-1454.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/.swcrc +39 -0
- package/CHANGELOG.json +13 -13
- package/CHANGELOG.md +9 -9
- package/lib/Field.js +1 -1
- package/lib/Field.js.map +1 -1
- package/lib/components/Field/Field.js +5 -5
- package/lib/components/Field/Field.js.map +1 -1
- package/lib/components/Field/Field.types.js +1 -1
- package/lib/components/Field/Field.types.js.map +1 -1
- package/lib/components/Field/index.js +5 -5
- package/lib/components/Field/index.js.map +1 -1
- package/lib/components/Field/renderField.js +3 -13
- package/lib/components/Field/renderField.js.map +1 -1
- package/lib/components/Field/useField.js +28 -29
- package/lib/components/Field/useField.js.map +1 -1
- package/lib/components/Field/useFieldStyles.js +7 -7
- package/lib/components/Field/useFieldStyles.js.map +1 -1
- package/lib/index.js +2 -2
- package/lib/index.js.map +1 -1
- package/lib/util/makeDeprecatedField.js +4 -7
- package/lib/util/makeDeprecatedField.js.map +1 -1
- package/lib-commonjs/Field.js +5 -4
- package/lib-commonjs/Field.js.map +1 -1
- package/lib-commonjs/components/Field/Field.js +16 -12
- package/lib-commonjs/components/Field/Field.js.map +1 -1
- package/lib-commonjs/components/Field/Field.types.js +5 -2
- package/lib-commonjs/components/Field/Field.types.js.map +1 -1
- package/lib-commonjs/components/Field/index.js +9 -8
- package/lib-commonjs/components/Field/index.js.map +1 -1
- package/lib-commonjs/components/Field/renderField.js +13 -26
- package/lib-commonjs/components/Field/renderField.js.map +1 -1
- package/lib-commonjs/components/Field/useField.js +94 -102
- package/lib-commonjs/components/Field/useField.js.map +1 -1
- package/lib-commonjs/components/Field/useFieldStyles.js +138 -97
- package/lib-commonjs/components/Field/useFieldStyles.js.map +1 -1
- package/lib-commonjs/index.js +21 -49
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/util/makeDeprecatedField.js +53 -71
- package/lib-commonjs/util/makeDeprecatedField.js.map +1 -1
- package/package.json +8 -8
package/.swcrc
ADDED
@@ -0,0 +1,39 @@
|
|
1
|
+
{
|
2
|
+
"$schema": "https://json.schemastore.org/swcrc",
|
3
|
+
"env": {
|
4
|
+
"targets": {
|
5
|
+
"chrome": "84",
|
6
|
+
"edge": "84",
|
7
|
+
"firefox": "75",
|
8
|
+
"opera": "73",
|
9
|
+
"safari": "14.1"
|
10
|
+
},
|
11
|
+
"bugfixes": true
|
12
|
+
},
|
13
|
+
"exclude": [
|
14
|
+
"/testing",
|
15
|
+
"/**/*.cy.ts",
|
16
|
+
"/**/*.cy.tsx",
|
17
|
+
"/**/*.spec.ts",
|
18
|
+
"/**/*.spec.tsx",
|
19
|
+
"/**/*.test.ts",
|
20
|
+
"/**/*.test.tsx"
|
21
|
+
],
|
22
|
+
"jsc": {
|
23
|
+
"parser": {
|
24
|
+
"syntax": "typescript",
|
25
|
+
"tsx": true,
|
26
|
+
"decorators": false,
|
27
|
+
"dynamicImport": false
|
28
|
+
},
|
29
|
+
"externalHelpers": true,
|
30
|
+
"transform": {
|
31
|
+
"react": {
|
32
|
+
"runtime": "classic",
|
33
|
+
"useSpread": true
|
34
|
+
}
|
35
|
+
}
|
36
|
+
},
|
37
|
+
"minify": false,
|
38
|
+
"sourceMaps": true
|
39
|
+
}
|
package/CHANGELOG.json
CHANGED
@@ -2,9 +2,9 @@
|
|
2
2
|
"name": "@fluentui/react-field",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "Fri, 17 Mar 2023
|
6
|
-
"tag": "@fluentui/react-field_v0.0.0-nightly-20230317-
|
7
|
-
"version": "0.0.0-nightly-20230317-
|
5
|
+
"date": "Fri, 17 Mar 2023 15:00:15 GMT",
|
6
|
+
"tag": "@fluentui/react-field_v0.0.0-nightly-20230317-1454.1",
|
7
|
+
"version": "0.0.0-nightly-20230317-1454.1",
|
8
8
|
"comments": {
|
9
9
|
"prerelease": [
|
10
10
|
{
|
@@ -16,32 +16,32 @@
|
|
16
16
|
{
|
17
17
|
"author": "beachball",
|
18
18
|
"package": "@fluentui/react-field",
|
19
|
-
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230317-
|
20
|
-
"commit": "
|
19
|
+
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230317-1454.1",
|
20
|
+
"commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
|
21
21
|
},
|
22
22
|
{
|
23
23
|
"author": "beachball",
|
24
24
|
"package": "@fluentui/react-field",
|
25
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230317-
|
26
|
-
"commit": "
|
25
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230317-1454.1",
|
26
|
+
"commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
|
27
27
|
},
|
28
28
|
{
|
29
29
|
"author": "beachball",
|
30
30
|
"package": "@fluentui/react-field",
|
31
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230317-
|
32
|
-
"commit": "
|
31
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230317-1454.1",
|
32
|
+
"commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
|
33
33
|
},
|
34
34
|
{
|
35
35
|
"author": "beachball",
|
36
36
|
"package": "@fluentui/react-field",
|
37
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230317-
|
38
|
-
"commit": "
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230317-1454.1",
|
38
|
+
"commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
|
39
39
|
},
|
40
40
|
{
|
41
41
|
"author": "beachball",
|
42
42
|
"package": "@fluentui/react-field",
|
43
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230317-
|
44
|
-
"commit": "
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230317-1454.1",
|
44
|
+
"commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
|
45
45
|
}
|
46
46
|
]
|
47
47
|
}
|
package/CHANGELOG.md
CHANGED
@@ -1,22 +1,22 @@
|
|
1
1
|
# Change Log - @fluentui/react-field
|
2
2
|
|
3
|
-
This log was last generated on Fri, 17 Mar 2023
|
3
|
+
This log was last generated on Fri, 17 Mar 2023 15:00:15 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
-
## [0.0.0-nightly-20230317-
|
7
|
+
## [0.0.0-nightly-20230317-1454.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20230317-1454.1)
|
8
8
|
|
9
|
-
Fri, 17 Mar 2023
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.26..@fluentui/react-field_v0.0.0-nightly-20230317-
|
9
|
+
Fri, 17 Mar 2023 15:00:15 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.26..@fluentui/react-field_v0.0.0-nightly-20230317-1454.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-20230317-
|
16
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-20230317-
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-20230317-
|
18
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230317-
|
19
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230317-
|
15
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
|
16
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
|
20
20
|
|
21
21
|
## [9.0.0-alpha.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.26)
|
22
22
|
|
package/lib/Field.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
export * from
|
1
|
+
export * from "./components/Field/index";
|
2
2
|
//# sourceMappingURL=Field.js.map
|
package/lib/Field.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":[],"sources":["../src/Field.ts"],"sourcesContent":["export * from './components/Field/index';\n"],"mappings":"AAAA,cAAc"}
|
@@ -1,11 +1,11 @@
|
|
1
|
-
import * as React from
|
2
|
-
import { renderField_unstable } from
|
3
|
-
import { useField_unstable } from
|
4
|
-
import { useFieldStyles_unstable } from
|
1
|
+
import * as React from "react";
|
2
|
+
import { renderField_unstable } from "./renderField";
|
3
|
+
import { useField_unstable } from "./useField";
|
4
|
+
import { useFieldStyles_unstable } from "./useFieldStyles";
|
5
5
|
export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
|
6
6
|
const state = useField_unstable(props, ref);
|
7
7
|
useFieldStyles_unstable(state);
|
8
8
|
return renderField_unstable(state);
|
9
9
|
});
|
10
|
-
Field.displayName =
|
10
|
+
Field.displayName = "Field";
|
11
11
|
//# sourceMappingURL=Field.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","renderField_unstable","useField_unstable","useFieldStyles_unstable","Field","forwardRef","props","ref","state","displayName"],"sources":["
|
1
|
+
{"version":3,"names":["React","renderField_unstable","useField_unstable","useFieldStyles_unstable","Field","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from './Field.types';\nimport { renderField_unstable } from './renderField';\nimport { useField_unstable } from './useField';\nimport { useFieldStyles_unstable } from './useFieldStyles';\n\nexport const Field: ForwardRefComponent<FieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref);\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nField.displayName = 'Field';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,iBAAiB,QAAQ;AAClC,SAASC,uBAAuB,QAAQ;AAExC,OAAO,MAAMC,KAAA,gBAAyCJ,KAAA,CAAMK,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrF,MAAMC,KAAA,GAAQN,iBAAA,CAAkBI,KAAA,EAAOC,GAAA;EACvCJ,uBAAA,CAAwBK,KAAA;EACxB,OAAOP,oBAAA,CAAqBO,KAAA;AAC9B;AAEAJ,KAAA,CAAMK,WAAW,GAAG"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
|
1
|
+
import * as React from "react";
|
2
2
|
//# sourceMappingURL=Field.types.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["React"],"sources":["../../../src/components/Field/Field.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * The props added to the Field's child element.\n */\nexport type FieldChildProps = Pick<\n React.HTMLAttributes<HTMLElement>,\n 'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'\n>;\n\n/**\n * Slots of the Field component\n */\nexport type FieldSlots = {\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The label associated with the field.\n */\n label?: Slot<typeof Label>;\n\n /**\n * A message about the validation state. By default, this is an error message, but it can be a success, warning,\n * or custom message by setting `validationState`.\n */\n validationMessage?: Slot<'div'>;\n\n /**\n * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.\n *\n * The default depends on `validationState`:\n * * error: `<ErrorCircle12Filled />`\n * * warning: `<Warning12Filled />`\n * * success: `<CheckmarkCircle12Filled />`\n * * none: `null`\n */\n validationMessageIcon?: Slot<'span'>;\n\n /**\n * Additional hint text below the field.\n */\n hint?: Slot<'div'>;\n};\n\n/**\n * Field Props\n */\nexport type FieldProps = Omit<ComponentProps<FieldSlots>, 'children'> & {\n /**\n * The Field's child can be a single form control, or a render function that takes the props that should be spread on\n * a form control.\n *\n * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`), as well\n * as intrinsic form controls like `<input>` or `<textarea>`. Custom controls can also be used as long as they\n * accept FieldChildProps and spread them on the appropriate element.\n *\n * For more complex scenarios, a render function can be used to pass the FieldChildProps to the appropriate control.\n */\n children?: React.ReactElement<FieldChildProps> | null | ((props: FieldChildProps) => React.ReactNode);\n\n /**\n * The orientation of the label relative to the field component.\n * This only affects the label, and not the validationMessage or hint (which always appear below the field component).\n *\n * @default vertical\n */\n orientation?: 'vertical' | 'horizontal';\n\n /**\n * The `validationState` affects the display of the `validationMessage` and `validationMessageIcon`.\n *\n * * error: (default) The validation message has a red error icon and red text, with `role=\"alert\"` so it is\n * announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a\n * red border to some field components (such as `Input`).\n * * success: The validation message has a green checkmark icon and gray text.\n * * warning: The validation message has a yellow exclamation icon and gray text.\n * * none: The validation message has no icon and gray text.\n *\n * @default error when validationMessage is set; none otherwise.\n */\n validationState?: 'error' | 'warning' | 'success' | 'none';\n\n /**\n * Marks the Field as required. If `true`, an asterisk will be appended to the label, and `aria-required` will be set\n * on the Field's child.\n */\n required?: boolean;\n\n /**\n * The size of the Field's label.\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState = ComponentState<Required<FieldSlots>> &\n Required<Pick<FieldProps, 'orientation' | 'validationState'>>;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
|
@@ -1,6 +1,6 @@
|
|
1
|
-
export * from
|
2
|
-
export * from
|
3
|
-
export * from
|
4
|
-
export * from
|
5
|
-
export * from
|
1
|
+
export * from "./Field.types";
|
2
|
+
export * from "./Field";
|
3
|
+
export * from "./renderField";
|
4
|
+
export * from "./useField";
|
5
|
+
export * from "./useFieldStyles";
|
6
6
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":[],"sources":["../../../src/components/Field/index.ts"],"sourcesContent":["export * from './Field.types';\nexport * from './Field';\nexport * from './renderField';\nexport * from './useField';\nexport * from './useFieldStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import * as React from
|
2
|
-
import { getSlots } from
|
1
|
+
import * as React from "react";
|
2
|
+
import { getSlots } from "@fluentui/react-utilities";
|
3
3
|
/**
|
4
4
|
* Render the final JSX of Field
|
5
5
|
*/
|
@@ -8,16 +8,6 @@ export const renderField_unstable = state => {
|
|
8
8
|
slots,
|
9
9
|
slotProps
|
10
10
|
} = getSlots(state);
|
11
|
-
return /*#__PURE__*/React.createElement(slots.root,
|
12
|
-
...slotProps.root
|
13
|
-
}, slots.label && /*#__PURE__*/React.createElement(slots.label, {
|
14
|
-
...slotProps.label
|
15
|
-
}), slotProps.root.children, slots.validationMessage && /*#__PURE__*/React.createElement(slots.validationMessage, {
|
16
|
-
...slotProps.validationMessage
|
17
|
-
}, slots.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, {
|
18
|
-
...slotProps.validationMessageIcon
|
19
|
-
}), slotProps.validationMessage.children), slots.hint && /*#__PURE__*/React.createElement(slots.hint, {
|
20
|
-
...slotProps.hint
|
21
|
-
}));
|
11
|
+
return /*#__PURE__*/React.createElement(slots.root, slotProps.root, slots.label && /*#__PURE__*/React.createElement(slots.label, slotProps.label), slotProps.root.children, slots.validationMessage && /*#__PURE__*/React.createElement(slots.validationMessage, slotProps.validationMessage, slots.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, slotProps.validationMessageIcon), slotProps.validationMessage.children), slots.hint && /*#__PURE__*/React.createElement(slots.hint, slotProps.hint));
|
22
12
|
};
|
23
13
|
//# sourceMappingURL=renderField.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","getSlots","renderField_unstable","state","slots","slotProps","createElement","root","label","children","validationMessage","validationMessageIcon","hint"],"sources":["
|
1
|
+
{"version":3,"names":["React","getSlots","renderField_unstable","state","slots","slotProps","createElement","root","label","children","validationMessage","validationMessageIcon","hint"],"sources":["../../../src/components/Field/renderField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = (state: FieldState) => {\n const { slots, slotProps } = getSlots<FieldSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label} />}\n {slotProps.root.children}\n {slots.validationMessage && (\n <slots.validationMessage {...slotProps.validationMessage}>\n {slots.validationMessageIcon && <slots.validationMessageIcon {...slotProps.validationMessageIcon} />}\n {slotProps.validationMessage.children}\n </slots.validationMessage>\n )}\n {slots.hint && <slots.hint {...slotProps.hint} />}\n </slots.root>\n );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,oBAAA,GAAwBC,KAAA,IAAsB;EACzD,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAAqBE,KAAA;EAElD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,EAC3BH,KAAA,CAAMI,KAAK,iBAAIR,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMI,KAAK,EAAKH,SAAA,CAAUG,KAAK,GAC/CH,SAAA,CAAUE,IAAI,CAACE,QAAQ,EACvBL,KAAA,CAAMM,iBAAiB,iBACtBV,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMM,iBAAiB,EAAKL,SAAA,CAAUK,iBAAiB,EACrDN,KAAA,CAAMO,qBAAqB,iBAAIX,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMO,qBAAqB,EAAKN,SAAA,CAAUM,qBAAqB,GAC/FN,SAAA,CAAUK,iBAAiB,CAACD,QAAQ,GAGxCL,KAAA,CAAMQ,IAAI,iBAAIZ,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMQ,IAAI,EAAKP,SAAA,CAAUO,IAAI;AAGnD"}
|
@@ -1,7 +1,10 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
import
|
1
|
+
var _controlProps, _arialabelledby,
|
2
|
+
// Assign the child a generated ID if doesn't already have an ID
|
3
|
+
_controlProps1, _controlProps2, _ariainvalid, _controlProps3, _ariarequired;
|
4
|
+
import * as React from "react";
|
5
|
+
import { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from "@fluentui/react-icons";
|
6
|
+
import { Label } from "@fluentui/react-label";
|
7
|
+
import { getNativeElementProps, resolveShorthand, useId } from "@fluentui/react-utilities";
|
5
8
|
const validationMessageIcons = {
|
6
9
|
error: /*#__PURE__*/React.createElement(ErrorCircle12Filled, null),
|
7
10
|
warning: /*#__PURE__*/React.createElement(Warning12Filled, null),
|
@@ -18,37 +21,34 @@ const validationMessageIcons = {
|
|
18
21
|
* @param ref - Ref to the root
|
19
22
|
*/
|
20
23
|
export const useField_unstable = (props, ref) => {
|
21
|
-
var _a, _b, _c, _d;
|
22
24
|
const {
|
23
25
|
children,
|
24
|
-
orientation =
|
26
|
+
orientation = "vertical",
|
25
27
|
required,
|
26
|
-
validationState = props.validationMessage ?
|
28
|
+
validationState = props.validationMessage ? "error" : "none",
|
27
29
|
size
|
28
30
|
} = props;
|
29
|
-
const baseId = useId(
|
30
|
-
const root = getNativeElementProps(
|
31
|
+
const baseId = useId("field-");
|
32
|
+
const root = getNativeElementProps("div", {
|
31
33
|
...props,
|
32
34
|
ref
|
33
|
-
}, /*excludedPropNames:*/[
|
35
|
+
}, /*excludedPropNames:*/["children"]);
|
34
36
|
const label = resolveShorthand(props.label, {
|
35
37
|
defaultProps: {
|
36
|
-
id: baseId +
|
38
|
+
id: baseId + "__label",
|
37
39
|
required,
|
38
40
|
size
|
39
|
-
// htmlFor is handled below
|
40
41
|
}
|
41
42
|
});
|
42
|
-
|
43
43
|
const validationMessage = resolveShorthand(props.validationMessage, {
|
44
44
|
defaultProps: {
|
45
|
-
id: baseId +
|
46
|
-
role: validationState ===
|
45
|
+
id: baseId + "__validationMessage",
|
46
|
+
role: validationState === "error" ? "alert" : undefined
|
47
47
|
}
|
48
48
|
});
|
49
49
|
const hint = resolveShorthand(props.hint, {
|
50
50
|
defaultProps: {
|
51
|
-
id: baseId +
|
51
|
+
id: baseId + "__hint"
|
52
52
|
}
|
53
53
|
});
|
54
54
|
const defaultIcon = validationMessageIcons[validationState];
|
@@ -58,14 +58,13 @@ export const useField_unstable = (props, ref) => {
|
|
58
58
|
children: defaultIcon
|
59
59
|
}
|
60
60
|
});
|
61
|
-
const controlProps = /*#__PURE__*/React.isValidElement(children) ? {
|
61
|
+
const controlProps = /*#__PURE__*/ /*#__PURE__*/React.isValidElement(children) ? {
|
62
62
|
...children.props
|
63
63
|
} : {};
|
64
64
|
if (label) {
|
65
|
-
(
|
65
|
+
(_controlProps = controlProps)[_arialabelledby = "aria-labelledby"] ?? (_controlProps[_arialabelledby] = label.id);
|
66
66
|
if (!label.htmlFor) {
|
67
|
-
|
68
|
-
(_b = controlProps.id) !== null && _b !== void 0 ? _b : controlProps.id = baseId + '__control';
|
67
|
+
(_controlProps1 = controlProps).id ?? (_controlProps1.id = baseId + "__control");
|
69
68
|
label.htmlFor = controlProps.id;
|
70
69
|
}
|
71
70
|
}
|
@@ -73,28 +72,28 @@ export const useField_unstable = (props, ref) => {
|
|
73
72
|
// The control is described by the validation message, or hint, or both
|
74
73
|
// We also preserve and append any aria-describedby supplied by the user
|
75
74
|
// For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
|
76
|
-
controlProps[
|
75
|
+
controlProps["aria-describedby"] = [validationMessage?.id, hint?.id, controlProps["aria-describedby"]].filter(Boolean).join(" ");
|
77
76
|
}
|
78
|
-
if (validationState ===
|
79
|
-
(
|
77
|
+
if (validationState === "error") {
|
78
|
+
(_controlProps2 = controlProps)[_ariainvalid = "aria-invalid"] ?? (_controlProps2[_ariainvalid] = true);
|
80
79
|
}
|
81
80
|
if (required) {
|
82
|
-
(
|
81
|
+
(_controlProps3 = controlProps)[_ariarequired = "aria-required"] ?? (_controlProps3[_ariarequired] = true);
|
83
82
|
}
|
84
83
|
if ( /*#__PURE__*/React.isValidElement(children)) {
|
85
84
|
root.children = /*#__PURE__*/React.cloneElement(children, controlProps);
|
86
|
-
} else if (typeof children ===
|
85
|
+
} else if (typeof children === "function") {
|
87
86
|
root.children = children(controlProps);
|
88
87
|
}
|
89
88
|
return {
|
90
89
|
orientation,
|
91
90
|
validationState,
|
92
91
|
components: {
|
93
|
-
root:
|
92
|
+
root: "div",
|
94
93
|
label: Label,
|
95
|
-
validationMessage:
|
96
|
-
validationMessageIcon:
|
97
|
-
hint:
|
94
|
+
validationMessage: "div",
|
95
|
+
validationMessageIcon: "span",
|
96
|
+
hint: "div"
|
98
97
|
},
|
99
98
|
root,
|
100
99
|
label,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","CheckmarkCircle12Filled","ErrorCircle12Filled","Warning12Filled","Label","getNativeElementProps","resolveShorthand","useId","validationMessageIcons","error","createElement","warning","success","none","undefined","useField_unstable","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","root","label","defaultProps","id","role","hint","defaultIcon","validationMessageIcon","controlProps","isValidElement","
|
1
|
+
{"version":3,"names":["_controlProps","_arialabelledby","_controlProps1","_controlProps2","_ariainvalid","_controlProps3","_ariarequired","React","CheckmarkCircle12Filled","ErrorCircle12Filled","Warning12Filled","Label","getNativeElementProps","resolveShorthand","useId","validationMessageIcons","error","createElement","warning","success","none","undefined","useField_unstable","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","root","label","defaultProps","id","role","hint","defaultIcon","validationMessageIcon","controlProps","isValidElement","htmlFor","filter","Boolean","join","cloneElement","components"],"sources":["../../../src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldChildProps, FieldProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n none: undefined,\n} as const;\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivElement>): FieldState => {\n const {\n children,\n orientation = 'vertical',\n required,\n validationState = props.validationMessage ? 'error' : 'none',\n size,\n } = props;\n\n const baseId = useId('field-');\n\n const root = getNativeElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']);\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n id: baseId + '__label',\n required,\n size,\n // htmlFor is handled below\n },\n });\n\n const validationMessage = resolveShorthand(props.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n role: validationState === 'error' ? 'alert' : undefined,\n },\n });\n\n const hint = resolveShorthand(props.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const defaultIcon = validationMessageIcons[validationState];\n const validationMessageIcon = resolveShorthand(props.validationMessageIcon, {\n required: !!defaultIcon,\n defaultProps: {\n children: defaultIcon,\n },\n });\n\n const controlProps: FieldChildProps = React.isValidElement(children) ? { ...children.props } : {};\n\n if (label) {\n controlProps['aria-labelledby'] ??= label.id;\n\n if (!label.htmlFor) {\n // Assign the child a generated ID if doesn't already have an ID\n controlProps.id ??= baseId + '__control';\n label.htmlFor = controlProps.id;\n }\n }\n\n if (validationMessage || hint) {\n // The control is described by the validation message, or hint, or both\n // We also preserve and append any aria-describedby supplied by the user\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n controlProps['aria-describedby'] = [validationMessage?.id, hint?.id, controlProps['aria-describedby']]\n .filter(Boolean)\n .join(' ');\n }\n\n if (validationState === 'error') {\n controlProps['aria-invalid'] ??= true;\n }\n\n if (required) {\n controlProps['aria-required'] ??= true;\n }\n\n if (React.isValidElement(children)) {\n root.children = React.cloneElement(children, controlProps);\n } else if (typeof children === 'function') {\n root.children = children(controlProps);\n }\n\n return {\n orientation,\n validationState,\n components: {\n root: 'div',\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div',\n },\n root,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n};\n"],"mappings":"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"}
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import { tokens, typographyStyles } from
|
2
|
-
import { __resetStyles, __styles, mergeClasses } from
|
1
|
+
import { tokens, typographyStyles } from "@fluentui/react-theme";
|
2
|
+
import { __resetStyles, __styles, mergeClasses } from "@griffel/react";
|
3
3
|
export const fieldClassNames = {
|
4
4
|
root: `fui-Field`,
|
5
5
|
label: `fui-Field__label`,
|
@@ -8,7 +8,7 @@ export const fieldClassNames = {
|
|
8
8
|
hint: `fui-Field__hint`
|
9
9
|
};
|
10
10
|
// Size of the icon in the validation message
|
11
|
-
const iconSize =
|
11
|
+
const iconSize = "12px";
|
12
12
|
/**
|
13
13
|
* Styles for the root slot
|
14
14
|
*/
|
@@ -82,22 +82,22 @@ export const useFieldStyles_unstable = state => {
|
|
82
82
|
const {
|
83
83
|
validationState
|
84
84
|
} = state;
|
85
|
-
const horizontal = state.orientation ===
|
85
|
+
const horizontal = state.orientation === "horizontal";
|
86
86
|
const rootStyles = useRootStyles();
|
87
87
|
state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
|
88
88
|
const labelStyles = useLabelStyles();
|
89
89
|
if (state.label) {
|
90
|
-
state.label.className = mergeClasses(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size ===
|
90
|
+
state.label.className = mergeClasses(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size === "large" && labelStyles.large, !horizontal && state.label.size === "large" && labelStyles.verticalLarge, state.label.className);
|
91
91
|
}
|
92
92
|
const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
|
93
93
|
const validationMessageIconStyles = useValidationMessageIconStyles();
|
94
94
|
if (state.validationMessageIcon) {
|
95
|
-
state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !==
|
95
|
+
state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== "none" && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
|
96
96
|
}
|
97
97
|
const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
|
98
98
|
const secondaryTextStyles = useSecondaryTextStyles();
|
99
99
|
if (state.validationMessage) {
|
100
|
-
state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState ===
|
100
|
+
state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === "error" && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
|
101
101
|
}
|
102
102
|
if (state.hint) {
|
103
103
|
state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","z8tnut","Byoj8tv","large","vertical","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","useSecondaryTextBaseClassName","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","useFieldStyles_unstable","state","validationState","orientation","rootStyles","className","labelStyles","size","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"sources":["
|
1
|
+
{"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","z8tnut","Byoj8tv","large","vertical","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","useSecondaryTextBaseClassName","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","useFieldStyles_unstable","state","validationState","orientation","rootStyles","className","labelStyles","size","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"sources":["../../../src/components/Field/useFieldStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldSlots, FieldState } from './Field.types';\n\nexport const fieldClassNames: SlotClassNames<FieldSlots> = {\n root: `fui-Field`,\n label: `fui-Field__label`,\n validationMessage: `fui-Field__validationMessage`,\n validationMessageIcon: `fui-Field__validationMessageIcon`,\n hint: `fui-Field__hint`,\n};\n\n// Size of the icon in the validation message\nconst iconSize = '12px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'grid',\n },\n\n // In horizontal layout, the field is a grid with the label taking up the entire first column.\n // The last row is slack space in case the label is taller than the rest of the content.\n horizontal: {\n gridTemplateColumns: '33% 1fr',\n gridTemplateRows: 'auto auto auto 1fr',\n },\n\n // In horizontal layout without a label, replace the label's column with padding.\n // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n horizontalNoLabel: {\n paddingLeft: '33%',\n gridTemplateColumns: '1fr',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n paddingTop: tokens.spacingVerticalXXS,\n paddingBottom: tokens.spacingVerticalXXS,\n },\n\n large: {\n paddingTop: '1px',\n paddingBottom: '1px',\n },\n\n vertical: {\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n verticalLarge: {\n marginBottom: tokens.spacingVerticalXS,\n },\n\n horizontal: {\n marginRight: tokens.spacingHorizontalM,\n gridRowStart: '1',\n gridRowEnd: '-1',\n },\n});\n\nconst useSecondaryTextBaseClassName = makeResetStyles({\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1,\n});\n\nconst useSecondaryTextStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n\n withIcon: {\n // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`,\n },\n});\n\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n display: 'inline-block',\n fontSize: iconSize,\n // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n marginRight: tokens.spacingHorizontalXS,\n // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n lineHeight: '0',\n // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n verticalAlign: '-1px',\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n warning: {\n color: tokens.colorPaletteDarkOrangeForeground1,\n },\n success: {\n color: tokens.colorPaletteGreenForeground1,\n },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = (state: FieldState) => {\n const { validationState } = state;\n const horizontal = state.orientation === 'horizontal';\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n fieldClassNames.root,\n rootStyles.base,\n horizontal && rootStyles.horizontal,\n horizontal && !state.label && rootStyles.horizontalNoLabel,\n state.root.className,\n );\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n fieldClassNames.label,\n labelStyles.base,\n horizontal && labelStyles.horizontal,\n !horizontal && labelStyles.vertical,\n state.label.size === 'large' && labelStyles.large,\n !horizontal && state.label.size === 'large' && labelStyles.verticalLarge,\n state.label.className,\n );\n }\n\n const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n fieldClassNames.validationMessageIcon,\n validationMessageIconBaseClassName,\n validationState !== 'none' && validationMessageIconStyles[validationState],\n state.validationMessageIcon.className,\n );\n }\n\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(\n fieldClassNames.validationMessage,\n secondaryTextBaseClassName,\n validationState === 'error' && secondaryTextStyles.error,\n !!state.validationMessageIcon && secondaryTextStyles.withIcon,\n state.validationMessage.className,\n );\n }\n\n if (state.hint) {\n state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n }\n};\n"],"mappings":"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"}
|
package/lib/index.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from
|
1
|
+
export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from "./Field";
|
2
2
|
// eslint-disable-next-line deprecation/deprecation
|
3
|
-
export { getDeprecatedFieldClassNames, makeDeprecatedField } from
|
3
|
+
export { getDeprecatedFieldClassNames, makeDeprecatedField } from "./util/makeDeprecatedField";
|
4
4
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","getDeprecatedFieldClassNames","makeDeprecatedField"],"sources":["../src/index.ts"],"sourcesContent":["export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport type { FieldProps, FieldSlots, FieldState } from './Field';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { getDeprecatedFieldClassNames, makeDeprecatedField } from './util/makeDeprecatedField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { DeprecatedFieldProps } from './util/makeDeprecatedField';\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ;AAGzG;AACA,SAASC,4BAA4B,EAAEC,mBAAmB,QAAQ"}
|
@@ -1,6 +1,5 @@
|
|
1
|
-
/* eslint-disable deprecation/deprecation */
|
2
|
-
import
|
3
|
-
import { Field, fieldClassNames } from '../Field';
|
1
|
+
/* eslint-disable deprecation/deprecation */import * as React from "react";
|
2
|
+
import { Field, fieldClassNames } from "../Field";
|
4
3
|
/**
|
5
4
|
* Partition the props used by the Field itself, from the props that are passed to the underlying field component.
|
6
5
|
*/
|
@@ -17,7 +16,7 @@ function getPartitionedFieldProps(props) {
|
|
17
16
|
style,
|
18
17
|
validationMessage,
|
19
18
|
validationMessageIcon,
|
20
|
-
validationState =
|
19
|
+
validationState = "none",
|
21
20
|
...restOfProps
|
22
21
|
} = props;
|
23
22
|
return [{
|
@@ -50,9 +49,7 @@ export function makeDeprecatedField(Control, options = {}) {
|
|
50
49
|
} = options;
|
51
50
|
const DeprecatedField = /*#__PURE__*/React.forwardRef((props, ref) => {
|
52
51
|
const [fieldProps, controlProps] = getPartitionedFieldProps(mapProps(props));
|
53
|
-
return /*#__PURE__*/React.createElement(Field, {
|
54
|
-
...fieldProps
|
55
|
-
}, /*#__PURE__*/React.createElement(Control, {
|
52
|
+
return /*#__PURE__*/React.createElement(Field, fieldProps, /*#__PURE__*/React.createElement(Control, {
|
56
53
|
...controlProps,
|
57
54
|
ref: ref
|
58
55
|
}));
|