@jobber/components 6.111.4 → 6.111.6

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/dist/styles.css

@@ -10326,18 +10326,18 @@ input.oOrjwubmsVA- {
 
   display: grid;
   grid-template-columns: repeat(var(--segmentedControl--option-count), 1fr);
-  -ms-flex-align: center;
-      align-items: center;
+  -ms-flex-align: stretch;
+      align-items: stretch;
   position: relative;
   min-height: 40px;
   min-height: var(--segmentedControl--size);
   box-sizing: border-box;
   border: 1px solid hsl(200, 13%, 87%);
-  border: var(--border-base) solid var(--color-border--interactive);
+  border: var(--border-base) solid var(--color-border);
   border-radius: 8px;
   border-radius: var(--radius-base);
-  background-color: hsl(51, 17%, 85%);
-  background-color: var(--color-interactive--background);
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
 }
 
 .V41prM1xcKI- {
@@ -10360,7 +10360,11 @@ input.oOrjwubmsVA- {
   z-index: 1;
   padding: 0 12px;
   padding: 0 var(--space-slim);
+  border-radius: 8px;
+  border-radius: var(--radius-base);
   overflow: hidden;
+  color: hsl(197, 15%, 43%);
+  color: var(--color-text--secondary);
   font-size: 14px;
   font-size: var(--typography--fontSize-base);
   font-weight: 600;
@@ -10370,6 +10374,26 @@ input.oOrjwubmsVA- {
       align-items: center;
   -ms-flex-pack: center;
       justify-content: center;
+  transition:
+    background-color 300ms ease-out,
+    color 300ms ease-out;
+  transition:
+    background-color var(--timing-slow) ease-out,
+    color var(--timing-slow) ease-out;
+}
+
+.FDDKTZkTdfM- input[type="radio"]:checked + label {
+  color: hsl(107, 58%, 33%);
+  color: var(--color-interactive);
+}
+
+/* Hover only on unselected options; selected already has a green border. */
+
+.FDDKTZkTdfM- input[type="radio"]:not(:checked) + label:hover {
+  color: hsl(107, 65%, 24%);
+  color: var(--color-interactive--hover);
+  background-color: hsl(109, 28%, 92%);
+  background-color: var(--color-interactive--background--subtle--hover);
 }
 
 .FDDKTZkTdfM- span {
@@ -10377,17 +10401,38 @@ input.oOrjwubmsVA- {
   left: 0;
   width: calc(100% / var(--segmentedControl--option-count));
   height: 100%;
+  box-sizing: border-box;
+  border: 1px solid hsl(107, 58%, 33%);
+  border: var(--border-base) solid var(--color-interactive);
   border-radius: 8px;
   border-radius: var(--radius-base);
-  outline: 1px solid hsl(200, 13%, 87%);
-  outline: var(--border-base) solid var(--color-border--interactive);
   background-color: rgba(255, 255, 255, 1);
   background-color: var(--color-surface);
-  transition: 200ms left ease;
-  transition: var(--timing-base) left ease;
+  transition: 300ms left ease-out;
+  transition: var(--timing-slow) left ease-out;
+}
+
+/* Focus ring at z-index: 2 so hover backgrounds (z-index: 1) can't cover it.
+   Negative inset aligns with the span's outer edge so the green border stays
+   visible inside the focus ring. */
+
+.FDDKTZkTdfM- span::after {
+  content: "";
+  position: absolute;
+  top: calc(-1 * 1px);
+  right: calc(-1 * 1px);
+  bottom: calc(-1 * 1px);
+  left: calc(-1 * 1px);
+  top: calc(-1 * var(--border-base));
+  right: calc(-1 * var(--border-base));
+  bottom: calc(-1 * var(--border-base));
+  left: calc(-1 * var(--border-base));
+  z-index: 2;
+  border-radius: inherit;
+  pointer-events: none;
 }
 
-.FDDKTZkTdfM- input[type="radio"]:focus-visible ~ span {
+.FDDKTZkTdfM- input[type="radio"]:focus-visible ~ span::after {
   box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
 }

package/package.json

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