@optiaxiom/proteus 1.1.5 → 1.1.6

package/dist/esm/proteus-image/ProteusImage.js

@@ -1,13 +1,9 @@
 "use client";
-import { useProteusDocumentContext } from "../proteus-document/ProteusDocumentContext.js";
-import { Box, Button, Dialog, DialogBody, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTrigger, Spinner } from "@optiaxiom/react";
+import { Box, Spinner } from "@optiaxiom/react";
 import { useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/proteus-image/ProteusImage.tsx
-function ProteusImage(props) {
-	const { onEvent } = useProteusDocumentContext("@optiaxiom/proteus/ProteusImage");
-	const [open, setOpen] = useState(false);
-	const [isDownloading, setIsDownloading] = useState(false);
+function ProteusImage({ ...props }) {
 	const [isLoaded, setIsLoaded] = useState(false);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [!isLoaded && /* @__PURE__ */ jsx(Box, {
 		alignItems: "center",
@@ -16,87 +12,32 @@ function ProteusImage(props) {
 		justifyContent: "center",
 		p: "24",
 		rounded: "md",
-		style: { aspectRatio: "16 / 9" },
 		w: "full",
 		...props,
 		children: /* @__PURE__ */ jsx(Spinner, {})
-	}), /* @__PURE__ */ jsxs(Dialog, {
-		onOpenChange: setOpen,
-		open,
-		children: [/* @__PURE__ */ jsx(DialogTrigger, {
-			"aria-label": "Expand",
-			asChild: true,
-			children: /* @__PURE__ */ jsx(Box, {
-				asChild: true,
-				cursor: "pointer",
-				display: isLoaded ? "flex" : "none",
-				objectFit: "contain",
-				overflow: "hidden",
-				rounded: "inherit",
-				size: "full",
-				...props,
-				children: /* @__PURE__ */ jsx("img", {
-					alt: props.alt,
-					draggable: true,
-					onDragStart: (event) => {
-						event.stopPropagation();
-						event.dataTransfer.effectAllowed = "copy";
-						event.dataTransfer.setData("opal-chat-dnd-data", JSON.stringify({
-							link: props.src,
-							mime_type: "image/*",
-							name: props.src?.split("/").pop()
-						}));
-					},
-					onLoad: () => setIsLoaded(true),
-					src: props.src
-				})
-			})
-		}), /* @__PURE__ */ jsxs(DialogContent, {
-			size: "fullscreen",
-			children: [
-				/* @__PURE__ */ jsx(DialogHeader, {
-					lineClamp: "1",
-					children: props.alt
-				}),
-				/* @__PURE__ */ jsx(DialogBody, {
-					overflow: "hidden",
-					children: /* @__PURE__ */ jsx(Box, {
-						asChild: true,
-						display: "block",
-						maxH: "full",
-						maxW: "full",
-						objectFit: "contain",
-						children: /* @__PURE__ */ jsx("img", {
-							alt: props.alt,
-							src: props.src
-						})
-					})
-				}),
-				/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(DialogClose, { children: "Close" }), /* @__PURE__ */ jsx(Button, {
-					appearance: "primary",
-					asChild: true,
-					loading: isDownloading,
-					onClick: async (event) => {
-						event.preventDefault();
-						if (isDownloading) return;
-						setIsDownloading(true);
-						try {
-							await onEvent({
-								action: "download",
-								url: String(props.src)
-							});
-						} finally {
-							setIsDownloading(false);
-						}
-					},
-					children: /* @__PURE__ */ jsx("a", {
-						download: true,
-						href: props.src,
-						children: "Download"
-					})
-				})] })
-			]
-		})]
+	}), /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		display: isLoaded ? "flex" : "none",
+		objectFit: "contain",
+		overflow: "hidden",
+		rounded: "inherit",
+		size: "full",
+		...props,
+		children: /* @__PURE__ */ jsx("img", {
+			alt: props.alt,
+			draggable: true,
+			onDragStart: (event) => {
+				event.stopPropagation();
+				event.dataTransfer.effectAllowed = "copy";
+				event.dataTransfer.setData("opal-chat-dnd-data", JSON.stringify({
+					link: props.src,
+					mime_type: "image/*",
+					name: props.src?.split("/").pop()
+				}));
+			},
+			onLoad: () => setIsLoaded(true),
+			src: props.src
+		})
 	})] });
 }
 ProteusImage.displayName = "@optiaxiom/proteus/ProteusImage";

package/dist/esm/proteus-image-carousel/ProteusImageCarousel-css.js

@@ -26,6 +26,7 @@ var navButton = recipe({
 	} }
 });
 var slide = recipe({ base: [{
+	cursor: "pointer",
 	objectFit: "cover",
 	size: "full"
 }, "ProteusImageCarousel__1t6qej74"] });

package/dist/esm/proteus-image-carousel/ProteusImageCarousel.js

@@ -24,8 +24,9 @@ function ProteusImageCarousel({ images, title }) {
 	const [canScrollNext, setCanScrollNext] = useState(false);
 	const onSelect = useCallback(() => {
 		if (!emblaMainApi || !emblaThumbsApi) return;
-		setSelectedIndex(emblaMainApi.selectedScrollSnap());
-		emblaThumbsApi.scrollTo(emblaMainApi.selectedScrollSnap());
+		const index = emblaMainApi.selectedScrollSnap();
+		setSelectedIndex(index);
+		emblaThumbsApi.scrollTo(index);
 		setCanScrollPrev(emblaMainApi.canScrollPrev());
 		setCanScrollNext(emblaMainApi.canScrollNext());
 	}, [emblaMainApi, emblaThumbsApi]);
@@ -61,7 +62,11 @@ function ProteusImageCarousel({ images, title }) {
 						children: /* @__PURE__ */ jsx(Group, {
 							...slideContainer(),
 							children: images.map((image, index) => /* @__PURE__ */ jsx(ProteusImage, {
-								alt: image.alt,
+								alt: image.name ?? image.alt,
+								onClick: () => onEvent({
+									action: "preview",
+									file: toPreviewFile(image)
+								}),
 								src: image.src,
 								...slide()
 							}, index))
@@ -96,7 +101,7 @@ function ProteusImageCarousel({ images, title }) {
 							objectFit: "cover",
 							size: "full",
 							children: /* @__PURE__ */ jsx("img", {
-								alt: image.alt,
+								alt: image.name ?? image.alt,
 								src: image.thumb ?? image.src
 							})
 						})
@@ -122,13 +127,13 @@ function ProteusImageCarousel({ images, title }) {
 					options: [{
 						execute: () => onEvent({
 							action: "download",
-							url: images[selectedIndex].src
+							url: images[selectedIndex].file_link ?? images[selectedIndex].src
 						}),
 						label: "Download this image"
 					}, {
 						execute: () => onEvent({
 							action: "download",
-							url: images.map((image) => image.src)
+							url: images.map((image) => image.file_link ?? image.src)
 						}),
 						label: "Download all images"
 					}],
@@ -142,7 +147,7 @@ function ProteusImageCarousel({ images, title }) {
 					ml: "auto",
 					onClick: () => onEvent({
 						action: "download",
-						url: images[0].src
+						url: images[0].file_link ?? images[0].src
 					}),
 					children: "Download"
 				})]
@@ -150,6 +155,15 @@ function ProteusImageCarousel({ images, title }) {
 		]
 	});
 }
+function toPreviewFile({ alt, extension, file_link, full_name, mime_type, name, src }) {
+	return {
+		extension: extension ?? "JPG",
+		file_link: file_link ?? src,
+		full_name: full_name ?? alt ?? src,
+		mime_type: mime_type ?? "image/jpeg",
+		name: name ?? alt ?? src
+	};
+}
 ProteusImageCarousel.displayName = "@optiaxiom/proteus/ProteusImageCarousel";
 //#endregion
 export { ProteusImageCarousel };

package/dist/index.d.ts

@@ -153,9 +153,11 @@ declare namespace ProteusFileUpload {
 //#region src/proteus-image-carousel/ProteusImageCarousel.d.ts
 type ProteusImageCarouselProps = {
   /**
-   * Array of image data to display in the carousel.
+   * Array of image data to display in the carousel. The host is responsible for
+   * supplying the preview metadata on each item.
    */
-  images: Array<{
+  images: Array<ProteusPreviewFile & {
+    [key: string]: unknown;
     /**
      * Alternative text for the image.
      */
@@ -184,7 +186,9 @@ declare namespace ProteusImageCarousel {
 //#endregion
 //#region src/proteus-image/ProteusImage.d.ts
 type ProteusImageProps = BoxProps<"img">;
-declare function ProteusImage(props: ProteusImageProps): import("react/jsx-runtime").JSX.Element;
+declare function ProteusImage({
+  ...props
+}: ProteusImageProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ProteusImage {
   var displayName: string;
 }
@@ -436,7 +440,7 @@ type ProteusDocumentShellProps = Pick<ComponentPropsWithoutRef<typeof Disclosure
    * Callback when user triggers a preview action.
    * Receives the file object to preview.
    */
-  onPreview?: (file: unknown) => Promise<void> | void;
+  onPreview?: (file: ProteusPreviewFile) => Promise<void> | void;
   /**
    * Callback when an analytics event is fired
    */
@@ -507,7 +511,7 @@ type ProteusEventHandler = {
   }) | string;
 } | {
   action: "preview";
-  file: unknown;
+  file: ProteusPreviewFile;
 } | {
   action: "pushValue";
   path: string;
@@ -521,6 +525,13 @@ type ProteusEventHandler = {
 } | {
   message: string | StructuredMessage;
 };
+type ProteusPreviewFile = {
+  extension: string;
+  file_link: string;
+  full_name: string;
+  mime_type: string;
+  name: string;
+};
 type StructuredMessage<F extends FileUploadMetadata = FileUploadMetadata> = {
   files?: F[];
   parts: Array<{
@@ -621,4 +632,4 @@ declare namespace ProteusTextarea {
 //#region src/use-proteus-value/useProteusValue.d.ts
 declare function useProteusValue(element: ProteusValueProps): any;
 //#endregion
-export { type FileUploadMetadata, ProteusAction, ProteusBridge, ProteusChart, ProteusDataTable, ProteusDateInput, ProteusDocumentRenderer, ProteusDocumentRendererProps, ProteusDocumentShell, ProteusDocumentShellProps, ProteusFederated, ProteusFileUpload, ProteusFileUploadProps, ProteusImage, ProteusImageCarousel, ProteusInput, ProteusLength, ProteusMap, ProteusMapIndex, ProteusPillMenu, ProteusPillMenuProps, ProteusRichTextEditor, ProteusSelect, ProteusShow, ProteusTextarea, type StructuredMessage, type UploadFile, safeParseDocument, useProteusValue };
+export { type FileUploadMetadata, ProteusAction, ProteusBridge, ProteusChart, ProteusDataTable, ProteusDateInput, ProteusDocumentRenderer, ProteusDocumentRendererProps, ProteusDocumentShell, ProteusDocumentShellProps, ProteusFederated, ProteusFileUpload, ProteusFileUploadProps, ProteusImage, ProteusImageCarousel, ProteusInput, ProteusLength, ProteusMap, ProteusMapIndex, ProteusPillMenu, ProteusPillMenuProps, type ProteusPreviewFile, ProteusRichTextEditor, ProteusSelect, ProteusShow, ProteusTextarea, type StructuredMessage, type UploadFile, safeParseDocument, useProteusValue };

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/optimizely-axiom/optiaxiom.git"
   },
   "type": "module",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "files": [
     "dist/**",
     "LICENSE"
@@ -39,8 +39,8 @@
     "embla-carousel-react": "^8.6.0",
     "jsonpointer": "^5.0.1",
     "recharts": "^3.8.1",
-    "@optiaxiom/icons": "^1.1.3",
-    "@optiaxiom/react": "^1.9.40"
+    "@optiaxiom/react": "^1.9.40",
+    "@optiaxiom/icons": "^1.1.3"
   },
   "devDependencies": {
     "@emotion/hash": "^0.9.2",