fixup! fix(react-headless-components-preview): address TagPicker positioning review

Author: mainframev

packages/react-components/react-headless-components-preview/library/etc/tag-picker.api.md

@@ -18,10 +18,13 @@ import type { OptionState as OptionState_2 } from '@fluentui/react-combobox';
 import { PositioningShorthand } from '@fluentui/react-positioning';
 import type * as React_2 from 'react';
 import { renderTagPicker_unstable as renderTagPicker } from '@fluentui/react-tag-picker';
+import { renderTagPickerButton_unstable as renderTagPickerButton } from '@fluentui/react-tag-picker';
+import { renderTagPickerControl_unstable as renderTagPickerControl } from '@fluentui/react-tag-picker';
+import { renderTagPickerGroup_unstable as renderTagPickerGroup } from '@fluentui/react-tag-picker';
+import { renderTagPickerInput_unstable as renderTagPickerInput } from '@fluentui/react-tag-picker';
 import { renderTagPickerList_unstable as renderTagPickerList } from '@fluentui/react-tag-picker';
+import { renderTagPickerOption_unstable as renderTagPickerOption } from '@fluentui/react-tag-picker';
 import type { Slot } from '@fluentui/react-utilities';
-import type { TagGroupBaseState } from '@fluentui/react-tags';
-import type { TagGroupContextValues } from '@fluentui/react-tags';
 import type { TagPickerBaseProps } from '@fluentui/react-tag-picker';
 import type { TagPickerButtonBaseState } from '@fluentui/react-tag-picker';
 import { TagPickerButtonBaseProps as TagPickerButtonProps } from '@fluentui/react-tag-picker';
@@ -32,6 +35,7 @@ import type { TagPickerControlBaseState } from '@fluentui/react-tag-picker';
 import { TagPickerControlInternalSlots } from '@fluentui/react-tag-picker';
 import { TagPickerControlProps } from '@fluentui/react-tag-picker';
 import { TagPickerControlSlots } from '@fluentui/react-tag-picker';
+import type { TagPickerGroupBaseState } from '@fluentui/react-tag-picker';
 import type { TagPickerGroupSlots } from '@fluentui/react-tag-picker';
 import type { TagPickerInputBaseState } from '@fluentui/react-tag-picker';
 import { TagPickerInputBaseProps as TagPickerInputProps } from '@fluentui/react-tag-picker';
@@ -46,22 +50,17 @@ import { useTagPickerContextValues } from '@fluentui/react-tag-picker';
 
 export { renderTagPicker }
 
-// @public (undocumented)
-export const renderTagPickerButton: (state: TagPickerButtonState) => JSXElement;
+export { renderTagPickerButton }
 
-// @public
-export const renderTagPickerControl: (state: TagPickerControlState) => JSXElement;
+export { renderTagPickerControl }
 
-// @public
-export const renderTagPickerGroup: (state: TagPickerGroupState, contextValues: TagGroupContextValues) => JSXElement | null;
+export { renderTagPickerGroup }
 
-// @public
-export const renderTagPickerInput: (state: TagPickerInputState) => JSXElement;
+export { renderTagPickerInput }
 
 export { renderTagPickerList }
 
-// @public (undocumented)
-export const renderTagPickerOption: (state: TagPickerOptionState) => JSXElement;
+export { renderTagPickerOption }
 
 // @public
 export const renderTagPickerOptionGroup: (state: OptionGroupState) => JSXElement;
@@ -116,8 +115,7 @@ export type TagPickerGroupProps = ComponentProps<TagPickerGroupSlots>;
 export { TagPickerGroupSlots }
 
 // @public
-export type TagPickerGroupState = TagGroupBaseState & {
-    hasSelectedOptions: boolean;
+export type TagPickerGroupState = TagPickerGroupBaseState & {
     root: {
         focusgroup?: string;
         'data-disabled'?: string;
@@ -175,25 +173,18 @@ export type TagPickerOptionGroupState = OptionGroupState;
 
 // @public
 export type TagPickerOptionProps = OptionProps & {
-    media?: Slot<'span'>;
+    media?: Slot<'div'>;
     secondaryContent?: Slot<'span'>;
 };
 
 // @public (undocumented)
 export type TagPickerOptionSlots = OptionSlots & {
-    media?: Slot<'span'>;
+    media?: Slot<'div'>;
     secondaryContent?: Slot<'span'>;
 };
 
 // @public
-export type TagPickerOptionState = OptionState & {
-    components: OptionState['components'] & {
-        media: 'span';
-        secondaryContent: 'span';
-    };
-    media?: Slot<'span'>;
-    secondaryContent?: Slot<'span'>;
-};
+export type TagPickerOptionState = OptionState & ComponentState<TagPickerOptionSlots>;
 
 // @public (undocumented)
 export type TagPickerProps = TagPickerBaseProps & {

packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerButton/renderTagPickerButton.tsx

@@ -1,8 +1 @@
-import type { JSXElement } from '@fluentui/react-utilities';
-import { renderTagPickerButton_unstable } from '@fluentui/react-tag-picker';
-
-import type { TagPickerButtonState } from './TagPickerButton.types';
-
-export const renderTagPickerButton = renderTagPickerButton_unstable as unknown as (
-  state: TagPickerButtonState,
-) => JSXElement;
+export { renderTagPickerButton_unstable as renderTagPickerButton } from '@fluentui/react-tag-picker';

packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerControl/renderTagPickerControl.tsx

@@ -1,11 +1 @@
-import type { JSXElement } from '@fluentui/react-utilities';
-import { renderTagPickerControl_unstable } from '@fluentui/react-tag-picker';
-
-import type { TagPickerControlState } from './TagPickerControl.types';
-
-/**
- * Render the final JSX of the headless TagPickerControl.
- */
-export const renderTagPickerControl = renderTagPickerControl_unstable as unknown as (
-  state: TagPickerControlState,
-) => JSXElement;
+export { renderTagPickerControl_unstable as renderTagPickerControl } from '@fluentui/react-tag-picker';

packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerGroup/TagPickerGroup.types.ts

@@ -1,6 +1,5 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
-import type { TagGroupBaseState } from '@fluentui/react-tags';
-import type { TagPickerGroupSlots } from '@fluentui/react-tag-picker';
+import type { TagPickerGroupBaseState, TagPickerGroupSlots } from '@fluentui/react-tag-picker';
 
 export type { TagPickerGroupSlots };
 
@@ -12,11 +11,7 @@ export type TagPickerGroupProps = ComponentProps<TagPickerGroupSlots>;
 /**
  * State used in rendering the headless TagPickerGroup.
  */
-export type TagPickerGroupState = TagGroupBaseState & {
-  /**
-   * Whether any options are currently selected. When `false`, the group renders nothing.
-   */
-  hasSelectedOptions: boolean;
+export type TagPickerGroupState = TagPickerGroupBaseState & {
   root: {
     /**
      * Native WICG `focusgroup` attribute for arrow-key navigation across the selected tags.

packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerGroup/renderTagPickerGroup.tsx

@@ -1,13 +1 @@
-import type { JSXElement } from '@fluentui/react-utilities';
-import { renderTagPickerGroup_unstable } from '@fluentui/react-tag-picker';
-import type { TagGroupContextValues } from '@fluentui/react-tags';
-
-import type { TagPickerGroupState } from './TagPickerGroup.types';
-
-/**
- * Render the final JSX of the headless TagPickerGroup.
- */
-export const renderTagPickerGroup = renderTagPickerGroup_unstable as unknown as (
-  state: TagPickerGroupState,
-  contextValues: TagGroupContextValues,
-) => JSXElement | null;
+export { renderTagPickerGroup_unstable as renderTagPickerGroup } from '@fluentui/react-tag-picker';

packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerInput/renderTagPickerInput.tsx

@@ -1,11 +1 @@
-import type { JSXElement } from '@fluentui/react-utilities';
-import { renderTagPickerInput_unstable } from '@fluentui/react-tag-picker';
-
-import type { TagPickerInputState } from './TagPickerInput.types';
-
-/**
- * Render the final JSX of the headless TagPickerInput.
- */
-export const renderTagPickerInput = renderTagPickerInput_unstable as unknown as (
-  state: TagPickerInputState,
-) => JSXElement;
+export { renderTagPickerInput_unstable as renderTagPickerInput } from '@fluentui/react-tag-picker';

packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerOption/TagPickerOption.types.ts

@@ -1,11 +1,11 @@
-import type { Slot } from '@fluentui/react-utilities';
+import type { ComponentState, Slot } from '@fluentui/react-utilities';
 import type { OptionProps, OptionSlots, OptionState } from '../../Dropdown/Option';
 
 export type TagPickerOptionSlots = OptionSlots & {
   /**
    * Media rendered before the option's text content (e.g. an avatar or icon).
    */
-  media?: Slot<'span'>;
+  media?: Slot<'div'>;
   /**
    * Secondary text rendered after the option's text content.
    */
@@ -16,18 +16,11 @@ export type TagPickerOptionSlots = OptionSlots & {
  * TagPickerOption Props
  */
 export type TagPickerOptionProps = OptionProps & {
-  media?: Slot<'span'>;
+  media?: Slot<'div'>;
   secondaryContent?: Slot<'span'>;
 };
 
 /**
  * State used in rendering the headless TagPickerOption.
  */
-export type TagPickerOptionState = OptionState & {
-  components: OptionState['components'] & {
-    media: 'span';
-    secondaryContent: 'span';
-  };
-  media?: Slot<'span'>;
-  secondaryContent?: Slot<'span'>;
-};
+export type TagPickerOptionState = OptionState & ComponentState<TagPickerOptionSlots>;

packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerOption/renderTagPickerOption.tsx

@@ -1,8 +1 @@
-import type { JSXElement } from '@fluentui/react-utilities';
-import { renderTagPickerOption_unstable } from '@fluentui/react-tag-picker';
-
-import type { TagPickerOptionState } from './TagPickerOption.types';
-
-export const renderTagPickerOption = renderTagPickerOption_unstable as unknown as (
-  state: TagPickerOptionState,
-) => JSXElement;
+export { renderTagPickerOption_unstable as renderTagPickerOption } from '@fluentui/react-tag-picker';

packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerOption/useTagPickerOption.ts

@@ -32,10 +32,10 @@ export const useTagPickerOption = (props: TagPickerOptionProps, ref: React.Ref<H
     components: {
       // eslint-disable-next-line @typescript-eslint/no-deprecated
       ...optionState.components,
-      media: 'span',
+      media: 'div',
       secondaryContent: 'span',
     },
-    media: slot.optional(media, { elementType: 'span' }),
+    media: slot.optional(media, { elementType: 'div' }),
     secondaryContent: slot.optional(secondaryContent, { elementType: 'span' }),
   };
 };

packages/react-components/react-headless-components-preview/library/src/components/TagPicker/useTagPicker.ts

@@ -14,7 +14,6 @@ export const useTagPicker = (props: TagPickerProps): TagPickerState => {
   const { targetRef, containerRef } = usePositioning(resolvePositioningShorthand(positioning));
 
   const baseState = useTagPickerBase_unstable(baseProps);
-  const targetRefWithCurrent = useMergedRefs<HTMLDivElement>(targetRef);
   const popoverRef = useMergedRefs<HTMLDivElement>(baseState.popoverRef, containerRef);
 
   return {
@@ -24,7 +23,7 @@ export const useTagPicker = (props: TagPickerProps): TagPickerState => {
     appearance: 'outline',
     inline: true,
     size: 'medium',
-    targetRef: targetRefWithCurrent,
+    targetRef: targetRef as unknown as TagPickerState['targetRef'],
     popoverRef,
   };
 };