motion 10.18.0 → 11.11.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/.turbo/turbo-build.log +32 -0
- package/{LICENSE → LICENSE.md} +2 -2
- package/README.md +99 -7
- package/dist/cjs/index.js +6117 -0
- package/dist/cjs/react-client.js +10003 -0
- package/dist/cjs/react-m.js +1852 -0
- package/dist/es/framer-motion/dist/es/animation/GroupPlaybackControls.mjs +78 -0
- package/dist/es/framer-motion/dist/es/animation/animate/index.mjs +34 -0
- package/dist/es/framer-motion/dist/es/animation/animate/resolve-subjects.mjs +19 -0
- package/dist/es/framer-motion/dist/es/animation/animate/sequence.mjs +14 -0
- package/dist/es/framer-motion/dist/es/animation/animate/single-value.mjs +11 -0
- package/dist/es/framer-motion/dist/es/animation/animate/subject.mjs +52 -0
- package/dist/es/framer-motion/dist/es/animation/animators/AcceleratedAnimation.mjs +318 -0
- package/dist/es/framer-motion/dist/es/animation/animators/BaseAnimation.mjs +113 -0
- package/dist/es/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs +384 -0
- package/dist/es/framer-motion/dist/es/animation/animators/drivers/driver-frameloop.mjs +17 -0
- package/dist/es/framer-motion/dist/es/animation/animators/utils/accelerated-values.mjs +14 -0
- package/dist/es/framer-motion/dist/es/animation/animators/utils/can-animate.mjs +42 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/NativeAnimation.mjs +169 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-elements.mjs +36 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs +12 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/easing.mjs +44 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/index.mjs +23 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/attach-timeline.mjs +6 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/get-final-keyframe.mjs +12 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/linear.mjs +15 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/memo-supports.mjs +9 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/style.mjs +8 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/supports-flags.mjs +9 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/supports-linear-easing.mjs +15 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/supports-partial-keyframes.mjs +13 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/supports-waapi.mjs +5 -0
- package/dist/es/framer-motion/dist/es/animation/generators/inertia.mjs +87 -0
- package/dist/es/framer-motion/dist/es/animation/generators/keyframes.mjs +51 -0
- package/dist/es/framer-motion/dist/es/animation/generators/spring/find.mjs +89 -0
- package/dist/es/framer-motion/dist/es/animation/generators/spring/index.mjs +129 -0
- package/dist/es/framer-motion/dist/es/animation/generators/utils/calc-duration.mjs +17 -0
- package/dist/es/framer-motion/dist/es/animation/generators/utils/is-generator.mjs +5 -0
- package/dist/es/framer-motion/dist/es/animation/generators/utils/velocity.mjs +9 -0
- package/dist/es/framer-motion/dist/es/animation/hooks/animation-controls.mjs +80 -0
- package/dist/es/framer-motion/dist/es/animation/hooks/use-animate-style.mjs +17 -0
- package/dist/es/framer-motion/dist/es/animation/hooks/use-animate.mjs +17 -0
- package/dist/es/framer-motion/dist/es/animation/hooks/use-animated-state.mjs +64 -0
- package/dist/es/framer-motion/dist/es/animation/hooks/use-animation.mjs +41 -0
- package/dist/es/framer-motion/dist/es/animation/interfaces/motion-value.mjs +113 -0
- package/dist/es/framer-motion/dist/es/animation/interfaces/visual-element-target.mjs +75 -0
- package/dist/es/framer-motion/dist/es/animation/interfaces/visual-element-variant.mjs +66 -0
- package/dist/es/framer-motion/dist/es/animation/interfaces/visual-element.mjs +26 -0
- package/dist/es/framer-motion/dist/es/animation/optimized-appear/data-id.mjs +6 -0
- package/dist/es/framer-motion/dist/es/animation/optimized-appear/get-appear-id.mjs +7 -0
- package/dist/es/framer-motion/dist/es/animation/optimized-appear/handoff.mjs +40 -0
- package/dist/es/framer-motion/dist/es/animation/optimized-appear/start.mjs +173 -0
- package/dist/es/framer-motion/dist/es/animation/optimized-appear/store-id.mjs +8 -0
- package/dist/es/framer-motion/dist/es/animation/optimized-appear/store.mjs +4 -0
- package/dist/es/framer-motion/dist/es/animation/sequence/create.mjs +230 -0
- package/dist/es/framer-motion/dist/es/animation/sequence/utils/calc-time.mjs +21 -0
- package/dist/es/framer-motion/dist/es/animation/sequence/utils/edit.mjs +31 -0
- package/dist/es/framer-motion/dist/es/animation/sequence/utils/sort.mjs +14 -0
- package/dist/es/framer-motion/dist/es/animation/utils/create-visual-element.mjs +44 -0
- package/dist/es/framer-motion/dist/es/animation/utils/default-transitions.mjs +40 -0
- package/dist/es/framer-motion/dist/es/animation/utils/get-value-transition.mjs +9 -0
- package/dist/es/framer-motion/dist/es/animation/utils/is-animatable.mjs +30 -0
- package/dist/es/framer-motion/dist/es/animation/utils/is-animation-controls.mjs +7 -0
- package/dist/es/framer-motion/dist/es/animation/utils/is-dom-keyframes.mjs +5 -0
- package/dist/es/framer-motion/dist/es/animation/utils/is-keyframes-target.mjs +5 -0
- package/dist/es/framer-motion/dist/es/animation/utils/is-none.mjs +15 -0
- package/dist/es/framer-motion/dist/es/animation/utils/is-transition-defined.mjs +10 -0
- package/dist/es/framer-motion/dist/es/animation/utils/stagger.mjs +26 -0
- package/dist/es/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs +77 -0
- package/dist/es/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs +61 -0
- package/dist/es/framer-motion/dist/es/components/AnimatePresence/index.mjs +163 -0
- package/dist/es/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs +66 -0
- package/dist/es/framer-motion/dist/es/components/AnimatePresence/utils.mjs +14 -0
- package/dist/es/framer-motion/dist/es/components/AnimateSharedLayout.mjs +15 -0
- package/dist/es/framer-motion/dist/es/components/LayoutGroup/index.mjs +32 -0
- package/dist/es/framer-motion/dist/es/components/LazyMotion/index.mjs +68 -0
- package/dist/es/framer-motion/dist/es/components/MotionConfig/index.mjs +48 -0
- package/dist/es/framer-motion/dist/es/components/Reorder/Group.mjs +53 -0
- package/dist/es/framer-motion/dist/es/components/Reorder/Item.mjs +34 -0
- package/dist/es/framer-motion/dist/es/components/Reorder/namespace.mjs +2 -0
- package/dist/es/framer-motion/dist/es/components/Reorder/utils/check-reorder.mjs +24 -0
- package/dist/es/framer-motion/dist/es/context/DeprecatedLayoutGroupContext.mjs +10 -0
- package/dist/es/framer-motion/dist/es/context/LayoutGroupContext.mjs +6 -0
- package/dist/es/framer-motion/dist/es/context/LazyContext.mjs +6 -0
- package/dist/es/framer-motion/dist/es/context/MotionConfigContext.mjs +13 -0
- package/dist/es/framer-motion/dist/es/context/MotionContext/create.mjs +13 -0
- package/dist/es/framer-motion/dist/es/context/MotionContext/index.mjs +6 -0
- package/dist/es/framer-motion/dist/es/context/MotionContext/utils.mjs +17 -0
- package/dist/es/framer-motion/dist/es/context/PresenceContext.mjs +9 -0
- package/dist/es/framer-motion/dist/es/context/ReorderContext.mjs +6 -0
- package/dist/es/framer-motion/dist/es/context/SwitchLayoutGroupContext.mjs +9 -0
- package/dist/es/framer-motion/dist/es/easing/anticipate.mjs +5 -0
- package/dist/es/framer-motion/dist/es/easing/back.mjs +9 -0
- package/dist/es/framer-motion/dist/es/easing/circ.mjs +8 -0
- package/dist/es/framer-motion/dist/es/easing/cubic-bezier.mjs +51 -0
- package/dist/es/framer-motion/dist/es/easing/ease.mjs +7 -0
- package/dist/es/framer-motion/dist/es/easing/modifiers/mirror.mjs +5 -0
- package/dist/es/framer-motion/dist/es/easing/modifiers/reverse.mjs +5 -0
- package/dist/es/framer-motion/dist/es/easing/steps.mjs +15 -0
- package/dist/es/framer-motion/dist/es/easing/utils/create-generator-easing.mjs +17 -0
- package/dist/es/framer-motion/dist/es/easing/utils/get-easing-for-segment.mjs +8 -0
- package/dist/es/framer-motion/dist/es/easing/utils/is-bezier-definition.mjs +3 -0
- package/dist/es/framer-motion/dist/es/easing/utils/is-easing-array.mjs +5 -0
- package/dist/es/framer-motion/dist/es/easing/utils/map.mjs +38 -0
- package/dist/es/framer-motion/dist/es/events/add-dom-event.mjs +6 -0
- package/dist/es/framer-motion/dist/es/events/add-pointer-event.mjs +8 -0
- package/dist/es/framer-motion/dist/es/events/event-info.mjs +15 -0
- package/dist/es/framer-motion/dist/es/events/use-dom-event.mjs +34 -0
- package/dist/es/framer-motion/dist/es/events/utils/is-primary-pointer.mjs +18 -0
- package/dist/es/framer-motion/dist/es/frameloop/batcher.mjs +74 -0
- package/dist/es/framer-motion/dist/es/frameloop/frame.mjs +6 -0
- package/dist/es/framer-motion/dist/es/frameloop/index-legacy.mjs +20 -0
- package/dist/es/framer-motion/dist/es/frameloop/microtask.mjs +5 -0
- package/dist/es/framer-motion/dist/es/frameloop/render-step.mjs +80 -0
- package/dist/es/framer-motion/dist/es/frameloop/sync-time.mjs +31 -0
- package/dist/es/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs +487 -0
- package/dist/es/framer-motion/dist/es/gestures/drag/index.mjs +27 -0
- package/dist/es/framer-motion/dist/es/gestures/drag/use-drag-controls.mjs +88 -0
- package/dist/es/framer-motion/dist/es/gestures/drag/utils/constraints.mjs +129 -0
- package/dist/es/framer-motion/dist/es/gestures/drag/utils/lock.mjs +53 -0
- package/dist/es/framer-motion/dist/es/gestures/focus.mjs +41 -0
- package/dist/es/framer-motion/dist/es/gestures/hover.mjs +33 -0
- package/dist/es/framer-motion/dist/es/gestures/pan/PanSession.mjs +156 -0
- package/dist/es/framer-motion/dist/es/gestures/pan/index.mjs +50 -0
- package/dist/es/framer-motion/dist/es/gestures/press.mjs +130 -0
- package/dist/es/framer-motion/dist/es/gestures/utils/is-node-or-child.mjs +20 -0
- package/dist/es/framer-motion/dist/es/motion/features/Feature.mjs +9 -0
- package/dist/es/framer-motion/dist/es/motion/features/animation/exit.mjs +31 -0
- package/dist/es/framer-motion/dist/es/motion/features/animation/index.mjs +41 -0
- package/dist/es/framer-motion/dist/es/motion/features/animations.mjs +13 -0
- package/dist/es/framer-motion/dist/es/motion/features/definitions.mjs +28 -0
- package/dist/es/framer-motion/dist/es/motion/features/drag.mjs +17 -0
- package/dist/es/framer-motion/dist/es/motion/features/gestures.mjs +21 -0
- package/dist/es/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs +134 -0
- package/dist/es/framer-motion/dist/es/motion/features/layout.mjs +11 -0
- package/dist/es/framer-motion/dist/es/motion/features/load-features.mjs +12 -0
- package/dist/es/framer-motion/dist/es/motion/features/viewport/index.mjs +72 -0
- package/dist/es/framer-motion/dist/es/motion/features/viewport/observers.mjs +49 -0
- package/dist/es/framer-motion/dist/es/motion/index.mjs +98 -0
- package/dist/es/framer-motion/dist/es/motion/utils/is-forced-motion-value.mjs +11 -0
- package/dist/es/framer-motion/dist/es/motion/utils/is-motion-component.mjs +12 -0
- package/dist/es/framer-motion/dist/es/motion/utils/symbol.mjs +3 -0
- package/dist/es/framer-motion/dist/es/motion/utils/unwrap-motion-component.mjs +17 -0
- package/dist/es/framer-motion/dist/es/motion/utils/use-motion-ref.mjs +36 -0
- package/dist/es/framer-motion/dist/es/motion/utils/use-visual-element.mjs +134 -0
- package/dist/es/framer-motion/dist/es/motion/utils/use-visual-state.mjs +82 -0
- package/dist/es/framer-motion/dist/es/motion/utils/valid-prop.mjs +57 -0
- package/dist/es/framer-motion/dist/es/projection/animation/mix-values.mjs +93 -0
- package/dist/es/framer-motion/dist/es/projection/geometry/conversion.mjs +33 -0
- package/dist/es/framer-motion/dist/es/projection/geometry/copy.mjs +31 -0
- package/dist/es/framer-motion/dist/es/projection/geometry/delta-apply.mjs +119 -0
- package/dist/es/framer-motion/dist/es/projection/geometry/delta-calc.mjs +52 -0
- package/dist/es/framer-motion/dist/es/projection/geometry/delta-remove.mjs +54 -0
- package/dist/es/framer-motion/dist/es/projection/geometry/models.mjs +17 -0
- package/dist/es/framer-motion/dist/es/projection/geometry/utils.mjs +31 -0
- package/dist/es/framer-motion/dist/es/projection/node/DocumentProjectionNode.mjs +13 -0
- package/dist/es/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs +27 -0
- package/dist/es/framer-motion/dist/es/projection/node/create-projection-node.mjs +1583 -0
- package/dist/es/framer-motion/dist/es/projection/node/group.mjs +24 -0
- package/dist/es/framer-motion/dist/es/projection/node/state.mjs +19 -0
- package/dist/es/framer-motion/dist/es/projection/shared/stack.mjs +112 -0
- package/dist/es/framer-motion/dist/es/projection/styles/scale-border-radius.mjs +41 -0
- package/dist/es/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs +35 -0
- package/dist/es/framer-motion/dist/es/projection/styles/scale-correction.mjs +6 -0
- package/dist/es/framer-motion/dist/es/projection/styles/transform.mjs +49 -0
- package/dist/es/framer-motion/dist/es/projection/use-instant-layout-transition.mjs +14 -0
- package/dist/es/framer-motion/dist/es/projection/use-reset-projection.mjs +14 -0
- package/dist/es/framer-motion/dist/es/projection/utils/each-axis.mjs +5 -0
- package/dist/es/framer-motion/dist/es/projection/utils/has-transform.mjs +26 -0
- package/dist/es/framer-motion/dist/es/projection/utils/measure.mjs +17 -0
- package/dist/es/framer-motion/dist/es/render/VisualElement.mjs +477 -0
- package/dist/es/framer-motion/dist/es/render/components/create-factory.mjs +23 -0
- package/dist/es/framer-motion/dist/es/render/components/create-proxy.mjs +38 -0
- package/dist/es/framer-motion/dist/es/render/components/m/create.mjs +6 -0
- package/dist/es/framer-motion/dist/es/render/components/m/elements.mjs +227 -0
- package/dist/es/framer-motion/dist/es/render/components/m/proxy.mjs +6 -0
- package/dist/es/framer-motion/dist/es/render/components/motion/create.mjs +15 -0
- package/dist/es/framer-motion/dist/es/render/components/motion/elements.mjs +194 -0
- package/dist/es/framer-motion/dist/es/render/components/motion/proxy.mjs +6 -0
- package/dist/es/framer-motion/dist/es/render/dom/DOMKeyframesResolver.mjs +130 -0
- package/dist/es/framer-motion/dist/es/render/dom/DOMVisualElement.mjs +28 -0
- package/dist/es/framer-motion/dist/es/render/dom/create-visual-element.mjs +14 -0
- package/dist/es/framer-motion/dist/es/render/dom/features-animation.mjs +14 -0
- package/dist/es/framer-motion/dist/es/render/dom/features-max.mjs +14 -0
- package/dist/es/framer-motion/dist/es/render/dom/features-min.mjs +12 -0
- package/dist/es/framer-motion/dist/es/render/dom/resize/handle-element.mjs +64 -0
- package/dist/es/framer-motion/dist/es/render/dom/resize/handle-window.mjs +30 -0
- package/dist/es/framer-motion/dist/es/render/dom/resize/index.mjs +8 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/index.mjs +80 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/info.mjs +56 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/observe.mjs +18 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/edge.mjs +45 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/index.mjs +59 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/inset.mjs +45 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/offset.mjs +35 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/presets.mjs +20 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/on-scroll-handler.mjs +48 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/supports.mjs +5 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/track.mjs +84 -0
- package/dist/es/framer-motion/dist/es/render/dom/use-render.mjs +33 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/camel-to-dash.mjs +6 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/css-variables-conversion.mjs +42 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/filter-props.mjs +59 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/is-css-variable.mjs +15 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/is-svg-component.mjs +30 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/is-svg-element.mjs +5 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/resolve-element.mjs +28 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/unit-conversion.mjs +65 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/animatable-none.mjs +15 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/defaults.mjs +30 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/dimensions.mjs +15 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/find.mjs +15 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/get-as-type.mjs +10 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/number-browser.mjs +41 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/number.mjs +18 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/test.mjs +6 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/transform.mjs +31 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/type-auto.mjs +9 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/type-int.mjs +8 -0
- package/dist/es/framer-motion/dist/es/render/dom/viewport/index.mjs +43 -0
- package/dist/es/framer-motion/dist/es/render/html/HTMLVisualElement.mjs +57 -0
- package/dist/es/framer-motion/dist/es/render/html/config-motion.mjs +12 -0
- package/dist/es/framer-motion/dist/es/render/html/use-props.mjs +57 -0
- package/dist/es/framer-motion/dist/es/render/html/utils/build-styles.mjs +65 -0
- package/dist/es/framer-motion/dist/es/render/html/utils/build-transform.mjs +62 -0
- package/dist/es/framer-motion/dist/es/render/html/utils/create-render-state.mjs +8 -0
- package/dist/es/framer-motion/dist/es/render/html/utils/make-none-animatable.mjs +30 -0
- package/dist/es/framer-motion/dist/es/render/html/utils/render.mjs +9 -0
- package/dist/es/framer-motion/dist/es/render/html/utils/scrape-motion-values.mjs +20 -0
- package/dist/es/framer-motion/dist/es/render/html/utils/transform.mjs +28 -0
- package/dist/es/framer-motion/dist/es/render/object/ObjectVisualElement.mjs +41 -0
- package/dist/es/framer-motion/dist/es/render/store.mjs +3 -0
- package/dist/es/framer-motion/dist/es/render/svg/SVGVisualElement.mjs +45 -0
- package/dist/es/framer-motion/dist/es/render/svg/config-motion.mjs +40 -0
- package/dist/es/framer-motion/dist/es/render/svg/lowercase-elements.mjs +33 -0
- package/dist/es/framer-motion/dist/es/render/svg/use-props.mjs +24 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/build-attrs.mjs +52 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/camel-case-attrs.mjs +30 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/create-render-state.mjs +8 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/is-svg-tag.mjs +3 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/path.mjs +32 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/render.mjs +12 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/scrape-motion-values.mjs +19 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/transform-origin.mjs +18 -0
- package/dist/es/framer-motion/dist/es/render/utils/KeyframesResolver.mjs +164 -0
- package/dist/es/framer-motion/dist/es/render/utils/animation-state.mjs +332 -0
- package/dist/es/framer-motion/dist/es/render/utils/compare-by-depth.mjs +3 -0
- package/dist/es/framer-motion/dist/es/render/utils/flat-tree.mjs +24 -0
- package/dist/es/framer-motion/dist/es/render/utils/get-variant-context.mjs +28 -0
- package/dist/es/framer-motion/dist/es/render/utils/is-controlling-variants.mjs +13 -0
- package/dist/es/framer-motion/dist/es/render/utils/is-variant-label.mjs +8 -0
- package/dist/es/framer-motion/dist/es/render/utils/motion-values.mjs +59 -0
- package/dist/es/framer-motion/dist/es/render/utils/resolve-dynamic-variants.mjs +8 -0
- package/dist/es/framer-motion/dist/es/render/utils/resolve-variants.mjs +36 -0
- package/dist/es/framer-motion/dist/es/render/utils/setters.mjs +27 -0
- package/dist/es/framer-motion/dist/es/render/utils/variant-props.mjs +12 -0
- package/dist/es/framer-motion/dist/es/utils/GlobalConfig.mjs +6 -0
- package/dist/es/framer-motion/dist/es/utils/array.mjs +21 -0
- package/dist/es/framer-motion/dist/es/utils/clamp.mjs +9 -0
- package/dist/es/framer-motion/dist/es/utils/delay.mjs +24 -0
- package/dist/es/framer-motion/dist/es/utils/distance.mjs +9 -0
- package/dist/es/framer-motion/dist/es/utils/errors.mjs +18 -0
- package/dist/es/framer-motion/dist/es/utils/get-context-window.mjs +6 -0
- package/dist/es/framer-motion/dist/es/utils/hsla-to-rgba.mjs +42 -0
- package/dist/es/framer-motion/dist/es/utils/interpolate.mjs +75 -0
- package/dist/es/framer-motion/dist/es/utils/is-browser.mjs +3 -0
- package/dist/es/framer-motion/dist/es/utils/is-numerical-string.mjs +6 -0
- package/dist/es/framer-motion/dist/es/utils/is-ref-object.mjs +7 -0
- package/dist/es/framer-motion/dist/es/utils/is-zero-value-string.mjs +6 -0
- package/dist/es/framer-motion/dist/es/utils/memo.mjs +10 -0
- package/dist/es/framer-motion/dist/es/utils/mix/color.mjs +47 -0
- package/dist/es/framer-motion/dist/es/utils/mix/complex.mjs +94 -0
- package/dist/es/framer-motion/dist/es/utils/mix/immediate.mjs +5 -0
- package/dist/es/framer-motion/dist/es/utils/mix/index.mjs +14 -0
- package/dist/es/framer-motion/dist/es/utils/mix/number.mjs +26 -0
- package/dist/es/framer-motion/dist/es/utils/mix/visibility.mjs +16 -0
- package/dist/es/framer-motion/dist/es/utils/noop.mjs +3 -0
- package/dist/es/framer-motion/dist/es/utils/offsets/default.mjs +9 -0
- package/dist/es/framer-motion/dist/es/utils/offsets/fill.mjs +12 -0
- package/dist/es/framer-motion/dist/es/utils/offsets/time.mjs +5 -0
- package/dist/es/framer-motion/dist/es/utils/pipe.mjs +11 -0
- package/dist/es/framer-motion/dist/es/utils/progress.mjs +18 -0
- package/dist/es/framer-motion/dist/es/utils/reduced-motion/index.mjs +19 -0
- package/dist/es/framer-motion/dist/es/utils/reduced-motion/state.mjs +5 -0
- package/dist/es/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion-config.mjs +19 -0
- package/dist/es/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs +47 -0
- package/dist/es/framer-motion/dist/es/utils/resolve-value.mjs +11 -0
- package/dist/es/framer-motion/dist/es/utils/shallow-compare.mjs +14 -0
- package/dist/es/framer-motion/dist/es/utils/subscription-manager.mjs +40 -0
- package/dist/es/framer-motion/dist/es/utils/time-conversion.mjs +10 -0
- package/dist/es/framer-motion/dist/es/utils/transform.mjs +21 -0
- package/dist/es/framer-motion/dist/es/utils/use-animation-frame.mjs +21 -0
- package/dist/es/framer-motion/dist/es/utils/use-constant.mjs +18 -0
- package/dist/es/framer-motion/dist/es/utils/use-cycle.mjs +47 -0
- package/dist/es/framer-motion/dist/es/utils/use-force-update.mjs +19 -0
- package/dist/es/framer-motion/dist/es/utils/use-in-view.mjs +23 -0
- package/dist/es/framer-motion/dist/es/utils/use-instant-transition-state.mjs +5 -0
- package/dist/es/framer-motion/dist/es/utils/use-instant-transition.mjs +41 -0
- package/dist/es/framer-motion/dist/es/utils/use-is-mounted.mjs +15 -0
- package/dist/es/framer-motion/dist/es/utils/use-isomorphic-effect.mjs +6 -0
- package/dist/es/framer-motion/dist/es/utils/use-motion-value-event.mjs +13 -0
- package/dist/es/framer-motion/dist/es/utils/use-unmount-effect.mjs +7 -0
- package/dist/es/framer-motion/dist/es/utils/velocity-per-second.mjs +11 -0
- package/dist/es/framer-motion/dist/es/utils/warn-once.mjs +11 -0
- package/dist/es/framer-motion/dist/es/utils/wrap.mjs +6 -0
- package/dist/es/framer-motion/dist/es/value/index.mjs +319 -0
- package/dist/es/framer-motion/dist/es/value/scroll/use-element-scroll.mjs +14 -0
- package/dist/es/framer-motion/dist/es/value/scroll/use-viewport-scroll.mjs +14 -0
- package/dist/es/framer-motion/dist/es/value/types/color/hex.mjs +40 -0
- package/dist/es/framer-motion/dist/es/value/types/color/hsla.mjs +22 -0
- package/dist/es/framer-motion/dist/es/value/types/color/index.mjs +27 -0
- package/dist/es/framer-motion/dist/es/value/types/color/rgba.mjs +25 -0
- package/dist/es/framer-motion/dist/es/value/types/color/utils.mjs +29 -0
- package/dist/es/framer-motion/dist/es/value/types/complex/filter.mjs +30 -0
- package/dist/es/framer-motion/dist/es/value/types/complex/index.mjs +92 -0
- package/dist/es/framer-motion/dist/es/value/types/numbers/index.mjs +17 -0
- package/dist/es/framer-motion/dist/es/value/types/numbers/units.mjs +17 -0
- package/dist/es/framer-motion/dist/es/value/types/utils/color-regex.mjs +3 -0
- package/dist/es/framer-motion/dist/es/value/types/utils/float-regex.mjs +3 -0
- package/dist/es/framer-motion/dist/es/value/types/utils/is-nullish.mjs +5 -0
- package/dist/es/framer-motion/dist/es/value/types/utils/sanitize.mjs +5 -0
- package/dist/es/framer-motion/dist/es/value/types/utils/single-color-regex.mjs +3 -0
- package/dist/es/framer-motion/dist/es/value/use-combine-values.mjs +37 -0
- package/dist/es/framer-motion/dist/es/value/use-computed.mjs +19 -0
- package/dist/es/framer-motion/dist/es/value/use-inverted-scale.mjs +52 -0
- package/dist/es/framer-motion/dist/es/value/use-motion-template.mjs +45 -0
- package/dist/es/framer-motion/dist/es/value/use-motion-value.mjs +38 -0
- package/dist/es/framer-motion/dist/es/value/use-scroll.mjs +39 -0
- package/dist/es/framer-motion/dist/es/value/use-spring.mjs +85 -0
- package/dist/es/framer-motion/dist/es/value/use-time.mjs +10 -0
- package/dist/es/framer-motion/dist/es/value/use-transform.mjs +29 -0
- package/dist/es/framer-motion/dist/es/value/use-velocity.mjs +35 -0
- package/dist/es/framer-motion/dist/es/value/use-will-change/WillChangeMotionValue.mjs +22 -0
- package/dist/es/framer-motion/dist/es/value/use-will-change/add-will-change.mjs +14 -0
- package/dist/es/framer-motion/dist/es/value/use-will-change/get-will-change-name.mjs +14 -0
- package/dist/es/framer-motion/dist/es/value/use-will-change/index.mjs +8 -0
- package/dist/es/framer-motion/dist/es/value/use-will-change/is.mjs +7 -0
- package/dist/es/framer-motion/dist/es/value/utils/is-motion-value.mjs +3 -0
- package/dist/es/framer-motion/dist/es/value/utils/resolve-motion-value.mjs +16 -0
- package/dist/es/motion/lib/index.mjs +30 -0
- package/dist/es/motion/lib/react-client.mjs +3 -0
- package/dist/es/motion/lib/react-m.mjs +3 -0
- package/dist/es/motion/lib/react.mjs +110 -0
- package/dist/index.d.ts +1 -0
- package/dist/motion.dev.js +6121 -0
- package/dist/motion.js +1 -0
- package/dist/react-client.d.ts +1 -0
- package/dist/react-m.d.ts +1 -0
- package/dist/react.d.ts +1 -0
- package/lib/index.js +1 -3
- package/lib/index.js.map +1 -1
- package/lib/react-client.js +3 -0
- package/lib/react-client.js.map +1 -0
- package/lib/react-m.js +3 -0
- package/lib/react-m.js.map +1 -0
- package/lib/react.js +3 -0
- package/lib/react.js.map +1 -0
- package/package.json +79 -29
- package/react/package.json +6 -0
- package/react-client/package.json +6 -0
- package/react-m/package.json +6 -0
- package/rollup.config.mjs +184 -0
- package/src/index.ts +1 -0
- package/src/react-client.ts +3 -0
- package/src/react-m.ts +3 -0
- package/src/react.ts +3 -0
- package/tsconfig.json +25 -0
- package/types/index.d.ts +1 -4
- package/types/react-client.d.ts +1 -0
- package/types/react-m.d.ts +1 -0
- package/types/react.d.ts +1 -0
- package/CHANGELOG.md +0 -378
- package/dist/animate.cjs.js +0 -22
- package/dist/animate.es.js +0 -19
- package/dist/main.cjs.js +0 -21
- package/dist/main.es.js +0 -3
- package/dist/motion.min.js +0 -1
- package/dist/motion.umd.js +0 -2364
- package/dist/size-index.js +0 -1
- package/lib/animate.js +0 -17
- package/lib/animate.js.map +0 -1
- package/types/animate.d.ts +0 -6
- package/types/animate.d.ts.map +0 -1
- package/types/index.d.ts.map +0 -1
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
3
|
+
import { useMemo, useRef, useState, useContext } from 'react';
|
|
4
|
+
import { PresenceChild } from './PresenceChild.mjs';
|
|
5
|
+
import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';
|
|
6
|
+
import { invariant } from '../../utils/errors.mjs';
|
|
7
|
+
import { useConstant } from '../../utils/use-constant.mjs';
|
|
8
|
+
import { onlyElements, getChildKey } from './utils.mjs';
|
|
9
|
+
import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* `AnimatePresence` enables the animation of components that have been removed from the tree.
|
|
13
|
+
*
|
|
14
|
+
* When adding/removing more than a single child, every child **must** be given a unique `key` prop.
|
|
15
|
+
*
|
|
16
|
+
* Any `motion` components that have an `exit` property defined will animate out when removed from
|
|
17
|
+
* the tree.
|
|
18
|
+
*
|
|
19
|
+
* ```jsx
|
|
20
|
+
* import { motion, AnimatePresence } from 'framer-motion'
|
|
21
|
+
*
|
|
22
|
+
* export const Items = ({ items }) => (
|
|
23
|
+
* <AnimatePresence>
|
|
24
|
+
* {items.map(item => (
|
|
25
|
+
* <motion.div
|
|
26
|
+
* key={item.id}
|
|
27
|
+
* initial={{ opacity: 0 }}
|
|
28
|
+
* animate={{ opacity: 1 }}
|
|
29
|
+
* exit={{ opacity: 0 }}
|
|
30
|
+
* />
|
|
31
|
+
* ))}
|
|
32
|
+
* </AnimatePresence>
|
|
33
|
+
* )
|
|
34
|
+
* ```
|
|
35
|
+
*
|
|
36
|
+
* You can sequence exit animations throughout a tree using variants.
|
|
37
|
+
*
|
|
38
|
+
* If a child contains multiple `motion` components with `exit` props, it will only unmount the child
|
|
39
|
+
* once all `motion` components have finished animating out. Likewise, any components using
|
|
40
|
+
* `usePresence` all need to call `safeToRemove`.
|
|
41
|
+
*
|
|
42
|
+
* @public
|
|
43
|
+
*/
|
|
44
|
+
const AnimatePresence = ({ children, exitBeforeEnter, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", }) => {
|
|
45
|
+
invariant(!exitBeforeEnter, "Replace exitBeforeEnter with mode='wait'");
|
|
46
|
+
/**
|
|
47
|
+
* Filter any children that aren't ReactElements. We can only track components
|
|
48
|
+
* between renders with a props.key.
|
|
49
|
+
*/
|
|
50
|
+
const presentChildren = useMemo(() => onlyElements(children), [children]);
|
|
51
|
+
/**
|
|
52
|
+
* Track the keys of the currently rendered children. This is used to
|
|
53
|
+
* determine which children are exiting.
|
|
54
|
+
*/
|
|
55
|
+
const presentKeys = presentChildren.map(getChildKey);
|
|
56
|
+
/**
|
|
57
|
+
* If `initial={false}` we only want to pass this to components in the first render.
|
|
58
|
+
*/
|
|
59
|
+
const isInitialRender = useRef(true);
|
|
60
|
+
/**
|
|
61
|
+
* A ref containing the currently present children. When all exit animations
|
|
62
|
+
* are complete, we use this to re-render the component with the latest children
|
|
63
|
+
* *committed* rather than the latest children *rendered*.
|
|
64
|
+
*/
|
|
65
|
+
const pendingPresentChildren = useRef(presentChildren);
|
|
66
|
+
/**
|
|
67
|
+
* Track which exiting children have finished animating out.
|
|
68
|
+
*/
|
|
69
|
+
const exitComplete = useConstant(() => new Map());
|
|
70
|
+
/**
|
|
71
|
+
* Save children to render as React state. To ensure this component is concurrent-safe,
|
|
72
|
+
* we check for exiting children via an effect.
|
|
73
|
+
*/
|
|
74
|
+
const [diffedChildren, setDiffedChildren] = useState(presentChildren);
|
|
75
|
+
const [renderedChildren, setRenderedChildren] = useState(presentChildren);
|
|
76
|
+
useIsomorphicLayoutEffect(() => {
|
|
77
|
+
isInitialRender.current = false;
|
|
78
|
+
pendingPresentChildren.current = presentChildren;
|
|
79
|
+
/**
|
|
80
|
+
* Update complete status of exiting children.
|
|
81
|
+
*/
|
|
82
|
+
for (let i = 0; i < renderedChildren.length; i++) {
|
|
83
|
+
const key = getChildKey(renderedChildren[i]);
|
|
84
|
+
if (!presentKeys.includes(key)) {
|
|
85
|
+
if (exitComplete.get(key) !== true) {
|
|
86
|
+
exitComplete.set(key, false);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
else {
|
|
90
|
+
exitComplete.delete(key);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}, [renderedChildren, presentKeys.length, presentKeys.join("-")]);
|
|
94
|
+
const exitingChildren = [];
|
|
95
|
+
if (presentChildren !== diffedChildren) {
|
|
96
|
+
let nextChildren = [...presentChildren];
|
|
97
|
+
/**
|
|
98
|
+
* Loop through all the currently rendered components and decide which
|
|
99
|
+
* are exiting.
|
|
100
|
+
*/
|
|
101
|
+
for (let i = 0; i < renderedChildren.length; i++) {
|
|
102
|
+
const child = renderedChildren[i];
|
|
103
|
+
const key = getChildKey(child);
|
|
104
|
+
if (!presentKeys.includes(key)) {
|
|
105
|
+
nextChildren.splice(i, 0, child);
|
|
106
|
+
exitingChildren.push(child);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* If we're in "wait" mode, and we have exiting children, we want to
|
|
111
|
+
* only render these until they've all exited.
|
|
112
|
+
*/
|
|
113
|
+
if (mode === "wait" && exitingChildren.length) {
|
|
114
|
+
nextChildren = exitingChildren;
|
|
115
|
+
}
|
|
116
|
+
setRenderedChildren(onlyElements(nextChildren));
|
|
117
|
+
setDiffedChildren(presentChildren);
|
|
118
|
+
/**
|
|
119
|
+
* Early return to ensure once we've set state with the latest diffed
|
|
120
|
+
* children, we can immediately re-render.
|
|
121
|
+
*/
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
124
|
+
if (process.env.NODE_ENV !== "production" &&
|
|
125
|
+
mode === "wait" &&
|
|
126
|
+
renderedChildren.length > 1) {
|
|
127
|
+
console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
|
|
128
|
+
}
|
|
129
|
+
/**
|
|
130
|
+
* If we've been provided a forceRender function by the LayoutGroupContext,
|
|
131
|
+
* we can use it to force a re-render amongst all surrounding components once
|
|
132
|
+
* all components have finished animating out.
|
|
133
|
+
*/
|
|
134
|
+
const { forceRender } = useContext(LayoutGroupContext);
|
|
135
|
+
return (jsx(Fragment, { children: renderedChildren.map((child) => {
|
|
136
|
+
const key = getChildKey(child);
|
|
137
|
+
const isPresent = presentChildren === renderedChildren ||
|
|
138
|
+
presentKeys.includes(key);
|
|
139
|
+
const onExit = () => {
|
|
140
|
+
if (exitComplete.has(key)) {
|
|
141
|
+
exitComplete.set(key, true);
|
|
142
|
+
}
|
|
143
|
+
else {
|
|
144
|
+
return;
|
|
145
|
+
}
|
|
146
|
+
let isEveryExitComplete = true;
|
|
147
|
+
exitComplete.forEach((isExitComplete) => {
|
|
148
|
+
if (!isExitComplete)
|
|
149
|
+
isEveryExitComplete = false;
|
|
150
|
+
});
|
|
151
|
+
if (isEveryExitComplete) {
|
|
152
|
+
forceRender === null || forceRender === void 0 ? void 0 : forceRender();
|
|
153
|
+
setRenderedChildren(pendingPresentChildren.current);
|
|
154
|
+
onExitComplete && onExitComplete();
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
return (jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial
|
|
158
|
+
? undefined
|
|
159
|
+
: false, custom: isPresent ? undefined : custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, onExitComplete: isPresent ? undefined : onExit, children: child }, key));
|
|
160
|
+
}) }));
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
export { AnimatePresence };
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { useContext, useId, useEffect, useCallback } from 'react';
|
|
2
|
+
import { PresenceContext } from '../../context/PresenceContext.mjs';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* When a component is the child of `AnimatePresence`, it can use `usePresence`
|
|
6
|
+
* to access information about whether it's still present in the React tree.
|
|
7
|
+
*
|
|
8
|
+
* ```jsx
|
|
9
|
+
* import { usePresence } from "framer-motion"
|
|
10
|
+
*
|
|
11
|
+
* export const Component = () => {
|
|
12
|
+
* const [isPresent, safeToRemove] = usePresence()
|
|
13
|
+
*
|
|
14
|
+
* useEffect(() => {
|
|
15
|
+
* !isPresent && setTimeout(safeToRemove, 1000)
|
|
16
|
+
* }, [isPresent])
|
|
17
|
+
*
|
|
18
|
+
* return <div />
|
|
19
|
+
* }
|
|
20
|
+
* ```
|
|
21
|
+
*
|
|
22
|
+
* If `isPresent` is `false`, it means that a component has been removed the tree, but
|
|
23
|
+
* `AnimatePresence` won't really remove it until `safeToRemove` has been called.
|
|
24
|
+
*
|
|
25
|
+
* @public
|
|
26
|
+
*/
|
|
27
|
+
function usePresence() {
|
|
28
|
+
const context = useContext(PresenceContext);
|
|
29
|
+
if (context === null)
|
|
30
|
+
return [true, null];
|
|
31
|
+
const { isPresent, onExitComplete, register } = context;
|
|
32
|
+
// It's safe to call the following hooks conditionally (after an early return) because the context will always
|
|
33
|
+
// either be null or non-null for the lifespan of the component.
|
|
34
|
+
const id = useId();
|
|
35
|
+
useEffect(() => register(id), []);
|
|
36
|
+
const safeToRemove = useCallback(() => onExitComplete && onExitComplete(id), [id, onExitComplete]);
|
|
37
|
+
return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.
|
|
41
|
+
* There is no `safeToRemove` function.
|
|
42
|
+
*
|
|
43
|
+
* ```jsx
|
|
44
|
+
* import { useIsPresent } from "framer-motion"
|
|
45
|
+
*
|
|
46
|
+
* export const Component = () => {
|
|
47
|
+
* const isPresent = useIsPresent()
|
|
48
|
+
*
|
|
49
|
+
* useEffect(() => {
|
|
50
|
+
* !isPresent && console.log("I've been removed!")
|
|
51
|
+
* }, [isPresent])
|
|
52
|
+
*
|
|
53
|
+
* return <div />
|
|
54
|
+
* }
|
|
55
|
+
* ```
|
|
56
|
+
*
|
|
57
|
+
* @public
|
|
58
|
+
*/
|
|
59
|
+
function useIsPresent() {
|
|
60
|
+
return isPresent(useContext(PresenceContext));
|
|
61
|
+
}
|
|
62
|
+
function isPresent(context) {
|
|
63
|
+
return context === null ? true : context.isPresent;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
export { isPresent, useIsPresent, usePresence };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Children, isValidElement } from 'react';
|
|
2
|
+
|
|
3
|
+
const getChildKey = (child) => child.key || "";
|
|
4
|
+
function onlyElements(children) {
|
|
5
|
+
const filtered = [];
|
|
6
|
+
// We use forEach here instead of map as map mutates the component key by preprending `.$`
|
|
7
|
+
Children.forEach(children, (child) => {
|
|
8
|
+
if (isValidElement(child))
|
|
9
|
+
filtered.push(child);
|
|
10
|
+
});
|
|
11
|
+
return filtered;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export { getChildKey, onlyElements };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { invariant } from '../utils/errors.mjs';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { useConstant } from '../utils/use-constant.mjs';
|
|
5
|
+
import { LayoutGroup } from './LayoutGroup/index.mjs';
|
|
6
|
+
|
|
7
|
+
let id = 0;
|
|
8
|
+
const AnimateSharedLayout = ({ children }) => {
|
|
9
|
+
React.useEffect(() => {
|
|
10
|
+
invariant(false, "AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations");
|
|
11
|
+
}, []);
|
|
12
|
+
return (jsx(LayoutGroup, { id: useConstant(() => `asl-${id++}`), children: children }));
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export { AnimateSharedLayout };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { useContext, useRef, useMemo } from 'react';
|
|
4
|
+
import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';
|
|
5
|
+
import { DeprecatedLayoutGroupContext } from '../../context/DeprecatedLayoutGroupContext.mjs';
|
|
6
|
+
import { useForceUpdate } from '../../utils/use-force-update.mjs';
|
|
7
|
+
import { nodeGroup } from '../../projection/node/group.mjs';
|
|
8
|
+
|
|
9
|
+
const shouldInheritGroup = (inherit) => inherit === true;
|
|
10
|
+
const shouldInheritId = (inherit) => shouldInheritGroup(inherit === true) || inherit === "id";
|
|
11
|
+
const LayoutGroup = ({ children, id, inherit = true }) => {
|
|
12
|
+
const layoutGroupContext = useContext(LayoutGroupContext);
|
|
13
|
+
const deprecatedLayoutGroupContext = useContext(DeprecatedLayoutGroupContext);
|
|
14
|
+
const [forceRender, key] = useForceUpdate();
|
|
15
|
+
const context = useRef(null);
|
|
16
|
+
const upstreamId = layoutGroupContext.id || deprecatedLayoutGroupContext;
|
|
17
|
+
if (context.current === null) {
|
|
18
|
+
if (shouldInheritId(inherit) && upstreamId) {
|
|
19
|
+
id = id ? upstreamId + "-" + id : upstreamId;
|
|
20
|
+
}
|
|
21
|
+
context.current = {
|
|
22
|
+
id,
|
|
23
|
+
group: shouldInheritGroup(inherit)
|
|
24
|
+
? layoutGroupContext.group || nodeGroup()
|
|
25
|
+
: nodeGroup(),
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
const memoizedContext = useMemo(() => ({ ...context.current, forceRender }), [key]);
|
|
29
|
+
return (jsx(LayoutGroupContext.Provider, { value: memoizedContext, children: children }));
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
export { LayoutGroup };
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { useState, useRef, useEffect } from 'react';
|
|
4
|
+
import { LazyContext } from '../../context/LazyContext.mjs';
|
|
5
|
+
import { loadFeatures } from '../../motion/features/load-features.mjs';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Used in conjunction with the `m` component to reduce bundle size.
|
|
9
|
+
*
|
|
10
|
+
* `m` is a version of the `motion` component that only loads functionality
|
|
11
|
+
* critical for the initial render.
|
|
12
|
+
*
|
|
13
|
+
* `LazyMotion` can then be used to either synchronously or asynchronously
|
|
14
|
+
* load animation and gesture support.
|
|
15
|
+
*
|
|
16
|
+
* ```jsx
|
|
17
|
+
* // Synchronous loading
|
|
18
|
+
* import { LazyMotion, m, domAnimation } from "framer-motion"
|
|
19
|
+
*
|
|
20
|
+
* function App() {
|
|
21
|
+
* return (
|
|
22
|
+
* <LazyMotion features={domAnimation}>
|
|
23
|
+
* <m.div animate={{ scale: 2 }} />
|
|
24
|
+
* </LazyMotion>
|
|
25
|
+
* )
|
|
26
|
+
* }
|
|
27
|
+
*
|
|
28
|
+
* // Asynchronous loading
|
|
29
|
+
* import { LazyMotion, m } from "framer-motion"
|
|
30
|
+
*
|
|
31
|
+
* function App() {
|
|
32
|
+
* return (
|
|
33
|
+
* <LazyMotion features={() => import('./path/to/domAnimation')}>
|
|
34
|
+
* <m.div animate={{ scale: 2 }} />
|
|
35
|
+
* </LazyMotion>
|
|
36
|
+
* )
|
|
37
|
+
* }
|
|
38
|
+
* ```
|
|
39
|
+
*
|
|
40
|
+
* @public
|
|
41
|
+
*/
|
|
42
|
+
function LazyMotion({ children, features, strict = false }) {
|
|
43
|
+
const [, setIsLoaded] = useState(!isLazyBundle(features));
|
|
44
|
+
const loadedRenderer = useRef(undefined);
|
|
45
|
+
/**
|
|
46
|
+
* If this is a synchronous load, load features immediately
|
|
47
|
+
*/
|
|
48
|
+
if (!isLazyBundle(features)) {
|
|
49
|
+
const { renderer, ...loadedFeatures } = features;
|
|
50
|
+
loadedRenderer.current = renderer;
|
|
51
|
+
loadFeatures(loadedFeatures);
|
|
52
|
+
}
|
|
53
|
+
useEffect(() => {
|
|
54
|
+
if (isLazyBundle(features)) {
|
|
55
|
+
features().then(({ renderer, ...loadedFeatures }) => {
|
|
56
|
+
loadFeatures(loadedFeatures);
|
|
57
|
+
loadedRenderer.current = renderer;
|
|
58
|
+
setIsLoaded(true);
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
}, []);
|
|
62
|
+
return (jsx(LazyContext.Provider, { value: { renderer: loadedRenderer.current, strict }, children: children }));
|
|
63
|
+
}
|
|
64
|
+
function isLazyBundle(features) {
|
|
65
|
+
return typeof features === "function";
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
export { LazyMotion };
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { useContext, useMemo } from 'react';
|
|
4
|
+
import { MotionConfigContext } from '../../context/MotionConfigContext.mjs';
|
|
5
|
+
import { loadExternalIsValidProp } from '../../render/dom/utils/filter-props.mjs';
|
|
6
|
+
import { useConstant } from '../../utils/use-constant.mjs';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* `MotionConfig` is used to set configuration options for all children `motion` components.
|
|
10
|
+
*
|
|
11
|
+
* ```jsx
|
|
12
|
+
* import { motion, MotionConfig } from "framer-motion"
|
|
13
|
+
*
|
|
14
|
+
* export function App() {
|
|
15
|
+
* return (
|
|
16
|
+
* <MotionConfig transition={{ type: "spring" }}>
|
|
17
|
+
* <motion.div animate={{ x: 100 }} />
|
|
18
|
+
* </MotionConfig>
|
|
19
|
+
* )
|
|
20
|
+
* }
|
|
21
|
+
* ```
|
|
22
|
+
*
|
|
23
|
+
* @public
|
|
24
|
+
*/
|
|
25
|
+
function MotionConfig({ children, isValidProp, ...config }) {
|
|
26
|
+
isValidProp && loadExternalIsValidProp(isValidProp);
|
|
27
|
+
/**
|
|
28
|
+
* Inherit props from any parent MotionConfig components
|
|
29
|
+
*/
|
|
30
|
+
config = { ...useContext(MotionConfigContext), ...config };
|
|
31
|
+
/**
|
|
32
|
+
* Don't allow isStatic to change between renders as it affects how many hooks
|
|
33
|
+
* motion components fire.
|
|
34
|
+
*/
|
|
35
|
+
config.isStatic = useConstant(() => config.isStatic);
|
|
36
|
+
/**
|
|
37
|
+
* Creating a new config context object will re-render every `motion` component
|
|
38
|
+
* every time it renders. So we only want to create a new one sparingly.
|
|
39
|
+
*/
|
|
40
|
+
const context = useMemo(() => config, [
|
|
41
|
+
JSON.stringify(config.transition),
|
|
42
|
+
config.transformPagePoint,
|
|
43
|
+
config.reducedMotion,
|
|
44
|
+
]);
|
|
45
|
+
return (jsx(MotionConfigContext.Provider, { value: context, children: children }));
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export { MotionConfig };
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { invariant } from '../../utils/errors.mjs';
|
|
4
|
+
import { forwardRef, useRef, useEffect } from 'react';
|
|
5
|
+
import { ReorderContext } from '../../context/ReorderContext.mjs';
|
|
6
|
+
import { motion } from '../../render/components/motion/proxy.mjs';
|
|
7
|
+
import { useConstant } from '../../utils/use-constant.mjs';
|
|
8
|
+
import { checkReorder } from './utils/check-reorder.mjs';
|
|
9
|
+
|
|
10
|
+
function ReorderGroupComponent({ children, as = "ul", axis = "y", onReorder, values, ...props }, externalRef) {
|
|
11
|
+
const Component = useConstant(() => motion[as]);
|
|
12
|
+
const order = [];
|
|
13
|
+
const isReordering = useRef(false);
|
|
14
|
+
invariant(Boolean(values), "Reorder.Group must be provided a values prop");
|
|
15
|
+
const context = {
|
|
16
|
+
axis,
|
|
17
|
+
registerItem: (value, layout) => {
|
|
18
|
+
// If the entry was already added, update it rather than adding it again
|
|
19
|
+
const idx = order.findIndex((entry) => value === entry.value);
|
|
20
|
+
if (idx !== -1) {
|
|
21
|
+
order[idx].layout = layout[axis];
|
|
22
|
+
}
|
|
23
|
+
else {
|
|
24
|
+
order.push({ value: value, layout: layout[axis] });
|
|
25
|
+
}
|
|
26
|
+
order.sort(compareMin);
|
|
27
|
+
},
|
|
28
|
+
updateOrder: (item, offset, velocity) => {
|
|
29
|
+
if (isReordering.current)
|
|
30
|
+
return;
|
|
31
|
+
const newOrder = checkReorder(order, item, offset, velocity);
|
|
32
|
+
if (order !== newOrder) {
|
|
33
|
+
isReordering.current = true;
|
|
34
|
+
onReorder(newOrder
|
|
35
|
+
.map(getValue)
|
|
36
|
+
.filter((value) => values.indexOf(value) !== -1));
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
};
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
isReordering.current = false;
|
|
42
|
+
});
|
|
43
|
+
return (jsx(Component, { ...props, ref: externalRef, ignoreStrict: true, children: jsx(ReorderContext.Provider, { value: context, children: children }) }));
|
|
44
|
+
}
|
|
45
|
+
const ReorderGroup = /*@__PURE__*/ forwardRef(ReorderGroupComponent);
|
|
46
|
+
function getValue(item) {
|
|
47
|
+
return item.value;
|
|
48
|
+
}
|
|
49
|
+
function compareMin(a, b) {
|
|
50
|
+
return a.layout.min - b.layout.min;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
export { ReorderGroup, ReorderGroupComponent };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { invariant } from '../../utils/errors.mjs';
|
|
4
|
+
import { forwardRef, useContext } from 'react';
|
|
5
|
+
import { ReorderContext } from '../../context/ReorderContext.mjs';
|
|
6
|
+
import { motion } from '../../render/components/motion/proxy.mjs';
|
|
7
|
+
import { useConstant } from '../../utils/use-constant.mjs';
|
|
8
|
+
import { useMotionValue } from '../../value/use-motion-value.mjs';
|
|
9
|
+
import { useTransform } from '../../value/use-transform.mjs';
|
|
10
|
+
import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
|
|
11
|
+
|
|
12
|
+
function useDefaultMotionValue(value, defaultValue = 0) {
|
|
13
|
+
return isMotionValue(value) ? value : useMotionValue(defaultValue);
|
|
14
|
+
}
|
|
15
|
+
function ReorderItemComponent({ children, style = {}, value, as = "li", onDrag, layout = true, ...props }, externalRef) {
|
|
16
|
+
const Component = useConstant(() => motion[as]);
|
|
17
|
+
const context = useContext(ReorderContext);
|
|
18
|
+
const point = {
|
|
19
|
+
x: useDefaultMotionValue(style.x),
|
|
20
|
+
y: useDefaultMotionValue(style.y),
|
|
21
|
+
};
|
|
22
|
+
const zIndex = useTransform([point.x, point.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
|
|
23
|
+
invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
|
|
24
|
+
const { axis, registerItem, updateOrder } = context;
|
|
25
|
+
return (jsx(Component, { drag: axis, ...props, dragSnapToOrigin: true, style: { ...style, x: point.x, y: point.y, zIndex }, layout: layout, onDrag: (event, gesturePoint) => {
|
|
26
|
+
const { velocity } = gesturePoint;
|
|
27
|
+
velocity[axis] &&
|
|
28
|
+
updateOrder(value, point[axis].get(), velocity[axis]);
|
|
29
|
+
onDrag && onDrag(event, gesturePoint);
|
|
30
|
+
}, onLayoutMeasure: (measured) => registerItem(value, measured), ref: externalRef, ignoreStrict: true, children: children }));
|
|
31
|
+
}
|
|
32
|
+
const ReorderItem = /*@__PURE__*/ forwardRef(ReorderItemComponent);
|
|
33
|
+
|
|
34
|
+
export { ReorderItem, ReorderItemComponent };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { moveItem } from '../../../utils/array.mjs';
|
|
2
|
+
import { mixNumber } from '../../../utils/mix/number.mjs';
|
|
3
|
+
|
|
4
|
+
function checkReorder(order, value, offset, velocity) {
|
|
5
|
+
if (!velocity)
|
|
6
|
+
return order;
|
|
7
|
+
const index = order.findIndex((item) => item.value === value);
|
|
8
|
+
if (index === -1)
|
|
9
|
+
return order;
|
|
10
|
+
const nextOffset = velocity > 0 ? 1 : -1;
|
|
11
|
+
const nextItem = order[index + nextOffset];
|
|
12
|
+
if (!nextItem)
|
|
13
|
+
return order;
|
|
14
|
+
const item = order[index];
|
|
15
|
+
const nextLayout = nextItem.layout;
|
|
16
|
+
const nextItemCenter = mixNumber(nextLayout.min, nextLayout.max, 0.5);
|
|
17
|
+
if ((nextOffset === 1 && item.layout.max + offset > nextItemCenter) ||
|
|
18
|
+
(nextOffset === -1 && item.layout.min + offset < nextItemCenter)) {
|
|
19
|
+
return moveItem(order, index, index + nextOffset);
|
|
20
|
+
}
|
|
21
|
+
return order;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export { checkReorder };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { useContext, useMemo } from 'react';
|
|
2
|
+
import { MotionContext } from './index.mjs';
|
|
3
|
+
import { getCurrentTreeVariants } from './utils.mjs';
|
|
4
|
+
|
|
5
|
+
function useCreateMotionContext(props) {
|
|
6
|
+
const { initial, animate } = getCurrentTreeVariants(props, useContext(MotionContext));
|
|
7
|
+
return useMemo(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
|
|
8
|
+
}
|
|
9
|
+
function variantLabelsAsDependency(prop) {
|
|
10
|
+
return Array.isArray(prop) ? prop.join(" ") : prop;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export { useCreateMotionContext };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { isVariantLabel } from '../../render/utils/is-variant-label.mjs';
|
|
2
|
+
import { isControllingVariants } from '../../render/utils/is-controlling-variants.mjs';
|
|
3
|
+
|
|
4
|
+
function getCurrentTreeVariants(props, context) {
|
|
5
|
+
if (isControllingVariants(props)) {
|
|
6
|
+
const { initial, animate } = props;
|
|
7
|
+
return {
|
|
8
|
+
initial: initial === false || isVariantLabel(initial)
|
|
9
|
+
? initial
|
|
10
|
+
: undefined,
|
|
11
|
+
animate: isVariantLabel(animate) ? animate : undefined,
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
return props.inherit !== false ? context : {};
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export { getCurrentTreeVariants };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { cubicBezier } from './cubic-bezier.mjs';
|
|
2
|
+
import { mirrorEasing } from './modifiers/mirror.mjs';
|
|
3
|
+
import { reverseEasing } from './modifiers/reverse.mjs';
|
|
4
|
+
|
|
5
|
+
const backOut = /*@__PURE__*/ cubicBezier(0.33, 1.53, 0.69, 0.99);
|
|
6
|
+
const backIn = /*@__PURE__*/ reverseEasing(backOut);
|
|
7
|
+
const backInOut = /*@__PURE__*/ mirrorEasing(backIn);
|
|
8
|
+
|
|
9
|
+
export { backIn, backInOut, backOut };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { mirrorEasing } from './modifiers/mirror.mjs';
|
|
2
|
+
import { reverseEasing } from './modifiers/reverse.mjs';
|
|
3
|
+
|
|
4
|
+
const circIn = (p) => 1 - Math.sin(Math.acos(p));
|
|
5
|
+
const circOut = reverseEasing(circIn);
|
|
6
|
+
const circInOut = mirrorEasing(circIn);
|
|
7
|
+
|
|
8
|
+
export { circIn, circInOut, circOut };
|