Make types compatible with both HTML and SVG elements (#3321)

Author: devongovett

packages/@react-aria/accordion/src/useAccordion.ts

@@ -11,16 +11,16 @@
  */
 
 import {AriaAccordionProps} from '@react-types/accordion';
-import {ButtonHTMLAttributes, HTMLAttributes, RefObject} from 'react';
+import {ButtonHTMLAttributes, RefObject} from 'react';
+import {DOMAttributes, Node} from '@react-types/shared';
 import {mergeProps, useId} from '@react-aria/utils';
-import {Node} from '@react-types/shared';
 import {TreeState} from '@react-stately/tree';
 import {useButton} from '@react-aria/button';
 import {useSelectableItem, useSelectableList} from '@react-aria/selection';
 
 interface AccordionAria {
   /** Props for the accordion container element. */
-  accordionProps: HTMLAttributes<HTMLElement>
+  accordionProps: DOMAttributes
 }
 interface AccordionItemAriaProps<T> {
   item: Node<T>
@@ -30,7 +30,7 @@ interface AccordionItemAria {
   /** Props for the accordion item button. */
   buttonProps: ButtonHTMLAttributes<HTMLElement>,
   /** Props for the accordion item content element. */
-  regionProps: HTMLAttributes<HTMLElement>
+  regionProps: DOMAttributes
 }
 
 export function useAccordionItem<T>(props: AccordionItemAriaProps<T>, state: TreeState<T>, ref: RefObject<HTMLButtonElement>): AccordionItemAria {

packages/@react-aria/actiongroup/src/useActionGroup.ts

@@ -12,10 +12,11 @@
 
 import {AriaActionGroupProps} from '@react-types/actiongroup';
 import {createFocusManager} from '@react-aria/focus';
+import {DOMAttributes, FocusableElement} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
-import {HTMLAttributes, RefObject} from 'react';
 import {ListState} from '@react-stately/list';
 import {Orientation} from '@react-types/shared';
+import {RefObject} from 'react';
 import {useLocale} from '@react-aria/i18n';
 
 const BUTTON_GROUP_ROLES = {
@@ -25,10 +26,10 @@ const BUTTON_GROUP_ROLES = {
 };
 
 export interface ActionGroupAria {
-  actionGroupProps: HTMLAttributes<HTMLElement>
+  actionGroupProps: DOMAttributes
 }
 
-export function useActionGroup<T>(props: AriaActionGroupProps<T>, state: ListState<T>, ref: RefObject<HTMLElement>): ActionGroupAria {
+export function useActionGroup<T>(props: AriaActionGroupProps<T>, state: ListState<T>, ref: RefObject<FocusableElement>): ActionGroupAria {
   let {
     isDisabled,
     orientation = 'horizontal' as Orientation

packages/@react-aria/actiongroup/src/useActionGroupItem.ts

@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {HTMLAttributes, Key, RefObject, useEffect, useRef} from 'react';
+import {DOMAttributes, FocusableElement} from '@react-types/shared';
+import {Key, RefObject, useEffect, useRef} from 'react';
 import {ListState} from '@react-stately/list';
 import {mergeProps} from '@react-aria/utils';
 import {PressProps} from '@react-aria/interactions';
@@ -20,7 +21,7 @@ interface ActionGroupItemProps {
 }
 
 interface ActionGroupItemAria {
-  buttonProps: HTMLAttributes<HTMLElement> & PressProps
+  buttonProps: DOMAttributes & PressProps
 }
 
 const BUTTON_ROLES = {
@@ -30,7 +31,7 @@ const BUTTON_ROLES = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function useActionGroupItem<T>(props: ActionGroupItemProps, state: ListState<T>, ref?: RefObject<HTMLElement>): ActionGroupItemAria {
+export function useActionGroupItem<T>(props: ActionGroupItemProps, state: ListState<T>, ref?: RefObject<FocusableElement>): ActionGroupItemAria {
   let selectionMode = state.selectionManager.selectionMode;
   let buttonProps = {
     role: BUTTON_ROLES[selectionMode]

packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts

@@ -13,7 +13,8 @@
 import {AriaButtonProps} from '@react-types/button';
 import {AriaListBoxOptions} from '@react-aria/listbox';
 import {ComboBoxState} from '@react-stately/combobox';
-import {HTMLAttributes, InputHTMLAttributes, RefObject} from 'react';
+import {DOMAttributes} from '@react-types/shared';
+import {InputHTMLAttributes, RefObject} from 'react';
 import {KeyboardDelegate} from '@react-types/shared';
 import {mergeProps} from '@react-aria/utils';
 import {SearchAutocompleteProps} from '@react-types/autocomplete';
@@ -33,7 +34,7 @@ interface AriaSearchAutocompleteProps<T> extends SearchAutocompleteProps<T> {
 
 interface SearchAutocompleteAria<T> {
   /** Props for the label element. */
-  labelProps: HTMLAttributes<HTMLElement>,
+  labelProps: DOMAttributes,
   /** Props for the search input element. */
   inputProps: InputHTMLAttributes<HTMLInputElement>,
   /** Props for the list box, to be passed to [useListBox](useListBox.html). */

packages/@react-aria/breadcrumbs/src/useBreadcrumbItem.ts

@@ -11,19 +11,20 @@
  */
 
 import {AriaBreadcrumbItemProps} from '@react-types/breadcrumbs';
-import {HTMLAttributes, RefObject} from 'react';
+import {DOMAttributes, FocusableElement} from '@react-types/shared';
+import {RefObject} from 'react';
 import {useLink} from '@react-aria/link';
 
 interface BreadcrumbItemAria {
   /** Props for the breadcrumb item link element. */
-  itemProps: HTMLAttributes<HTMLElement>
+  itemProps: DOMAttributes
 }
 
 /**
  * Provides the behavior and accessibility implementation for an in a breadcrumbs component.
  * See `useBreadcrumbs` for details about breadcrumbs.
  */
-export function useBreadcrumbItem(props: AriaBreadcrumbItemProps, ref: RefObject<HTMLElement>): BreadcrumbItemAria {
+export function useBreadcrumbItem(props: AriaBreadcrumbItemProps, ref: RefObject<FocusableElement>): BreadcrumbItemAria {
   let {
     isCurrent,
     isDisabled,
@@ -34,7 +35,7 @@ export function useBreadcrumbItem(props: AriaBreadcrumbItemProps, ref: RefObject
 
   let {linkProps} = useLink({isDisabled: isDisabled || isCurrent, elementType, ...otherProps}, ref);
   let isHeading = /^h[1-6]$/.test(elementType);
-  let itemProps: HTMLAttributes<HTMLElement> = {};
+  let itemProps: DOMAttributes = {};
 
   if (!isHeading) {
     itemProps = linkProps;

packages/@react-aria/breadcrumbs/src/useBreadcrumbs.ts

@@ -11,15 +11,15 @@
  */
 
 import {AriaBreadcrumbsProps} from '@react-types/breadcrumbs';
+import {DOMAttributes} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
-import {HTMLAttributes} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {useMessageFormatter} from '@react-aria/i18n';
 
 interface BreadcrumbsAria {
   /** Props for the breadcrumbs navigation element. */
-  navProps: HTMLAttributes<HTMLElement>
+  navProps: DOMAttributes
 }
 
 /**

packages/@react-aria/button/package.json

@@ -22,7 +22,8 @@
     "@react-aria/interactions": "^3.9.1",
     "@react-aria/utils": "^3.13.1",
     "@react-stately/toggle": "^3.3.1",
-    "@react-types/button": "^3.5.1"
+    "@react-types/button": "^3.5.1",
+    "@react-types/shared": "^3.13.1"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"

packages/@react-aria/button/src/useButton.ts

@@ -19,6 +19,7 @@ import {
   RefObject
 } from 'react';
 import {AriaButtonProps} from '@react-types/button';
+import {DOMAttributes} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {mergeProps} from '@react-aria/utils';
 import {useFocusable} from '@react-aria/focus';
@@ -38,7 +39,7 @@ export function useButton(props: AriaButtonProps<'a'>, ref: RefObject<HTMLAnchor
 export function useButton(props: AriaButtonProps<'div'>, ref: RefObject<HTMLDivElement>): ButtonAria<HTMLAttributes<HTMLDivElement>>;
 export function useButton(props: AriaButtonProps<'input'>, ref: RefObject<HTMLInputElement>): ButtonAria<InputHTMLAttributes<HTMLInputElement>>;
 export function useButton(props: AriaButtonProps<'span'>, ref: RefObject<HTMLSpanElement>): ButtonAria<HTMLAttributes<HTMLSpanElement>>;
-export function useButton(props: AriaButtonProps<ElementType>, ref: RefObject<HTMLElement>): ButtonAria<HTMLAttributes<HTMLElement>>;
+export function useButton(props: AriaButtonProps<ElementType>, ref: RefObject<Element>): ButtonAria<DOMAttributes>;
 /**
  * Provides the behavior and accessibility implementation for a button component. Handles mouse, keyboard, and touch interactions,
  * focus behavior, and ARIA props for both native button elements and custom element types.

packages/@react-aria/button/src/useToggleButton.ts

@@ -21,6 +21,7 @@ import {
 import {AriaToggleButtonProps} from '@react-types/button';
 import {ButtonAria, useButton} from './useButton';
 import {chain} from '@react-aria/utils';
+import {DOMAttributes} from '@react-types/shared';
 import {mergeProps} from '@react-aria/utils';
 import {ToggleState} from '@react-stately/toggle';
 
@@ -29,7 +30,7 @@ export function useToggleButton(props: AriaToggleButtonProps<'button'>, state: T
 export function useToggleButton(props: AriaToggleButtonProps<'div'>, state: ToggleState, ref: RefObject<HTMLDivElement>): ButtonAria<HTMLAttributes<HTMLDivElement>>;
 export function useToggleButton(props: AriaToggleButtonProps<'input'>, state: ToggleState, ref: RefObject<HTMLInputElement>): ButtonAria<InputHTMLAttributes<HTMLInputElement>>;
 export function useToggleButton(props: AriaToggleButtonProps<'span'>, state: ToggleState, ref: RefObject<HTMLSpanElement>): ButtonAria<HTMLAttributes<HTMLSpanElement>>;
-export function useToggleButton(props: AriaToggleButtonProps<ElementType>, state: ToggleState, ref: RefObject<HTMLElement>): ButtonAria<HTMLAttributes<HTMLElement>>;
+export function useToggleButton(props: AriaToggleButtonProps<ElementType>, state: ToggleState, ref: RefObject<Element>): ButtonAria<DOMAttributes>;
 /**
  * Provides the behavior and accessibility implementation for a toggle button component.
  * ToggleButtons allow users to toggle a selection on or off, for example switching between two states or modes.

packages/@react-aria/calendar/src/useCalendarBase.ts

@@ -14,23 +14,24 @@ import {announce} from '@react-aria/live-announcer';
 import {AriaButtonProps} from '@react-types/button';
 import {CalendarPropsBase} from '@react-types/calendar';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
+import {DOMAttributes} from '@react-types/shared';
 import {DOMProps} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useLabels, useSlotId, useUpdateEffect} from '@react-aria/utils';
 import {hookData, useSelectedDateDescription, useVisibleRangeDescription} from './utils';
-import {HTMLAttributes, useRef} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {useMessageFormatter} from '@react-aria/i18n';
+import {useRef} from 'react';
 
 export interface CalendarAria {
   /** Props for the calendar grouping element. */
-  calendarProps: HTMLAttributes<HTMLElement>,
+  calendarProps: DOMAttributes,
   /** Props for the next button. */
   nextButtonProps: AriaButtonProps,
   /** Props for the previous button. */
   prevButtonProps: AriaButtonProps,
   /** Props for the error message element, if any. */
-  errorMessageProps: HTMLAttributes<HTMLElement>,
+  errorMessageProps: DOMAttributes,
   /** A description of the visible date range, for use in the calendar title. */
   title: string
 }