@fluentui/react-field - npm Package Compare versions

Comparing version 9.0.0-alpha.9 to 9.0.0-alpha.10

CHANGELOG.json

@@ -5,3 +5,36 @@ {
     {
-      "date": "Thu, 17 Nov 2022 23:02:36 GMT",
+      "date": "Mon, 05 Dec 2022 18:25:21 GMT",
+      "tag": "@fluentui/react-field_v9.0.0-alpha.10",
+      "version": "9.0.0-alpha.10",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-field",
+            "commit": "79a448b20b02bdb5b9832734e6fa19d9c82d5865",
+            "comment": "fix: Field should use aria-describedby instead of aria-errormessage"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-field",
+            "commit": "886907609cb066a4c08364b57a7cb718b4069434",
+            "comment": "chore: Migrate to new package structure."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-field",
+            "comment": "Bump @fluentui/react-label to v9.0.12",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-field",
+            "comment": "Bump @fluentui/react-theme to v9.1.3",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 17 Nov 2022 23:05:39 GMT",
       "tag": "@fluentui/react-field_v9.0.0-alpha.9",
@@ -8,0 +41,0 @@ "version": "9.0.0-alpha.9",

CHANGELOG.md

 # Change Log - @fluentui/react-field
 
-This log was last generated on Thu, 17 Nov 2022 23:02:36 GMT and should not be manually modified.
+This log was last generated on Mon, 05 Dec 2022 18:25:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.10)
+
+Mon, 05 Dec 2022 18:25:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.9..@fluentui/react-field_v9.0.0-alpha.10)
+
+### Changes
+
+- fix: Field should use aria-describedby instead of aria-errormessage ([PR #25580](https://github.com/microsoft/fluentui/pull/25580) by [e-mail])
+- chore: Migrate to new package structure. ([PR #25817](https://github.com/microsoft/fluentui/pull/25817) by [e-mail])
+- Bump @fluentui/react-label to v9.0.12 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-theme to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+
 ## [9.0.0-alpha.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.9)
 
-Thu, 17 Nov 2022 23:02:36 GMT 
+Thu, 17 Nov 2022 23:05:39 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.8..@fluentui/react-field_v9.0.0-alpha.9)
@@ -11,0 +23,0 @@

dist/index.d.ts

@@ -35,3 +35,3 @@ /// <reference types="react" />
     /**
-     * Should the aria-invalid and aria-errormessage attributes be set when validationState="error".
+     * Should the aria-invalid attribute be set when validationState="error".
      *
@@ -49,3 +49,3 @@ * @default true
  */
-export declare type FieldControl = React_2.VoidFunctionComponent<Pick<React_2.HTMLAttributes<HTMLElement>, 'id' | 'className' | 'style' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-errormessage'>>;
+export declare type FieldControl = React_2.VoidFunctionComponent<Pick<React_2.HTMLAttributes<HTMLElement>, 'id' | 'className' | 'style' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid'>>;
 
@@ -81,2 +81,6 @@ /**
     /**
+     * A ref to the underlying control.
+     */
+    ref?: React_2.Ref<HTMLElement>;
+    /**
      * Whether the field label should be marked as required.
@@ -83,0 +87,0 @@ */

lib-amd/components/Field/useField.js

@@ -41,6 +41,6 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-icons", "@fluentui/react-label", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_icons_1, react_label_1, react_utilities_1) {
     var useField_unstable = function (props, ref, params) {
-        var _a, _b, _c, _d, _e;
-        var _f = exports.getPartitionedFieldProps(props), fieldProps = _f[0], controlProps = _f[1];
-        var _g = fieldProps.orientation, orientation = _g === void 0 ? 'vertical' : _g, validationState = fieldProps.validationState;
-        var _h = params.labelConnection, labelConnection = _h === void 0 ? 'htmlFor' : _h, _j = params.ariaInvalidOnError, ariaInvalidOnError = _j === void 0 ? true : _j;
+        var _a, _b, _c;
+        var _d = exports.getPartitionedFieldProps(props), fieldProps = _d[0], controlProps = _d[1];
+        var _e = fieldProps.orientation, orientation = _e === void 0 ? 'vertical' : _e, validationState = fieldProps.validationState;
+        var _f = params.labelConnection, labelConnection = _f === void 0 ? 'htmlFor' : _f, _g = params.ariaInvalidOnError, ariaInvalidOnError = _g === void 0 ? true : _g;
         var baseId = react_utilities_1.useId('field-');
@@ -51,6 +51,2 @@ var root = react_utilities_1.resolveShorthand(fieldProps.root, {
         });
-        var control = react_utilities_1.resolveShorthand(fieldProps.control, {
-            required: true,
-            defaultProps: tslib_1.__assign({ ref: ref, id: baseId + '__control' }, controlProps),
-        });
         var label = react_utilities_1.resolveShorthand(fieldProps.label, {
@@ -61,3 +57,3 @@ defaultProps: {
                 size: typeof controlProps.size === 'string' ? controlProps.size : undefined,
-                htmlFor: labelConnection === 'htmlFor' ? control.id : undefined,
+                // htmlFor is handled below
             },
@@ -83,19 +79,21 @@ });
         if (label && labelConnection === 'aria-labelledby') {
-            (_a = control['aria-labelledby']) !== null && _a !== void 0 ? _a : (control['aria-labelledby'] = label.id);
+            (_a = controlProps['aria-labelledby']) !== null && _a !== void 0 ? _a : (controlProps['aria-labelledby'] = label.id);
         }
+        if (validationMessage || hint) {
+            // The control is described by the validation message, or hint, or both
+            // We also preserve and append any aria-describedby supplied by the user
+            // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
+            controlProps['aria-describedby'] = [validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id, hint === null || hint === void 0 ? void 0 : hint.id, controlProps['aria-describedby']]
+                .filter(Boolean)
+                .join(' ');
+        }
         if (validationState === 'error' && ariaInvalidOnError) {
-            (_b = control['aria-invalid']) !== null && _b !== void 0 ? _b : (control['aria-invalid'] = true);
-            if (validationMessage) {
-                (_c = control['aria-errormessage']) !== null && _c !== void 0 ? _c : (control['aria-errormessage'] = validationMessage.id);
-            }
-            if (hint) {
-                (_d = control['aria-describedby']) !== null && _d !== void 0 ? _d : (control['aria-describedby'] = hint.id);
-            }
+            (_b = controlProps['aria-invalid']) !== null && _b !== void 0 ? _b : (controlProps['aria-invalid'] = true);
         }
-        else {
-            // If the state is not an error, then the control is described by the validation message, or hint, or both
-            var describedby = validationMessage || hint;
-            if (describedby) {
-                (_e = control['aria-describedby']) !== null && _e !== void 0 ? _e : (control['aria-describedby'] = validationMessage && hint ? validationMessage.id + " " + hint.id : describedby.id);
-            }
+        var control = react_utilities_1.resolveShorthand(fieldProps.control, {
+            required: true,
+            defaultProps: tslib_1.__assign({ ref: ref, id: baseId + '__control' }, controlProps),
+        });
+        if (label && labelConnection === 'htmlFor') {
+            (_c = label.htmlFor) !== null && _c !== void 0 ? _c : (label.htmlFor = control.id);
         }
@@ -102,0 +100,0 @@ var state = {

lib-commonjs/components/Field/useField.js

@@ -67,3 +67,3 @@ "use strict";
 const useField_unstable = (props, ref, params) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c;
 
@@ -84,10 +84,2 @@ const [fieldProps, controlProps] = exports.getPartitionedFieldProps(props);
   });
-  const control = react_utilities_1.resolveShorthand(fieldProps.control, {
-    required: true,
-    defaultProps: {
-      ref,
-      id: baseId + '__control',
-      ...controlProps
-    }
-  });
   const label = react_utilities_1.resolveShorthand(fieldProps.label, {
@@ -97,4 +89,4 @@ defaultProps: {
       required: controlProps.required,
-      size: typeof controlProps.size === 'string' ? controlProps.size : undefined,
-      htmlFor: labelConnection === 'htmlFor' ? control.id : undefined
+      size: typeof controlProps.size === 'string' ? controlProps.size : undefined // htmlFor is handled below
+
     }
@@ -120,22 +112,27 @@ });
   if (label && labelConnection === 'aria-labelledby') {
-    (_a = control['aria-labelledby']) !== null && _a !== void 0 ? _a : control['aria-labelledby'] = label.id;
+    (_a = controlProps['aria-labelledby']) !== null && _a !== void 0 ? _a : controlProps['aria-labelledby'] = label.id;
   }
 
+  if (validationMessage || hint) {
+    // The control is described by the validation message, or hint, or both
+    // We also preserve and append any aria-describedby supplied by the user
+    // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
+    controlProps['aria-describedby'] = [validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id, hint === null || hint === void 0 ? void 0 : hint.id, controlProps['aria-describedby']].filter(Boolean).join(' ');
+  }
+
   if (validationState === 'error' && ariaInvalidOnError) {
-    (_b = control['aria-invalid']) !== null && _b !== void 0 ? _b : control['aria-invalid'] = true;
+    (_b = controlProps['aria-invalid']) !== null && _b !== void 0 ? _b : controlProps['aria-invalid'] = true;
+  }
 
-    if (validationMessage) {
-      (_c = control['aria-errormessage']) !== null && _c !== void 0 ? _c : control['aria-errormessage'] = validationMessage.id;
+  const control = react_utilities_1.resolveShorthand(fieldProps.control, {
+    required: true,
+    defaultProps: {
+      ref,
+      id: baseId + '__control',
+      ...controlProps
     }
+  });
 
-    if (hint) {
-      (_d = control['aria-describedby']) !== null && _d !== void 0 ? _d : control['aria-describedby'] = hint.id;
-    }
-  } else {
-    // If the state is not an error, then the control is described by the validation message, or hint, or both
-    const describedby = validationMessage || hint;
-
-    if (describedby) {
-      (_e = control['aria-describedby']) !== null && _e !== void 0 ? _e : control['aria-describedby'] = validationMessage && hint ? `${validationMessage.id} ${hint.id}` : describedby.id;
-    }
+  if (label && labelConnection === 'htmlFor') {
+    (_c = label.htmlFor) !== null && _c !== void 0 ? _c : label.htmlFor = control.id;
   }
@@ -142,0 +139,0 @@

lib/components/Field/useField.js

@@ -54,3 +54,3 @@ import * as React from 'react';
 export const useField_unstable = (props, ref, params) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c;
 
@@ -71,10 +71,2 @@ const [fieldProps, controlProps] = getPartitionedFieldProps(props);
   });
-  const control = resolveShorthand(fieldProps.control, {
-    required: true,
-    defaultProps: {
-      ref,
-      id: baseId + '__control',
-      ...controlProps
-    }
-  });
   const label = resolveShorthand(fieldProps.label, {
@@ -84,4 +76,4 @@ defaultProps: {
       required: controlProps.required,
-      size: typeof controlProps.size === 'string' ? controlProps.size : undefined,
-      htmlFor: labelConnection === 'htmlFor' ? control.id : undefined
+      size: typeof controlProps.size === 'string' ? controlProps.size : undefined // htmlFor is handled below
+
     }
@@ -107,22 +99,27 @@ });
   if (label && labelConnection === 'aria-labelledby') {
-    (_a = control['aria-labelledby']) !== null && _a !== void 0 ? _a : control['aria-labelledby'] = label.id;
+    (_a = controlProps['aria-labelledby']) !== null && _a !== void 0 ? _a : controlProps['aria-labelledby'] = label.id;
   }
 
+  if (validationMessage || hint) {
+    // The control is described by the validation message, or hint, or both
+    // We also preserve and append any aria-describedby supplied by the user
+    // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
+    controlProps['aria-describedby'] = [validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id, hint === null || hint === void 0 ? void 0 : hint.id, controlProps['aria-describedby']].filter(Boolean).join(' ');
+  }
+
   if (validationState === 'error' && ariaInvalidOnError) {
-    (_b = control['aria-invalid']) !== null && _b !== void 0 ? _b : control['aria-invalid'] = true;
+    (_b = controlProps['aria-invalid']) !== null && _b !== void 0 ? _b : controlProps['aria-invalid'] = true;
+  }
 
-    if (validationMessage) {
-      (_c = control['aria-errormessage']) !== null && _c !== void 0 ? _c : control['aria-errormessage'] = validationMessage.id;
+  const control = resolveShorthand(fieldProps.control, {
+    required: true,
+    defaultProps: {
+      ref,
+      id: baseId + '__control',
+      ...controlProps
     }
+  });
 
-    if (hint) {
-      (_d = control['aria-describedby']) !== null && _d !== void 0 ? _d : control['aria-describedby'] = hint.id;
-    }
-  } else {
-    // If the state is not an error, then the control is described by the validation message, or hint, or both
-    const describedby = validationMessage || hint;
-
-    if (describedby) {
-      (_e = control['aria-describedby']) !== null && _e !== void 0 ? _e : control['aria-describedby'] = validationMessage && hint ? `${validationMessage.id} ${hint.id}` : describedby.id;
-    }
+  if (label && labelConnection === 'htmlFor') {
+    (_c = label.htmlFor) !== null && _c !== void 0 ? _c : label.htmlFor = control.id;
   }
@@ -129,0 +126,0 @@

package.json

 {
   "name": "@fluentui/react-field",
-  "version": "9.0.0-alpha.9",
+  "version": "9.0.0-alpha.10",
   "description": "Fluent UI Field components",
@@ -35,4 +35,4 @@ "main": "lib-commonjs/index.js",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-label": "^9.0.11",
-    "@fluentui/react-theme": "^9.1.2",
+    "@fluentui/react-label": "^9.0.12",
+    "@fluentui/react-theme": "^9.1.3",
     "@fluentui/react-utilities": "^9.2.2",
@@ -39,0 +39,0 @@ "@griffel/react": "^1.4.2",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

1769

increased by1.55%

Worsened metrics

Total package byte prevSize

157468

decreased by-8.41%

Number of package files

54

decreased by-1.82%

Dependency changes

• + Added@fluentui/keyboard-keys@9.0.8(transitive)

• + Added@fluentui/react-context-selector@9.1.69(transitive)

• + Added@fluentui/react-label@9.1.78(transitive)

• + Added@fluentui/react-shared-contexts@9.21.0(transitive)

• + Added@fluentui/react-theme@9.1.22(transitive)

• + Added@fluentui/react-utilities@9.18.17(transitive)

• + Added@fluentui/tokens@1.0.0-alpha.19(transitive)

• - Removed@fluentui/keyboard-keys@9.0.7(transitive)

• - Removed@fluentui/react-context-selector@9.1.68(transitive)

• - Removed@fluentui/react-jsx-runtime@9.0.45(transitive)

• - Removed@fluentui/react-label@9.1.77(transitive)

• - Removed@fluentui/react-shared-contexts@9.20.2(transitive)

• - Removed@fluentui/react-theme@9.1.21(transitive)

• - Removed@fluentui/react-utilities@9.18.16(transitive)

• - Removed@fluentui/tokens@1.0.0-alpha.18(transitive)

• - Removedreact-is@17.0.2(transitive)

• Updated@fluentui/react-label@^9.0.12

• Updated@fluentui/react-theme@^9.1.3