@jobber/components 6.20.6 → 6.20.8

package/dist/LightBox/LightBox.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from "react";
 interface PresentedImage {
     title?: string;
     caption?: string;
@@ -32,6 +33,12 @@ interface LightBoxProps {
      * that has the index of the image the user was on when LightBox was closed.
      */
     onRequestClose(options: RequestCloseOptions): void;
+    /**
+     * Sets the box-sizing for the thumbnails in the lightbox. This is a solution for a problem where
+     * tailwind was setting the box-sizing to `border-box` and causing issues with the lightbox.
+     * @default "content-box"
+     */
+    readonly boxSizing?: CSSProperties["boxSizing"];
 }
-export declare function LightBox({ open, images, imageIndex, onRequestClose, }: LightBoxProps): JSX.Element;
+export declare function LightBox({ boxSizing, open, images, imageIndex, onRequestClose, }: LightBoxProps): JSX.Element;
 export {};

package/dist/LightBox-cjs.js

@@ -103,7 +103,7 @@ const imageTransition = {
 // https://github.com/framer/motion/issues/1769
 const BUTTON_DEBOUNCE_DELAY = 250;
 const MOVEMENT_DEBOUNCE_DELAY = 1000;
-function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
+function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onRequestClose, }) {
     const [currentImageIndex, setCurrentImageIndex] = React.useState(imageIndex);
     const [direction, setDirection] = React.useState(0);
     const [mouseIsStationary, setMouseIsStationary] = React.useState(true);
@@ -169,7 +169,9 @@ function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
                 images[currentImageIndex].title && (React.createElement("div", { className: styles.title },
                     React.createElement(Heading.Heading, { level: 4 }, images[currentImageIndex].title))),
                 images[currentImageIndex].caption && (React.createElement(Text.Text, { size: "large" }, images[currentImageIndex].caption))))),
-        images.length > 1 && (React.createElement("div", { className: styles.thumbnailBar, "data-testid": "ATL-Thumbnail-Bar" }, images.map((image, index) => (React.createElement("div", { key: index, className: classnames(styles.thumbnail, {
+        images.length > 1 && (React.createElement("div", { className: styles.thumbnailBar, style: {
+                "--lightbox--box-sizing": boxSizing,
+            }, "data-testid": "ATL-Thumbnail-Bar" }, images.map((image, index) => (React.createElement("div", { key: index, className: classnames(styles.thumbnail, {
                 [styles.selected]: index === currentImageIndex,
             }), onClick: () => handleThumbnailClick(index), ref: index === currentImageIndex ? selectedThumbnailRef : null },
             React.createElement("img", { key: index, src: image.url, alt: image.alt || image.title || "", className: styles.thumbnailImage }))))))))));

package/dist/LightBox-es.js

@@ -101,7 +101,7 @@ const imageTransition = {
 // https://github.com/framer/motion/issues/1769
 const BUTTON_DEBOUNCE_DELAY = 250;
 const MOVEMENT_DEBOUNCE_DELAY = 1000;
-function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
+function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onRequestClose, }) {
     const [currentImageIndex, setCurrentImageIndex] = useState(imageIndex);
     const [direction, setDirection] = useState(0);
     const [mouseIsStationary, setMouseIsStationary] = useState(true);
@@ -167,7 +167,9 @@ function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
                 images[currentImageIndex].title && (React.createElement("div", { className: styles.title },
                     React.createElement(Heading, { level: 4 }, images[currentImageIndex].title))),
                 images[currentImageIndex].caption && (React.createElement(Text, { size: "large" }, images[currentImageIndex].caption))))),
-        images.length > 1 && (React.createElement("div", { className: styles.thumbnailBar, "data-testid": "ATL-Thumbnail-Bar" }, images.map((image, index) => (React.createElement("div", { key: index, className: classnames(styles.thumbnail, {
+        images.length > 1 && (React.createElement("div", { className: styles.thumbnailBar, style: {
+                "--lightbox--box-sizing": boxSizing,
+            }, "data-testid": "ATL-Thumbnail-Bar" }, images.map((image, index) => (React.createElement("div", { key: index, className: classnames(styles.thumbnail, {
                 [styles.selected]: index === currentImageIndex,
             }), onClick: () => handleThumbnailClick(index), ref: index === currentImageIndex ? selectedThumbnailRef : null },
             React.createElement("img", { key: index, src: image.url, alt: image.alt || image.title || "", className: styles.thumbnailImage }))))))))));

package/dist/styles.css

@@ -11,10 +11,8 @@
   visibility: hidden;
   z-index: calc(6 + 1001);
   z-index: calc(var(--elevation-menu) + var(--elevation-modal));
-  width: 100%;
-  /* Unfortunately this is how we define our line item picker height in jobber online.
-  This is a concession to maintain visual parity. */
-  max-height: 300px;
+  width: 0;
+  height: 0;
   box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
   box-shadow: var(--shadow-base);
   box-sizing: border-box;
@@ -40,6 +38,9 @@
 
 .dL5JShAJlKM-._2RzcnTdaPyc- {
   visibility: visible;
+  width: 100%;
+  height: auto;
+  max-height: 300px;
   opacity: 1;
 }
 
@@ -561,7 +562,7 @@
 }
 
 ._3RdwgIvvnZo- {
-  color: hsl(207, 87%, 94%);
+  color: hsl(206, 61%, 23%);
   color: var(--color-payments--onSurface);
 }
 
@@ -7463,6 +7464,7 @@ html.atlantisLightBoxActive {
   background-color: rgba(3, 43, 58, 0.25);
 }
 ._3TfQLQEE3GQ- {
+  --lightbox--box-sizing: content-box;
   display: -ms-flexbox;
   display: flex;
   position: relative;
@@ -7470,6 +7472,8 @@ html.atlantisLightBoxActive {
   z-index: var(--elevation-base);
   width: 100%;
   min-height: 92px;
+  box-sizing: content-box;
+  box-sizing: var(--lightbox--box-sizing);
   margin-bottom: 8px;
   margin-bottom: var(--space-small);
   padding-bottom: 8px;
@@ -7507,6 +7511,9 @@ html.atlantisLightBoxActive {
       background: var(--color-interactive--subtle);
     }
   }
+._3TfQLQEE3GQ- * {
+  box-sizing: var(--lightbox--box-sizing);
+}
 .eBMzUOlcfQ4- {
   width: 100%;
   height: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.20.6",
+  "version": "6.20.8",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -489,5 +489,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "875c6f3a469ffc9d80b3ecfe4f86b74b5690d1c6"
+  "gitHead": "08d5668b5d461838c6a9474fb0b4b8fde7587cea"
 }