framer-motion 6.3.10 → 6.3.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +18 -25
- package/dist/es/animation/use-animated-state.mjs +0 -1
- package/dist/es/animation/utils/transitions.mjs +0 -2
- package/dist/es/context/DeprecatedLayoutGroupContext.mjs +0 -1
- package/dist/es/context/LayoutGroupContext.mjs +0 -3
- package/dist/es/gestures/use-pan-gesture.mjs +1 -1
- package/dist/es/motion/index.mjs +0 -2
- package/dist/es/motion/utils/valid-prop.mjs +1 -1
- package/dist/es/projection/styles/transform.mjs +13 -2
- package/dist/es/render/utils/animation.mjs +0 -3
- package/dist/es/render/utils/motion-values.mjs +1 -1
- package/dist/es/value/index.mjs +2 -5
- package/dist/es/value/use-inverted-scale.mjs +0 -1
- package/dist/es/value/utils/resolve-motion-value.mjs +0 -2
- package/dist/framer-motion.dev.js +18 -25
- package/dist/framer-motion.js +1 -1
- package/dist/index.d.ts +4188 -0
- package/dist/projection.dev.js +16 -12
- package/dist/size-rollup-dom-animation.js +1 -1
- package/dist/size-rollup-dom-max.js +1 -1
- package/dist/size-webpack-dom-max.js +1 -1
- package/dist/three-entry.d.ts +2502 -0
- package/package.json +5 -5
- package/types/animation/animate.d.ts +0 -54
- package/types/animation/animation-controls.d.ts +0 -5
- package/types/animation/types.d.ts +0 -79
- package/types/animation/use-animated-state.d.ts +0 -6
- package/types/animation/use-animation.d.ts +0 -31
- package/types/animation/utils/default-transitions.d.ts +0 -19
- package/types/animation/utils/easing.d.ts +0 -3
- package/types/animation/utils/is-animatable.d.ts +0 -11
- package/types/animation/utils/is-animation-controls.d.ts +0 -2
- package/types/animation/utils/is-keyframes-target.d.ts +0 -2
- package/types/animation/utils/transitions.d.ts +0 -29
- package/types/animation/utils/variant-resolvers.d.ts +0 -12
- package/types/components/AnimatePresence/PresenceChild.d.ts +0 -12
- package/types/components/AnimatePresence/index.d.ts +0 -36
- package/types/components/AnimatePresence/types.d.ts +0 -61
- package/types/components/AnimatePresence/use-presence.d.ts +0 -52
- package/types/components/AnimateSharedLayout.d.ts +0 -2
- package/types/components/LayoutGroup/index.d.ts +0 -12
- package/types/components/LazyMotion/index.d.ts +0 -38
- package/types/components/LazyMotion/types.d.ts +0 -54
- package/types/components/MotionConfig/index.d.ts +0 -25
- package/types/components/Reorder/Group.d.ts +0 -297
- package/types/components/Reorder/Item.d.ts +0 -278
- package/types/components/Reorder/index.d.ts +0 -509
- package/types/components/Reorder/types.d.ts +0 -10
- package/types/components/Reorder/utils/check-reorder.d.ts +0 -2
- package/types/context/DeprecatedLayoutGroupContext.d.ts +0 -6
- package/types/context/LayoutGroupContext.d.ts +0 -11
- package/types/context/LazyContext.d.ts +0 -7
- package/types/context/MotionConfigContext.d.ts +0 -36
- package/types/context/MotionContext/create.d.ts +0 -3
- package/types/context/MotionContext/index.d.ts +0 -9
- package/types/context/MotionContext/utils.d.ts +0 -3
- package/types/context/PresenceContext.d.ts +0 -17
- package/types/context/ReorderContext.d.ts +0 -3
- package/types/context/SwitchLayoutGroupContext.d.ts +0 -23
- package/types/events/event-info.d.ts +0 -5
- package/types/events/types.d.ts +0 -10
- package/types/events/use-dom-event.d.ts +0 -24
- package/types/events/use-pointer-event.d.ts +0 -4
- package/types/events/utils.d.ts +0 -3
- package/types/gestures/PanSession.d.ts +0 -127
- package/types/gestures/drag/VisualElementDragControls.d.ts +0 -56
- package/types/gestures/drag/types.d.ts +0 -294
- package/types/gestures/drag/use-drag-controls.d.ts +0 -74
- package/types/gestures/drag/use-drag.d.ts +0 -7
- package/types/gestures/drag/utils/constraints.d.ts +0 -77
- package/types/gestures/drag/utils/lock.d.ts +0 -4
- package/types/gestures/types.d.ts +0 -225
- package/types/gestures/use-focus-gesture.d.ts +0 -8
- package/types/gestures/use-hover-gesture.d.ts +0 -2
- package/types/gestures/use-pan-gesture.d.ts +0 -14
- package/types/gestures/use-tap-gesture.d.ts +0 -6
- package/types/gestures/utils/event-type.d.ts +0 -2
- package/types/gestures/utils/is-node-or-child.d.ts +0 -8
- package/types/index.d.ts +0 -96
- package/types/motion/features/animations.d.ts +0 -2
- package/types/motion/features/definitions.d.ts +0 -3
- package/types/motion/features/drag.d.ts +0 -2
- package/types/motion/features/gestures.d.ts +0 -2
- package/types/motion/features/layout/MeasureLayout.d.ts +0 -3
- package/types/motion/features/layout/index.d.ts +0 -2
- package/types/motion/features/layout/types.d.ts +0 -75
- package/types/motion/features/types.d.ts +0 -52
- package/types/motion/features/use-features.d.ts +0 -8
- package/types/motion/features/use-projection.d.ts +0 -3
- package/types/motion/features/viewport/observers.d.ts +0 -3
- package/types/motion/features/viewport/types.d.ts +0 -21
- package/types/motion/features/viewport/use-viewport.d.ts +0 -2
- package/types/motion/index.d.ts +0 -25
- package/types/motion/types.d.ts +0 -279
- package/types/motion/utils/VisualElementHandler.d.ts +0 -18
- package/types/motion/utils/is-forced-motion-value.d.ts +0 -2
- package/types/motion/utils/make-renderless-component.d.ts +0 -2
- package/types/motion/utils/should-inherit-variant.d.ts +0 -2
- package/types/motion/utils/use-motion-ref.d.ts +0 -8
- package/types/motion/utils/use-visual-element.d.ts +0 -6
- package/types/motion/utils/use-visual-state.d.ts +0 -14
- package/types/motion/utils/valid-prop.d.ts +0 -9
- package/types/projection/animation/mix-values.d.ts +0 -2
- package/types/projection/geometry/conversion.d.ts +0 -14
- package/types/projection/geometry/copy.d.ts +0 -13
- package/types/projection/geometry/delta-apply.d.ts +0 -37
- package/types/projection/geometry/delta-calc.d.ts +0 -10
- package/types/projection/geometry/delta-remove.d.ts +0 -20
- package/types/projection/geometry/models.d.ts +0 -5
- package/types/projection/geometry/types.d.ts +0 -29
- package/types/projection/geometry/utils.d.ts +0 -3
- package/types/projection/index.d.ts +0 -14
- package/types/projection/node/DocumentProjectionNode.d.ts +0 -108
- package/types/projection/node/HTMLProjectionNode.d.ts +0 -112
- package/types/projection/node/create-projection-node.d.ts +0 -301
- package/types/projection/node/group.d.ts +0 -7
- package/types/projection/node/id.d.ts +0 -1
- package/types/projection/node/types.d.ts +0 -136
- package/types/projection/shared/stack.d.ts +0 -17
- package/types/projection/styles/scale-border-radius.d.ts +0 -11
- package/types/projection/styles/scale-box-shadow.d.ts +0 -2
- package/types/projection/styles/scale-correction.d.ts +0 -3
- package/types/projection/styles/transform-origin.d.ts +0 -0
- package/types/projection/styles/transform.d.ts +0 -4
- package/types/projection/styles/types.d.ts +0 -9
- package/types/projection/use-instant-layout-transition.d.ts +0 -1
- package/types/projection/use-reset-projection.d.ts +0 -1
- package/types/projection/utils/each-axis.d.ts +0 -3
- package/types/projection/utils/has-transform.d.ts +0 -3
- package/types/projection/utils/measure.d.ts +0 -4
- package/types/render/dom/create-visual-element.d.ts +0 -2
- package/types/render/dom/features-animation.d.ts +0 -5
- package/types/render/dom/features-max.d.ts +0 -5
- package/types/render/dom/motion-minimal.d.ts +0 -5
- package/types/render/dom/motion-proxy.d.ts +0 -30
- package/types/render/dom/motion.d.ts +0 -25
- package/types/render/dom/types.d.ts +0 -28
- package/types/render/dom/use-render.d.ts +0 -4
- package/types/render/dom/utils/camel-to-dash.d.ts +0 -4
- package/types/render/dom/utils/create-config.d.ts +0 -8
- package/types/render/dom/utils/css-variables-conversion.d.ts +0 -22
- package/types/render/dom/utils/filter-props.d.ts +0 -4
- package/types/render/dom/utils/is-css-variable.d.ts +0 -4
- package/types/render/dom/utils/is-svg-component.d.ts +0 -2
- package/types/render/dom/utils/parse-dom-variant.d.ts +0 -6
- package/types/render/dom/utils/unit-conversion.d.ts +0 -27
- package/types/render/dom/value-types/animatable-none.d.ts +0 -1
- package/types/render/dom/value-types/defaults.d.ts +0 -9
- package/types/render/dom/value-types/dimensions.d.ts +0 -8
- package/types/render/dom/value-types/find.d.ts +0 -9
- package/types/render/dom/value-types/get-as-type.d.ts +0 -5
- package/types/render/dom/value-types/number.d.ts +0 -2
- package/types/render/dom/value-types/test.d.ts +0 -5
- package/types/render/dom/value-types/type-auto.d.ts +0 -5
- package/types/render/dom/value-types/type-int.d.ts +0 -8
- package/types/render/dom/value-types/types.d.ts +0 -4
- package/types/render/html/config-motion.d.ts +0 -3
- package/types/render/html/supported-elements.d.ts +0 -7
- package/types/render/html/types.d.ts +0 -61
- package/types/render/html/use-props.d.ts +0 -8
- package/types/render/html/utils/build-styles.d.ts +0 -5
- package/types/render/html/utils/build-transform.d.ts +0 -15
- package/types/render/html/utils/create-render-state.d.ts +0 -7
- package/types/render/html/utils/render.d.ts +0 -4
- package/types/render/html/utils/scrape-motion-values.d.ts +0 -2
- package/types/render/html/utils/transform.d.ts +0 -15
- package/types/render/html/visual-element.d.ts +0 -6
- package/types/render/index.d.ts +0 -2
- package/types/render/svg/config-motion.d.ts +0 -3
- package/types/render/svg/lowercase-elements.d.ts +0 -5
- package/types/render/svg/supported-elements.d.ts +0 -7
- package/types/render/svg/types.d.ts +0 -44
- package/types/render/svg/use-props.d.ts +0 -7
- package/types/render/svg/utils/build-attrs.d.ts +0 -8
- package/types/render/svg/utils/camel-case-attrs.d.ts +0 -4
- package/types/render/svg/utils/create-render-state.d.ts +0 -2
- package/types/render/svg/utils/path.d.ts +0 -9
- package/types/render/svg/utils/render.d.ts +0 -4
- package/types/render/svg/utils/scrape-motion-values.d.ts +0 -2
- package/types/render/svg/utils/transform-origin.d.ts +0 -6
- package/types/render/svg/visual-element.d.ts +0 -2
- package/types/render/types.d.ts +0 -113
- package/types/render/utils/animation-state.d.ts +0 -31
- package/types/render/utils/animation.d.ts +0 -21
- package/types/render/utils/compare-by-depth.d.ts +0 -5
- package/types/render/utils/flat-tree.d.ts +0 -8
- package/types/render/utils/is-draggable.d.ts +0 -2
- package/types/render/utils/lifecycles.d.ts +0 -114
- package/types/render/utils/motion-values.d.ts +0 -3
- package/types/render/utils/setters.d.ts +0 -792
- package/types/render/utils/types.d.ts +0 -9
- package/types/render/utils/variants.d.ts +0 -20
- package/types/three-entry.d.ts +0 -19
- package/types/types.d.ts +0 -981
- package/types/utils/array.d.ts +0 -3
- package/types/utils/each-axis.d.ts +0 -1
- package/types/utils/is-browser.d.ts +0 -1
- package/types/utils/is-numerical-string.d.ts +0 -4
- package/types/utils/is-ref-object.d.ts +0 -2
- package/types/utils/is-zero-value-string.d.ts +0 -4
- package/types/utils/noop.d.ts +0 -1
- package/types/utils/process.d.ts +0 -1
- package/types/utils/resolve-value.d.ts +0 -3
- package/types/utils/shallow-compare.d.ts +0 -1
- package/types/utils/subscription-manager.d.ts +0 -9
- package/types/utils/time-conversion.d.ts +0 -7
- package/types/utils/transform.d.ts +0 -91
- package/types/utils/use-animation-frame.d.ts +0 -2
- package/types/utils/use-constant.d.ts +0 -10
- package/types/utils/use-cycle.d.ts +0 -30
- package/types/utils/use-force-update.d.ts +0 -1
- package/types/utils/use-id.d.ts +0 -6
- package/types/utils/use-instant-transition-state.d.ts +0 -3
- package/types/utils/use-instant-transition.d.ts +0 -1
- package/types/utils/use-is-mounted.d.ts +0 -2
- package/types/utils/use-isomorphic-effect.d.ts +0 -2
- package/types/utils/use-reduced-motion.d.ts +0 -28
- package/types/utils/use-unmount-effect.d.ts +0 -1
- package/types/utils/warn-once.d.ts +0 -2
- package/types/value/index.d.ts +0 -260
- package/types/value/scroll/use-element-scroll.d.ts +0 -28
- package/types/value/scroll/use-viewport-scroll.d.ts +0 -22
- package/types/value/scroll/utils.d.ts +0 -19
- package/types/value/use-combine-values.d.ts +0 -2
- package/types/value/use-inverted-scale.d.ts +0 -28
- package/types/value/use-motion-template.d.ts +0 -24
- package/types/value/use-motion-value.d.ts +0 -19
- package/types/value/use-on-change.d.ts +0 -3
- package/types/value/use-spring.d.ts +0 -22
- package/types/value/use-time.d.ts +0 -1
- package/types/value/use-transform.d.ts +0 -93
- package/types/value/use-velocity.d.ts +0 -13
- package/types/value/utils/is-motion-value.d.ts +0 -2
- package/types/value/utils/resolve-motion-value.d.ts +0 -10
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { MotionProps } from "../../motion/types";
|
|
3
|
-
import { MotionComponentConfig } from "../../motion";
|
|
4
|
-
/**
|
|
5
|
-
* I'd rather the return type of `custom` to be implicit but this throws
|
|
6
|
-
* incorrect relative paths in the exported types and API Extractor throws
|
|
7
|
-
* a wobbly.
|
|
8
|
-
*
|
|
9
|
-
* @internal
|
|
10
|
-
*/
|
|
11
|
-
export declare type CustomDomComponent<Props> = React.ForwardRefExoticComponent<React.PropsWithoutRef<Props & MotionProps> & React.RefAttributes<SVGElement | HTMLElement>>;
|
|
12
|
-
export interface CustomMotionComponentConfig {
|
|
13
|
-
forwardMotionProps?: boolean;
|
|
14
|
-
}
|
|
15
|
-
export declare type CreateConfig = <Instance, RenderState, Props>(Component: string | React.ComponentType<Props>, config: CustomMotionComponentConfig) => MotionComponentConfig<Instance, RenderState>;
|
|
16
|
-
/**
|
|
17
|
-
* Convert any React component into a `motion` component. The provided component
|
|
18
|
-
* **must** use `React.forwardRef` to the underlying DOM component you want to animate.
|
|
19
|
-
*
|
|
20
|
-
* ```jsx
|
|
21
|
-
* const Component = React.forwardRef((props, ref) => {
|
|
22
|
-
* return <div ref={ref} />
|
|
23
|
-
* })
|
|
24
|
-
*
|
|
25
|
-
* const MotionComponent = motion(Component)
|
|
26
|
-
* ```
|
|
27
|
-
*
|
|
28
|
-
* @public
|
|
29
|
-
*/
|
|
30
|
-
export declare function createMotionProxy(createConfig: CreateConfig): (<Props>(Component: string | React.ComponentType<Props>, customMotionComponentConfig?: CustomMotionComponentConfig) => CustomDomComponent<Props>) & import("../html/types").HTMLMotionComponents & import("../svg/types").SVGMotionComponents;
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { DOMMotionComponents } from "./types";
|
|
3
|
-
/**
|
|
4
|
-
* HTML & SVG components, optimised for use with gestures and animation. These can be used as
|
|
5
|
-
* drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported.
|
|
6
|
-
*
|
|
7
|
-
* @public
|
|
8
|
-
*/
|
|
9
|
-
export declare const motion: (<Props>(Component: string | import("react").ComponentType<Props>, customMotionComponentConfig?: import("./motion-proxy").CustomMotionComponentConfig) => import("./motion-proxy").CustomDomComponent<Props>) & import("../html/types").HTMLMotionComponents & import("../svg/types").SVGMotionComponents;
|
|
10
|
-
/**
|
|
11
|
-
* Create a DOM `motion` component with the provided string. This is primarily intended
|
|
12
|
-
* as a full alternative to `motion` for consumers who have to support environments that don't
|
|
13
|
-
* support `Proxy`.
|
|
14
|
-
*
|
|
15
|
-
* ```javascript
|
|
16
|
-
* import { createDomMotionComponent } from "framer-motion"
|
|
17
|
-
*
|
|
18
|
-
* const motion = {
|
|
19
|
-
* div: createDomMotionComponent('div')
|
|
20
|
-
* }
|
|
21
|
-
* ```
|
|
22
|
-
*
|
|
23
|
-
* @public
|
|
24
|
-
*/
|
|
25
|
-
export declare function createDomMotionComponent<T extends keyof DOMMotionComponents>(key: T): DOMMotionComponents[T];
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { TransformPoint } from "../../projection/geometry/types";
|
|
2
|
-
import { HTMLMotionComponents } from "../html/types";
|
|
3
|
-
import { SVGMotionComponents } from "../svg/types";
|
|
4
|
-
export interface DOMVisualElementOptions {
|
|
5
|
-
/**
|
|
6
|
-
* A function that can map a page point between spaces. Used by Framer
|
|
7
|
-
* to support dragging and layout animations within scaled space.
|
|
8
|
-
*
|
|
9
|
-
* @public
|
|
10
|
-
*/
|
|
11
|
-
transformPagePoint?: TransformPoint;
|
|
12
|
-
/**
|
|
13
|
-
* Allow `transform` to be set as `"none"` if all transforms are their default
|
|
14
|
-
* values. Switching to this removes the element as a GPU layer which can lead to subtle
|
|
15
|
-
* graphical shifts.
|
|
16
|
-
*
|
|
17
|
-
* @public
|
|
18
|
-
*/
|
|
19
|
-
allowTransformNone?: boolean;
|
|
20
|
-
/**
|
|
21
|
-
* Allow this element to be GPU-accelerated. We currently enable this by
|
|
22
|
-
* adding a `translateZ(0)`.
|
|
23
|
-
*
|
|
24
|
-
* @public
|
|
25
|
-
*/
|
|
26
|
-
enableHardwareAcceleration?: boolean;
|
|
27
|
-
}
|
|
28
|
-
export declare type DOMMotionComponents = HTMLMotionComponents & SVGMotionComponents;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { RenderComponent } from "../../motion/features/types";
|
|
2
|
-
import { HTMLRenderState } from "../html/types";
|
|
3
|
-
import { SVGRenderState } from "../svg/types";
|
|
4
|
-
export declare function createUseRender(forwardMotionProps?: boolean): RenderComponent<SVGElement | HTMLElement, HTMLRenderState | SVGRenderState>;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { FeatureComponents } from "../../../motion/features/types";
|
|
3
|
-
import { MotionComponentConfig } from "../../../motion";
|
|
4
|
-
import { HTMLRenderState } from "../../html/types";
|
|
5
|
-
import { SVGRenderState } from "../../svg/types";
|
|
6
|
-
import { CreateVisualElement } from "../../types";
|
|
7
|
-
import { CustomMotionComponentConfig } from "../motion-proxy";
|
|
8
|
-
export declare function createDomMotionConfig<Props>(Component: string | React.ComponentType<Props>, { forwardMotionProps }: CustomMotionComponentConfig, preloadedFeatures?: FeatureComponents, createVisualElement?: CreateVisualElement<any>, projectionNodeConstructor?: any): MotionComponentConfig<SVGElement, SVGRenderState> | MotionComponentConfig<HTMLElement, HTMLRenderState>;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { Target, TargetWithKeyframes } from "../../../types";
|
|
2
|
-
import { VisualElement } from "../../types";
|
|
3
|
-
/**
|
|
4
|
-
* Parse Framer's special CSS variable format into a CSS token and a fallback.
|
|
5
|
-
*
|
|
6
|
-
* ```
|
|
7
|
-
* `var(--foo, #fff)` => [`--foo`, '#fff']
|
|
8
|
-
* ```
|
|
9
|
-
*
|
|
10
|
-
* @param current
|
|
11
|
-
*/
|
|
12
|
-
export declare const cssVariableRegex: RegExp;
|
|
13
|
-
export declare function parseCSSVariable(current: string): string[] | undefined[];
|
|
14
|
-
/**
|
|
15
|
-
* Resolve CSS variables from
|
|
16
|
-
*
|
|
17
|
-
* @internal
|
|
18
|
-
*/
|
|
19
|
-
export declare function resolveCSSVariables(visualElement: VisualElement, { ...target }: TargetWithKeyframes, transitionEnd: Target | undefined): {
|
|
20
|
-
target: TargetWithKeyframes;
|
|
21
|
-
transitionEnd?: Target;
|
|
22
|
-
};
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { MotionProps } from "../../../motion/types";
|
|
2
|
-
export declare type IsValidProp = (key: string) => boolean;
|
|
3
|
-
export declare function loadExternalIsValidProp(isValidProp?: IsValidProp): void;
|
|
4
|
-
export declare function filterProps(props: MotionProps, isDom: boolean, forwardMotionProps: boolean): {};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { MakeTargetAnimatable } from "../../utils/animation";
|
|
2
|
-
/**
|
|
3
|
-
* Parse a DOM variant to make it animatable. This involves resolving CSS variables
|
|
4
|
-
* and ensuring animations like "20%" => "calc(50vw)" are performed in pixels.
|
|
5
|
-
*/
|
|
6
|
-
export declare const parseDomVariant: MakeTargetAnimatable;
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { Target, TargetWithKeyframes } from "../../../types";
|
|
2
|
-
import { VisualElement } from "../../types";
|
|
3
|
-
import { Box } from "../../../projection/geometry/types";
|
|
4
|
-
export declare enum BoundingBoxDimension {
|
|
5
|
-
width = "width",
|
|
6
|
-
height = "height",
|
|
7
|
-
left = "left",
|
|
8
|
-
right = "right",
|
|
9
|
-
top = "top",
|
|
10
|
-
bottom = "bottom"
|
|
11
|
-
}
|
|
12
|
-
declare type GetActualMeasurementInPixels = (bbox: Box, computedStyle: Partial<CSSStyleDeclaration>) => number;
|
|
13
|
-
export declare const positionalValues: {
|
|
14
|
-
[key: string]: GetActualMeasurementInPixels;
|
|
15
|
-
};
|
|
16
|
-
/**
|
|
17
|
-
* Convert value types for x/y/width/height/top/left/bottom/right
|
|
18
|
-
*
|
|
19
|
-
* Allows animation between `'auto'` -> `'100%'` or `0` -> `'calc(50% - 10vw)'`
|
|
20
|
-
*
|
|
21
|
-
* @internal
|
|
22
|
-
*/
|
|
23
|
-
export declare function unitConversion(visualElement: VisualElement, target: TargetWithKeyframes, origin?: Target, transitionEnd?: Target): {
|
|
24
|
-
target: TargetWithKeyframes;
|
|
25
|
-
transitionEnd?: Target;
|
|
26
|
-
};
|
|
27
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function getAnimatableNone(key: string, value: string): any;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { ValueTypeMap } from "./types";
|
|
2
|
-
/**
|
|
3
|
-
* A map of default value types for common values
|
|
4
|
-
*/
|
|
5
|
-
export declare const defaultValueTypes: ValueTypeMap;
|
|
6
|
-
/**
|
|
7
|
-
* Gets the default ValueType for the provided value key
|
|
8
|
-
*/
|
|
9
|
-
export declare const getDefaultValueType: (key: string) => import("style-value-types").ValueType;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* A list of value types commonly used for dimensions
|
|
3
|
-
*/
|
|
4
|
-
export declare const dimensionValueTypes: import("style-value-types").ValueType[];
|
|
5
|
-
/**
|
|
6
|
-
* Tests a dimensional value against the list of dimension ValueTypes
|
|
7
|
-
*/
|
|
8
|
-
export declare const findDimensionValueType: (v: any) => import("style-value-types").ValueType | undefined;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Tests a value against the list of ValueTypes
|
|
3
|
-
*/
|
|
4
|
-
export declare const findValueType: (v: any) => import("style-value-types").ValueType | {
|
|
5
|
-
test: (v: any) => boolean;
|
|
6
|
-
parse: (v: string | number) => (number | import("style-value-types").RGBA | import("style-value-types").HSLA)[];
|
|
7
|
-
createTransformer: (v: string | number) => (v: (string | number | import("style-value-types").Color)[]) => string;
|
|
8
|
-
getAnimatableNone: (v: string | number) => string;
|
|
9
|
-
} | undefined;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export declare const int: {
|
|
2
|
-
transform: (x: number) => number;
|
|
3
|
-
test: (v: any) => boolean;
|
|
4
|
-
parse: (v: any) => any;
|
|
5
|
-
createTransformer?: ((template: string) => import("style-value-types").Transformer) | undefined;
|
|
6
|
-
default?: any;
|
|
7
|
-
getAnimatableNone?: ((v: any) => any) | undefined;
|
|
8
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
declare type UnionStringArray<T extends Readonly<string[]>> = T[number];
|
|
2
|
-
/**
|
|
3
|
-
* @internal
|
|
4
|
-
*/
|
|
5
|
-
export declare const htmlElements: readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "var", "video", "wbr", "webview"];
|
|
6
|
-
export declare type HTMLElements = UnionStringArray<typeof htmlElements>;
|
|
7
|
-
export {};
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { ResolvedValues } from "../types";
|
|
2
|
-
import { DetailedHTMLFactory, ForwardRefExoticComponent, HTMLAttributes, PropsWithoutRef, ReactHTML, RefAttributes } from "react";
|
|
3
|
-
import { MotionProps } from "../../motion/types";
|
|
4
|
-
import { HTMLElements } from "./supported-elements";
|
|
5
|
-
export interface TransformOrigin {
|
|
6
|
-
originX?: number | string;
|
|
7
|
-
originY?: number | string;
|
|
8
|
-
originZ?: number | string;
|
|
9
|
-
}
|
|
10
|
-
export interface HTMLRenderState {
|
|
11
|
-
/**
|
|
12
|
-
* A mutable record of transforms we want to apply directly to the rendered Element
|
|
13
|
-
* every frame. We use a mutable data structure to reduce GC during animations.
|
|
14
|
-
*/
|
|
15
|
-
transform: ResolvedValues;
|
|
16
|
-
/**
|
|
17
|
-
* A mutable record of transform keys we want to apply to the rendered Element. We order
|
|
18
|
-
* this to order transforms in the desired order. We use a mutable data structure to reduce GC during animations.
|
|
19
|
-
*/
|
|
20
|
-
transformKeys: string[];
|
|
21
|
-
/**
|
|
22
|
-
* A mutable record of transform origins we want to apply directly to the rendered Element
|
|
23
|
-
* every frame. We use a mutable data structure to reduce GC during animations.
|
|
24
|
-
*/
|
|
25
|
-
transformOrigin: TransformOrigin;
|
|
26
|
-
/**
|
|
27
|
-
* A mutable record of styles we want to apply directly to the rendered Element
|
|
28
|
-
* every frame. We use a mutable data structure to reduce GC during animations.
|
|
29
|
-
*/
|
|
30
|
-
style: ResolvedValues;
|
|
31
|
-
/**
|
|
32
|
-
* A mutable record of CSS variables we want to apply directly to the rendered Element
|
|
33
|
-
* every frame. We use a mutable data structure to reduce GC during animations.
|
|
34
|
-
*/
|
|
35
|
-
vars: ResolvedValues;
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* @public
|
|
39
|
-
*/
|
|
40
|
-
export declare type ForwardRefComponent<T, P> = ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
|
|
41
|
-
/**
|
|
42
|
-
* Support for React component props
|
|
43
|
-
*/
|
|
44
|
-
declare type UnwrapFactoryAttributes<F> = F extends DetailedHTMLFactory<infer P, any> ? P : never;
|
|
45
|
-
declare type UnwrapFactoryElement<F> = F extends DetailedHTMLFactory<any, infer P> ? P : never;
|
|
46
|
-
declare type HTMLAttributesWithoutMotionProps<Attributes extends HTMLAttributes<Element>, Element extends HTMLElement> = {
|
|
47
|
-
[K in Exclude<keyof Attributes, keyof MotionProps>]?: Attributes[K];
|
|
48
|
-
};
|
|
49
|
-
/**
|
|
50
|
-
* @public
|
|
51
|
-
*/
|
|
52
|
-
export declare type HTMLMotionProps<TagName extends keyof ReactHTML> = HTMLAttributesWithoutMotionProps<UnwrapFactoryAttributes<ReactHTML[TagName]>, UnwrapFactoryElement<ReactHTML[TagName]>> & MotionProps;
|
|
53
|
-
/**
|
|
54
|
-
* Motion-optimised versions of React's HTML components.
|
|
55
|
-
*
|
|
56
|
-
* @public
|
|
57
|
-
*/
|
|
58
|
-
export declare type HTMLMotionComponents = {
|
|
59
|
-
[K in HTMLElements]: ForwardRefComponent<UnwrapFactoryElement<ReactHTML[K]>, HTMLMotionProps<K>>;
|
|
60
|
-
};
|
|
61
|
-
export {};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { MotionProps } from "../../motion/types";
|
|
2
|
-
import { MotionValue } from "../../value";
|
|
3
|
-
import { ResolvedValues } from "../types";
|
|
4
|
-
export declare function copyRawValuesOnly(target: ResolvedValues, source: {
|
|
5
|
-
[key: string]: string | number | MotionValue;
|
|
6
|
-
}, props: MotionProps): void;
|
|
7
|
-
export declare function useStyle(props: MotionProps, visualState: ResolvedValues, isStatic: boolean): ResolvedValues;
|
|
8
|
-
export declare function useHTMLProps(props: MotionProps, visualState: ResolvedValues, isStatic: boolean): any;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { MotionProps } from "../../../motion/types";
|
|
2
|
-
import { HTMLRenderState } from "../types";
|
|
3
|
-
import { ResolvedValues } from "../../types";
|
|
4
|
-
import { DOMVisualElementOptions } from "../../dom/types";
|
|
5
|
-
export declare function buildHTMLStyles(state: HTMLRenderState, latestValues: ResolvedValues, options: DOMVisualElementOptions, transformTemplate?: MotionProps["transformTemplate"]): void;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { DOMVisualElementOptions } from "../../dom/types";
|
|
2
|
-
import { MotionProps } from "../../../motion/types";
|
|
3
|
-
import { HTMLRenderState, TransformOrigin } from "../types";
|
|
4
|
-
/**
|
|
5
|
-
* Build a CSS transform style from individual x/y/scale etc properties.
|
|
6
|
-
*
|
|
7
|
-
* This outputs with a default order of transforms/scales/rotations, this can be customised by
|
|
8
|
-
* providing a transformTemplate function.
|
|
9
|
-
*/
|
|
10
|
-
export declare function buildTransform({ transform, transformKeys }: HTMLRenderState, { enableHardwareAcceleration, allowTransformNone, }: DOMVisualElementOptions, transformIsDefault: boolean, transformTemplate?: MotionProps["transformTemplate"]): string;
|
|
11
|
-
/**
|
|
12
|
-
* Build a transformOrigin style. Uses the same defaults as the browser for
|
|
13
|
-
* undefined origins.
|
|
14
|
-
*/
|
|
15
|
-
export declare function buildTransformOrigin({ originX, originY, originZ, }: TransformOrigin): string;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { MotionStyle } from "../../..";
|
|
2
|
-
import { IProjectionNode } from "../../../projection/node/types";
|
|
3
|
-
import { HTMLRenderState } from "../types";
|
|
4
|
-
export declare function renderHTML(element: HTMLElement, { style, vars }: HTMLRenderState, styleProp?: MotionStyle, projection?: IProjectionNode): void;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* A list of all transformable axes. We'll use this list to generated a version
|
|
3
|
-
* of each axes for each transform.
|
|
4
|
-
*/
|
|
5
|
-
export declare const transformAxes: string[];
|
|
6
|
-
/**
|
|
7
|
-
* Generate a list of every possible transform key.
|
|
8
|
-
*/
|
|
9
|
-
export declare const transformProps: string[];
|
|
10
|
-
/**
|
|
11
|
-
* A function to use with Array.sort to sort transform keys by their default order.
|
|
12
|
-
*/
|
|
13
|
-
export declare function sortTransformProps(a: string, b: string): number;
|
|
14
|
-
export declare function isTransformProp(key: string): boolean;
|
|
15
|
-
export declare function isTransformOriginProp(key: string): boolean;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { HTMLRenderState } from "./types";
|
|
2
|
-
import { VisualElementConfig } from "../types";
|
|
3
|
-
import { DOMVisualElementOptions } from "../dom/types";
|
|
4
|
-
export declare function getComputedStyle(element: HTMLElement): CSSStyleDeclaration;
|
|
5
|
-
export declare const htmlConfig: VisualElementConfig<HTMLElement, HTMLRenderState, DOMVisualElementOptions>;
|
|
6
|
-
export declare const htmlVisualElement: ({ parent, props, presenceId, blockInitialAnimation, visualState, shouldReduceMotion, }: import("../types").VisualElementOptions<HTMLElement, any>, options?: DOMVisualElementOptions) => import("../types").VisualElement<HTMLElement, any>;
|
package/types/render/index.d.ts
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import { VisualElement, VisualElementConfig, VisualElementOptions } from "./types";
|
|
2
|
-
export declare const visualElement: <Instance, MutableState, Options>({ treeType, build, getBaseTarget, makeTargetAnimatable, measureViewportBox, render: renderInstance, readValueFromInstance, removeValueFromRenderState, sortNodePosition, scrapeMotionValuesFromProps, }: VisualElementConfig<Instance, MutableState, Options>) => ({ parent, props, presenceId, blockInitialAnimation, visualState, shouldReduceMotion, }: VisualElementOptions<Instance, any>, options?: Options) => VisualElement<Instance, any>;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
declare type UnionStringArray<T extends Readonly<string[]>> = T[number];
|
|
2
|
-
/**
|
|
3
|
-
* @internal
|
|
4
|
-
*/
|
|
5
|
-
export declare const svgElements: readonly ["animate", "circle", "defs", "desc", "ellipse", "g", "image", "line", "filter", "marker", "mask", "metadata", "path", "pattern", "polygon", "polyline", "rect", "stop", "svg", "switch", "symbol", "text", "tspan", "use", "view", "clipPath", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "foreignObject", "linearGradient", "radialGradient", "textPath"];
|
|
6
|
-
export declare type SVGElements = UnionStringArray<typeof svgElements>;
|
|
7
|
-
export {};
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { ResolvedValues } from "../types";
|
|
2
|
-
import { SVGAttributes } from "react";
|
|
3
|
-
import { MakeMotion, MotionProps } from "../../motion/types";
|
|
4
|
-
import { SVGElements } from "./supported-elements";
|
|
5
|
-
import { ForwardRefComponent, HTMLRenderState } from "../html/types";
|
|
6
|
-
export interface SVGRenderState extends HTMLRenderState {
|
|
7
|
-
/**
|
|
8
|
-
* Measured dimensions of the SVG element to be used to calculate a transform-origin.
|
|
9
|
-
*/
|
|
10
|
-
dimensions?: SVGDimensions;
|
|
11
|
-
/**
|
|
12
|
-
* A mutable record of attributes we want to apply directly to the rendered Element
|
|
13
|
-
* every frame. We use a mutable data structure to reduce GC during animations.
|
|
14
|
-
*/
|
|
15
|
-
attrs: ResolvedValues;
|
|
16
|
-
}
|
|
17
|
-
export declare type SVGDimensions = {
|
|
18
|
-
x: number;
|
|
19
|
-
y: number;
|
|
20
|
-
width: number;
|
|
21
|
-
height: number;
|
|
22
|
-
};
|
|
23
|
-
interface SVGAttributesWithoutMotionProps<T> extends Pick<SVGAttributes<T>, Exclude<keyof SVGAttributes<T>, keyof MotionProps>> {
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* Blanket-accept any SVG attribute as a `MotionValue`
|
|
27
|
-
* @public
|
|
28
|
-
*/
|
|
29
|
-
export declare type SVGAttributesAsMotionValues<T> = MakeMotion<SVGAttributesWithoutMotionProps<T>>;
|
|
30
|
-
declare type UnwrapSVGFactoryElement<F> = F extends React.SVGProps<infer P> ? P : never;
|
|
31
|
-
/**
|
|
32
|
-
* @public
|
|
33
|
-
*/
|
|
34
|
-
export interface SVGMotionProps<T> extends SVGAttributesAsMotionValues<T>, MotionProps {
|
|
35
|
-
}
|
|
36
|
-
/**
|
|
37
|
-
* Motion-optimised versions of React's SVG components.
|
|
38
|
-
*
|
|
39
|
-
* @public
|
|
40
|
-
*/
|
|
41
|
-
export declare type SVGMotionComponents = {
|
|
42
|
-
[K in SVGElements]: ForwardRefComponent<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>, SVGMotionProps<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>>>;
|
|
43
|
-
};
|
|
44
|
-
export {};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { DOMVisualElementOptions } from "../../dom/types";
|
|
2
|
-
import { ResolvedValues } from "../../types";
|
|
3
|
-
import { MotionProps } from "../../../motion/types";
|
|
4
|
-
import { SVGRenderState } from "../types";
|
|
5
|
-
/**
|
|
6
|
-
* Build SVG visual attrbutes, like cx and style.transform
|
|
7
|
-
*/
|
|
8
|
-
export declare function buildSVGAttrs(state: SVGRenderState, { attrX, attrY, originX, originY, pathLength, pathSpacing, pathOffset, ...latest }: ResolvedValues, options: DOMVisualElementOptions, transformTemplate?: MotionProps["transformTemplate"]): void;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { ResolvedValues } from "../../types";
|
|
2
|
-
/**
|
|
3
|
-
* Build SVG path properties. Uses the path's measured length to convert
|
|
4
|
-
* our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
|
|
5
|
-
* and stroke-dasharray attributes.
|
|
6
|
-
*
|
|
7
|
-
* This function is mutative to reduce per-frame GC.
|
|
8
|
-
*/
|
|
9
|
-
export declare function buildSVGPath(attrs: ResolvedValues, length: number, spacing?: number, offset?: number, useDashCase?: boolean): void;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { MotionStyle } from "../../../motion/types";
|
|
2
|
-
import { IProjectionNode } from "../../../projection/node/types";
|
|
3
|
-
import { SVGRenderState } from "../types";
|
|
4
|
-
export declare function renderSVG(element: SVGElement, renderState: SVGRenderState, _styleProp?: MotionStyle, projection?: IProjectionNode): void;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { SVGDimensions } from "../types";
|
|
2
|
-
/**
|
|
3
|
-
* The SVG transform origin defaults are different to CSS and is less intuitive,
|
|
4
|
-
* so we use the measured dimensions of the SVG to reconcile these.
|
|
5
|
-
*/
|
|
6
|
-
export declare function calcSVGTransformOrigin(dimensions: SVGDimensions, originX: number | string, originY: number | string): string;
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import { DOMVisualElementOptions } from "../dom/types";
|
|
2
|
-
export declare const svgVisualElement: ({ parent, props, presenceId, blockInitialAnimation, visualState, shouldReduceMotion, }: import("../types").VisualElementOptions<SVGElement, any>, options?: DOMVisualElementOptions) => import("../types").VisualElement<SVGElement, any>;
|