From c6326d169dd37790952645ebe3196596f0ae274b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Tue, 12 Nov 2024 02:00:22 +0800 Subject: [PATCH 1/3] fix(docs): invalid canary storybook link (#4030) --- packages/core/react/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/react/README.md b/packages/core/react/README.md index 48cba90b64..242f0440c2 100644 --- a/packages/core/react/README.md +++ b/packages/core/react/README.md @@ -39,7 +39,7 @@ Visit [https://storybook.nextui.org](https://storybook.nextui.org/) to view the Canary versions are available after every merge into `canary` branch. You can install the packages with the tag `canary` in npm to use the latest changes before the next production release. - [Documentation](https://canary.nextui.org/docs) -- [Storybook](https://canary-storybook.nextui.org) +- [Storybook](https://canary-sb.nextui.org) ## Community From c1bf1f772fb15cea551d2563b8a2ef3577fced8d Mon Sep 17 00:00:00 2001 From: winches <329487092@qq.com> Date: Sun, 17 Nov 2024 10:14:54 +0800 Subject: [PATCH 2/3] fix: forwardRef render functions not using ref --- .../components/dropdown/src/dropdown-trigger.tsx | 4 ++-- packages/components/listbox/src/listbox-item.tsx | 4 ++-- packages/components/menu/src/menu-item.tsx | 4 ++-- packages/components/modal/src/modal-content.tsx | 4 ++-- .../components/popover/src/popover-content.tsx | 4 ++-- .../components/popover/src/popover-trigger.tsx | 4 ++-- packages/core/system-rsc/src/index.ts | 1 + packages/core/system-rsc/src/utils.ts | 15 +++++++++++++++ packages/core/system/src/index.ts | 1 + 9 files changed, 29 insertions(+), 12 deletions(-) diff --git a/packages/components/dropdown/src/dropdown-trigger.tsx b/packages/components/dropdown/src/dropdown-trigger.tsx index 5217e188d3..b6afb73b6f 100644 --- a/packages/components/dropdown/src/dropdown-trigger.tsx +++ b/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; diff --git a/packages/components/listbox/src/listbox-item.tsx b/packages/components/listbox/src/listbox-item.tsx index f2e8010f74..266346c33b 100644 --- a/packages/components/listbox/src/listbox-item.tsx +++ b/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 extends UseListboxI /** * @internal */ -const ListboxItem = forwardRef<"li", ListboxItemProps>((props, _) => { +const ListboxItem = wrapForwardRefTypes<"li", ListboxItemProps>((props) => { const { Component, rendered, diff --git a/packages/components/menu/src/menu-item.tsx b/packages/components/menu/src/menu-item.tsx index 226d28fd85..5a4090fa72 100644 --- a/packages/components/menu/src/menu-item.tsx +++ b/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 extends UseMenuItemPro /** * @internal */ -const MenuItem = forwardRef<"li", MenuItemProps>((props, _) => { +const MenuItem = wrapForwardRefTypes<"li", MenuItemProps>((props) => { const { Component, slots, diff --git a/packages/components/modal/src/modal-content.tsx b/packages/components/modal/src/modal-content.tsx index 9940e62d42..5837a2218f 100644 --- a/packages/components/modal/src/modal-content.tsx +++ b/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 { diff --git a/packages/components/popover/src/popover-content.tsx b/packages/components/popover/src/popover-content.tsx index 91a660e50b..59540bd95f 100644 --- a/packages/components/popover/src/popover-content.tsx +++ b/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 { diff --git a/packages/components/popover/src/popover-trigger.tsx b/packages/components/popover/src/popover-trigger.tsx index 0d92093f61..17a3e814ed 100644 --- a/packages/components/popover/src/popover-trigger.tsx +++ b/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; diff --git a/packages/core/system-rsc/src/index.ts b/packages/core/system-rsc/src/index.ts index 869ace90c5..cc969c113c 100644 --- a/packages/core/system-rsc/src/index.ts +++ b/packages/core/system-rsc/src/index.ts @@ -21,6 +21,7 @@ export { mapPropsVariants, mapPropsVariantsWithCommon, isNextUIEl, + wrapForwardRefTypes, } from "./utils"; export {extendVariants} from "./extend-variants"; diff --git a/packages/core/system-rsc/src/utils.ts b/packages/core/system-rsc/src/utils.ts index d0e07a7022..754d0e3fd7 100644 --- a/packages/core/system-rsc/src/utils.ts +++ b/packages/core/system-rsc/src/utils.ts @@ -18,6 +18,21 @@ export function forwardRef< return baseForwardRef(component) as InternalForwardRefRenderFunction; } +export function wrapForwardRefTypes< + Component extends As, + Props extends object, + OmitKeys extends keyof any = never, +>( + component: React.ForwardRefRenderFunction< + any, + RightJoinProps, Props> & { + as?: As; + } + >, +) { + return component as InternalForwardRefRenderFunction; +} + export const toIterator = (obj: any) => { return { ...obj, diff --git a/packages/core/system/src/index.ts b/packages/core/system/src/index.ts index 316a00756c..eabf90f25b 100644 --- a/packages/core/system/src/index.ts +++ b/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"; From 0f271e691cfcda64c1667afad94712dd2ef82fd0 Mon Sep 17 00:00:00 2001 From: winches <329487092@qq.com> Date: Sun, 17 Nov 2024 10:21:47 +0800 Subject: [PATCH 3/3] fix: changelog --- .changeset/sharp-years-raise.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 .changeset/sharp-years-raise.md diff --git a/.changeset/sharp-years-raise.md b/.changeset/sharp-years-raise.md new file mode 100644 index 0000000000..6a35f912e6 --- /dev/null +++ b/.changeset/sharp-years-raise.md @@ -0,0 +1,11 @@ +--- +"@nextui-org/dropdown": patch +"@nextui-org/listbox": patch +"@nextui-org/menu": patch +"@nextui-org/modal": patch +"@nextui-org/popover": patch +"@nextui-org/system": patch +"@nextui-org/system-rsc": patch +--- + +fix forwardRef render functions not using ref