@jobber/components 6.111.4 → 6.111.5

package/dist/LightBox/LightBox.d.ts

@@ -41,5 +41,16 @@ interface LightBoxProps {
      */
     readonly boxSizing?: CSSProperties["boxSizing"];
 }
+export declare const slideVariants: {
+    enter: (directionRef: React.RefObject<number>) => {
+        x: string;
+    };
+    center: {
+        x: number;
+    };
+    exit: (directionRef: React.RefObject<number>) => {
+        x: string;
+    };
+};
 export declare function LightBox({ boxSizing, open, images, imageIndex, onRequestClose, }: LightBoxProps): React.JSX.Element;
 export {};

package/dist/LightBox-cjs.js

@@ -17,20 +17,16 @@ const swipeConfidenceThreshold = 10000;
 const swipePower = (offset, velocity) => {
     return Math.abs(offset) * velocity;
 };
-const variants = {
-    enter: (direction) => {
-        return {
-            x: direction > 0 ? "150%" : "-150%",
-        };
-    },
+const slideVariants = {
+    enter: (directionRef) => ({
+        x: directionRef.current > 0 ? "150%" : "-150%",
+    }),
     center: {
         x: 0,
     },
-    exit: (direction) => {
-        return {
-            x: direction < 0 ? "150%" : "-150%",
-        };
-    },
+    exit: (directionRef) => ({
+        x: directionRef.current < 0 ? "150%" : "-150%",
+    }),
 };
 const imageTransition = {
     x: { duration: 0.65, ease: [0.42, 0, 0, 1.03] },
@@ -42,7 +38,7 @@ const BUTTON_DEBOUNCE_DELAY = 250;
 const MOVEMENT_DEBOUNCE_DELAY = 1000;
 function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onRequestClose, }) {
     const [currentImageIndex, setCurrentImageIndex] = React.useState(imageIndex);
-    const [direction, setDirection] = React.useState(0);
+    const directionRef = React.useRef(0);
     const [mouseIsStationary, setMouseIsStationary] = React.useState(true);
     const lightboxRef = jobberHooks.useFocusTrap(open);
     const selectedThumbnailRef = React.useRef(null);
@@ -94,7 +90,7 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
                     React.createElement(ButtonDismiss.ButtonDismiss, { ariaLabel: "Close", onClick: handleRequestClose })))),
         React.createElement("div", { className: styles.imageArea },
             React.createElement(framerMotion.AnimatePresence, { initial: false },
-                React.createElement(framerMotion.motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, custom: direction, className: styles.image, initial: "enter", alt: images[currentImageIndex].alt ||
+                React.createElement(framerMotion.motion.img, { key: currentImageIndex, variants: slideVariants, src: images[currentImageIndex].url, custom: directionRef, className: styles.image, initial: "enter", alt: images[currentImageIndex].alt ||
                         images[currentImageIndex].title ||
                         "", animate: "center", exit: "exit", transition: imageTransition, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleOnDragEnd }))),
         images.length > 1 && (React.createElement(React.Fragment, null,
@@ -116,11 +112,11 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
         ? ReactDOM.createPortal(template, document.body)
         : template;
     function handleMovePrevious() {
-        setDirection(-1);
+        directionRef.current = -1;
         setCurrentImageIndex((currentImageIndex + images.length - 1) % images.length);
     }
     function handleMoveNext() {
-        setDirection(1);
+        directionRef.current = 1;
         setCurrentImageIndex((currentImageIndex + 1) % images.length);
     }
     function handleRequestClose() {
@@ -137,10 +133,10 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
     }
     function handleThumbnailClick(index) {
         if (index < currentImageIndex) {
-            setDirection(-1);
+            directionRef.current = -1;
         }
         else {
-            setDirection(1);
+            directionRef.current = 1;
         }
         setCurrentImageIndex(index);
     }

package/dist/LightBox-es.js

@@ -15,20 +15,16 @@ const swipeConfidenceThreshold = 10000;
 const swipePower = (offset, velocity) => {
     return Math.abs(offset) * velocity;
 };
-const variants = {
-    enter: (direction) => {
-        return {
-            x: direction > 0 ? "150%" : "-150%",
-        };
-    },
+const slideVariants = {
+    enter: (directionRef) => ({
+        x: directionRef.current > 0 ? "150%" : "-150%",
+    }),
     center: {
         x: 0,
     },
-    exit: (direction) => {
-        return {
-            x: direction < 0 ? "150%" : "-150%",
-        };
-    },
+    exit: (directionRef) => ({
+        x: directionRef.current < 0 ? "150%" : "-150%",
+    }),
 };
 const imageTransition = {
     x: { duration: 0.65, ease: [0.42, 0, 0, 1.03] },
@@ -40,7 +36,7 @@ const BUTTON_DEBOUNCE_DELAY = 250;
 const MOVEMENT_DEBOUNCE_DELAY = 1000;
 function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onRequestClose, }) {
     const [currentImageIndex, setCurrentImageIndex] = useState(imageIndex);
-    const [direction, setDirection] = useState(0);
+    const directionRef = useRef(0);
     const [mouseIsStationary, setMouseIsStationary] = useState(true);
     const lightboxRef = useFocusTrap(open);
     const selectedThumbnailRef = useRef(null);
@@ -92,7 +88,7 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
                     React__default.createElement(ButtonDismiss, { ariaLabel: "Close", onClick: handleRequestClose })))),
         React__default.createElement("div", { className: styles.imageArea },
             React__default.createElement(AnimatePresence, { initial: false },
-                React__default.createElement(motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, custom: direction, className: styles.image, initial: "enter", alt: images[currentImageIndex].alt ||
+                React__default.createElement(motion.img, { key: currentImageIndex, variants: slideVariants, src: images[currentImageIndex].url, custom: directionRef, className: styles.image, initial: "enter", alt: images[currentImageIndex].alt ||
                         images[currentImageIndex].title ||
                         "", animate: "center", exit: "exit", transition: imageTransition, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleOnDragEnd }))),
         images.length > 1 && (React__default.createElement(React__default.Fragment, null,
@@ -114,11 +110,11 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
         ? ReactDOM__default.createPortal(template, document.body)
         : template;
     function handleMovePrevious() {
-        setDirection(-1);
+        directionRef.current = -1;
         setCurrentImageIndex((currentImageIndex + images.length - 1) % images.length);
     }
     function handleMoveNext() {
-        setDirection(1);
+        directionRef.current = 1;
         setCurrentImageIndex((currentImageIndex + 1) % images.length);
     }
     function handleRequestClose() {
@@ -135,10 +131,10 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
     }
     function handleThumbnailClick(index) {
         if (index < currentImageIndex) {
-            setDirection(-1);
+            directionRef.current = -1;
         }
         else {
-            setDirection(1);
+            directionRef.current = 1;
         }
         setCurrentImageIndex(index);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.111.4",
+  "version": "6.111.5",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "7f1df502111c69f3371131ca2e2d3ff2ee5cb1af"
+  "gitHead": "74ad056f656ebfec2d55cc1f52703abbd8aaaecc"
 }