@synerise/ds-image 2.0.0 → 2.0.1

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-image@2.0.0...@synerise/ds-image@2.0.1) (2026-09-01)
+
+### Bug Fixes
+
+- **image:** keep the preview tooltips above a raised overlay ([9440cba](https://github.com/Synerise/synerise-design/commit/9440cba7d71bc9cf2d003aa179d69d67804e4e9b))
+
 # [2.0.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-image@0.2.0...@synerise/ds-image@2.0.0) (2026-08-26)
 
 **Note:** Version bump only for package @synerise/ds-image

package/CLAUDE.md

@@ -124,7 +124,10 @@ tables.
   top-right (`CloseWrapper`). The download control is a `ToolbarButton` rendered
   as an anchor (`href`/`download`/`target="_blank"` forwarded to `<a>` by
   `ds-button`) so it downloads same-origin images and opens cross-origin ones in
-  a new tab; it shows whenever a valid image is loaded (independent of zoom).
+  a new tab; it shows whenever a valid image is loaded (independent of zoom) and
+  the image is downloadable — per-image `ImageSource.downloadable` → preview
+  `downloadable` (default `true`). Hiding it leaves the rest of the zoom group
+  intact, and the whole group drops out only when nothing in it renders.
 - **Error/Empty fallback** — broken `src` → `fallback` (per-image `ImageSource.fallback`
   → component `fallback` → default `ImageM` placeholder). No `src` on a Thumbnail →
   the Empty placeholder.

package/README.md

@@ -87,6 +87,7 @@ enclosing `Gallery` before the default listed above.
 | onDelete                                          | Called with the index of the thumbnail whose delete fired.    | (index: number) => void     | ---     |
 | openZoom                                          | Whether clicking a thumbnail opens the preview.               | boolean                     | `true`  |
 | zoomable / zoomStep / maxZoom / initialZoom       | Forwarded to the preview it owns.                             | see ImagePreview            | see ImagePreview |
+| downloadable                                      | Forwarded to the preview — render the download control.       | boolean                     | `true`  |
 | getContainer / zIndex                             | Forwarded to the preview it owns.                             | see ImagePreview            | see ImagePreview |
 | texts                                             | Override tooltips / accessible labels for thumbnails and the preview. | Partial<ImageTexts> | DS translations |
 | className                                         | Class applied to the gallery container.                       | string                      | ---     |
@@ -106,6 +107,7 @@ enclosing `Gallery` before the default listed above.
 | initialZoom    | Where zoom starts.                                                                                                             | 'fit' / 'real-size'         | `'fit'`          |
 | closable       | Whether to render the close button and allow Escape to close.                                                                  | boolean                     | `true`           |
 | maskClosable   | Whether clicking the dimmed backdrop closes the viewer.                                                                        | boolean                     | `true`           |
+| downloadable   | Whether to render the download control (per-image override via `ImageSource.downloadable`).                                     | boolean                     | `true`           |
 | zIndex         | z-index of the overlay. Omitted, it stacks one step above the enclosing modal / drawer. Set it to opt out of the DS stack.      | number                      | `zindex-modal`   |
 | fallback       | Rendered when an image fails to load (per-image override via `ImageSource.fallback`).                                          | React.ReactNode             | broken-image box |
 | getContainer   | Portal target.                                                                                                                 | () => HTMLElement           | `document.body`  |

package/dist/Gallery/Gallery.d.ts

@@ -1,3 +1,3 @@
 import { GalleryProps } from './Gallery.types';
-declare const Gallery: ({ images, aspectRatio, size, height, background, objectFit, loading, fallback, deletable, onDelete, openZoom, zoomable, zoomStep, maxZoom, initialZoom, getContainer, zIndex, texts, className, }: GalleryProps) => JSX.Element;
+declare const Gallery: ({ images, aspectRatio, size, height, background, objectFit, loading, fallback, deletable, onDelete, openZoom, zoomable, zoomStep, maxZoom, initialZoom, downloadable, getContainer, zIndex, texts, className, }: GalleryProps) => JSX.Element;
 export default Gallery;

package/dist/Gallery/Gallery.js

@@ -20,6 +20,7 @@ const Gallery = ({
   zoomStep,
   maxZoom,
   initialZoom,
+  downloadable,
   getContainer,
   zIndex,
   texts,
@@ -38,7 +39,7 @@ const Gallery = ({
   }), [aspectRatio, size, height, background, objectFit, loading, fallback, texts]);
   return /* @__PURE__ */ jsxs(ImageGalleryContext.Provider, { value: contextValue, children: [
     /* @__PURE__ */ jsx(Container, { className, "data-testid": "image-gallery", children: images.map((image, imageIndex) => /* @__PURE__ */ jsx(Thumbnail, { src: image.src, alt: image.alt, fallback: image.fallback, deletable, onDelete: onDelete ? () => onDelete(imageIndex) : void 0, openZoom, onClick: openZoom ? () => setPreviewIndex(imageIndex) : void 0 }, `${image.src}-${imageIndex}`)) }),
-    openZoom && /* @__PURE__ */ jsx(ImagePreview, { open: previewIndex !== null, images, index: previewIndex ?? 0, onIndexChange: setPreviewIndex, onClose: () => setPreviewIndex(null), zoomable, zoomStep, maxZoom, initialZoom, fallback, getContainer, zIndex, texts })
+    openZoom && /* @__PURE__ */ jsx(ImagePreview, { open: previewIndex !== null, images, index: previewIndex ?? 0, onIndexChange: setPreviewIndex, onClose: () => setPreviewIndex(null), zoomable, zoomStep, maxZoom, initialZoom, downloadable, fallback, getContainer, zIndex, texts })
   ] });
 };
 export {

package/dist/Gallery/Gallery.types.d.ts

@@ -31,6 +31,8 @@ export type GalleryProps = {
     maxZoom?: number;
     /** Preview pass-through — where zoom starts. */
     initialZoom?: InitialZoom;
+    /** Preview pass-through — render the download control. */
+    downloadable?: boolean;
     /** Preview pass-through — portal target. */
     getContainer?: () => HTMLElement;
     /** Preview pass-through — z-index of the preview overlay. */

package/dist/Preview/ImagePreview.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ImagePreviewProps } from './ImagePreview.types';
-declare const ImagePreview: ({ open, images, index, onIndexChange, onClose, zoomable, zoomStep, maxZoom, initialZoom, closable, maskClosable, fallback, getContainer, destroyOnClose, onZoom, texts: textsProp, zIndex, }: ImagePreviewProps) => React.ReactPortal | null;
+declare const ImagePreview: ({ open, images, index, onIndexChange, onClose, zoomable, zoomStep, maxZoom, initialZoom, closable, maskClosable, downloadable, fallback, getContainer, destroyOnClose, onZoom, texts: textsProp, zIndex, }: ImagePreviewProps) => React.ReactPortal | null;
 export default ImagePreview;

package/dist/Preview/ImagePreview.js

@@ -36,6 +36,7 @@ const ImagePreview = ({
   initialZoom = "fit",
   closable = true,
   maskClosable = true,
+  downloadable = true,
   fallback,
   getContainer,
   destroyOnClose = false,
@@ -178,10 +179,10 @@ const ImagePreview = ({
   };
   const zoomPercent = naturalScaleFactor > 0 ? Math.round(scale / naturalScaleFactor * 100) : 100;
   const hasError = status === "error" || !currentImage;
-  const showDownload = !hasError && Boolean(currentSrc);
+  const showDownload = (currentImage?.downloadable ?? downloadable) && !hasError && Boolean(currentSrc);
   const image = /* @__PURE__ */ jsx(Image, { ref: imgRef, src: currentSrc, alt: currentImage?.alt ?? "", onLoad: handleImageLoad, onError: handleError, onClick: stopPropagation, draggable: false, "data-testid": "image-preview-image" }, index);
   const content = hasError ? /* @__PURE__ */ jsx(Fallback, { onClick: stopPropagation, "data-testid": "image-preview-fallback", children: currentImage?.fallback ?? fallback ?? /* @__PURE__ */ jsx(FallbackBox, { children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ImageM, {}) }) }) }) : image;
-  return createPortal(/* @__PURE__ */ jsxs(Overlay, { ref: overlayRef, role: "dialog", "aria-modal": true, "aria-label": currentImage?.alt, tabIndex: -1, $hidden: !open, $zIndex: resolvedZIndex, onMouseDown: handleOverlayPointerDown, onClick: handleMaskClick, "data-testid": "image-preview", children: [
+  return createPortal(/* @__PURE__ */ jsxs(Overlay, { ref: overlayRef, role: "dialog", "aria-modal": true, "aria-label": currentImage?.alt, tabIndex: -1, $hidden: !open, $zIndex: resolvedZIndex, "data-popup-container": true, onMouseDown: handleOverlayPointerDown, onClick: handleMaskClick, "data-testid": "image-preview", children: [
     /* @__PURE__ */ jsx(ImageWrapper, { ref: workingAreaRef, children: zoomable && !hasError ? /* @__PURE__ */ jsx(TransformWrapper, { ref: transformRef, minScale: FIT_SCALE, maxScale, initialScale: FIT_SCALE, centerOnInit: true, doubleClick: {
       mode: "reset"
     }, wheel: {

package/dist/Preview/ImagePreview.types.d.ts

@@ -26,6 +26,11 @@ export type ImagePreviewProps = {
     closable?: boolean;
     /** Whether clicking the dimmed backdrop closes the viewer. Defaults to true. */
     maskClosable?: boolean;
+    /**
+     * Whether to render the download control. Defaults to true. Override it for a
+     * single image with `ImageSource.downloadable`.
+     */
+    downloadable?: boolean;
     /** Fallback rendered when an image fails to load (per-image override via `ImageSource.fallback`). */
     fallback?: ReactNode;
     /** Portal target. Defaults to `document.body`. */

package/dist/shared/Image.shared.types.d.ts

@@ -7,6 +7,11 @@ export type ImageSource = {
     alt: string;
     /** Per-image override for the broken-image fallback. */
     fallback?: ReactNode;
+    /**
+     * Per-image override for the preview's download control. Takes precedence
+     * over the preview-level `downloadable` prop.
+     */
+    downloadable?: boolean;
 };
 /**
  * Aspect ratio applied to a thumbnail. `source` keeps the image's intrinsic

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-image",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Image UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -55,5 +55,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "033854a18f038079e9a16b0ff250f8401a2287c2"
+  "gitHead": "a57eb7eaf98318b364468368d1aa4fd9fa6a6dc8"
 }