move useTag ref from props to param (#4051)

Author: reidbarber

packages/@react-aria/tag/src/useTag.ts

@@ -12,10 +12,10 @@
 
 import {AriaButtonProps} from '@react-types/button';
 import {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';
-import {DOMAttributes} from '@react-types/shared';
+import {DOMAttributes, FocusableElement} from '@react-types/shared';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {KeyboardEvent} from 'react';
+import {KeyboardEvent, RefObject} from 'react';
 import type {TagGroupState} from '@react-stately/tag';
 import {TagProps} from '@react-types/tag';
 import {useGridListItem} from '@react-aria/gridlist';
@@ -34,12 +34,11 @@ export interface TagAria {
  * @param props - Props to be applied to the tag.
  * @param state - State for the tag group, as returned by `useTagGroupState`.
  */
-export function useTag<T>(props: TagProps<T>, state: TagGroupState<T>): TagAria {
+export function useTag<T>(props: TagProps<T>, state: TagGroupState<T>, ref: RefObject<FocusableElement>): TagAria {
   let {
     isFocused,
     allowsRemoving,
-    item,
-    tagRowRef
+    item
   } = props;
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let removeString = stringFormatter.format('remove');
@@ -48,7 +47,7 @@ export function useTag<T>(props: TagProps<T>, state: TagGroupState<T>): TagAria
 
   let {rowProps, gridCellProps} = useGridListItem({
     node: item
-  }, state, tagRowRef);
+  }, state, ref);
 
   // We want the group to handle keyboard navigation between tags.
   delete rowProps.onKeyDownCapture;

packages/@react-spectrum/tag/src/Tag.tsx

@@ -40,15 +40,14 @@ export function Tag<T>(props: SpectrumTagProps<T>) {
   let {styleProps} = useStyleProps(otherProps);
   let {hoverProps, isHovered} = useHover({});
   let {isFocused, isFocusVisible, focusProps} = useFocusRing({within: true});
-  let tagRowRef = useRef();
+  let ref = useRef();
   let {clearButtonProps, labelProps, tagProps, tagRowProps} = useTag({
     ...props,
     isFocused,
     allowsRemoving,
     item,
-    onRemove,
-    tagRowRef
-  }, state);
+    onRemove
+  }, state, ref);
 
   return (
     <div
@@ -64,7 +63,7 @@ export function Tag<T>(props: SpectrumTagProps<T>) {
         },
           styleProps.className
         )}
-      ref={tagRowRef}>
+      ref={ref}>
       <div
         className={classNames(styles, 'spectrum-Tag-cell')}
         {...tagProps}>

packages/@react-types/tag/src/index.d.ts

@@ -11,7 +11,7 @@
  */
 
 import {CollectionBase, ItemProps, Node} from '@react-types/shared';
-import {Key, RefObject} from 'react';
+import {Key} from 'react';
 
 export interface TagGroupProps<T> extends Omit<CollectionBase<T>, 'disabledKeys'> {
   /** Whether the TagGroup allows removal of tags. */
@@ -26,6 +26,5 @@ export interface TagProps<T> extends ItemProps<any> {
   isFocused: boolean,
   allowsRemoving?: boolean,
   item: Node<T>,
-  onRemove?: (key: Key) => void,
-  tagRowRef: RefObject<HTMLElement>
+  onRemove?: (key: Key) => void
 }