@teamturing/react-kit 2.4.0 → 2.5.0

package/esm/node_modules/framer-motion/dist/es/animation/interfaces/motion-value.js

@@ -0,0 +1,101 @@
+import { warning } from '../../utils/errors.js';
+import { secondsToMilliseconds } from '../../utils/time-conversion.js';
+import { instantAnimationState } from '../../utils/use-instant-transition-state.js';
+import { createAcceleratedAnimation } from '../animators/waapi/create-accelerated-animation.js';
+import { createInstantAnimation } from '../animators/instant.js';
+import { getDefaultTransition } from '../utils/default-transitions.js';
+import { isAnimatable } from '../utils/is-animatable.js';
+import { getKeyframes } from '../utils/keyframes.js';
+import { getValueTransition, isTransitionDefined } from '../utils/transitions.js';
+import { animateValue } from '../animators/js/index.js';
+
+const animateMotionValue = (valueName, value, target, transition = {}) => {
+    return (onComplete) => {
+        const valueTransition = getValueTransition(transition, valueName) || {};
+        /**
+         * Most transition values are currently completely overwritten by value-specific
+         * transitions. In the future it'd be nicer to blend these transitions. But for now
+         * delay actually does inherit from the root transition if not value-specific.
+         */
+        const delay = valueTransition.delay || transition.delay || 0;
+        /**
+         * Elapsed isn't a public transition option but can be passed through from
+         * optimized appear effects in milliseconds.
+         */
+        let { elapsed = 0 } = transition;
+        elapsed = elapsed - secondsToMilliseconds(delay);
+        const keyframes = getKeyframes(value, valueName, target, valueTransition);
+        /**
+         * Check if we're able to animate between the start and end keyframes,
+         * and throw a warning if we're attempting to animate between one that's
+         * animatable and another that isn't.
+         */
+        const originKeyframe = keyframes[0];
+        const targetKeyframe = keyframes[keyframes.length - 1];
+        const isOriginAnimatable = isAnimatable(valueName, originKeyframe);
+        const isTargetAnimatable = isAnimatable(valueName, targetKeyframe);
+        warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${valueName} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
+        let options = {
+            keyframes,
+            velocity: value.getVelocity(),
+            ease: "easeOut",
+            ...valueTransition,
+            delay: -elapsed,
+            onUpdate: (v) => {
+                value.set(v);
+                valueTransition.onUpdate && valueTransition.onUpdate(v);
+            },
+            onComplete: () => {
+                onComplete();
+                valueTransition.onComplete && valueTransition.onComplete();
+            },
+        };
+        /**
+         * If there's no transition defined for this value, we can generate
+         * unqiue transition settings for this value.
+         */
+        if (!isTransitionDefined(valueTransition)) {
+            options = {
+                ...options,
+                ...getDefaultTransition(valueName, options),
+            };
+        }
+        /**
+         * Both WAAPI and our internal animation functions use durations
+         * as defined by milliseconds, while our external API defines them
+         * as seconds.
+         */
+        if (options.duration) {
+            options.duration = secondsToMilliseconds(options.duration);
+        }
+        if (options.repeatDelay) {
+            options.repeatDelay = secondsToMilliseconds(options.repeatDelay);
+        }
+        if (!isOriginAnimatable ||
+            !isTargetAnimatable ||
+            instantAnimationState.current ||
+            valueTransition.type === false) {
+            /**
+             * If we can't animate this value, or the global instant animation flag is set,
+             * or this is simply defined as an instant transition, return an instant transition.
+             */
+            return createInstantAnimation(options);
+        }
+        /**
+         * Animate via WAAPI if possible.
+         */
+        if (value.owner &&
+            value.owner.current instanceof HTMLElement &&
+            !value.owner.getProps().onUpdate) {
+            const acceleratedAnimation = createAcceleratedAnimation(value, valueName, options);
+            if (acceleratedAnimation)
+                return acceleratedAnimation;
+        }
+        /**
+         * If we didn't create an accelerated animation, create a JS animation
+         */
+        return animateValue(options);
+    };
+};
+
+export { animateMotionValue };

package/esm/node_modules/framer-motion/dist/es/animation/interfaces/single-value.js

@@ -0,0 +1,11 @@
+import { animateMotionValue } from './motion-value.js';
+import { motionValue } from '../../value/index.js';
+import { isMotionValue } from '../../value/utils/is-motion-value.js';
+
+function animateSingleValue(value, keyframes, options) {
+    const motionValue$1 = isMotionValue(value) ? value : motionValue(value);
+    motionValue$1.start(animateMotionValue("", motionValue$1, keyframes, options));
+    return motionValue$1.animation;
+}
+
+export { animateSingleValue };

package/esm/node_modules/framer-motion/dist/es/animation/interfaces/visual-element-target.js

@@ -0,0 +1,71 @@
+import { transformProps } from '../../render/html/utils/transform.js';
+import { optimizedAppearDataAttribute } from '../optimized-appear/data-id.js';
+import { animateMotionValue } from './motion-value.js';
+import { isWillChangeMotionValue } from '../../value/use-will-change/is.js';
+import { setTarget } from '../../render/utils/setters.js';
+import { frame } from '../../frameloop/frame.js';
+
+/**
+ * Decide whether we should block this animation. Previously, we achieved this
+ * just by checking whether the key was listed in protectedKeys, but this
+ * posed problems if an animation was triggered by afterChildren and protectedKeys
+ * had been set to true in the meantime.
+ */
+function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
+    const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;
+    needsAnimating[key] = false;
+    return shouldBlock;
+}
+function animateTarget(visualElement, definition, { delay = 0, transitionOverride, type } = {}) {
+    let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = visualElement.makeTargetAnimatable(definition);
+    const willChange = visualElement.getValue("willChange");
+    if (transitionOverride)
+        transition = transitionOverride;
+    const animations = [];
+    const animationTypeState = type &&
+        visualElement.animationState &&
+        visualElement.animationState.getState()[type];
+    for (const key in target) {
+        const value = visualElement.getValue(key);
+        const valueTarget = target[key];
+        if (!value ||
+            valueTarget === undefined ||
+            (animationTypeState &&
+                shouldBlockAnimation(animationTypeState, key))) {
+            continue;
+        }
+        const valueTransition = {
+            delay,
+            elapsed: 0,
+            ...transition,
+        };
+        /**
+         * If this is the first time a value is being animated, check
+         * to see if we're handling off from an existing animation.
+         */
+        if (window.HandoffAppearAnimations && !value.hasAnimated) {
+            const appearId = visualElement.getProps()[optimizedAppearDataAttribute];
+            if (appearId) {
+                valueTransition.elapsed = window.HandoffAppearAnimations(appearId, key, value, frame);
+                valueTransition.syncStart = true;
+            }
+        }
+        value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key)
+            ? { type: false }
+            : valueTransition));
+        const animation = value.animation;
+        if (isWillChangeMotionValue(willChange)) {
+            willChange.add(key);
+            animation.then(() => willChange.remove(key));
+        }
+        animations.push(animation);
+    }
+    if (transitionEnd) {
+        Promise.all(animations).then(() => {
+            transitionEnd && setTarget(visualElement, transitionEnd);
+        });
+    }
+    return animations;
+}
+
+export { animateTarget };

package/esm/node_modules/framer-motion/dist/es/animation/interfaces/visual-element-variant.js

@@ -0,0 +1,63 @@
+import { resolveVariant } from '../../render/utils/resolve-dynamic-variants.js';
+import { animateTarget } from './visual-element-target.js';
+
+function animateVariant(visualElement, variant, options = {}) {
+    const resolved = resolveVariant(visualElement, variant, options.custom);
+    let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};
+    if (options.transitionOverride) {
+        transition = options.transitionOverride;
+    }
+    /**
+     * If we have a variant, create a callback that runs it as an animation.
+     * Otherwise, we resolve a Promise immediately for a composable no-op.
+     */
+    const getAnimation = resolved
+        ? () => Promise.all(animateTarget(visualElement, resolved, options))
+        : () => Promise.resolve();
+    /**
+     * If we have children, create a callback that runs all their animations.
+     * Otherwise, we resolve a Promise immediately for a composable no-op.
+     */
+    const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size
+        ? (forwardDelay = 0) => {
+            const { delayChildren = 0, staggerChildren, staggerDirection, } = transition;
+            return animateChildren(visualElement, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options);
+        }
+        : () => Promise.resolve();
+    /**
+     * If the transition explicitly defines a "when" option, we need to resolve either
+     * this animation or all children animations before playing the other.
+     */
+    const { when } = transition;
+    if (when) {
+        const [first, last] = when === "beforeChildren"
+            ? [getAnimation, getChildAnimations]
+            : [getChildAnimations, getAnimation];
+        return first().then(() => last());
+    }
+    else {
+        return Promise.all([getAnimation(), getChildAnimations(options.delay)]);
+    }
+}
+function animateChildren(visualElement, variant, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {
+    const animations = [];
+    const maxStaggerDuration = (visualElement.variantChildren.size - 1) * staggerChildren;
+    const generateStaggerDuration = staggerDirection === 1
+        ? (i = 0) => i * staggerChildren
+        : (i = 0) => maxStaggerDuration - i * staggerChildren;
+    Array.from(visualElement.variantChildren)
+        .sort(sortByTreeOrder)
+        .forEach((child, i) => {
+        child.notify("AnimationStart", variant);
+        animations.push(animateVariant(child, variant, {
+            ...options,
+            delay: delayChildren + generateStaggerDuration(i),
+        }).then(() => child.notify("AnimationComplete", variant)));
+    });
+    return Promise.all(animations);
+}
+function sortByTreeOrder(a, b) {
+    return a.sortNodePosition(b);
+}
+
+export { animateVariant, sortByTreeOrder };

package/esm/node_modules/framer-motion/dist/es/animation/interfaces/visual-element.js

@@ -0,0 +1,24 @@
+import { resolveVariant } from '../../render/utils/resolve-dynamic-variants.js';
+import { animateTarget } from './visual-element-target.js';
+import { animateVariant } from './visual-element-variant.js';
+
+function animateVisualElement(visualElement, definition, options = {}) {
+    visualElement.notify("AnimationStart", definition);
+    let animation;
+    if (Array.isArray(definition)) {
+        const animations = definition.map((variant) => animateVariant(visualElement, variant, options));
+        animation = Promise.all(animations);
+    }
+    else if (typeof definition === "string") {
+        animation = animateVariant(visualElement, definition, options);
+    }
+    else {
+        const resolvedDefinition = typeof definition === "function"
+            ? resolveVariant(visualElement, definition, options.custom)
+            : definition;
+        animation = Promise.all(animateTarget(visualElement, resolvedDefinition, options));
+    }
+    return animation.then(() => visualElement.notify("AnimationComplete", definition));
+}
+
+export { animateVisualElement };

package/esm/node_modules/framer-motion/dist/es/animation/optimized-appear/data-id.js

@@ -0,0 +1,6 @@
+import { camelToDash } from '../../render/dom/utils/camel-to-dash.js';
+
+const optimizedAppearDataId = "framerAppearId";
+const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
+
+export { optimizedAppearDataAttribute, optimizedAppearDataId };

package/esm/node_modules/framer-motion/dist/es/animation/utils/default-transitions.js

@@ -0,0 +1,40 @@
+import { transformProps } from '../../render/html/utils/transform.js';
+
+const underDampedSpring = {
+    type: "spring",
+    stiffness: 500,
+    damping: 25,
+    restSpeed: 10,
+};
+const criticallyDampedSpring = (target) => ({
+    type: "spring",
+    stiffness: 550,
+    damping: target === 0 ? 2 * Math.sqrt(550) : 30,
+    restSpeed: 10,
+});
+const keyframesTransition = {
+    type: "keyframes",
+    duration: 0.8,
+};
+/**
+ * Default easing curve is a slightly shallower version of
+ * the default browser easing curve.
+ */
+const ease = {
+    type: "keyframes",
+    ease: [0.25, 0.1, 0.35, 1],
+    duration: 0.3,
+};
+const getDefaultTransition = (valueKey, { keyframes }) => {
+    if (keyframes.length > 2) {
+        return keyframesTransition;
+    }
+    else if (transformProps.has(valueKey)) {
+        return valueKey.startsWith("scale")
+            ? criticallyDampedSpring(keyframes[1])
+            : underDampedSpring;
+    }
+    return ease;
+};
+
+export { getDefaultTransition };

package/esm/node_modules/framer-motion/dist/es/animation/utils/is-animatable.js

@@ -0,0 +1,30 @@
+import { complex } from '../../value/types/complex/index.js';
+
+/**
+ * Check if a value is animatable. Examples:
+ *
+ * ✅: 100, "100px", "#fff"
+ * ❌: "block", "url(2.jpg)"
+ * @param value
+ *
+ * @internal
+ */
+const isAnimatable = (key, value) => {
+    // If the list of keys tat might be non-animatable grows, replace with Set
+    if (key === "zIndex")
+        return false;
+    // If it's a number or a keyframes array, we can animate it. We might at some point
+    // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,
+    // but for now lets leave it like this for performance reasons
+    if (typeof value === "number" || Array.isArray(value))
+        return true;
+    if (typeof value === "string" && // It's animatable if we have a string
+        (complex.test(value) || value === "0") && // And it contains numbers and/or colors
+        !value.startsWith("url(") // Unless it starts with "url("
+    ) {
+        return true;
+    }
+    return false;
+};
+
+export { isAnimatable };

package/esm/node_modules/framer-motion/dist/es/animation/utils/is-animation-controls.js

@@ -0,0 +1,5 @@
+function isAnimationControls(v) {
+    return typeof v === "object" && typeof v.start === "function";
+}
+
+export { isAnimationControls };

package/esm/node_modules/framer-motion/dist/es/animation/utils/is-keyframes-target.js

@@ -0,0 +1,5 @@
+const isKeyframesTarget = (v) => {
+    return Array.isArray(v);
+};
+
+export { isKeyframesTarget };

package/esm/node_modules/framer-motion/dist/es/animation/utils/is-none.js

@@ -0,0 +1,12 @@
+import { isZeroValueString } from '../../utils/is-zero-value-string.js';
+
+function isNone(value) {
+    if (typeof value === "number") {
+        return value === 0;
+    }
+    else if (value !== null) {
+        return value === "none" || value === "0" || isZeroValueString(value);
+    }
+}
+
+export { isNone };

package/esm/node_modules/framer-motion/dist/es/animation/utils/keyframes.js

@@ -0,0 +1,45 @@
+import { getAnimatableNone } from '../../render/dom/value-types/animatable-none.js';
+import { isAnimatable } from './is-animatable.js';
+import { isNone } from './is-none.js';
+
+function getKeyframes(value, valueName, target, transition) {
+    const isTargetAnimatable = isAnimatable(valueName, target);
+    let keyframes;
+    if (Array.isArray(target)) {
+        keyframes = [...target];
+    }
+    else {
+        keyframes = [null, target];
+    }
+    const defaultOrigin = transition.from !== undefined ? transition.from : value.get();
+    let animatableTemplateValue = undefined;
+    const noneKeyframeIndexes = [];
+    for (let i = 0; i < keyframes.length; i++) {
+        /**
+         * Fill null/wildcard keyframes
+         */
+        if (keyframes[i] === null) {
+            keyframes[i] = i === 0 ? defaultOrigin : keyframes[i - 1];
+        }
+        if (isNone(keyframes[i])) {
+            noneKeyframeIndexes.push(i);
+        }
+        // TODO: Clean this conditional, it works for now
+        if (typeof keyframes[i] === "string" &&
+            keyframes[i] !== "none" &&
+            keyframes[i] !== "0") {
+            animatableTemplateValue = keyframes[i];
+        }
+    }
+    if (isTargetAnimatable &&
+        noneKeyframeIndexes.length &&
+        animatableTemplateValue) {
+        for (let i = 0; i < noneKeyframeIndexes.length; i++) {
+            const index = noneKeyframeIndexes[i];
+            keyframes[index] = getAnimatableNone(valueName, animatableTemplateValue);
+        }
+    }
+    return keyframes;
+}
+
+export { getKeyframes };

package/esm/node_modules/framer-motion/dist/es/animation/utils/transitions.js

@@ -0,0 +1,13 @@
+/**
+ * Decide whether a transition is defined on a given Transition.
+ * This filters out orchestration options and returns true
+ * if any options are left.
+ */
+function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
+    return !!Object.keys(transition).length;
+}
+function getValueTransition(transition, key) {
+    return transition[key] || transition["default"] || transition;
+}
+
+export { getValueTransition, isTransitionDefined };

package/esm/node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.js

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { useId, useRef, useInsertionEffect } from 'react';
+
+/**
+ * Measurement functionality has to be within a separate component
+ * to leverage snapshot lifecycle.
+ */
+class PopChildMeasure extends React.Component {
+    getSnapshotBeforeUpdate(prevProps) {
+        const element = this.props.childRef.current;
+        if (element && prevProps.isPresent && !this.props.isPresent) {
+            const size = this.props.sizeRef.current;
+            size.height = element.offsetHeight || 0;
+            size.width = element.offsetWidth || 0;
+            size.top = element.offsetTop;
+            size.left = element.offsetLeft;
+        }
+        return null;
+    }
+    /**
+     * Required with getSnapshotBeforeUpdate to stop React complaining.
+     */
+    componentDidUpdate() { }
+    render() {
+        return this.props.children;
+    }
+}
+function PopChild({ children, isPresent }) {
+    const id = useId();
+    const ref = useRef(null);
+    const size = useRef({
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+    });
+    /**
+     * We create and inject a style block so we can apply this explicit
+     * sizing in a non-destructive manner by just deleting the style block.
+     *
+     * We can't apply size via render as the measurement happens
+     * in getSnapshotBeforeUpdate (post-render), likewise if we apply the
+     * styles directly on the DOM node, we might be overwriting
+     * styles set via the style prop.
+     */
+    useInsertionEffect(() => {
+        const { width, height, top, left } = size.current;
+        if (isPresent || !ref.current || !width || !height)
+            return;
+        ref.current.dataset.motionPopId = id;
+        const style = document.createElement("style");
+        document.head.appendChild(style);
+        if (style.sheet) {
+            style.sheet.insertRule(`
+          [data-motion-pop-id="${id}"] {
+            position: absolute !important;
+            width: ${width}px !important;
+            height: ${height}px !important;
+            top: ${top}px !important;
+            left: ${left}px !important;
+          }
+        `);
+        }
+        return () => {
+            document.head.removeChild(style);
+        };
+    }, [isPresent]);
+    return (React.createElement(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size }, React.cloneElement(children, { ref })));
+}
+
+export { PopChild };

package/esm/node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.js

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { useId, useMemo } from 'react';
+import { PresenceContext } from '../../context/PresenceContext.js';
+import { useConstant } from '../../utils/use-constant.js';
+import { PopChild } from './PopChild.js';
+
+const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => {
+    const presenceChildren = useConstant(newChildrenMap);
+    const id = useId();
+    const context = useMemo(() => ({
+        id,
+        initial,
+        isPresent,
+        custom,
+        onExitComplete: (childId) => {
+            presenceChildren.set(childId, true);
+            for (const isComplete of presenceChildren.values()) {
+                if (!isComplete)
+                    return; // can stop searching when any is incomplete
+            }
+            onExitComplete && onExitComplete();
+        },
+        register: (childId) => {
+            presenceChildren.set(childId, false);
+            return () => presenceChildren.delete(childId);
+        },
+    }), 
+    /**
+     * If the presence of a child affects the layout of the components around it,
+     * we want to make a new context value to ensure they get re-rendered
+     * so they can detect that layout change.
+     */
+    presenceAffectsLayout ? undefined : [isPresent]);
+    useMemo(() => {
+        presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
+    }, [isPresent]);
+    /**
+     * If there's no `motion` components to fire exit animations, we want to remove this
+     * component immediately.
+     */
+    React.useEffect(() => {
+        !isPresent &&
+            !presenceChildren.size &&
+            onExitComplete &&
+            onExitComplete();
+    }, [isPresent]);
+    if (mode === "popLayout") {
+        children = React.createElement(PopChild, { isPresent: isPresent }, children);
+    }
+    return (React.createElement(PresenceContext.Provider, { value: context }, children));
+};
+function newChildrenMap() {
+    return new Map();
+}
+
+export { PresenceChild };