framer-motion 5.3.3 → 5.4.0-beta

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.
Files changed (39) hide show
  1. package/dist/es/components/AnimatePresence/use-presence.mjs +1 -27
  2. package/dist/es/context/MotionContext/index.mjs +1 -1
  3. package/dist/es/events/use-dom-event.mjs +2 -31
  4. package/dist/es/events/use-pointer-event.mjs +2 -5
  5. package/dist/es/gestures/utils/event-type.mjs +1 -8
  6. package/dist/es/motion/index.mjs +1 -1
  7. package/dist/es/projection/geometry/models.mjs +1 -11
  8. package/dist/es/projection/node/create-projection-node.mjs +4 -1167
  9. package/dist/es/render/dom/value-types/dimensions.mjs +1 -8
  10. package/dist/es/render/three/create-visual-element.mjs +42 -0
  11. package/dist/es/render/three/gestures/use-hover.mjs +22 -0
  12. package/dist/es/render/three/gestures/use-tap.mjs +56 -0
  13. package/dist/es/render/three/motion.mjs +30 -0
  14. package/dist/es/render/three/use-render.mjs +11 -0
  15. package/dist/es/render/three/utils/read-value.mjs +43 -0
  16. package/dist/es/render/three/utils/set-value.mjs +59 -0
  17. package/dist/es/render/utils/animation.mjs +1 -4
  18. package/dist/es/render/utils/setters.mjs +2 -39
  19. package/dist/es/three-entry.mjs +1 -0
  20. package/dist/es/utils/array.mjs +2 -13
  21. package/dist/framer-motion-three.cjs.js +2995 -0
  22. package/dist/framer-motion.cjs.js +19 -21
  23. package/dist/framer-motion.dev.js +8 -10
  24. package/dist/framer-motion.js +1 -1
  25. package/dist/projection.dev.js +2 -2
  26. package/dist/size-rollup-m.js +1 -1
  27. package/package.json +24 -3
  28. package/types/motion/features/types.d.ts +1 -1
  29. package/types/render/three/create-visual-element.d.ts +6 -0
  30. package/types/render/three/gestures/use-hover.d.ts +10 -0
  31. package/types/render/three/gestures/use-tap.d.ts +8 -0
  32. package/types/render/three/motion.d.ts +5 -0
  33. package/types/render/three/types.d.ts +24 -0
  34. package/types/render/three/use-render.d.ts +4 -0
  35. package/types/render/three/utils/read-value.d.ts +2 -0
  36. package/types/render/three/utils/set-value.d.ts +2 -0
  37. package/types/render/utils/lifecycles.d.ts +8 -8
  38. package/types/render/utils/setters.d.ts +1 -0
  39. package/types/three-entry.d.ts +1 -0
@@ -38,34 +38,8 @@ function usePresence() {
38
38
  var safeToRemove = function () { return onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete(id); };
39
39
  return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
40
40
  }
41
- /**
42
- * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.
43
- * There is no `safeToRemove` function.
44
- *
45
- * ```jsx
46
- * import { useIsPresent } from "framer-motion"
47
- *
48
- * export const Component = () => {
49
- * const isPresent = useIsPresent()
50
- *
51
- * useEffect(() => {
52
- * !isPresent && console.log("I've been removed!")
53
- * }, [isPresent])
54
- *
55
- * return <div />
56
- * }
57
- * ```
58
- *
59
- * @public
60
- */
61
- function useIsPresent() {
62
- return isPresent(useContext(PresenceContext));
63
- }
64
- function isPresent(context) {
65
- return context === null ? true : context.isPresent;
66
- }
67
41
  var counter = 0;
68
42
  var incrementId = function () { return counter++; };
69
43
  var useUniqueId = function () { return useConstant(incrementId); };
70
44
 
71
- export { isPresent, useIsPresent, usePresence };
45
+ export { usePresence };
@@ -1,4 +1,4 @@
1
- import { useContext, createContext } from 'react';
1
+ import { createContext, useContext } from 'react';
2
2
 
3
3
  var MotionContext = createContext({});
4
4
  function useVisualElementContext() {
@@ -1,37 +1,8 @@
1
- import { useEffect } from 'react';
1
+ import 'react';
2
2
 
3
3
  function addDomEvent(target, eventName, handler, options) {
4
4
  target.addEventListener(eventName, handler, options);
5
5
  return function () { return target.removeEventListener(eventName, handler, options); };
6
6
  }
7
- /**
8
- * Attaches an event listener directly to the provided DOM element.
9
- *
10
- * Bypassing React's event system can be desirable, for instance when attaching non-passive
11
- * event handlers.
12
- *
13
- * ```jsx
14
- * const ref = useRef(null)
15
- *
16
- * useDomEvent(ref, 'wheel', onWheel, { passive: false })
17
- *
18
- * return <div ref={ref} />
19
- * ```
20
- *
21
- * @param ref - React.RefObject that's been provided to the element you want to bind the listener to.
22
- * @param eventName - Name of the event you want listen for.
23
- * @param handler - Function to fire when receiving the event.
24
- * @param options - Options to pass to `Event.addEventListener`.
25
- *
26
- * @public
27
- */
28
- function useDomEvent(ref, eventName, handler, options) {
29
- useEffect(function () {
30
- var element = ref.current;
31
- if (handler && element) {
32
- return addDomEvent(element, eventName, handler, options);
33
- }
34
- }, [ref, eventName, handler, options]);
35
- }
36
7
 
37
- export { addDomEvent, useDomEvent };
8
+ export { addDomEvent };
@@ -1,4 +1,4 @@
1
- import { useDomEvent, addDomEvent } from './use-dom-event.mjs';
1
+ import { addDomEvent } from './use-dom-event.mjs';
2
2
  import { wrapHandler } from './event-info.mjs';
3
3
  import { supportsPointerEvents, supportsTouchEvents, supportsMouseEvents } from './utils.mjs';
4
4
 
@@ -33,8 +33,5 @@ function getPointerEventName(name) {
33
33
  function addPointerEvent(target, eventName, handler, options) {
34
34
  return addDomEvent(target, getPointerEventName(eventName), wrapHandler(handler, eventName === "pointerdown"), options);
35
35
  }
36
- function usePointerEvent(ref, eventName, handler, options) {
37
- return useDomEvent(ref, getPointerEventName(eventName), handler && wrapHandler(handler, eventName === "pointerdown"), options);
38
- }
39
36
 
40
- export { addPointerEvent, usePointerEvent };
37
+ export { addPointerEvent };
@@ -1,13 +1,6 @@
1
- function isMouseEvent(event) {
2
- // PointerEvent inherits from MouseEvent so we can't use a straight instanceof check.
3
- if (typeof PointerEvent !== "undefined" && event instanceof PointerEvent) {
4
- return !!(event.pointerType === "mouse");
5
- }
6
- return event instanceof MouseEvent;
7
- }
8
1
  function isTouchEvent(event) {
9
2
  var hasTouches = !!event.touches;
10
3
  return hasTouches;
11
4
  }
12
5
 
13
- export { isMouseEvent, isTouchEvent };
6
+ export { isTouchEvent };
@@ -78,7 +78,7 @@ function createMotionComponent(_a) {
78
78
  */
79
79
  return (React.createElement(VisualElementHandler, { visualElement: context.visualElement, props: __assign(__assign({}, config), props) },
80
80
  features,
81
- React.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, config.isStatic))));
81
+ React.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, config.isStatic, context.visualElement))));
82
82
  }
83
83
  return forwardRef(MotionComponent);
84
84
  }
@@ -1,17 +1,7 @@
1
- var createAxisDelta = function () { return ({
2
- translate: 0,
3
- scale: 1,
4
- origin: 0,
5
- originPoint: 0,
6
- }); };
7
- var createDelta = function () { return ({
8
- x: createAxisDelta(),
9
- y: createAxisDelta(),
10
- }); };
11
1
  var createAxis = function () { return ({ min: 0, max: 0 }); };
12
2
  var createBox = function () { return ({
13
3
  x: createAxis(),
14
4
  y: createAxis(),
15
5
  }); };
16
6
 
17
- export { createAxis, createAxisDelta, createBox, createDelta };
7
+ export { createAxis, createBox };