chore(react-utilities): updates useMergedRefs to accept LegacyRef

Author: bsunderhus

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

@@ -12,6 +12,7 @@ import { ARIAButtonType } from '@fluentui/react-aria';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ContextSelector } from '@fluentui/react-context-selector';
+import type { ExtractSlotProps } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { PortalProps } from '@fluentui/react-portal';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
@@ -157,7 +158,7 @@ export type MenuItemLinkSlots = {
 export type MenuItemLinkState = ComponentState<MenuItemLinkSlots>;
 
 // @public (undocumented)
-export type MenuItemProps = Omit<ComponentProps<Partial<MenuItemSlots>>, 'content'> & Pick<Partial<MenuItemSlots>, 'content'> & {
+export type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {
     hasSubmenu?: boolean;
     persistOnClick?: boolean;
     disabled?: boolean;
@@ -189,7 +190,7 @@ export type MenuItemSelectableState = MenuItemSelectableProps & {
 
 // @public (undocumented)
 export type MenuItemSlots = {
-    root: Slot<'div'>;
+    root: Slot<Omit<ExtractSlotProps<Slot<'div'>>, 'content'>>;
     icon?: Slot<'span'>;
     checkmark?: Slot<'span'>;
     submenuIndicator?: Slot<'span'>;

packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.types.ts

@@ -1,7 +1,7 @@
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';
 
 export type MenuItemSlots = {
-  root: Slot<'div'>;
+  root: Slot<Omit<ExtractSlotProps<Slot<'div'>>, 'content'>>;
 
   /**
    * Icon slot rendered before children content
@@ -36,29 +36,28 @@ export type MenuItemSlots = {
   subText?: Slot<'span'>;
 };
 
-export type MenuItemProps = Omit<ComponentProps<Partial<MenuItemSlots>>, 'content'> &
-  Pick<Partial<MenuItemSlots>, 'content'> & {
-    /**
-     * If the menu item is a trigger for a submenu
-     *
-     * @default false
-     */
-    hasSubmenu?: boolean;
+export type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {
+  /**
+   * If the menu item is a trigger for a submenu
+   *
+   * @default false
+   */
+  hasSubmenu?: boolean;
 
-    /**
-     * Clicking on the menu item will not dismiss an open menu
-     *
-     * @default false
-     */
-    persistOnClick?: boolean;
+  /**
+   * Clicking on the menu item will not dismiss an open menu
+   *
+   * @default false
+   */
+  persistOnClick?: boolean;
 
-    disabled?: boolean;
-    /**
-     * @deprecated this property does nothing.
-     * disabled focusable is by default by simply using `disabled` property
-     */
-    disabledFocusable?: boolean;
-  };
+  disabled?: boolean;
+  /**
+   * @deprecated this property does nothing.
+   * disabled focusable is by default by simply using `disabled` property
+   */
+  disabledFocusable?: boolean;
+};
 
 export type MenuItemState = ComponentState<MenuItemSlots> &
   Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;

packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx

@@ -19,12 +19,7 @@ import {
 import { useMenuListContext_unstable } from '../../contexts/menuListContext';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
 import type { MenuItemProps, MenuItemState } from './MenuItem.types';
-import {
-  ARIAButtonElement,
-  ARIAButtonElementIntersection,
-  ARIAButtonProps,
-  useARIAButtonProps,
-} from '@fluentui/react-aria';
+import { ARIAButtonElement, ARIAButtonElementIntersection, useARIAButtonProps } from '@fluentui/react-aria';
 import { Enter, Space } from '@fluentui/keyboard-keys';
 import { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';
 
@@ -38,7 +33,6 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIABu
   const isSubmenuTrigger = useMenuTriggerContext_unstable();
   const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);
   const {
-    as = 'div',
     disabled = false,
     hasSubmenu = isSubmenuTrigger,
     persistOnClick = persistOnClickContext,
@@ -69,7 +63,7 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIABu
     root: slot.always(
       getIntrinsicElementProps<MenuItemProps>(
         'div',
-        useARIAButtonProps<'div', ARIAButtonProps<'div'>>(as, {
+        useARIAButtonProps('div', {
           role: 'menuitem',
           ...rest,
           disabled: false,

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

@@ -359,7 +359,7 @@ export const useIsomorphicLayoutEffect: typeof React_2.useEffect;
 export function useIsSSR(): boolean;
 
 // @public
-export function useMergedRefs<T>(...refs: (React_2.Ref<T> | undefined)[]): RefObjectFunction<T>;
+export function useMergedRefs<T>(...refs: (React_2.LegacyRef<T> | undefined)[]): RefObjectFunction<T>;
 
 // @internal (undocumented)
 export type UseOnClickOrScrollOutsideOptions = {

packages/react-components/react-utilities/src/compose/deprecated/getSlots.ts

@@ -110,7 +110,7 @@ function getSlot<R extends SlotPropsRecord, K extends keyof R>(
   if (renderFunction || typeof children === 'function') {
     const render = (renderFunction || children) as SlotRenderFunction<R[K]>;
     return [
-      React.Fragment,
+      React.Fragment as React.ElementType<R[K]>,
       {
         children: render(slot, rest as Omit<R[K], 'as'>),
       } as unknown as R[K],

packages/react-components/react-utilities/src/hooks/useMergedRefs.ts

@@ -6,21 +6,35 @@ import * as React from 'react';
  */
 export type RefObjectFunction<T> = React.RefObject<T> & ((value: T | null) => void);
 
+/** @internal */
+type MutableRefObjectFunction<T> = React.MutableRefObject<T | null> & ((value: T | null) => void);
+
 /**
  * React hook to merge multiple React refs (either MutableRefObjects or ref callbacks) into a single ref callback that
  * updates all provided refs
  * @param refs - Refs to collectively update with one ref value.
  * @returns A function with an attached "current" prop, so that it can be treated like a RefObject.
  */
-export function useMergedRefs<T>(...refs: (React.Ref<T> | undefined)[]): RefObjectFunction<T> {
+// LegacyRef is actually not supported, but in React v18 types this is leaking directly from forwardRef component declaration
+export function useMergedRefs<T>(...refs: (React.LegacyRef<T> | undefined)[]): RefObjectFunction<T> {
   'use no memo';
 
-  const mergedCallback: RefObjectFunction<T> = React.useCallback(
+  const mergedCallback = React.useCallback(
     (value: T | null) => {
       // Update the "current" prop hanging on the function.
-      (mergedCallback as React.MutableRefObject<T | null>).current = value;
+      mergedCallback.current = value;
 
       for (const ref of refs) {
+        if (typeof ref === 'string' && process.env.NODE_ENV !== 'production') {
+          // eslint-disable-next-line no-console
+          console.error(/** #__DE-INDENT__ */ `
+            @fluentui/react-utilities [useMergedRefs]:
+            This hook does not support the usage of string refs. Please use React.useRef instead.
+
+            For more info on 'React.useRef', see https://react.dev/reference/react/useRef.
+            For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-string-refs.
+          `);
+        }
         if (typeof ref === 'function') {
           ref(value);
         } else if (ref) {
@@ -31,7 +45,7 @@ export function useMergedRefs<T>(...refs: (React.Ref<T> | undefined)[]): RefObje
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps -- already exhaustive
     [...refs],
-  ) as RefObjectFunction<T>;
+  ) as MutableRefObjectFunction<T>;
 
   return mergedCallback;
 }