diff --git a/src/lib/motion-start/gestures/drag/use-drag-controls.ts b/src/lib/motion-start/gestures/drag/use-drag-controls.ts index f3b2333..69d4db3 100755 --- a/src/lib/motion-start/gestures/drag/use-drag-controls.ts +++ b/src/lib/motion-start/gestures/drag/use-drag-controls.ts @@ -48,7 +48,7 @@ export class DragControls { * * @public */ - start = (event: React.PointerEvent | PointerEvent, options?: DragControlOptions): void => { + start = (event: PointerEvent | { nativeEvent: PointerEvent }, options?: DragControlOptions): void => { this.componentControls.forEach((controls) => { controls.start('nativeEvent' in event ? event.nativeEvent : event, options); }); diff --git a/src/lib/motion-start/motion/features/types.ts b/src/lib/motion-start/motion/features/types.ts index a903fec..198cc74 100755 --- a/src/lib/motion-start/motion/features/types.ts +++ b/src/lib/motion-start/motion/features/types.ts @@ -4,7 +4,7 @@ Copyright (c) 2018 Framer B.V. */ import type { Component } from 'svelte'; import type { CreateVisualElement, VisualElement } from '../../render/types'; -import type { MotionProps } from '../types'; +import type { MotionProps, Ref } from '../types'; import type { VisualState } from '../utils/use-visual-state'; /** * @public @@ -50,10 +50,11 @@ export type LazyFeatureBundle = () => Promise; export type FeatureDefinitions = { [K in keyof FeatureNames]: FeatureDefinition; }; + export type RenderComponent = ( - Component: string | React.ComponentType, + Component: string | Component, props: MotionProps, - ref: React.Ref, + ref: Ref, visualState: VisualState, isStatic: boolean ) => any; diff --git a/src/lib/motion-start/motion/types.ts b/src/lib/motion-start/motion/types.ts index 7043ff4..a76df7e 100755 --- a/src/lib/motion-start/motion/types.ts +++ b/src/lib/motion-start/motion/types.ts @@ -11,6 +11,10 @@ import type { MakeCustomValueType, Omit, Target, TargetAndTransition, Transition import type { MotionValue } from '../value'; import type { LayoutProps } from './features/layout/types'; +export type Ref = (instance: T | null) => void | { + current: T | null; +} | null; + export type MotionStyleProp = string | number | MotionValue; /** * Either a string, or array of strings, that reference variants defined via the `variants` prop. diff --git a/src/lib/motion-start/motion/utils/use-motion-ref.ts b/src/lib/motion-start/motion/utils/use-motion-ref.ts index 291880f..b151dad 100755 --- a/src/lib/motion-start/motion/utils/use-motion-ref.ts +++ b/src/lib/motion-start/motion/utils/use-motion-ref.ts @@ -2,9 +2,9 @@ based on framer-motion@4.1.17, Copyright (c) 2018 Framer B.V. */ -import type { VisualElement } from "../../render/types"; -import type { VisualState } from "./use-visual-state"; - +import type { VisualElement } from '../../render/types'; +import type { VisualState } from './use-visual-state'; +import type { Ref } from '../types'; /** based on framer-motion@4.0.3, @@ -17,25 +17,25 @@ import { isRefObject } from '../../utils/is-ref-object.js'; * Creates a ref function that, when called, hydrates the provided * external ref and VisualElement. */ -function useMotionRef(visualState: VisualState, visualElement?: VisualElement | null, externalRef?: React.Ref): React.Ref { - return function (instance) { - var _a; - instance && ((_a = visualState.mount) === null || _a === void 0 ? void 0 : _a.call(visualState, instance)); - if (visualElement) { - instance - ? visualElement.mount(instance) - : visualElement.unmount(); - } - if (externalRef) { - if (typeof externalRef === "function") { - externalRef(instance); - } - else if (isRefObject(externalRef)) { - externalRef.current = instance; - } - } - } +function useMotionRef( + visualState: VisualState, + visualElement?: VisualElement | null, + externalRef?: Ref +): Ref { + return (instance) => { + var _a; + instance && ((_a = visualState.mount) === null || _a === void 0 ? void 0 : _a.call(visualState, instance)); + if (visualElement) { + instance ? visualElement.mount(instance) : visualElement.unmount(); + } + if (externalRef) { + if (typeof externalRef === 'function') { + externalRef(instance); + } else if (isRefObject(externalRef)) { + externalRef.current = instance; + } + } + }; } export { useMotionRef }; - diff --git a/src/lib/motion-start/motion/utils/use-visual-element.ts b/src/lib/motion-start/motion/utils/use-visual-element.ts index 1cefebb..72ec4d7 100755 --- a/src/lib/motion-start/motion/utils/use-visual-element.ts +++ b/src/lib/motion-start/motion/utils/use-visual-element.ts @@ -2,12 +2,16 @@ based on framer-motion@4.1.17, Copyright (c) 2018 Framer B.V. */ -import type { MotionProps } from "../types"; -import type { CreateVisualElement, VisualElement } from "../../render/types"; -import type { VisualState } from "./use-visual-state"; +import type { MotionProps } from '../types'; +import type { CreateVisualElement, VisualElement } from '../../render/types'; +import type { VisualState } from './use-visual-state'; +import type { Component } from 'svelte'; - -export type useVisualElement = (Component: string | React.ComponentType, visualState: VisualState, props: MotionProps, createVisualElement?: CreateVisualElement) => VisualElement | undefined; +export type useVisualElement = ( + Component: string | Component, + visualState: VisualState, + props: MotionProps, + createVisualElement?: CreateVisualElement +) => VisualElement | undefined; export { default as UseVisualElement } from './UseVisualElement.svelte'; - diff --git a/src/lib/motion-start/render/dom/motion-proxy.ts b/src/lib/motion-start/render/dom/motion-proxy.ts index 3f67589..6c8b0f1 100755 --- a/src/lib/motion-start/render/dom/motion-proxy.ts +++ b/src/lib/motion-start/render/dom/motion-proxy.ts @@ -2,8 +2,8 @@ based on framer-motion@4.1.17, Copyright (c) 2018 Framer B.V. */ -import type { MotionComponentConfig } from "../../motion/index.js"; -import type { MotionProps } from "../../motion/types.js"; +import type { MotionComponentConfig } from '../../motion/index.js'; +import type { MotionProps } from '../../motion/types.js'; /** * I'd rather the return type of `custom` to be implicit but this throws * incorrect relative paths in the exported types and API Extractor throws @@ -11,11 +11,16 @@ import type { MotionProps } from "../../motion/types.js"; * * @internal */ -export type CustomDomComponent = React.ForwardRefExoticComponent & React.RefAttributes>; +export type CustomDomComponent> = Component< + (Props & MotionProps) | (SVGElement | HTMLElement) +>; export interface CustomMotionComponentConfig { - forwardMotionProps?: boolean; + forwardMotionProps?: boolean; } -export type CreateConfig = (Component: string | React.ComponentType, config: CustomMotionComponentConfig) => MotionComponentConfig; +export type CreateConfig = >( + Component: string | Component, + config: CustomMotionComponentConfig +) => MotionComponentConfig; /** * Convert any React component into a `motion` component. The provided component * **must** use `React.forwardRef` to the underlying DOM component you want to animate. @@ -32,7 +37,6 @@ export type CreateConfig = (Component: string | Re */ // export declare function createMotionProxy(createConfig: CreateConfig): ((Component: string | React.ComponentType, customMotionComponentConfig?: CustomMotionComponentConfig) => CustomDomComponent) & import("../html/types").HTMLMotionComponents & import("../svg/types").SVGMotionComponents; - /** based on framer-motion@4.0.3, Copyright (c) 2018 Framer B.V. @@ -42,7 +46,10 @@ import type { SvelteHTMLElements } from 'svelte/elements'; import Mo from './M.svelte'; import { isSVGComponent } from './utils/is-svg-component.js'; -type M = MotionProps & {children: Snippet, class: string} & Omit; +type M = MotionProps & { children: Snippet; class: string } & Omit< + SvelteHTMLElements[Element], + 'style' + >; type motion = Component>; /** * Convert any React component into a `motion` component. The provided component @@ -85,7 +92,7 @@ function createMotionProxy(): { [P in keyof SvelteHTMLElements]: motion

} { //@ts-ignore return new target(...args); }, - // support svelte 5 + // support svelte 5 apply(target, thisArg, args) { if (!args[1]) { args[1] = { ___tag: key, isSVG: type }; @@ -93,7 +100,7 @@ function createMotionProxy(): { [P in keyof SvelteHTMLElements]: motion

} { args[1].___tag = key; args[1].isSVG = type; } - //@ts-ignore + // @ts-expect-error return target(...args); }, }); @@ -104,5 +111,4 @@ function createMotionProxy(): { [P in keyof SvelteHTMLElements]: motion

} { const M = createMotionProxy(); -export { M, createMotionProxy }; - +export { type M, createMotionProxy }; diff --git a/src/lib/motion-start/render/html/types.ts b/src/lib/motion-start/render/html/types.ts index 8d90068..4aaaace 100755 --- a/src/lib/motion-start/render/html/types.ts +++ b/src/lib/motion-start/render/html/types.ts @@ -2,7 +2,7 @@ based on framer-motion@4.1.17, Copyright (c) 2018 Framer B.V. */ -import type { HTMLAttributes } from 'svelte/elements'; +import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements'; import type { MotionProps } from '../../motion/types'; import type { ResolvedValues } from '../types'; import type { HTMLElements } from './supported-elements'; @@ -42,7 +42,7 @@ export interface HTMLRenderState { /** * @public */ -export type ForwardRefComponent = Snippet<[T & P]>; +export type ForwardRefComponent, P extends Record> = Component; /** * Motion-optimised versions of React's HTML components. @@ -50,5 +50,5 @@ export type ForwardRefComponent = Snippet<[T & P]>; * @public */ export type HTMLMotionComponents = { - [K in HTMLElements]: Component; + [K in HTMLElements]: ForwardRefComponent; }; diff --git a/src/lib/motion-start/render/svg/types.ts b/src/lib/motion-start/render/svg/types.ts index 9ba94b7..a3cc7a5 100755 --- a/src/lib/motion-start/render/svg/types.ts +++ b/src/lib/motion-start/render/svg/types.ts @@ -2,7 +2,7 @@ based on framer-motion@4.1.17, Copyright (c) 2018 Framer B.V. */ -import type { SVGAttributes } from 'svelte/elements'; +import type { SVGAttributes, SvelteHTMLElements } from 'svelte/elements'; import type { MakeMotion, MotionProps } from '../../motion/types'; import type { ForwardRefComponent, HTMLRenderState } from '../html/types'; import type { ResolvedValues } from '../types'; @@ -35,7 +35,6 @@ interface SVGAttributesWithoutMotionProps * @public */ export type SVGAttributesAsMotionValues = MakeMotion>; -type UnwrapSVGFactoryElement = F extends React.SVGProps ? P : never; /** * @public */ @@ -46,8 +45,5 @@ export interface SVGMotionProps extends SVGAttributesAsMo * @public */ export type SVGMotionComponents = { - [K in SVGElements]: ForwardRefComponent< - UnwrapSVGFactoryElement, - SVGMotionProps> - >; + [K in SVGElements]: ForwardRefComponent; };