@jobber/components 8.8.1 → 8.9.0

package/dist/LightBox/LightBox.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { LightBoxNavigationProps, LightBoxProps } from "./LightBox.types";
+import type { LightBoxNavigationProps, LightBoxProps, LightBoxThumbnailBarProps, LightBoxThumbnailImageProps, LightBoxThumbnailProps } from "./LightBox.types";
 import { LightBoxProvider } from "./LightBoxContext";
 export declare function LightBoxContent(): React.JSX.Element;
 /**
@@ -75,7 +75,25 @@ declare function LightBoxCaption(): React.JSX.Element | null;
 /**
  * Scrollable thumbnail strip. Only renders when there are two or more images.
  */
-declare function LightBoxThumbnails(): React.JSX.Element | null;
+declare function LightBoxThumbnails(): React.JSX.Element;
+/**
+ * Scrollable container for the thumbnail strip. Owns the scroll chrome and
+ * box-sizing, and only renders when there are two or more images.
+ *
+ * Pass one `LightBox.Thumbnail` per image as `children` to own the thumbnail
+ * loop.
+ */
+declare function LightBoxThumbnailBar({ children, className, }: LightBoxThumbnailBarProps): React.JSX.Element | null;
+/**
+ * A selectable thumbnail cell identified by its `index`. Owns the selected
+ * styling, click-to-navigate behaviour, and renders consumer-provided
+ * `children` (typically a `LightBox.ThumbnailImage`).
+ */
+declare function LightBoxThumbnail({ index, children, className, }: LightBoxThumbnailProps): React.JSX.Element;
+/**
+ * A thumbnail using our default styling.
+ */
+declare function LightBoxThumbnailImage({ src, alt, className, }: LightBoxThumbnailImageProps): React.JSX.Element;
 /**
  * LightBox displays images in a fullscreen overlay.
  *
@@ -128,5 +146,8 @@ declare namespace LightBox {
     var Navigation: typeof LightBoxNavigation;
     var Caption: typeof LightBoxCaption;
     var Thumbnails: typeof LightBoxThumbnails;
+    var ThumbnailBar: typeof LightBoxThumbnailBar;
+    var Thumbnail: typeof LightBoxThumbnail;
+    var ThumbnailImage: typeof LightBoxThumbnailImage;
 }
 export { LightBox };

package/dist/LightBox/LightBox.types.d.ts

@@ -92,3 +92,44 @@ export interface LightBoxNavigationProps {
      */
     readonly nextButtonClassName?: string;
 }
+export interface LightBoxThumbnailBarProps {
+    /**
+     * The thumbnails to render inside the scrollable bar, typically one
+     * `LightBox.Thumbnail` per image.
+     */
+    readonly children: ReactNode;
+    /**
+     * Additional class name to apply to the thumbnail bar wrapper.
+     */
+    readonly className?: string;
+}
+export interface LightBoxThumbnailProps {
+    /**
+     * The index of the image this thumbnail represents. Used to derive the
+     * selected state and to navigate to the image when activated.
+     */
+    readonly index: number;
+    /**
+     * The content rendered inside the selectable thumbnail cell, typically a
+     * `LightBox.ThumbnailImage`.
+     */
+    readonly children: ReactNode;
+    /**
+     * Additional class name to apply to the thumbnail cell.
+     */
+    readonly className?: string;
+}
+export interface LightBoxThumbnailImageProps {
+    /**
+     * The image source to render.
+     */
+    readonly src: string;
+    /**
+     * The alternative text for the image.
+     */
+    readonly alt: string;
+    /**
+     * Additional class name to apply to the image.
+     */
+    readonly className?: string;
+}

package/dist/LightBox-cjs.js

@@ -305,13 +305,40 @@ function LightBoxCaption() {
  * Scrollable thumbnail strip. Only renders when there are two or more images.
  */
 function LightBoxThumbnails() {
-    const { images, currentImageIndex, boxSizing, selectedThumbnailRef, handleThumbnailClick, } = useLightBoxContext();
+    const { images } = useLightBoxContext();
+    return (React.createElement(LightBoxThumbnailBar, null, images.map((image, index) => (React.createElement(LightBoxThumbnail, { key: index, index: index },
+        React.createElement(LightBoxThumbnailImage, { src: image.url, alt: image.alt || image.title || "" }))))));
+}
+/**
+ * Scrollable container for the thumbnail strip. Owns the scroll chrome and
+ * box-sizing, and only renders when there are two or more images.
+ *
+ * Pass one `LightBox.Thumbnail` per image as `children` to own the thumbnail
+ * loop.
+ */
+function LightBoxThumbnailBar({ children, className, }) {
+    const { images, boxSizing } = useLightBoxContext();
     if (images.length <= 1)
         return null;
-    return (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 }))))));
+    return (React.createElement("div", { className: classnames(styles.thumbnailBar, className), style: { "--lightbox--box-sizing": boxSizing }, "data-testid": "ATL-Thumbnail-Bar" }, children));
+}
+/**
+ * A selectable thumbnail cell identified by its `index`. Owns the selected
+ * styling, click-to-navigate behaviour, and renders consumer-provided
+ * `children` (typically a `LightBox.ThumbnailImage`).
+ */
+function LightBoxThumbnail({ index, children, className, }) {
+    const { currentImageIndex, selectedThumbnailRef, handleThumbnailClick } = useLightBoxContext();
+    const selected = index === currentImageIndex;
+    return (React.createElement("div", { className: classnames(styles.thumbnail, className, {
+            [styles.selected]: selected,
+        }), onClick: () => handleThumbnailClick(index), ref: selected ? selectedThumbnailRef : null }, children));
+}
+/**
+ * A thumbnail using our default styling.
+ */
+function LightBoxThumbnailImage({ src, alt, className, }) {
+    return (React.createElement("img", { src: src, alt: alt, className: classnames(styles.thumbnailImage, className) }));
 }
 /**
  * LightBox displays images in a fullscreen overlay.
@@ -367,6 +394,9 @@ LightBox.Slides = LightBoxSlides;
 LightBox.Navigation = LightBoxNavigation;
 LightBox.Caption = LightBoxCaption;
 LightBox.Thumbnails = LightBoxThumbnails;
+LightBox.ThumbnailBar = LightBoxThumbnailBar;
+LightBox.Thumbnail = LightBoxThumbnail;
+LightBox.ThumbnailImage = LightBoxThumbnailImage;
 
 exports.LightBox = LightBox;
 exports.useLightBoxContext = useLightBoxContext;

package/dist/LightBox-es.js

@@ -303,13 +303,40 @@ function LightBoxCaption() {
  * Scrollable thumbnail strip. Only renders when there are two or more images.
  */
 function LightBoxThumbnails() {
-    const { images, currentImageIndex, boxSizing, selectedThumbnailRef, handleThumbnailClick, } = useLightBoxContext();
+    const { images } = useLightBoxContext();
+    return (React__default.createElement(LightBoxThumbnailBar, null, images.map((image, index) => (React__default.createElement(LightBoxThumbnail, { key: index, index: index },
+        React__default.createElement(LightBoxThumbnailImage, { src: image.url, alt: image.alt || image.title || "" }))))));
+}
+/**
+ * Scrollable container for the thumbnail strip. Owns the scroll chrome and
+ * box-sizing, and only renders when there are two or more images.
+ *
+ * Pass one `LightBox.Thumbnail` per image as `children` to own the thumbnail
+ * loop.
+ */
+function LightBoxThumbnailBar({ children, className, }) {
+    const { images, boxSizing } = useLightBoxContext();
     if (images.length <= 1)
         return null;
-    return (React__default.createElement("div", { className: styles.thumbnailBar, style: { "--lightbox--box-sizing": boxSizing }, "data-testid": "ATL-Thumbnail-Bar" }, images.map((image, index) => (React__default.createElement("div", { key: index, className: classnames(styles.thumbnail, {
-            [styles.selected]: index === currentImageIndex,
-        }), onClick: () => handleThumbnailClick(index), ref: index === currentImageIndex ? selectedThumbnailRef : null },
-        React__default.createElement("img", { key: index, src: image.url, alt: image.alt || image.title || "", className: styles.thumbnailImage }))))));
+    return (React__default.createElement("div", { className: classnames(styles.thumbnailBar, className), style: { "--lightbox--box-sizing": boxSizing }, "data-testid": "ATL-Thumbnail-Bar" }, children));
+}
+/**
+ * A selectable thumbnail cell identified by its `index`. Owns the selected
+ * styling, click-to-navigate behaviour, and renders consumer-provided
+ * `children` (typically a `LightBox.ThumbnailImage`).
+ */
+function LightBoxThumbnail({ index, children, className, }) {
+    const { currentImageIndex, selectedThumbnailRef, handleThumbnailClick } = useLightBoxContext();
+    const selected = index === currentImageIndex;
+    return (React__default.createElement("div", { className: classnames(styles.thumbnail, className, {
+            [styles.selected]: selected,
+        }), onClick: () => handleThumbnailClick(index), ref: selected ? selectedThumbnailRef : null }, children));
+}
+/**
+ * A thumbnail using our default styling.
+ */
+function LightBoxThumbnailImage({ src, alt, className, }) {
+    return (React__default.createElement("img", { src: src, alt: alt, className: classnames(styles.thumbnailImage, className) }));
 }
 /**
  * LightBox displays images in a fullscreen overlay.
@@ -365,5 +392,8 @@ LightBox.Slides = LightBoxSlides;
 LightBox.Navigation = LightBoxNavigation;
 LightBox.Caption = LightBoxCaption;
 LightBox.Thumbnails = LightBoxThumbnails;
+LightBox.ThumbnailBar = LightBoxThumbnailBar;
+LightBox.Thumbnail = LightBoxThumbnail;
+LightBox.ThumbnailImage = LightBoxThumbnailImage;
 
 export { LightBox as L, useLightBoxContext as u };

package/dist/docs/LightBox/LightBox.md

@@ -43,6 +43,10 @@ LightBox exposes its internal building blocks as subcomponents:
 `LightBox.Navigation`, `LightBox.Caption`, and `LightBox.Thumbnails`. This gives
 you more control over the LightBox's appearance and behaviour.
 
+The thumbnail strip is itself composed of smaller subcomponents you can use
+directly: `LightBox.ThumbnailBar`, `LightBox.Thumbnail`, and
+`LightBox.ThumbnailImage`. See [Custom thumbnails](#custom-thumbnails) below.
+
 Here's a basic example of how the non-composable LightBox is used:
 
 ```tsx
@@ -157,6 +161,33 @@ function CustomControls() {
 }
 ```
 
+### Custom thumbnails
+
+`LightBox.Thumbnails` renders the default thumbnail strip and requires no
+configuration. When you need to control how each thumbnail renders, compose the
+thumbnail subcomponents yourself:
+
+```tsx
+import { LightBox, useLightBoxContext } from "@jobber/components";
+
+function CustomThumbnails() {
+  const { images } = useLightBoxContext();
+
+  return (
+    <LightBox.ThumbnailBar>
+      {images.map((image, index) => (
+        <LightBox.Thumbnail key={index} index={index}>
+          <LightBox.ThumbnailImage
+            src={image.url}
+            alt={image.alt ?? image.title ?? ""}
+          />
+        </LightBox.Thumbnail>
+      ))}
+    </LightBox.ThumbnailBar>
+  );
+}
+```
+
 ## Testing
 
 When using Jest to test LightBox implementations, you will need to include this
@@ -223,3 +254,26 @@ window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `className` | `string` | No | — |  |
+
+#### LightBox.Thumbnail
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | Yes | — | The content rendered inside the selectable thumbnail cell, typically a `LightBox.ThumbnailImage`. |
+| `index` | `number` | Yes | — | The index of the image this thumbnail represents. Used to derive the selected state and to navigate to the image when... |
+| `className` | `string` | No | — | Additional class name to apply to the thumbnail cell. |
+
+#### LightBox.ThumbnailBar
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | Yes | — | The thumbnails to render inside the scrollable bar, typically one `LightBox.Thumbnail` per image. |
+| `className` | `string` | No | — | Additional class name to apply to the thumbnail bar wrapper. |
+
+#### LightBox.ThumbnailImage
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `alt` | `string` | Yes | — | The alternative text for the image. |
+| `src` | `string` | Yes | — | The image source to render. |
+| `className` | `string` | No | — | Additional class name to apply to the image. |

package/dist/utils/meta/meta.json

@@ -138,6 +138,9 @@
     "LightBox.Overlay",
     "LightBox.Provider",
     "LightBox.Slides",
+    "LightBox.Thumbnail",
+    "LightBox.ThumbnailBar",
+    "LightBox.ThumbnailImage",
     "LightBox.Thumbnails",
     "LightBox.Toolbar",
     "Link",
@@ -226,4 +229,4 @@
     "Tooltip",
     "Typography"
   ]
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.8.1",
+  "version": "8.9.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -556,5 +556,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "0bea341f82566e833ac0fe3486e829dc706918fe"
+  "gitHead": "e38cc8fc9387c2d0152349bfed2b16cfddb31037"
 }