feat(react-utilities): restricts trigger API types

change/@fluentui-react-dialog-686635f7-4692-496c-ab3c-6acaa354e72f.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: improves DialogTrigger types",
+  "packageName": "@fluentui/react-dialog",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-menu-4f2d389f-a9b7-41f4-8a65-d4dca52a287b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: improves MenuTrigger types",
+  "packageName": "@fluentui/react-menu",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-popover-4839d5df-c144-43e9-9fd6-406fe50d008c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: improves PopoverTrigger types",
+  "packageName": "@fluentui/react-popover",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tooltip-13956a4b-4fc1-4e08-9bba-d2980714a6c5.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: improves Tooltip types",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-utilities-e8e25f62-8476-4790-9aec-ffcfeef8c660.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: restricts trigger API types",
+  "packageName": "@fluentui/react-utilities",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-dialog/etc/react-dialog.api.md

@@ -17,6 +17,7 @@ import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { TriggerProps } from '@fluentui/react-utilities';
 
 // @public
 export const Dialog: React_2.FC<DialogProps>;
@@ -169,14 +170,12 @@ export type DialogTriggerAction = 'open' | 'close';
 
 // @public
 export type DialogTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<Type, Props & {
-    ref: React_2.Ref<unknown>;
     'aria-haspopup'?: 'dialog';
 }>;
 
 // @public (undocumented)
-export type DialogTriggerProps = {
+export type DialogTriggerProps = TriggerProps<DialogTriggerChildProps> & {
     action?: DialogTriggerAction;
-    children: React_2.ReactElement | ((props: DialogTriggerChildProps) => React_2.ReactElement | null);
 };
 
 // @public (undocumented)

packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.types.ts

@@ -1,21 +1,17 @@
 import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';
+import type { TriggerProps } from '@fluentui/react-utilities';
 import * as React from 'react';
 
 export type DialogTriggerAction = 'open' | 'close';
 
-export type DialogTriggerProps = {
+export type DialogTriggerProps = TriggerProps<DialogTriggerChildProps> & {
   /**
    * Explicitly declare if the trigger is responsible for opening or
    * closing a Dialog visibility state.
    * @default 'open' // if it's outside DialogSurface
    * @default 'close' // if it's inside DialogSurface
    */
   action?: DialogTriggerAction;
-  /**
-   * Explicitly require single child or render function
-   * to inject properties
-   */
-  children: React.ReactElement | ((props: DialogTriggerChildProps) => React.ReactElement | null);
 };
 
 /**
@@ -24,7 +20,6 @@ export type DialogTriggerProps = {
 export type DialogTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<
   Type,
   Props & {
-    ref: React.Ref<unknown>;
     'aria-haspopup'?: 'dialog';
   }
 >;

packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useModalAttributes } from '@fluentui/react-tabster';
 import { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';
-import { DialogTriggerChildProps, DialogTriggerProps, DialogTriggerState } from './DialogTrigger.types';
+import { DialogTriggerProps, DialogTriggerState } from './DialogTrigger.types';
 import { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';
 import { useARIAButtonProps } from '@fluentui/react-aria';
 
@@ -16,7 +16,7 @@ export const useDialogTrigger_unstable = (props: DialogTriggerProps): DialogTrig
 
   const { children, action = isInsideSurfaceDialog ? 'close' : 'open' } = props;
 
-  const child = React.isValidElement(children) ? getTriggerChild<DialogTriggerChildProps>(children) : undefined;
+  const child = getTriggerChild(children);
 
   const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);
 
@@ -36,13 +36,13 @@ export const useDialogTrigger_unstable = (props: DialogTriggerProps): DialogTrig
   );
 
   return {
-    children: applyTriggerPropsToChildren<DialogTriggerChildProps>(
+    children: applyTriggerPropsToChildren(
       children,
       useARIAButtonProps(child?.type === 'button' || child?.type === 'a' ? child.type : 'div', {
         type: 'button',
         ...child?.props,
         'aria-haspopup': action === 'close' ? undefined : 'dialog',
-        ref: child?.ref as React.Ref<never>,
+        ref: child?.ref,
         onClick: handleClick,
         ...triggerAttributes,
       }),

packages/react-components/react-menu/etc/react-menu.api.md

@@ -19,6 +19,7 @@ import type { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { TriggerProps } from '@fluentui/react-utilities';
 import { usePositioningMouseTarget } from '@fluentui/react-positioning';
 
 // @public
@@ -313,9 +314,7 @@ export type MenuTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType,
 export const MenuTriggerContextProvider: React_2.Provider<boolean>;
 
 // @public (undocumented)
-export type MenuTriggerProps = {
-    children: React_2.ReactElement | ((props: MenuTriggerChildProps) => React_2.ReactElement | null);
-};
+export type MenuTriggerProps = TriggerProps<MenuTriggerChildProps>;
 
 // @public (undocumented)
 export type MenuTriggerState = {

packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.types.ts

@@ -1,12 +1,8 @@
 import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';
+import type { TriggerProps } from '@fluentui/react-utilities';
 import * as React from 'react';
 
-export type MenuTriggerProps = {
-  /**
-   * Explicitly require single child or render function
-   */
-  children: React.ReactElement | ((props: MenuTriggerChildProps) => React.ReactElement | null);
-};
+export type MenuTriggerProps = TriggerProps<MenuTriggerChildProps>;
 
 /**
  * Props that are passed to the child of the MenuTrigger when cloned to ensure correct behaviour for the Menu

packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MenuTriggerChildProps, MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
+import { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { useIsSubmenu } from '../../utils/useIsSubmenu';
 import { useFocusFinders } from '@fluentui/react-tabster';
@@ -45,7 +45,7 @@ export const useMenuTrigger_unstable = (props: MenuTriggerProps): MenuTriggerSta
   const { dir } = useFluent();
   const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;
 
-  const child = React.isValidElement(children) ? getTriggerChild<Partial<MenuTriggerChildProps>>(children) : undefined;
+  const child = getTriggerChild(children);
 
   const onContextMenu = (e: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {
     if (isTargetDisabled(e)) {
@@ -127,27 +127,24 @@ export const useMenuTrigger_unstable = (props: MenuTriggerProps): MenuTriggerSta
     id: triggerId,
     ...child?.props,
     ref: useMergedRefs(triggerRef, child?.ref),
-    onMouseEnter: useEventCallback(mergeCallbacks(child?.props?.onMouseEnter, onMouseEnter)),
-    onMouseLeave: useEventCallback(mergeCallbacks(child?.props?.onMouseLeave, onMouseLeave)),
-    onContextMenu: useEventCallback(mergeCallbacks(child?.props?.onContextMenu, onContextMenu)),
-    onMouseMove: useEventCallback(mergeCallbacks(child?.props?.onMouseMove, onMouseMove)),
+    onMouseEnter: useEventCallback(mergeCallbacks(child?.props.onMouseEnter, onMouseEnter)),
+    onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),
+    onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),
+    onMouseMove: useEventCallback(mergeCallbacks(child?.props.onMouseMove, onMouseMove)),
   } as const;
 
   const ariaButtonTriggerProps = useARIAButtonProps(
     child?.type === 'button' || child?.type === 'a' ? child.type : 'div',
     {
       ...triggerProps,
-      onClick: useEventCallback(mergeCallbacks(child?.props?.onClick, onClick)),
-      onKeyDown: useEventCallback(mergeCallbacks(child?.props?.onKeyDown, onKeyDown)),
+      onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),
+      onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),
     },
   );
 
   return {
     isSubmenu,
-    children: applyTriggerPropsToChildren<MenuTriggerChildProps>(
-      children,
-      openOnContext ? triggerProps : ariaButtonTriggerProps,
-    ),
+    children: applyTriggerPropsToChildren(children, openOnContext ? triggerProps : ariaButtonTriggerProps),
   };
 };
 

packages/react-components/react-popover/etc/react-popover.api.md

@@ -22,6 +22,7 @@ import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { TriggerProps } from '@fluentui/react-utilities';
 import type { UseModalAttributesOptions } from '@fluentui/react-tabster';
 import type { usePositioningMouseTarget } from '@fluentui/react-positioning';
 
@@ -113,9 +114,7 @@ export type PopoverTriggerChildProps<Type extends ARIAButtonType = ARIAButtonTyp
 }>;
 
 // @public
-export type PopoverTriggerProps = {
-    children: React_2.ReactElement | ((props: PopoverTriggerChildProps) => React_2.ReactElement | null);
-};
+export type PopoverTriggerProps = TriggerProps<PopoverTriggerChildProps>;
 
 // @public
 export type PopoverTriggerState = {

packages/react-components/react-popover/src/components/PopoverTrigger/PopoverTrigger.types.ts

@@ -1,12 +1,11 @@
 import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';
+import type { TriggerProps } from '@fluentui/react-utilities';
 import * as React from 'react';
 
 /**
  * PopoverTrigger Props
  */
-export type PopoverTriggerProps = {
-  children: React.ReactElement | ((props: PopoverTriggerChildProps) => React.ReactElement | null);
-};
+export type PopoverTriggerProps = TriggerProps<PopoverTriggerChildProps>;
 
 /**
  * PopoverTrigger State

packages/react-components/react-popover/src/components/PopoverTrigger/usePopoverTrigger.ts

@@ -8,7 +8,7 @@ import {
 } from '@fluentui/react-utilities';
 import { useModalAttributes } from '@fluentui/react-tabster';
 import { usePopoverContext_unstable } from '../../popoverContext';
-import type { PopoverTriggerChildProps, PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger.types';
+import type { PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger.types';
 import { useARIAButtonProps } from '@fluentui/react-aria';
 import { Escape } from '@fluentui/keyboard-keys';
 
@@ -22,9 +22,7 @@ import { Escape } from '@fluentui/keyboard-keys';
  */
 export const usePopoverTrigger_unstable = (props: PopoverTriggerProps): PopoverTriggerState => {
   const { children } = props;
-  const child = React.isValidElement(children)
-    ? getTriggerChild<Partial<PopoverTriggerChildProps>>(children)
-    : undefined;
+  const child = getTriggerChild(children);
 
   const open = usePopoverContext_unstable(context => context.open);
   const setOpen = usePopoverContext_unstable(context => context.setOpen);
@@ -72,23 +70,23 @@ export const usePopoverTrigger_unstable = (props: PopoverTriggerProps): PopoverT
     ...triggerAttributes,
     'aria-expanded': `${open}`,
     ...child?.props,
-    onMouseEnter: useEventCallback(mergeCallbacks(child?.props?.onMouseEnter, onMouseEnter)),
-    onMouseLeave: useEventCallback(mergeCallbacks(child?.props?.onMouseLeave, onMouseLeave)),
-    onContextMenu: useEventCallback(mergeCallbacks(child?.props?.onContextMenu, onContextMenu)),
+    onMouseEnter: useEventCallback(mergeCallbacks(child?.props.onMouseEnter, onMouseEnter)),
+    onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),
+    onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),
     ref: useMergedRefs(triggerRef, child?.ref),
   } as const;
 
   const ariaButtonTriggerProps = useARIAButtonProps(
     child?.type === 'button' || child?.type === 'a' ? child.type : 'div',
     {
       ...triggerProps,
-      onClick: useEventCallback(mergeCallbacks(child?.props?.onClick, onClick)),
-      onKeyDown: useEventCallback(mergeCallbacks(child?.props?.onKeyDown, onKeyDown)),
+      onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),
+      onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),
     },
   );
 
   return {
-    children: applyTriggerPropsToChildren<PopoverTriggerChildProps>(
+    children: applyTriggerPropsToChildren(
       props.children,
       useARIAButtonProps(
         child?.type === 'button' || child?.type === 'a' ? child.type : 'div',

packages/react-components/react-tooltip/etc/react-tooltip.api.md

@@ -12,6 +12,7 @@ import type { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { TriggerProps } from '@fluentui/react-utilities';
 
 // @public
 export type OnVisibleChangeData = {
@@ -28,11 +29,8 @@ export const Tooltip: React_2.FC<TooltipProps> & FluentTriggerComponent;
 export const tooltipClassNames: SlotClassNames<TooltipSlots>;
 
 // @public
-export type TooltipProps = ComponentProps<TooltipSlots> & Pick<PortalProps, 'mountNode'> & {
+export type TooltipProps = ComponentProps<TooltipSlots> & TriggerProps<TooltipTriggerProps> & Pick<PortalProps, 'mountNode'> & {
     appearance?: 'normal' | 'inverted';
-    children?: (React_2.ReactElement & {
-        ref?: React_2.Ref<unknown>;
-    }) | ((props: TooltipTriggerProps) => React_2.ReactElement | null) | null;
     hideDelay?: number;
     onVisibleChange?: (event: React_2.PointerEvent<HTMLElement> | React_2.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => void;
     positioning?: PositioningShorthand;
@@ -57,7 +55,7 @@ export type TooltipState = ComponentState<TooltipSlots> & Pick<TooltipProps, 'mo
 
 // @public
 export type TooltipTriggerProps = {
-    ref?: React_2.Ref<never>;
+    ref?: React_2.Ref<unknown>;
 } & Pick<React_2.HTMLAttributes<HTMLElement>, 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'onBlur' | 'onFocus' | 'onPointerEnter' | 'onPointerLeave'>;
 
 // @public

packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.types.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot, TriggerProps } from '@fluentui/react-utilities';
 import type { PortalProps } from '@fluentui/react-portal';
 
 /**
@@ -14,10 +14,10 @@ export type TooltipSlots = {
 };
 
 /**
- * The properties that are added to the trigger of the Tooltip
+ * The properties that are added to the child of the Tooltip
  */
-export type TooltipTriggerProps = {
-  ref?: React.Ref<never>;
+export type TooltipChildProps = {
+  ref?: React.Ref<unknown>;
 } & Pick<
   React.HTMLAttributes<HTMLElement>,
   'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'onBlur' | 'onFocus' | 'onPointerEnter' | 'onPointerLeave'
@@ -34,6 +34,7 @@ export type OnVisibleChangeData = {
  * Properties for Tooltip
  */
 export type TooltipProps = ComponentProps<TooltipSlots> &
+  TriggerProps<TooltipChildProps> &
   Pick<PortalProps, 'mountNode'> & {
     /**
      * The tooltip's visual appearance.
@@ -43,18 +44,6 @@ export type TooltipProps = ComponentProps<TooltipSlots> &
      * @default normal
      */
     appearance?: 'normal' | 'inverted';
-
-    /**
-     * The tooltip can have a single JSX child, or a render function that accepts TooltipTriggerProps.
-     *
-     * If no child is provided, the tooltip's target must be set with the `positioning` prop, and its
-     * visibility must be controlled with the `visible` prop.
-     */
-    children?:
-      | (React.ReactElement & { ref?: React.Ref<unknown> })
-      | ((props: TooltipTriggerProps) => React.ReactElement | null)
-      | null;
-
     /**
      * Delay before the tooltip is hidden, in milliseconds.
      *