@fluentui/react-field 0.0.0-nightly-20221007-1528.1 → 0.0.0-nightly-20221010-0422.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 CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui/react-field",
3
3
  "entries": [
4
4
  {
5
- "date": "Fri, 07 Oct 2022 15:34:53 GMT",
6
- "tag": "@fluentui/react-field_v0.0.0-nightly-20221007-1528.1",
7
- "version": "0.0.0-nightly-20221007-1528.1",
5
+ "date": "Mon, 10 Oct 2022 04:26:59 GMT",
6
+ "tag": "@fluentui/react-field_v0.0.0-nightly-20221010-0422.1",
7
+ "version": "0.0.0-nightly-20221010-0422.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -16,92 +16,92 @@
16
16
  {
17
17
  "author": "beachball",
18
18
  "package": "@fluentui/react-field",
19
- "comment": "Bump @fluentui/react-checkbox to v0.0.0-nightly-20221007-1528.1",
20
- "commit": "827197046ec2b195a8997fadbb514a5693234e6b"
19
+ "comment": "Bump @fluentui/react-checkbox to v0.0.0-nightly-20221010-0422.1",
20
+ "commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
21
21
  },
22
22
  {
23
23
  "author": "beachball",
24
24
  "package": "@fluentui/react-field",
25
- "comment": "Bump @fluentui/react-combobox to v0.0.0-nightly-20221007-1528.1",
26
- "commit": "827197046ec2b195a8997fadbb514a5693234e6b"
25
+ "comment": "Bump @fluentui/react-combobox to v0.0.0-nightly-20221010-0422.1",
26
+ "commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
27
27
  },
28
28
  {
29
29
  "author": "beachball",
30
30
  "package": "@fluentui/react-field",
31
- "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20221007-1528.1",
32
- "commit": "827197046ec2b195a8997fadbb514a5693234e6b"
31
+ "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20221010-0422.1",
32
+ "commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
33
33
  },
34
34
  {
35
35
  "author": "beachball",
36
36
  "package": "@fluentui/react-field",
37
- "comment": "Bump @fluentui/react-input to v0.0.0-nightly-20221007-1528.1",
38
- "commit": "827197046ec2b195a8997fadbb514a5693234e6b"
37
+ "comment": "Bump @fluentui/react-input to v0.0.0-nightly-20221010-0422.1",
38
+ "commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
39
39
  },
40
40
  {
41
41
  "author": "beachball",
42
42
  "package": "@fluentui/react-field",
43
- "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20221007-1528.1",
44
- "commit": "827197046ec2b195a8997fadbb514a5693234e6b"
43
+ "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20221010-0422.1",
44
+ "commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
45
45
  },
46
46
  {
47
47
  "author": "beachball",
48
48
  "package": "@fluentui/react-field",
49
- "comment": "Bump @fluentui/react-progress to v0.0.0-nightly-20221007-1528.1",
50
- "commit": "827197046ec2b195a8997fadbb514a5693234e6b"
49
+ "comment": "Bump @fluentui/react-progress to v0.0.0-nightly-20221010-0422.1",
50
+ "commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
51
51
  },
52
52
  {
53
53
  "author": "beachball",
54
54
  "package": "@fluentui/react-field",
55
- "comment": "Bump @fluentui/react-radio to v0.0.0-nightly-20221007-1528.1",
56
- "commit": "827197046ec2b195a8997fadbb514a5693234e6b"
55
+ "comment": "Bump @fluentui/react-radio to v0.0.0-nightly-20221010-0422.1",
56
+ "commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
57
57
  },
58
58
  {
59
59
  "author": "beachball",
60
60
  "package": "@fluentui/react-field",
61
- "comment": "Bump @fluentui/react-select to v0.0.0-nightly-20221007-1528.1",
62
- "commit": "827197046ec2b195a8997fadbb514a5693234e6b"
61
+ "comment": "Bump @fluentui/react-select to v0.0.0-nightly-20221010-0422.1",
62
+ "commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
63
63
  },
64
64
  {
65
65
  "author": "beachball",
66
66
  "package": "@fluentui/react-field",
67
- "comment": "Bump @fluentui/react-slider to v0.0.0-nightly-20221007-1528.1",
68
- "commit": "827197046ec2b195a8997fadbb514a5693234e6b"
67
+ "comment": "Bump @fluentui/react-slider to v0.0.0-nightly-20221010-0422.1",
68
+ "commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
69
69
  },
70
70
  {
71
71
  "author": "beachball",
72
72
  "package": "@fluentui/react-field",
73
- "comment": "Bump @fluentui/react-spinbutton to v0.0.0-nightly-20221007-1528.1",
74
- "commit": "827197046ec2b195a8997fadbb514a5693234e6b"
73
+ "comment": "Bump @fluentui/react-spinbutton to v0.0.0-nightly-20221010-0422.1",
74
+ "commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
75
75
  },
76
76
  {
77
77
  "author": "beachball",
78
78
  "package": "@fluentui/react-field",
79
- "comment": "Bump @fluentui/react-switch to v0.0.0-nightly-20221007-1528.1",
80
- "commit": "827197046ec2b195a8997fadbb514a5693234e6b"
79
+ "comment": "Bump @fluentui/react-switch to v0.0.0-nightly-20221010-0422.1",
80
+ "commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
81
81
  },
82
82
  {
83
83
  "author": "beachball",
84
84
  "package": "@fluentui/react-field",
85
- "comment": "Bump @fluentui/react-textarea to v0.0.0-nightly-20221007-1528.1",
86
- "commit": "827197046ec2b195a8997fadbb514a5693234e6b"
85
+ "comment": "Bump @fluentui/react-textarea to v0.0.0-nightly-20221010-0422.1",
86
+ "commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
87
87
  },
88
88
  {
89
89
  "author": "beachball",
90
90
  "package": "@fluentui/react-field",
91
- "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221007-1528.1",
92
- "commit": "827197046ec2b195a8997fadbb514a5693234e6b"
91
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221010-0422.1",
92
+ "commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
93
93
  },
94
94
  {
95
95
  "author": "beachball",
96
96
  "package": "@fluentui/react-field",
97
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221007-1528.1",
98
- "commit": "827197046ec2b195a8997fadbb514a5693234e6b"
97
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221010-0422.1",
98
+ "commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
99
99
  },
100
100
  {
101
101
  "author": "beachball",
102
102
  "package": "@fluentui/react-field",
103
- "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221007-1528.1",
104
- "commit": "827197046ec2b195a8997fadbb514a5693234e6b"
103
+ "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221010-0422.1",
104
+ "commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
105
105
  }
106
106
  ]
107
107
  }
package/CHANGELOG.md CHANGED
@@ -1,32 +1,32 @@
1
1
  # Change Log - @fluentui/react-field
2
2
 
3
- This log was last generated on Fri, 07 Oct 2022 15:34:53 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 10 Oct 2022 04:26:59 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20221007-1528.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20221007-1528.1)
7
+ ## [0.0.0-nightly-20221010-0422.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20221010-0422.1)
8
8
 
9
- Fri, 07 Oct 2022 15:34:53 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.3..@fluentui/react-field_v0.0.0-nightly-20221007-1528.1)
9
+ Mon, 10 Oct 2022 04:26:59 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.3..@fluentui/react-field_v0.0.0-nightly-20221010-0422.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/react-checkbox to v0.0.0-nightly-20221007-1528.1 ([commit](https://github.com/microsoft/fluentui/commit/827197046ec2b195a8997fadbb514a5693234e6b) by beachball)
16
- - Bump @fluentui/react-combobox to v0.0.0-nightly-20221007-1528.1 ([commit](https://github.com/microsoft/fluentui/commit/827197046ec2b195a8997fadbb514a5693234e6b) by beachball)
17
- - Bump @fluentui/react-context-selector to v0.0.0-nightly-20221007-1528.1 ([commit](https://github.com/microsoft/fluentui/commit/827197046ec2b195a8997fadbb514a5693234e6b) by beachball)
18
- - Bump @fluentui/react-input to v0.0.0-nightly-20221007-1528.1 ([commit](https://github.com/microsoft/fluentui/commit/827197046ec2b195a8997fadbb514a5693234e6b) by beachball)
19
- - Bump @fluentui/react-label to v0.0.0-nightly-20221007-1528.1 ([commit](https://github.com/microsoft/fluentui/commit/827197046ec2b195a8997fadbb514a5693234e6b) by beachball)
20
- - Bump @fluentui/react-progress to v0.0.0-nightly-20221007-1528.1 ([commit](https://github.com/microsoft/fluentui/commit/827197046ec2b195a8997fadbb514a5693234e6b) by beachball)
21
- - Bump @fluentui/react-radio to v0.0.0-nightly-20221007-1528.1 ([commit](https://github.com/microsoft/fluentui/commit/827197046ec2b195a8997fadbb514a5693234e6b) by beachball)
22
- - Bump @fluentui/react-select to v0.0.0-nightly-20221007-1528.1 ([commit](https://github.com/microsoft/fluentui/commit/827197046ec2b195a8997fadbb514a5693234e6b) by beachball)
23
- - Bump @fluentui/react-slider to v0.0.0-nightly-20221007-1528.1 ([commit](https://github.com/microsoft/fluentui/commit/827197046ec2b195a8997fadbb514a5693234e6b) by beachball)
24
- - Bump @fluentui/react-spinbutton to v0.0.0-nightly-20221007-1528.1 ([commit](https://github.com/microsoft/fluentui/commit/827197046ec2b195a8997fadbb514a5693234e6b) by beachball)
25
- - Bump @fluentui/react-switch to v0.0.0-nightly-20221007-1528.1 ([commit](https://github.com/microsoft/fluentui/commit/827197046ec2b195a8997fadbb514a5693234e6b) by beachball)
26
- - Bump @fluentui/react-textarea to v0.0.0-nightly-20221007-1528.1 ([commit](https://github.com/microsoft/fluentui/commit/827197046ec2b195a8997fadbb514a5693234e6b) by beachball)
27
- - Bump @fluentui/react-theme to v0.0.0-nightly-20221007-1528.1 ([commit](https://github.com/microsoft/fluentui/commit/827197046ec2b195a8997fadbb514a5693234e6b) by beachball)
28
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20221007-1528.1 ([commit](https://github.com/microsoft/fluentui/commit/827197046ec2b195a8997fadbb514a5693234e6b) by beachball)
29
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221007-1528.1 ([commit](https://github.com/microsoft/fluentui/commit/827197046ec2b195a8997fadbb514a5693234e6b) by beachball)
15
+ - Bump @fluentui/react-checkbox to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
16
+ - Bump @fluentui/react-combobox to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
17
+ - Bump @fluentui/react-context-selector to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
18
+ - Bump @fluentui/react-input to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
19
+ - Bump @fluentui/react-label to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
20
+ - Bump @fluentui/react-progress to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
21
+ - Bump @fluentui/react-radio to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
22
+ - Bump @fluentui/react-select to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
23
+ - Bump @fluentui/react-slider to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
24
+ - Bump @fluentui/react-spinbutton to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
25
+ - Bump @fluentui/react-switch to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
26
+ - Bump @fluentui/react-textarea to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
27
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
28
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
29
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
30
30
 
31
31
  ## [9.0.0-alpha.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.3)
32
32
 
@@ -7,17 +7,10 @@ const validationMessageIcons = {
7
7
  warning: /*#__PURE__*/React.createElement(Warning12Filled, null),
8
8
  success: /*#__PURE__*/React.createElement(CheckmarkCircle12Filled, null)
9
9
  };
10
- /**
11
- * Merge two possibly-undefined IDs for aria-describedby. If both IDs are defined, combines
12
- * them into a string separated by a space. Otherwise, returns just the defined ID (if any).
13
- */
14
-
15
- const mergeAriaDescribedBy = (a, b) => a && b ? `${a} ${b}` : a || b;
16
10
  /**
17
11
  * Partition the props used by the Field itself, from the props that are passed to the underlying field component.
18
12
  */
19
13
 
20
-
21
14
  export const getPartitionedFieldProps = props => {
22
15
  const {
23
16
  className,
@@ -58,22 +51,35 @@ export const getPartitionedFieldProps = props => {
58
51
  */
59
52
 
60
53
  export const useField_unstable = (props, ref, params) => {
54
+ var _a, _b, _c, _d, _e;
55
+
61
56
  const [fieldProps, controlProps] = getPartitionedFieldProps(props);
62
- const baseId = useId('field-');
63
57
  const {
64
58
  orientation = 'vertical',
65
59
  validationState
66
60
  } = fieldProps;
61
+ const {
62
+ labelConnection = 'htmlFor'
63
+ } = params;
64
+ const baseId = useId('field-');
67
65
  const root = resolveShorthand(fieldProps.root, {
68
66
  required: true,
69
67
  defaultProps: getNativeElementProps('div', fieldProps)
70
68
  });
69
+ const control = resolveShorthand(fieldProps.control, {
70
+ required: true,
71
+ defaultProps: {
72
+ ref,
73
+ id: baseId + '__control',
74
+ ...controlProps
75
+ }
76
+ });
71
77
  const label = resolveShorthand(fieldProps.label, {
72
78
  defaultProps: {
73
79
  id: baseId + '__label',
74
80
  required: controlProps.required,
75
- size: typeof controlProps.size === 'string' ? controlProps.size : undefined // htmlFor is set below
76
-
81
+ size: typeof controlProps.size === 'string' ? controlProps.size : undefined,
82
+ htmlFor: labelConnection === 'htmlFor' ? control.id : undefined
77
83
  }
78
84
  });
79
85
  const validationMessage = resolveShorthand(fieldProps.validationMessage, {
@@ -91,28 +97,29 @@ export const useField_unstable = (props, ref, params) => {
91
97
  defaultProps: {
92
98
  children: validationState ? validationMessageIcons[validationState] : undefined
93
99
  }
94
- });
95
- const {
96
- labelConnection = 'htmlFor'
97
- } = params;
98
- const hasError = validationState === 'error';
99
- const control = resolveShorthand(fieldProps.control, {
100
- required: true,
101
- defaultProps: {
102
- ref,
103
- // Add a default ID only if required for label's htmlFor prop
104
- id: label && labelConnection === 'htmlFor' ? baseId + '__control' : undefined,
105
- // Add aria-labelledby only if not using the label's htmlFor
106
- 'aria-labelledby': labelConnection !== 'htmlFor' ? label === null || label === void 0 ? void 0 : label.id : undefined,
107
- 'aria-describedby': hasError ? hint === null || hint === void 0 ? void 0 : hint.id : mergeAriaDescribedBy(validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id, hint === null || hint === void 0 ? void 0 : hint.id),
108
- 'aria-errormessage': hasError ? validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id : undefined,
109
- 'aria-invalid': hasError ? true : undefined,
110
- ...controlProps
100
+ }); // Hook up aria props on the control
101
+
102
+ if (label && labelConnection === 'aria-labelledby') {
103
+ (_a = control['aria-labelledby']) !== null && _a !== void 0 ? _a : control['aria-labelledby'] = label.id;
104
+ }
105
+
106
+ if (validationState === 'error') {
107
+ (_b = control['aria-invalid']) !== null && _b !== void 0 ? _b : control['aria-invalid'] = true;
108
+
109
+ if (validationMessage) {
110
+ (_c = control['aria-errormessage']) !== null && _c !== void 0 ? _c : control['aria-errormessage'] = validationMessage.id;
111
111
  }
112
- });
113
112
 
114
- if (labelConnection === 'htmlFor' && label && !label.htmlFor) {
115
- label.htmlFor = control.id;
113
+ if (hint) {
114
+ (_d = control['aria-describedby']) !== null && _d !== void 0 ? _d : control['aria-describedby'] = hint.id;
115
+ }
116
+ } else {
117
+ // If the state is not an error, then the control is described by the validation message, or hint, or both
118
+ const describedby = validationMessage || hint;
119
+
120
+ if (describedby) {
121
+ (_e = control['aria-describedby']) !== null && _e !== void 0 ? _e : control['aria-describedby'] = validationMessage && hint ? `${validationMessage.id} ${hint.id}` : describedby.id;
122
+ }
116
123
  }
117
124
 
118
125
  const state = {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Field/useField.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type {\n FieldComponent,\n FieldConfig,\n FieldProps,\n FieldPropsWithOptionalComponentProps,\n FieldState,\n} from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Merge two possibly-undefined IDs for aria-describedby. If both IDs are defined, combines\n * them into a string separated by a space. Otherwise, returns just the defined ID (if any).\n */\nconst mergeAriaDescribedBy = (a?: string, b?: string) => (a && b ? `${a} ${b}` : a || b);\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = <Props extends FieldProps<FieldComponent>>(props: Props) => {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...restOfProps\n } = props;\n\n const fieldProps = {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n };\n\n return [fieldProps, restOfProps] as const;\n};\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldComponent>(\n props: FieldPropsWithOptionalComponentProps<T>,\n ref: React.Ref<HTMLElement>,\n params: FieldConfig<T>,\n): FieldState<T> => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n\n const baseId = useId('field-');\n\n const { orientation = 'vertical', validationState } = fieldProps;\n\n const root = resolveShorthand(fieldProps.root, {\n required: true,\n defaultProps: getNativeElementProps('div', fieldProps),\n });\n\n const label = resolveShorthand(fieldProps.label, {\n defaultProps: {\n id: baseId + '__label',\n required: controlProps.required,\n size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n // htmlFor is set below\n },\n });\n\n const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n },\n });\n\n const hint = resolveShorthand(fieldProps.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n required: !!validationState,\n defaultProps: {\n children: validationState ? validationMessageIcons[validationState] : undefined,\n },\n });\n\n const { labelConnection = 'htmlFor' } = params;\n const hasError = validationState === 'error';\n\n const control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n // Add a default ID only if required for label's htmlFor prop\n id: label && labelConnection === 'htmlFor' ? baseId + '__control' : undefined,\n // Add aria-labelledby only if not using the label's htmlFor\n 'aria-labelledby': labelConnection !== 'htmlFor' ? label?.id : undefined,\n 'aria-describedby': hasError ? hint?.id : mergeAriaDescribedBy(validationMessage?.id, hint?.id),\n 'aria-errormessage': hasError ? validationMessage?.id : undefined,\n 'aria-invalid': hasError ? true : undefined,\n ...controlProps,\n },\n });\n\n if (labelConnection === 'htmlFor' && label && !label.htmlFor) {\n label.htmlFor = control.id;\n }\n\n const state: FieldState<FieldComponent> = {\n orientation,\n validationState,\n classNames: params.classNames,\n components: {\n root: 'div',\n control: params.component,\n label: Label,\n validationMessage: 'span',\n validationMessageIcon: 'span',\n hint: 'span',\n },\n root,\n control,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n\n return state as FieldState<T>;\n};\n"],"sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/Field/useField.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type {\n FieldComponent,\n FieldConfig,\n FieldProps,\n FieldPropsWithOptionalComponentProps,\n FieldState,\n} from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = <Props extends FieldProps<FieldComponent>>(props: Props) => {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...restOfProps\n } = props;\n\n const fieldProps = {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n };\n\n return [fieldProps, restOfProps] as const;\n};\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldComponent>(\n props: FieldPropsWithOptionalComponentProps<T>,\n ref: React.Ref<HTMLElement>,\n params: FieldConfig<T>,\n): FieldState<T> => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n const { orientation = 'vertical', validationState } = fieldProps;\n const { labelConnection = 'htmlFor' } = params;\n\n const baseId = useId('field-');\n\n const root = resolveShorthand(fieldProps.root, {\n required: true,\n defaultProps: getNativeElementProps('div', fieldProps),\n });\n\n const control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\n });\n\n const label = resolveShorthand(fieldProps.label, {\n defaultProps: {\n id: baseId + '__label',\n required: controlProps.required,\n size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n htmlFor: labelConnection === 'htmlFor' ? control.id : undefined,\n },\n });\n\n const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n },\n });\n\n const hint = resolveShorthand(fieldProps.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n required: !!validationState,\n defaultProps: {\n children: validationState ? validationMessageIcons[validationState] : undefined,\n },\n });\n\n // Hook up aria props on the control\n if (label && labelConnection === 'aria-labelledby') {\n control['aria-labelledby'] ??= label.id;\n }\n\n if (validationState === 'error') {\n control['aria-invalid'] ??= true;\n if (validationMessage) {\n control['aria-errormessage'] ??= validationMessage.id;\n }\n if (hint) {\n control['aria-describedby'] ??= hint.id;\n }\n } else {\n // If the state is not an error, then the control is described by the validation message, or hint, or both\n const describedby = validationMessage || hint;\n if (describedby) {\n control['aria-describedby'] ??= validationMessage && hint ? `${validationMessage.id} ${hint.id}` : describedby.id;\n }\n }\n\n const state: FieldState<FieldComponent> = {\n orientation,\n validationState,\n classNames: params.classNames,\n components: {\n root: 'div',\n control: params.component,\n label: Label,\n validationMessage: 'span',\n validationMessageIcon: 'span',\n hint: 'span',\n },\n root,\n control,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n\n return state as FieldState<T>;\n};\n"],"sourceRoot":""}
@@ -18,17 +18,10 @@ const validationMessageIcons = {
18
18
  warning: /*#__PURE__*/React.createElement(react_icons_1.Warning12Filled, null),
19
19
  success: /*#__PURE__*/React.createElement(react_icons_1.CheckmarkCircle12Filled, null)
20
20
  };
21
- /**
22
- * Merge two possibly-undefined IDs for aria-describedby. If both IDs are defined, combines
23
- * them into a string separated by a space. Otherwise, returns just the defined ID (if any).
24
- */
25
-
26
- const mergeAriaDescribedBy = (a, b) => a && b ? `${a} ${b}` : a || b;
27
21
  /**
28
22
  * Partition the props used by the Field itself, from the props that are passed to the underlying field component.
29
23
  */
30
24
 
31
-
32
25
  const getPartitionedFieldProps = props => {
33
26
  const {
34
27
  className,
@@ -71,22 +64,35 @@ exports.getPartitionedFieldProps = getPartitionedFieldProps;
71
64
  */
72
65
 
73
66
  const useField_unstable = (props, ref, params) => {
67
+ var _a, _b, _c, _d, _e;
68
+
74
69
  const [fieldProps, controlProps] = exports.getPartitionedFieldProps(props);
75
- const baseId = react_utilities_1.useId('field-');
76
70
  const {
77
71
  orientation = 'vertical',
78
72
  validationState
79
73
  } = fieldProps;
74
+ const {
75
+ labelConnection = 'htmlFor'
76
+ } = params;
77
+ const baseId = react_utilities_1.useId('field-');
80
78
  const root = react_utilities_1.resolveShorthand(fieldProps.root, {
81
79
  required: true,
82
80
  defaultProps: react_utilities_1.getNativeElementProps('div', fieldProps)
83
81
  });
82
+ const control = react_utilities_1.resolveShorthand(fieldProps.control, {
83
+ required: true,
84
+ defaultProps: {
85
+ ref,
86
+ id: baseId + '__control',
87
+ ...controlProps
88
+ }
89
+ });
84
90
  const label = react_utilities_1.resolveShorthand(fieldProps.label, {
85
91
  defaultProps: {
86
92
  id: baseId + '__label',
87
93
  required: controlProps.required,
88
- size: typeof controlProps.size === 'string' ? controlProps.size : undefined // htmlFor is set below
89
-
94
+ size: typeof controlProps.size === 'string' ? controlProps.size : undefined,
95
+ htmlFor: labelConnection === 'htmlFor' ? control.id : undefined
90
96
  }
91
97
  });
92
98
  const validationMessage = react_utilities_1.resolveShorthand(fieldProps.validationMessage, {
@@ -104,28 +110,29 @@ const useField_unstable = (props, ref, params) => {
104
110
  defaultProps: {
105
111
  children: validationState ? validationMessageIcons[validationState] : undefined
106
112
  }
107
- });
108
- const {
109
- labelConnection = 'htmlFor'
110
- } = params;
111
- const hasError = validationState === 'error';
112
- const control = react_utilities_1.resolveShorthand(fieldProps.control, {
113
- required: true,
114
- defaultProps: {
115
- ref,
116
- // Add a default ID only if required for label's htmlFor prop
117
- id: label && labelConnection === 'htmlFor' ? baseId + '__control' : undefined,
118
- // Add aria-labelledby only if not using the label's htmlFor
119
- 'aria-labelledby': labelConnection !== 'htmlFor' ? label === null || label === void 0 ? void 0 : label.id : undefined,
120
- 'aria-describedby': hasError ? hint === null || hint === void 0 ? void 0 : hint.id : mergeAriaDescribedBy(validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id, hint === null || hint === void 0 ? void 0 : hint.id),
121
- 'aria-errormessage': hasError ? validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id : undefined,
122
- 'aria-invalid': hasError ? true : undefined,
123
- ...controlProps
113
+ }); // Hook up aria props on the control
114
+
115
+ if (label && labelConnection === 'aria-labelledby') {
116
+ (_a = control['aria-labelledby']) !== null && _a !== void 0 ? _a : control['aria-labelledby'] = label.id;
117
+ }
118
+
119
+ if (validationState === 'error') {
120
+ (_b = control['aria-invalid']) !== null && _b !== void 0 ? _b : control['aria-invalid'] = true;
121
+
122
+ if (validationMessage) {
123
+ (_c = control['aria-errormessage']) !== null && _c !== void 0 ? _c : control['aria-errormessage'] = validationMessage.id;
124
124
  }
125
- });
126
125
 
127
- if (labelConnection === 'htmlFor' && label && !label.htmlFor) {
128
- label.htmlFor = control.id;
126
+ if (hint) {
127
+ (_d = control['aria-describedby']) !== null && _d !== void 0 ? _d : control['aria-describedby'] = hint.id;
128
+ }
129
+ } else {
130
+ // If the state is not an error, then the control is described by the validation message, or hint, or both
131
+ const describedby = validationMessage || hint;
132
+
133
+ if (describedby) {
134
+ (_e = control['aria-describedby']) !== null && _e !== void 0 ? _e : control['aria-describedby'] = validationMessage && hint ? `${validationMessage.id} ${hint.id}` : describedby.id;
135
+ }
129
136
  }
130
137
 
131
138
  const state = {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Field/useField.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type {\n FieldComponent,\n FieldConfig,\n FieldProps,\n FieldPropsWithOptionalComponentProps,\n FieldState,\n} from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Merge two possibly-undefined IDs for aria-describedby. If both IDs are defined, combines\n * them into a string separated by a space. Otherwise, returns just the defined ID (if any).\n */\nconst mergeAriaDescribedBy = (a?: string, b?: string) => (a && b ? `${a} ${b}` : a || b);\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = <Props extends FieldProps<FieldComponent>>(props: Props) => {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...restOfProps\n } = props;\n\n const fieldProps = {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n };\n\n return [fieldProps, restOfProps] as const;\n};\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldComponent>(\n props: FieldPropsWithOptionalComponentProps<T>,\n ref: React.Ref<HTMLElement>,\n params: FieldConfig<T>,\n): FieldState<T> => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n\n const baseId = useId('field-');\n\n const { orientation = 'vertical', validationState } = fieldProps;\n\n const root = resolveShorthand(fieldProps.root, {\n required: true,\n defaultProps: getNativeElementProps('div', fieldProps),\n });\n\n const label = resolveShorthand(fieldProps.label, {\n defaultProps: {\n id: baseId + '__label',\n required: controlProps.required,\n size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n // htmlFor is set below\n },\n });\n\n const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n },\n });\n\n const hint = resolveShorthand(fieldProps.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n required: !!validationState,\n defaultProps: {\n children: validationState ? validationMessageIcons[validationState] : undefined,\n },\n });\n\n const { labelConnection = 'htmlFor' } = params;\n const hasError = validationState === 'error';\n\n const control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n // Add a default ID only if required for label's htmlFor prop\n id: label && labelConnection === 'htmlFor' ? baseId + '__control' : undefined,\n // Add aria-labelledby only if not using the label's htmlFor\n 'aria-labelledby': labelConnection !== 'htmlFor' ? label?.id : undefined,\n 'aria-describedby': hasError ? hint?.id : mergeAriaDescribedBy(validationMessage?.id, hint?.id),\n 'aria-errormessage': hasError ? validationMessage?.id : undefined,\n 'aria-invalid': hasError ? true : undefined,\n ...controlProps,\n },\n });\n\n if (labelConnection === 'htmlFor' && label && !label.htmlFor) {\n label.htmlFor = control.id;\n }\n\n const state: FieldState<FieldComponent> = {\n orientation,\n validationState,\n classNames: params.classNames,\n components: {\n root: 'div',\n control: params.component,\n label: Label,\n validationMessage: 'span',\n validationMessageIcon: 'span',\n hint: 'span',\n },\n root,\n control,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n\n return state as FieldState<T>;\n};\n"],"sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/Field/useField.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type {\n FieldComponent,\n FieldConfig,\n FieldProps,\n FieldPropsWithOptionalComponentProps,\n FieldState,\n} from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = <Props extends FieldProps<FieldComponent>>(props: Props) => {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...restOfProps\n } = props;\n\n const fieldProps = {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n };\n\n return [fieldProps, restOfProps] as const;\n};\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldComponent>(\n props: FieldPropsWithOptionalComponentProps<T>,\n ref: React.Ref<HTMLElement>,\n params: FieldConfig<T>,\n): FieldState<T> => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n const { orientation = 'vertical', validationState } = fieldProps;\n const { labelConnection = 'htmlFor' } = params;\n\n const baseId = useId('field-');\n\n const root = resolveShorthand(fieldProps.root, {\n required: true,\n defaultProps: getNativeElementProps('div', fieldProps),\n });\n\n const control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\n });\n\n const label = resolveShorthand(fieldProps.label, {\n defaultProps: {\n id: baseId + '__label',\n required: controlProps.required,\n size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n htmlFor: labelConnection === 'htmlFor' ? control.id : undefined,\n },\n });\n\n const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n },\n });\n\n const hint = resolveShorthand(fieldProps.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n required: !!validationState,\n defaultProps: {\n children: validationState ? validationMessageIcons[validationState] : undefined,\n },\n });\n\n // Hook up aria props on the control\n if (label && labelConnection === 'aria-labelledby') {\n control['aria-labelledby'] ??= label.id;\n }\n\n if (validationState === 'error') {\n control['aria-invalid'] ??= true;\n if (validationMessage) {\n control['aria-errormessage'] ??= validationMessage.id;\n }\n if (hint) {\n control['aria-describedby'] ??= hint.id;\n }\n } else {\n // If the state is not an error, then the control is described by the validation message, or hint, or both\n const describedby = validationMessage || hint;\n if (describedby) {\n control['aria-describedby'] ??= validationMessage && hint ? `${validationMessage.id} ${hint.id}` : describedby.id;\n }\n }\n\n const state: FieldState<FieldComponent> = {\n orientation,\n validationState,\n classNames: params.classNames,\n components: {\n root: 'div',\n control: params.component,\n label: Label,\n validationMessage: 'span',\n validationMessageIcon: 'span',\n hint: 'span',\n },\n root,\n control,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n\n return state as FieldState<T>;\n};\n"],"sourceRoot":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-field",
3
- "version": "0.0.0-nightly-20221007-1528.1",
3
+ "version": "0.0.0-nightly-20221010-0422.1",
4
4
  "description": "Fluent UI Field components",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -27,25 +27,25 @@
27
27
  "devDependencies": {
28
28
  "@fluentui/eslint-plugin": "*",
29
29
  "@fluentui/react-conformance": "*",
30
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20221007-1528.1",
30
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20221010-0422.1",
31
31
  "@fluentui/scripts": "^1.0.0"
32
32
  },
33
33
  "dependencies": {
34
- "@fluentui/react-checkbox": "^0.0.0-nightly-20221007-1528.1",
35
- "@fluentui/react-combobox": "^0.0.0-nightly-20221007-1528.1",
36
- "@fluentui/react-context-selector": "^0.0.0-nightly-20221007-1528.1",
34
+ "@fluentui/react-checkbox": "0.0.0-nightly-20221010-0422.1",
35
+ "@fluentui/react-combobox": "0.0.0-nightly-20221010-0422.1",
36
+ "@fluentui/react-context-selector": "0.0.0-nightly-20221010-0422.1",
37
37
  "@fluentui/react-icons": "^2.0.175",
38
- "@fluentui/react-input": "^0.0.0-nightly-20221007-1528.1",
39
- "@fluentui/react-label": "^0.0.0-nightly-20221007-1528.1",
40
- "@fluentui/react-progress": "0.0.0-nightly-20221007-1528.1",
41
- "@fluentui/react-radio": "^0.0.0-nightly-20221007-1528.1",
42
- "@fluentui/react-select": "0.0.0-nightly-20221007-1528.1",
43
- "@fluentui/react-slider": "^0.0.0-nightly-20221007-1528.1",
44
- "@fluentui/react-spinbutton": "^0.0.0-nightly-20221007-1528.1",
45
- "@fluentui/react-switch": "^0.0.0-nightly-20221007-1528.1",
46
- "@fluentui/react-textarea": "^0.0.0-nightly-20221007-1528.1",
47
- "@fluentui/react-theme": "^0.0.0-nightly-20221007-1528.1",
48
- "@fluentui/react-utilities": "^0.0.0-nightly-20221007-1528.1",
38
+ "@fluentui/react-input": "0.0.0-nightly-20221010-0422.1",
39
+ "@fluentui/react-label": "0.0.0-nightly-20221010-0422.1",
40
+ "@fluentui/react-progress": "0.0.0-nightly-20221010-0422.1",
41
+ "@fluentui/react-radio": "0.0.0-nightly-20221010-0422.1",
42
+ "@fluentui/react-select": "0.0.0-nightly-20221010-0422.1",
43
+ "@fluentui/react-slider": "0.0.0-nightly-20221010-0422.1",
44
+ "@fluentui/react-spinbutton": "0.0.0-nightly-20221010-0422.1",
45
+ "@fluentui/react-switch": "0.0.0-nightly-20221010-0422.1",
46
+ "@fluentui/react-textarea": "0.0.0-nightly-20221010-0422.1",
47
+ "@fluentui/react-theme": "0.0.0-nightly-20221010-0422.1",
48
+ "@fluentui/react-utilities": "0.0.0-nightly-20221010-0422.1",
49
49
  "@griffel/react": "^1.3.0",
50
50
  "tslib": "^2.1.0"
51
51
  },