@chayns-components/gallery 5.2.4 → 5.2.6

package/lib/cjs/components/media-content/MediaContent.styles.js

@@ -3,11 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledMediaContentVideoWrapper = exports.StyledMediaContentVideo = exports.StyledMediaContentPlayIcon = exports.StyledMediaContentImageWrapper = exports.StyledMediaContentImage = void 0;
+exports.StyledMediaContentVideoWrapper = exports.StyledMediaContentVideo = exports.StyledMediaContentPreviewImage = exports.StyledMediaContentPlayIcon = exports.StyledMediaContentImageWrapper = exports.StyledMediaContentImage = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _MediaContent = require("./MediaContent.constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledMediaContentVideoWrapper = exports.StyledMediaContentVideoWrapper = _styledComponents.default.div`
     display: flex;
+    position: relative;
+    overflow: hidden;
     width: 100%;
     height: 100%;
     aspect-ratio: ${({
@@ -16,13 +19,38 @@ const StyledMediaContentVideoWrapper = exports.StyledMediaContentVideoWrapper =
 `;
 const StyledMediaContentImageWrapper = exports.StyledMediaContentImageWrapper = _styledComponents.default.div`
     display: flex;
+    position: relative;
+    overflow: hidden;
     width: 100%;
     height: 100%;
     aspect-ratio: ${({
   $ratio
 }) => $ratio};
 `;
-const StyledMediaContentImage = exports.StyledMediaContentImage = _styledComponents.default.img`
+const StyledMediaContentLayer = _styledComponents.default.img`
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    pointer-events: none;
+`;
+const StyledMediaContentPreviewImage = exports.StyledMediaContentPreviewImage = (0, _styledComponents.default)(StyledMediaContentLayer)`
+    background-color: ${({
+  theme
+}) => theme['101']};
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.08) inset;
+    z-index: 2;
+    filter: ${_MediaContent.MEDIA_CONTENT_PREVIEW_BLUR};
+    transition:
+        opacity ${_MediaContent.MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease,
+        filter ${_MediaContent.MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DURATION_MS}ms ease
+            ${_MediaContent.MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DELAY_MS}ms;
+`;
+const StyledMediaContentImage = exports.StyledMediaContentImage = (0, _styledComponents.default)(StyledMediaContentLayer)`
     background-color: ${({
   theme
 }) => theme['101']};
@@ -31,9 +59,7 @@ const StyledMediaContentImage = exports.StyledMediaContentImage = _styledCompone
   theme
 }) => theme['009-rgb']}, 0.08) inset;
     z-index: 1;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+    transition: opacity ${_MediaContent.MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease;
 `;
 const StyledMediaContentVideo = exports.StyledMediaContentVideo = _styledComponents.default.video`
     background-color: ${({
@@ -43,12 +69,17 @@ const StyledMediaContentVideo = exports.StyledMediaContentVideo = _styledCompone
         rgba(${({
   theme
 }) => theme['009-rgb']}, 0.08) inset;
+    position: absolute;
+    inset: 0;
     width: 100%;
+    height: 100%;
     object-fit: cover;
+    pointer-events: none;
+    z-index: 1;
 `;
 const StyledMediaContentPlayIcon = exports.StyledMediaContentPlayIcon = _styledComponents.default.div`
     position: absolute;
-    z-index: 2;
+    z-index: 3;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);

package/lib/cjs/components/media-content/MediaContent.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledMediaContentVideoWrapper","exports","styled","div","$ratio","StyledMediaContentImageWrapper","StyledMediaContentImage","img","theme","StyledMediaContentVideo","video","StyledMediaContentPlayIcon"],"sources":["../../../../src/components/media-content/MediaContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledMediaContentVideoWrapper = styled.div<{ $ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\nexport const StyledMediaContentImageWrapper = styled.div<{ $ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledMediaContentVideoProps = WithTheme<unknown>;\n\ntype StyledMediaContentImageProps = WithTheme<unknown>;\n\nexport const StyledMediaContentImage = styled.img<StyledMediaContentImageProps>`\n    background-color: ${({ theme }: StyledMediaContentImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMediaContentImageProps) => theme['009-rgb']}, 0.08) inset;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledMediaContentVideo = styled.video<StyledMediaContentVideoProps>`\n    background-color: ${({ theme }: StyledMediaContentVideoProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMediaContentVideoProps) => theme['009-rgb']}, 0.08) inset;\n    width: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledMediaContentPlayIcon = styled.div`\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,8BAA8B,GAAAC,OAAA,CAAAD,8BAAA,GAAGE,yBAAM,CAACC,GAAuB;AAC5E;AACA;AACA;AACA,oBAAoB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAEM,MAAMC,8BAA8B,GAAAJ,OAAA,CAAAI,8BAAA,GAAGH,yBAAM,CAACC,GAAuB;AAC5E;AACA;AACA;AACA,oBAAoB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAMM,MAAME,uBAAuB,GAAAL,OAAA,CAAAK,uBAAA,GAAGJ,yBAAM,CAACK,GAAiC;AAC/E,wBAAwB,CAAC;EAAEC;AAAoC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACjF;AACA,eAAe,CAAC;EAAEA;AAAoC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC5E;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,uBAAuB,GAAAR,OAAA,CAAAQ,uBAAA,GAAGP,yBAAM,CAACQ,KAAmC;AACjF,wBAAwB,CAAC;EAAEF;AAAoC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACjF;AACA,eAAe,CAAC;EAAEA;AAAoC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC5E;AACA;AACA,CAAC;AAEM,MAAMG,0BAA0B,GAAAV,OAAA,CAAAU,0BAAA,GAAGT,yBAAM,CAACC,GAAG;AACpD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"MediaContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","_MediaContent","e","__esModule","default","StyledMediaContentVideoWrapper","exports","styled","div","$ratio","StyledMediaContentImageWrapper","StyledMediaContentLayer","img","StyledMediaContentPreviewImage","theme","MEDIA_CONTENT_PREVIEW_BLUR","MEDIA_CONTENT_IMAGE_FADE_DURATION_MS","MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DURATION_MS","MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DELAY_MS","StyledMediaContentImage","StyledMediaContentVideo","video","StyledMediaContentPlayIcon"],"sources":["../../../../src/components/media-content/MediaContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport {\n    MEDIA_CONTENT_IMAGE_FADE_DURATION_MS,\n    MEDIA_CONTENT_PREVIEW_BLUR,\n    MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DELAY_MS,\n    MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DURATION_MS,\n} from './MediaContent.constants';\n\nexport const StyledMediaContentVideoWrapper = styled.div<{ $ratio: number }>`\n    display: flex;\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\nexport const StyledMediaContentImageWrapper = styled.div<{ $ratio: number }>`\n    display: flex;\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledMediaContentVideoProps = WithTheme<unknown>;\n\ntype StyledMediaContentImageProps = WithTheme<unknown>;\n\nconst StyledMediaContentLayer = styled.img<StyledMediaContentImageProps>`\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    pointer-events: none;\n`;\n\nexport const StyledMediaContentPreviewImage = styled(StyledMediaContentLayer)`\n    background-color: ${({ theme }: StyledMediaContentImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMediaContentImageProps) => theme['009-rgb']}, 0.08) inset;\n    z-index: 2;\n    filter: ${MEDIA_CONTENT_PREVIEW_BLUR};\n    transition:\n        opacity ${MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease,\n        filter ${MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DURATION_MS}ms ease\n            ${MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DELAY_MS}ms;\n`;\n\nexport const StyledMediaContentImage = styled(StyledMediaContentLayer)`\n    background-color: ${({ theme }: StyledMediaContentImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMediaContentImageProps) => theme['009-rgb']}, 0.08) inset;\n    z-index: 1;\n    transition: opacity ${MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease;\n`;\n\nexport const StyledMediaContentVideo = styled.video<StyledMediaContentVideoProps>`\n    background-color: ${({ theme }: StyledMediaContentVideoProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMediaContentVideoProps) => theme['009-rgb']}, 0.08) inset;\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    pointer-events: none;\n    z-index: 1;\n`;\n\nexport const StyledMediaContentPlayIcon = styled.div`\n    position: absolute;\n    z-index: 3;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAKkC,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE3B,MAAMG,8BAA8B,GAAAC,OAAA,CAAAD,8BAAA,GAAGE,yBAAM,CAACC,GAAuB;AAC5E;AACA;AACA;AACA;AACA;AACA,oBAAoB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAEM,MAAMC,8BAA8B,GAAAJ,OAAA,CAAAI,8BAAA,GAAGH,yBAAM,CAACC,GAAuB;AAC5E;AACA;AACA;AACA;AACA;AACA,oBAAoB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAMD,MAAME,uBAAuB,GAAGJ,yBAAM,CAACK,GAAiC;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,8BAA8B,GAAAP,OAAA,CAAAO,8BAAA,GAAG,IAAAN,yBAAM,EAACI,uBAAuB,CAAC;AAC7E,wBAAwB,CAAC;EAAEG;AAAoC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACjF;AACA,eAAe,CAAC;EAAEA;AAAoC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC5E;AACA,cAAcC,wCAA0B;AACxC;AACA,kBAAkBC,kDAAoC;AACtD,iBAAiBC,2DAA6C;AAC9D,cAAcC,wDAA0C;AACxD,CAAC;AAEM,MAAMC,uBAAuB,GAAAb,OAAA,CAAAa,uBAAA,GAAG,IAAAZ,yBAAM,EAACI,uBAAuB,CAAC;AACtE,wBAAwB,CAAC;EAAEG;AAAoC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACjF;AACA,eAAe,CAAC;EAAEA;AAAoC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC5E;AACA,0BAA0BE,kDAAoC;AAC9D,CAAC;AAEM,MAAMI,uBAAuB,GAAAd,OAAA,CAAAc,uBAAA,GAAGb,yBAAM,CAACc,KAAmC;AACjF,wBAAwB,CAAC;EAAEP;AAAoC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACjF;AACA,eAAe,CAAC;EAAEA;AAAoC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMQ,0BAA0B,GAAAhB,OAAA,CAAAgB,0BAAA,GAAGf,yBAAM,CAACC,GAAG;AACpD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/media-content/MediaContent.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaContent.types.js","names":[],"sources":["../../../../src/components/media-content/MediaContent.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\n\n/**\n * Props for the low-level uploaded media renderer shared by viewer and editor.\n */\nexport interface MediaContentProps {\n    /**\n     * Provides the uploaded media item that should be rendered.\n     * @description\n     * This low-level renderer accepts already known image or video data and does not handle upload-specific state.\n     * @example\n     * <MediaContent file={file.file} onClick={handleOpen} ratio={1} />\n     */\n    file: FileItem['file'];\n    /**\n     * Defines the aspect ratio that should be reserved for the media.\n     * @description\n     * The surrounding tile uses this value to reserve a deterministic media height before the asset finishes loading.\n     * @example\n     * <MediaContent file={file.file} onClick={handleOpen} ratio={1.5} />\n     */\n    ratio: number;\n    /**\n     * Is called when the media tile is selected.\n     * @description\n     * Use this callback to react to clicks on the rendered image or video tile.\n     * @example\n     * <MediaContent file={file.file} onClick={() => console.log('open')} ratio={1} />\n     */\n    onClick: () => void;\n    /**\n     * Defines the size of the video play icon.\n     * @description\n     * This prop only affects rendered videos. Image tiles ignore it.\n     * @default 50\n     * @example\n     * <MediaContent file={file.file} onClick={handleOpen} playIconSize={30} ratio={1} />\n     * @optional\n     */\n    playIconSize?: number;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"MediaContent.types.js","names":[],"sources":["../../../../src/components/media-content/MediaContent.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\n\n/**\n * Props for the low-level uploaded media renderer shared by viewer and editor.\n */\nexport interface MediaContentProps {\n    /**\n     * Provides the uploaded media item that should be rendered.\n     * @description\n     * This low-level renderer accepts already known image or video data and does not handle upload-specific state.\n     * @example\n     * <MediaContent file={file.file} onClick={handleOpen} ratio={1} />\n     */\n    file: FileItem['file'];\n    /**\n     * Provides an optional preview source that can be displayed while the final media is still loading.\n     * @description\n     * This preview can be a base64 data URL or any low-resolution fallback image.\n     * When provided, the component shows the preview first and swaps to the final image once it has finished loading.\n     * @optional\n     */\n    previewUrl?: string;\n    /**\n     * Defines the aspect ratio that should be reserved for the media.\n     * @description\n     * The surrounding tile uses this value to reserve a deterministic media height before the asset finishes loading.\n     * @example\n     * <MediaContent file={file.file} onClick={handleOpen} ratio={1.5} />\n     */\n    ratio: number;\n    /**\n     * Controls whether the final media source may be loaded immediately.\n     * @description\n     * When set to `false`, only the preview source is rendered until this flag becomes `true`.\n     * @default true\n     * @optional\n     */\n    shouldLoadImages?: boolean;\n    /**\n     * Is called when the media tile is selected.\n     * @description\n     * Use this callback to react to clicks on the rendered image or video tile.\n     * @example\n     * <MediaContent file={file.file} onClick={() => console.log('open')} ratio={1} />\n     */\n    onClick: () => void;\n    /**\n     * Defines the size of the video play icon.\n     * @description\n     * This prop only affects rendered videos. Image tiles ignore it.\n     * @default 50\n     * @example\n     * <MediaContent file={file.file} onClick={handleOpen} playIconSize={30} ratio={1} />\n     * @optional\n     */\n    playIconSize?: number;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/cjs/components/media-content/MediaContent.utils.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isVideoFile = exports.getMediaSourceUrl = exports.getMediaPreviewUrl = void 0;
+const isVideoFile = file => 'thumbnailUrl' in file;
+exports.isVideoFile = isVideoFile;
+const getMediaSourceUrl = file => file.url.replace('_0.mp4', '.mp4');
+exports.getMediaSourceUrl = getMediaSourceUrl;
+const getMediaPreviewUrl = (file, previewUrl) => {
+  var _file$meta;
+  if (previewUrl) {
+    return previewUrl;
+  }
+  if (isVideoFile(file)) {
+    return file.thumbnailUrl;
+  }
+  return (_file$meta = file.meta) === null || _file$meta === void 0 ? void 0 : _file$meta.preview;
+};
+exports.getMediaPreviewUrl = getMediaPreviewUrl;
+//# sourceMappingURL=MediaContent.utils.js.map

package/lib/cjs/components/media-content/MediaContent.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaContent.utils.js","names":["isVideoFile","file","exports","getMediaSourceUrl","url","replace","getMediaPreviewUrl","previewUrl","_file$meta","thumbnailUrl","meta","preview"],"sources":["../../../../src/components/media-content/MediaContent.utils.ts"],"sourcesContent":["import type { FileItem, Video } from '@chayns-components/core';\n\nexport type GalleryMediaFile = FileItem['file'];\n\nexport const isVideoFile = (file: GalleryMediaFile): file is Video => 'thumbnailUrl' in file;\n\nexport const getMediaSourceUrl = (file: GalleryMediaFile): string =>\n    file.url.replace('_0.mp4', '.mp4');\n\nexport const getMediaPreviewUrl = (\n    file: GalleryMediaFile,\n    previewUrl?: string,\n): string | undefined => {\n    if (previewUrl) {\n        return previewUrl;\n    }\n\n    if (isVideoFile(file)) {\n        return file.thumbnailUrl;\n    }\n\n    return file.meta?.preview;\n};\n"],"mappings":";;;;;;AAIO,MAAMA,WAAW,GAAIC,IAAsB,IAAoB,cAAc,IAAIA,IAAI;AAACC,OAAA,CAAAF,WAAA,GAAAA,WAAA;AAEtF,MAAMG,iBAAiB,GAAIF,IAAsB,IACpDA,IAAI,CAACG,GAAG,CAACC,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC;AAACH,OAAA,CAAAC,iBAAA,GAAAA,iBAAA;AAEhC,MAAMG,kBAAkB,GAAGA,CAC9BL,IAAsB,EACtBM,UAAmB,KACE;EAAA,IAAAC,UAAA;EACrB,IAAID,UAAU,EAAE;IACZ,OAAOA,UAAU;EACrB;EAEA,IAAIP,WAAW,CAACC,IAAI,CAAC,EAAE;IACnB,OAAOA,IAAI,CAACQ,YAAY;EAC5B;EAEA,QAAAD,UAAA,GAAOP,IAAI,CAACS,IAAI,cAAAF,UAAA,uBAATA,UAAA,CAAWG,OAAO;AAC7B,CAAC;AAACT,OAAA,CAAAI,kBAAA,GAAAA,kBAAA","ignoreList":[]}

package/lib/cjs/utils/gallery.js

@@ -63,7 +63,7 @@ const openFiles = (fileItems, file) => {
     const items = fileItems.map(item => {
       var _item$uploadedFile;
       return {
-        url: ((_item$uploadedFile = item.uploadedFile) === null || _item$uploadedFile === void 0 ? void 0 : _item$uploadedFile.url.replace('_0.mp4', '.mp4')) ?? '',
+        url: ((_item$uploadedFile = item.uploadedFile) === null || _item$uploadedFile === void 0 ? void 0 : _item$uploadedFile.url) ?? '',
         mediaType: item.uploadedFile && 'thumbnailUrl' in item.uploadedFile ? _chaynsApi.MediaType.VIDEO : _chaynsApi.MediaType.IMAGE
       };
     });
@@ -112,7 +112,7 @@ const openKnownFiles = (fileItems, file) => {
   try {
     startIndex = fileItems.findIndex((item, index) => getGalleryViewerKey(item, index) === activeFileKey);
     const items = fileItems.map(item => ({
-      url: item.file.url.replace('_0.mp4', '.mp4'),
+      url: item.file.url,
       mediaType: 'thumbnailUrl' in item.file ? _chaynsApi.MediaType.VIDEO : _chaynsApi.MediaType.IMAGE
     }));
 

package/lib/cjs/utils/gallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"gallery.js","names":["_chaynsApi","require","_gallery","DEFAULT_MEDIA_RATIO","mapFilesToInternalItems","files","map","file","index","id","getGalleryViewerKey","uploadedFile","undefined","state","previewUrl","exports","fileItem","url","getGalleryRatio","fileItems","_fileItems$","length","Math","max","ratio","getReadOnlyItemRatio","viewMode","itemCount","GalleryViewMode","GRID","_fileItems$2","openFiles","startIndex","findIndex","item","items","_item$uploadedFile","replace","mediaType","MediaType","VIDEO","IMAGE","openMedia","_","openVideo","imageFiles","forEach","push","_file$uploadedFile","startFile","shift","openImage","openKnownFiles","activeFileKey","indexOf"],"sources":["../../../src/utils/gallery.ts"],"sourcesContent":["import type { FileItem, InternalFileItem } from '@chayns-components/core';\nimport {\n    MediaType,\n    openImage,\n    openMedia,\n    type OpenImageItem,\n    type OpenMediaItem,\n    openVideo,\n} from 'chayns-api';\nimport { GalleryViewMode } from '../types/gallery';\n\nconst DEFAULT_MEDIA_RATIO = 1;\n\nexport const mapFilesToInternalItems = (files?: FileItem[]): InternalFileItem[] =>\n    (files ?? []).map((file, index) => ({\n        id: getGalleryViewerKey(file, index),\n        uploadedFile: file.file,\n        file: undefined,\n        state: 'uploaded',\n        previewUrl: undefined,\n    }));\n\nexport const getGalleryViewerKey = (fileItem: FileItem, index: number): string =>\n    fileItem.id ?? fileItem.file.id ?? fileItem.file.url ?? `gallery-item-${index}`;\n\nexport const getGalleryRatio = (fileItems: FileItem[]): number => {\n    switch (fileItems.length) {\n        case 0:\n            return DEFAULT_MEDIA_RATIO;\n        case 1:\n            return Math.max(fileItems[0]?.file.ratio ?? DEFAULT_MEDIA_RATIO, 1);\n        case 2:\n            return 2;\n        case 3:\n            return 3;\n        default:\n            return DEFAULT_MEDIA_RATIO;\n    }\n};\n\nexport const getReadOnlyItemRatio = ({\n    fileItems,\n    index,\n    viewMode,\n}: {\n    fileItems: FileItem[];\n    index: number;\n    viewMode: GalleryViewMode;\n}): number => {\n    const itemCount = fileItems.length;\n\n    if (viewMode !== GalleryViewMode.GRID) {\n        return DEFAULT_MEDIA_RATIO;\n    }\n\n    if (itemCount === 1) {\n        // A square fallback keeps virtualization stable when upstream data does not provide a ratio.\n        return Math.max(fileItems[0]?.file.ratio ?? DEFAULT_MEDIA_RATIO, DEFAULT_MEDIA_RATIO);\n    }\n\n    if (itemCount === 2 && (index === 0 || index === 1)) {\n        return 0.5;\n    }\n\n    if ((index === 0 && itemCount > 2) || (itemCount === 3 && (index === 1 || index === 2))) {\n        return 1.5;\n    }\n\n    return DEFAULT_MEDIA_RATIO;\n};\n\nexport const openFiles = (fileItems: InternalFileItem[], file: InternalFileItem) => {\n    let startIndex = 0;\n\n    try {\n        startIndex = fileItems.findIndex((item) => item.id === file.id);\n\n        const items: OpenMediaItem[] = fileItems.map((item) => ({\n            url: item.uploadedFile?.url.replace('_0.mp4', '.mp4') ?? '',\n            mediaType:\n                item.uploadedFile && 'thumbnailUrl' in item.uploadedFile\n                    ? MediaType.VIDEO\n                    : MediaType.IMAGE,\n        }));\n\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        void openMedia({ items, startIndex });\n    } catch (_) {\n        if (file.uploadedFile && 'thumbnailUrl' in file.uploadedFile) {\n            void openVideo({ url: file.uploadedFile.url });\n\n            return;\n        }\n\n        const imageFiles: OpenImageItem[] = [];\n\n        fileItems.forEach(({ uploadedFile }) => {\n            if (uploadedFile && !('thumbnailUrl' in uploadedFile)) {\n                imageFiles.push({ url: uploadedFile.url });\n            }\n        });\n\n        startIndex = imageFiles.findIndex((item) => item.url === file.uploadedFile?.url);\n\n        const startFile = imageFiles.shift();\n\n        if (!startFile) {\n            return;\n        }\n\n        void openImage({ items: [startFile, ...imageFiles], startIndex });\n    }\n};\n\nexport const openKnownFiles = (fileItems: FileItem[], file: FileItem) => {\n    const activeFileKey = getGalleryViewerKey(file, fileItems.indexOf(file));\n    let startIndex = 0;\n\n    try {\n        startIndex = fileItems.findIndex(\n            (item, index) => getGalleryViewerKey(item, index) === activeFileKey,\n        );\n\n        const items: OpenMediaItem[] = fileItems.map((item) => ({\n            url: item.file.url.replace('_0.mp4', '.mp4'),\n            mediaType: 'thumbnailUrl' in item.file ? MediaType.VIDEO : MediaType.IMAGE,\n        }));\n\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        void openMedia({ items, startIndex });\n    } catch (_) {\n        if ('thumbnailUrl' in file.file) {\n            void openVideo({ url: file.file.url });\n\n            return;\n        }\n\n        const imageFiles: OpenImageItem[] = [];\n\n        fileItems.forEach((item) => {\n            if (!('thumbnailUrl' in item.file)) {\n                imageFiles.push({ url: item.file.url });\n            }\n        });\n\n        startIndex = imageFiles.findIndex((item) => item.url === file.file.url);\n\n        const startFile = imageFiles.shift();\n\n        if (!startFile) {\n            return;\n        }\n\n        void openImage({ items: [startFile, ...imageFiles], startIndex });\n    }\n};\n"],"mappings":";;;;;;AACA,IAAAA,UAAA,GAAAC,OAAA;AAQA,IAAAC,QAAA,GAAAD,OAAA;AAEA,MAAME,mBAAmB,GAAG,CAAC;AAEtB,MAAMC,uBAAuB,GAAIC,KAAkB,IACtD,CAACA,KAAK,IAAI,EAAE,EAAEC,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,MAAM;EAChCC,EAAE,EAAEC,mBAAmB,CAACH,IAAI,EAAEC,KAAK,CAAC;EACpCG,YAAY,EAAEJ,IAAI,CAACA,IAAI;EACvBA,IAAI,EAAEK,SAAS;EACfC,KAAK,EAAE,UAAU;EACjBC,UAAU,EAAEF;AAChB,CAAC,CAAC,CAAC;AAACG,OAAA,CAAAX,uBAAA,GAAAA,uBAAA;AAED,MAAMM,mBAAmB,GAAGA,CAACM,QAAkB,EAAER,KAAa,KACjEQ,QAAQ,CAACP,EAAE,IAAIO,QAAQ,CAACT,IAAI,CAACE,EAAE,IAAIO,QAAQ,CAACT,IAAI,CAACU,GAAG,IAAI,gBAAgBT,KAAK,EAAE;AAACO,OAAA,CAAAL,mBAAA,GAAAA,mBAAA;AAE7E,MAAMQ,eAAe,GAAIC,SAAqB,IAAa;EAAA,IAAAC,WAAA;EAC9D,QAAQD,SAAS,CAACE,MAAM;IACpB,KAAK,CAAC;MACF,OAAOlB,mBAAmB;IAC9B,KAAK,CAAC;MACF,OAAOmB,IAAI,CAACC,GAAG,CAAC,EAAAH,WAAA,GAAAD,SAAS,CAAC,CAAC,CAAC,cAAAC,WAAA,uBAAZA,WAAA,CAAcb,IAAI,CAACiB,KAAK,KAAIrB,mBAAmB,EAAE,CAAC,CAAC;IACvE,KAAK,CAAC;MACF,OAAO,CAAC;IACZ,KAAK,CAAC;MACF,OAAO,CAAC;IACZ;MACI,OAAOA,mBAAmB;EAClC;AACJ,CAAC;AAACY,OAAA,CAAAG,eAAA,GAAAA,eAAA;AAEK,MAAMO,oBAAoB,GAAGA,CAAC;EACjCN,SAAS;EACTX,KAAK;EACLkB;AAKJ,CAAC,KAAa;EACV,MAAMC,SAAS,GAAGR,SAAS,CAACE,MAAM;EAElC,IAAIK,QAAQ,KAAKE,wBAAe,CAACC,IAAI,EAAE;IACnC,OAAO1B,mBAAmB;EAC9B;EAEA,IAAIwB,SAAS,KAAK,CAAC,EAAE;IAAA,IAAAG,YAAA;IACjB;IACA,OAAOR,IAAI,CAACC,GAAG,CAAC,EAAAO,YAAA,GAAAX,SAAS,CAAC,CAAC,CAAC,cAAAW,YAAA,uBAAZA,YAAA,CAAcvB,IAAI,CAACiB,KAAK,KAAIrB,mBAAmB,EAAEA,mBAAmB,CAAC;EACzF;EAEA,IAAIwB,SAAS,KAAK,CAAC,KAAKnB,KAAK,KAAK,CAAC,IAAIA,KAAK,KAAK,CAAC,CAAC,EAAE;IACjD,OAAO,GAAG;EACd;EAEA,IAAKA,KAAK,KAAK,CAAC,IAAImB,SAAS,GAAG,CAAC,IAAMA,SAAS,KAAK,CAAC,KAAKnB,KAAK,KAAK,CAAC,IAAIA,KAAK,KAAK,CAAC,CAAE,EAAE;IACrF,OAAO,GAAG;EACd;EAEA,OAAOL,mBAAmB;AAC9B,CAAC;AAACY,OAAA,CAAAU,oBAAA,GAAAA,oBAAA;AAEK,MAAMM,SAAS,GAAGA,CAACZ,SAA6B,EAAEZ,IAAsB,KAAK;EAChF,IAAIyB,UAAU,GAAG,CAAC;EAElB,IAAI;IACAA,UAAU,GAAGb,SAAS,CAACc,SAAS,CAAEC,IAAI,IAAKA,IAAI,CAACzB,EAAE,KAAKF,IAAI,CAACE,EAAE,CAAC;IAE/D,MAAM0B,KAAsB,GAAGhB,SAAS,CAACb,GAAG,CAAE4B,IAAI;MAAA,IAAAE,kBAAA;MAAA,OAAM;QACpDnB,GAAG,EAAE,EAAAmB,kBAAA,GAAAF,IAAI,CAACvB,YAAY,cAAAyB,kBAAA,uBAAjBA,kBAAA,CAAmBnB,GAAG,CAACoB,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC,KAAI,EAAE;QAC3DC,SAAS,EACLJ,IAAI,CAACvB,YAAY,IAAI,cAAc,IAAIuB,IAAI,CAACvB,YAAY,GAClD4B,oBAAS,CAACC,KAAK,GACfD,oBAAS,CAACE;MACxB,CAAC;IAAA,CAAC,CAAC;;IAEH;IACA;IACA,KAAK,IAAAC,oBAAS,EAAC;MAAEP,KAAK;MAAEH;IAAW,CAAC,CAAC;EACzC,CAAC,CAAC,OAAOW,CAAC,EAAE;IACR,IAAIpC,IAAI,CAACI,YAAY,IAAI,cAAc,IAAIJ,IAAI,CAACI,YAAY,EAAE;MAC1D,KAAK,IAAAiC,oBAAS,EAAC;QAAE3B,GAAG,EAAEV,IAAI,CAACI,YAAY,CAACM;MAAI,CAAC,CAAC;MAE9C;IACJ;IAEA,MAAM4B,UAA2B,GAAG,EAAE;IAEtC1B,SAAS,CAAC2B,OAAO,CAAC,CAAC;MAAEnC;IAAa,CAAC,KAAK;MACpC,IAAIA,YAAY,IAAI,EAAE,cAAc,IAAIA,YAAY,CAAC,EAAE;QACnDkC,UAAU,CAACE,IAAI,CAAC;UAAE9B,GAAG,EAAEN,YAAY,CAACM;QAAI,CAAC,CAAC;MAC9C;IACJ,CAAC,CAAC;IAEFe,UAAU,GAAGa,UAAU,CAACZ,SAAS,CAAEC,IAAI;MAAA,IAAAc,kBAAA;MAAA,OAAKd,IAAI,CAACjB,GAAG,OAAA+B,kBAAA,GAAKzC,IAAI,CAACI,YAAY,cAAAqC,kBAAA,uBAAjBA,kBAAA,CAAmB/B,GAAG;IAAA,EAAC;IAEhF,MAAMgC,SAAS,GAAGJ,UAAU,CAACK,KAAK,CAAC,CAAC;IAEpC,IAAI,CAACD,SAAS,EAAE;MACZ;IACJ;IAEA,KAAK,IAAAE,oBAAS,EAAC;MAAEhB,KAAK,EAAE,CAACc,SAAS,EAAE,GAAGJ,UAAU,CAAC;MAAEb;IAAW,CAAC,CAAC;EACrE;AACJ,CAAC;AAACjB,OAAA,CAAAgB,SAAA,GAAAA,SAAA;AAEK,MAAMqB,cAAc,GAAGA,CAACjC,SAAqB,EAAEZ,IAAc,KAAK;EACrE,MAAM8C,aAAa,GAAG3C,mBAAmB,CAACH,IAAI,EAAEY,SAAS,CAACmC,OAAO,CAAC/C,IAAI,CAAC,CAAC;EACxE,IAAIyB,UAAU,GAAG,CAAC;EAElB,IAAI;IACAA,UAAU,GAAGb,SAAS,CAACc,SAAS,CAC5B,CAACC,IAAI,EAAE1B,KAAK,KAAKE,mBAAmB,CAACwB,IAAI,EAAE1B,KAAK,CAAC,KAAK6C,aAC1D,CAAC;IAED,MAAMlB,KAAsB,GAAGhB,SAAS,CAACb,GAAG,CAAE4B,IAAI,KAAM;MACpDjB,GAAG,EAAEiB,IAAI,CAAC3B,IAAI,CAACU,GAAG,CAACoB,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC;MAC5CC,SAAS,EAAE,cAAc,IAAIJ,IAAI,CAAC3B,IAAI,GAAGgC,oBAAS,CAACC,KAAK,GAAGD,oBAAS,CAACE;IACzE,CAAC,CAAC,CAAC;;IAEH;IACA;IACA,KAAK,IAAAC,oBAAS,EAAC;MAAEP,KAAK;MAAEH;IAAW,CAAC,CAAC;EACzC,CAAC,CAAC,OAAOW,CAAC,EAAE;IACR,IAAI,cAAc,IAAIpC,IAAI,CAACA,IAAI,EAAE;MAC7B,KAAK,IAAAqC,oBAAS,EAAC;QAAE3B,GAAG,EAAEV,IAAI,CAACA,IAAI,CAACU;MAAI,CAAC,CAAC;MAEtC;IACJ;IAEA,MAAM4B,UAA2B,GAAG,EAAE;IAEtC1B,SAAS,CAAC2B,OAAO,CAAEZ,IAAI,IAAK;MACxB,IAAI,EAAE,cAAc,IAAIA,IAAI,CAAC3B,IAAI,CAAC,EAAE;QAChCsC,UAAU,CAACE,IAAI,CAAC;UAAE9B,GAAG,EAAEiB,IAAI,CAAC3B,IAAI,CAACU;QAAI,CAAC,CAAC;MAC3C;IACJ,CAAC,CAAC;IAEFe,UAAU,GAAGa,UAAU,CAACZ,SAAS,CAAEC,IAAI,IAAKA,IAAI,CAACjB,GAAG,KAAKV,IAAI,CAACA,IAAI,CAACU,GAAG,CAAC;IAEvE,MAAMgC,SAAS,GAAGJ,UAAU,CAACK,KAAK,CAAC,CAAC;IAEpC,IAAI,CAACD,SAAS,EAAE;MACZ;IACJ;IAEA,KAAK,IAAAE,oBAAS,EAAC;MAAEhB,KAAK,EAAE,CAACc,SAAS,EAAE,GAAGJ,UAAU,CAAC;MAAEb;IAAW,CAAC,CAAC;EACrE;AACJ,CAAC;AAACjB,OAAA,CAAAqC,cAAA,GAAAA,cAAA","ignoreList":[]}
+{"version":3,"file":"gallery.js","names":["_chaynsApi","require","_gallery","DEFAULT_MEDIA_RATIO","mapFilesToInternalItems","files","map","file","index","id","getGalleryViewerKey","uploadedFile","undefined","state","previewUrl","exports","fileItem","url","getGalleryRatio","fileItems","_fileItems$","length","Math","max","ratio","getReadOnlyItemRatio","viewMode","itemCount","GalleryViewMode","GRID","_fileItems$2","openFiles","startIndex","findIndex","item","items","_item$uploadedFile","mediaType","MediaType","VIDEO","IMAGE","openMedia","_","openVideo","imageFiles","forEach","push","_file$uploadedFile","startFile","shift","openImage","openKnownFiles","activeFileKey","indexOf"],"sources":["../../../src/utils/gallery.ts"],"sourcesContent":["import type { FileItem, InternalFileItem } from '@chayns-components/core';\nimport {\n    MediaType,\n    openImage,\n    openMedia,\n    type OpenImageItem,\n    type OpenMediaItem,\n    openVideo,\n} from 'chayns-api';\nimport { GalleryViewMode } from '../types/gallery';\n\nconst DEFAULT_MEDIA_RATIO = 1;\n\nexport const mapFilesToInternalItems = (files?: FileItem[]): InternalFileItem[] =>\n    (files ?? []).map((file, index) => ({\n        id: getGalleryViewerKey(file, index),\n        uploadedFile: file.file,\n        file: undefined,\n        state: 'uploaded',\n        previewUrl: undefined,\n    }));\n\nexport const getGalleryViewerKey = (fileItem: FileItem, index: number): string =>\n    fileItem.id ?? fileItem.file.id ?? fileItem.file.url ?? `gallery-item-${index}`;\n\nexport const getGalleryRatio = (fileItems: FileItem[]): number => {\n    switch (fileItems.length) {\n        case 0:\n            return DEFAULT_MEDIA_RATIO;\n        case 1:\n            return Math.max(fileItems[0]?.file.ratio ?? DEFAULT_MEDIA_RATIO, 1);\n        case 2:\n            return 2;\n        case 3:\n            return 3;\n        default:\n            return DEFAULT_MEDIA_RATIO;\n    }\n};\n\nexport const getReadOnlyItemRatio = ({\n    fileItems,\n    index,\n    viewMode,\n}: {\n    fileItems: FileItem[];\n    index: number;\n    viewMode: GalleryViewMode;\n}): number => {\n    const itemCount = fileItems.length;\n\n    if (viewMode !== GalleryViewMode.GRID) {\n        return DEFAULT_MEDIA_RATIO;\n    }\n\n    if (itemCount === 1) {\n        // A square fallback keeps virtualization stable when upstream data does not provide a ratio.\n        return Math.max(fileItems[0]?.file.ratio ?? DEFAULT_MEDIA_RATIO, DEFAULT_MEDIA_RATIO);\n    }\n\n    if (itemCount === 2 && (index === 0 || index === 1)) {\n        return 0.5;\n    }\n\n    if ((index === 0 && itemCount > 2) || (itemCount === 3 && (index === 1 || index === 2))) {\n        return 1.5;\n    }\n\n    return DEFAULT_MEDIA_RATIO;\n};\n\nexport const openFiles = (fileItems: InternalFileItem[], file: InternalFileItem) => {\n    let startIndex = 0;\n\n    try {\n        startIndex = fileItems.findIndex((item) => item.id === file.id);\n\n        const items: OpenMediaItem[] = fileItems.map((item) => ({\n            url: item.uploadedFile?.url ?? '',\n            mediaType:\n                item.uploadedFile && 'thumbnailUrl' in item.uploadedFile\n                    ? MediaType.VIDEO\n                    : MediaType.IMAGE,\n        }));\n\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        void openMedia({ items, startIndex });\n    } catch (_) {\n        if (file.uploadedFile && 'thumbnailUrl' in file.uploadedFile) {\n            void openVideo({ url: file.uploadedFile.url });\n\n            return;\n        }\n\n        const imageFiles: OpenImageItem[] = [];\n\n        fileItems.forEach(({ uploadedFile }) => {\n            if (uploadedFile && !('thumbnailUrl' in uploadedFile)) {\n                imageFiles.push({ url: uploadedFile.url });\n            }\n        });\n\n        startIndex = imageFiles.findIndex((item) => item.url === file.uploadedFile?.url);\n\n        const startFile = imageFiles.shift();\n\n        if (!startFile) {\n            return;\n        }\n\n        void openImage({ items: [startFile, ...imageFiles], startIndex });\n    }\n};\n\nexport const openKnownFiles = (fileItems: FileItem[], file: FileItem) => {\n    const activeFileKey = getGalleryViewerKey(file, fileItems.indexOf(file));\n    let startIndex = 0;\n\n    try {\n        startIndex = fileItems.findIndex(\n            (item, index) => getGalleryViewerKey(item, index) === activeFileKey,\n        );\n\n        const items: OpenMediaItem[] = fileItems.map((item) => ({\n            url: item.file.url,\n            mediaType: 'thumbnailUrl' in item.file ? MediaType.VIDEO : MediaType.IMAGE,\n        }));\n\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        void openMedia({ items, startIndex });\n    } catch (_) {\n        if ('thumbnailUrl' in file.file) {\n            void openVideo({ url: file.file.url });\n\n            return;\n        }\n\n        const imageFiles: OpenImageItem[] = [];\n\n        fileItems.forEach((item) => {\n            if (!('thumbnailUrl' in item.file)) {\n                imageFiles.push({ url: item.file.url });\n            }\n        });\n\n        startIndex = imageFiles.findIndex((item) => item.url === file.file.url);\n\n        const startFile = imageFiles.shift();\n\n        if (!startFile) {\n            return;\n        }\n\n        void openImage({ items: [startFile, ...imageFiles], startIndex });\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/Gallery.js

@@ -13,6 +13,7 @@ const Gallery = /*#__PURE__*/forwardRef(({
   onAdd,
   onFileCountChange,
   onRemove,
+  shouldLoadImages = true,
   viewMode = GalleryViewMode.GRID
 }, ref) => {
   const editorRef = useRef(null);
@@ -36,9 +37,11 @@ const Gallery = /*#__PURE__*/forwardRef(({
     maxFiles: maxFiles,
     onAdd: onAdd,
     onFileCountChange: onFileCountChange,
-    onRemove: onRemove
+    onRemove: onRemove,
+    shouldLoadImages: shouldLoadImages
   }) : /*#__PURE__*/React.createElement(GalleryViewer, {
     files: files,
+    shouldLoadImages: shouldLoadImages,
     viewMode: viewMode
   });
 });

package/lib/esm/components/Gallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.js","names":["React","forwardRef","useCallback","useImperativeHandle","useRef","GalleryEditor","GalleryViewer","GalleryViewMode","Gallery","allowDragAndDrop","addFileIcon","doubleFileDialogMessage","isEditMode","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","viewMode","GRID","ref","editorRef","handleClear","console","warn","current","clear","createElement","displayName"],"sources":["../../../src/components/Gallery.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\nimport GalleryEditor from './gallery-editor/GalleryEditor';\nimport type { GalleryEditorRef } from './gallery-editor/GalleryEditor.types';\nimport GalleryViewer from './gallery-viewer/GalleryViewer';\nimport type { GalleryProps, GalleryRef } from './Gallery.types';\nimport { GalleryViewMode } from '../types/gallery';\n\nconst Gallery = forwardRef<GalleryRef, GalleryProps>(\n    (\n        {\n            allowDragAndDrop = false,\n            addFileIcon = 'fa fa-plus',\n            doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',\n            isEditMode = false,\n            fileMinWidth = 100,\n            files,\n            maxFiles,\n            onAdd,\n            onFileCountChange,\n            onRemove,\n            viewMode = GalleryViewMode.GRID,\n        },\n        ref,\n    ) => {\n        const editorRef = useRef<GalleryEditorRef>(null);\n\n        const handleClear = useCallback(() => {\n            if (!isEditMode) {\n                console.warn('Gallery.clear() can only be used in edit mode.');\n                return;\n            }\n\n            editorRef.current?.clear();\n        }, [isEditMode]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: handleClear,\n            }),\n            [handleClear],\n        );\n\n        return isEditMode ? (\n            <GalleryEditor\n                ref={editorRef}\n                allowDragAndDrop={allowDragAndDrop}\n                addFileIcon={addFileIcon}\n                doubleFileDialogMessage={doubleFileDialogMessage}\n                fileMinWidth={fileMinWidth}\n                files={files}\n                maxFiles={maxFiles}\n                onAdd={onAdd}\n                onFileCountChange={onFileCountChange}\n                onRemove={onRemove}\n            />\n        ) : (\n            <GalleryViewer files={files} viewMode={viewMode} />\n        );\n    },\n);\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,WAAW,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AACnF,OAAOC,aAAa,MAAM,gCAAgC;AAE1D,OAAOC,aAAa,MAAM,gCAAgC;AAE1D,SAASC,eAAe,QAAQ,kBAAkB;AAElD,MAAMC,OAAO,gBAAGP,UAAU,CACtB,CACI;EACIQ,gBAAgB,GAAG,KAAK;EACxBC,WAAW,GAAG,YAAY;EAC1BC,uBAAuB,GAAG,mCAAmC;EAC7DC,UAAU,GAAG,KAAK;EAClBC,YAAY,GAAG,GAAG;EAClBC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,iBAAiB;EACjBC,QAAQ;EACRC,QAAQ,GAAGZ,eAAe,CAACa;AAC/B,CAAC,EACDC,GAAG,KACF;EACD,MAAMC,SAAS,GAAGlB,MAAM,CAAmB,IAAI,CAAC;EAEhD,MAAMmB,WAAW,GAAGrB,WAAW,CAAC,MAAM;IAClC,IAAI,CAACU,UAAU,EAAE;MACbY,OAAO,CAACC,IAAI,CAAC,gDAAgD,CAAC;MAC9D;IACJ;IAEAH,SAAS,CAACI,OAAO,EAAEC,KAAK,CAAC,CAAC;EAC9B,CAAC,EAAE,CAACf,UAAU,CAAC,CAAC;EAEhBT,mBAAmB,CACfkB,GAAG,EACH,OAAO;IACHM,KAAK,EAAEJ;EACX,CAAC,CAAC,EACF,CAACA,WAAW,CAChB,CAAC;EAED,OAAOX,UAAU,gBACbZ,KAAA,CAAA4B,aAAA,CAACvB,aAAa;IACVgB,GAAG,EAAEC,SAAU;IACfb,gBAAgB,EAAEA,gBAAiB;IACnCC,WAAW,EAAEA,WAAY;IACzBC,uBAAuB,EAAEA,uBAAwB;IACjDE,YAAY,EAAEA,YAAa;IAC3BC,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEA,KAAM;IACbC,iBAAiB,EAAEA,iBAAkB;IACrCC,QAAQ,EAAEA;EAAS,CACtB,CAAC,gBAEFlB,KAAA,CAAA4B,aAAA,CAACtB,aAAa;IAACQ,KAAK,EAAEA,KAAM;IAACK,QAAQ,EAAEA;EAAS,CAAE,CACrD;AACL,CACJ,CAAC;AAEDX,OAAO,CAACqB,WAAW,GAAG,SAAS;AAE/B,eAAerB,OAAO","ignoreList":[]}
+{"version":3,"file":"Gallery.js","names":["React","forwardRef","useCallback","useImperativeHandle","useRef","GalleryEditor","GalleryViewer","GalleryViewMode","Gallery","allowDragAndDrop","addFileIcon","doubleFileDialogMessage","isEditMode","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","shouldLoadImages","viewMode","GRID","ref","editorRef","handleClear","console","warn","current","clear","createElement","displayName"],"sources":["../../../src/components/Gallery.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\nimport GalleryEditor from './gallery-editor/GalleryEditor';\nimport type { GalleryEditorRef } from './gallery-editor/GalleryEditor.types';\nimport GalleryViewer from './gallery-viewer/GalleryViewer';\nimport type { GalleryProps, GalleryRef } from './Gallery.types';\nimport { GalleryViewMode } from '../types/gallery';\n\nconst Gallery = forwardRef<GalleryRef, GalleryProps>(\n    (\n        {\n            allowDragAndDrop = false,\n            addFileIcon = 'fa fa-plus',\n            doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',\n            isEditMode = false,\n            fileMinWidth = 100,\n            files,\n            maxFiles,\n            onAdd,\n            onFileCountChange,\n            onRemove,\n            shouldLoadImages = true,\n            viewMode = GalleryViewMode.GRID,\n        },\n        ref,\n    ) => {\n        const editorRef = useRef<GalleryEditorRef>(null);\n\n        const handleClear = useCallback(() => {\n            if (!isEditMode) {\n                console.warn('Gallery.clear() can only be used in edit mode.');\n                return;\n            }\n\n            editorRef.current?.clear();\n        }, [isEditMode]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: handleClear,\n            }),\n            [handleClear],\n        );\n\n        return isEditMode ? (\n            <GalleryEditor\n                ref={editorRef}\n                allowDragAndDrop={allowDragAndDrop}\n                addFileIcon={addFileIcon}\n                doubleFileDialogMessage={doubleFileDialogMessage}\n                fileMinWidth={fileMinWidth}\n                files={files}\n                maxFiles={maxFiles}\n                onAdd={onAdd}\n                onFileCountChange={onFileCountChange}\n                onRemove={onRemove}\n                shouldLoadImages={shouldLoadImages}\n            />\n        ) : (\n            <GalleryViewer files={files} shouldLoadImages={shouldLoadImages} viewMode={viewMode} />\n        );\n    },\n);\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,WAAW,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AACnF,OAAOC,aAAa,MAAM,gCAAgC;AAE1D,OAAOC,aAAa,MAAM,gCAAgC;AAE1D,SAASC,eAAe,QAAQ,kBAAkB;AAElD,MAAMC,OAAO,gBAAGP,UAAU,CACtB,CACI;EACIQ,gBAAgB,GAAG,KAAK;EACxBC,WAAW,GAAG,YAAY;EAC1BC,uBAAuB,GAAG,mCAAmC;EAC7DC,UAAU,GAAG,KAAK;EAClBC,YAAY,GAAG,GAAG;EAClBC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,iBAAiB;EACjBC,QAAQ;EACRC,gBAAgB,GAAG,IAAI;EACvBC,QAAQ,GAAGb,eAAe,CAACc;AAC/B,CAAC,EACDC,GAAG,KACF;EACD,MAAMC,SAAS,GAAGnB,MAAM,CAAmB,IAAI,CAAC;EAEhD,MAAMoB,WAAW,GAAGtB,WAAW,CAAC,MAAM;IAClC,IAAI,CAACU,UAAU,EAAE;MACba,OAAO,CAACC,IAAI,CAAC,gDAAgD,CAAC;MAC9D;IACJ;IAEAH,SAAS,CAACI,OAAO,EAAEC,KAAK,CAAC,CAAC;EAC9B,CAAC,EAAE,CAAChB,UAAU,CAAC,CAAC;EAEhBT,mBAAmB,CACfmB,GAAG,EACH,OAAO;IACHM,KAAK,EAAEJ;EACX,CAAC,CAAC,EACF,CAACA,WAAW,CAChB,CAAC;EAED,OAAOZ,UAAU,gBACbZ,KAAA,CAAA6B,aAAA,CAACxB,aAAa;IACViB,GAAG,EAAEC,SAAU;IACfd,gBAAgB,EAAEA,gBAAiB;IACnCC,WAAW,EAAEA,WAAY;IACzBC,uBAAuB,EAAEA,uBAAwB;IACjDE,YAAY,EAAEA,YAAa;IAC3BC,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEA,KAAM;IACbC,iBAAiB,EAAEA,iBAAkB;IACrCC,QAAQ,EAAEA,QAAS;IACnBC,gBAAgB,EAAEA;EAAiB,CACtC,CAAC,gBAEFnB,KAAA,CAAA6B,aAAA,CAACvB,aAAa;IAACQ,KAAK,EAAEA,KAAM;IAACK,gBAAgB,EAAEA,gBAAiB;IAACC,QAAQ,EAAEA;EAAS,CAAE,CACzF;AACL,CACJ,CAAC;AAEDZ,OAAO,CAACsB,WAAW,GAAG,SAAS;AAE/B,eAAetB,OAAO","ignoreList":[]}

package/lib/esm/components/Gallery.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.types.js","names":[],"sources":["../../../src/components/Gallery.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport type { GalleryViewMode } from '../types/gallery';\n\n/**\n * Props for the public Gallery wrapper component.\n */\nexport type GalleryRef = {\n    /**\n     * Clears all locally managed gallery items in edit mode.\n     * @description\n     * When the gallery is rendered in read-only mode, calling this method only emits a console warning.\n     */\n    clear: () => void;\n};\n\nexport interface GalleryProps {\n    /**\n     * Enables drag and drop while the component is used in edit mode.\n     * @description\n     * This prop only affects the editor path. In read-only mode, drag and drop stays disabled regardless of this value.\n     * @default false\n     * @example\n     * <Gallery allowDragAndDrop isEditMode files={files} />\n     * @optional\n     */\n    allowDragAndDrop?: boolean;\n    /**\n     * Defines the dialog message that is shown when a duplicate upload is detected.\n     * @description\n     * The message is used by the editor when a locally added file resolves to an already known uploaded file.\n     * @default 'Diese Datei ist bereits vorhanden'\n     * @example\n     * <Gallery doubleFileDialogMessage=\"This file already exists.\" isEditMode files={files} />\n     * @optional\n     */\n    doubleFileDialogMessage?: string;\n    /**\n     * Defines the minimum width of one tile in edit mode.\n     * @description\n     * The editor uses this value to build its responsive grid. It has no effect in the read-only viewer.\n     * @default 100\n     * @example\n     * <Gallery fileMinWidth={140} isEditMode files={files} />\n     * @optional\n     */\n    fileMinWidth?: number;\n    /**\n     * Defines the icon that is shown in the add-file tile in edit mode.\n     * @description\n     * The icon is forwarded to the editor and replaces the default plus icon on the add-tile.\n     * @default 'fa fa-plus'\n     * @example\n     * <Gallery addFileIcon=\"fa fa-image-circle-plus\" isEditMode files={files} />\n     * @optional\n     */\n    addFileIcon?: string;\n    /**\n     * Provides already known media items that should be rendered by the gallery.\n     * @description\n     * In read-only mode, these files are rendered directly from props. In edit mode, they are used as the external baseline\n     * for already uploaded media while local uploads are managed internally.\n     * @example\n     * <Gallery files={files} />\n     * @optional\n     */\n    files?: FileItem[];\n    /**\n     * Enables the editable upload mode instead of the read-only viewer mode.\n     * @description\n     * When set to `true`, the public wrapper renders `GalleryEditor`. Otherwise it renders `GalleryViewer`.\n     * @default false\n     * @example\n     * <Gallery isEditMode files={files} />\n     * @optional\n     */\n    isEditMode?: boolean;\n    /**\n     * Limits how many files can be managed in edit mode.\n     * @description\n     * Once the limit is reached, the editor hides the add-tile and does not accept more files.\n     * This prop has no effect in read-only mode.\n     * @example\n     * <Gallery isEditMode maxFiles={6} files={files} />\n     * @optional\n     */\n    maxFiles?: number;\n    /**\n     * Is called after a file has been uploaded successfully in edit mode.\n     * @description\n     * The callback receives the uploaded file representation that should be merged into the consuming state.\n     * It is never called by the read-only viewer.\n     * @example\n     * <Gallery isEditMode onAdd={(file) => setFiles((prev) => [...prev, file])} />\n     * @optional\n     */\n    onAdd?: (file: FileItem) => void;\n    /**\n     * Is called whenever the internal item count changes in edit mode.\n     * @description\n     * This includes already uploaded files and locally pending uploads that are currently managed by the editor.\n     * It is useful when surrounding UI needs to know whether uploads are still in progress.\n     * @example\n     * <Gallery isEditMode onFileCountChange={(count) => console.log(count)} />\n     * @optional\n     */\n    onFileCountChange?: (fileCount: number) => void;\n    /**\n     * Is called after an uploaded file has been removed in edit mode.\n     * @description\n     * The callback receives the removed uploaded file so the consuming state can remove it as well.\n     * It is never called by the read-only viewer.\n     * @example\n     * <Gallery isEditMode onRemove={(file) => removeFile(file.id)} />\n     * @optional\n     */\n    onRemove?: (file: FileItem) => void;\n    /**\n     * Defines how known media items are arranged in read-only mode.\n     * @description\n     * This prop only affects the viewer path. The editor always uses its dedicated editable grid layout.\n     * @default GalleryViewMode.GRID\n     * @example\n     * <Gallery files={files} viewMode={GalleryViewMode.SQUARE} />\n     * @optional\n     */\n    viewMode?: GalleryViewMode;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"Gallery.types.js","names":[],"sources":["../../../src/components/Gallery.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport type { GalleryViewMode } from '../types/gallery';\n\n/**\n * Props for the public Gallery wrapper component.\n */\nexport type GalleryRef = {\n    /**\n     * Clears all locally managed gallery items in edit mode.\n     * @description\n     * When the gallery is rendered in read-only mode, calling this method only emits a console warning.\n     */\n    clear: () => void;\n};\n\nexport interface GalleryProps {\n    /**\n     * Enables drag and drop while the component is used in edit mode.\n     * @description\n     * This prop only affects the editor path. In read-only mode, drag and drop stays disabled regardless of this value.\n     * @default false\n     * @example\n     * <Gallery allowDragAndDrop isEditMode files={files} />\n     * @optional\n     */\n    allowDragAndDrop?: boolean;\n    /**\n     * Defines the dialog message that is shown when a duplicate upload is detected.\n     * @description\n     * The message is used by the editor when a locally added file resolves to an already known uploaded file.\n     * @default 'Diese Datei ist bereits vorhanden'\n     * @example\n     * <Gallery doubleFileDialogMessage=\"This file already exists.\" isEditMode files={files} />\n     * @optional\n     */\n    doubleFileDialogMessage?: string;\n    /**\n     * Defines the minimum width of one tile in edit mode.\n     * @description\n     * The editor uses this value to build its responsive grid. It has no effect in the read-only viewer.\n     * @default 100\n     * @example\n     * <Gallery fileMinWidth={140} isEditMode files={files} />\n     * @optional\n     */\n    fileMinWidth?: number;\n    /**\n     * Defines the icon that is shown in the add-file tile in edit mode.\n     * @description\n     * The icon is forwarded to the editor and replaces the default plus icon on the add-tile.\n     * @default 'fa fa-plus'\n     * @example\n     * <Gallery addFileIcon=\"fa fa-image-circle-plus\" isEditMode files={files} />\n     * @optional\n     */\n    addFileIcon?: string;\n    /**\n     * Provides already known media items that should be rendered by the gallery.\n     * @description\n     * In read-only mode, these files are rendered directly from props. In edit mode, they are used as the external baseline\n     * for already uploaded media while local uploads are managed internally.\n     * @example\n     * <Gallery files={files} />\n     * @optional\n     */\n    files?: FileItem[];\n    /**\n     * Enables the editable upload mode instead of the read-only viewer mode.\n     * @description\n     * When set to `true`, the public wrapper renders `GalleryEditor`. Otherwise it renders `GalleryViewer`.\n     * @default false\n     * @example\n     * <Gallery isEditMode files={files} />\n     * @optional\n     */\n    isEditMode?: boolean;\n    /**\n     * Limits how many files can be managed in edit mode.\n     * @description\n     * Once the limit is reached, the editor hides the add-tile and does not accept more files.\n     * This prop has no effect in read-only mode.\n     * @example\n     * <Gallery isEditMode maxFiles={6} files={files} />\n     * @optional\n     */\n    maxFiles?: number;\n    /**\n     * Controls when the gallery is allowed to load the final media assets.\n     * @description\n     * When set to `true`, the gallery loads the actual images immediately as before.\n     * When set to `false`, the gallery keeps rendering previews first and delays the final media load until this flag becomes `true`.\n     * This setting applies to the whole gallery wrapper and is intended for external loading control such as virtualized message lists.\n     * @default true\n     * @example\n     * <Gallery files={files} shouldLoadImages={false} />\n     * @optional\n     */\n    shouldLoadImages?: boolean;\n    /**\n     * Is called after a file has been uploaded successfully in edit mode.\n     * @description\n     * The callback receives the uploaded file representation that should be merged into the consuming state.\n     * It is never called by the read-only viewer.\n     * @example\n     * <Gallery isEditMode onAdd={(file) => setFiles((prev) => [...prev, file])} />\n     * @optional\n     */\n    onAdd?: (file: FileItem) => void;\n    /**\n     * Is called whenever the internal item count changes in edit mode.\n     * @description\n     * This includes already uploaded files and locally pending uploads that are currently managed by the editor.\n     * It is useful when surrounding UI needs to know whether uploads are still in progress.\n     * @example\n     * <Gallery isEditMode onFileCountChange={(count) => console.log(count)} />\n     * @optional\n     */\n    onFileCountChange?: (fileCount: number) => void;\n    /**\n     * Is called after an uploaded file has been removed in edit mode.\n     * @description\n     * The callback receives the removed uploaded file so the consuming state can remove it as well.\n     * It is never called by the read-only viewer.\n     * @example\n     * <Gallery isEditMode onRemove={(file) => removeFile(file.id)} />\n     * @optional\n     */\n    onRemove?: (file: FileItem) => void;\n    /**\n     * Defines how known media items are arranged in read-only mode.\n     * @description\n     * This prop only affects the viewer path. The editor always uses its dedicated editable grid layout.\n     * @default GalleryViewMode.GRID\n     * @example\n     * <Gallery files={files} viewMode={GalleryViewMode.SQUARE} />\n     * @optional\n     */\n    viewMode?: GalleryViewMode;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/esm/components/gallery-editor/GalleryEditor.constants.js

@@ -0,0 +1,6 @@
+export const GALLERY_EDITOR_GRID_GAP_PX = 6;
+export const GALLERY_EDITOR_ITEM_FADE_DURATION_S = 0.18;
+export const GALLERY_EDITOR_PREVIEW_FADE_DURATION_S = 0.16;
+export const GALLERY_EDITOR_MEDIA_FADE_DURATION_S = 0.2;
+export const GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX = 3;
+//# sourceMappingURL=GalleryEditor.constants.js.map

package/lib/esm/components/gallery-editor/GalleryEditor.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryEditor.constants.js","names":["GALLERY_EDITOR_GRID_GAP_PX","GALLERY_EDITOR_ITEM_FADE_DURATION_S","GALLERY_EDITOR_PREVIEW_FADE_DURATION_S","GALLERY_EDITOR_MEDIA_FADE_DURATION_S","GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX"],"sources":["../../../../src/components/gallery-editor/GalleryEditor.constants.ts"],"sourcesContent":["export const GALLERY_EDITOR_GRID_GAP_PX = 6;\nexport const GALLERY_EDITOR_ITEM_FADE_DURATION_S = 0.18;\nexport const GALLERY_EDITOR_PREVIEW_FADE_DURATION_S = 0.16;\nexport const GALLERY_EDITOR_MEDIA_FADE_DURATION_S = 0.2;\nexport const GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX = 3;\n"],"mappings":"AAAA,OAAO,MAAMA,0BAA0B,GAAG,CAAC;AAC3C,OAAO,MAAMC,mCAAmC,GAAG,IAAI;AACvD,OAAO,MAAMC,sCAAsC,GAAG,IAAI;AAC1D,OAAO,MAAMC,oCAAoC,GAAG,GAAG;AACvD,OAAO,MAAMC,oCAAoC,GAAG,CAAC","ignoreList":[]}

package/lib/esm/components/gallery-editor/GalleryEditor.js

@@ -1,12 +1,10 @@
-import { uploadFile } from '@chayns-components/core';
-import { createDialog, DialogType } from 'chayns-api';
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import { filterDuplicateFile, generatePreviewUrl, generateVideoThumbnail } from '../../utils/file';
-import { openFiles, mapFilesToInternalItems } from '../../utils/gallery';
+import { AnimatePresence } from 'motion/react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import AddFile from './add-file/AddFile';
-import GalleryEditorItem from './gallery-editor-item/GalleryEditorItem';
 import { StyledGalleryEditor, StyledGalleryEditorGrid } from './GalleryEditor.styles';
+import GalleryEditorItem from './gallery-editor-item/GalleryEditorItem';
+import { GALLERY_EDITOR_GRID_GAP_PX } from './GalleryEditor.constants';
+import useGalleryEditorState from './useGalleryEditorState';
 const GalleryEditor = /*#__PURE__*/forwardRef(({
   allowDragAndDrop = false,
   addFileIcon = 'fa fa-plus',
@@ -16,181 +14,46 @@ const GalleryEditor = /*#__PURE__*/forwardRef(({
   maxFiles,
   onAdd,
   onFileCountChange,
-  onRemove
+  onRemove,
+  shouldLoadImages = true
 }, ref) => {
-  const [fileItems, setFileItems] = useState(() => mapFilesToInternalItems(files));
-  const handleClear = useCallback(() => {
-    setFileItems([]);
-  }, []);
-  const handlePreviewUrlCallback = useCallback((previewUrl, file) => {
-    setFileItems(prevState => prevState.map(prevFile => {
-      if (prevFile.id === file.id) {
-        return {
-          ...prevFile,
-          previewUrl
-        };
-      }
-      return prevFile;
-    }));
-  }, []);
-  const callDuplicateFileDialog = useCallback(() => {
-    createDialog({
-      type: DialogType.ALERT,
-      text: doubleFileDialogMessage
-    });
-  }, [doubleFileDialogMessage]);
-  const handleUploadFileCallback = useCallback((file, uploadedFile) => {
-    setFileItems(prevState => {
-      const updatedState = prevState.map(prevFile => {
-        if (prevFile.uploadedFile?.url === uploadedFile.url) {
-          callDuplicateFileDialog();
-          return undefined;
-        }
-        if (prevFile.id === file.id) {
-          if (typeof onAdd === 'function') {
-            const prevElement = prevState.find(({
-              uploadedFile: nextUploadedFile
-            }) => nextUploadedFile?.url === uploadedFile?.url);
-            if (!prevElement) {
-              onAdd({
-                file: uploadedFile,
-                id: file.id
-              });
-            }
-          }
-          return {
-            ...prevFile,
-            uploadedFile,
-            state: 'uploaded'
-          };
-        }
-        return prevFile;
-      });
-      return updatedState.filter(Boolean);
-    });
-  }, [callDuplicateFileDialog, onAdd]);
-  const handleAddFiles = useCallback(filesToAdd => {
-    const newFileItems = [];
-    filesToAdd.forEach(file => {
-      if (file && !filterDuplicateFile({
-        files: fileItems,
-        newFile: file
-      })) {
-        newFileItems.push({
-          id: uuidv4(),
-          file,
-          state: 'none'
-        });
-      }
-    });
-    let limitedFileItems = newFileItems;
-    if (maxFiles) {
-      limitedFileItems = newFileItems.slice(0, Math.max(maxFiles - fileItems.length, 0));
-    }
-    setFileItems(prevState => [...prevState, ...limitedFileItems]);
-  }, [fileItems, maxFiles]);
-  const handleDeleteFile = useCallback(id => {
-    let fileToDelete;
-    const filteredFiles = fileItems.filter(file => {
-      if (file.id === id && file.uploadedFile) {
-        fileToDelete = {
-          file: file.uploadedFile,
-          id
-        };
-      }
-      return file.id !== id;
-    });
-    setFileItems(filteredFiles);
-    if (!fileToDelete || typeof onRemove !== 'function') {
-      return;
-    }
-    onRemove(fileToDelete);
-  }, [fileItems, onRemove]);
-  const handleDrop = useCallback(event => {
-    if (!allowDragAndDrop) {
-      return;
-    }
-    event.preventDefault();
-    handleAddFiles(Array.from(event.dataTransfer.files));
-  }, [allowDragAndDrop, handleAddFiles]);
-  const handleOpenFiles = useCallback(file => {
-    openFiles(fileItems, file);
-  }, [fileItems]);
+  const {
+    fileItems,
+    handleAddFiles,
+    handleClear,
+    handleDeleteFile,
+    handleDrop,
+    handleOpenFiles
+  } = useGalleryEditorState({
+    allowDragAndDrop,
+    doubleFileDialogMessage,
+    files,
+    maxFiles,
+    onAdd,
+    onFileCountChange,
+    onRemove
+  });
   useImperativeHandle(ref, () => ({
     clear: handleClear
   }), [handleClear]);
-  useEffect(() => {
-    if (typeof onFileCountChange === 'function') {
-      onFileCountChange(fileItems.length);
-    }
-  }, [fileItems.length, onFileCountChange]);
-  useEffect(() => {
-    const filesToGeneratePreview = fileItems.filter(file => file.file && !file.previewUrl && (file.state === 'none' || !file.state));
-    const filesToUpload = fileItems.filter(file => file.file && !file.uploadedFile && file.state !== 'uploading');
-    filesToGeneratePreview.forEach(file => {
-      if (!file.file) {
-        return;
-      }
-      if (file.file.type.includes('video/')) {
-        generateVideoThumbnail({
-          file: file.file,
-          callback: previewUrl => handlePreviewUrlCallback(previewUrl, file)
-        });
-        return;
-      }
-      generatePreviewUrl({
-        file: file.file,
-        callback: previewUrl => handlePreviewUrlCallback(previewUrl, file)
-      });
-    });
-    filesToUpload.forEach(file => {
-      setFileItems(prevState => prevState.map(prevFile => {
-        if (prevFile.id === file.id) {
-          return {
-            ...prevFile,
-            state: 'uploading'
-          };
-        }
-        return prevFile;
-      }));
-      void uploadFile({
-        fileToUpload: file,
-        callback: uploadedFile => handleUploadFileCallback(file, uploadedFile)
-      });
-    });
-  }, [fileItems, handlePreviewUrlCallback, handleUploadFileCallback]);
-  useEffect(() => {
-    const externalFileItems = mapFilesToInternalItems(files);
-    setFileItems(prevState => {
-      // Keep local-only items such as pending uploads while refreshing known external media.
-      const updatedItems = prevState.map(prevItem => {
-        const matchingItem = externalFileItems.find(item => item.uploadedFile && item.uploadedFile.url === (prevItem.uploadedFile && prevItem.uploadedFile.url));
-        return matchingItem || prevItem;
-      });
-      return updatedItems.concat(externalFileItems.filter(newItem => !prevState.some(prevItem => prevItem.uploadedFile && newItem.uploadedFile && prevItem.uploadedFile.url === newItem.uploadedFile.url)));
-    });
-  }, [files]);
-  const galleryItems = useMemo(() => {
-    const items = fileItems.map(file => /*#__PURE__*/React.createElement(GalleryEditorItem, {
-      key: file.id,
-      fileItem: file,
-      onClick: handleOpenFiles,
-      handleDeleteFile: handleDeleteFile
-    }));
-    if (maxFiles && maxFiles <= fileItems.length) {
-      return items;
-    }
-    return [...items, /*#__PURE__*/React.createElement(AddFile, {
-      key: "add_file",
-      addFileIcon: addFileIcon,
-      onAdd: handleAddFiles
-    })];
-  }, [addFileIcon, fileItems, handleAddFiles, handleDeleteFile, handleOpenFiles, maxFiles]);
+  const shouldShowAddFileTile = !maxFiles || maxFiles > fileItems.length;
   return /*#__PURE__*/React.createElement(StyledGalleryEditor, null, /*#__PURE__*/React.createElement(StyledGalleryEditorGrid, {
     $fileMinWidth: fileMinWidth,
+    $gap: GALLERY_EDITOR_GRID_GAP_PX,
     onDragOver: event => event.preventDefault(),
     onDrop: event => void handleDrop(event)
-  }, galleryItems));
+  }, /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, fileItems.map(file => /*#__PURE__*/React.createElement(GalleryEditorItem, {
+    key: file.id,
+    fileItem: file,
+    handleDeleteFile: handleDeleteFile,
+    onClick: handleOpenFiles,
+    shouldLoadImages: shouldLoadImages
+  }))), shouldShowAddFileTile && /*#__PURE__*/React.createElement(AddFile, {
+    addFileIcon: addFileIcon,
+    onAdd: handleAddFiles
+  })));
 });
 GalleryEditor.displayName = 'GalleryEditor';
 export default GalleryEditor;

package/lib/esm/components/gallery-editor/GalleryEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryEditor.js","names":["uploadFile","createDialog","DialogType","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useState","v4","uuidv4","filterDuplicateFile","generatePreviewUrl","generateVideoThumbnail","openFiles","mapFilesToInternalItems","AddFile","GalleryEditorItem","StyledGalleryEditor","StyledGalleryEditorGrid","GalleryEditor","allowDragAndDrop","addFileIcon","doubleFileDialogMessage","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","ref","fileItems","setFileItems","handleClear","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","callDuplicateFileDialog","type","ALERT","text","handleUploadFileCallback","uploadedFile","updatedState","url","undefined","prevElement","find","nextUploadedFile","state","filter","Boolean","handleAddFiles","filesToAdd","newFileItems","forEach","newFile","push","limitedFileItems","slice","Math","max","length","handleDeleteFile","fileToDelete","filteredFiles","handleDrop","event","preventDefault","Array","from","dataTransfer","handleOpenFiles","clear","filesToGeneratePreview","filesToUpload","includes","callback","fileToUpload","externalFileItems","updatedItems","prevItem","matchingItem","item","concat","newItem","some","galleryItems","items","createElement","key","fileItem","onClick","$fileMinWidth","onDragOver","onDrop","displayName"],"sources":["../../../../src/components/gallery-editor/GalleryEditor.tsx"],"sourcesContent":["import {\n    Image,\n    uploadFile,\n    Video,\n    type FileItem,\n    type InternalFileItem,\n} from '@chayns-components/core';\nimport { createDialog, DialogType } from 'chayns-api';\nimport React, {\n    DragEvent,\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useState,\n} from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { filterDuplicateFile, generatePreviewUrl, generateVideoThumbnail } from '../../utils/file';\nimport { openFiles, mapFilesToInternalItems } from '../../utils/gallery';\nimport AddFile from './add-file/AddFile';\nimport GalleryEditorItem from './gallery-editor-item/GalleryEditorItem';\nimport { StyledGalleryEditor, StyledGalleryEditorGrid } from './GalleryEditor.styles';\nimport type { GalleryEditorProps, GalleryEditorRef } from './GalleryEditor.types';\n\nconst GalleryEditor = forwardRef<GalleryEditorRef, GalleryEditorProps>(\n    (\n        {\n            allowDragAndDrop = false,\n            addFileIcon = 'fa fa-plus',\n            doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',\n            fileMinWidth = 100,\n            files,\n            maxFiles,\n            onAdd,\n            onFileCountChange,\n            onRemove,\n        },\n        ref,\n    ) => {\n        const [fileItems, setFileItems] = useState<InternalFileItem[]>(() =>\n            mapFilesToInternalItems(files),\n        );\n\n        const handleClear = useCallback(() => {\n            setFileItems([]);\n        }, []);\n\n        const handlePreviewUrlCallback = useCallback(\n            (previewUrl: string, file: InternalFileItem) => {\n                setFileItems((prevState) =>\n                    prevState.map((prevFile) => {\n                        if (prevFile.id === file.id) {\n                            return { ...prevFile, previewUrl };\n                        }\n\n                        return prevFile;\n                    }),\n                );\n            },\n            [],\n        );\n\n        const callDuplicateFileDialog = useCallback(() => {\n            createDialog({ type: DialogType.ALERT, text: doubleFileDialogMessage });\n        }, [doubleFileDialogMessage]);\n\n        const handleUploadFileCallback = useCallback(\n            (file: InternalFileItem, uploadedFile: Video | Image) => {\n                setFileItems((prevState) => {\n                    const updatedState = prevState.map((prevFile) => {\n                        if (prevFile.uploadedFile?.url === uploadedFile.url) {\n                            callDuplicateFileDialog();\n\n                            return undefined;\n                        }\n\n                        if (prevFile.id === file.id) {\n                            if (typeof onAdd === 'function') {\n                                const prevElement = prevState.find(\n                                    ({ uploadedFile: nextUploadedFile }) =>\n                                        nextUploadedFile?.url === uploadedFile?.url,\n                                );\n\n                                if (!prevElement) {\n                                    onAdd({\n                                        file: uploadedFile,\n                                        id: file.id,\n                                    });\n                                }\n                            }\n\n                            return {\n                                ...prevFile,\n                                uploadedFile,\n                                state: 'uploaded',\n                            };\n                        }\n\n                        return prevFile;\n                    });\n\n                    return updatedState.filter(Boolean) as InternalFileItem[];\n                });\n            },\n            [callDuplicateFileDialog, onAdd],\n        );\n\n        const handleAddFiles = useCallback(\n            (filesToAdd: File[]) => {\n                const newFileItems: InternalFileItem[] = [];\n\n                filesToAdd.forEach((file) => {\n                    if (file && !filterDuplicateFile({ files: fileItems, newFile: file })) {\n                        newFileItems.push({\n                            id: uuidv4(),\n                            file,\n                            state: 'none',\n                        });\n                    }\n                });\n\n                let limitedFileItems = newFileItems;\n\n                if (maxFiles) {\n                    limitedFileItems = newFileItems.slice(\n                        0,\n                        Math.max(maxFiles - fileItems.length, 0),\n                    );\n                }\n\n                setFileItems((prevState) => [...prevState, ...limitedFileItems]);\n            },\n            [fileItems, maxFiles],\n        );\n\n        const handleDeleteFile = useCallback(\n            (id?: string) => {\n                let fileToDelete: FileItem | undefined;\n\n                const filteredFiles = fileItems.filter((file) => {\n                    if (file.id === id && file.uploadedFile) {\n                        fileToDelete = { file: file.uploadedFile, id };\n                    }\n\n                    return file.id !== id;\n                });\n\n                setFileItems(filteredFiles);\n\n                if (!fileToDelete || typeof onRemove !== 'function') {\n                    return;\n                }\n\n                onRemove(fileToDelete);\n            },\n            [fileItems, onRemove],\n        );\n\n        const handleDrop = useCallback(\n            (event: DragEvent<HTMLDivElement>) => {\n                if (!allowDragAndDrop) {\n                    return;\n                }\n\n                event.preventDefault();\n\n                handleAddFiles(Array.from(event.dataTransfer.files));\n            },\n            [allowDragAndDrop, handleAddFiles],\n        );\n\n        const handleOpenFiles = useCallback(\n            (file: InternalFileItem) => {\n                openFiles(fileItems, file);\n            },\n            [fileItems],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: handleClear,\n            }),\n            [handleClear],\n        );\n\n        useEffect(() => {\n            if (typeof onFileCountChange === 'function') {\n                onFileCountChange(fileItems.length);\n            }\n        }, [fileItems.length, onFileCountChange]);\n\n        useEffect(() => {\n            const filesToGeneratePreview = fileItems.filter(\n                (file) => file.file && !file.previewUrl && (file.state === 'none' || !file.state),\n            );\n\n            const filesToUpload = fileItems.filter(\n                (file) => file.file && !file.uploadedFile && file.state !== 'uploading',\n            );\n\n            filesToGeneratePreview.forEach((file) => {\n                if (!file.file) {\n                    return;\n                }\n\n                if (file.file.type.includes('video/')) {\n                    generateVideoThumbnail({\n                        file: file.file,\n                        callback: (previewUrl) => handlePreviewUrlCallback(previewUrl, file),\n                    });\n\n                    return;\n                }\n\n                generatePreviewUrl({\n                    file: file.file,\n                    callback: (previewUrl) => handlePreviewUrlCallback(previewUrl, file),\n                });\n            });\n\n            filesToUpload.forEach((file) => {\n                setFileItems((prevState) =>\n                    prevState.map((prevFile) => {\n                        if (prevFile.id === file.id) {\n                            return { ...prevFile, state: 'uploading' };\n                        }\n\n                        return prevFile;\n                    }),\n                );\n\n                void uploadFile({\n                    fileToUpload: file,\n                    callback: (uploadedFile) => handleUploadFileCallback(file, uploadedFile),\n                });\n            });\n        }, [fileItems, handlePreviewUrlCallback, handleUploadFileCallback]);\n\n        useEffect(() => {\n            const externalFileItems = mapFilesToInternalItems(files);\n\n            setFileItems((prevState) => {\n                // Keep local-only items such as pending uploads while refreshing known external media.\n                const updatedItems = prevState.map((prevItem) => {\n                    const matchingItem = externalFileItems.find(\n                        (item) =>\n                            item.uploadedFile &&\n                            item.uploadedFile.url ===\n                                (prevItem.uploadedFile && prevItem.uploadedFile.url),\n                    );\n\n                    return matchingItem || prevItem;\n                });\n\n                return updatedItems.concat(\n                    externalFileItems.filter(\n                        (newItem) =>\n                            !prevState.some(\n                                (prevItem) =>\n                                    prevItem.uploadedFile &&\n                                    newItem.uploadedFile &&\n                                    prevItem.uploadedFile.url === newItem.uploadedFile.url,\n                            ),\n                    ),\n                );\n            });\n        }, [files]);\n\n        const galleryItems = useMemo(() => {\n            const items = fileItems.map((file) => (\n                <GalleryEditorItem\n                    key={file.id}\n                    fileItem={file}\n                    onClick={handleOpenFiles}\n                    handleDeleteFile={handleDeleteFile}\n                />\n            ));\n\n            if (maxFiles && maxFiles <= fileItems.length) {\n                return items;\n            }\n\n            return [\n                ...items,\n                <AddFile key=\"add_file\" addFileIcon={addFileIcon} onAdd={handleAddFiles} />,\n            ];\n        }, [addFileIcon, fileItems, handleAddFiles, handleDeleteFile, handleOpenFiles, maxFiles]);\n\n        return (\n            <StyledGalleryEditor>\n                <StyledGalleryEditorGrid\n                    $fileMinWidth={fileMinWidth}\n                    onDragOver={(event) => event.preventDefault()}\n                    onDrop={(event) => void handleDrop(event)}\n                >\n                    {galleryItems}\n                </StyledGalleryEditorGrid>\n            </StyledGalleryEditor>\n        );\n    },\n);\n\nGalleryEditor.displayName = 'GalleryEditor';\n\nexport default GalleryEditor;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"GalleryEditor.js","names":["AnimatePresence","React","forwardRef","useImperativeHandle","AddFile","StyledGalleryEditor","StyledGalleryEditorGrid","GalleryEditorItem","GALLERY_EDITOR_GRID_GAP_PX","useGalleryEditorState","GalleryEditor","allowDragAndDrop","addFileIcon","doubleFileDialogMessage","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","shouldLoadImages","ref","fileItems","handleAddFiles","handleClear","handleDeleteFile","handleDrop","handleOpenFiles","clear","shouldShowAddFileTile","length","createElement","$fileMinWidth","$gap","onDragOver","event","preventDefault","onDrop","initial","map","file","key","id","fileItem","onClick","displayName"],"sources":["../../../../src/components/gallery-editor/GalleryEditor.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { forwardRef, useImperativeHandle } from 'react';\nimport AddFile from './add-file/AddFile';\nimport { StyledGalleryEditor, StyledGalleryEditorGrid } from './GalleryEditor.styles';\nimport type { GalleryEditorProps, GalleryEditorRef } from './GalleryEditor.types';\nimport GalleryEditorItem from './gallery-editor-item/GalleryEditorItem';\nimport { GALLERY_EDITOR_GRID_GAP_PX } from './GalleryEditor.constants';\nimport useGalleryEditorState from './useGalleryEditorState';\n\nconst GalleryEditor = forwardRef<GalleryEditorRef, GalleryEditorProps>(\n    (\n        {\n            allowDragAndDrop = false,\n            addFileIcon = 'fa fa-plus',\n            doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',\n            fileMinWidth = 100,\n            files,\n            maxFiles,\n            onAdd,\n            onFileCountChange,\n            onRemove,\n            shouldLoadImages = true,\n        },\n        ref,\n    ) => {\n        const {\n            fileItems,\n            handleAddFiles,\n            handleClear,\n            handleDeleteFile,\n            handleDrop,\n            handleOpenFiles,\n        } = useGalleryEditorState({\n            allowDragAndDrop,\n            doubleFileDialogMessage,\n            files,\n            maxFiles,\n            onAdd,\n            onFileCountChange,\n            onRemove,\n        });\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: handleClear,\n            }),\n            [handleClear],\n        );\n\n        const shouldShowAddFileTile = !maxFiles || maxFiles > fileItems.length;\n\n        return (\n            <StyledGalleryEditor>\n                <StyledGalleryEditorGrid\n                    $fileMinWidth={fileMinWidth}\n                    $gap={GALLERY_EDITOR_GRID_GAP_PX}\n                    onDragOver={(event) => event.preventDefault()}\n                    onDrop={(event) => void handleDrop(event)}\n                >\n                    <AnimatePresence initial={false}>\n                        {fileItems.map((file) => (\n                            <GalleryEditorItem\n                                key={file.id}\n                                fileItem={file}\n                                handleDeleteFile={handleDeleteFile}\n                                onClick={handleOpenFiles}\n                                shouldLoadImages={shouldLoadImages}\n                            />\n                        ))}\n                    </AnimatePresence>\n\n                    {shouldShowAddFileTile && (\n                        <AddFile addFileIcon={addFileIcon} onAdd={handleAddFiles} />\n                    )}\n                </StyledGalleryEditorGrid>\n            </StyledGalleryEditor>\n        );\n    },\n);\n\nGalleryEditor.displayName = 'GalleryEditor';\n\nexport default GalleryEditor;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,cAAc;AAC9C,OAAOC,KAAK,IAAIC,UAAU,EAAEC,mBAAmB,QAAQ,OAAO;AAC9D,OAAOC,OAAO,MAAM,oBAAoB;AACxC,SAASC,mBAAmB,EAAEC,uBAAuB,QAAQ,wBAAwB;AAErF,OAAOC,iBAAiB,MAAM,yCAAyC;AACvE,SAASC,0BAA0B,QAAQ,2BAA2B;AACtE,OAAOC,qBAAqB,MAAM,yBAAyB;AAE3D,MAAMC,aAAa,gBAAGR,UAAU,CAC5B,CACI;EACIS,gBAAgB,GAAG,KAAK;EACxBC,WAAW,GAAG,YAAY;EAC1BC,uBAAuB,GAAG,mCAAmC;EAC7DC,YAAY,GAAG,GAAG;EAClBC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,iBAAiB;EACjBC,QAAQ;EACRC,gBAAgB,GAAG;AACvB,CAAC,EACDC,GAAG,KACF;EACD,MAAM;IACFC,SAAS;IACTC,cAAc;IACdC,WAAW;IACXC,gBAAgB;IAChBC,UAAU;IACVC;EACJ,CAAC,GAAGlB,qBAAqB,CAAC;IACtBE,gBAAgB;IAChBE,uBAAuB;IACvBE,KAAK;IACLC,QAAQ;IACRC,KAAK;IACLC,iBAAiB;IACjBC;EACJ,CAAC,CAAC;EAEFhB,mBAAmB,CACfkB,GAAG,EACH,OAAO;IACHO,KAAK,EAAEJ;EACX,CAAC,CAAC,EACF,CAACA,WAAW,CAChB,CAAC;EAED,MAAMK,qBAAqB,GAAG,CAACb,QAAQ,IAAIA,QAAQ,GAAGM,SAAS,CAACQ,MAAM;EAEtE,oBACI7B,KAAA,CAAA8B,aAAA,CAAC1B,mBAAmB,qBAChBJ,KAAA,CAAA8B,aAAA,CAACzB,uBAAuB;IACpB0B,aAAa,EAAElB,YAAa;IAC5BmB,IAAI,EAAEzB,0BAA2B;IACjC0B,UAAU,EAAGC,KAAK,IAAKA,KAAK,CAACC,cAAc,CAAC,CAAE;IAC9CC,MAAM,EAAGF,KAAK,IAAK,KAAKT,UAAU,CAACS,KAAK;EAAE,gBAE1ClC,KAAA,CAAA8B,aAAA,CAAC/B,eAAe;IAACsC,OAAO,EAAE;EAAM,GAC3BhB,SAAS,CAACiB,GAAG,CAAEC,IAAI,iBAChBvC,KAAA,CAAA8B,aAAA,CAACxB,iBAAiB;IACdkC,GAAG,EAAED,IAAI,CAACE,EAAG;IACbC,QAAQ,EAAEH,IAAK;IACff,gBAAgB,EAAEA,gBAAiB;IACnCmB,OAAO,EAAEjB,eAAgB;IACzBP,gBAAgB,EAAEA;EAAiB,CACtC,CACJ,CACY,CAAC,EAEjBS,qBAAqB,iBAClB5B,KAAA,CAAA8B,aAAA,CAAC3B,OAAO;IAACQ,WAAW,EAAEA,WAAY;IAACK,KAAK,EAAEM;EAAe,CAAE,CAE1C,CACR,CAAC;AAE9B,CACJ,CAAC;AAEDb,aAAa,CAACmC,WAAW,GAAG,eAAe;AAE3C,eAAenC,aAAa","ignoreList":[]}

package/lib/esm/components/gallery-editor/GalleryEditor.styles.js

@@ -8,6 +8,8 @@ export const StyledGalleryEditorGrid = styled.div`
   $fileMinWidth
 }) => `repeat(auto-fill, minmax(${$fileMinWidth}px, 1fr))`};
     grid-auto-rows: 1fr;
-    gap: 6px;
+    gap: ${({
+  $gap
+}) => `${$gap}px`};
 `;
 //# sourceMappingURL=GalleryEditor.styles.js.map

package/lib/esm/components/gallery-editor/GalleryEditor.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryEditor.styles.js","names":["styled","StyledGalleryEditor","div","StyledGalleryEditorGrid","$fileMinWidth"],"sources":["../../../../src/components/gallery-editor/GalleryEditor.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledGalleryEditor = styled.div`\n    width: 100%;\n`;\n\nexport const StyledGalleryEditorGrid = styled.div<{\n    $fileMinWidth: number;\n}>`\n    display: grid;\n    grid-template-columns: ${({ $fileMinWidth }) =>\n        `repeat(auto-fill, minmax(${$fileMinWidth}px, 1fr))`};\n    grid-auto-rows: 1fr;\n    gap: 6px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,mBAAmB,GAAGD,MAAM,CAACE,GAAG;AAC7C;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGH,MAAM,CAACE,GAE5C;AACF;AACA,6BAA6B,CAAC;EAAEE;AAAc,CAAC,KACvC,4BAA4BA,aAAa,WAAW;AAC5D;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"GalleryEditor.styles.js","names":["styled","StyledGalleryEditor","div","StyledGalleryEditorGrid","$fileMinWidth","$gap"],"sources":["../../../../src/components/gallery-editor/GalleryEditor.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledGalleryEditor = styled.div`\n    width: 100%;\n`;\n\nexport const StyledGalleryEditorGrid = styled.div<{\n    $gap: number;\n    $fileMinWidth: number;\n}>`\n    display: grid;\n    grid-template-columns: ${({ $fileMinWidth }) =>\n        `repeat(auto-fill, minmax(${$fileMinWidth}px, 1fr))`};\n    grid-auto-rows: 1fr;\n    gap: ${({ $gap }) => `${$gap}px`};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,mBAAmB,GAAGD,MAAM,CAACE,GAAG;AAC7C;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGH,MAAM,CAACE,GAG5C;AACF;AACA,6BAA6B,CAAC;EAAEE;AAAc,CAAC,KACvC,4BAA4BA,aAAa,WAAW;AAC5D;AACA,WAAW,CAAC;EAAEC;AAAK,CAAC,KAAK,GAAGA,IAAI,IAAI;AACpC,CAAC","ignoreList":[]}