@fluentui/react-aria - npm Package Compare versions

Comparing version 9.0.0-alpha.40 to 9.0.0-alpha.41

CHANGELOG.json

@@ -5,3 +5,18 @@ {
     {
-      "date": "Wed, 29 Sep 2021 08:05:12 GMT",
+      "date": "Fri, 01 Oct 2021 12:30:28 GMT",
+      "tag": "@fluentui/react-aria_v9.0.0-alpha.41",
+      "version": "9.0.0-alpha.41",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-aria",
+            "comment": "Removes disabled attribute when not required",
+            "commit": "c5f91bfccb65073eb01e4b4aa0b720bb6bf06b5d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 29 Sep 2021 08:06:11 GMT",
       "tag": "@fluentui/react-aria_v9.0.0-alpha.40",
@@ -8,0 +23,0 @@ "version": "9.0.0-alpha.40",

CHANGELOG.md

 # Change Log - @fluentui/react-aria
 
-This log was last generated on Wed, 29 Sep 2021 08:05:12 GMT and should not be manually modified.
+This log was last generated on Fri, 01 Oct 2021 12:30:28 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.41](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.0.0-alpha.41)
+
+Fri, 01 Oct 2021 12:30:28 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.0.0-alpha.40..@fluentui/react-aria_v9.0.0-alpha.41)
+
+### Changes
+
+- Removes disabled attribute when not required ([PR #18814](https://github.com/microsoft/fluentui/pull/18814) by [e-mail])
+
 ## [9.0.0-alpha.40](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.0.0-alpha.40)
 
-Wed, 29 Sep 2021 08:05:12 GMT 
+Wed, 29 Sep 2021 08:06:11 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.0.0-alpha.39..@fluentui/react-aria_v9.0.0-alpha.40)
@@ -11,0 +20,0 @@

dist/react-aria.d.ts

@@ -7,3 +7,6 @@ import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
 
-export declare type ARIAButtonShorthandProps = IntrinsicShorthandProps<'button', 'div' | 'span' | 'a'>;
+export declare type ARIAButtonShorthandProps = IntrinsicShorthandProps<'button', 'a'> & {
+    disabled?: boolean;
+    disabledFocusable?: boolean;
+};
 
@@ -14,14 +17,14 @@ /**
 export declare function mergeARIADisabled(shorthand: ObjectShorthandProps<{
-    disabled?: boolean;
     'aria-disabled'?: string | boolean;
     children?: React_2.ReactNode;
+    disabled?: boolean;
 }>): boolean;
 
 /**
- * button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec
+ * Button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec
  * for multiple scenarios of shorthand properties. Ensuring 1st rule of ARIA for cases
- * where no attribute addition is required
+ * where no attribute addition is required.
  */
-export declare function useARIAButton<Required extends boolean = false>(value: ShorthandProps<ARIAButtonShorthandProps>, options?: ResolveShorthandOptions<ARIAButtonShorthandProps, Required>): Required extends false ? ARIAButtonShorthandProps | undefined : ARIAButtonShorthandProps;
+export declare function useARIAButton<Required extends boolean = false>(shorthand: ShorthandProps<ARIAButtonShorthandProps>, options?: ResolveShorthandOptions<ARIAButtonShorthandProps, Required>): Required extends false ? ARIAButtonShorthandProps | undefined : ARIAButtonShorthandProps;
 
 export { }

lib-commonjs/hooks/useARIAButton.d.ts

 import type { IntrinsicShorthandProps, ResolveShorthandOptions, ShorthandProps } from '@fluentui/react-utilities';
-export declare type ARIAButtonShorthandProps = IntrinsicShorthandProps<'button', 'div' | 'span' | 'a'>;
+export declare type ARIAButtonShorthandProps = IntrinsicShorthandProps<'button', 'a'> & {
+    disabled?: boolean;
+    disabledFocusable?: boolean;
+};
 /**
- * button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec
+ * Button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec
  * for multiple scenarios of shorthand properties. Ensuring 1st rule of ARIA for cases
- * where no attribute addition is required
+ * where no attribute addition is required.
  */
-export declare function useARIAButton<Required extends boolean = false>(value: ShorthandProps<ARIAButtonShorthandProps>, options?: ResolveShorthandOptions<ARIAButtonShorthandProps, Required>): Required extends false ? ARIAButtonShorthandProps | undefined : ARIAButtonShorthandProps;
+export declare function useARIAButton<Required extends boolean = false>(shorthand: ShorthandProps<ARIAButtonShorthandProps>, options?: ResolveShorthandOptions<ARIAButtonShorthandProps, Required>): Required extends false ? ARIAButtonShorthandProps | undefined : ARIAButtonShorthandProps;

lib-commonjs/hooks/useARIAButton.js

@@ -11,34 +11,32 @@ "use strict";
 var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-var index_1 = /*#__PURE__*/require("../utils/index");
 /**
- * button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec
+ * Button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec
  * for multiple scenarios of shorthand properties. Ensuring 1st rule of ARIA for cases
- * where no attribute addition is required
+ * where no attribute addition is required.
  */
 
 
-function useARIAButton(value, options) {
-  var shorthand = react_utilities_1.resolveShorthand(value, options);
+function useARIAButton(shorthand, options) {
+  var _a;
 
-  var _a = shorthand || {},
-      onClick = _a.onClick,
-      onKeyDown = _a.onKeyDown,
-      onKeyUp = _a.onKeyUp;
+  var shorthandProps = react_utilities_1.resolveShorthand(shorthand, options);
 
-  var disabled = index_1.mergeARIADisabled(shorthand);
+  var _b = shorthandProps || {},
+      disabled = _b.disabled,
+      disabledFocusable = _b.disabledFocusable,
+      onClick = _b.onClick,
+      onKeyDown = _b.onKeyDown,
+      onKeyUp = _b.onKeyUp,
+      tabIndex = _b.tabIndex;
+
   var onClickHandler = react_utilities_1.useEventCallback(function (ev) {
-    if (disabled) {
+    if (disabled || disabledFocusable) {
       ev.preventDefault();
       ev.stopPropagation();
     } else {
-      if (typeof onClick === 'function') {
-        onClick(ev);
-      }
+      onClick === null || onClick === void 0 ? void 0 : onClick(ev);
     }
   });
   var onKeyDownHandler = react_utilities_1.useEventCallback(function (ev) {
-    if (typeof onKeyDown === 'function') {
-      onKeyDown(ev);
-    }
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(ev);
 
@@ -49,3 +47,5 @@ if (ev.isDefaultPrevented()) {
 
-    if (disabled && (ev.key === keyboard_keys_1.Enter || ev.key === keyboard_keys_1.Space)) {
+    var key = ev.key;
+
+    if ((disabled || disabledFocusable) && (key === keyboard_keys_1.Enter || key === keyboard_keys_1.Space)) {
       ev.preventDefault();
@@ -56,7 +56,7 @@ ev.stopPropagation();
 
-    if (ev.key === keyboard_keys_1.Space) {
+    if (key === keyboard_keys_1.Space) {
       ev.preventDefault();
       return;
     } // If enter is pressed, activate the button
-    else if (ev.key === keyboard_keys_1.Enter) {
+    else if (key === keyboard_keys_1.Enter) {
       ev.preventDefault();
@@ -67,5 +67,3 @@ ev.currentTarget.click();
   var onKeyupHandler = react_utilities_1.useEventCallback(function (ev) {
-    if (typeof onKeyUp === 'function') {
-      onKeyUp(ev);
-    }
+    onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(ev);
 
@@ -76,3 +74,5 @@ if (ev.isDefaultPrevented()) {
 
-    if (disabled && (ev.key === keyboard_keys_1.Enter || ev.key === keyboard_keys_1.Space)) {
+    var key = ev.key;
+
+    if ((disabled || disabledFocusable) && (key === keyboard_keys_1.Enter || key === keyboard_keys_1.Space)) {
       ev.preventDefault();
@@ -83,3 +83,3 @@ ev.stopPropagation();
 
-    if (ev.key === keyboard_keys_1.Space) {
+    if (key === keyboard_keys_1.Space) {
       ev.preventDefault();
@@ -90,27 +90,24 @@ ev.currentTarget.click();
 
-  if (shorthand) {
-    if (shorthand.as === 'button' || shorthand.as === undefined) {
-      return shorthand; // there's nothing to be done if as prop === 'button' or undefined
-    }
+  if (shorthandProps) {
+    // If a <button> tag is to be rendered we just need to set disabled and aria-disabled correctly
+    if (shorthandProps.as === 'button' || shorthandProps.as === undefined) {
+      shorthandProps.disabled = disabled && !disabledFocusable;
+      shorthandProps['aria-disabled'] = disabledFocusable;
+    } // If an <a> tag is to be rendered we have to remove disabled and set aria-disabled, role and tabIndex as well as
+    // some event handlers.
+    else {
+      delete shorthandProps.disabled;
+      shorthandProps['aria-disabled'] = disabled || disabledFocusable;
+      shorthandProps.onClick = onClickHandler;
+      shorthandProps.onKeyDown = onKeyDownHandler;
+      shorthandProps.onKeyUp = onKeyupHandler;
+      shorthandProps.role = (_a = shorthandProps.role) !== null && _a !== void 0 ? _a : 'button';
+      shorthandProps.tabIndex = disabled && !disabledFocusable ? undefined : tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0;
+    } // Remove non-DOM disabledFocusable prop
 
-    if (!shorthand.hasOwnProperty('role')) {
-      shorthand.role = 'button';
-    }
 
-    if (!shorthand.hasOwnProperty('aria-disabled')) {
-      shorthand['aria-disabled'] = disabled;
-    }
-
-    shorthand.onClick = onClickHandler;
-    shorthand.onKeyDown = onKeyDownHandler;
-    shorthand.onKeyUp = onKeyupHandler; // Add keydown event handler for all other non-anchor elements.
-
-    if (shorthand.as !== 'a') {
-      if (!shorthand.hasOwnProperty('tabIndex')) {
-        shorthand.tabIndex = disabled ? undefined : 0;
-      }
-    }
+    delete shorthandProps.disabledFocusable;
   }
 
-  return shorthand;
+  return shorthandProps;
 }
@@ -117,0 +114,0 @@

lib-commonjs/utils/mergeARIADisabled.d.ts

@@ -7,5 +7,5 @@ import * as React from 'react';
 export declare function mergeARIADisabled(shorthand: ObjectShorthandProps<{
-    disabled?: boolean;
     'aria-disabled'?: string | boolean;
     children?: React.ReactNode;
+    disabled?: boolean;
 }>): boolean;

lib-commonjs/utils/mergeARIADisabled.js

@@ -12,5 +12,5 @@ "use strict";
 function mergeARIADisabled(shorthand) {
-  var _a, _b;
+  var _a;
 
-  var disabled = (_b = (_a = shorthand.disabled) !== null && _a !== void 0 ? _a : shorthand['aria-disabled']) !== null && _b !== void 0 ? _b : undefined;
+  var disabled = (_a = shorthand.disabled) !== null && _a !== void 0 ? _a : shorthand['aria-disabled'];
 
@@ -17,0 +17,0 @@ if (typeof disabled === 'string') {

lib/hooks/useARIAButton.d.ts

 import type { IntrinsicShorthandProps, ResolveShorthandOptions, ShorthandProps } from '@fluentui/react-utilities';
-export declare type ARIAButtonShorthandProps = IntrinsicShorthandProps<'button', 'div' | 'span' | 'a'>;
+export declare type ARIAButtonShorthandProps = IntrinsicShorthandProps<'button', 'a'> & {
+    disabled?: boolean;
+    disabledFocusable?: boolean;
+};
 /**
- * button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec
+ * Button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec
  * for multiple scenarios of shorthand properties. Ensuring 1st rule of ARIA for cases
- * where no attribute addition is required
+ * where no attribute addition is required.
  */
-export declare function useARIAButton<Required extends boolean = false>(value: ShorthandProps<ARIAButtonShorthandProps>, options?: ResolveShorthandOptions<ARIAButtonShorthandProps, Required>): Required extends false ? ARIAButtonShorthandProps | undefined : ARIAButtonShorthandProps;
+export declare function useARIAButton<Required extends boolean = false>(shorthand: ShorthandProps<ARIAButtonShorthandProps>, options?: ResolveShorthandOptions<ARIAButtonShorthandProps, Required>): Required extends false ? ARIAButtonShorthandProps | undefined : ARIAButtonShorthandProps;

lib/hooks/useARIAButton.js

 import { Enter, Space } from '@fluentui/keyboard-keys';
 import { resolveShorthand, useEventCallback } from '@fluentui/react-utilities';
-import { mergeARIADisabled } from '../utils/index';
 /**
- * button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec
+ * Button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec
  * for multiple scenarios of shorthand properties. Ensuring 1st rule of ARIA for cases
- * where no attribute addition is required
+ * where no attribute addition is required.
  */
 
-export function useARIAButton(value, options) {
-  var shorthand = resolveShorthand(value, options);
+export function useARIAButton(shorthand, options) {
+  var _a;
 
-  var _a = shorthand || {},
-      onClick = _a.onClick,
-      onKeyDown = _a.onKeyDown,
-      onKeyUp = _a.onKeyUp;
+  var shorthandProps = resolveShorthand(shorthand, options);
 
-  var disabled = mergeARIADisabled(shorthand);
+  var _b = shorthandProps || {},
+      disabled = _b.disabled,
+      disabledFocusable = _b.disabledFocusable,
+      onClick = _b.onClick,
+      onKeyDown = _b.onKeyDown,
+      onKeyUp = _b.onKeyUp,
+      tabIndex = _b.tabIndex;
+
   var onClickHandler = useEventCallback(function (ev) {
-    if (disabled) {
+    if (disabled || disabledFocusable) {
       ev.preventDefault();
       ev.stopPropagation();
     } else {
-      if (typeof onClick === 'function') {
-        onClick(ev);
-      }
+      onClick === null || onClick === void 0 ? void 0 : onClick(ev);
     }
   });
   var onKeyDownHandler = useEventCallback(function (ev) {
-    if (typeof onKeyDown === 'function') {
-      onKeyDown(ev);
-    }
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(ev);
 
@@ -38,3 +37,5 @@ if (ev.isDefaultPrevented()) {
 
-    if (disabled && (ev.key === Enter || ev.key === Space)) {
+    var key = ev.key;
+
+    if ((disabled || disabledFocusable) && (key === Enter || key === Space)) {
       ev.preventDefault();
@@ -45,7 +46,7 @@ ev.stopPropagation();
 
-    if (ev.key === Space) {
+    if (key === Space) {
       ev.preventDefault();
       return;
     } // If enter is pressed, activate the button
-    else if (ev.key === Enter) {
+    else if (key === Enter) {
       ev.preventDefault();
@@ -56,5 +57,3 @@ ev.currentTarget.click();
   var onKeyupHandler = useEventCallback(function (ev) {
-    if (typeof onKeyUp === 'function') {
-      onKeyUp(ev);
-    }
+    onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(ev);
 
@@ -65,3 +64,5 @@ if (ev.isDefaultPrevented()) {
 
-    if (disabled && (ev.key === Enter || ev.key === Space)) {
+    var key = ev.key;
+
+    if ((disabled || disabledFocusable) && (key === Enter || key === Space)) {
       ev.preventDefault();
@@ -72,3 +73,3 @@ ev.stopPropagation();
 
-    if (ev.key === Space) {
+    if (key === Space) {
       ev.preventDefault();
@@ -79,28 +80,25 @@ ev.currentTarget.click();
 
-  if (shorthand) {
-    if (shorthand.as === 'button' || shorthand.as === undefined) {
-      return shorthand; // there's nothing to be done if as prop === 'button' or undefined
-    }
+  if (shorthandProps) {
+    // If a <button> tag is to be rendered we just need to set disabled and aria-disabled correctly
+    if (shorthandProps.as === 'button' || shorthandProps.as === undefined) {
+      shorthandProps.disabled = disabled && !disabledFocusable;
+      shorthandProps['aria-disabled'] = disabledFocusable;
+    } // If an <a> tag is to be rendered we have to remove disabled and set aria-disabled, role and tabIndex as well as
+    // some event handlers.
+    else {
+      delete shorthandProps.disabled;
+      shorthandProps['aria-disabled'] = disabled || disabledFocusable;
+      shorthandProps.onClick = onClickHandler;
+      shorthandProps.onKeyDown = onKeyDownHandler;
+      shorthandProps.onKeyUp = onKeyupHandler;
+      shorthandProps.role = (_a = shorthandProps.role) !== null && _a !== void 0 ? _a : 'button';
+      shorthandProps.tabIndex = disabled && !disabledFocusable ? undefined : tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0;
+    } // Remove non-DOM disabledFocusable prop
 
-    if (!shorthand.hasOwnProperty('role')) {
-      shorthand.role = 'button';
-    }
 
-    if (!shorthand.hasOwnProperty('aria-disabled')) {
-      shorthand['aria-disabled'] = disabled;
-    }
-
-    shorthand.onClick = onClickHandler;
-    shorthand.onKeyDown = onKeyDownHandler;
-    shorthand.onKeyUp = onKeyupHandler; // Add keydown event handler for all other non-anchor elements.
-
-    if (shorthand.as !== 'a') {
-      if (!shorthand.hasOwnProperty('tabIndex')) {
-        shorthand.tabIndex = disabled ? undefined : 0;
-      }
-    }
+    delete shorthandProps.disabledFocusable;
   }
 
-  return shorthand;
+  return shorthandProps;
 }
 //# sourceMappingURL=useARIAButton.js.map

lib/utils/mergeARIADisabled.d.ts

@@ -7,5 +7,5 @@ import * as React from 'react';
 export declare function mergeARIADisabled(shorthand: ObjectShorthandProps<{
-    disabled?: boolean;
     'aria-disabled'?: string | boolean;
     children?: React.ReactNode;
+    disabled?: boolean;
 }>): boolean;

lib/utils/mergeARIADisabled.js

@@ -5,5 +5,5 @@ /**
 export function mergeARIADisabled(shorthand) {
-  var _a, _b;
+  var _a;
 
-  var disabled = (_b = (_a = shorthand.disabled) !== null && _a !== void 0 ? _a : shorthand['aria-disabled']) !== null && _b !== void 0 ? _b : undefined;
+  var disabled = (_a = shorthand.disabled) !== null && _a !== void 0 ? _a : shorthand['aria-disabled'];
 
@@ -10,0 +10,0 @@ if (typeof disabled === 'string') {

package.json

 {
   "name": "@fluentui/react-aria",
-  "version": "9.0.0-alpha.40",
+  "version": "9.0.0-alpha.41",
   "description": "React helper to ensure ARIA",
@@ -5,0 +5,0 @@ "main": "lib-commonjs/index.js",

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

Total package byte prevSize

77201

increased by2.95%

Lines of code

1227

increased by1.49%

No dependency changes