@teamturing/react-kit 2.4.0 → 2.5.0

package/esm/node_modules/framer-motion/dist/es/render/dom/utils/create-config.js

@@ -0,0 +1,19 @@
+import { isSVGComponent } from './is-svg-component.js';
+import { createUseRender } from '../use-render.js';
+import { svgMotionConfig } from '../../svg/config-motion.js';
+import { htmlMotionConfig } from '../../html/config-motion.js';
+
+function createDomMotionConfig(Component, { forwardMotionProps = false }, preloadedFeatures, createVisualElement) {
+    const baseConfig = isSVGComponent(Component)
+        ? svgMotionConfig
+        : htmlMotionConfig;
+    return {
+        ...baseConfig,
+        preloadedFeatures,
+        useRender: createUseRender(forwardMotionProps),
+        createVisualElement,
+        Component,
+    };
+}
+
+export { createDomMotionConfig };

package/esm/node_modules/framer-motion/dist/es/render/dom/utils/css-variables-conversion.js

@@ -0,0 +1,89 @@
+import { invariant } from '../../../utils/errors.js';
+import { isNumericalString } from '../../../utils/is-numerical-string.js';
+import { isCSSVariableToken } from './is-css-variable.js';
+
+/**
+ * Parse Framer's special CSS variable format into a CSS token and a fallback.
+ *
+ * ```
+ * `var(--foo, #fff)` => [`--foo`, '#fff']
+ * ```
+ *
+ * @param current
+ */
+const splitCSSVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;
+function parseCSSVariable(current) {
+    const match = splitCSSVariableRegex.exec(current);
+    if (!match)
+        return [,];
+    const [, token, fallback] = match;
+    return [token, fallback];
+}
+const maxDepth = 4;
+function getVariableValue(current, element, depth = 1) {
+    invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`);
+    const [token, fallback] = parseCSSVariable(current);
+    // No CSS variable detected
+    if (!token)
+        return;
+    // Attempt to read this CSS variable off the element
+    const resolved = window.getComputedStyle(element).getPropertyValue(token);
+    if (resolved) {
+        const trimmed = resolved.trim();
+        return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;
+    }
+    else if (isCSSVariableToken(fallback)) {
+        // The fallback might itself be a CSS variable, in which case we attempt to resolve it too.
+        return getVariableValue(fallback, element, depth + 1);
+    }
+    else {
+        return fallback;
+    }
+}
+/**
+ * Resolve CSS variables from
+ *
+ * @internal
+ */
+function resolveCSSVariables(visualElement, { ...target }, transitionEnd) {
+    const element = visualElement.current;
+    if (!(element instanceof Element))
+        return { target, transitionEnd };
+    // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd`
+    // only if they change but I think this reads clearer and this isn't a performance-critical path.
+    if (transitionEnd) {
+        transitionEnd = { ...transitionEnd };
+    }
+    // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved
+    visualElement.values.forEach((value) => {
+        const current = value.get();
+        if (!isCSSVariableToken(current))
+            return;
+        const resolved = getVariableValue(current, element);
+        if (resolved)
+            value.set(resolved);
+    });
+    // Cycle through every target property and resolve CSS variables. Currently
+    // we only read single-var properties like `var(--foo)`, not `calc(var(--foo) + 20px)`
+    for (const key in target) {
+        const current = target[key];
+        if (!isCSSVariableToken(current))
+            continue;
+        const resolved = getVariableValue(current, element);
+        if (!resolved)
+            continue;
+        // Clone target if it hasn't already been
+        target[key] = resolved;
+        if (!transitionEnd)
+            transitionEnd = {};
+        // If the user hasn't already set this key on `transitionEnd`, set it to the unresolved
+        // CSS variable. This will ensure that after the animation the component will reflect
+        // changes in the value of the CSS variable.
+        if (transitionEnd[key] === undefined) {
+            transitionEnd[key] = current;
+        }
+    }
+    return { target, transitionEnd };
+}
+
+export { parseCSSVariable, resolveCSSVariables };

package/esm/node_modules/framer-motion/dist/es/render/dom/utils/filter-props.js

@@ -0,0 +1,57 @@
+import { isValidMotionProp } from '../../../motion/utils/valid-prop.js';
+
+let shouldForward = (key) => !isValidMotionProp(key);
+function loadExternalIsValidProp(isValidProp) {
+    if (!isValidProp)
+        return;
+    // Explicitly filter our events
+    shouldForward = (key) => key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key);
+}
+/**
+ * Emotion and Styled Components both allow users to pass through arbitrary props to their components
+ * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which
+ * of these should be passed to the underlying DOM node.
+ *
+ * However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props
+ * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props
+ * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of
+ * `@emotion/is-prop-valid`, however to fix this problem we need to use it.
+ *
+ * By making it an optionalDependency we can offer this functionality only in the situations where it's
+ * actually required.
+ */
+try {
+    /**
+     * We attempt to import this package but require won't be defined in esm environments, in that case
+     * isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed
+     * in favour of explicit injection.
+     */
+    loadExternalIsValidProp(require("@emotion/is-prop-valid").default);
+}
+catch (_a) {
+    // We don't need to actually do anything here - the fallback is the existing `isPropValid`.
+}
+function filterProps(props, isDom, forwardMotionProps) {
+    const filteredProps = {};
+    for (const key in props) {
+        /**
+         * values is considered a valid prop by Emotion, so if it's present
+         * this will be rendered out to the DOM unless explicitly filtered.
+         *
+         * We check the type as it could be used with the `feColorMatrix`
+         * element, which we support.
+         */
+        if (key === "values" && typeof props.values === "object")
+            continue;
+        if (shouldForward(key) ||
+            (forwardMotionProps === true && isValidMotionProp(key)) ||
+            (!isDom && !isValidMotionProp(key)) ||
+            // If trying to use native HTML drag events, forward drag listeners
+            (props["draggable"] && key.startsWith("onDrag"))) {
+            filteredProps[key] = props[key];
+        }
+    }
+    return filteredProps;
+}
+
+export { filterProps, loadExternalIsValidProp };

package/esm/node_modules/framer-motion/dist/es/render/dom/utils/is-css-variable.js

@@ -0,0 +1,6 @@
+const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
+const isCSSVariableName = checkStringStartsWith("--");
+const isCSSVariableToken = checkStringStartsWith("var(--");
+const cssVariableRegex = /var\s*\(\s*--[\w-]+(\s*,\s*(?:(?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)+)?\s*\)/g;
+
+export { cssVariableRegex, isCSSVariableName, isCSSVariableToken };

package/esm/node_modules/framer-motion/dist/es/render/dom/utils/is-svg-component.js

@@ -0,0 +1,30 @@
+import { lowercaseSVGElements } from '../../svg/lowercase-elements.js';
+
+function isSVGComponent(Component) {
+    if (
+    /**
+     * If it's not a string, it's a custom React component. Currently we only support
+     * HTML custom React components.
+     */
+    typeof Component !== "string" ||
+        /**
+         * If it contains a dash, the element is a custom HTML webcomponent.
+         */
+        Component.includes("-")) {
+        return false;
+    }
+    else if (
+    /**
+     * If it's in our list of lowercase SVG tags, it's an SVG component
+     */
+    lowercaseSVGElements.indexOf(Component) > -1 ||
+        /**
+         * If it contains a capital letter, it's an SVG component
+         */
+        /[A-Z]/.test(Component)) {
+        return true;
+    }
+    return false;
+}
+
+export { isSVGComponent };

package/esm/node_modules/framer-motion/dist/es/render/dom/utils/is-svg-element.js

@@ -0,0 +1,5 @@
+function isSVGElement(element) {
+    return element instanceof SVGElement && element.tagName !== "svg";
+}
+
+export { isSVGElement };

package/esm/node_modules/framer-motion/dist/es/render/dom/utils/parse-dom-variant.js

@@ -0,0 +1,15 @@
+import { resolveCSSVariables } from './css-variables-conversion.js';
+import { unitConversion } from './unit-conversion.js';
+
+/**
+ * Parse a DOM variant to make it animatable. This involves resolving CSS variables
+ * and ensuring animations like "20%" => "calc(50vw)" are performed in pixels.
+ */
+const parseDomVariant = (visualElement, target, origin, transitionEnd) => {
+    const resolved = resolveCSSVariables(visualElement, target, transitionEnd);
+    target = resolved.target;
+    transitionEnd = resolved.transitionEnd;
+    return unitConversion(visualElement, target, origin, transitionEnd);
+};
+
+export { parseDomVariant };

package/esm/node_modules/framer-motion/dist/es/render/dom/utils/unit-conversion.js

@@ -0,0 +1,230 @@
+import { isKeyframesTarget } from '../../../animation/utils/is-keyframes-target.js';
+import { invariant } from '../../../utils/errors.js';
+import { transformPropOrder } from '../../html/utils/transform.js';
+import { findDimensionValueType } from '../value-types/dimensions.js';
+import { isBrowser } from '../../../utils/is-browser.js';
+import { number } from '../../../value/types/numbers/index.js';
+import { px } from '../../../value/types/numbers/units.js';
+
+const positionalKeys = new Set([
+    "width",
+    "height",
+    "top",
+    "left",
+    "right",
+    "bottom",
+    "x",
+    "y",
+    "translateX",
+    "translateY",
+]);
+const isPositionalKey = (key) => positionalKeys.has(key);
+const hasPositionalKey = (target) => {
+    return Object.keys(target).some(isPositionalKey);
+};
+const isNumOrPxType = (v) => v === number || v === px;
+const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
+const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
+    if (transform === "none" || !transform)
+        return 0;
+    const matrix3d = transform.match(/^matrix3d\((.+)\)$/);
+    if (matrix3d) {
+        return getPosFromMatrix(matrix3d[1], pos3);
+    }
+    else {
+        const matrix = transform.match(/^matrix\((.+)\)$/);
+        if (matrix) {
+            return getPosFromMatrix(matrix[1], pos2);
+        }
+        else {
+            return 0;
+        }
+    }
+};
+const transformKeys = new Set(["x", "y", "z"]);
+const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
+function removeNonTranslationalTransform(visualElement) {
+    const removedTransforms = [];
+    nonTranslationalTransformKeys.forEach((key) => {
+        const value = visualElement.getValue(key);
+        if (value !== undefined) {
+            removedTransforms.push([key, value.get()]);
+            value.set(key.startsWith("scale") ? 1 : 0);
+        }
+    });
+    // Apply changes to element before measurement
+    if (removedTransforms.length)
+        visualElement.render();
+    return removedTransforms;
+}
+const positionalValues = {
+    // Dimensions
+    width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
+    height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
+    top: (_bbox, { top }) => parseFloat(top),
+    left: (_bbox, { left }) => parseFloat(left),
+    bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
+    right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
+    // Transform
+    x: getTranslateFromMatrix(4, 13),
+    y: getTranslateFromMatrix(5, 14),
+};
+// Alias translate longform names
+positionalValues.translateX = positionalValues.x;
+positionalValues.translateY = positionalValues.y;
+const convertChangedValueTypes = (target, visualElement, changedKeys) => {
+    const originBbox = visualElement.measureViewportBox();
+    const element = visualElement.current;
+    const elementComputedStyle = getComputedStyle(element);
+    const { display } = elementComputedStyle;
+    const origin = {};
+    // If the element is currently set to display: "none", make it visible before
+    // measuring the target bounding box
+    if (display === "none") {
+        visualElement.setStaticValue("display", target.display || "block");
+    }
+    /**
+     * Record origins before we render and update styles
+     */
+    changedKeys.forEach((key) => {
+        origin[key] = positionalValues[key](originBbox, elementComputedStyle);
+    });
+    // Apply the latest values (as set in checkAndConvertChangedValueTypes)
+    visualElement.render();
+    const targetBbox = visualElement.measureViewportBox();
+    changedKeys.forEach((key) => {
+        // Restore styles to their **calculated computed style**, not their actual
+        // originally set style. This allows us to animate between equivalent pixel units.
+        const value = visualElement.getValue(key);
+        value && value.jump(origin[key]);
+        target[key] = positionalValues[key](targetBbox, elementComputedStyle);
+    });
+    return target;
+};
+const checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, transitionEnd = {}) => {
+    target = { ...target };
+    transitionEnd = { ...transitionEnd };
+    const targetPositionalKeys = Object.keys(target).filter(isPositionalKey);
+    // We want to remove any transform values that could affect the element's bounding box before
+    // it's measured. We'll reapply these later.
+    let removedTransformValues = [];
+    let hasAttemptedToRemoveTransformValues = false;
+    const changedValueTypeKeys = [];
+    targetPositionalKeys.forEach((key) => {
+        const value = visualElement.getValue(key);
+        if (!visualElement.hasValue(key))
+            return;
+        let from = origin[key];
+        let fromType = findDimensionValueType(from);
+        const to = target[key];
+        let toType;
+        // TODO: The current implementation of this basically throws an error
+        // if you try and do value conversion via keyframes. There's probably
+        // a way of doing this but the performance implications would need greater scrutiny,
+        // as it'd be doing multiple resize-remeasure operations.
+        if (isKeyframesTarget(to)) {
+            const numKeyframes = to.length;
+            const fromIndex = to[0] === null ? 1 : 0;
+            from = to[fromIndex];
+            fromType = findDimensionValueType(from);
+            for (let i = fromIndex; i < numKeyframes; i++) {
+                /**
+                 * Don't allow wildcard keyframes to be used to detect
+                 * a difference in value types.
+                 */
+                if (to[i] === null)
+                    break;
+                if (!toType) {
+                    toType = findDimensionValueType(to[i]);
+                    invariant(toType === fromType ||
+                        (isNumOrPxType(fromType) && isNumOrPxType(toType)), "Keyframes must be of the same dimension as the current value");
+                }
+                else {
+                    invariant(findDimensionValueType(to[i]) === toType, "All keyframes must be of the same type");
+                }
+            }
+        }
+        else {
+            toType = findDimensionValueType(to);
+        }
+        if (fromType !== toType) {
+            // If they're both just number or px, convert them both to numbers rather than
+            // relying on resize/remeasure to convert (which is wasteful in this situation)
+            if (isNumOrPxType(fromType) && isNumOrPxType(toType)) {
+                const current = value.get();
+                if (typeof current === "string") {
+                    value.set(parseFloat(current));
+                }
+                if (typeof to === "string") {
+                    target[key] = parseFloat(to);
+                }
+                else if (Array.isArray(to) && toType === px) {
+                    target[key] = to.map(parseFloat);
+                }
+            }
+            else if ((fromType === null || fromType === void 0 ? void 0 : fromType.transform) &&
+                (toType === null || toType === void 0 ? void 0 : toType.transform) &&
+                (from === 0 || to === 0)) {
+                // If one or the other value is 0, it's safe to coerce it to the
+                // type of the other without measurement
+                if (from === 0) {
+                    value.set(toType.transform(from));
+                }
+                else {
+                    target[key] = fromType.transform(to);
+                }
+            }
+            else {
+                // If we're going to do value conversion via DOM measurements, we first
+                // need to remove non-positional transform values that could affect the bbox measurements.
+                if (!hasAttemptedToRemoveTransformValues) {
+                    removedTransformValues =
+                        removeNonTranslationalTransform(visualElement);
+                    hasAttemptedToRemoveTransformValues = true;
+                }
+                changedValueTypeKeys.push(key);
+                transitionEnd[key] =
+                    transitionEnd[key] !== undefined
+                        ? transitionEnd[key]
+                        : target[key];
+                value.jump(to);
+            }
+        }
+    });
+    if (changedValueTypeKeys.length) {
+        const scrollY = changedValueTypeKeys.indexOf("height") >= 0
+            ? window.pageYOffset
+            : null;
+        const convertedTarget = convertChangedValueTypes(target, visualElement, changedValueTypeKeys);
+        // If we removed transform values, reapply them before the next render
+        if (removedTransformValues.length) {
+            removedTransformValues.forEach(([key, value]) => {
+                visualElement.getValue(key).set(value);
+            });
+        }
+        // Reapply original values
+        visualElement.render();
+        // Restore scroll position
+        if (isBrowser && scrollY !== null) {
+            window.scrollTo({ top: scrollY });
+        }
+        return { target: convertedTarget, transitionEnd };
+    }
+    else {
+        return { target, transitionEnd };
+    }
+};
+/**
+ * Convert value types for x/y/width/height/top/left/bottom/right
+ *
+ * Allows animation between `'auto'` -> `'100%'` or `0` -> `'calc(50% - 10vw)'`
+ *
+ * @internal
+ */
+function unitConversion(visualElement, target, origin, transitionEnd) {
+    return hasPositionalKey(target)
+        ? checkAndConvertChangedValueTypes(visualElement, target, origin, transitionEnd)
+        : { target, transitionEnd };
+}
+
+export { positionalValues, unitConversion };

package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/animatable-none.js

@@ -0,0 +1,15 @@
+import { complex } from '../../../value/types/complex/index.js';
+import { filter } from '../../../value/types/complex/filter.js';
+import { getDefaultValueType } from './defaults.js';
+
+function getAnimatableNone(key, value) {
+    let defaultValueType = getDefaultValueType(key);
+    if (defaultValueType !== filter)
+        defaultValueType = complex;
+    // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
+    return defaultValueType.getAnimatableNone
+        ? defaultValueType.getAnimatableNone(value)
+        : undefined;
+}
+
+export { getAnimatableNone };

package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/defaults.js

@@ -0,0 +1,30 @@
+import { color } from '../../../value/types/color/index.js';
+import { filter } from '../../../value/types/complex/filter.js';
+import { numberValueTypes } from './number.js';
+
+/**
+ * A map of default value types for common values
+ */
+const defaultValueTypes = {
+    ...numberValueTypes,
+    // Color props
+    color,
+    backgroundColor: color,
+    outlineColor: color,
+    fill: color,
+    stroke: color,
+    // Border props
+    borderColor: color,
+    borderTopColor: color,
+    borderRightColor: color,
+    borderBottomColor: color,
+    borderLeftColor: color,
+    filter,
+    WebkitFilter: filter,
+};
+/**
+ * Gets the default ValueType for the provided value key
+ */
+const getDefaultValueType = (key) => defaultValueTypes[key];
+
+export { defaultValueTypes, getDefaultValueType };

package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/dimensions.js

@@ -0,0 +1,15 @@
+import { number } from '../../../value/types/numbers/index.js';
+import { px, percent, degrees, vw, vh } from '../../../value/types/numbers/units.js';
+import { testValueType } from './test.js';
+import { auto } from './type-auto.js';
+
+/**
+ * A list of value types commonly used for dimensions
+ */
+const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
+/**
+ * Tests a dimensional value against the list of dimension ValueTypes
+ */
+const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
+
+export { dimensionValueTypes, findDimensionValueType };

package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/find.js

@@ -0,0 +1,15 @@
+import { color } from '../../../value/types/color/index.js';
+import { complex } from '../../../value/types/complex/index.js';
+import { dimensionValueTypes } from './dimensions.js';
+import { testValueType } from './test.js';
+
+/**
+ * A list of all ValueTypes
+ */
+const valueTypes = [...dimensionValueTypes, color, complex];
+/**
+ * Tests a value against the list of ValueTypes
+ */
+const findValueType = (v) => valueTypes.find(testValueType(v));
+
+export { findValueType };

package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/get-as-type.js

@@ -0,0 +1,10 @@
+/**
+ * Provided a value and a ValueType, returns the value as that value type.
+ */
+const getValueAsType = (value, type) => {
+    return type && typeof value === "number"
+        ? type.transform(value)
+        : value;
+};
+
+export { getValueAsType };

package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/number.js

@@ -0,0 +1,72 @@
+import { scale, alpha } from '../../../value/types/numbers/index.js';
+import { px, degrees, progressPercentage } from '../../../value/types/numbers/units.js';
+import { int } from './type-int.js';
+
+const numberValueTypes = {
+    // Border props
+    borderWidth: px,
+    borderTopWidth: px,
+    borderRightWidth: px,
+    borderBottomWidth: px,
+    borderLeftWidth: px,
+    borderRadius: px,
+    radius: px,
+    borderTopLeftRadius: px,
+    borderTopRightRadius: px,
+    borderBottomRightRadius: px,
+    borderBottomLeftRadius: px,
+    // Positioning props
+    width: px,
+    maxWidth: px,
+    height: px,
+    maxHeight: px,
+    size: px,
+    top: px,
+    right: px,
+    bottom: px,
+    left: px,
+    // Spacing props
+    padding: px,
+    paddingTop: px,
+    paddingRight: px,
+    paddingBottom: px,
+    paddingLeft: px,
+    margin: px,
+    marginTop: px,
+    marginRight: px,
+    marginBottom: px,
+    marginLeft: px,
+    // Transform props
+    rotate: degrees,
+    rotateX: degrees,
+    rotateY: degrees,
+    rotateZ: degrees,
+    scale,
+    scaleX: scale,
+    scaleY: scale,
+    scaleZ: scale,
+    skew: degrees,
+    skewX: degrees,
+    skewY: degrees,
+    distance: px,
+    translateX: px,
+    translateY: px,
+    translateZ: px,
+    x: px,
+    y: px,
+    z: px,
+    perspective: px,
+    transformPerspective: px,
+    opacity: alpha,
+    originX: progressPercentage,
+    originY: progressPercentage,
+    originZ: px,
+    // Misc
+    zIndex: int,
+    // SVG
+    fillOpacity: alpha,
+    strokeOpacity: alpha,
+    numOctaves: int,
+};
+
+export { numberValueTypes };

package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/test.js

@@ -0,0 +1,6 @@
+/**
+ * Tests a provided value against a ValueType
+ */
+const testValueType = (v) => (type) => type.test(v);
+
+export { testValueType };

package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/type-auto.js

@@ -0,0 +1,9 @@
+/**
+ * ValueType for "auto"
+ */
+const auto = {
+    test: (v) => v === "auto",
+    parse: (v) => v,
+};
+
+export { auto };

package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/type-int.js

@@ -0,0 +1,8 @@
+import { number } from '../../../value/types/numbers/index.js';
+
+const int = {
+    ...number,
+    transform: Math.round,
+};
+
+export { int };