@teamturing/react-kit 2.4.0 → 2.6.0
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/core/Button/index.d.ts +1 -1
- package/dist/core/Dialog/index.d.ts +16 -0
- package/dist/core/DialogHandler/index.d.ts +13 -0
- package/dist/core/GradientText/index.d.ts +11 -12
- package/dist/core/Grid/index.d.ts +2 -2
- package/dist/core/IconButton/index.d.ts +1 -1
- package/dist/core/ItemList/index.d.ts +2 -2
- package/dist/core/MotionView/index.d.ts +3 -0
- package/dist/core/Spinner/index.d.ts +116 -116
- package/dist/core/Stack/index.d.ts +2 -2
- package/dist/core/TextInput/index.d.ts +39 -0
- package/dist/core/Textarea/index.d.ts +9 -0
- package/dist/hook/useDialogHandler.d.ts +6 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.js +10732 -593
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/isFunction.d.ts +1 -0
- package/esm/_virtual/index.js +3 -0
- package/esm/_virtual/react-is.development.js +3 -0
- package/esm/_virtual/react-is.production.min.js +3 -0
- package/esm/core/Dialog/index.js +188 -0
- package/esm/core/DialogHandler/index.js +33 -0
- package/esm/core/MotionView/index.js +6 -0
- package/esm/core/TextInput/index.js +220 -0
- package/esm/core/Textarea/index.js +158 -0
- package/esm/hook/useDialogHandler.js +14 -0
- package/esm/index.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/animation/animators/instant.js +40 -0
- package/esm/node_modules/framer-motion/dist/es/animation/animators/js/driver-frameloop.js +16 -0
- package/esm/node_modules/framer-motion/dist/es/animation/animators/js/index.js +303 -0
- package/esm/node_modules/framer-motion/dist/es/animation/animators/waapi/create-accelerated-animation.js +199 -0
- package/esm/node_modules/framer-motion/dist/es/animation/animators/waapi/easing.js +31 -0
- package/esm/node_modules/framer-motion/dist/es/animation/animators/waapi/index.js +23 -0
- package/esm/node_modules/framer-motion/dist/es/animation/animators/waapi/utils/get-final-keyframe.js +8 -0
- package/esm/node_modules/framer-motion/dist/es/animation/generators/inertia.js +87 -0
- package/esm/node_modules/framer-motion/dist/es/animation/generators/keyframes.js +51 -0
- package/esm/node_modules/framer-motion/dist/es/animation/generators/spring/find.js +89 -0
- package/esm/node_modules/framer-motion/dist/es/animation/generators/spring/index.js +129 -0
- package/esm/node_modules/framer-motion/dist/es/animation/generators/utils/calc-duration.js +17 -0
- package/esm/node_modules/framer-motion/dist/es/animation/generators/utils/velocity.js +9 -0
- package/esm/node_modules/framer-motion/dist/es/animation/interfaces/motion-value.js +101 -0
- package/esm/node_modules/framer-motion/dist/es/animation/interfaces/single-value.js +11 -0
- package/esm/node_modules/framer-motion/dist/es/animation/interfaces/visual-element-target.js +71 -0
- package/esm/node_modules/framer-motion/dist/es/animation/interfaces/visual-element-variant.js +63 -0
- package/esm/node_modules/framer-motion/dist/es/animation/interfaces/visual-element.js +24 -0
- package/esm/node_modules/framer-motion/dist/es/animation/optimized-appear/data-id.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/animation/utils/default-transitions.js +40 -0
- package/esm/node_modules/framer-motion/dist/es/animation/utils/is-animatable.js +30 -0
- package/esm/node_modules/framer-motion/dist/es/animation/utils/is-animation-controls.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/animation/utils/is-keyframes-target.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/animation/utils/is-none.js +12 -0
- package/esm/node_modules/framer-motion/dist/es/animation/utils/keyframes.js +45 -0
- package/esm/node_modules/framer-motion/dist/es/animation/utils/transitions.js +13 -0
- package/esm/node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.js +71 -0
- package/esm/node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.js +56 -0
- package/esm/node_modules/framer-motion/dist/es/components/AnimatePresence/index.js +158 -0
- package/esm/node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.js +40 -0
- package/esm/node_modules/framer-motion/dist/es/context/LayoutGroupContext.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/context/LazyContext.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/context/MotionConfigContext.js +12 -0
- package/esm/node_modules/framer-motion/dist/es/context/MotionContext/create.js +13 -0
- package/esm/node_modules/framer-motion/dist/es/context/MotionContext/index.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/context/MotionContext/utils.js +17 -0
- package/esm/node_modules/framer-motion/dist/es/context/PresenceContext.js +8 -0
- package/esm/node_modules/framer-motion/dist/es/context/SwitchLayoutGroupContext.js +8 -0
- package/esm/node_modules/framer-motion/dist/es/debug/record.js +7 -0
- package/esm/node_modules/framer-motion/dist/es/easing/anticipate.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/easing/back.js +9 -0
- package/esm/node_modules/framer-motion/dist/es/easing/circ.js +8 -0
- package/esm/node_modules/framer-motion/dist/es/easing/cubic-bezier.js +51 -0
- package/esm/node_modules/framer-motion/dist/es/easing/ease.js +7 -0
- package/esm/node_modules/framer-motion/dist/es/easing/modifiers/mirror.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/easing/modifiers/reverse.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/easing/utils/is-bezier-definition.js +3 -0
- package/esm/node_modules/framer-motion/dist/es/easing/utils/is-easing-array.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/easing/utils/map.js +37 -0
- package/esm/node_modules/framer-motion/dist/es/events/add-dom-event.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/events/add-pointer-event.js +8 -0
- package/esm/node_modules/framer-motion/dist/es/events/event-info.js +15 -0
- package/esm/node_modules/framer-motion/dist/es/events/utils/is-primary-pointer.js +18 -0
- package/esm/node_modules/framer-motion/dist/es/frameloop/batcher.js +60 -0
- package/esm/node_modules/framer-motion/dist/es/frameloop/frame.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/frameloop/render-step.js +104 -0
- package/esm/node_modules/framer-motion/dist/es/gestures/drag/VisualElementDragControls.js +457 -0
- package/esm/node_modules/framer-motion/dist/es/gestures/drag/index.js +27 -0
- package/esm/node_modules/framer-motion/dist/es/gestures/drag/utils/constraints.js +125 -0
- package/esm/node_modules/framer-motion/dist/es/gestures/drag/utils/lock.js +53 -0
- package/esm/node_modules/framer-motion/dist/es/gestures/focus.js +41 -0
- package/esm/node_modules/framer-motion/dist/es/gestures/hover.js +32 -0
- package/esm/node_modules/framer-motion/dist/es/gestures/pan/PanSession.js +148 -0
- package/esm/node_modules/framer-motion/dist/es/gestures/pan/index.js +46 -0
- package/esm/node_modules/framer-motion/dist/es/gestures/press.js +120 -0
- package/esm/node_modules/framer-motion/dist/es/gestures/utils/is-node-or-child.js +20 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/Feature.js +9 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/animation/exit.js +31 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/animation/index.js +38 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/animations.js +13 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/definitions.js +28 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/drag.js +17 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/gestures.js +21 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/layout/MeasureLayout.js +131 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/layout.js +11 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/load-features.js +12 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/viewport/index.js +72 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/viewport/observers.js +49 -0
- package/esm/node_modules/framer-motion/dist/es/motion/index.js +79 -0
- package/esm/node_modules/framer-motion/dist/es/motion/utils/is-forced-motion-value.js +11 -0
- package/esm/node_modules/framer-motion/dist/es/motion/utils/symbol.js +3 -0
- package/esm/node_modules/framer-motion/dist/es/motion/utils/use-motion-ref.js +33 -0
- package/esm/node_modules/framer-motion/dist/es/motion/utils/use-visual-element.js +75 -0
- package/esm/node_modules/framer-motion/dist/es/motion/utils/use-visual-state.js +81 -0
- package/esm/node_modules/framer-motion/dist/es/motion/utils/valid-prop.js +59 -0
- package/esm/node_modules/framer-motion/dist/es/projection/animation/mix-values.js +93 -0
- package/esm/node_modules/framer-motion/dist/es/projection/geometry/conversion.js +33 -0
- package/esm/node_modules/framer-motion/dist/es/projection/geometry/copy.js +20 -0
- package/esm/node_modules/framer-motion/dist/es/projection/geometry/delta-apply.js +122 -0
- package/esm/node_modules/framer-motion/dist/es/projection/geometry/delta-calc.js +41 -0
- package/esm/node_modules/framer-motion/dist/es/projection/geometry/delta-remove.js +54 -0
- package/esm/node_modules/framer-motion/dist/es/projection/geometry/models.js +17 -0
- package/esm/node_modules/framer-motion/dist/es/projection/geometry/utils.js +25 -0
- package/esm/node_modules/framer-motion/dist/es/projection/node/DocumentProjectionNode.js +13 -0
- package/esm/node_modules/framer-motion/dist/es/projection/node/HTMLProjectionNode.js +27 -0
- package/esm/node_modules/framer-motion/dist/es/projection/node/create-projection-node.js +1494 -0
- package/esm/node_modules/framer-motion/dist/es/projection/node/state.js +19 -0
- package/esm/node_modules/framer-motion/dist/es/projection/shared/stack.js +112 -0
- package/esm/node_modules/framer-motion/dist/es/projection/styles/scale-border-radius.js +41 -0
- package/esm/node_modules/framer-motion/dist/es/projection/styles/scale-box-shadow.js +35 -0
- package/esm/node_modules/framer-motion/dist/es/projection/styles/scale-correction.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/projection/styles/transform.js +42 -0
- package/esm/node_modules/framer-motion/dist/es/projection/utils/each-axis.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/projection/utils/has-transform.js +24 -0
- package/esm/node_modules/framer-motion/dist/es/projection/utils/measure.js +17 -0
- package/esm/node_modules/framer-motion/dist/es/render/VisualElement.js +507 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/DOMVisualElement.js +48 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/create-visual-element.js +11 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/motion-proxy.js +47 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/motion.js +23 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/use-render.js +35 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/utils/camel-to-dash.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/utils/create-config.js +19 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/utils/css-variables-conversion.js +89 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/utils/filter-props.js +57 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/utils/is-css-variable.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/utils/is-svg-component.js +30 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/utils/is-svg-element.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/utils/parse-dom-variant.js +15 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/utils/unit-conversion.js +230 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/animatable-none.js +15 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/defaults.js +30 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/dimensions.js +15 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/find.js +15 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/get-as-type.js +10 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/number.js +72 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/test.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/type-auto.js +9 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/type-int.js +8 -0
- package/esm/node_modules/framer-motion/dist/es/render/html/HTMLVisualElement.js +55 -0
- package/esm/node_modules/framer-motion/dist/es/render/html/config-motion.js +12 -0
- package/esm/node_modules/framer-motion/dist/es/render/html/use-props.js +57 -0
- package/esm/node_modules/framer-motion/dist/es/render/html/utils/build-styles.js +74 -0
- package/esm/node_modules/framer-motion/dist/es/render/html/utils/build-transform.js +45 -0
- package/esm/node_modules/framer-motion/dist/es/render/html/utils/create-render-state.js +8 -0
- package/esm/node_modules/framer-motion/dist/es/render/html/utils/render.js +9 -0
- package/esm/node_modules/framer-motion/dist/es/render/html/utils/scrape-motion-values.js +17 -0
- package/esm/node_modules/framer-motion/dist/es/render/html/utils/transform.js +28 -0
- package/esm/node_modules/framer-motion/dist/es/render/store.js +3 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/SVGVisualElement.js +46 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/config-motion.js +40 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/lowercase-elements.js +33 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/use-props.js +24 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/utils/build-attrs.js +52 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/utils/camel-case-attrs.js +30 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/utils/create-render-state.js +8 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/utils/is-svg-tag.js +3 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/utils/path.js +32 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/utils/render.js +12 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/utils/scrape-motion-values.js +18 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/utils/transform-origin.js +18 -0
- package/esm/node_modules/framer-motion/dist/es/render/utils/animation-state.js +319 -0
- package/esm/node_modules/framer-motion/dist/es/render/utils/compare-by-depth.js +3 -0
- package/esm/node_modules/framer-motion/dist/es/render/utils/flat-tree.js +24 -0
- package/esm/node_modules/framer-motion/dist/es/render/utils/is-controlling-variants.js +13 -0
- package/esm/node_modules/framer-motion/dist/es/render/utils/is-variant-label.js +8 -0
- package/esm/node_modules/framer-motion/dist/es/render/utils/motion-values.js +63 -0
- package/esm/node_modules/framer-motion/dist/es/render/utils/resolve-dynamic-variants.js +24 -0
- package/esm/node_modules/framer-motion/dist/es/render/utils/resolve-variants.js +26 -0
- package/esm/node_modules/framer-motion/dist/es/render/utils/setters.js +101 -0
- package/esm/node_modules/framer-motion/dist/es/render/utils/variant-props.js +12 -0
- package/esm/node_modules/framer-motion/dist/es/utils/array.js +11 -0
- package/esm/node_modules/framer-motion/dist/es/utils/clamp.js +3 -0
- package/esm/node_modules/framer-motion/dist/es/utils/delay.js +19 -0
- package/esm/node_modules/framer-motion/dist/es/utils/distance.js +9 -0
- package/esm/node_modules/framer-motion/dist/es/utils/errors.js +18 -0
- package/esm/node_modules/framer-motion/dist/es/utils/hsla-to-rgba.js +42 -0
- package/esm/node_modules/framer-motion/dist/es/utils/interpolate.js +92 -0
- package/esm/node_modules/framer-motion/dist/es/utils/is-browser.js +3 -0
- package/esm/node_modules/framer-motion/dist/es/utils/is-numerical-string.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/utils/is-ref-object.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/utils/is-zero-value-string.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/utils/memo.js +10 -0
- package/esm/node_modules/framer-motion/dist/es/utils/mix-color.js +40 -0
- package/esm/node_modules/framer-motion/dist/es/utils/mix-complex.js +64 -0
- package/esm/node_modules/framer-motion/dist/es/utils/mix.js +24 -0
- package/esm/node_modules/framer-motion/dist/es/utils/noop.js +3 -0
- package/esm/node_modules/framer-motion/dist/es/utils/offsets/default.js +9 -0
- package/esm/node_modules/framer-motion/dist/es/utils/offsets/fill.js +12 -0
- package/esm/node_modules/framer-motion/dist/es/utils/offsets/time.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/utils/pipe.js +11 -0
- package/esm/node_modules/framer-motion/dist/es/utils/progress.js +18 -0
- package/esm/node_modules/framer-motion/dist/es/utils/reduced-motion/index.js +19 -0
- package/esm/node_modules/framer-motion/dist/es/utils/reduced-motion/state.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/utils/resolve-value.js +11 -0
- package/esm/node_modules/framer-motion/dist/es/utils/shallow-compare.js +14 -0
- package/esm/node_modules/framer-motion/dist/es/utils/subscription-manager.js +40 -0
- package/esm/node_modules/framer-motion/dist/es/utils/time-conversion.js +10 -0
- package/esm/node_modules/framer-motion/dist/es/utils/use-constant.js +18 -0
- package/esm/node_modules/framer-motion/dist/es/utils/use-force-update.js +19 -0
- package/esm/node_modules/framer-motion/dist/es/utils/use-instant-transition-state.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/utils/use-is-mounted.js +15 -0
- package/esm/node_modules/framer-motion/dist/es/utils/use-isomorphic-effect.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/utils/use-unmount-effect.js +7 -0
- package/esm/node_modules/framer-motion/dist/es/utils/velocity-per-second.js +11 -0
- package/esm/node_modules/framer-motion/dist/es/utils/warn-once.js +11 -0
- package/esm/node_modules/framer-motion/dist/es/value/index.js +331 -0
- package/esm/node_modules/framer-motion/dist/es/value/types/color/hex.js +40 -0
- package/esm/node_modules/framer-motion/dist/es/value/types/color/hsla.js +22 -0
- package/esm/node_modules/framer-motion/dist/es/value/types/color/index.js +28 -0
- package/esm/node_modules/framer-motion/dist/es/value/types/color/rgba.js +25 -0
- package/esm/node_modules/framer-motion/dist/es/value/types/color/utils.js +23 -0
- package/esm/node_modules/framer-motion/dist/es/value/types/complex/filter.js +30 -0
- package/esm/node_modules/framer-motion/dist/es/value/types/complex/index.js +92 -0
- package/esm/node_modules/framer-motion/dist/es/value/types/numbers/index.js +17 -0
- package/esm/node_modules/framer-motion/dist/es/value/types/numbers/units.js +19 -0
- package/esm/node_modules/framer-motion/dist/es/value/types/utils.js +15 -0
- package/esm/node_modules/framer-motion/dist/es/value/use-will-change/is.js +7 -0
- package/esm/node_modules/framer-motion/dist/es/value/utils/is-motion-value.js +3 -0
- package/esm/node_modules/framer-motion/dist/es/value/utils/resolve-motion-value.js +16 -0
- package/esm/node_modules/react-is/cjs/react-is.development.js +211 -0
- package/esm/node_modules/react-is/cjs/react-is.production.min.js +123 -0
- package/esm/node_modules/react-is/index.js +12 -0
- package/esm/packages/icons/esm/Close.js +17 -0
- package/esm/packages/token-studio/esm/token/elevation/index.js +5 -1
- package/esm/utils/isFunction.js +3 -0
- package/package.json +5 -3
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { transformProps } from '../../render/html/utils/transform.js';
|
|
2
|
+
|
|
3
|
+
const underDampedSpring = {
|
|
4
|
+
type: "spring",
|
|
5
|
+
stiffness: 500,
|
|
6
|
+
damping: 25,
|
|
7
|
+
restSpeed: 10,
|
|
8
|
+
};
|
|
9
|
+
const criticallyDampedSpring = (target) => ({
|
|
10
|
+
type: "spring",
|
|
11
|
+
stiffness: 550,
|
|
12
|
+
damping: target === 0 ? 2 * Math.sqrt(550) : 30,
|
|
13
|
+
restSpeed: 10,
|
|
14
|
+
});
|
|
15
|
+
const keyframesTransition = {
|
|
16
|
+
type: "keyframes",
|
|
17
|
+
duration: 0.8,
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* Default easing curve is a slightly shallower version of
|
|
21
|
+
* the default browser easing curve.
|
|
22
|
+
*/
|
|
23
|
+
const ease = {
|
|
24
|
+
type: "keyframes",
|
|
25
|
+
ease: [0.25, 0.1, 0.35, 1],
|
|
26
|
+
duration: 0.3,
|
|
27
|
+
};
|
|
28
|
+
const getDefaultTransition = (valueKey, { keyframes }) => {
|
|
29
|
+
if (keyframes.length > 2) {
|
|
30
|
+
return keyframesTransition;
|
|
31
|
+
}
|
|
32
|
+
else if (transformProps.has(valueKey)) {
|
|
33
|
+
return valueKey.startsWith("scale")
|
|
34
|
+
? criticallyDampedSpring(keyframes[1])
|
|
35
|
+
: underDampedSpring;
|
|
36
|
+
}
|
|
37
|
+
return ease;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
export { getDefaultTransition };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { complex } from '../../value/types/complex/index.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Check if a value is animatable. Examples:
|
|
5
|
+
*
|
|
6
|
+
* ✅: 100, "100px", "#fff"
|
|
7
|
+
* ❌: "block", "url(2.jpg)"
|
|
8
|
+
* @param value
|
|
9
|
+
*
|
|
10
|
+
* @internal
|
|
11
|
+
*/
|
|
12
|
+
const isAnimatable = (key, value) => {
|
|
13
|
+
// If the list of keys tat might be non-animatable grows, replace with Set
|
|
14
|
+
if (key === "zIndex")
|
|
15
|
+
return false;
|
|
16
|
+
// If it's a number or a keyframes array, we can animate it. We might at some point
|
|
17
|
+
// need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,
|
|
18
|
+
// but for now lets leave it like this for performance reasons
|
|
19
|
+
if (typeof value === "number" || Array.isArray(value))
|
|
20
|
+
return true;
|
|
21
|
+
if (typeof value === "string" && // It's animatable if we have a string
|
|
22
|
+
(complex.test(value) || value === "0") && // And it contains numbers and/or colors
|
|
23
|
+
!value.startsWith("url(") // Unless it starts with "url("
|
|
24
|
+
) {
|
|
25
|
+
return true;
|
|
26
|
+
}
|
|
27
|
+
return false;
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export { isAnimatable };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { isZeroValueString } from '../../utils/is-zero-value-string.js';
|
|
2
|
+
|
|
3
|
+
function isNone(value) {
|
|
4
|
+
if (typeof value === "number") {
|
|
5
|
+
return value === 0;
|
|
6
|
+
}
|
|
7
|
+
else if (value !== null) {
|
|
8
|
+
return value === "none" || value === "0" || isZeroValueString(value);
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export { isNone };
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { getAnimatableNone } from '../../render/dom/value-types/animatable-none.js';
|
|
2
|
+
import { isAnimatable } from './is-animatable.js';
|
|
3
|
+
import { isNone } from './is-none.js';
|
|
4
|
+
|
|
5
|
+
function getKeyframes(value, valueName, target, transition) {
|
|
6
|
+
const isTargetAnimatable = isAnimatable(valueName, target);
|
|
7
|
+
let keyframes;
|
|
8
|
+
if (Array.isArray(target)) {
|
|
9
|
+
keyframes = [...target];
|
|
10
|
+
}
|
|
11
|
+
else {
|
|
12
|
+
keyframes = [null, target];
|
|
13
|
+
}
|
|
14
|
+
const defaultOrigin = transition.from !== undefined ? transition.from : value.get();
|
|
15
|
+
let animatableTemplateValue = undefined;
|
|
16
|
+
const noneKeyframeIndexes = [];
|
|
17
|
+
for (let i = 0; i < keyframes.length; i++) {
|
|
18
|
+
/**
|
|
19
|
+
* Fill null/wildcard keyframes
|
|
20
|
+
*/
|
|
21
|
+
if (keyframes[i] === null) {
|
|
22
|
+
keyframes[i] = i === 0 ? defaultOrigin : keyframes[i - 1];
|
|
23
|
+
}
|
|
24
|
+
if (isNone(keyframes[i])) {
|
|
25
|
+
noneKeyframeIndexes.push(i);
|
|
26
|
+
}
|
|
27
|
+
// TODO: Clean this conditional, it works for now
|
|
28
|
+
if (typeof keyframes[i] === "string" &&
|
|
29
|
+
keyframes[i] !== "none" &&
|
|
30
|
+
keyframes[i] !== "0") {
|
|
31
|
+
animatableTemplateValue = keyframes[i];
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
if (isTargetAnimatable &&
|
|
35
|
+
noneKeyframeIndexes.length &&
|
|
36
|
+
animatableTemplateValue) {
|
|
37
|
+
for (let i = 0; i < noneKeyframeIndexes.length; i++) {
|
|
38
|
+
const index = noneKeyframeIndexes[i];
|
|
39
|
+
keyframes[index] = getAnimatableNone(valueName, animatableTemplateValue);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
return keyframes;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export { getKeyframes };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Decide whether a transition is defined on a given Transition.
|
|
3
|
+
* This filters out orchestration options and returns true
|
|
4
|
+
* if any options are left.
|
|
5
|
+
*/
|
|
6
|
+
function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
|
|
7
|
+
return !!Object.keys(transition).length;
|
|
8
|
+
}
|
|
9
|
+
function getValueTransition(transition, key) {
|
|
10
|
+
return transition[key] || transition["default"] || transition;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export { getValueTransition, isTransitionDefined };
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useId, useRef, useInsertionEffect } from 'react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Measurement functionality has to be within a separate component
|
|
6
|
+
* to leverage snapshot lifecycle.
|
|
7
|
+
*/
|
|
8
|
+
class PopChildMeasure extends React.Component {
|
|
9
|
+
getSnapshotBeforeUpdate(prevProps) {
|
|
10
|
+
const element = this.props.childRef.current;
|
|
11
|
+
if (element && prevProps.isPresent && !this.props.isPresent) {
|
|
12
|
+
const size = this.props.sizeRef.current;
|
|
13
|
+
size.height = element.offsetHeight || 0;
|
|
14
|
+
size.width = element.offsetWidth || 0;
|
|
15
|
+
size.top = element.offsetTop;
|
|
16
|
+
size.left = element.offsetLeft;
|
|
17
|
+
}
|
|
18
|
+
return null;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Required with getSnapshotBeforeUpdate to stop React complaining.
|
|
22
|
+
*/
|
|
23
|
+
componentDidUpdate() { }
|
|
24
|
+
render() {
|
|
25
|
+
return this.props.children;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
function PopChild({ children, isPresent }) {
|
|
29
|
+
const id = useId();
|
|
30
|
+
const ref = useRef(null);
|
|
31
|
+
const size = useRef({
|
|
32
|
+
width: 0,
|
|
33
|
+
height: 0,
|
|
34
|
+
top: 0,
|
|
35
|
+
left: 0,
|
|
36
|
+
});
|
|
37
|
+
/**
|
|
38
|
+
* We create and inject a style block so we can apply this explicit
|
|
39
|
+
* sizing in a non-destructive manner by just deleting the style block.
|
|
40
|
+
*
|
|
41
|
+
* We can't apply size via render as the measurement happens
|
|
42
|
+
* in getSnapshotBeforeUpdate (post-render), likewise if we apply the
|
|
43
|
+
* styles directly on the DOM node, we might be overwriting
|
|
44
|
+
* styles set via the style prop.
|
|
45
|
+
*/
|
|
46
|
+
useInsertionEffect(() => {
|
|
47
|
+
const { width, height, top, left } = size.current;
|
|
48
|
+
if (isPresent || !ref.current || !width || !height)
|
|
49
|
+
return;
|
|
50
|
+
ref.current.dataset.motionPopId = id;
|
|
51
|
+
const style = document.createElement("style");
|
|
52
|
+
document.head.appendChild(style);
|
|
53
|
+
if (style.sheet) {
|
|
54
|
+
style.sheet.insertRule(`
|
|
55
|
+
[data-motion-pop-id="${id}"] {
|
|
56
|
+
position: absolute !important;
|
|
57
|
+
width: ${width}px !important;
|
|
58
|
+
height: ${height}px !important;
|
|
59
|
+
top: ${top}px !important;
|
|
60
|
+
left: ${left}px !important;
|
|
61
|
+
}
|
|
62
|
+
`);
|
|
63
|
+
}
|
|
64
|
+
return () => {
|
|
65
|
+
document.head.removeChild(style);
|
|
66
|
+
};
|
|
67
|
+
}, [isPresent]);
|
|
68
|
+
return (React.createElement(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size }, React.cloneElement(children, { ref })));
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export { PopChild };
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useId, useMemo } from 'react';
|
|
3
|
+
import { PresenceContext } from '../../context/PresenceContext.js';
|
|
4
|
+
import { useConstant } from '../../utils/use-constant.js';
|
|
5
|
+
import { PopChild } from './PopChild.js';
|
|
6
|
+
|
|
7
|
+
const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => {
|
|
8
|
+
const presenceChildren = useConstant(newChildrenMap);
|
|
9
|
+
const id = useId();
|
|
10
|
+
const context = useMemo(() => ({
|
|
11
|
+
id,
|
|
12
|
+
initial,
|
|
13
|
+
isPresent,
|
|
14
|
+
custom,
|
|
15
|
+
onExitComplete: (childId) => {
|
|
16
|
+
presenceChildren.set(childId, true);
|
|
17
|
+
for (const isComplete of presenceChildren.values()) {
|
|
18
|
+
if (!isComplete)
|
|
19
|
+
return; // can stop searching when any is incomplete
|
|
20
|
+
}
|
|
21
|
+
onExitComplete && onExitComplete();
|
|
22
|
+
},
|
|
23
|
+
register: (childId) => {
|
|
24
|
+
presenceChildren.set(childId, false);
|
|
25
|
+
return () => presenceChildren.delete(childId);
|
|
26
|
+
},
|
|
27
|
+
}),
|
|
28
|
+
/**
|
|
29
|
+
* If the presence of a child affects the layout of the components around it,
|
|
30
|
+
* we want to make a new context value to ensure they get re-rendered
|
|
31
|
+
* so they can detect that layout change.
|
|
32
|
+
*/
|
|
33
|
+
presenceAffectsLayout ? undefined : [isPresent]);
|
|
34
|
+
useMemo(() => {
|
|
35
|
+
presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
|
|
36
|
+
}, [isPresent]);
|
|
37
|
+
/**
|
|
38
|
+
* If there's no `motion` components to fire exit animations, we want to remove this
|
|
39
|
+
* component immediately.
|
|
40
|
+
*/
|
|
41
|
+
React.useEffect(() => {
|
|
42
|
+
!isPresent &&
|
|
43
|
+
!presenceChildren.size &&
|
|
44
|
+
onExitComplete &&
|
|
45
|
+
onExitComplete();
|
|
46
|
+
}, [isPresent]);
|
|
47
|
+
if (mode === "popLayout") {
|
|
48
|
+
children = React.createElement(PopChild, { isPresent: isPresent }, children);
|
|
49
|
+
}
|
|
50
|
+
return (React.createElement(PresenceContext.Provider, { value: context }, children));
|
|
51
|
+
};
|
|
52
|
+
function newChildrenMap() {
|
|
53
|
+
return new Map();
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
export { PresenceChild };
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useContext, useRef, cloneElement, Children, isValidElement } from 'react';
|
|
3
|
+
import { useForceUpdate } from '../../utils/use-force-update.js';
|
|
4
|
+
import { useIsMounted } from '../../utils/use-is-mounted.js';
|
|
5
|
+
import { PresenceChild } from './PresenceChild.js';
|
|
6
|
+
import { LayoutGroupContext } from '../../context/LayoutGroupContext.js';
|
|
7
|
+
import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.js';
|
|
8
|
+
import { useUnmountEffect } from '../../utils/use-unmount-effect.js';
|
|
9
|
+
import { invariant } from '../../utils/errors.js';
|
|
10
|
+
|
|
11
|
+
const getChildKey = (child) => child.key || "";
|
|
12
|
+
function updateChildLookup(children, allChildren) {
|
|
13
|
+
children.forEach((child) => {
|
|
14
|
+
const key = getChildKey(child);
|
|
15
|
+
allChildren.set(key, child);
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
function onlyElements(children) {
|
|
19
|
+
const filtered = [];
|
|
20
|
+
// We use forEach here instead of map as map mutates the component key by preprending `.$`
|
|
21
|
+
Children.forEach(children, (child) => {
|
|
22
|
+
if (isValidElement(child))
|
|
23
|
+
filtered.push(child);
|
|
24
|
+
});
|
|
25
|
+
return filtered;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* `AnimatePresence` enables the animation of components that have been removed from the tree.
|
|
29
|
+
*
|
|
30
|
+
* When adding/removing more than a single child, every child **must** be given a unique `key` prop.
|
|
31
|
+
*
|
|
32
|
+
* Any `motion` components that have an `exit` property defined will animate out when removed from
|
|
33
|
+
* the tree.
|
|
34
|
+
*
|
|
35
|
+
* ```jsx
|
|
36
|
+
* import { motion, AnimatePresence } from 'framer-motion'
|
|
37
|
+
*
|
|
38
|
+
* export const Items = ({ items }) => (
|
|
39
|
+
* <AnimatePresence>
|
|
40
|
+
* {items.map(item => (
|
|
41
|
+
* <motion.div
|
|
42
|
+
* key={item.id}
|
|
43
|
+
* initial={{ opacity: 0 }}
|
|
44
|
+
* animate={{ opacity: 1 }}
|
|
45
|
+
* exit={{ opacity: 0 }}
|
|
46
|
+
* />
|
|
47
|
+
* ))}
|
|
48
|
+
* </AnimatePresence>
|
|
49
|
+
* )
|
|
50
|
+
* ```
|
|
51
|
+
*
|
|
52
|
+
* You can sequence exit animations throughout a tree using variants.
|
|
53
|
+
*
|
|
54
|
+
* If a child contains multiple `motion` components with `exit` props, it will only unmount the child
|
|
55
|
+
* once all `motion` components have finished animating out. Likewise, any components using
|
|
56
|
+
* `usePresence` all need to call `safeToRemove`.
|
|
57
|
+
*
|
|
58
|
+
* @public
|
|
59
|
+
*/
|
|
60
|
+
const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exitBeforeEnter, presenceAffectsLayout = true, mode = "sync", }) => {
|
|
61
|
+
invariant(!exitBeforeEnter, "Replace exitBeforeEnter with mode='wait'");
|
|
62
|
+
// We want to force a re-render once all exiting animations have finished. We
|
|
63
|
+
// either use a local forceRender function, or one from a parent context if it exists.
|
|
64
|
+
const forceRender = useContext(LayoutGroupContext).forceRender || useForceUpdate()[0];
|
|
65
|
+
const isMounted = useIsMounted();
|
|
66
|
+
// Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key
|
|
67
|
+
const filteredChildren = onlyElements(children);
|
|
68
|
+
let childrenToRender = filteredChildren;
|
|
69
|
+
const exitingChildren = useRef(new Map()).current;
|
|
70
|
+
// Keep a living record of the children we're actually rendering so we
|
|
71
|
+
// can diff to figure out which are entering and exiting
|
|
72
|
+
const presentChildren = useRef(childrenToRender);
|
|
73
|
+
// A lookup table to quickly reference components by key
|
|
74
|
+
const allChildren = useRef(new Map()).current;
|
|
75
|
+
// If this is the initial component render, just deal with logic surrounding whether
|
|
76
|
+
// we play onMount animations or not.
|
|
77
|
+
const isInitialRender = useRef(true);
|
|
78
|
+
useIsomorphicLayoutEffect(() => {
|
|
79
|
+
isInitialRender.current = false;
|
|
80
|
+
updateChildLookup(filteredChildren, allChildren);
|
|
81
|
+
presentChildren.current = childrenToRender;
|
|
82
|
+
});
|
|
83
|
+
useUnmountEffect(() => {
|
|
84
|
+
isInitialRender.current = true;
|
|
85
|
+
allChildren.clear();
|
|
86
|
+
exitingChildren.clear();
|
|
87
|
+
});
|
|
88
|
+
if (isInitialRender.current) {
|
|
89
|
+
return (React.createElement(React.Fragment, null, childrenToRender.map((child) => (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child)))));
|
|
90
|
+
}
|
|
91
|
+
// If this is a subsequent render, deal with entering and exiting children
|
|
92
|
+
childrenToRender = [...childrenToRender];
|
|
93
|
+
// Diff the keys of the currently-present and target children to update our
|
|
94
|
+
// exiting list.
|
|
95
|
+
const presentKeys = presentChildren.current.map(getChildKey);
|
|
96
|
+
const targetKeys = filteredChildren.map(getChildKey);
|
|
97
|
+
// Diff the present children with our target children and mark those that are exiting
|
|
98
|
+
const numPresent = presentKeys.length;
|
|
99
|
+
for (let i = 0; i < numPresent; i++) {
|
|
100
|
+
const key = presentKeys[i];
|
|
101
|
+
if (targetKeys.indexOf(key) === -1 && !exitingChildren.has(key)) {
|
|
102
|
+
exitingChildren.set(key, undefined);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
// If we currently have exiting children, and we're deferring rendering incoming children
|
|
106
|
+
// until after all current children have exiting, empty the childrenToRender array
|
|
107
|
+
if (mode === "wait" && exitingChildren.size) {
|
|
108
|
+
childrenToRender = [];
|
|
109
|
+
}
|
|
110
|
+
// Loop through all currently exiting components and clone them to overwrite `animate`
|
|
111
|
+
// with any `exit` prop they might have defined.
|
|
112
|
+
exitingChildren.forEach((component, key) => {
|
|
113
|
+
// If this component is actually entering again, early return
|
|
114
|
+
if (targetKeys.indexOf(key) !== -1)
|
|
115
|
+
return;
|
|
116
|
+
const child = allChildren.get(key);
|
|
117
|
+
if (!child)
|
|
118
|
+
return;
|
|
119
|
+
const insertionIndex = presentKeys.indexOf(key);
|
|
120
|
+
let exitingComponent = component;
|
|
121
|
+
if (!exitingComponent) {
|
|
122
|
+
const onExit = () => {
|
|
123
|
+
allChildren.delete(key);
|
|
124
|
+
exitingChildren.delete(key);
|
|
125
|
+
// Remove this child from the present children
|
|
126
|
+
const removeIndex = presentChildren.current.findIndex((presentChild) => presentChild.key === key);
|
|
127
|
+
presentChildren.current.splice(removeIndex, 1);
|
|
128
|
+
// Defer re-rendering until all exiting children have indeed left
|
|
129
|
+
if (!exitingChildren.size) {
|
|
130
|
+
presentChildren.current = filteredChildren;
|
|
131
|
+
if (isMounted.current === false)
|
|
132
|
+
return;
|
|
133
|
+
forceRender();
|
|
134
|
+
onExitComplete && onExitComplete();
|
|
135
|
+
}
|
|
136
|
+
};
|
|
137
|
+
exitingComponent = (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
|
|
138
|
+
exitingChildren.set(key, exitingComponent);
|
|
139
|
+
}
|
|
140
|
+
childrenToRender.splice(insertionIndex, 0, exitingComponent);
|
|
141
|
+
});
|
|
142
|
+
// Add `MotionContext` even to children that don't need it to ensure we're rendering
|
|
143
|
+
// the same tree between renders
|
|
144
|
+
childrenToRender = childrenToRender.map((child) => {
|
|
145
|
+
const key = child.key;
|
|
146
|
+
return exitingChildren.has(key) ? (child) : (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
|
|
147
|
+
});
|
|
148
|
+
if (process.env.NODE_ENV !== "production" &&
|
|
149
|
+
mode === "wait" &&
|
|
150
|
+
childrenToRender.length > 1) {
|
|
151
|
+
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.`);
|
|
152
|
+
}
|
|
153
|
+
return (React.createElement(React.Fragment, null, exitingChildren.size
|
|
154
|
+
? childrenToRender
|
|
155
|
+
: childrenToRender.map((child) => cloneElement(child))));
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
export { AnimatePresence };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { useContext, useId, useEffect } from 'react';
|
|
2
|
+
import { PresenceContext } from '../../context/PresenceContext.js';
|
|
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 = () => onExitComplete && onExitComplete(id);
|
|
37
|
+
return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
export { usePresence };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { useContext, useMemo } from 'react';
|
|
2
|
+
import { MotionContext } from './index.js';
|
|
3
|
+
import { getCurrentTreeVariants } from './utils.js';
|
|
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.js';
|
|
2
|
+
import { isControllingVariants } from '../../render/utils/is-controlling-variants.js';
|
|
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.js';
|
|
2
|
+
import { mirrorEasing } from './modifiers/mirror.js';
|
|
3
|
+
import { reverseEasing } from './modifiers/reverse.js';
|
|
4
|
+
|
|
5
|
+
const backOut = cubicBezier(0.33, 1.53, 0.69, 0.99);
|
|
6
|
+
const backIn = reverseEasing(backOut);
|
|
7
|
+
const backInOut = mirrorEasing(backIn);
|
|
8
|
+
|
|
9
|
+
export { backIn, backInOut, backOut };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { mirrorEasing } from './modifiers/mirror.js';
|
|
2
|
+
import { reverseEasing } from './modifiers/reverse.js';
|
|
3
|
+
|
|
4
|
+
const circIn = (p) => 1 - Math.sin(Math.acos(p));
|
|
5
|
+
const circOut = reverseEasing(circIn);
|
|
6
|
+
const circInOut = mirrorEasing(circOut);
|
|
7
|
+
|
|
8
|
+
export { circIn, circInOut, circOut };
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { noop } from '../utils/noop.js';
|
|
2
|
+
|
|
3
|
+
/*
|
|
4
|
+
Bezier function generator
|
|
5
|
+
This has been modified from Gaëtan Renaudeau's BezierEasing
|
|
6
|
+
https://github.com/gre/bezier-easing/blob/master/src/index.js
|
|
7
|
+
https://github.com/gre/bezier-easing/blob/master/LICENSE
|
|
8
|
+
|
|
9
|
+
I've removed the newtonRaphsonIterate algo because in benchmarking it
|
|
10
|
+
wasn't noticiably faster than binarySubdivision, indeed removing it
|
|
11
|
+
usually improved times, depending on the curve.
|
|
12
|
+
I also removed the lookup table, as for the added bundle size and loop we're
|
|
13
|
+
only cutting ~4 or so subdivision iterations. I bumped the max iterations up
|
|
14
|
+
to 12 to compensate and this still tended to be faster for no perceivable
|
|
15
|
+
loss in accuracy.
|
|
16
|
+
Usage
|
|
17
|
+
const easeOut = cubicBezier(.17,.67,.83,.67);
|
|
18
|
+
const x = easeOut(0.5); // returns 0.627...
|
|
19
|
+
*/
|
|
20
|
+
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
|
|
21
|
+
const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *
|
|
22
|
+
t;
|
|
23
|
+
const subdivisionPrecision = 0.0000001;
|
|
24
|
+
const subdivisionMaxIterations = 12;
|
|
25
|
+
function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
|
|
26
|
+
let currentX;
|
|
27
|
+
let currentT;
|
|
28
|
+
let i = 0;
|
|
29
|
+
do {
|
|
30
|
+
currentT = lowerBound + (upperBound - lowerBound) / 2.0;
|
|
31
|
+
currentX = calcBezier(currentT, mX1, mX2) - x;
|
|
32
|
+
if (currentX > 0.0) {
|
|
33
|
+
upperBound = currentT;
|
|
34
|
+
}
|
|
35
|
+
else {
|
|
36
|
+
lowerBound = currentT;
|
|
37
|
+
}
|
|
38
|
+
} while (Math.abs(currentX) > subdivisionPrecision &&
|
|
39
|
+
++i < subdivisionMaxIterations);
|
|
40
|
+
return currentT;
|
|
41
|
+
}
|
|
42
|
+
function cubicBezier(mX1, mY1, mX2, mY2) {
|
|
43
|
+
// If this is a linear gradient, return linear easing
|
|
44
|
+
if (mX1 === mY1 && mX2 === mY2)
|
|
45
|
+
return noop;
|
|
46
|
+
const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
|
|
47
|
+
// If animation is at start/end, return t without easing
|
|
48
|
+
return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export { cubicBezier };
|