chore(react-tags-preview): properly type ref in state hook

change/@fluentui-react-tags-preview-08da3434-ae29-4b7c-b48e-6fa0cf8a4637.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: properly type ref in state hook",
+  "packageName": "@fluentui/react-tags-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-tags-preview/etc/react-tags-preview.api.md

@@ -174,19 +174,19 @@ export type TagState = ComponentState<TagSlots> & Required<Pick<TagProps, 'appea
 export type TagValue = string;
 
 // @public
-export const useInteractionTag_unstable: (props: InteractionTagProps, ref: React_2.Ref<HTMLElement>) => InteractionTagState;
+export const useInteractionTag_unstable: (props: InteractionTagProps, ref: React_2.Ref<HTMLDivElement>) => InteractionTagState;
 
 // @public (undocumented)
 export function useInteractionTagContextValues_unstable(state: InteractionTagState): InteractionTagContextValues;
 
 // @public
-export const useInteractionTagPrimary_unstable: (props: InteractionTagPrimaryProps, ref: React_2.Ref<HTMLElement>) => InteractionTagPrimaryState;
+export const useInteractionTagPrimary_unstable: (props: InteractionTagPrimaryProps, ref: React_2.Ref<HTMLButtonElement>) => InteractionTagPrimaryState;
 
 // @public (undocumented)
 export const useInteractionTagPrimaryStyles_unstable: (state: InteractionTagPrimaryState) => InteractionTagPrimaryState;
 
 // @public
-export const useInteractionTagSecondary_unstable: (props: InteractionTagSecondaryProps, ref: React_2.Ref<HTMLElement>) => InteractionTagSecondaryState;
+export const useInteractionTagSecondary_unstable: (props: InteractionTagSecondaryProps, ref: React_2.Ref<HTMLButtonElement>) => InteractionTagSecondaryState;
 
 // @public (undocumented)
 export const useInteractionTagSecondaryStyles_unstable: (state: InteractionTagSecondaryState) => InteractionTagSecondaryState;
@@ -195,13 +195,13 @@ export const useInteractionTagSecondaryStyles_unstable: (state: InteractionTagSe
 export const useInteractionTagStyles_unstable: (state: InteractionTagState) => InteractionTagState;
 
 // @public
-export const useTag_unstable: (props: TagProps, ref: React_2.Ref<HTMLElement>) => TagState;
+export const useTag_unstable: (props: TagProps, ref: React_2.Ref<HTMLSpanElement | HTMLButtonElement>) => TagState;
 
 // @public (undocumented)
 export function useTagAvatarContextValues_unstable(state: UseTagAvatarContextValuesOptions): TagAvatarContextValues;
 
 // @public
-export const useTagGroup_unstable: (props: TagGroupProps, ref: React_2.Ref<HTMLElement>) => TagGroupState;
+export const useTagGroup_unstable: (props: TagGroupProps, ref: React_2.Ref<HTMLDivElement>) => TagGroupState;
 
 // @public (undocumented)
 export function useTagGroupContextValues_unstable(state: TagGroupState): TagGroupContextValues;

packages/react-components/react-tags-preview/src/components/InteractionTag/useInteractionTag.tsx

@@ -10,11 +10,11 @@ import { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';
  * before being passed to renderInteractionTag_unstable.
  *
  * @param props - props from this instance of InteractionTag
- * @param ref - reference to root HTMLElement of InteractionTag
+ * @param ref - reference to root HTMLDivElement of InteractionTag
  */
 export const useInteractionTag_unstable = (
   props: InteractionTagProps,
-  ref: React.Ref<HTMLElement>,
+  ref: React.Ref<HTMLDivElement>,
 ): InteractionTagState => {
   const { handleTagDismiss, size: contextSize } = useTagGroupContext_unstable();
 

packages/react-components/react-tags-preview/src/components/InteractionTagPrimary/useInteractionTagPrimary.ts

@@ -21,11 +21,11 @@ const avatarShapeMap = {
  * before being passed to renderInteractionTagPrimary_unstable.
  *
  * @param props - props from this instance of InteractionTagPrimary
- * @param ref - reference to root HTMLElement of InteractionTagPrimary
+ * @param ref - reference to root HTMLButtonElement of InteractionTagPrimary
  */
 export const useInteractionTagPrimary_unstable = (
   props: InteractionTagPrimaryProps,
-  ref: React.Ref<HTMLElement>,
+  ref: React.Ref<HTMLButtonElement>,
 ): InteractionTagPrimaryState => {
   const { appearance, disabled, interactionTagPrimaryId, shape, size } = useInteractionTagContext_unstable();
   const { hasSecondaryAction = false } = props;

packages/react-components/react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondary.tsx

@@ -12,11 +12,11 @@ import { useInteractionTagContext_unstable } from '../../contexts/interactionTag
  * before being passed to renderInteractionTagSecondary_unstable.
  *
  * @param props - props from this instance of InteractionTagSecondary
- * @param ref - reference to root HTMLElement of InteractionTagSecondary
+ * @param ref - reference to root HTMLButtonElement of InteractionTagSecondary
  */
 export const useInteractionTagSecondary_unstable = (
   props: InteractionTagSecondaryProps,
-  ref: React.Ref<HTMLElement>,
+  ref: React.Ref<HTMLButtonElement>,
 ): InteractionTagSecondaryState => {
   const { appearance, disabled, handleTagDismiss, interactionTagPrimaryId, shape, size, value } =
     useInteractionTagContext_unstable();

packages/react-components/react-tags-preview/src/components/Tag/useTag.tsx

@@ -23,9 +23,9 @@ const tagAvatarShapeMap = {
  * before being passed to renderTag_unstable.
  *
  * @param props - props from this instance of Tag
- * @param ref - reference to root HTMLElement of Tag
+ * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag
  */
-export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLElement>): TagState => {
+export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLSpanElement | HTMLButtonElement>): TagState => {
   const { handleTagDismiss, size: contextSize } = useTagGroupContext_unstable();
 
   const id = useId('fui-Tag', props.id);

packages/react-components/react-tags-preview/src/components/TagGroup/useTagGroup.ts

@@ -12,9 +12,9 @@ import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/us
  * before being passed to renderTagGroup_unstable.
  *
  * @param props - props from this instance of TagGroup
- * @param ref - reference to root HTMLElement of TagGroup
+ * @param ref - reference to root HTMLDivElement of TagGroup
  */
-export const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLElement>): TagGroupState => {
+export const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDivElement>): TagGroupState => {
   const { onDismiss, size = 'medium' } = props;
 
   const innerRef = React.useRef<HTMLElement>();