fix: forwardRef render functions not using ref

Author: winchesHe

packages/components/dropdown/src/dropdown-trigger.tsx

@@ -1,4 +1,4 @@
-import {forwardRef} from "@nextui-org/system";
+import {wrapForwardRefTypes} from "@nextui-org/system";
 import {PopoverTrigger} from "@nextui-org/popover";
 
 import {useDropdownContext} from "./dropdown-context";
@@ -11,7 +11,7 @@ export interface DropdownTriggerProps {
  * DropdownTrigger opens the popover's content. It must be an interactive element
  * such as `button` or `a`.
  */
-const DropdownTrigger = forwardRef<"button", DropdownTriggerProps>((props, _) => {
+const DropdownTrigger = wrapForwardRefTypes<"button", DropdownTriggerProps>((props, _) => {
   const {getMenuTriggerProps} = useDropdownContext();
 
   const {children, ...otherProps} = props;

packages/components/listbox/src/listbox-item.tsx

@@ -1,5 +1,5 @@
 import {useMemo, ReactNode} from "react";
-import {forwardRef} from "@nextui-org/system";
+import {wrapForwardRefTypes} from "@nextui-org/system";
 
 import {UseListboxItemProps, useListboxItem} from "./use-listbox-item";
 import {ListboxSelectedIcon} from "./listbox-selected-icon";
@@ -9,7 +9,7 @@ export interface ListboxItemProps<T extends object = object> extends UseListboxI
 /**
  * @internal
  */
-const ListboxItem = forwardRef<"li", ListboxItemProps>((props, _) => {
+const ListboxItem = wrapForwardRefTypes<"li", ListboxItemProps>((props) => {
   const {
     Component,
     rendered,

packages/components/menu/src/menu-item.tsx

@@ -1,5 +1,5 @@
 import {useMemo, ReactNode} from "react";
-import {forwardRef} from "@nextui-org/system";
+import {wrapForwardRefTypes} from "@nextui-org/system";
 
 import {UseMenuItemProps, useMenuItem} from "./use-menu-item";
 import {MenuSelectedIcon} from "./menu-selected-icon";
@@ -9,7 +9,7 @@ export interface MenuItemProps<T extends object = object> extends UseMenuItemPro
 /**
  * @internal
  */
-const MenuItem = forwardRef<"li", MenuItemProps>((props, _) => {
+const MenuItem = wrapForwardRefTypes<"li", MenuItemProps>((props) => {
   const {
     Component,
     slots,

packages/components/modal/src/modal-content.tsx

@@ -2,7 +2,7 @@ import type {AriaDialogProps} from "@react-aria/dialog";
 import type {HTMLMotionProps} from "framer-motion";
 
 import {cloneElement, isValidElement, ReactNode, useMemo, useCallback} from "react";
-import {forwardRef} from "@nextui-org/system";
+import {wrapForwardRefTypes} from "@nextui-org/system";
 import {DismissButton} from "@react-aria/overlays";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
 import {CloseIcon} from "@nextui-org/shared-icons";
@@ -23,7 +23,7 @@ export interface ModalContentProps extends AriaDialogProps, HTMLNextUIProps<"div
 
 const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
 
-const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _) => {
+const ModalContent = wrapForwardRefTypes<"div", ModalContentProps, KeysToOmit>((props) => {
   const {as, children, role = "dialog", ...otherProps} = props;
 
   const {

packages/components/popover/src/popover-content.tsx

@@ -2,7 +2,7 @@ import type {AriaDialogProps} from "@react-aria/dialog";
 import type {HTMLMotionProps} from "framer-motion";
 
 import {DOMAttributes, ReactNode, useMemo, useRef} from "react";
-import {forwardRef} from "@nextui-org/system";
+import {wrapForwardRefTypes} from "@nextui-org/system";
 import {RemoveScroll} from "react-remove-scroll";
 import {DismissButton} from "@react-aria/overlays";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
@@ -21,7 +21,7 @@ export interface PopoverContentProps
 
 const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
 
-const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
+const PopoverContent = wrapForwardRefTypes<"div", PopoverContentProps>((props) => {
   const {as, children, className, ...otherProps} = props;
 
   const {

packages/components/popover/src/popover-trigger.tsx

@@ -1,5 +1,5 @@
 import React, {Children, cloneElement, useMemo} from "react";
-import {forwardRef} from "@nextui-org/system";
+import {wrapForwardRefTypes} from "@nextui-org/system";
 import {pickChildren} from "@nextui-org/react-utils";
 import {useAriaButton} from "@nextui-org/use-aria-button";
 import {Button} from "@nextui-org/button";
@@ -15,7 +15,7 @@ export interface PopoverTriggerProps {
  * PopoverTrigger opens the popover's content. It must be an interactive element
  * such as `button` or `a`.
  */
-const PopoverTrigger = forwardRef<"button", PopoverTriggerProps>((props, _) => {
+const PopoverTrigger = wrapForwardRefTypes<"button", PopoverTriggerProps>((props) => {
   const {triggerRef, getTriggerProps} = usePopoverContext();
 
   const {children, ...otherProps} = props;

packages/core/system-rsc/src/index.ts

@@ -21,6 +21,7 @@ export {
   mapPropsVariants,
   mapPropsVariantsWithCommon,
   isNextUIEl,
+  wrapForwardRefTypes,
 } from "./utils";
 
 export {extendVariants} from "./extend-variants";

packages/core/system-rsc/src/utils.ts

@@ -18,6 +18,21 @@ export function forwardRef<
   return baseForwardRef(component) as InternalForwardRefRenderFunction<Component, Props, OmitKeys>;
 }
 
+export function wrapForwardRefTypes<
+  Component extends As,
+  Props extends object,
+  OmitKeys extends keyof any = never,
+>(
+  component: React.ForwardRefRenderFunction<
+    any,
+    RightJoinProps<PropsOf<Component>, Props> & {
+      as?: As;
+    }
+  >,
+) {
+  return component as InternalForwardRefRenderFunction<Component, Props, OmitKeys>;
+}
+
 export const toIterator = (obj: any) => {
   return {
     ...obj,

packages/core/system/src/index.ts

@@ -25,6 +25,7 @@ export {
   mapPropsVariantsWithCommon,
   isNextUIEl,
   extendVariants,
+  wrapForwardRefTypes,
 } from "@nextui-org/system-rsc";
 
 export type {SupportedCalendars} from "./types";