fix: forwardRef render functions not using ref (#4198)

* fix: forwardRef render functions not using ref

* fix: changelog

* fix: review

* fix: forwardRef render functions not using ref

* docs: update changeset

.changeset/sharp-years-raise.md

@@ -0,0 +1,9 @@
+---
+"@nextui-org/dropdown": patch
+"@nextui-org/listbox": patch
+"@nextui-org/menu": patch
+"@nextui-org/modal": patch
+"@nextui-org/popover": patch
+---
+
+Fix forwardRef render functions not using ref

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

@@ -1,4 +1,3 @@
-import {forwardRef} from "@nextui-org/system";
 import {PopoverTrigger} from "@nextui-org/popover";
 
 import {useDropdownContext} from "./dropdown-context";
@@ -11,13 +10,13 @@ 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 = (props: DropdownTriggerProps) => {
   const {getMenuTriggerProps} = useDropdownContext();
 
   const {children, ...otherProps} = props;
 
   return <PopoverTrigger {...getMenuTriggerProps(otherProps)}>{children}</PopoverTrigger>;
-});
+};
 
 DropdownTrigger.displayName = "NextUI.DropdownTrigger";
 

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

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

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

@@ -1,6 +1,4 @@
 import {useMemo, ReactNode} from "react";
-import {forwardRef} from "@nextui-org/system";
-import * as React from "react";
 
 import {UseMenuItemProps, useMenuItem} from "./use-menu-item";
 import {MenuSelectedIcon} from "./menu-selected-icon";
@@ -10,7 +8,7 @@ export interface MenuItemProps<T extends object = object> extends UseMenuItemPro
 /**
  * @internal
  */
-const MenuItem = forwardRef<"li", MenuItemProps>((props, _) => {
+const MenuItem = (props: MenuItemProps) => {
   const {
     Component,
     FragmentWrapper,
@@ -69,7 +67,7 @@ const MenuItem = forwardRef<"li", MenuItemProps>((props, _) => {
       </FragmentWrapper>
     </Component>
   );
-});
+};
 
 MenuItem.displayName = "NextUI.MenuItem";
 

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

@@ -2,7 +2,6 @@ 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 {DismissButton} from "@react-aria/overlays";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
 import {CloseIcon} from "@nextui-org/shared-icons";
@@ -23,7 +22,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 = (props: ModalContentProps) => {
   const {as, children, role = "dialog", ...otherProps} = props;
 
   const {
@@ -139,7 +138,7 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _)
       {contents}
     </div>
   );
-});
+};
 
 ModalContent.displayName = "NextUI.ModalContent";
 

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

@@ -2,7 +2,6 @@ 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 {RemoveScroll} from "react-remove-scroll";
 import {DismissButton} from "@react-aria/overlays";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
@@ -21,7 +20,7 @@ export interface PopoverContentProps
 
 const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
 
-const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
+const PopoverContent = (props: PopoverContentProps) => {
   const {as, children, className, ...otherProps} = props;
 
   const {
@@ -113,7 +112,7 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
       {contents}
     </div>
   );
-});
+};
 
 PopoverContent.displayName = "NextUI.PopoverContent";
 

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

@@ -1,5 +1,4 @@
 import React, {Children, cloneElement, useMemo} from "react";
-import {forwardRef} 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 +14,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 = (props: PopoverTriggerProps) => {
   const {triggerRef, getTriggerProps} = usePopoverContext();
 
   const {children, ...otherProps} = props;
@@ -50,7 +49,7 @@ const PopoverTrigger = forwardRef<"button", PopoverTriggerProps>((props, _) => {
     child,
     mergeProps(restProps, hasNextUIButton ? {onPress, isDisabled} : buttonProps),
   );
-});
+};
 
 PopoverTrigger.displayName = "NextUI.PopoverTrigger";