@teamturing/react-kit 2.4.0 → 2.5.0

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

@@ -0,0 +1,158 @@
+import * as React from 'react';
+import { useContext, useRef, cloneElement, Children, isValidElement } from 'react';
+import { useForceUpdate } from '../../utils/use-force-update.js';
+import { useIsMounted } from '../../utils/use-is-mounted.js';
+import { PresenceChild } from './PresenceChild.js';
+import { LayoutGroupContext } from '../../context/LayoutGroupContext.js';
+import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.js';
+import { useUnmountEffect } from '../../utils/use-unmount-effect.js';
+import { invariant } from '../../utils/errors.js';
+
+const getChildKey = (child) => child.key || "";
+function updateChildLookup(children, allChildren) {
+    children.forEach((child) => {
+        const key = getChildKey(child);
+        allChildren.set(key, child);
+    });
+}
+function onlyElements(children) {
+    const filtered = [];
+    // We use forEach here instead of map as map mutates the component key by preprending `.$`
+    Children.forEach(children, (child) => {
+        if (isValidElement(child))
+            filtered.push(child);
+    });
+    return filtered;
+}
+/**
+ * `AnimatePresence` enables the animation of components that have been removed from the tree.
+ *
+ * When adding/removing more than a single child, every child **must** be given a unique `key` prop.
+ *
+ * Any `motion` components that have an `exit` property defined will animate out when removed from
+ * the tree.
+ *
+ * ```jsx
+ * import { motion, AnimatePresence } from 'framer-motion'
+ *
+ * export const Items = ({ items }) => (
+ *   <AnimatePresence>
+ *     {items.map(item => (
+ *       <motion.div
+ *         key={item.id}
+ *         initial={{ opacity: 0 }}
+ *         animate={{ opacity: 1 }}
+ *         exit={{ opacity: 0 }}
+ *       />
+ *     ))}
+ *   </AnimatePresence>
+ * )
+ * ```
+ *
+ * You can sequence exit animations throughout a tree using variants.
+ *
+ * If a child contains multiple `motion` components with `exit` props, it will only unmount the child
+ * once all `motion` components have finished animating out. Likewise, any components using
+ * `usePresence` all need to call `safeToRemove`.
+ *
+ * @public
+ */
+const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exitBeforeEnter, presenceAffectsLayout = true, mode = "sync", }) => {
+    invariant(!exitBeforeEnter, "Replace exitBeforeEnter with mode='wait'");
+    // We want to force a re-render once all exiting animations have finished. We
+    // either use a local forceRender function, or one from a parent context if it exists.
+    const forceRender = useContext(LayoutGroupContext).forceRender || useForceUpdate()[0];
+    const isMounted = useIsMounted();
+    // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key
+    const filteredChildren = onlyElements(children);
+    let childrenToRender = filteredChildren;
+    const exitingChildren = useRef(new Map()).current;
+    // Keep a living record of the children we're actually rendering so we
+    // can diff to figure out which are entering and exiting
+    const presentChildren = useRef(childrenToRender);
+    // A lookup table to quickly reference components by key
+    const allChildren = useRef(new Map()).current;
+    // If this is the initial component render, just deal with logic surrounding whether
+    // we play onMount animations or not.
+    const isInitialRender = useRef(true);
+    useIsomorphicLayoutEffect(() => {
+        isInitialRender.current = false;
+        updateChildLookup(filteredChildren, allChildren);
+        presentChildren.current = childrenToRender;
+    });
+    useUnmountEffect(() => {
+        isInitialRender.current = true;
+        allChildren.clear();
+        exitingChildren.clear();
+    });
+    if (isInitialRender.current) {
+        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)))));
+    }
+    // If this is a subsequent render, deal with entering and exiting children
+    childrenToRender = [...childrenToRender];
+    // Diff the keys of the currently-present and target children to update our
+    // exiting list.
+    const presentKeys = presentChildren.current.map(getChildKey);
+    const targetKeys = filteredChildren.map(getChildKey);
+    // Diff the present children with our target children and mark those that are exiting
+    const numPresent = presentKeys.length;
+    for (let i = 0; i < numPresent; i++) {
+        const key = presentKeys[i];
+        if (targetKeys.indexOf(key) === -1 && !exitingChildren.has(key)) {
+            exitingChildren.set(key, undefined);
+        }
+    }
+    // If we currently have exiting children, and we're deferring rendering incoming children
+    // until after all current children have exiting, empty the childrenToRender array
+    if (mode === "wait" && exitingChildren.size) {
+        childrenToRender = [];
+    }
+    // Loop through all currently exiting components and clone them to overwrite `animate`
+    // with any `exit` prop they might have defined.
+    exitingChildren.forEach((component, key) => {
+        // If this component is actually entering again, early return
+        if (targetKeys.indexOf(key) !== -1)
+            return;
+        const child = allChildren.get(key);
+        if (!child)
+            return;
+        const insertionIndex = presentKeys.indexOf(key);
+        let exitingComponent = component;
+        if (!exitingComponent) {
+            const onExit = () => {
+                allChildren.delete(key);
+                exitingChildren.delete(key);
+                // Remove this child from the present children
+                const removeIndex = presentChildren.current.findIndex((presentChild) => presentChild.key === key);
+                presentChildren.current.splice(removeIndex, 1);
+                // Defer re-rendering until all exiting children have indeed left
+                if (!exitingChildren.size) {
+                    presentChildren.current = filteredChildren;
+                    if (isMounted.current === false)
+                        return;
+                    forceRender();
+                    onExitComplete && onExitComplete();
+                }
+            };
+            exitingComponent = (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
+            exitingChildren.set(key, exitingComponent);
+        }
+        childrenToRender.splice(insertionIndex, 0, exitingComponent);
+    });
+    // Add `MotionContext` even to children that don't need it to ensure we're rendering
+    // the same tree between renders
+    childrenToRender = childrenToRender.map((child) => {
+        const key = child.key;
+        return exitingChildren.has(key) ? (child) : (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
+    });
+    if (process.env.NODE_ENV !== "production" &&
+        mode === "wait" &&
+        childrenToRender.length > 1) {
+        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.`);
+    }
+    return (React.createElement(React.Fragment, null, exitingChildren.size
+        ? childrenToRender
+        : childrenToRender.map((child) => cloneElement(child))));
+};
+
+export { AnimatePresence };

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

@@ -0,0 +1,40 @@
+import { useContext, useId, useEffect } from 'react';
+import { PresenceContext } from '../../context/PresenceContext.js';
+
+/**
+ * When a component is the child of `AnimatePresence`, it can use `usePresence`
+ * to access information about whether it's still present in the React tree.
+ *
+ * ```jsx
+ * import { usePresence } from "framer-motion"
+ *
+ * export const Component = () => {
+ *   const [isPresent, safeToRemove] = usePresence()
+ *
+ *   useEffect(() => {
+ *     !isPresent && setTimeout(safeToRemove, 1000)
+ *   }, [isPresent])
+ *
+ *   return <div />
+ * }
+ * ```
+ *
+ * If `isPresent` is `false`, it means that a component has been removed the tree, but
+ * `AnimatePresence` won't really remove it until `safeToRemove` has been called.
+ *
+ * @public
+ */
+function usePresence() {
+    const context = useContext(PresenceContext);
+    if (context === null)
+        return [true, null];
+    const { isPresent, onExitComplete, register } = context;
+    // It's safe to call the following hooks conditionally (after an early return) because the context will always
+    // either be null or non-null for the lifespan of the component.
+    const id = useId();
+    useEffect(() => register(id), []);
+    const safeToRemove = () => onExitComplete && onExitComplete(id);
+    return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
+}
+
+export { usePresence };

package/esm/node_modules/framer-motion/dist/es/context/LayoutGroupContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const LayoutGroupContext = createContext({});
+
+export { LayoutGroupContext };

package/esm/node_modules/framer-motion/dist/es/context/LazyContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const LazyContext = createContext({ strict: false });
+
+export { LazyContext };

package/esm/node_modules/framer-motion/dist/es/context/MotionConfigContext.js

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+
+/**
+ * @public
+ */
+const MotionConfigContext = createContext({
+    transformPagePoint: (p) => p,
+    isStatic: false,
+    reducedMotion: "never",
+});
+
+export { MotionConfigContext };

package/esm/node_modules/framer-motion/dist/es/context/MotionContext/create.js

@@ -0,0 +1,13 @@
+import { useContext, useMemo } from 'react';
+import { MotionContext } from './index.js';
+import { getCurrentTreeVariants } from './utils.js';
+
+function useCreateMotionContext(props) {
+    const { initial, animate } = getCurrentTreeVariants(props, useContext(MotionContext));
+    return useMemo(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
+}
+function variantLabelsAsDependency(prop) {
+    return Array.isArray(prop) ? prop.join(" ") : prop;
+}
+
+export { useCreateMotionContext };

package/esm/node_modules/framer-motion/dist/es/context/MotionContext/index.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const MotionContext = createContext({});
+
+export { MotionContext };

package/esm/node_modules/framer-motion/dist/es/context/MotionContext/utils.js

@@ -0,0 +1,17 @@
+import { isVariantLabel } from '../../render/utils/is-variant-label.js';
+import { isControllingVariants } from '../../render/utils/is-controlling-variants.js';
+
+function getCurrentTreeVariants(props, context) {
+    if (isControllingVariants(props)) {
+        const { initial, animate } = props;
+        return {
+            initial: initial === false || isVariantLabel(initial)
+                ? initial
+                : undefined,
+            animate: isVariantLabel(animate) ? animate : undefined,
+        };
+    }
+    return props.inherit !== false ? context : {};
+}
+
+export { getCurrentTreeVariants };

package/esm/node_modules/framer-motion/dist/es/context/PresenceContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+/**
+ * @public
+ */
+const PresenceContext = createContext(null);
+
+export { PresenceContext };

package/esm/node_modules/framer-motion/dist/es/context/SwitchLayoutGroupContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+/**
+ * Internal, exported only for usage in Framer
+ */
+const SwitchLayoutGroupContext = createContext({});
+
+export { SwitchLayoutGroupContext };

package/esm/node_modules/framer-motion/dist/es/debug/record.js

@@ -0,0 +1,7 @@
+function record(data) {
+    if (window.MotionDebug) {
+        window.MotionDebug.record(data);
+    }
+}
+
+export { record };

package/esm/node_modules/framer-motion/dist/es/easing/anticipate.js

@@ -0,0 +1,5 @@
+import { backIn } from './back.js';
+
+const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
+
+export { anticipate };

package/esm/node_modules/framer-motion/dist/es/easing/back.js

@@ -0,0 +1,9 @@
+import { cubicBezier } from './cubic-bezier.js';
+import { mirrorEasing } from './modifiers/mirror.js';
+import { reverseEasing } from './modifiers/reverse.js';
+
+const backOut = cubicBezier(0.33, 1.53, 0.69, 0.99);
+const backIn = reverseEasing(backOut);
+const backInOut = mirrorEasing(backIn);
+
+export { backIn, backInOut, backOut };

package/esm/node_modules/framer-motion/dist/es/easing/circ.js

@@ -0,0 +1,8 @@
+import { mirrorEasing } from './modifiers/mirror.js';
+import { reverseEasing } from './modifiers/reverse.js';
+
+const circIn = (p) => 1 - Math.sin(Math.acos(p));
+const circOut = reverseEasing(circIn);
+const circInOut = mirrorEasing(circOut);
+
+export { circIn, circInOut, circOut };

package/esm/node_modules/framer-motion/dist/es/easing/cubic-bezier.js

@@ -0,0 +1,51 @@
+import { noop } from '../utils/noop.js';
+
+/*
+  Bezier function generator
+  This has been modified from Gaëtan Renaudeau's BezierEasing
+  https://github.com/gre/bezier-easing/blob/master/src/index.js
+  https://github.com/gre/bezier-easing/blob/master/LICENSE
+  
+  I've removed the newtonRaphsonIterate algo because in benchmarking it
+  wasn't noticiably faster than binarySubdivision, indeed removing it
+  usually improved times, depending on the curve.
+  I also removed the lookup table, as for the added bundle size and loop we're
+  only cutting ~4 or so subdivision iterations. I bumped the max iterations up
+  to 12 to compensate and this still tended to be faster for no perceivable
+  loss in accuracy.
+  Usage
+    const easeOut = cubicBezier(.17,.67,.83,.67);
+    const x = easeOut(0.5); // returns 0.627...
+*/
+// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *
+    t;
+const subdivisionPrecision = 0.0000001;
+const subdivisionMaxIterations = 12;
+function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
+    let currentX;
+    let currentT;
+    let i = 0;
+    do {
+        currentT = lowerBound + (upperBound - lowerBound) / 2.0;
+        currentX = calcBezier(currentT, mX1, mX2) - x;
+        if (currentX > 0.0) {
+            upperBound = currentT;
+        }
+        else {
+            lowerBound = currentT;
+        }
+    } while (Math.abs(currentX) > subdivisionPrecision &&
+        ++i < subdivisionMaxIterations);
+    return currentT;
+}
+function cubicBezier(mX1, mY1, mX2, mY2) {
+    // If this is a linear gradient, return linear easing
+    if (mX1 === mY1 && mX2 === mY2)
+        return noop;
+    const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
+    // If animation is at start/end, return t without easing
+    return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
+}
+
+export { cubicBezier };

package/esm/node_modules/framer-motion/dist/es/easing/ease.js

@@ -0,0 +1,7 @@
+import { cubicBezier } from './cubic-bezier.js';
+
+const easeIn = cubicBezier(0.42, 0, 1, 1);
+const easeOut = cubicBezier(0, 0, 0.58, 1);
+const easeInOut = cubicBezier(0.42, 0, 0.58, 1);
+
+export { easeIn, easeInOut, easeOut };

package/esm/node_modules/framer-motion/dist/es/easing/modifiers/mirror.js

@@ -0,0 +1,5 @@
+// Accepts an easing function and returns a new one that outputs mirrored values for
+// the second half of the animation. Turns easeIn into easeInOut.
+const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
+
+export { mirrorEasing };

package/esm/node_modules/framer-motion/dist/es/easing/modifiers/reverse.js

@@ -0,0 +1,5 @@
+// Accepts an easing function and returns a new one that outputs reversed values.
+// Turns easeIn into easeOut.
+const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
+
+export { reverseEasing };

package/esm/node_modules/framer-motion/dist/es/easing/utils/is-bezier-definition.js

@@ -0,0 +1,3 @@
+const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
+
+export { isBezierDefinition };

package/esm/node_modules/framer-motion/dist/es/easing/utils/is-easing-array.js

@@ -0,0 +1,5 @@
+const isEasingArray = (ease) => {
+    return Array.isArray(ease) && typeof ease[0] !== "number";
+};
+
+export { isEasingArray };

package/esm/node_modules/framer-motion/dist/es/easing/utils/map.js

@@ -0,0 +1,37 @@
+import { invariant } from '../../utils/errors.js';
+import { cubicBezier } from '../cubic-bezier.js';
+import { noop } from '../../utils/noop.js';
+import { easeIn, easeInOut, easeOut } from '../ease.js';
+import { circIn, circInOut, circOut } from '../circ.js';
+import { backIn, backInOut, backOut } from '../back.js';
+import { anticipate } from '../anticipate.js';
+
+const easingLookup = {
+    linear: noop,
+    easeIn,
+    easeInOut,
+    easeOut,
+    circIn,
+    circInOut,
+    circOut,
+    backIn,
+    backInOut,
+    backOut,
+    anticipate,
+};
+const easingDefinitionToFunction = (definition) => {
+    if (Array.isArray(definition)) {
+        // If cubic bezier definition, create bezier curve
+        invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
+        const [x1, y1, x2, y2] = definition;
+        return cubicBezier(x1, y1, x2, y2);
+    }
+    else if (typeof definition === "string") {
+        // Else lookup from table
+        invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
+        return easingLookup[definition];
+    }
+    return definition;
+};
+
+export { easingDefinitionToFunction };

package/esm/node_modules/framer-motion/dist/es/events/add-dom-event.js

@@ -0,0 +1,6 @@
+function addDomEvent(target, eventName, handler, options = { passive: true }) {
+    target.addEventListener(eventName, handler, options);
+    return () => target.removeEventListener(eventName, handler);
+}
+
+export { addDomEvent };

package/esm/node_modules/framer-motion/dist/es/events/add-pointer-event.js

@@ -0,0 +1,8 @@
+import { addDomEvent } from './add-dom-event.js';
+import { addPointerInfo } from './event-info.js';
+
+function addPointerEvent(target, eventName, handler, options) {
+    return addDomEvent(target, eventName, addPointerInfo(handler), options);
+}
+
+export { addPointerEvent };

package/esm/node_modules/framer-motion/dist/es/events/event-info.js

@@ -0,0 +1,15 @@
+import { isPrimaryPointer } from './utils/is-primary-pointer.js';
+
+function extractEventInfo(event, pointType = "page") {
+    return {
+        point: {
+            x: event[pointType + "X"],
+            y: event[pointType + "Y"],
+        },
+    };
+}
+const addPointerInfo = (handler) => {
+    return (event) => isPrimaryPointer(event) && handler(event, extractEventInfo(event));
+};
+
+export { addPointerInfo, extractEventInfo };

package/esm/node_modules/framer-motion/dist/es/events/utils/is-primary-pointer.js

@@ -0,0 +1,18 @@
+const isPrimaryPointer = (event) => {
+    if (event.pointerType === "mouse") {
+        return typeof event.button !== "number" || event.button <= 0;
+    }
+    else {
+        /**
+         * isPrimary is true for all mice buttons, whereas every touch point
+         * is regarded as its own input. So subsequent concurrent touch points
+         * will be false.
+         *
+         * Specifically match against false here as incomplete versions of
+         * PointerEvents in very old browser might have it set as undefined.
+         */
+        return event.isPrimary !== false;
+    }
+};
+
+export { isPrimaryPointer };

package/esm/node_modules/framer-motion/dist/es/frameloop/batcher.js

@@ -0,0 +1,60 @@
+import { createRenderStep } from './render-step.js';
+
+const stepsOrder = [
+    "prepare",
+    "read",
+    "update",
+    "preRender",
+    "render",
+    "postRender",
+];
+const maxElapsed = 40;
+function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
+    let runNextFrame = false;
+    let useDefaultElapsed = true;
+    const state = {
+        delta: 0,
+        timestamp: 0,
+        isProcessing: false,
+    };
+    const steps = stepsOrder.reduce((acc, key) => {
+        acc[key] = createRenderStep(() => (runNextFrame = true));
+        return acc;
+    }, {});
+    const processStep = (stepId) => steps[stepId].process(state);
+    const processBatch = () => {
+        const timestamp = performance.now();
+        runNextFrame = false;
+        state.delta = useDefaultElapsed
+            ? 1000 / 60
+            : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
+        state.timestamp = timestamp;
+        state.isProcessing = true;
+        stepsOrder.forEach(processStep);
+        state.isProcessing = false;
+        if (runNextFrame && allowKeepAlive) {
+            useDefaultElapsed = false;
+            scheduleNextBatch(processBatch);
+        }
+    };
+    const wake = () => {
+        runNextFrame = true;
+        useDefaultElapsed = true;
+        if (!state.isProcessing) {
+            scheduleNextBatch(processBatch);
+        }
+    };
+    const schedule = stepsOrder.reduce((acc, key) => {
+        const step = steps[key];
+        acc[key] = (process, keepAlive = false, immediate = false) => {
+            if (!runNextFrame)
+                wake();
+            return step.schedule(process, keepAlive, immediate);
+        };
+        return acc;
+    }, {});
+    const cancel = (process) => stepsOrder.forEach((key) => steps[key].cancel(process));
+    return { schedule, cancel, state, steps };
+}
+
+export { createRenderBatcher, stepsOrder };

package/esm/node_modules/framer-motion/dist/es/frameloop/frame.js

@@ -0,0 +1,6 @@
+import { noop } from '../utils/noop.js';
+import { createRenderBatcher } from './batcher.js';
+
+const { schedule: frame, cancel: cancelFrame, state: frameData, steps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
+
+export { cancelFrame, frame, frameData, steps };