react-aria: mergeARIADisabled (#19765)

* Generalize mergeARIADisabled

* Change files

* exports mergeARIADisabled

* Updates API

* Creates tests

change/@fluentui-react-aria-d39f839a-af89-4925-a42d-391800f58930.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Generalize mergeARIADisabled",
+  "packageName": "@fluentui/react-aria",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-aria/etc/react-aria.api.md

@@ -5,12 +5,21 @@
 ```ts
 
 import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import { ObjectShorthandProps } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
 import type { ResolveShorthandOptions } from '@fluentui/react-utilities';
 import type { ShorthandProps } from '@fluentui/react-utilities';
 
 // @public (undocumented)
 export type ARIAButtonShorthandProps = IntrinsicShorthandProps<'button', 'div' | 'span' | 'a'>;
 
+// @public
+export function mergeARIADisabled(shorthand: ObjectShorthandProps<{
+    disabled?: boolean;
+    'aria-disabled'?: string | boolean;
+    children?: React_2.ReactNode;
+}>): boolean;
+
 // @public
 export function useARIAButton<Required extends boolean = false>(value: ShorthandProps<ARIAButtonShorthandProps>, options?: ResolveShorthandOptions<ARIAButtonShorthandProps, Required>): Required extends false ? ARIAButtonShorthandProps | undefined : ARIAButtonShorthandProps;
 

packages/react-aria/src/hooks/useARIAButton.ts

@@ -1,13 +1,7 @@
 import { Enter, Space } from '@fluentui/keyboard-keys';
-import { resolveShorthand, useEventCallback } from '@fluentui/react-utilities';
+import { ObjectShorthandProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';
 import type { IntrinsicShorthandProps, ResolveShorthandOptions, ShorthandProps } from '@fluentui/react-utilities';
-
-function mergeARIADisabled(disabled?: boolean | 'false' | 'true'): boolean {
-  if (typeof disabled === 'string') {
-    return disabled === 'false' ? false : true;
-  }
-  return disabled ?? false;
-}
+import { mergeARIADisabled } from '../utils/index';
 
 export type ARIAButtonShorthandProps = IntrinsicShorthandProps<'button', 'div' | 'span' | 'a'>;
 
@@ -22,12 +16,9 @@ export function useARIAButton<Required extends boolean = false>(
 ): Required extends false ? ARIAButtonShorthandProps | undefined : ARIAButtonShorthandProps {
   const shorthand = resolveShorthand(value, options);
 
-  const { onClick, onKeyDown, onKeyUp, ['aria-disabled']: ariaDisabled } = (shorthand ||
-    {}) as ARIAButtonShorthandProps;
+  const { onClick, onKeyDown, onKeyUp } = (shorthand || {}) as ARIAButtonShorthandProps;
 
-  const disabled = mergeARIADisabled(
-    (shorthand && shorthand.as === 'button' ? shorthand.disabled : undefined) ?? ariaDisabled,
-  );
+  const disabled = mergeARIADisabled(shorthand as ObjectShorthandProps<ARIAButtonShorthandProps>);
 
   const onClickHandler: ARIAButtonShorthandProps['onClick'] = useEventCallback(ev => {
     if (disabled) {

packages/react-aria/src/index.ts

@@ -1 +1,2 @@
 export * from './hooks/index';
+export * from './utils/index';

packages/react-aria/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './mergeARIADisabled';

packages/react-aria/src/utils/mergeARIADisabled.test.ts

@@ -0,0 +1,9 @@
+import { mergeARIADisabled } from './mergeARIADisabled';
+
+describe('mergeARIADisabled', () => {
+  it('should merge disabled and aria-disabled into one boolean, priority is in disabled', () => {
+    expect(mergeARIADisabled({ disabled: false, 'aria-disabled': false })).toBe(false);
+    expect(mergeARIADisabled({ disabled: false, 'aria-disabled': true })).toBe(false);
+    expect(mergeARIADisabled({})).toBe(false);
+  });
+});

packages/react-aria/src/utils/mergeARIADisabled.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ObjectShorthandProps } from '@fluentui/react-utilities';
+
+/**
+ * Merges disabled declaration with `aria-disabled`
+ */
+export function mergeARIADisabled(
+  shorthand: ObjectShorthandProps<{
+    disabled?: boolean;
+    'aria-disabled'?: string | boolean;
+    children?: React.ReactNode;
+  }>,
+) {
+  const disabled = shorthand.disabled ?? shorthand['aria-disabled'] ?? undefined;
+  if (typeof disabled === 'string') {
+    return disabled === 'false' ? false : true;
+  }
+  return disabled ?? false;
+}