@chayns-components/gallery 5.2.4 → 5.2.6

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

@@ -1 +1 @@
-{"version":3,"file":"GalleryEditor.types.js","names":[],"sources":["../../../../src/components/gallery-editor/GalleryEditor.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport type { GalleryRef } from '../Gallery.types';\n\n/**\n * Props for the editable gallery component.\n */\nexport interface GalleryEditorProps {\n    /**\n     * Enables drag and drop file selection inside the editor grid.\n     * @description\n     * When enabled, users can drop local image or video files onto the editor grid to start the upload flow.\n     * @default false\n     * @example\n     * <GalleryEditor allowDragAndDrop 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 shown when a newly uploaded file resolves to a URL that already exists in the editor state.\n     * @default 'Diese Datei ist bereits vorhanden'\n     * @example\n     * <GalleryEditor doubleFileDialogMessage=\"This file already exists.\" files={files} />\n     * @optional\n     */\n    doubleFileDialogMessage?: string;\n    /**\n     * Defines the minimum width of one tile in the editor grid.\n     * @description\n     * The editor uses this value to size the responsive grid columns that hold uploaded items and the add-tile.\n     * @default 100\n     * @example\n     * <GalleryEditor fileMinWidth={140} files={files} />\n     * @optional\n     */\n    fileMinWidth?: number;\n    /**\n     * Defines the icon that is shown in the add-file tile.\n     * @description\n     * The editor renders this icon inside the tile that opens the file picker for adding more items.\n     * @default 'fa fa-plus'\n     * @example\n     * <GalleryEditor addFileIcon=\"fa fa-image-circle-plus\" files={files} />\n     * @optional\n     */\n    addFileIcon?: string;\n    /**\n     * Provides already uploaded media items that should be merged into the editor state.\n     * @description\n     * These files represent the externally known uploaded baseline. The editor may additionally hold local pending uploads.\n     * @example\n     * <GalleryEditor files={files} />\n     * @optional\n     */\n    files?: FileItem[];\n    /**\n     * Limits how many files can be managed by the editor.\n     * @description\n     * After the limit is reached, the add-tile is hidden and additional file selection is ignored.\n     * @example\n     * <GalleryEditor files={files} maxFiles={6} />\n     * @optional\n     */\n    maxFiles?: number;\n    /**\n     * Is called after a file has been uploaded successfully.\n     * @description\n     * The callback receives the uploaded file representation so the consuming state can persist it externally.\n     * @example\n     * <GalleryEditor onAdd={(file) => setFiles((prev) => [...prev, file])} />\n     * @optional\n     */\n    onAdd?: (file: FileItem) => void;\n    /**\n     * Is called whenever the internal item count changes, including local pending uploads.\n     * @description\n     * Use this callback when surrounding UI needs to react to the number of currently managed items.\n     * @example\n     * <GalleryEditor onFileCountChange={(count) => console.log(count)} />\n     * @optional\n     */\n    onFileCountChange?: (fileCount: number) => void;\n    /**\n     * Is called after an uploaded file has been removed.\n     * @description\n     * The callback receives the removed uploaded file so the consuming state can remove it from its controlled `files` array.\n     * @example\n     * <GalleryEditor onRemove={(file) => removeFile(file.id)} />\n     * @optional\n     */\n    onRemove?: (file: FileItem) => void;\n}\n\nexport type GalleryEditorRef = GalleryRef;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"GalleryEditor.types.js","names":[],"sources":["../../../../src/components/gallery-editor/GalleryEditor.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport type { GalleryRef } from '../Gallery.types';\n\n/**\n * Props for the editable gallery component.\n */\nexport interface GalleryEditorProps {\n    /**\n     * Enables drag and drop file selection inside the editor grid.\n     * @description\n     * When enabled, users can drop local image or video files onto the editor grid to start the upload flow.\n     * @default false\n     * @example\n     * <GalleryEditor allowDragAndDrop 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 shown when a newly uploaded file resolves to a URL that already exists in the editor state.\n     * @default 'Diese Datei ist bereits vorhanden'\n     * @example\n     * <GalleryEditor doubleFileDialogMessage=\"This file already exists.\" files={files} />\n     * @optional\n     */\n    doubleFileDialogMessage?: string;\n    /**\n     * Defines the minimum width of one tile in the editor grid.\n     * @description\n     * The editor uses this value to size the responsive grid columns that hold uploaded items and the add-tile.\n     * @default 100\n     * @example\n     * <GalleryEditor fileMinWidth={140} files={files} />\n     * @optional\n     */\n    fileMinWidth?: number;\n    /**\n     * Defines the icon that is shown in the add-file tile.\n     * @description\n     * The editor renders this icon inside the tile that opens the file picker for adding more items.\n     * @default 'fa fa-plus'\n     * @example\n     * <GalleryEditor addFileIcon=\"fa fa-image-circle-plus\" files={files} />\n     * @optional\n     */\n    addFileIcon?: string;\n    /**\n     * Provides already uploaded media items that should be merged into the editor state.\n     * @description\n     * These files represent the externally known uploaded baseline. The editor may additionally hold local pending uploads.\n     * @example\n     * <GalleryEditor files={files} />\n     * @optional\n     */\n    files?: FileItem[];\n    /**\n     * Controls whether the editor may load the final media assets immediately.\n     * @description\n     * When set to `true`, the editor behaves like the current implementation and loads the final media immediately.\n     * When set to `false`, uploaded media keeps rendering previews first and delays the final image load until this flag becomes `true`.\n     * @default true\n     * @example\n     * <GalleryEditor files={files} shouldLoadImages={false} />\n     * @optional\n     */\n    shouldLoadImages?: boolean;\n    /**\n     * Limits how many files can be managed by the editor.\n     * @description\n     * After the limit is reached, the add-tile is hidden and additional file selection is ignored.\n     * @example\n     * <GalleryEditor files={files} maxFiles={6} />\n     * @optional\n     */\n    maxFiles?: number;\n    /**\n     * Is called after a file has been uploaded successfully.\n     * @description\n     * The callback receives the uploaded file representation so the consuming state can persist it externally.\n     * @example\n     * <GalleryEditor onAdd={(file) => setFiles((prev) => [...prev, file])} />\n     * @optional\n     */\n    onAdd?: (file: FileItem) => void;\n    /**\n     * Is called whenever the internal item count changes, including local pending uploads.\n     * @description\n     * Use this callback when surrounding UI needs to react to the number of currently managed items.\n     * @example\n     * <GalleryEditor onFileCountChange={(count) => console.log(count)} />\n     * @optional\n     */\n    onFileCountChange?: (fileCount: number) => void;\n    /**\n     * Is called after an uploaded file has been removed.\n     * @description\n     * The callback receives the removed uploaded file so the consuming state can remove it from its controlled `files` array.\n     * @example\n     * <GalleryEditor onRemove={(file) => removeFile(file.id)} />\n     * @optional\n     */\n    onRemove?: (file: FileItem) => void;\n}\n\nexport type GalleryEditorRef = GalleryRef;\n"],"mappings":"","ignoreList":[]}

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

@@ -0,0 +1,17 @@
+export const mapExternalFilesIntoInternalItems = files => (files ?? []).map((file, index) => ({
+  id: file.id ?? file.file.id ?? file.file.url ?? `gallery-item-${index}`,
+  uploadedFile: file.file,
+  file: undefined,
+  state: 'uploaded',
+  previewUrl: undefined
+}));
+export const mergeExternalFilesWithInternalState = (internalItems, externalItems) => {
+  const mergedItems = internalItems.map(prevItem => {
+    const matchingItem = externalItems.find(item => item.uploadedFile && prevItem.uploadedFile && item.uploadedFile.url === prevItem.uploadedFile.url);
+    return matchingItem || prevItem;
+  });
+  return mergedItems.concat(externalItems.filter(newItem => !internalItems.some(prevItem => prevItem.uploadedFile && newItem.uploadedFile && prevItem.uploadedFile.url === newItem.uploadedFile.url)));
+};
+export const getPendingPreviewFileItems = fileItems => fileItems.filter(file => file.file && !file.previewUrl && (file.state === 'none' || !file.state));
+export const getPendingUploadFileItems = fileItems => fileItems.filter(file => file.file && !file.uploadedFile && file.state !== 'uploading');
+//# sourceMappingURL=GalleryEditor.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryEditor.utils.js","names":["mapExternalFilesIntoInternalItems","files","map","file","index","id","url","uploadedFile","undefined","state","previewUrl","mergeExternalFilesWithInternalState","internalItems","externalItems","mergedItems","prevItem","matchingItem","find","item","concat","filter","newItem","some","getPendingPreviewFileItems","fileItems","getPendingUploadFileItems"],"sources":["../../../../src/components/gallery-editor/GalleryEditor.utils.ts"],"sourcesContent":["import type { FileItem, InternalFileItem } from '@chayns-components/core';\n\nexport const mapExternalFilesIntoInternalItems = (files?: FileItem[]): InternalFileItem[] =>\n    (files ?? []).map((file, index) => ({\n        id: file.id ?? file.file.id ?? file.file.url ?? `gallery-item-${index}`,\n        uploadedFile: file.file,\n        file: undefined,\n        state: 'uploaded',\n        previewUrl: undefined,\n    }));\n\nexport const mergeExternalFilesWithInternalState = (\n    internalItems: InternalFileItem[],\n    externalItems: InternalFileItem[],\n): InternalFileItem[] => {\n    const mergedItems = internalItems.map((prevItem) => {\n        const matchingItem = externalItems.find(\n            (item) =>\n                item.uploadedFile &&\n                prevItem.uploadedFile &&\n                item.uploadedFile.url === prevItem.uploadedFile.url,\n        );\n\n        return matchingItem || prevItem;\n    });\n\n    return mergedItems.concat(\n        externalItems.filter(\n            (newItem) =>\n                !internalItems.some(\n                    (prevItem) =>\n                        prevItem.uploadedFile &&\n                        newItem.uploadedFile &&\n                        prevItem.uploadedFile.url === newItem.uploadedFile.url,\n                ),\n        ),\n    );\n};\n\nexport const getPendingPreviewFileItems = (fileItems: InternalFileItem[]) =>\n    fileItems.filter(\n        (file) => file.file && !file.previewUrl && (file.state === 'none' || !file.state),\n    );\n\nexport const getPendingUploadFileItems = (fileItems: InternalFileItem[]) =>\n    fileItems.filter((file) => file.file && !file.uploadedFile && file.state !== 'uploading');\n"],"mappings":"AAEA,OAAO,MAAMA,iCAAiC,GAAIC,KAAkB,IAChE,CAACA,KAAK,IAAI,EAAE,EAAEC,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,MAAM;EAChCC,EAAE,EAAEF,IAAI,CAACE,EAAE,IAAIF,IAAI,CAACA,IAAI,CAACE,EAAE,IAAIF,IAAI,CAACA,IAAI,CAACG,GAAG,IAAI,gBAAgBF,KAAK,EAAE;EACvEG,YAAY,EAAEJ,IAAI,CAACA,IAAI;EACvBA,IAAI,EAAEK,SAAS;EACfC,KAAK,EAAE,UAAU;EACjBC,UAAU,EAAEF;AAChB,CAAC,CAAC,CAAC;AAEP,OAAO,MAAMG,mCAAmC,GAAGA,CAC/CC,aAAiC,EACjCC,aAAiC,KACZ;EACrB,MAAMC,WAAW,GAAGF,aAAa,CAACV,GAAG,CAAEa,QAAQ,IAAK;IAChD,MAAMC,YAAY,GAAGH,aAAa,CAACI,IAAI,CAClCC,IAAI,IACDA,IAAI,CAACX,YAAY,IACjBQ,QAAQ,CAACR,YAAY,IACrBW,IAAI,CAACX,YAAY,CAACD,GAAG,KAAKS,QAAQ,CAACR,YAAY,CAACD,GACxD,CAAC;IAED,OAAOU,YAAY,IAAID,QAAQ;EACnC,CAAC,CAAC;EAEF,OAAOD,WAAW,CAACK,MAAM,CACrBN,aAAa,CAACO,MAAM,CACfC,OAAO,IACJ,CAACT,aAAa,CAACU,IAAI,CACdP,QAAQ,IACLA,QAAQ,CAACR,YAAY,IACrBc,OAAO,CAACd,YAAY,IACpBQ,QAAQ,CAACR,YAAY,CAACD,GAAG,KAAKe,OAAO,CAACd,YAAY,CAACD,GAC3D,CACR,CACJ,CAAC;AACL,CAAC;AAED,OAAO,MAAMiB,0BAA0B,GAAIC,SAA6B,IACpEA,SAAS,CAACJ,MAAM,CACXjB,IAAI,IAAKA,IAAI,CAACA,IAAI,IAAI,CAACA,IAAI,CAACO,UAAU,KAAKP,IAAI,CAACM,KAAK,KAAK,MAAM,IAAI,CAACN,IAAI,CAACM,KAAK,CACpF,CAAC;AAEL,OAAO,MAAMgB,yBAAyB,GAAID,SAA6B,IACnEA,SAAS,CAACJ,MAAM,CAAEjB,IAAI,IAAKA,IAAI,CAACA,IAAI,IAAI,CAACA,IAAI,CAACI,YAAY,IAAIJ,IAAI,CAACM,KAAK,KAAK,WAAW,CAAC","ignoreList":[]}

package/lib/esm/components/gallery-editor/add-file/AddFile.js

@@ -1,5 +1,5 @@
 import { Icon, selectFiles } from '@chayns-components/core';
-import React, { useCallback } from 'react';
+import React, { memo, useCallback } from 'react';
 import { StyledAddFile, StyledAddFIleIconWrapper } from './AddFile.styles';
 const AddFile = ({
   addFileIcon = 'fa fa-plus',
@@ -22,5 +22,5 @@ const AddFile = ({
   })));
 };
 AddFile.displayName = 'AddFile';
-export default AddFile;
+export default /*#__PURE__*/memo(AddFile);
 //# sourceMappingURL=AddFile.js.map

package/lib/esm/components/gallery-editor/add-file/AddFile.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddFile.js","names":["Icon","selectFiles","React","useCallback","StyledAddFile","StyledAddFIleIconWrapper","AddFile","addFileIcon","onAdd","openSelectDialog","files","multiple","type","createElement","key","onClick","size","icons","displayName"],"sources":["../../../../../src/components/gallery-editor/add-file/AddFile.tsx"],"sourcesContent":["import { Icon, selectFiles } from '@chayns-components/core';\nimport React, { FC, useCallback } from 'react';\nimport { StyledAddFile, StyledAddFIleIconWrapper } from './AddFile.styles';\nimport type { AddFileProps } from './AddFile.types';\n\nconst AddFile: FC<AddFileProps> = ({ addFileIcon = 'fa fa-plus', onAdd }) => {\n    const openSelectDialog = useCallback(async () => {\n        const files = await selectFiles({\n            multiple: true,\n            type: 'image/*, video/*',\n        });\n\n        onAdd(files);\n    }, [onAdd]);\n\n    return (\n        <StyledAddFile key=\"addButton\">\n            <StyledAddFIleIconWrapper onClick={() => void openSelectDialog()}>\n                <Icon size={40} icons={[addFileIcon]} />\n            </StyledAddFIleIconWrapper>\n        </StyledAddFile>\n    );\n};\n\nAddFile.displayName = 'AddFile';\n\nexport default AddFile;\n"],"mappings":"AAAA,SAASA,IAAI,EAAEC,WAAW,QAAQ,yBAAyB;AAC3D,OAAOC,KAAK,IAAQC,WAAW,QAAQ,OAAO;AAC9C,SAASC,aAAa,EAAEC,wBAAwB,QAAQ,kBAAkB;AAG1E,MAAMC,OAAyB,GAAGA,CAAC;EAAEC,WAAW,GAAG,YAAY;EAAEC;AAAM,CAAC,KAAK;EACzE,MAAMC,gBAAgB,GAAGN,WAAW,CAAC,YAAY;IAC7C,MAAMO,KAAK,GAAG,MAAMT,WAAW,CAAC;MAC5BU,QAAQ,EAAE,IAAI;MACdC,IAAI,EAAE;IACV,CAAC,CAAC;IAEFJ,KAAK,CAACE,KAAK,CAAC;EAChB,CAAC,EAAE,CAACF,KAAK,CAAC,CAAC;EAEX,oBACIN,KAAA,CAAAW,aAAA,CAACT,aAAa;IAACU,GAAG,EAAC;EAAW,gBAC1BZ,KAAA,CAAAW,aAAA,CAACR,wBAAwB;IAACU,OAAO,EAAEA,CAAA,KAAM,KAAKN,gBAAgB,CAAC;EAAE,gBAC7DP,KAAA,CAAAW,aAAA,CAACb,IAAI;IAACgB,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAACV,WAAW;EAAE,CAAE,CACjB,CACf,CAAC;AAExB,CAAC;AAEDD,OAAO,CAACY,WAAW,GAAG,SAAS;AAE/B,eAAeZ,OAAO","ignoreList":[]}
+{"version":3,"file":"AddFile.js","names":["Icon","selectFiles","React","memo","useCallback","StyledAddFile","StyledAddFIleIconWrapper","AddFile","addFileIcon","onAdd","openSelectDialog","files","multiple","type","createElement","key","onClick","size","icons","displayName"],"sources":["../../../../../src/components/gallery-editor/add-file/AddFile.tsx"],"sourcesContent":["import { Icon, selectFiles } from '@chayns-components/core';\nimport React, { FC, memo, useCallback } from 'react';\nimport { StyledAddFile, StyledAddFIleIconWrapper } from './AddFile.styles';\nimport type { AddFileProps } from './AddFile.types';\n\nconst AddFile: FC<AddFileProps> = ({ addFileIcon = 'fa fa-plus', onAdd }) => {\n    const openSelectDialog = useCallback(async () => {\n        const files = await selectFiles({\n            multiple: true,\n            type: 'image/*, video/*',\n        });\n\n        onAdd(files);\n    }, [onAdd]);\n\n    return (\n        <StyledAddFile key=\"addButton\">\n            <StyledAddFIleIconWrapper onClick={() => void openSelectDialog()}>\n                <Icon size={40} icons={[addFileIcon]} />\n            </StyledAddFIleIconWrapper>\n        </StyledAddFile>\n    );\n};\n\nAddFile.displayName = 'AddFile';\n\nexport default memo(AddFile);\n"],"mappings":"AAAA,SAASA,IAAI,EAAEC,WAAW,QAAQ,yBAAyB;AAC3D,OAAOC,KAAK,IAAQC,IAAI,EAAEC,WAAW,QAAQ,OAAO;AACpD,SAASC,aAAa,EAAEC,wBAAwB,QAAQ,kBAAkB;AAG1E,MAAMC,OAAyB,GAAGA,CAAC;EAAEC,WAAW,GAAG,YAAY;EAAEC;AAAM,CAAC,KAAK;EACzE,MAAMC,gBAAgB,GAAGN,WAAW,CAAC,YAAY;IAC7C,MAAMO,KAAK,GAAG,MAAMV,WAAW,CAAC;MAC5BW,QAAQ,EAAE,IAAI;MACdC,IAAI,EAAE;IACV,CAAC,CAAC;IAEFJ,KAAK,CAACE,KAAK,CAAC;EAChB,CAAC,EAAE,CAACF,KAAK,CAAC,CAAC;EAEX,oBACIP,KAAA,CAAAY,aAAA,CAACT,aAAa;IAACU,GAAG,EAAC;EAAW,gBAC1Bb,KAAA,CAAAY,aAAA,CAACR,wBAAwB;IAACU,OAAO,EAAEA,CAAA,KAAM,KAAKN,gBAAgB,CAAC;EAAE,gBAC7DR,KAAA,CAAAY,aAAA,CAACd,IAAI;IAACiB,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAACV,WAAW;EAAE,CAAE,CACjB,CACf,CAAC;AAExB,CAAC;AAEDD,OAAO,CAACY,WAAW,GAAG,SAAS;AAE/B,4BAAehB,IAAI,CAACI,OAAO,CAAC","ignoreList":[]}

package/lib/esm/components/gallery-editor/gallery-editor-item/GalleryEditorItem.js

@@ -1,34 +1,62 @@
 import { Icon } from '@chayns-components/core';
-import { AnimatePresence } from 'motion/react';
-import React from 'react';
-import { StyledGalleryEditorItem, StyledGalleryEditorItemDeleteButton } from './GalleryEditorItem.styles';
+import React, { memo } from 'react';
+import { StyledMotionGalleryEditorItem, StyledGalleryEditorItemDeleteButton } from './GalleryEditorItem.styles';
 import GalleryEditorMediaItem from './gallery-editor-media-item/GalleryEditorMediaItem';
 import GalleryEditorPreviewItem from './gallery-editor-preview-item/GalleryEditorPreviewItem';
+import { GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX, GALLERY_EDITOR_ITEM_FADE_DURATION_S } from '../GalleryEditor.constants';
 const GalleryEditorItem = ({
   fileItem,
   handleDeleteFile,
+  shouldLoadImages = true,
   ratio = 1,
   onClick
 }) => {
-  const mediaContent = !fileItem.state || fileItem.state === 'none' || !fileItem.previewUrl && !fileItem.uploadedFile ? null : fileItem.state === 'uploading' ? /*#__PURE__*/React.createElement(GalleryEditorPreviewItem, {
-    ratio: ratio,
-    key: `uploading_${fileItem.id ?? ''}`,
-    fileItem: fileItem
-  }) : /*#__PURE__*/React.createElement(GalleryEditorMediaItem, {
-    key: `uploaded_${fileItem.id ?? ''}`,
-    fileItem: fileItem,
-    ratio: ratio,
-    openSelectedFile: onClick
-  });
-  return /*#__PURE__*/React.createElement(StyledGalleryEditorItem, null, /*#__PURE__*/React.createElement(StyledGalleryEditorItemDeleteButton, {
-    onClick: () => handleDeleteFile(fileItem.id)
+  const shouldRenderPreview = fileItem.state === 'uploading';
+  const shouldRenderMedia = fileItem.state !== 'none' && (Boolean(fileItem.previewUrl) || Boolean(fileItem.uploadedFile));
+  let mediaContent = null;
+  if (shouldRenderPreview) {
+    mediaContent = /*#__PURE__*/React.createElement(GalleryEditorPreviewItem, {
+      ratio: ratio,
+      fileItem: fileItem
+    });
+  } else if (shouldRenderMedia) {
+    mediaContent = /*#__PURE__*/React.createElement(GalleryEditorMediaItem, {
+      fileItem: fileItem,
+      ratio: ratio,
+      openSelectedFile: onClick,
+      previewUrl: fileItem.previewUrl,
+      shouldLoadImages: shouldLoadImages
+    });
+  }
+  return /*#__PURE__*/React.createElement(StyledMotionGalleryEditorItem, {
+    initial: {
+      opacity: 0,
+      scale: 0.98
+    },
+    animate: {
+      opacity: 1,
+      scale: 1
+    },
+    exit: {
+      opacity: 0,
+      scale: 0.98
+    },
+    transition: {
+      duration: GALLERY_EDITOR_ITEM_FADE_DURATION_S
+    }
+  }, mediaContent, /*#__PURE__*/React.createElement(StyledGalleryEditorItemDeleteButton, {
+    type: "button",
+    onClick: event => {
+      event.stopPropagation();
+      handleDeleteFile(fileItem.id);
+    },
+    $zIndex: GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX,
+    "aria-label": "Bild entfernen"
   }, /*#__PURE__*/React.createElement(Icon, {
     size: 20,
     icons: ['ts-wrong']
-  })), /*#__PURE__*/React.createElement(AnimatePresence, {
-    initial: false
-  }, mediaContent));
+  })));
 };
 GalleryEditorItem.displayName = 'GalleryEditorItem';
-export default GalleryEditorItem;
+export default /*#__PURE__*/memo(GalleryEditorItem);
 //# sourceMappingURL=GalleryEditorItem.js.map

package/lib/esm/components/gallery-editor/gallery-editor-item/GalleryEditorItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryEditorItem.js","names":["Icon","AnimatePresence","React","StyledGalleryEditorItem","StyledGalleryEditorItemDeleteButton","GalleryEditorMediaItem","GalleryEditorPreviewItem","GalleryEditorItem","fileItem","handleDeleteFile","ratio","onClick","mediaContent","state","previewUrl","uploadedFile","createElement","key","id","openSelectedFile","size","icons","initial","displayName"],"sources":["../../../../../src/components/gallery-editor/gallery-editor-item/GalleryEditorItem.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport { AnimatePresence } from 'motion/react';\nimport React, { FC } from 'react';\nimport {\n    StyledGalleryEditorItem,\n    StyledGalleryEditorItemDeleteButton,\n} from './GalleryEditorItem.styles';\nimport GalleryEditorMediaItem from './gallery-editor-media-item/GalleryEditorMediaItem';\nimport GalleryEditorPreviewItem from './gallery-editor-preview-item/GalleryEditorPreviewItem';\nimport type { GalleryEditorItemProps } from './GalleryEditorItem.types';\n\nconst GalleryEditorItem: FC<GalleryEditorItemProps> = ({\n    fileItem,\n    handleDeleteFile,\n    ratio = 1,\n    onClick,\n}) => {\n    const mediaContent =\n        !fileItem.state ||\n        fileItem.state === 'none' ||\n        (!fileItem.previewUrl && !fileItem.uploadedFile) ? null : fileItem.state === 'uploading' ? (\n            <GalleryEditorPreviewItem\n                ratio={ratio}\n                key={`uploading_${fileItem.id ?? ''}`}\n                fileItem={fileItem}\n            />\n        ) : (\n            <GalleryEditorMediaItem\n                key={`uploaded_${fileItem.id ?? ''}`}\n                fileItem={fileItem}\n                ratio={ratio}\n                openSelectedFile={onClick}\n            />\n        );\n\n    return (\n        <StyledGalleryEditorItem>\n            <StyledGalleryEditorItemDeleteButton onClick={() => handleDeleteFile(fileItem.id)}>\n                <Icon size={20} icons={['ts-wrong']} />\n            </StyledGalleryEditorItemDeleteButton>\n            <AnimatePresence initial={false}>{mediaContent}</AnimatePresence>\n        </StyledGalleryEditorItem>\n    );\n};\n\nGalleryEditorItem.displayName = 'GalleryEditorItem';\n\nexport default GalleryEditorItem;\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,yBAAyB;AAC9C,SAASC,eAAe,QAAQ,cAAc;AAC9C,OAAOC,KAAK,MAAc,OAAO;AACjC,SACIC,uBAAuB,EACvBC,mCAAmC,QAChC,4BAA4B;AACnC,OAAOC,sBAAsB,MAAM,oDAAoD;AACvF,OAAOC,wBAAwB,MAAM,wDAAwD;AAG7F,MAAMC,iBAA6C,GAAGA,CAAC;EACnDC,QAAQ;EACRC,gBAAgB;EAChBC,KAAK,GAAG,CAAC;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,YAAY,GACd,CAACJ,QAAQ,CAACK,KAAK,IACfL,QAAQ,CAACK,KAAK,KAAK,MAAM,IACxB,CAACL,QAAQ,CAACM,UAAU,IAAI,CAACN,QAAQ,CAACO,YAAa,GAAG,IAAI,GAAGP,QAAQ,CAACK,KAAK,KAAK,WAAW,gBACpFX,KAAA,CAAAc,aAAA,CAACV,wBAAwB;IACrBI,KAAK,EAAEA,KAAM;IACbO,GAAG,EAAE,aAAaT,QAAQ,CAACU,EAAE,IAAI,EAAE,EAAG;IACtCV,QAAQ,EAAEA;EAAS,CACtB,CAAC,gBAEFN,KAAA,CAAAc,aAAA,CAACX,sBAAsB;IACnBY,GAAG,EAAE,YAAYT,QAAQ,CAACU,EAAE,IAAI,EAAE,EAAG;IACrCV,QAAQ,EAAEA,QAAS;IACnBE,KAAK,EAAEA,KAAM;IACbS,gBAAgB,EAAER;EAAQ,CAC7B,CACJ;EAEL,oBACIT,KAAA,CAAAc,aAAA,CAACb,uBAAuB,qBACpBD,KAAA,CAAAc,aAAA,CAACZ,mCAAmC;IAACO,OAAO,EAAEA,CAAA,KAAMF,gBAAgB,CAACD,QAAQ,CAACU,EAAE;EAAE,gBAC9EhB,KAAA,CAAAc,aAAA,CAAChB,IAAI;IAACoB,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC,UAAU;EAAE,CAAE,CACL,CAAC,eACtCnB,KAAA,CAAAc,aAAA,CAACf,eAAe;IAACqB,OAAO,EAAE;EAAM,GAAEV,YAA8B,CAC3C,CAAC;AAElC,CAAC;AAEDL,iBAAiB,CAACgB,WAAW,GAAG,mBAAmB;AAEnD,eAAehB,iBAAiB","ignoreList":[]}
+{"version":3,"file":"GalleryEditorItem.js","names":["Icon","React","memo","StyledMotionGalleryEditorItem","StyledGalleryEditorItemDeleteButton","GalleryEditorMediaItem","GalleryEditorPreviewItem","GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX","GALLERY_EDITOR_ITEM_FADE_DURATION_S","GalleryEditorItem","fileItem","handleDeleteFile","shouldLoadImages","ratio","onClick","shouldRenderPreview","state","shouldRenderMedia","Boolean","previewUrl","uploadedFile","mediaContent","createElement","openSelectedFile","initial","opacity","scale","animate","exit","transition","duration","type","event","stopPropagation","id","$zIndex","size","icons","displayName"],"sources":["../../../../../src/components/gallery-editor/gallery-editor-item/GalleryEditorItem.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport React, { FC, ReactNode, memo } from 'react';\nimport {\n    StyledMotionGalleryEditorItem,\n    StyledGalleryEditorItemDeleteButton,\n} from './GalleryEditorItem.styles';\nimport GalleryEditorMediaItem from './gallery-editor-media-item/GalleryEditorMediaItem';\nimport GalleryEditorPreviewItem from './gallery-editor-preview-item/GalleryEditorPreviewItem';\nimport type { GalleryEditorItemProps } from './GalleryEditorItem.types';\nimport {\n    GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX,\n    GALLERY_EDITOR_ITEM_FADE_DURATION_S,\n} from '../GalleryEditor.constants';\n\nconst GalleryEditorItem: FC<GalleryEditorItemProps> = ({\n    fileItem,\n    handleDeleteFile,\n    shouldLoadImages = true,\n    ratio = 1,\n    onClick,\n}) => {\n    const shouldRenderPreview = fileItem.state === 'uploading';\n    const shouldRenderMedia =\n        fileItem.state !== 'none' &&\n        (Boolean(fileItem.previewUrl) || Boolean(fileItem.uploadedFile));\n\n    let mediaContent: ReactNode = null;\n\n    if (shouldRenderPreview) {\n        mediaContent = <GalleryEditorPreviewItem ratio={ratio} fileItem={fileItem} />;\n    } else if (shouldRenderMedia) {\n        mediaContent = (\n            <GalleryEditorMediaItem\n                fileItem={fileItem}\n                ratio={ratio}\n                openSelectedFile={onClick}\n                previewUrl={fileItem.previewUrl}\n                shouldLoadImages={shouldLoadImages}\n            />\n        );\n    }\n\n    return (\n        <StyledMotionGalleryEditorItem\n            initial={{ opacity: 0, scale: 0.98 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.98 }}\n            transition={{ duration: GALLERY_EDITOR_ITEM_FADE_DURATION_S }}\n        >\n            {mediaContent}\n            <StyledGalleryEditorItemDeleteButton\n                type=\"button\"\n                onClick={(event) => {\n                    event.stopPropagation();\n                    handleDeleteFile(fileItem.id);\n                }}\n                $zIndex={GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX}\n                aria-label=\"Bild entfernen\"\n            >\n                <Icon size={20} icons={['ts-wrong']} />\n            </StyledGalleryEditorItemDeleteButton>\n        </StyledMotionGalleryEditorItem>\n    );\n};\n\nGalleryEditorItem.displayName = 'GalleryEditorItem';\n\nexport default memo(GalleryEditorItem);\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,yBAAyB;AAC9C,OAAOC,KAAK,IAAmBC,IAAI,QAAQ,OAAO;AAClD,SACIC,6BAA6B,EAC7BC,mCAAmC,QAChC,4BAA4B;AACnC,OAAOC,sBAAsB,MAAM,oDAAoD;AACvF,OAAOC,wBAAwB,MAAM,wDAAwD;AAE7F,SACIC,oCAAoC,EACpCC,mCAAmC,QAChC,4BAA4B;AAEnC,MAAMC,iBAA6C,GAAGA,CAAC;EACnDC,QAAQ;EACRC,gBAAgB;EAChBC,gBAAgB,GAAG,IAAI;EACvBC,KAAK,GAAG,CAAC;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,mBAAmB,GAAGL,QAAQ,CAACM,KAAK,KAAK,WAAW;EAC1D,MAAMC,iBAAiB,GACnBP,QAAQ,CAACM,KAAK,KAAK,MAAM,KACxBE,OAAO,CAACR,QAAQ,CAACS,UAAU,CAAC,IAAID,OAAO,CAACR,QAAQ,CAACU,YAAY,CAAC,CAAC;EAEpE,IAAIC,YAAuB,GAAG,IAAI;EAElC,IAAIN,mBAAmB,EAAE;IACrBM,YAAY,gBAAGpB,KAAA,CAAAqB,aAAA,CAAChB,wBAAwB;MAACO,KAAK,EAAEA,KAAM;MAACH,QAAQ,EAAEA;IAAS,CAAE,CAAC;EACjF,CAAC,MAAM,IAAIO,iBAAiB,EAAE;IAC1BI,YAAY,gBACRpB,KAAA,CAAAqB,aAAA,CAACjB,sBAAsB;MACnBK,QAAQ,EAAEA,QAAS;MACnBG,KAAK,EAAEA,KAAM;MACbU,gBAAgB,EAAET,OAAQ;MAC1BK,UAAU,EAAET,QAAQ,CAACS,UAAW;MAChCP,gBAAgB,EAAEA;IAAiB,CACtC,CACJ;EACL;EAEA,oBACIX,KAAA,CAAAqB,aAAA,CAACnB,6BAA6B;IAC1BqB,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAK,CAAE;IACrCC,OAAO,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAE;IAClCE,IAAI,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAK,CAAE;IAClCG,UAAU,EAAE;MAAEC,QAAQ,EAAEtB;IAAoC;EAAE,GAE7Da,YAAY,eACbpB,KAAA,CAAAqB,aAAA,CAAClB,mCAAmC;IAChC2B,IAAI,EAAC,QAAQ;IACbjB,OAAO,EAAGkB,KAAK,IAAK;MAChBA,KAAK,CAACC,eAAe,CAAC,CAAC;MACvBtB,gBAAgB,CAACD,QAAQ,CAACwB,EAAE,CAAC;IACjC,CAAE;IACFC,OAAO,EAAE5B,oCAAqC;IAC9C,cAAW;EAAgB,gBAE3BN,KAAA,CAAAqB,aAAA,CAACtB,IAAI;IAACoC,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC,UAAU;EAAE,CAAE,CACL,CACV,CAAC;AAExC,CAAC;AAED5B,iBAAiB,CAAC6B,WAAW,GAAG,mBAAmB;AAEnD,4BAAepC,IAAI,CAACO,iBAAiB,CAAC","ignoreList":[]}

package/lib/esm/components/gallery-editor/gallery-editor-item/GalleryEditorItem.styles.js

@@ -1,9 +1,11 @@
+import { motion } from 'motion/react';
 import styled from 'styled-components';
-export const StyledGalleryEditorItem = styled.div`
+export const StyledMotionGalleryEditorItem = styled(motion.div)`
     display: flex;
     position: relative;
     height: 100%;
     width: 100%;
+    overflow: hidden;
 `;
 export const StyledGalleryEditorItemDeleteButton = styled.button`
     background-color: rgba(
@@ -20,9 +22,14 @@ export const StyledGalleryEditorItemDeleteButton = styled.button`
     position: absolute;
     top: 0;
     right: 0;
-    z-index: 2;
+    z-index: ${({
+  $zIndex
+}) => $zIndex};
     height: 30px;
     width: 30px;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;

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

@@ -1 +1 @@
-{"version":3,"file":"GalleryEditorItem.styles.js","names":["styled","StyledGalleryEditorItem","div","StyledGalleryEditorItemDeleteButton","button","theme"],"sources":["../../../../../src/components/gallery-editor/gallery-editor-item/GalleryEditorItem.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledGalleryEditorItem = styled.div`\n    display: flex;\n    position: relative;\n    height: 100%;\n    width: 100%;\n`;\n\ntype StyledGalleryEditorItemDeleteButtonProps = WithTheme<unknown>;\n\nexport const StyledGalleryEditorItemDeleteButton = styled.button<StyledGalleryEditorItemDeleteButtonProps>`\n    background-color: rgba(\n        ${({ theme }: StyledGalleryEditorItemDeleteButtonProps) => theme['000-rgb']},\n        0.75\n    );\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledGalleryEditorItemDeleteButtonProps) => theme['009-rgb']}, 0.08)\n        inset;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 2;\n    height: 30px;\n    width: 30px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACE,GAAG;AACjD;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mCAAmC,GAAGH,MAAM,CAACI,MAAgD;AAC1G;AACA,UAAU,CAAC;EAAEC;AAAgD,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACnF;AACA;AACA;AACA,eAAe,CAAC;EAAEA;AAAgD,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACxF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"GalleryEditorItem.styles.js","names":["motion","styled","StyledMotionGalleryEditorItem","div","StyledGalleryEditorItemDeleteButton","button","theme","$zIndex"],"sources":["../../../../../src/components/gallery-editor/gallery-editor-item/GalleryEditorItem.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionGalleryEditorItem = styled(motion.div)`\n    display: flex;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n`;\n\ntype StyledGalleryEditorItemDeleteButtonProps = WithTheme<unknown>;\n\nexport const StyledGalleryEditorItemDeleteButton = styled.button<\n    StyledGalleryEditorItemDeleteButtonProps & {\n        $zIndex: number;\n    }\n>`\n    background-color: rgba(\n        ${({ theme }: StyledGalleryEditorItemDeleteButtonProps) => theme['000-rgb']},\n        0.75\n    );\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledGalleryEditorItemDeleteButtonProps) => theme['009-rgb']}, 0.08)\n        inset;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: ${({ $zIndex }) => $zIndex};\n    height: 30px;\n    width: 30px;\n    border: 0;\n    padding: 0;\n    cursor: pointer;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,6BAA6B,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC;AAC/D;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mCAAmC,GAAGH,MAAM,CAACI,MAIzD;AACD;AACA,UAAU,CAAC;EAAEC;AAAgD,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACnF;AACA;AACA;AACA,eAAe,CAAC;EAAEA;AAAgD,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACxF;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/gallery-editor/gallery-editor-item/GalleryEditorItem.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryEditorItem.types.js","names":[],"sources":["../../../../../src/components/gallery-editor/gallery-editor-item/GalleryEditorItem.types.ts"],"sourcesContent":["import type { InternalFileItem } from '@chayns-components/core';\n\n/**\n * Props for a single editable gallery tile.\n */\nexport interface GalleryEditorItemProps {\n    /**\n     * Provides the media item that should be rendered inside the tile.\n     * @description\n     * The item may represent a pending local upload or an already uploaded media file managed by the editor.\n     * @example\n     * <GalleryEditorItem fileItem={fileItem} handleDeleteFile={handleDeleteFile} onClick={handleOpen} />\n     */\n    fileItem: InternalFileItem;\n    /**\n     * Is called when the delete button is clicked in edit mode.\n     * @description\n     * The callback receives the internal item identifier so the editor can remove the item from its local state.\n     * @example\n     * <GalleryEditorItem handleDeleteFile={(id) => console.log(id)} fileItem={fileItem} onClick={handleOpen} />\n     */\n    handleDeleteFile: (id?: string) => void;\n    /**\n     * Defines the aspect ratio that should be reserved for the rendered media.\n     * @description\n     * Use this when the editor item should reserve a fixed tile ratio for uploaded previews.\n     * @default 1\n     * @example\n     * <GalleryEditorItem fileItem={fileItem} handleDeleteFile={handleDeleteFile} onClick={handleOpen} ratio={1.5} />\n     * @optional\n     */\n    ratio?: number;\n    /**\n     * Is called when the tile is clicked.\n     * @description\n     * The editor uses this callback to open the currently selected media within the slideshow flow.\n     * @example\n     * <GalleryEditorItem fileItem={fileItem} handleDeleteFile={handleDeleteFile} onClick={handleOpen} />\n     */\n    onClick: (file: InternalFileItem) => void;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"GalleryEditorItem.types.js","names":[],"sources":["../../../../../src/components/gallery-editor/gallery-editor-item/GalleryEditorItem.types.ts"],"sourcesContent":["import type { InternalFileItem } from '@chayns-components/core';\n\n/**\n * Props for a single editable gallery tile.\n */\nexport interface GalleryEditorItemProps {\n    /**\n     * Provides the media item that should be rendered inside the tile.\n     * @description\n     * The item may represent a pending local upload or an already uploaded media file managed by the editor.\n     * @example\n     * <GalleryEditorItem fileItem={fileItem} handleDeleteFile={handleDeleteFile} onClick={handleOpen} />\n     */\n    fileItem: InternalFileItem;\n    /**\n     * Controls whether the item may load the final media source immediately.\n     * @description\n     * The item forwards this flag to the shared media renderer so uploaded media can stay on the preview until loading is allowed.\n     * @default true\n     * @optional\n     */\n    shouldLoadImages?: boolean;\n    /**\n     * Is called when the delete button is clicked in edit mode.\n     * @description\n     * The callback receives the internal item identifier so the editor can remove the item from its local state.\n     * @example\n     * <GalleryEditorItem handleDeleteFile={(id) => console.log(id)} fileItem={fileItem} onClick={handleOpen} />\n     */\n    handleDeleteFile: (id?: string) => void;\n    /**\n     * Defines the aspect ratio that should be reserved for the rendered media.\n     * @description\n     * Use this when the editor item should reserve a fixed tile ratio for uploaded previews.\n     * @default 1\n     * @example\n     * <GalleryEditorItem fileItem={fileItem} handleDeleteFile={handleDeleteFile} onClick={handleOpen} ratio={1.5} />\n     * @optional\n     */\n    ratio?: number;\n    /**\n     * Is called when the tile is clicked.\n     * @description\n     * The editor uses this callback to open the currently selected media within the slideshow flow.\n     * @example\n     * <GalleryEditorItem fileItem={fileItem} handleDeleteFile={handleDeleteFile} onClick={handleOpen} />\n     */\n    onClick: (file: InternalFileItem) => void;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.js

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { memo } from 'react';
 import MediaContent from '../../../media-content/MediaContent';
 import { StyledMotionGalleryEditorMediaItem } from './GalleryEditorMediaItem.styles';
+import { GALLERY_EDITOR_MEDIA_FADE_DURATION_S } from '../../GalleryEditor.constants';
 const GalleryEditorMediaItem = ({
   fileItem,
   openSelectedFile,
+  previewUrl,
+  shouldLoadImages = true,
   ratio
 }) => /*#__PURE__*/React.createElement(StyledMotionGalleryEditorMediaItem, {
   animate: {
@@ -16,14 +19,16 @@ const GalleryEditorMediaItem = ({
     opacity: 0
   },
   transition: {
-    duration: 3.2
+    duration: GALLERY_EDITOR_MEDIA_FADE_DURATION_S
   }
 }, fileItem.uploadedFile && /*#__PURE__*/React.createElement(MediaContent, {
   file: fileItem.uploadedFile,
   onClick: () => openSelectedFile(fileItem),
   playIconSize: 30,
-  ratio: ratio
+  previewUrl: previewUrl,
+  ratio: ratio,
+  shouldLoadImages: shouldLoadImages
 }));
 GalleryEditorMediaItem.displayName = 'GalleryEditorMediaItem';
-export default GalleryEditorMediaItem;
+export default /*#__PURE__*/memo(GalleryEditorMediaItem);
 //# sourceMappingURL=GalleryEditorMediaItem.js.map

package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryEditorMediaItem.js","names":["React","MediaContent","StyledMotionGalleryEditorMediaItem","GalleryEditorMediaItem","fileItem","openSelectedFile","ratio","createElement","animate","opacity","initial","exit","transition","duration","uploadedFile","file","onClick","playIconSize","displayName"],"sources":["../../../../../../src/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport MediaContent from '../../../media-content/MediaContent';\nimport { StyledMotionGalleryEditorMediaItem } from './GalleryEditorMediaItem.styles';\nimport type { GalleryEditorMediaItemProps } from './GalleryEditorMediaItem.types';\n\nconst GalleryEditorMediaItem: FC<GalleryEditorMediaItemProps> = ({\n    fileItem,\n    openSelectedFile,\n    ratio,\n}) => (\n    <StyledMotionGalleryEditorMediaItem\n        animate={{ opacity: 1 }}\n        initial={{ opacity: 0 }}\n        exit={{ opacity: 0 }}\n        transition={{ duration: 3.2 }}\n    >\n        {fileItem.uploadedFile && (\n            <MediaContent\n                file={fileItem.uploadedFile}\n                onClick={() => openSelectedFile(fileItem)}\n                playIconSize={30}\n                ratio={ratio}\n            />\n        )}\n    </StyledMotionGalleryEditorMediaItem>\n);\n\nGalleryEditorMediaItem.displayName = 'GalleryEditorMediaItem';\n\nexport default GalleryEditorMediaItem;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAc,OAAO;AACjC,OAAOC,YAAY,MAAM,qCAAqC;AAC9D,SAASC,kCAAkC,QAAQ,iCAAiC;AAGpF,MAAMC,sBAAuD,GAAGA,CAAC;EAC7DC,QAAQ;EACRC,gBAAgB;EAChBC;AACJ,CAAC,kBACGN,KAAA,CAAAO,aAAA,CAACL,kCAAkC;EAC/BM,OAAO,EAAE;IAAEC,OAAO,EAAE;EAAE,CAAE;EACxBC,OAAO,EAAE;IAAED,OAAO,EAAE;EAAE,CAAE;EACxBE,IAAI,EAAE;IAAEF,OAAO,EAAE;EAAE,CAAE;EACrBG,UAAU,EAAE;IAAEC,QAAQ,EAAE;EAAI;AAAE,GAE7BT,QAAQ,CAACU,YAAY,iBAClBd,KAAA,CAAAO,aAAA,CAACN,YAAY;EACTc,IAAI,EAAEX,QAAQ,CAACU,YAAa;EAC5BE,OAAO,EAAEA,CAAA,KAAMX,gBAAgB,CAACD,QAAQ,CAAE;EAC1Ca,YAAY,EAAE,EAAG;EACjBX,KAAK,EAAEA;AAAM,CAChB,CAE2B,CACvC;AAEDH,sBAAsB,CAACe,WAAW,GAAG,wBAAwB;AAE7D,eAAef,sBAAsB","ignoreList":[]}
+{"version":3,"file":"GalleryEditorMediaItem.js","names":["React","memo","MediaContent","StyledMotionGalleryEditorMediaItem","GALLERY_EDITOR_MEDIA_FADE_DURATION_S","GalleryEditorMediaItem","fileItem","openSelectedFile","previewUrl","shouldLoadImages","ratio","createElement","animate","opacity","initial","exit","transition","duration","uploadedFile","file","onClick","playIconSize","displayName"],"sources":["../../../../../../src/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.tsx"],"sourcesContent":["import React, { FC, memo } from 'react';\nimport MediaContent from '../../../media-content/MediaContent';\nimport { StyledMotionGalleryEditorMediaItem } from './GalleryEditorMediaItem.styles';\nimport type { GalleryEditorMediaItemProps } from './GalleryEditorMediaItem.types';\nimport { GALLERY_EDITOR_MEDIA_FADE_DURATION_S } from '../../GalleryEditor.constants';\n\nconst GalleryEditorMediaItem: FC<GalleryEditorMediaItemProps> = ({\n    fileItem,\n    openSelectedFile,\n    previewUrl,\n    shouldLoadImages = true,\n    ratio,\n}) => (\n    <StyledMotionGalleryEditorMediaItem\n        animate={{ opacity: 1 }}\n        initial={{ opacity: 0 }}\n        exit={{ opacity: 0 }}\n        transition={{ duration: GALLERY_EDITOR_MEDIA_FADE_DURATION_S }}\n    >\n        {fileItem.uploadedFile && (\n            <MediaContent\n                file={fileItem.uploadedFile}\n                onClick={() => openSelectedFile(fileItem)}\n                playIconSize={30}\n                previewUrl={previewUrl}\n                ratio={ratio}\n                shouldLoadImages={shouldLoadImages}\n            />\n        )}\n    </StyledMotionGalleryEditorMediaItem>\n);\n\nGalleryEditorMediaItem.displayName = 'GalleryEditorMediaItem';\n\nexport default memo(GalleryEditorMediaItem);\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,IAAI,QAAQ,OAAO;AACvC,OAAOC,YAAY,MAAM,qCAAqC;AAC9D,SAASC,kCAAkC,QAAQ,iCAAiC;AAEpF,SAASC,oCAAoC,QAAQ,+BAA+B;AAEpF,MAAMC,sBAAuD,GAAGA,CAAC;EAC7DC,QAAQ;EACRC,gBAAgB;EAChBC,UAAU;EACVC,gBAAgB,GAAG,IAAI;EACvBC;AACJ,CAAC,kBACGV,KAAA,CAAAW,aAAA,CAACR,kCAAkC;EAC/BS,OAAO,EAAE;IAAEC,OAAO,EAAE;EAAE,CAAE;EACxBC,OAAO,EAAE;IAAED,OAAO,EAAE;EAAE,CAAE;EACxBE,IAAI,EAAE;IAAEF,OAAO,EAAE;EAAE,CAAE;EACrBG,UAAU,EAAE;IAAEC,QAAQ,EAAEb;EAAqC;AAAE,GAE9DE,QAAQ,CAACY,YAAY,iBAClBlB,KAAA,CAAAW,aAAA,CAACT,YAAY;EACTiB,IAAI,EAAEb,QAAQ,CAACY,YAAa;EAC5BE,OAAO,EAAEA,CAAA,KAAMb,gBAAgB,CAACD,QAAQ,CAAE;EAC1Ce,YAAY,EAAE,EAAG;EACjBb,UAAU,EAAEA,UAAW;EACvBE,KAAK,EAAEA,KAAM;EACbD,gBAAgB,EAAEA;AAAiB,CACtC,CAE2B,CACvC;AAEDJ,sBAAsB,CAACiB,WAAW,GAAG,wBAAwB;AAE7D,4BAAerB,IAAI,CAACI,sBAAsB,CAAC","ignoreList":[]}

package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryEditorMediaItem.types.js","names":[],"sources":["../../../../../../src/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.types.ts"],"sourcesContent":["import type { InternalFileItem } from '@chayns-components/core';\n\n/**\n * Props for a rendered uploaded media item.\n */\nexport interface GalleryEditorMediaItemProps {\n    /**\n     * Provides the uploaded media item that should be rendered.\n     * @description\n     * This item is expected to contain an `uploadedFile` because pending uploads are rendered by the preview component instead.\n     * @example\n     * <GalleryEditorMediaItem fileItem={fileItem} onClick={handleOpen} ratio={1} />\n     */\n    fileItem: InternalFileItem;\n    /**\n     * Is called when the media tile is selected.\n     * @description\n     * The editor uses this callback to open the uploaded media in the slideshow flow.\n     * @example\n     * <GalleryEditorMediaItem fileItem={fileItem} openSelectedFile={handleOpen} ratio={1} />\n     */\n    openSelectedFile: (file: InternalFileItem) => void;\n    /**\n     * Defines the aspect ratio that should be reserved for the media.\n     * @description\n     * The media tile keeps this ratio reserved so the editor grid remains visually stable.\n     * @example\n     * <GalleryEditorMediaItem fileItem={fileItem} openSelectedFile={handleOpen} ratio={1.5} />\n     */\n    ratio: number;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"GalleryEditorMediaItem.types.js","names":[],"sources":["../../../../../../src/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.types.ts"],"sourcesContent":["import type { InternalFileItem } from '@chayns-components/core';\n\n/**\n * Props for a rendered uploaded media item.\n */\nexport interface GalleryEditorMediaItemProps {\n    /**\n     * Provides the uploaded media item that should be rendered.\n     * @description\n     * This item is expected to contain an `uploadedFile` because pending uploads are rendered by the preview component instead.\n     * @example\n     * <GalleryEditorMediaItem fileItem={fileItem} onClick={handleOpen} ratio={1} />\n     */\n    fileItem: InternalFileItem;\n    /**\n     * Controls whether the media renderer may load the final uploaded source immediately.\n     * @description\n     * When disabled, the shared media renderer keeps showing the preview until the parent gallery allows the final load.\n     * @default true\n     * @optional\n     */\n    shouldLoadImages?: boolean;\n    /**\n     * Is called when the media tile is selected.\n     * @description\n     * The editor uses this callback to open the uploaded media in the slideshow flow.\n     * @example\n     * <GalleryEditorMediaItem fileItem={fileItem} openSelectedFile={handleOpen} ratio={1} />\n     */\n    openSelectedFile: (file: InternalFileItem) => void;\n    /**\n     * Defines the aspect ratio that should be reserved for the media.\n     * @description\n     * The media tile keeps this ratio reserved so the editor grid remains visually stable.\n     * @example\n     * <GalleryEditorMediaItem fileItem={fileItem} openSelectedFile={handleOpen} ratio={1.5} />\n     */\n    ratio: number;\n    /**\n     * Provides an optional preview source that can be shown before the final uploaded media loads.\n     * @description\n     * This is typically the local base64 preview generated while the file is still being uploaded.\n     * @optional\n     */\n    previewUrl?: string;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.js

@@ -1,6 +1,7 @@
 import { SmallWaitCursor } from '@chayns-components/core';
-import React from 'react';
+import React, { memo } from 'react';
 import { StyledGalleryEditorPreviewItemImage, StyledGalleryEditorPreviewItemImageWrapper, StyledGalleryEditorPreviewItemLoadingIcon, StyledMotionGalleryEditorPreviewItem } from './GalleryEditorPreviewItem.styles';
+import { GALLERY_EDITOR_PREVIEW_FADE_DURATION_S } from '../../GalleryEditor.constants';
 const GalleryEditorPreviewItem = ({
   fileItem,
   ratio
@@ -12,14 +13,10 @@ const GalleryEditorPreviewItem = ({
     opacity: 0
   },
   exit: {
-    opacity: 0,
-    transition: {
-      duration: 3.2,
-      delay: 3.2
-    }
+    opacity: 0
   },
   transition: {
-    duration: 3.2
+    duration: GALLERY_EDITOR_PREVIEW_FADE_DURATION_S
   },
   style: {
     position: 'absolute'
@@ -29,10 +26,10 @@ const GalleryEditorPreviewItem = ({
 }, /*#__PURE__*/React.createElement(StyledGalleryEditorPreviewItemLoadingIcon, null, /*#__PURE__*/React.createElement(SmallWaitCursor, {
   shouldHideWaitCursor: false,
   shouldHideBackground: true
-})), /*#__PURE__*/React.createElement(StyledGalleryEditorPreviewItemImage, {
+})), fileItem.previewUrl && /*#__PURE__*/React.createElement(StyledGalleryEditorPreviewItemImage, {
   draggable: false,
   src: fileItem.previewUrl
 })));
 GalleryEditorPreviewItem.displayName = 'GalleryEditorPreviewItem';
-export default GalleryEditorPreviewItem;
+export default /*#__PURE__*/memo(GalleryEditorPreviewItem);
 //# sourceMappingURL=GalleryEditorPreviewItem.js.map

package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryEditorPreviewItem.js","names":["SmallWaitCursor","React","StyledGalleryEditorPreviewItemImage","StyledGalleryEditorPreviewItemImageWrapper","StyledGalleryEditorPreviewItemLoadingIcon","StyledMotionGalleryEditorPreviewItem","GalleryEditorPreviewItem","fileItem","ratio","createElement","animate","opacity","initial","exit","transition","duration","delay","style","position","$ratio","shouldHideWaitCursor","shouldHideBackground","draggable","src","previewUrl","displayName"],"sources":["../../../../../../src/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.tsx"],"sourcesContent":["import { SmallWaitCursor } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport {\n    StyledGalleryEditorPreviewItemImage,\n    StyledGalleryEditorPreviewItemImageWrapper,\n    StyledGalleryEditorPreviewItemLoadingIcon,\n    StyledMotionGalleryEditorPreviewItem,\n} from './GalleryEditorPreviewItem.styles';\nimport type { GalleryEditorPreviewItemProps } from './GalleryEditorPreviewItem.types';\n\nconst GalleryEditorPreviewItem: FC<GalleryEditorPreviewItemProps> = ({ fileItem, ratio }) => (\n    <StyledMotionGalleryEditorPreviewItem\n        animate={{ opacity: 1 }}\n        initial={{ opacity: 0 }}\n        exit={{\n            opacity: 0,\n            transition: { duration: 3.2, delay: 3.2 },\n        }}\n        transition={{ duration: 3.2 }}\n        style={{ position: 'absolute' }}\n    >\n        <StyledGalleryEditorPreviewItemImageWrapper $ratio={ratio}>\n            <StyledGalleryEditorPreviewItemLoadingIcon>\n                <SmallWaitCursor shouldHideWaitCursor={false} shouldHideBackground />\n            </StyledGalleryEditorPreviewItemLoadingIcon>\n            <StyledGalleryEditorPreviewItemImage draggable={false} src={fileItem.previewUrl} />\n        </StyledGalleryEditorPreviewItemImageWrapper>\n    </StyledMotionGalleryEditorPreviewItem>\n);\n\nGalleryEditorPreviewItem.displayName = 'GalleryEditorPreviewItem';\n\nexport default GalleryEditorPreviewItem;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,yBAAyB;AACzD,OAAOC,KAAK,MAAc,OAAO;AACjC,SACIC,mCAAmC,EACnCC,0CAA0C,EAC1CC,yCAAyC,EACzCC,oCAAoC,QACjC,mCAAmC;AAG1C,MAAMC,wBAA2D,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAM,CAAC,kBACpFP,KAAA,CAAAQ,aAAA,CAACJ,oCAAoC;EACjCK,OAAO,EAAE;IAAEC,OAAO,EAAE;EAAE,CAAE;EACxBC,OAAO,EAAE;IAAED,OAAO,EAAE;EAAE,CAAE;EACxBE,IAAI,EAAE;IACFF,OAAO,EAAE,CAAC;IACVG,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,KAAK,EAAE;IAAI;EAC5C,CAAE;EACFF,UAAU,EAAE;IAAEC,QAAQ,EAAE;EAAI,CAAE;EAC9BE,KAAK,EAAE;IAAEC,QAAQ,EAAE;EAAW;AAAE,gBAEhCjB,KAAA,CAAAQ,aAAA,CAACN,0CAA0C;EAACgB,MAAM,EAAEX;AAAM,gBACtDP,KAAA,CAAAQ,aAAA,CAACL,yCAAyC,qBACtCH,KAAA,CAAAQ,aAAA,CAACT,eAAe;EAACoB,oBAAoB,EAAE,KAAM;EAACC,oBAAoB;AAAA,CAAE,CAC7B,CAAC,eAC5CpB,KAAA,CAAAQ,aAAA,CAACP,mCAAmC;EAACoB,SAAS,EAAE,KAAM;EAACC,GAAG,EAAEhB,QAAQ,CAACiB;AAAW,CAAE,CAC1C,CACV,CACzC;AAEDlB,wBAAwB,CAACmB,WAAW,GAAG,0BAA0B;AAEjE,eAAenB,wBAAwB","ignoreList":[]}
+{"version":3,"file":"GalleryEditorPreviewItem.js","names":["SmallWaitCursor","React","memo","StyledGalleryEditorPreviewItemImage","StyledGalleryEditorPreviewItemImageWrapper","StyledGalleryEditorPreviewItemLoadingIcon","StyledMotionGalleryEditorPreviewItem","GALLERY_EDITOR_PREVIEW_FADE_DURATION_S","GalleryEditorPreviewItem","fileItem","ratio","createElement","animate","opacity","initial","exit","transition","duration","style","position","$ratio","shouldHideWaitCursor","shouldHideBackground","previewUrl","draggable","src","displayName"],"sources":["../../../../../../src/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.tsx"],"sourcesContent":["import { SmallWaitCursor } from '@chayns-components/core';\nimport React, { FC, memo } from 'react';\nimport {\n    StyledGalleryEditorPreviewItemImage,\n    StyledGalleryEditorPreviewItemImageWrapper,\n    StyledGalleryEditorPreviewItemLoadingIcon,\n    StyledMotionGalleryEditorPreviewItem,\n} from './GalleryEditorPreviewItem.styles';\nimport type { GalleryEditorPreviewItemProps } from './GalleryEditorPreviewItem.types';\nimport { GALLERY_EDITOR_PREVIEW_FADE_DURATION_S } from '../../GalleryEditor.constants';\n\nconst GalleryEditorPreviewItem: FC<GalleryEditorPreviewItemProps> = ({ fileItem, ratio }) => (\n    <StyledMotionGalleryEditorPreviewItem\n        animate={{ opacity: 1 }}\n        initial={{ opacity: 0 }}\n        exit={{ opacity: 0 }}\n        transition={{ duration: GALLERY_EDITOR_PREVIEW_FADE_DURATION_S }}\n        style={{ position: 'absolute' }}\n    >\n        <StyledGalleryEditorPreviewItemImageWrapper $ratio={ratio}>\n            <StyledGalleryEditorPreviewItemLoadingIcon>\n                <SmallWaitCursor shouldHideWaitCursor={false} shouldHideBackground />\n            </StyledGalleryEditorPreviewItemLoadingIcon>\n            {fileItem.previewUrl && (\n                <StyledGalleryEditorPreviewItemImage draggable={false} src={fileItem.previewUrl} />\n            )}\n        </StyledGalleryEditorPreviewItemImageWrapper>\n    </StyledMotionGalleryEditorPreviewItem>\n);\n\nGalleryEditorPreviewItem.displayName = 'GalleryEditorPreviewItem';\n\nexport default memo(GalleryEditorPreviewItem);\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,yBAAyB;AACzD,OAAOC,KAAK,IAAQC,IAAI,QAAQ,OAAO;AACvC,SACIC,mCAAmC,EACnCC,0CAA0C,EAC1CC,yCAAyC,EACzCC,oCAAoC,QACjC,mCAAmC;AAE1C,SAASC,sCAAsC,QAAQ,+BAA+B;AAEtF,MAAMC,wBAA2D,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAM,CAAC,kBACpFT,KAAA,CAAAU,aAAA,CAACL,oCAAoC;EACjCM,OAAO,EAAE;IAAEC,OAAO,EAAE;EAAE,CAAE;EACxBC,OAAO,EAAE;IAAED,OAAO,EAAE;EAAE,CAAE;EACxBE,IAAI,EAAE;IAAEF,OAAO,EAAE;EAAE,CAAE;EACrBG,UAAU,EAAE;IAAEC,QAAQ,EAAEV;EAAuC,CAAE;EACjEW,KAAK,EAAE;IAAEC,QAAQ,EAAE;EAAW;AAAE,gBAEhClB,KAAA,CAAAU,aAAA,CAACP,0CAA0C;EAACgB,MAAM,EAAEV;AAAM,gBACtDT,KAAA,CAAAU,aAAA,CAACN,yCAAyC,qBACtCJ,KAAA,CAAAU,aAAA,CAACX,eAAe;EAACqB,oBAAoB,EAAE,KAAM;EAACC,oBAAoB;AAAA,CAAE,CAC7B,CAAC,EAC3Cb,QAAQ,CAACc,UAAU,iBAChBtB,KAAA,CAAAU,aAAA,CAACR,mCAAmC;EAACqB,SAAS,EAAE,KAAM;EAACC,GAAG,EAAEhB,QAAQ,CAACc;AAAW,CAAE,CAE9C,CACV,CACzC;AAEDf,wBAAwB,CAACkB,WAAW,GAAG,0BAA0B;AAEjE,4BAAexB,IAAI,CAACM,wBAAwB,CAAC","ignoreList":[]}

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

@@ -0,0 +1,150 @@
+import { uploadFile } from '@chayns-components/core';
+import { createDialog, DialogType } from 'chayns-api';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { filterDuplicateFile, generatePreviewUrl, generateVideoThumbnail } from '../../utils/file';
+import { openFiles } from '../../utils/gallery';
+import { getPendingPreviewFileItems, getPendingUploadFileItems, mapExternalFilesIntoInternalItems, mergeExternalFilesWithInternalState } from './GalleryEditor.utils';
+const useGalleryEditorState = ({
+  allowDragAndDrop,
+  doubleFileDialogMessage,
+  files,
+  maxFiles,
+  onAdd,
+  onFileCountChange,
+  onRemove
+}) => {
+  const [fileItems, setFileItems] = useState(() => mapExternalFilesIntoInternalItems(files));
+  const callDuplicateFileDialog = useCallback(() => {
+    createDialog({
+      type: DialogType.ALERT,
+      text: doubleFileDialogMessage
+    });
+  }, [doubleFileDialogMessage]);
+  const handlePreviewUrlCallback = useCallback((previewUrl, file) => {
+    setFileItems(prevState => prevState.map(prevFile => prevFile.id === file.id ? {
+      ...prevFile,
+      previewUrl
+    } : prevFile));
+  }, []);
+  const handleUploadFileCallback = useCallback((file, uploadedFile) => {
+    setFileItems(prevState => {
+      const duplicateItem = prevState.find(prevFile => prevFile.uploadedFile?.url === uploadedFile.url);
+      const updatedState = prevState.map(prevFile => {
+        if (prevFile.uploadedFile?.url === uploadedFile.url) {
+          callDuplicateFileDialog();
+          return undefined;
+        }
+        if (prevFile.id === file.id) {
+          if (typeof onAdd === 'function' && !duplicateItem) {
+            onAdd({
+              file: uploadedFile,
+              id: file.id
+            });
+          }
+          return {
+            ...prevFile,
+            uploadedFile,
+            state: 'uploaded'
+          };
+        }
+        return prevFile;
+      });
+      return updatedState.filter(Boolean);
+    });
+  }, [callDuplicateFileDialog, onAdd]);
+  const filesToGeneratePreview = useMemo(() => getPendingPreviewFileItems(fileItems), [fileItems]);
+  const filesToUpload = useMemo(() => getPendingUploadFileItems(fileItems), [fileItems]);
+  const handleAddFiles = useCallback(filesToAdd => {
+    setFileItems(prevState => {
+      const newFileItems = [];
+      filesToAdd.forEach(file => {
+        if (file && !filterDuplicateFile({
+          files: prevState,
+          newFile: file
+        })) {
+          newFileItems.push({
+            id: uuidv4(),
+            file,
+            state: 'none'
+          });
+        }
+      });
+      const limitedFileItems = maxFiles ? newFileItems.slice(0, Math.max(maxFiles - prevState.length, 0)) : newFileItems;
+      return [...prevState, ...limitedFileItems];
+    });
+  }, [maxFiles]);
+  const handleDeleteFile = useCallback(id => {
+    let uploadedFile;
+    setFileItems(prevState => {
+      uploadedFile = prevState.find(file => file.id === id)?.uploadedFile;
+      return prevState.filter(file => file.id !== id);
+    });
+    if (uploadedFile && typeof onRemove === 'function') {
+      onRemove({
+        file: uploadedFile,
+        id
+      });
+    }
+  }, [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 handleClear = useCallback(() => {
+    setFileItems([]);
+  }, []);
+  useEffect(() => {
+    if (typeof onFileCountChange === 'function') {
+      onFileCountChange(fileItems.length);
+    }
+  }, [fileItems.length, onFileCountChange]);
+  useEffect(() => {
+    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 => prevFile.id === file.id ? {
+        ...prevFile,
+        state: 'uploading'
+      } : prevFile));
+      void uploadFile({
+        fileToUpload: file,
+        callback: uploadedFile => handleUploadFileCallback(file, uploadedFile)
+      });
+    });
+  }, [filesToGeneratePreview, filesToUpload, handlePreviewUrlCallback, handleUploadFileCallback]);
+  useEffect(() => {
+    const externalFileItems = mapExternalFilesIntoInternalItems(files);
+    setFileItems(prevState => mergeExternalFilesWithInternalState(prevState, externalFileItems));
+  }, [files]);
+  return {
+    fileItems,
+    handleAddFiles,
+    handleClear,
+    handleDeleteFile,
+    handleDrop,
+    handleOpenFiles
+  };
+};
+export default useGalleryEditorState;
+//# sourceMappingURL=useGalleryEditorState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useGalleryEditorState.js","names":["uploadFile","createDialog","DialogType","useCallback","useEffect","useMemo","useState","v4","uuidv4","filterDuplicateFile","generatePreviewUrl","generateVideoThumbnail","openFiles","getPendingPreviewFileItems","getPendingUploadFileItems","mapExternalFilesIntoInternalItems","mergeExternalFilesWithInternalState","useGalleryEditorState","allowDragAndDrop","doubleFileDialogMessage","files","maxFiles","onAdd","onFileCountChange","onRemove","fileItems","setFileItems","callDuplicateFileDialog","type","ALERT","text","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","handleUploadFileCallback","uploadedFile","duplicateItem","find","url","updatedState","undefined","state","filter","Boolean","filesToGeneratePreview","filesToUpload","handleAddFiles","filesToAdd","newFileItems","forEach","newFile","push","limitedFileItems","slice","Math","max","length","handleDeleteFile","handleDrop","event","preventDefault","Array","from","dataTransfer","handleOpenFiles","handleClear","includes","callback","fileToUpload","externalFileItems"],"sources":["../../../../src/components/gallery-editor/useGalleryEditorState.ts"],"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 { type DragEvent, useCallback, useEffect, useMemo, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { filterDuplicateFile, generatePreviewUrl, generateVideoThumbnail } from '../../utils/file';\nimport { openFiles } from '../../utils/gallery';\nimport {\n    getPendingPreviewFileItems,\n    getPendingUploadFileItems,\n    mapExternalFilesIntoInternalItems,\n    mergeExternalFilesWithInternalState,\n} from './GalleryEditor.utils';\n\ntype UseGalleryEditorStateOptions = {\n    allowDragAndDrop: boolean;\n    doubleFileDialogMessage: string;\n    files?: FileItem[];\n    maxFiles?: number;\n    onAdd?: (file: FileItem) => void;\n    onFileCountChange?: (fileCount: number) => void;\n    onRemove?: (file: FileItem) => void;\n};\n\ntype GalleryEditorStateResult = {\n    fileItems: InternalFileItem[];\n    handleAddFiles: (filesToAdd: File[]) => void;\n    handleClear: () => void;\n    handleDeleteFile: (id?: string) => void;\n    handleDrop: (event: DragEvent<HTMLDivElement>) => void;\n    handleOpenFiles: (file: InternalFileItem) => void;\n};\n\nconst useGalleryEditorState = ({\n    allowDragAndDrop,\n    doubleFileDialogMessage,\n    files,\n    maxFiles,\n    onAdd,\n    onFileCountChange,\n    onRemove,\n}: UseGalleryEditorStateOptions): GalleryEditorStateResult => {\n    const [fileItems, setFileItems] = useState<InternalFileItem[]>(() =>\n        mapExternalFilesIntoInternalItems(files),\n    );\n\n    const callDuplicateFileDialog = useCallback(() => {\n        createDialog({ type: DialogType.ALERT, text: doubleFileDialogMessage });\n    }, [doubleFileDialogMessage]);\n\n    const handlePreviewUrlCallback = useCallback((previewUrl: string, file: InternalFileItem) => {\n        setFileItems((prevState) =>\n            prevState.map((prevFile) =>\n                prevFile.id === file.id ? { ...prevFile, previewUrl } : prevFile,\n            ),\n        );\n    }, []);\n\n    const handleUploadFileCallback = useCallback(\n        (file: InternalFileItem, uploadedFile: Video | Image) => {\n            setFileItems((prevState) => {\n                const duplicateItem = prevState.find(\n                    (prevFile) => prevFile.uploadedFile?.url === uploadedFile.url,\n                );\n\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' && !duplicateItem) {\n                            onAdd({ file: uploadedFile, id: file.id });\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 filesToGeneratePreview = useMemo(\n        () => getPendingPreviewFileItems(fileItems),\n        [fileItems],\n    );\n    const filesToUpload = useMemo(() => getPendingUploadFileItems(fileItems), [fileItems]);\n\n    const handleAddFiles = useCallback(\n        (filesToAdd: File[]) => {\n            setFileItems((prevState) => {\n                const newFileItems: InternalFileItem[] = [];\n\n                filesToAdd.forEach((file) => {\n                    if (file && !filterDuplicateFile({ files: prevState, newFile: file })) {\n                        newFileItems.push({\n                            id: uuidv4(),\n                            file,\n                            state: 'none',\n                        });\n                    }\n                });\n\n                const limitedFileItems = maxFiles\n                    ? newFileItems.slice(0, Math.max(maxFiles - prevState.length, 0))\n                    : newFileItems;\n\n                return [...prevState, ...limitedFileItems];\n            });\n        },\n        [maxFiles],\n    );\n\n    const handleDeleteFile = useCallback(\n        (id?: string) => {\n            let uploadedFile: Image | Video | undefined;\n\n            setFileItems((prevState) => {\n                uploadedFile = prevState.find((file) => file.id === id)?.uploadedFile;\n\n                return prevState.filter((file) => file.id !== id);\n            });\n\n            if (uploadedFile && typeof onRemove === 'function') {\n                onRemove({ file: uploadedFile, id });\n            }\n        },\n        [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    const handleClear = useCallback(() => {\n        setFileItems([]);\n    }, []);\n\n    useEffect(() => {\n        if (typeof onFileCountChange === 'function') {\n            onFileCountChange(fileItems.length);\n        }\n    }, [fileItems.length, onFileCountChange]);\n\n    useEffect(() => {\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                    prevFile.id === file.id ? { ...prevFile, state: 'uploading' } : prevFile,\n                ),\n            );\n\n            void uploadFile({\n                fileToUpload: file,\n                callback: (uploadedFile) => handleUploadFileCallback(file, uploadedFile),\n            });\n        });\n    }, [filesToGeneratePreview, filesToUpload, handlePreviewUrlCallback, handleUploadFileCallback]);\n\n    useEffect(() => {\n        const externalFileItems = mapExternalFilesIntoInternalItems(files);\n\n        setFileItems((prevState) =>\n            mergeExternalFilesWithInternalState(prevState, externalFileItems),\n        );\n    }, [files]);\n\n    return {\n        fileItems,\n        handleAddFiles,\n        handleClear,\n        handleDeleteFile,\n        handleDrop,\n        handleOpenFiles,\n    };\n};\n\nexport default useGalleryEditorState;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/gallery-viewer/GalleryViewer.constants.js

@@ -0,0 +1,2 @@
+export const GALLERY_VIEWER_MAX_VISIBLE_ITEMS = 4;
+//# sourceMappingURL=GalleryViewer.constants.js.map

package/lib/esm/components/gallery-viewer/GalleryViewer.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryViewer.constants.js","names":["GALLERY_VIEWER_MAX_VISIBLE_ITEMS"],"sources":["../../../../src/components/gallery-viewer/GalleryViewer.constants.ts"],"sourcesContent":["export const GALLERY_VIEWER_MAX_VISIBLE_ITEMS = 4;\n"],"mappings":"AAAA,OAAO,MAAMA,gCAAgC,GAAG,CAAC","ignoreList":[]}

package/lib/esm/components/gallery-viewer/GalleryViewer.js

@@ -1,18 +1,21 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { memo, useCallback } from 'react';
 import GalleryViewerItem from './gallery-viewer-item/GalleryViewerItem';
 import { StyledGalleryViewer, StyledGalleryViewerItemWrapper } from './GalleryViewer.styles';
 import { getGalleryRatio, getGalleryViewerKey, getReadOnlyItemRatio, openKnownFiles } from '../../utils/gallery';
 import { GalleryViewMode } from '../../types/gallery';
+import { GALLERY_VIEWER_MAX_VISIBLE_ITEMS } from './GalleryViewer.constants';
+const EMPTY_FILE_ITEMS = [];
 const GalleryViewer = ({
   files,
+  shouldLoadImages = true,
   viewMode = GalleryViewMode.GRID
 }) => {
-  const fileItems = files ?? [];
-  const ratio = useMemo(() => getGalleryRatio(fileItems), [fileItems]);
+  const fileItems = files ?? EMPTY_FILE_ITEMS;
+  const ratio = getGalleryRatio(fileItems);
   const handleOpenFiles = useCallback(file => {
     openKnownFiles(fileItems, file);
   }, [fileItems]);
-  const visibleItems = fileItems.slice(0, 4);
+  const visibleItems = fileItems.slice(0, GALLERY_VIEWER_MAX_VISIBLE_ITEMS);
   return /*#__PURE__*/React.createElement(StyledGalleryViewer, null, /*#__PURE__*/React.createElement(StyledGalleryViewerItemWrapper, {
     $ratio: ratio,
     $itemCount: fileItems.length,
@@ -26,9 +29,10 @@ const GalleryViewer = ({
       index,
       viewMode
     }),
-    remainingItemsLength: fileItems.length > 4 && index === 3 ? fileItems.length : undefined
+    shouldLoadImages: shouldLoadImages,
+    remainingItemsLength: fileItems.length > GALLERY_VIEWER_MAX_VISIBLE_ITEMS && index === 3 ? fileItems.length : undefined
   }))));
 };
 GalleryViewer.displayName = 'GalleryViewer';
-export default GalleryViewer;
+export default /*#__PURE__*/memo(GalleryViewer);
 //# sourceMappingURL=GalleryViewer.js.map