From 98c216991b620847a85900f3e8b4a2907ffebb31 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Fri, 31 Jan 2025 23:38:35 +0800 Subject: [PATCH] fix: motionProps type issue --- .../components/accordion/src/base/accordion-item-base.tsx | 3 ++- packages/components/modal/src/modal-content.tsx | 6 ++---- packages/components/modal/src/use-modal.ts | 3 ++- packages/components/navbar/src/navbar-menu.tsx | 4 +++- packages/components/navbar/src/use-navbar.ts | 3 ++- packages/components/popover/src/free-solo-popover.tsx | 7 ++++--- packages/components/popover/src/popover-content.tsx | 6 +++--- packages/components/popover/src/use-popover.ts | 3 ++- packages/components/ripple/src/ripple.tsx | 3 ++- packages/components/tabs/src/use-tabs.ts | 5 +++-- packages/components/tooltip/src/use-tooltip.ts | 3 ++- 11 files changed, 27 insertions(+), 19 deletions(-) diff --git a/packages/components/accordion/src/base/accordion-item-base.tsx b/packages/components/accordion/src/base/accordion-item-base.tsx index dd6d28936d..b0ceba1a3b 100644 --- a/packages/components/accordion/src/base/accordion-item-base.tsx +++ b/packages/components/accordion/src/base/accordion-item-base.tsx @@ -1,4 +1,5 @@ import type {AccordionItemVariantProps, AccordionItemSlots, SlotsToClasses} from "@heroui/theme"; +import type {HTMLMotionProps} from "@heroui/motion"; import {As} from "@heroui/system"; import {ItemProps, BaseItem} from "@heroui/aria-utils"; @@ -50,7 +51,7 @@ export interface Props /** * The props to modify the framer motion animation. Use the `variants` API to create your own animation. */ - motionProps?: any; // FIXME(motion): HTMLMotionProps<"section">; + motionProps?: Omit, "ref">; /** * Whether to keep the accordion content mounted when collapsed. * @default false diff --git a/packages/components/modal/src/modal-content.tsx b/packages/components/modal/src/modal-content.tsx index f4503b10e4..4cc0db5007 100644 --- a/packages/components/modal/src/modal-content.tsx +++ b/packages/components/modal/src/modal-content.tsx @@ -1,4 +1,5 @@ import type {AriaDialogProps} from "@react-aria/dialog"; +import type {HTMLMotionProps} from "@heroui/motion"; import {cloneElement, isValidElement, ReactNode, useMemo, useCallback} from "react"; import {DismissButton} from "@react-aria/overlays"; @@ -92,10 +93,7 @@ const ModalContent = (props: ModalContentProps) => { exit="exit" initial="exit" variants={TRANSITION_VARIANTS.fade} - { - // FIXME(motion): HTMLMotionProps<"div"> - ...(getBackdropProps() as any) - } + {...(getBackdropProps() as Omit, "ref">)} /> ); diff --git a/packages/components/modal/src/use-modal.ts b/packages/components/modal/src/use-modal.ts index 84734c8698..1e999690a6 100644 --- a/packages/components/modal/src/use-modal.ts +++ b/packages/components/modal/src/use-modal.ts @@ -1,4 +1,5 @@ import type {ModalVariantProps, SlotsToClasses, ModalSlots} from "@heroui/theme"; +import type {HTMLMotionProps} from "@heroui/motion"; import {AriaModalOverlayProps} from "@react-aria/overlays"; import {useAriaModalOverlay} from "@heroui/use-aria-modal-overlay"; @@ -21,7 +22,7 @@ interface Props extends HTMLHeroUIProps<"section"> { /** * The props to modify the framer motion animation. Use the `variants` API to create your own animation. */ - motionProps?: any; // FIXME(motion): HTMLMotionProps<"section"> + motionProps?: Omit, "ref">; /** * Determines whether to hide the modal close button. * @default false diff --git a/packages/components/navbar/src/navbar-menu.tsx b/packages/components/navbar/src/navbar-menu.tsx index b8a017477d..116eb0b993 100644 --- a/packages/components/navbar/src/navbar-menu.tsx +++ b/packages/components/navbar/src/navbar-menu.tsx @@ -1,3 +1,5 @@ +import type {HTMLMotionProps} from "@heroui/motion"; + import {forwardRef, HTMLHeroUIProps} from "@heroui/system"; import {useDOMRef} from "@heroui/react-utils"; import {clsx, dataAttr} from "@heroui/shared-utils"; @@ -19,7 +21,7 @@ export interface NavbarMenuProps extends HTMLHeroUIProps<"ul"> { /** * The props to modify the framer motion animation. Use the `variants` API to create your own animation. */ - motionProps?: any; // FIXME(motion): HTMLMotionProps<"ul"> + motionProps?: Omit, "ref">; } const domAnimation = () => import("@heroui/dom-animation").then((res) => res.default); diff --git a/packages/components/navbar/src/use-navbar.ts b/packages/components/navbar/src/use-navbar.ts index b74aae56bc..8eacf941af 100644 --- a/packages/components/navbar/src/use-navbar.ts +++ b/packages/components/navbar/src/use-navbar.ts @@ -1,4 +1,5 @@ import type {NavbarVariantProps, SlotsToClasses, NavbarSlots} from "@heroui/theme"; +import type {HTMLMotionProps} from "@heroui/motion"; import {HTMLHeroUIProps, mapPropsVariants, PropGetter, useProviderContext} from "@heroui/system"; import {navbar} from "@heroui/theme"; @@ -56,7 +57,7 @@ interface Props extends HTMLHeroUIProps<"nav"> { * The props to modify the framer motion animation. Use the `variants` API to create your own animation. * This motion is only available if the `shouldHideOnScroll` prop is set to `true`. */ - motionProps?: any; // FIXME(motion): HTMLMotionProps<"nav"> + motionProps?: Omit, "ref">; /** * The event handler for the menu open state. * @param isOpen boolean diff --git a/packages/components/popover/src/free-solo-popover.tsx b/packages/components/popover/src/free-solo-popover.tsx index 01c47bc766..f1b2b14d8b 100644 --- a/packages/components/popover/src/free-solo-popover.tsx +++ b/packages/components/popover/src/free-solo-popover.tsx @@ -7,13 +7,14 @@ * @internal */ +import type {HTMLMotionProps} from "@heroui/motion"; + import * as React from "react"; import {DismissButton, Overlay} from "@react-aria/overlays"; import {forwardRef} from "@heroui/system"; -import {LazyMotion, m} from "@heroui/motion"; +import {LazyMotion, m, TRANSITION_VARIANTS} from "@heroui/motion"; import {mergeProps} from "@react-aria/utils"; import {getTransformOrigins} from "@heroui/aria-utils"; -import {TRANSITION_VARIANTS} from "@heroui/motion"; import {useDialog} from "@react-aria/dialog"; import {usePopover, UsePopoverProps, UsePopoverReturn} from "./use-popover"; @@ -135,7 +136,7 @@ const FreeSoloPopover = forwardRef<"div", FreeSoloPopoverProps>( exit="exit" initial="exit" variants={TRANSITION_VARIANTS.fade} - {...(getBackdropProps() as any)} // FIXME(motion): HTMLMotionProps<"div"> + {...(getBackdropProps() as Omit, "ref">)} /> ); diff --git a/packages/components/popover/src/popover-content.tsx b/packages/components/popover/src/popover-content.tsx index f5b7c90d42..9754bd9f10 100644 --- a/packages/components/popover/src/popover-content.tsx +++ b/packages/components/popover/src/popover-content.tsx @@ -1,9 +1,9 @@ import type {AriaDialogProps} from "@react-aria/dialog"; +import type {HTMLMotionProps} from "@heroui/motion"; import {DOMAttributes, ReactNode, useMemo, useRef} from "react"; import {DismissButton} from "@react-aria/overlays"; -import {TRANSITION_VARIANTS} from "@heroui/motion"; -import {m, LazyMotion} from "@heroui/motion"; +import {TRANSITION_VARIANTS, m, LazyMotion} from "@heroui/motion"; import {HTMLHeroUIProps} from "@heroui/system"; import {getTransformOrigins} from "@heroui/aria-utils"; import {useDialog} from "@react-aria/dialog"; @@ -73,7 +73,7 @@ const PopoverContent = (props: PopoverContentProps) => { exit="exit" initial="exit" variants={TRANSITION_VARIANTS.fade} - {...(getBackdropProps() as any)} // FIXME(motion): HTMLMotionProps<"div"> + {...(getBackdropProps() as Omit, "ref">)} /> ); diff --git a/packages/components/popover/src/use-popover.ts b/packages/components/popover/src/use-popover.ts index 2b7c099c96..dc53640045 100644 --- a/packages/components/popover/src/use-popover.ts +++ b/packages/components/popover/src/use-popover.ts @@ -1,5 +1,6 @@ import type {PopoverVariantProps, SlotsToClasses, PopoverSlots} from "@heroui/theme"; import type {PressEvent} from "@react-types/shared"; +import type {HTMLMotionProps} from "@heroui/motion"; import {RefObject, Ref, useEffect} from "react"; import {ReactRef, useDOMRef} from "@heroui/react-utils"; @@ -49,7 +50,7 @@ export interface Props extends HTMLHeroUIProps<"div"> { /** * The props to modify the framer motion animation. Use the `variants` API to create your own animation. */ - motionProps?: any; // FIXME(motion): HTMLMotionProps<"div"> + motionProps?: Omit, "ref">; /** * The container element in which the overlay portal will be placed. * @default document.body diff --git a/packages/components/ripple/src/ripple.tsx b/packages/components/ripple/src/ripple.tsx index 4ec4f25a03..f2b35be8ab 100644 --- a/packages/components/ripple/src/ripple.tsx +++ b/packages/components/ripple/src/ripple.tsx @@ -1,6 +1,7 @@ import type {RippleType} from "./use-ripple"; import type {FC} from "react"; import type {HTMLHeroUIProps} from "@heroui/system"; +import type {HTMLMotionProps} from "@heroui/motion"; import {AnimatePresence, m, LazyMotion} from "@heroui/motion"; import {clamp} from "@heroui/shared-utils"; @@ -8,7 +9,7 @@ import {clamp} from "@heroui/shared-utils"; export interface RippleProps extends HTMLHeroUIProps<"span"> { ripples: RippleType[]; color?: string; - motionProps?: any; // FIXME(motion): HTMLMotionProps<"span"> + motionProps?: Omit, "ref">; style?: React.CSSProperties; onClear: (key: React.Key) => void; } diff --git a/packages/components/tabs/src/use-tabs.ts b/packages/components/tabs/src/use-tabs.ts index 3b0da97c23..5e82b39f18 100644 --- a/packages/components/tabs/src/use-tabs.ts +++ b/packages/components/tabs/src/use-tabs.ts @@ -1,4 +1,5 @@ import type {TabsVariantProps, SlotsToClasses, TabsSlots, TabsReturnType} from "@heroui/theme"; +import type {HTMLMotionProps} from "@heroui/motion"; import {HTMLHeroUIProps, mapPropsVariants, PropGetter, useProviderContext} from "@heroui/system"; import {tabs} from "@heroui/theme"; @@ -20,7 +21,7 @@ export interface Props extends Omit { /** * The props to modify the cursor motion animation. Use the `variants` API to create your own animation. */ - motionProps?: any; // FIXME(motion): HTMLMotionProps<"span"> + motionProps?: Omit, "ref">; /** * Whether the tabs selection should occur on press up instead of press down. * @default true @@ -76,7 +77,7 @@ export type ValuesType = { listRef?: RefObject; shouldSelectOnPressUp?: boolean; classNames?: SlotsToClasses; - motionProps?: any; // FIXME(motion): HTMLMotionProps<"span"> + motionProps?: Omit, "ref">; disableAnimation?: boolean; isDisabled?: boolean; }; diff --git a/packages/components/tooltip/src/use-tooltip.ts b/packages/components/tooltip/src/use-tooltip.ts index a23252eaaf..68865091d7 100644 --- a/packages/components/tooltip/src/use-tooltip.ts +++ b/packages/components/tooltip/src/use-tooltip.ts @@ -2,6 +2,7 @@ import type {PopoverVariantProps, SlotsToClasses} from "@heroui/theme"; import type {AriaTooltipProps} from "@react-types/tooltip"; import type {OverlayTriggerProps} from "@react-types/overlays"; import type {OverlayOptions} from "@heroui/aria-utils"; +import type {HTMLMotionProps} from "@heroui/motion"; import {ReactNode, Ref, useId, useImperativeHandle} from "react"; import {useTooltipTriggerState} from "@react-stately/tooltip"; @@ -51,7 +52,7 @@ interface Props extends Omit { /** * The props to modify the framer motion animation. Use the `variants` API to create your own animation. */ - motionProps?: any; // FIXME(motion): HTMLMotionProps<"div"> + motionProps?: Omit, "ref">; /** * The container element in which the overlay portal will be placed. * @default document.body