@jobber/components 4.77.5 → 4.78.0

package/AnimatedPresence.d.ts

@@ -0,0 +1 @@
+export * from "./dist/AnimatedPresence";

package/AnimatedPresence.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var AnimatedPresence = require("./dist/AnimatedPresence");
+
+Object.keys(AnimatedPresence).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return AnimatedPresence[key];
+    },
+  });
+});

package/dist/AnimatedPresence/AnimatedPresence.d.ts

@@ -0,0 +1,24 @@
+import { PropsWithChildren } from "react";
+declare const transitions: {
+    fromBottom: import("framer-motion").Variants;
+    fromTop: import("framer-motion").Variants;
+    fromLeft: import("framer-motion").Variants;
+    fromRight: import("framer-motion").Variants;
+    popIn: import("framer-motion").Variants;
+    fromLeftToRight: import("framer-motion").Variants;
+    fromRightToLeft: import("framer-motion").Variants;
+    fade: import("framer-motion").Variants;
+};
+export type AnimatedPresenceTransitions = keyof typeof transitions;
+interface AnimatedPresenceProps extends Required<PropsWithChildren> {
+    /**
+     * The type of transition you can use.
+     */
+    readonly transition?: AnimatedPresenceTransitions;
+    /**
+     * Whether or not to animate the children on mount. By default it's set to false.
+     */
+    readonly initial?: boolean;
+}
+export declare function AnimatedPresence(props: AnimatedPresenceProps): JSX.Element;
+export {};

package/dist/AnimatedPresence/AnimatedPresence.transitions.d.ts

@@ -0,0 +1,11 @@
+import { Variants } from "framer-motion";
+export declare const TIMING_QUICK: number;
+export declare const TIMING_BASE: number;
+export declare const fade: Variants;
+export declare const popIn: Variants;
+export declare const fromTop: Variants;
+export declare const fromBottom: Variants;
+export declare const fromLeft: Variants;
+export declare const fromRight: Variants;
+export declare const fromLeftToRight: Variants;
+export declare const fromRightToLeft: Variants;

package/dist/AnimatedPresence/hooks/usePreviousValue.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function usePreviousValue<T>(value: T): readonly [T, import("react").Dispatch<import("react").SetStateAction<T>>];

package/dist/AnimatedPresence/index.d.ts

@@ -0,0 +1 @@
+export * from "./AnimatedPresence";

package/dist/AnimatedPresence/index.js

@@ -0,0 +1,106 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var framerMotion = require('framer-motion');
+var design = require('@jobber/design');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const TIMING_QUICK = toSeconds(design.tokens["timing-quick"]);
+const TIMING_BASE = toSeconds(design.tokens["timing-base"]);
+const baseTransition = {
+    visible: { opacity: 1 },
+    hidden: { opacity: 0 },
+};
+const fade = {
+    visible: { opacity: 1 },
+    hidden: { opacity: 0 },
+};
+const popIn = {
+    visible: Object.assign({ scale: 1 }, baseTransition.visible),
+    hidden: Object.assign({ scale: 0.95 }, baseTransition.hidden),
+};
+const fromTop = {
+    visible: Object.assign({ y: 0 }, baseTransition.visible),
+    hidden: Object.assign({ y: -design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromBottom = {
+    visible: Object.assign({ y: 0 }, baseTransition.visible),
+    hidden: Object.assign({ y: design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromLeft = {
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromRight = {
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromLeftToRight = {
+    initial: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromRightToLeft = {
+    initial: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
+};
+function toSeconds(ms) {
+    return ms / 1000;
+}
+
+function usePreviousValue(value) {
+    const [previousValue, setPreviousValue] = React.useState(value);
+    React.useEffect(() => {
+        setPreviousValue(value);
+    }, [value]);
+    return [previousValue, setPreviousValue];
+}
+
+const transitions = {
+    fromBottom,
+    fromTop,
+    fromLeft,
+    fromRight,
+    popIn,
+    fromLeftToRight,
+    fromRightToLeft,
+    fade,
+};
+function AnimatedPresence(props) {
+    const shouldReduceMotion = framerMotion.useReducedMotion();
+    if (shouldReduceMotion) {
+        return React__default["default"].createElement(React__default["default"].Fragment, null, props.children);
+    }
+    return React__default["default"].createElement(InternalAnimatedPresence, Object.assign({}, props));
+}
+function InternalAnimatedPresence({ transition = "fromTop", initial = false, children, }) {
+    const transitionVariation = transitions[transition];
+    const hasInitialTransition = "initial" in transitionVariation;
+    const childCount = React.Children.count(children);
+    // Set the initial value to 0 so it staggers the animation on mount when
+    // initial is true.
+    const [lastChildIndex, setLastChildIndex] = usePreviousValue(0);
+    // Whenever the children count changes, update the last index.
+    React.useEffect(() => {
+        setLastChildIndex(childCount - 1);
+    }, [childCount]);
+    return (React__default["default"].createElement(framerMotion.AnimatePresence, { initial: initial, mode: "popLayout" }, React.Children.map(children, (child, i) => child && (React__default["default"].createElement(framerMotion.motion.div, { layout: true, variants: transitionVariation, initial: hasInitialTransition ? "initial" : "hidden", animate: "visible", exit: "hidden", transition: {
+            duration: TIMING_BASE,
+            delay: generateDelayTime(i),
+        } }, child)))));
+    function generateDelayTime(index) {
+        // Don't add a delay if it's already rendered.
+        if (lastChildIndex > index)
+            return 0;
+        // Stagger the animation starting after the previous last child index.
+        return (index - lastChildIndex) * TIMING_QUICK;
+    }
+}
+
+exports.AnimatedPresence = AnimatedPresence;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.77.5",
+  "version": "4.78.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "3f1d6b70deb0ca76a8d1b818cb857151b371a598"
+  "gitHead": "e6ea2817fa008fa463a8adbc6b918566d05d9d38"
 }