@vectara/vectara-ui 9.16.1 → 9.17.0

package/lib/components/image/Image.d.ts

@@ -7,5 +7,5 @@ type Props = {
     isFailure?: boolean;
     allowPreview?: boolean;
 };
-export declare const VuiImage: ({ src, alt, caption, className, isLoading, allowPreview, isFailure, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiImage: ({ src, alt, caption, className, isLoading, allowPreview, isFailure }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/image/Image.js

@@ -7,7 +7,7 @@ import { VuiText } from "../typography/Text";
 import { VuiImagePreview } from "./ImagePreview";
 import { VuiIcon } from "../icon/Icon";
 import { BiImage, BiError } from "react-icons/bi";
-export const VuiImage = ({ src, alt, caption, className, isLoading = false, allowPreview = true, isFailure = false, }) => {
+export const VuiImage = ({ src, alt, caption, className, isLoading = false, allowPreview = true, isFailure = false }) => {
     const [isPreviewOpen, setIsPreviewOpen] = useState(false);
     const handlePreviewClick = () => {
         if (allowPreview) {
@@ -23,5 +23,5 @@ export const VuiImage = ({ src, alt, caption, className, isLoading = false, allo
     if (isFailure) {
         return (_jsx("div", Object.assign({ className: "vuiImage__placeholder vuiImage__placeholder--error" }, { children: _jsxs(VuiFlexContainer, Object.assign({ direction: "column", alignItems: "center", justifyContent: "center", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiImage__iconWrapper" }, { children: _jsx(VuiIcon, Object.assign({ size: "m", color: "danger" }, { children: _jsx(BiError, {}) })) })) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, Object.assign({ size: "s", align: "center" }, { children: _jsx("p", { children: "Missing image" }) })) }))] })) })));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(VuiFlexContainer, Object.assign({ direction: "column", spacing: "s" }, { children: _jsxs("figure", { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiImage__imageWrapper" }, { children: _jsx("img", { src: src, alt: alt, className: imageClasses, onClick: handlePreviewClick }) })) })), caption && (_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, Object.assign({ size: "s" }, { children: _jsx("figcaption", { children: caption }) })) })))] }) })), allowPreview && (_jsx(VuiImagePreview, { src: src, alt: alt, isOpen: isPreviewOpen, onClose: () => setIsPreviewOpen(false) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(VuiFlexContainer, Object.assign({ direction: "column", spacing: "s" }, { children: _jsxs("figure", { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiImage__imageWrapper" }, { children: _jsx("img", { src: src, alt: alt, className: imageClasses, onClick: handlePreviewClick }) })) })), caption && (_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, Object.assign({ size: "s" }, { children: _jsx("figcaption", { children: caption }) })) })))] }) })), allowPreview && (_jsx(VuiImagePreview, { images: [{ src, alt, caption }], isOpen: isPreviewOpen, onClose: () => setIsPreviewOpen(false) }))] }));
 };

package/lib/components/image/ImagePreview.d.ts

@@ -1,9 +1,14 @@
-type Props = {
+type ImageData = {
     src: string;
     alt?: string;
+    caption?: string;
+};
+type Props = {
+    images: ImageData[];
+    initialIndex?: number;
     isOpen: boolean;
     onClose: () => void;
     className?: string;
 };
-export declare const VuiImagePreview: ({ src, alt, isOpen, onClose, className }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiImagePreview: ({ images, initialIndex, isOpen, onClose, className }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/image/ImagePreview.js

@@ -1,27 +1,59 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 import { FocusOn } from "react-focus-on";
-import { BiX } from "react-icons/bi";
+import { BiX, BiChevronLeft, BiChevronRight } from "react-icons/bi";
 import { VuiIconButton } from "../button/IconButton";
 import { VuiIcon } from "../icon/Icon";
 import { VuiPortal } from "../portal/Portal";
-import { VuiScreenBlock } from "../screenBlock/ScreenBlock";
-export const VuiImagePreview = ({ src, alt, isOpen, onClose, className }) => {
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiText } from "../typography/Text";
+import { VuiTextColor } from "../typography/TextColor";
+export const VuiImagePreview = ({ images, initialIndex = 0, isOpen, onClose, className }) => {
     const returnFocusElRef = useRef(null);
-    // Return focus on unmount
+    const [currentIndex, setCurrentIndex] = useState(initialIndex);
+    const isCarousel = images.length > 1;
     useEffect(() => {
         var _a;
         if (isOpen) {
             returnFocusElRef.current = document.activeElement;
+            setCurrentIndex(initialIndex);
         }
         else {
             (_a = returnFocusElRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             returnFocusElRef.current = null;
         }
-    }, [isOpen]);
-    // Allow contents to respond to blur events before unmounting
+    }, [isOpen, initialIndex]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === "ArrowLeft") {
+                e.preventDefault();
+                handlePrevious();
+            }
+            else if (e.key === "ArrowRight") {
+                e.preventDefault();
+                handleNext();
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen, currentIndex]);
+    const handlePrevious = () => {
+        setCurrentIndex((prev) => (prev > 0 ? prev - 1 : images.length - 1));
+    };
+    const handleNext = () => {
+        setCurrentIndex((prev) => (prev < images.length - 1 ? prev + 1 : 0));
+    };
     const handleOnClose = () => {
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
-    return (_jsx(VuiPortal, { children: isOpen && (_jsx("div", Object.assign({ className: className }, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: handleOnClose, returnFocus: false, autoFocus: isOpen }, { children: _jsx(VuiScreenBlock, Object.assign({ onClick: handleOnClose }, { children: _jsxs("div", Object.assign({ className: "vuiImagePreview__container" }, { children: [_jsx("div", Object.assign({ className: "vuiImagePreview__closeButton" }, { children: _jsx(VuiIconButton, { "aria-label": "Close preview", onClick: handleOnClose, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "l", color: "empty" }, { children: _jsx(BiX, {}) })) }) })), _jsx("div", Object.assign({ className: "vuiImagePreview__imageContainer" }, { children: _jsx("img", { src: src, alt: alt, className: "vuiImagePreview__image", draggable: false }) }))] })) })) })) }))) }));
+    return (_jsx(VuiPortal, { children: isOpen && (_jsx("div", Object.assign({ className: className }, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: handleOnClose, returnFocus: false, autoFocus: isOpen }, { children: _jsx("figure", { children: _jsx("div", Object.assign({ className: "vuiImagePreview__container" }, { children: _jsxs("div", Object.assign({ className: "vuiImagePreview__mask", onClick: handleOnClose }, { children: [_jsx("div", Object.assign({ onClick: (e) => e.stopPropagation() }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "spaceBetween", className: "vuiImagePreview__header" }, { children: [_jsx(VuiFlexItem, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [isCarousel && (_jsxs(_Fragment, { children: [_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Previous image", onClick: (e) => {
+                                                                            e.stopPropagation();
+                                                                            handlePrevious();
+                                                                        }, color: "neutral", size: "s", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "empty" }, { children: _jsx(BiChevronLeft, {}) })) }) }), _jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Next image", onClick: (e) => {
+                                                                            e.stopPropagation();
+                                                                            handleNext();
+                                                                        }, color: "neutral", size: "s", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "empty" }, { children: _jsx(BiChevronRight, {}) })) }) })] })), _jsx(VuiFlexItem, { children: _jsx(VuiText, Object.assign({ size: "s" }, { children: _jsx(VuiTextColor, Object.assign({ color: "empty" }, { children: _jsxs("figcaption", { children: [isCarousel && `Image ${currentIndex + 1} of ${images.length}: `, images[currentIndex].caption] }) })) })) })] })) }), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiImagePreview__closeButton" }, { children: _jsx(VuiIconButton, { "aria-label": "Close preview", onClick: handleOnClose, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "l", color: "empty" }, { children: _jsx(BiX, {}) })) }) })) }))] })) })), _jsx("div", Object.assign({ className: "vuiImagePreview__imageContainer" }, { children: _jsx("img", { src: images[currentIndex].src, alt: images[currentIndex].alt, className: "vuiImagePreview__image", draggable: false }) }))] })) })) }) })) }))) }));
 };

package/lib/components/image/_index.scss

@@ -47,32 +47,43 @@
   left: 0;
   right: 0;
   bottom: 0;
-  pointer-events: none;
+  z-index: $screenBlockZIndex;
 }
 
-.vuiImagePreview__closeButton {
+.vuiImagePreview__mask {
+  height: 100%;
+  background-color: transparentize($colorFullShade, 0.4);
+}
+
+.vuiImagePreview__header {
   position: absolute;
-  top: $sizeM;
-  right: $sizeM;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: $sizeL * 2;
+  padding: $sizeS $sizeM;
+  background-color: $colorFullShade;
+}
+
+.vuiImagePreview__closeButton {
   pointer-events: all;
-  z-index: 1;
 }
 
 .vuiImagePreview__imageContainer {
   position: absolute;
-  top: 0;
+  top: $sizeL * 2;
   left: 0;
   right: 0;
-  bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: visible;
+  height: calc(100vh - #{$sizeL * 2});
 }
 
 .vuiImagePreview__image {
   max-width: calc(100vw - #{$sizeXl * 2});
-  max-height: calc(100vh - #{$sizeXl * 2});
+  max-height: calc(100vh - #{$sizeL * 4});
   width: auto;
   height: auto;
   object-fit: contain;

package/lib/styles/index.css

@@ -3002,32 +3002,43 @@ h2.react-datepicker__current-month {
   left: 0;
   right: 0;
   bottom: 0;
-  pointer-events: none;
+  z-index: 10;
 }
 
-.vuiImagePreview__closeButton {
+.vuiImagePreview__mask {
+  height: 100%;
+  background-color: rgba(11, 12, 14, 0.6);
+}
+
+.vuiImagePreview__header {
   position: absolute;
-  top: 16px;
-  right: 16px;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 48px;
+  padding: 12px 16px;
+  background-color: #0b0c0e;
+}
+
+.vuiImagePreview__closeButton {
   pointer-events: all;
-  z-index: 1;
 }
 
 .vuiImagePreview__imageContainer {
   position: absolute;
-  top: 0;
+  top: 48px;
   left: 0;
   right: 0;
-  bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: visible;
+  height: calc(100vh - 48px);
 }
 
 .vuiImagePreview__image {
   max-width: calc(100vw - 64px);
-  max-height: calc(100vh - 64px);
+  max-height: calc(100vh - 96px);
   width: auto;
   height: auto;
   object-fit: contain;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "9.16.1",
+  "version": "9.17.0",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",