@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,507 @@
|
|
|
1
|
+
import { warning, invariant } from '../utils/errors.js';
|
|
2
|
+
import { createBox } from '../projection/geometry/models.js';
|
|
3
|
+
import { isRefObject } from '../utils/is-ref-object.js';
|
|
4
|
+
import { initPrefersReducedMotion } from '../utils/reduced-motion/index.js';
|
|
5
|
+
import { hasReducedMotionListener, prefersReducedMotion } from '../utils/reduced-motion/state.js';
|
|
6
|
+
import { SubscriptionManager } from '../utils/subscription-manager.js';
|
|
7
|
+
import { motionValue } from '../value/index.js';
|
|
8
|
+
import { isWillChangeMotionValue } from '../value/use-will-change/is.js';
|
|
9
|
+
import { isMotionValue } from '../value/utils/is-motion-value.js';
|
|
10
|
+
import { transformProps } from './html/utils/transform.js';
|
|
11
|
+
import { isControllingVariants, isVariantNode } from './utils/is-controlling-variants.js';
|
|
12
|
+
import { isVariantLabel } from './utils/is-variant-label.js';
|
|
13
|
+
import { updateMotionValuesFromProps } from './utils/motion-values.js';
|
|
14
|
+
import { resolveVariantFromProps } from './utils/resolve-variants.js';
|
|
15
|
+
import { warnOnce } from '../utils/warn-once.js';
|
|
16
|
+
import { featureDefinitions } from '../motion/features/definitions.js';
|
|
17
|
+
import { variantProps } from './utils/variant-props.js';
|
|
18
|
+
import { visualElementStore } from './store.js';
|
|
19
|
+
import { frame, cancelFrame } from '../frameloop/frame.js';
|
|
20
|
+
|
|
21
|
+
const featureNames = Object.keys(featureDefinitions);
|
|
22
|
+
const numFeatures = featureNames.length;
|
|
23
|
+
const propEventHandlers = [
|
|
24
|
+
"AnimationStart",
|
|
25
|
+
"AnimationComplete",
|
|
26
|
+
"Update",
|
|
27
|
+
"BeforeLayoutMeasure",
|
|
28
|
+
"LayoutMeasure",
|
|
29
|
+
"LayoutAnimationStart",
|
|
30
|
+
"LayoutAnimationComplete",
|
|
31
|
+
];
|
|
32
|
+
const numVariantProps = variantProps.length;
|
|
33
|
+
/**
|
|
34
|
+
* A VisualElement is an imperative abstraction around UI elements such as
|
|
35
|
+
* HTMLElement, SVGElement, Three.Object3D etc.
|
|
36
|
+
*/
|
|
37
|
+
class VisualElement {
|
|
38
|
+
constructor({ parent, props, presenceContext, reducedMotionConfig, visualState, }, options = {}) {
|
|
39
|
+
/**
|
|
40
|
+
* A reference to the current underlying Instance, e.g. a HTMLElement
|
|
41
|
+
* or Three.Mesh etc.
|
|
42
|
+
*/
|
|
43
|
+
this.current = null;
|
|
44
|
+
/**
|
|
45
|
+
* A set containing references to this VisualElement's children.
|
|
46
|
+
*/
|
|
47
|
+
this.children = new Set();
|
|
48
|
+
/**
|
|
49
|
+
* Determine what role this visual element should take in the variant tree.
|
|
50
|
+
*/
|
|
51
|
+
this.isVariantNode = false;
|
|
52
|
+
this.isControllingVariants = false;
|
|
53
|
+
/**
|
|
54
|
+
* Decides whether this VisualElement should animate in reduced motion
|
|
55
|
+
* mode.
|
|
56
|
+
*
|
|
57
|
+
* TODO: This is currently set on every individual VisualElement but feels
|
|
58
|
+
* like it could be set globally.
|
|
59
|
+
*/
|
|
60
|
+
this.shouldReduceMotion = null;
|
|
61
|
+
/**
|
|
62
|
+
* A map of all motion values attached to this visual element. Motion
|
|
63
|
+
* values are source of truth for any given animated value. A motion
|
|
64
|
+
* value might be provided externally by the component via props.
|
|
65
|
+
*/
|
|
66
|
+
this.values = new Map();
|
|
67
|
+
/**
|
|
68
|
+
* Cleanup functions for active features (hover/tap/exit etc)
|
|
69
|
+
*/
|
|
70
|
+
this.features = {};
|
|
71
|
+
/**
|
|
72
|
+
* A map of every subscription that binds the provided or generated
|
|
73
|
+
* motion values onChange listeners to this visual element.
|
|
74
|
+
*/
|
|
75
|
+
this.valueSubscriptions = new Map();
|
|
76
|
+
/**
|
|
77
|
+
* A reference to the previously-provided motion values as returned
|
|
78
|
+
* from scrapeMotionValuesFromProps. We use the keys in here to determine
|
|
79
|
+
* if any motion values need to be removed after props are updated.
|
|
80
|
+
*/
|
|
81
|
+
this.prevMotionValues = {};
|
|
82
|
+
/**
|
|
83
|
+
* An object containing a SubscriptionManager for each active event.
|
|
84
|
+
*/
|
|
85
|
+
this.events = {};
|
|
86
|
+
/**
|
|
87
|
+
* An object containing an unsubscribe function for each prop event subscription.
|
|
88
|
+
* For example, every "Update" event can have multiple subscribers via
|
|
89
|
+
* VisualElement.on(), but only one of those can be defined via the onUpdate prop.
|
|
90
|
+
*/
|
|
91
|
+
this.propEventSubscriptions = {};
|
|
92
|
+
this.notifyUpdate = () => this.notify("Update", this.latestValues);
|
|
93
|
+
this.render = () => {
|
|
94
|
+
if (!this.current)
|
|
95
|
+
return;
|
|
96
|
+
this.triggerBuild();
|
|
97
|
+
this.renderInstance(this.current, this.renderState, this.props.style, this.projection);
|
|
98
|
+
};
|
|
99
|
+
this.scheduleRender = () => frame.render(this.render, false, true);
|
|
100
|
+
const { latestValues, renderState } = visualState;
|
|
101
|
+
this.latestValues = latestValues;
|
|
102
|
+
this.baseTarget = { ...latestValues };
|
|
103
|
+
this.initialValues = props.initial ? { ...latestValues } : {};
|
|
104
|
+
this.renderState = renderState;
|
|
105
|
+
this.parent = parent;
|
|
106
|
+
this.props = props;
|
|
107
|
+
this.presenceContext = presenceContext;
|
|
108
|
+
this.depth = parent ? parent.depth + 1 : 0;
|
|
109
|
+
this.reducedMotionConfig = reducedMotionConfig;
|
|
110
|
+
this.options = options;
|
|
111
|
+
this.isControllingVariants = isControllingVariants(props);
|
|
112
|
+
this.isVariantNode = isVariantNode(props);
|
|
113
|
+
if (this.isVariantNode) {
|
|
114
|
+
this.variantChildren = new Set();
|
|
115
|
+
}
|
|
116
|
+
this.manuallyAnimateOnMount = Boolean(parent && parent.current);
|
|
117
|
+
/**
|
|
118
|
+
* Any motion values that are provided to the element when created
|
|
119
|
+
* aren't yet bound to the element, as this would technically be impure.
|
|
120
|
+
* However, we iterate through the motion values and set them to the
|
|
121
|
+
* initial values for this component.
|
|
122
|
+
*
|
|
123
|
+
* TODO: This is impure and we should look at changing this to run on mount.
|
|
124
|
+
* Doing so will break some tests but this isn't neccessarily a breaking change,
|
|
125
|
+
* more a reflection of the test.
|
|
126
|
+
*/
|
|
127
|
+
const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {});
|
|
128
|
+
for (const key in initialMotionValues) {
|
|
129
|
+
const value = initialMotionValues[key];
|
|
130
|
+
if (latestValues[key] !== undefined && isMotionValue(value)) {
|
|
131
|
+
value.set(latestValues[key], false);
|
|
132
|
+
if (isWillChangeMotionValue(willChange)) {
|
|
133
|
+
willChange.add(key);
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
/**
|
|
139
|
+
* This method takes React props and returns found MotionValues. For example, HTML
|
|
140
|
+
* MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.
|
|
141
|
+
*
|
|
142
|
+
* This isn't an abstract method as it needs calling in the constructor, but it is
|
|
143
|
+
* intended to be one.
|
|
144
|
+
*/
|
|
145
|
+
scrapeMotionValuesFromProps(_props, _prevProps) {
|
|
146
|
+
return {};
|
|
147
|
+
}
|
|
148
|
+
mount(instance) {
|
|
149
|
+
this.current = instance;
|
|
150
|
+
visualElementStore.set(instance, this);
|
|
151
|
+
if (this.projection && !this.projection.instance) {
|
|
152
|
+
this.projection.mount(instance);
|
|
153
|
+
}
|
|
154
|
+
if (this.parent && this.isVariantNode && !this.isControllingVariants) {
|
|
155
|
+
this.removeFromVariantTree = this.parent.addVariantChild(this);
|
|
156
|
+
}
|
|
157
|
+
this.values.forEach((value, key) => this.bindToMotionValue(key, value));
|
|
158
|
+
if (!hasReducedMotionListener.current) {
|
|
159
|
+
initPrefersReducedMotion();
|
|
160
|
+
}
|
|
161
|
+
this.shouldReduceMotion =
|
|
162
|
+
this.reducedMotionConfig === "never"
|
|
163
|
+
? false
|
|
164
|
+
: this.reducedMotionConfig === "always"
|
|
165
|
+
? true
|
|
166
|
+
: prefersReducedMotion.current;
|
|
167
|
+
if (process.env.NODE_ENV !== "production") {
|
|
168
|
+
warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.");
|
|
169
|
+
}
|
|
170
|
+
if (this.parent)
|
|
171
|
+
this.parent.children.add(this);
|
|
172
|
+
this.update(this.props, this.presenceContext);
|
|
173
|
+
}
|
|
174
|
+
unmount() {
|
|
175
|
+
visualElementStore.delete(this.current);
|
|
176
|
+
this.projection && this.projection.unmount();
|
|
177
|
+
cancelFrame(this.notifyUpdate);
|
|
178
|
+
cancelFrame(this.render);
|
|
179
|
+
this.valueSubscriptions.forEach((remove) => remove());
|
|
180
|
+
this.removeFromVariantTree && this.removeFromVariantTree();
|
|
181
|
+
this.parent && this.parent.children.delete(this);
|
|
182
|
+
for (const key in this.events) {
|
|
183
|
+
this.events[key].clear();
|
|
184
|
+
}
|
|
185
|
+
for (const key in this.features) {
|
|
186
|
+
this.features[key].unmount();
|
|
187
|
+
}
|
|
188
|
+
this.current = null;
|
|
189
|
+
}
|
|
190
|
+
bindToMotionValue(key, value) {
|
|
191
|
+
const valueIsTransform = transformProps.has(key);
|
|
192
|
+
const removeOnChange = value.on("change", (latestValue) => {
|
|
193
|
+
this.latestValues[key] = latestValue;
|
|
194
|
+
this.props.onUpdate &&
|
|
195
|
+
frame.update(this.notifyUpdate, false, true);
|
|
196
|
+
if (valueIsTransform && this.projection) {
|
|
197
|
+
this.projection.isTransformDirty = true;
|
|
198
|
+
}
|
|
199
|
+
});
|
|
200
|
+
const removeOnRenderRequest = value.on("renderRequest", this.scheduleRender);
|
|
201
|
+
this.valueSubscriptions.set(key, () => {
|
|
202
|
+
removeOnChange();
|
|
203
|
+
removeOnRenderRequest();
|
|
204
|
+
});
|
|
205
|
+
}
|
|
206
|
+
sortNodePosition(other) {
|
|
207
|
+
/**
|
|
208
|
+
* If these nodes aren't even of the same type we can't compare their depth.
|
|
209
|
+
*/
|
|
210
|
+
if (!this.current ||
|
|
211
|
+
!this.sortInstanceNodePosition ||
|
|
212
|
+
this.type !== other.type) {
|
|
213
|
+
return 0;
|
|
214
|
+
}
|
|
215
|
+
return this.sortInstanceNodePosition(this.current, other.current);
|
|
216
|
+
}
|
|
217
|
+
loadFeatures({ children, ...renderedProps }, isStrict, preloadedFeatures, initialLayoutGroupConfig) {
|
|
218
|
+
let ProjectionNodeConstructor;
|
|
219
|
+
let MeasureLayout;
|
|
220
|
+
/**
|
|
221
|
+
* If we're in development mode, check to make sure we're not rendering a motion component
|
|
222
|
+
* as a child of LazyMotion, as this will break the file-size benefits of using it.
|
|
223
|
+
*/
|
|
224
|
+
if (process.env.NODE_ENV !== "production" &&
|
|
225
|
+
preloadedFeatures &&
|
|
226
|
+
isStrict) {
|
|
227
|
+
const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
|
|
228
|
+
renderedProps.ignoreStrict
|
|
229
|
+
? warning(false, strictMessage)
|
|
230
|
+
: invariant(false, strictMessage);
|
|
231
|
+
}
|
|
232
|
+
for (let i = 0; i < numFeatures; i++) {
|
|
233
|
+
const name = featureNames[i];
|
|
234
|
+
const { isEnabled, Feature: FeatureConstructor, ProjectionNode, MeasureLayout: MeasureLayoutComponent, } = featureDefinitions[name];
|
|
235
|
+
if (ProjectionNode)
|
|
236
|
+
ProjectionNodeConstructor = ProjectionNode;
|
|
237
|
+
if (isEnabled(renderedProps)) {
|
|
238
|
+
if (!this.features[name] && FeatureConstructor) {
|
|
239
|
+
this.features[name] = new FeatureConstructor(this);
|
|
240
|
+
}
|
|
241
|
+
if (MeasureLayoutComponent) {
|
|
242
|
+
MeasureLayout = MeasureLayoutComponent;
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
if (!this.projection && ProjectionNodeConstructor) {
|
|
247
|
+
this.projection = new ProjectionNodeConstructor(this.latestValues, this.parent && this.parent.projection);
|
|
248
|
+
const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = renderedProps;
|
|
249
|
+
this.projection.setOptions({
|
|
250
|
+
layoutId,
|
|
251
|
+
layout,
|
|
252
|
+
alwaysMeasureLayout: Boolean(drag) ||
|
|
253
|
+
(dragConstraints && isRefObject(dragConstraints)),
|
|
254
|
+
visualElement: this,
|
|
255
|
+
scheduleRender: () => this.scheduleRender(),
|
|
256
|
+
/**
|
|
257
|
+
* TODO: Update options in an effect. This could be tricky as it'll be too late
|
|
258
|
+
* to update by the time layout animations run.
|
|
259
|
+
* We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
|
|
260
|
+
* ensuring it gets called if there's no potential layout animations.
|
|
261
|
+
*
|
|
262
|
+
*/
|
|
263
|
+
animationType: typeof layout === "string" ? layout : "both",
|
|
264
|
+
initialPromotionConfig: initialLayoutGroupConfig,
|
|
265
|
+
layoutScroll,
|
|
266
|
+
layoutRoot,
|
|
267
|
+
});
|
|
268
|
+
}
|
|
269
|
+
return MeasureLayout;
|
|
270
|
+
}
|
|
271
|
+
updateFeatures() {
|
|
272
|
+
for (const key in this.features) {
|
|
273
|
+
const feature = this.features[key];
|
|
274
|
+
if (feature.isMounted) {
|
|
275
|
+
feature.update();
|
|
276
|
+
}
|
|
277
|
+
else {
|
|
278
|
+
feature.mount();
|
|
279
|
+
feature.isMounted = true;
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
triggerBuild() {
|
|
284
|
+
this.build(this.renderState, this.latestValues, this.options, this.props);
|
|
285
|
+
}
|
|
286
|
+
/**
|
|
287
|
+
* Measure the current viewport box with or without transforms.
|
|
288
|
+
* Only measures axis-aligned boxes, rotate and skew must be manually
|
|
289
|
+
* removed with a re-render to work.
|
|
290
|
+
*/
|
|
291
|
+
measureViewportBox() {
|
|
292
|
+
return this.current
|
|
293
|
+
? this.measureInstanceViewportBox(this.current, this.props)
|
|
294
|
+
: createBox();
|
|
295
|
+
}
|
|
296
|
+
getStaticValue(key) {
|
|
297
|
+
return this.latestValues[key];
|
|
298
|
+
}
|
|
299
|
+
setStaticValue(key, value) {
|
|
300
|
+
this.latestValues[key] = value;
|
|
301
|
+
}
|
|
302
|
+
/**
|
|
303
|
+
* Make a target animatable by Popmotion. For instance, if we're
|
|
304
|
+
* trying to animate width from 100px to 100vw we need to measure 100vw
|
|
305
|
+
* in pixels to determine what we really need to animate to. This is also
|
|
306
|
+
* pluggable to support Framer's custom value types like Color,
|
|
307
|
+
* and CSS variables.
|
|
308
|
+
*/
|
|
309
|
+
makeTargetAnimatable(target, canMutate = true) {
|
|
310
|
+
return this.makeTargetAnimatableFromInstance(target, this.props, canMutate);
|
|
311
|
+
}
|
|
312
|
+
/**
|
|
313
|
+
* Update the provided props. Ensure any newly-added motion values are
|
|
314
|
+
* added to our map, old ones removed, and listeners updated.
|
|
315
|
+
*/
|
|
316
|
+
update(props, presenceContext) {
|
|
317
|
+
if (props.transformTemplate || this.props.transformTemplate) {
|
|
318
|
+
this.scheduleRender();
|
|
319
|
+
}
|
|
320
|
+
this.prevProps = this.props;
|
|
321
|
+
this.props = props;
|
|
322
|
+
this.prevPresenceContext = this.presenceContext;
|
|
323
|
+
this.presenceContext = presenceContext;
|
|
324
|
+
/**
|
|
325
|
+
* Update prop event handlers ie onAnimationStart, onAnimationComplete
|
|
326
|
+
*/
|
|
327
|
+
for (let i = 0; i < propEventHandlers.length; i++) {
|
|
328
|
+
const key = propEventHandlers[i];
|
|
329
|
+
if (this.propEventSubscriptions[key]) {
|
|
330
|
+
this.propEventSubscriptions[key]();
|
|
331
|
+
delete this.propEventSubscriptions[key];
|
|
332
|
+
}
|
|
333
|
+
const listener = props["on" + key];
|
|
334
|
+
if (listener) {
|
|
335
|
+
this.propEventSubscriptions[key] = this.on(key, listener);
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps), this.prevMotionValues);
|
|
339
|
+
if (this.handleChildMotionValue) {
|
|
340
|
+
this.handleChildMotionValue();
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
getProps() {
|
|
344
|
+
return this.props;
|
|
345
|
+
}
|
|
346
|
+
/**
|
|
347
|
+
* Returns the variant definition with a given name.
|
|
348
|
+
*/
|
|
349
|
+
getVariant(name) {
|
|
350
|
+
return this.props.variants ? this.props.variants[name] : undefined;
|
|
351
|
+
}
|
|
352
|
+
/**
|
|
353
|
+
* Returns the defined default transition on this component.
|
|
354
|
+
*/
|
|
355
|
+
getDefaultTransition() {
|
|
356
|
+
return this.props.transition;
|
|
357
|
+
}
|
|
358
|
+
getTransformPagePoint() {
|
|
359
|
+
return this.props.transformPagePoint;
|
|
360
|
+
}
|
|
361
|
+
getClosestVariantNode() {
|
|
362
|
+
return this.isVariantNode
|
|
363
|
+
? this
|
|
364
|
+
: this.parent
|
|
365
|
+
? this.parent.getClosestVariantNode()
|
|
366
|
+
: undefined;
|
|
367
|
+
}
|
|
368
|
+
getVariantContext(startAtParent = false) {
|
|
369
|
+
if (startAtParent) {
|
|
370
|
+
return this.parent ? this.parent.getVariantContext() : undefined;
|
|
371
|
+
}
|
|
372
|
+
if (!this.isControllingVariants) {
|
|
373
|
+
const context = this.parent
|
|
374
|
+
? this.parent.getVariantContext() || {}
|
|
375
|
+
: {};
|
|
376
|
+
if (this.props.initial !== undefined) {
|
|
377
|
+
context.initial = this.props.initial;
|
|
378
|
+
}
|
|
379
|
+
return context;
|
|
380
|
+
}
|
|
381
|
+
const context = {};
|
|
382
|
+
for (let i = 0; i < numVariantProps; i++) {
|
|
383
|
+
const name = variantProps[i];
|
|
384
|
+
const prop = this.props[name];
|
|
385
|
+
if (isVariantLabel(prop) || prop === false) {
|
|
386
|
+
context[name] = prop;
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
return context;
|
|
390
|
+
}
|
|
391
|
+
/**
|
|
392
|
+
* Add a child visual element to our set of children.
|
|
393
|
+
*/
|
|
394
|
+
addVariantChild(child) {
|
|
395
|
+
const closestVariantNode = this.getClosestVariantNode();
|
|
396
|
+
if (closestVariantNode) {
|
|
397
|
+
closestVariantNode.variantChildren &&
|
|
398
|
+
closestVariantNode.variantChildren.add(child);
|
|
399
|
+
return () => closestVariantNode.variantChildren.delete(child);
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
/**
|
|
403
|
+
* Add a motion value and bind it to this visual element.
|
|
404
|
+
*/
|
|
405
|
+
addValue(key, value) {
|
|
406
|
+
// Remove existing value if it exists
|
|
407
|
+
if (value !== this.values.get(key)) {
|
|
408
|
+
this.removeValue(key);
|
|
409
|
+
this.bindToMotionValue(key, value);
|
|
410
|
+
}
|
|
411
|
+
this.values.set(key, value);
|
|
412
|
+
this.latestValues[key] = value.get();
|
|
413
|
+
}
|
|
414
|
+
/**
|
|
415
|
+
* Remove a motion value and unbind any active subscriptions.
|
|
416
|
+
*/
|
|
417
|
+
removeValue(key) {
|
|
418
|
+
this.values.delete(key);
|
|
419
|
+
const unsubscribe = this.valueSubscriptions.get(key);
|
|
420
|
+
if (unsubscribe) {
|
|
421
|
+
unsubscribe();
|
|
422
|
+
this.valueSubscriptions.delete(key);
|
|
423
|
+
}
|
|
424
|
+
delete this.latestValues[key];
|
|
425
|
+
this.removeValueFromRenderState(key, this.renderState);
|
|
426
|
+
}
|
|
427
|
+
/**
|
|
428
|
+
* Check whether we have a motion value for this key
|
|
429
|
+
*/
|
|
430
|
+
hasValue(key) {
|
|
431
|
+
return this.values.has(key);
|
|
432
|
+
}
|
|
433
|
+
getValue(key, defaultValue) {
|
|
434
|
+
if (this.props.values && this.props.values[key]) {
|
|
435
|
+
return this.props.values[key];
|
|
436
|
+
}
|
|
437
|
+
let value = this.values.get(key);
|
|
438
|
+
if (value === undefined && defaultValue !== undefined) {
|
|
439
|
+
value = motionValue(defaultValue, { owner: this });
|
|
440
|
+
this.addValue(key, value);
|
|
441
|
+
}
|
|
442
|
+
return value;
|
|
443
|
+
}
|
|
444
|
+
/**
|
|
445
|
+
* If we're trying to animate to a previously unencountered value,
|
|
446
|
+
* we need to check for it in our state and as a last resort read it
|
|
447
|
+
* directly from the instance (which might have performance implications).
|
|
448
|
+
*/
|
|
449
|
+
readValue(key) {
|
|
450
|
+
var _a;
|
|
451
|
+
return this.latestValues[key] !== undefined || !this.current
|
|
452
|
+
? this.latestValues[key]
|
|
453
|
+
: (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options);
|
|
454
|
+
}
|
|
455
|
+
/**
|
|
456
|
+
* Set the base target to later animate back to. This is currently
|
|
457
|
+
* only hydrated on creation and when we first read a value.
|
|
458
|
+
*/
|
|
459
|
+
setBaseTarget(key, value) {
|
|
460
|
+
this.baseTarget[key] = value;
|
|
461
|
+
}
|
|
462
|
+
/**
|
|
463
|
+
* Find the base target for a value thats been removed from all animation
|
|
464
|
+
* props.
|
|
465
|
+
*/
|
|
466
|
+
getBaseTarget(key) {
|
|
467
|
+
var _a;
|
|
468
|
+
const { initial } = this.props;
|
|
469
|
+
const valueFromInitial = typeof initial === "string" || typeof initial === "object"
|
|
470
|
+
? (_a = resolveVariantFromProps(this.props, initial)) === null || _a === void 0 ? void 0 : _a[key]
|
|
471
|
+
: undefined;
|
|
472
|
+
/**
|
|
473
|
+
* If this value still exists in the current initial variant, read that.
|
|
474
|
+
*/
|
|
475
|
+
if (initial && valueFromInitial !== undefined) {
|
|
476
|
+
return valueFromInitial;
|
|
477
|
+
}
|
|
478
|
+
/**
|
|
479
|
+
* Alternatively, if this VisualElement config has defined a getBaseTarget
|
|
480
|
+
* so we can read the value from an alternative source, try that.
|
|
481
|
+
*/
|
|
482
|
+
const target = this.getBaseTargetFromProps(this.props, key);
|
|
483
|
+
if (target !== undefined && !isMotionValue(target))
|
|
484
|
+
return target;
|
|
485
|
+
/**
|
|
486
|
+
* If the value was initially defined on initial, but it doesn't any more,
|
|
487
|
+
* return undefined. Otherwise return the value as initially read from the DOM.
|
|
488
|
+
*/
|
|
489
|
+
return this.initialValues[key] !== undefined &&
|
|
490
|
+
valueFromInitial === undefined
|
|
491
|
+
? undefined
|
|
492
|
+
: this.baseTarget[key];
|
|
493
|
+
}
|
|
494
|
+
on(eventName, callback) {
|
|
495
|
+
if (!this.events[eventName]) {
|
|
496
|
+
this.events[eventName] = new SubscriptionManager();
|
|
497
|
+
}
|
|
498
|
+
return this.events[eventName].add(callback);
|
|
499
|
+
}
|
|
500
|
+
notify(eventName, ...args) {
|
|
501
|
+
if (this.events[eventName]) {
|
|
502
|
+
this.events[eventName].notify(...args);
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
export { VisualElement };
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { getOrigin, checkTargetForNewValues } from '../utils/setters.js';
|
|
2
|
+
import { parseDomVariant } from './utils/parse-dom-variant.js';
|
|
3
|
+
import { VisualElement } from '../VisualElement.js';
|
|
4
|
+
|
|
5
|
+
class DOMVisualElement extends VisualElement {
|
|
6
|
+
sortInstanceNodePosition(a, b) {
|
|
7
|
+
/**
|
|
8
|
+
* compareDocumentPosition returns a bitmask, by using the bitwise &
|
|
9
|
+
* we're returning true if 2 in that bitmask is set to true. 2 is set
|
|
10
|
+
* to true if b preceeds a.
|
|
11
|
+
*/
|
|
12
|
+
return a.compareDocumentPosition(b) & 2 ? 1 : -1;
|
|
13
|
+
}
|
|
14
|
+
getBaseTargetFromProps(props, key) {
|
|
15
|
+
return props.style ? props.style[key] : undefined;
|
|
16
|
+
}
|
|
17
|
+
removeValueFromRenderState(key, { vars, style }) {
|
|
18
|
+
delete vars[key];
|
|
19
|
+
delete style[key];
|
|
20
|
+
}
|
|
21
|
+
makeTargetAnimatableFromInstance({ transition, transitionEnd, ...target }, { transformValues }, isMounted) {
|
|
22
|
+
let origin = getOrigin(target, transition || {}, this);
|
|
23
|
+
/**
|
|
24
|
+
* If Framer has provided a function to convert `Color` etc value types, convert them
|
|
25
|
+
*/
|
|
26
|
+
if (transformValues) {
|
|
27
|
+
if (transitionEnd)
|
|
28
|
+
transitionEnd = transformValues(transitionEnd);
|
|
29
|
+
if (target)
|
|
30
|
+
target = transformValues(target);
|
|
31
|
+
if (origin)
|
|
32
|
+
origin = transformValues(origin);
|
|
33
|
+
}
|
|
34
|
+
if (isMounted) {
|
|
35
|
+
checkTargetForNewValues(this, target, origin);
|
|
36
|
+
const parsed = parseDomVariant(this, target, origin, transitionEnd);
|
|
37
|
+
transitionEnd = parsed.transitionEnd;
|
|
38
|
+
target = parsed.target;
|
|
39
|
+
}
|
|
40
|
+
return {
|
|
41
|
+
transition,
|
|
42
|
+
transitionEnd,
|
|
43
|
+
...target,
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export { DOMVisualElement };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { HTMLVisualElement } from '../html/HTMLVisualElement.js';
|
|
2
|
+
import { SVGVisualElement } from '../svg/SVGVisualElement.js';
|
|
3
|
+
import { isSVGComponent } from './utils/is-svg-component.js';
|
|
4
|
+
|
|
5
|
+
const createDomVisualElement = (Component, options) => {
|
|
6
|
+
return isSVGComponent(Component)
|
|
7
|
+
? new SVGVisualElement(options, { enableHardwareAcceleration: false })
|
|
8
|
+
: new HTMLVisualElement(options, { enableHardwareAcceleration: true });
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export { createDomVisualElement };
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { createMotionComponent } from '../../motion/index.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Convert any React component into a `motion` component. The provided component
|
|
5
|
+
* **must** use `React.forwardRef` to the underlying DOM component you want to animate.
|
|
6
|
+
*
|
|
7
|
+
* ```jsx
|
|
8
|
+
* const Component = React.forwardRef((props, ref) => {
|
|
9
|
+
* return <div ref={ref} />
|
|
10
|
+
* })
|
|
11
|
+
*
|
|
12
|
+
* const MotionComponent = motion(Component)
|
|
13
|
+
* ```
|
|
14
|
+
*
|
|
15
|
+
* @public
|
|
16
|
+
*/
|
|
17
|
+
function createMotionProxy(createConfig) {
|
|
18
|
+
function custom(Component, customMotionComponentConfig = {}) {
|
|
19
|
+
return createMotionComponent(createConfig(Component, customMotionComponentConfig));
|
|
20
|
+
}
|
|
21
|
+
if (typeof Proxy === "undefined") {
|
|
22
|
+
return custom;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.
|
|
26
|
+
* Rather than generating them anew every render.
|
|
27
|
+
*/
|
|
28
|
+
const componentCache = new Map();
|
|
29
|
+
return new Proxy(custom, {
|
|
30
|
+
/**
|
|
31
|
+
* Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.
|
|
32
|
+
* The prop name is passed through as `key` and we can use that to generate a `motion`
|
|
33
|
+
* DOM component with that name.
|
|
34
|
+
*/
|
|
35
|
+
get: (_target, key) => {
|
|
36
|
+
/**
|
|
37
|
+
* If this element doesn't exist in the component cache, create it and cache.
|
|
38
|
+
*/
|
|
39
|
+
if (!componentCache.has(key)) {
|
|
40
|
+
componentCache.set(key, custom(key));
|
|
41
|
+
}
|
|
42
|
+
return componentCache.get(key);
|
|
43
|
+
},
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export { createMotionProxy };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { createMotionProxy } from './motion-proxy.js';
|
|
2
|
+
import { createDomMotionConfig } from './utils/create-config.js';
|
|
3
|
+
import { gestureAnimations } from '../../motion/features/gestures.js';
|
|
4
|
+
import { animations } from '../../motion/features/animations.js';
|
|
5
|
+
import { drag } from '../../motion/features/drag.js';
|
|
6
|
+
import { createDomVisualElement } from './create-visual-element.js';
|
|
7
|
+
import { layout } from '../../motion/features/layout.js';
|
|
8
|
+
|
|
9
|
+
const preloadedFeatures = {
|
|
10
|
+
...animations,
|
|
11
|
+
...gestureAnimations,
|
|
12
|
+
...drag,
|
|
13
|
+
...layout,
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* HTML & SVG components, optimised for use with gestures and animation. These can be used as
|
|
17
|
+
* drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported.
|
|
18
|
+
*
|
|
19
|
+
* @public
|
|
20
|
+
*/
|
|
21
|
+
const motion = /*@__PURE__*/ createMotionProxy((Component, config) => createDomMotionConfig(Component, config, preloadedFeatures, createDomVisualElement));
|
|
22
|
+
|
|
23
|
+
export { motion };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { useMemo, createElement } from 'react';
|
|
2
|
+
import { useHTMLProps } from '../html/use-props.js';
|
|
3
|
+
import { filterProps } from './utils/filter-props.js';
|
|
4
|
+
import { isSVGComponent } from './utils/is-svg-component.js';
|
|
5
|
+
import { useSVGProps } from '../svg/use-props.js';
|
|
6
|
+
import { isMotionValue } from '../../value/utils/is-motion-value.js';
|
|
7
|
+
|
|
8
|
+
function createUseRender(forwardMotionProps = false) {
|
|
9
|
+
const useRender = (Component, props, ref, { latestValues }, isStatic) => {
|
|
10
|
+
const useVisualProps = isSVGComponent(Component)
|
|
11
|
+
? useSVGProps
|
|
12
|
+
: useHTMLProps;
|
|
13
|
+
const visualProps = useVisualProps(props, latestValues, isStatic, Component);
|
|
14
|
+
const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps);
|
|
15
|
+
const elementProps = {
|
|
16
|
+
...filteredProps,
|
|
17
|
+
...visualProps,
|
|
18
|
+
ref,
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* If component has been handed a motion value as its child,
|
|
22
|
+
* memoise its initial value and render that. Subsequent updates
|
|
23
|
+
* will be handled by the onChange handler
|
|
24
|
+
*/
|
|
25
|
+
const { children } = props;
|
|
26
|
+
const renderedChildren = useMemo(() => (isMotionValue(children) ? children.get() : children), [children]);
|
|
27
|
+
return createElement(Component, {
|
|
28
|
+
...elementProps,
|
|
29
|
+
children: renderedChildren,
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
return useRender;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export { createUseRender };
|