diff --git a/.changeset/sharp-years-raise.md b/.changeset/sharp-years-raise.md new file mode 100644 index 0000000000..5db5d5e71c --- /dev/null +++ b/.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 diff --git a/packages/components/dropdown/src/dropdown-trigger.tsx b/packages/components/dropdown/src/dropdown-trigger.tsx index 5217e188d3..467270085f 100644 --- a/packages/components/dropdown/src/dropdown-trigger.tsx +++ b/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 {children}; -}); +}; DropdownTrigger.displayName = "NextUI.DropdownTrigger"; diff --git a/packages/components/listbox/src/listbox-item.tsx b/packages/components/listbox/src/listbox-item.tsx index bf624a9e3b..8e9dc351e2 100644 --- a/packages/components/listbox/src/listbox-item.tsx +++ b/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 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, _) => { ); -}); +}; ListboxItem.displayName = "NextUI.ListboxItem"; diff --git a/packages/components/menu/src/menu-item.tsx b/packages/components/menu/src/menu-item.tsx index ac05b98aa9..fa5a6f2c19 100644 --- a/packages/components/menu/src/menu-item.tsx +++ b/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 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, _) => { ); -}); +}; MenuItem.displayName = "NextUI.MenuItem"; diff --git a/packages/components/modal/src/modal-content.tsx b/packages/components/modal/src/modal-content.tsx index 9940e62d42..42239327fd 100644 --- a/packages/components/modal/src/modal-content.tsx +++ b/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} ); -}); +}; ModalContent.displayName = "NextUI.ModalContent"; diff --git a/packages/components/popover/src/popover-content.tsx b/packages/components/popover/src/popover-content.tsx index 91a660e50b..7f36c6fb78 100644 --- a/packages/components/popover/src/popover-content.tsx +++ b/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} ); -}); +}; PopoverContent.displayName = "NextUI.PopoverContent"; diff --git a/packages/components/popover/src/popover-trigger.tsx b/packages/components/popover/src/popover-trigger.tsx index 8c78d3de06..16c6fe0b43 100644 --- a/packages/components/popover/src/popover-trigger.tsx +++ b/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";