@chayns-components/gallery 5.2.0 → 5.2.3

package/AGENTS.md

@@ -63,6 +63,17 @@ import { Gallery } from '@chayns-components/gallery';
 />
 ```
 
+#### Edit Mode Custom Add Icon
+
+```tsx
+<Gallery
+    files={galleryStoryFiles.slice(0, 3)}
+    isEditMode
+    maxFiles={6}
+    addFileIcon={'fa fa-image-circle-plus'}
+/>
+```
+
 ### Props
 
 No prop documentation available.
@@ -113,6 +124,18 @@ import { GalleryEditor } from '@chayns-components/gallery';
 />
 ```
 
+#### Custom Add Icon
+
+```tsx
+<GalleryEditor
+    allowDragAndDrop={false}
+    fileMinWidth={100}
+    files={galleryStoryFiles.slice(0, 3)}
+    maxFiles={6}
+    addFileIcon={'fa fa-image-circle-plus'}
+/>
+```
+
 ### Props
 
 No prop documentation available.

package/lib/cjs/components/Gallery.js

@@ -4,13 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _GalleryEditor = _interopRequireDefault(require("./gallery-editor/GalleryEditor"));
 var _GalleryViewer = _interopRequireDefault(require("./gallery-viewer/GalleryViewer"));
 var _gallery = require("../types/gallery");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Gallery = ({
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Gallery = /*#__PURE__*/(0, _react.forwardRef)(({
   allowDragAndDrop = false,
+  addFileIcon = 'fa fa-plus',
   doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',
   isEditMode = false,
   fileMinWidth = 100,
@@ -20,18 +22,34 @@ const Gallery = ({
   onFileCountChange,
   onRemove,
   viewMode = _gallery.GalleryViewMode.GRID
-}) => isEditMode ? /*#__PURE__*/_react.default.createElement(_GalleryEditor.default, {
-  allowDragAndDrop: allowDragAndDrop,
-  doubleFileDialogMessage: doubleFileDialogMessage,
-  fileMinWidth: fileMinWidth,
-  files: files,
-  maxFiles: maxFiles,
-  onAdd: onAdd,
-  onFileCountChange: onFileCountChange,
-  onRemove: onRemove
-}) : /*#__PURE__*/_react.default.createElement(_GalleryViewer.default, {
-  files: files,
-  viewMode: viewMode
+}, ref) => {
+  const editorRef = (0, _react.useRef)(null);
+  const handleClear = (0, _react.useCallback)(() => {
+    var _editorRef$current;
+    if (!isEditMode) {
+      console.warn('Gallery.clear() can only be used in edit mode.');
+      return;
+    }
+    (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 || _editorRef$current.clear();
+  }, [isEditMode]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    clear: handleClear
+  }), [handleClear]);
+  return isEditMode ? /*#__PURE__*/_react.default.createElement(_GalleryEditor.default, {
+    ref: editorRef,
+    allowDragAndDrop: allowDragAndDrop,
+    addFileIcon: addFileIcon,
+    doubleFileDialogMessage: doubleFileDialogMessage,
+    fileMinWidth: fileMinWidth,
+    files: files,
+    maxFiles: maxFiles,
+    onAdd: onAdd,
+    onFileCountChange: onFileCountChange,
+    onRemove: onRemove
+  }) : /*#__PURE__*/_react.default.createElement(_GalleryViewer.default, {
+    files: files,
+    viewMode: viewMode
+  });
 });
 Gallery.displayName = 'Gallery';
 var _default = exports.default = Gallery;

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

@@ -1 +1 @@
-{"version":3,"file":"Gallery.js","names":["_react","_interopRequireDefault","require","_GalleryEditor","_GalleryViewer","_gallery","e","__esModule","default","Gallery","allowDragAndDrop","doubleFileDialogMessage","isEditMode","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","viewMode","GalleryViewMode","GRID","createElement","displayName","_default","exports"],"sources":["../../../src/components/Gallery.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport GalleryEditor from './gallery-editor/GalleryEditor';\nimport GalleryViewer from './gallery-viewer/GalleryViewer';\nimport type { GalleryProps } from './Gallery.types';\nimport { GalleryViewMode } from '../types/gallery';\n\nconst Gallery: FC<GalleryProps> = ({\n    allowDragAndDrop = false,\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    isEditMode ? (\n        <GalleryEditor\n            allowDragAndDrop={allowDragAndDrop}\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\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,cAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEA,IAAAG,QAAA,GAAAH,OAAA;AAAmD,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEnD,MAAMG,OAAyB,GAAGA,CAAC;EAC/BC,gBAAgB,GAAG,KAAK;EACxBC,uBAAuB,GAAG,mCAAmC;EAC7DC,UAAU,GAAG,KAAK;EAClBC,YAAY,GAAG,GAAG;EAClBC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,iBAAiB;EACjBC,QAAQ;EACRC,QAAQ,GAAGC,wBAAe,CAACC;AAC/B,CAAC,KACGT,UAAU,gBACNZ,MAAA,CAAAQ,OAAA,CAAAc,aAAA,CAACnB,cAAA,CAAAK,OAAa;EACVE,gBAAgB,EAAEA,gBAAiB;EACnCC,uBAAuB,EAAEA,uBAAwB;EACjDE,YAAY,EAAEA,YAAa;EAC3BC,KAAK,EAAEA,KAAM;EACbC,QAAQ,EAAEA,QAAS;EACnBC,KAAK,EAAEA,KAAM;EACbC,iBAAiB,EAAEA,iBAAkB;EACrCC,QAAQ,EAAEA;AAAS,CACtB,CAAC,gBAEFlB,MAAA,CAAAQ,OAAA,CAAAc,aAAA,CAAClB,cAAA,CAAAI,OAAa;EAACM,KAAK,EAAEA,KAAM;EAACK,QAAQ,EAAEA;AAAS,CAAE,CACrD;AAELV,OAAO,CAACc,WAAW,GAAG,SAAS;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAjB,OAAA,GAEjBC,OAAO","ignoreList":[]}
+{"version":3,"file":"Gallery.js","names":["_react","_interopRequireWildcard","require","_GalleryEditor","_interopRequireDefault","_GalleryViewer","_gallery","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Gallery","forwardRef","allowDragAndDrop","addFileIcon","doubleFileDialogMessage","isEditMode","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","viewMode","GalleryViewMode","GRID","ref","editorRef","useRef","handleClear","useCallback","_editorRef$current","console","warn","current","clear","useImperativeHandle","createElement","displayName","_default","exports"],"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":"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","ignoreList":[]}

package/lib/cjs/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 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     * 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     * 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/cjs/components/gallery-editor/GalleryEditor.js

@@ -15,8 +15,9 @@ var _GalleryEditorItem = _interopRequireDefault(require("./gallery-editor-item/G
 var _GalleryEditor = require("./GalleryEditor.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const GalleryEditor = ({
+const GalleryEditor = /*#__PURE__*/(0, _react.forwardRef)(({
   allowDragAndDrop = false,
+  addFileIcon = 'fa fa-plus',
   doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',
   fileMinWidth = 100,
   files,
@@ -24,8 +25,11 @@ const GalleryEditor = ({
   onAdd,
   onFileCountChange,
   onRemove
-}) => {
+}, ref) => {
   const [fileItems, setFileItems] = (0, _react.useState)(() => (0, _gallery.mapFilesToInternalItems)(files));
+  const handleClear = (0, _react.useCallback)(() => {
+    setFileItems([]);
+  }, []);
   const handlePreviewUrlCallback = (0, _react.useCallback)((previewUrl, file) => {
     setFileItems(prevState => prevState.map(prevFile => {
       if (prevFile.id === file.id) {
@@ -121,6 +125,9 @@ const GalleryEditor = ({
   const handleOpenFiles = (0, _react.useCallback)(file => {
     (0, _gallery.openFiles)(fileItems, file);
   }, [fileItems]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    clear: handleClear
+  }), [handleClear]);
   (0, _react.useEffect)(() => {
     if (typeof onFileCountChange === 'function') {
       onFileCountChange(fileItems.length);
@@ -184,15 +191,16 @@ const GalleryEditor = ({
     }
     return [...items, /*#__PURE__*/_react.default.createElement(_AddFile.default, {
       key: "add_file",
+      addFileIcon: addFileIcon,
       onAdd: handleAddFiles
     })];
-  }, [fileItems, handleAddFiles, handleDeleteFile, handleOpenFiles, maxFiles]);
+  }, [addFileIcon, fileItems, handleAddFiles, handleDeleteFile, handleOpenFiles, maxFiles]);
   return /*#__PURE__*/_react.default.createElement(_GalleryEditor.StyledGalleryEditor, null, /*#__PURE__*/_react.default.createElement(_GalleryEditor.StyledGalleryEditorGrid, {
     $fileMinWidth: fileMinWidth,
     onDragOver: event => event.preventDefault(),
     onDrop: event => void handleDrop(event)
   }, galleryItems));
-};
+});
 GalleryEditor.displayName = 'GalleryEditor';
 var _default = exports.default = GalleryEditor;
 //# sourceMappingURL=GalleryEditor.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"GalleryEditor.js","names":["_core","require","_chaynsApi","_react","_interopRequireWildcard","_uuid","_file","_gallery","_AddFile","_interopRequireDefault","_GalleryEditorItem","_GalleryEditor","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GalleryEditor","allowDragAndDrop","doubleFileDialogMessage","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","fileItems","setFileItems","useState","mapFilesToInternalItems","handlePreviewUrlCallback","useCallback","previewUrl","file","prevState","map","prevFile","id","callDuplicateFileDialog","createDialog","type","DialogType","ALERT","text","handleUploadFileCallback","uploadedFile","updatedState","_prevFile$uploadedFil","url","undefined","prevElement","find","nextUploadedFile","state","filter","Boolean","handleAddFiles","filesToAdd","newFileItems","forEach","filterDuplicateFile","newFile","push","uuidv4","limitedFileItems","slice","Math","max","length","handleDeleteFile","fileToDelete","filteredFiles","handleDrop","event","preventDefault","Array","from","dataTransfer","handleOpenFiles","openFiles","useEffect","filesToGeneratePreview","filesToUpload","includes","generateVideoThumbnail","callback","generatePreviewUrl","uploadFile","fileToUpload","externalFileItems","updatedItems","prevItem","matchingItem","item","concat","newItem","some","galleryItems","useMemo","items","createElement","key","fileItem","onClick","StyledGalleryEditor","StyledGalleryEditorGrid","$fileMinWidth","onDragOver","onDrop","displayName","_default","exports"],"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, { DragEvent, FC, useCallback, useEffect, useMemo, useState } 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 } from './GalleryEditor.types';\n\nconst GalleryEditor: FC<GalleryEditorProps> = ({\n    allowDragAndDrop = false,\n    doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',\n    fileMinWidth = 100,\n    files,\n    maxFiles,\n    onAdd,\n    onFileCountChange,\n    onRemove,\n}) => {\n    const [fileItems, setFileItems] = useState<InternalFileItem[]>(() =>\n        mapFilesToInternalItems(files),\n    );\n\n    const handlePreviewUrlCallback = useCallback((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    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(0, Math.max(maxFiles - fileItems.length, 0));\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    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 [...items, <AddFile key=\"add_file\" onAdd={handleAddFiles} />];\n    }, [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\nGalleryEditor.displayName = 'GalleryEditor';\n\nexport default GalleryEditor;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"GalleryEditor.js","names":["_core","require","_chaynsApi","_react","_interopRequireWildcard","_uuid","_file","_gallery","_AddFile","_interopRequireDefault","_GalleryEditorItem","_GalleryEditor","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GalleryEditor","forwardRef","allowDragAndDrop","addFileIcon","doubleFileDialogMessage","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","ref","fileItems","setFileItems","useState","mapFilesToInternalItems","handleClear","useCallback","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","callDuplicateFileDialog","createDialog","type","DialogType","ALERT","text","handleUploadFileCallback","uploadedFile","updatedState","_prevFile$uploadedFil","url","undefined","prevElement","find","nextUploadedFile","state","filter","Boolean","handleAddFiles","filesToAdd","newFileItems","forEach","filterDuplicateFile","newFile","push","uuidv4","limitedFileItems","slice","Math","max","length","handleDeleteFile","fileToDelete","filteredFiles","handleDrop","event","preventDefault","Array","from","dataTransfer","handleOpenFiles","openFiles","useImperativeHandle","clear","useEffect","filesToGeneratePreview","filesToUpload","includes","generateVideoThumbnail","callback","generatePreviewUrl","uploadFile","fileToUpload","externalFileItems","updatedItems","prevItem","matchingItem","item","concat","newItem","some","galleryItems","useMemo","items","createElement","key","fileItem","onClick","StyledGalleryEditor","StyledGalleryEditorGrid","$fileMinWidth","onDragOver","onDrop","displayName","_default","exports"],"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":[]}

package/lib/cjs/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';\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     * 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"],"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     * 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/cjs/components/gallery-editor/add-file/AddFile.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _AddFile = require("./AddFile.styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const AddFile = ({
+  addFileIcon = 'fa fa-plus',
   onAdd
 }) => {
   const openSelectDialog = (0, _react.useCallback)(async () => {
@@ -24,7 +25,7 @@ const AddFile = ({
     onClick: () => void openSelectDialog()
   }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
     size: 40,
-    icons: ['fa fa-plus']
+    icons: [addFileIcon]
   })));
 };
 AddFile.displayName = 'AddFile';

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

@@ -1 +1 @@
-{"version":3,"file":"AddFile.js","names":["_core","require","_react","_interopRequireWildcard","_AddFile","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AddFile","onAdd","openSelectDialog","useCallback","files","selectFiles","multiple","type","createElement","StyledAddFile","key","StyledAddFIleIconWrapper","onClick","Icon","size","icons","displayName","_default","exports"],"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> = ({ 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={['fa fa-plus']} />\n            </StyledAddFIleIconWrapper>\n        </StyledAddFile>\n    );\n};\n\nAddFile.displayName = 'AddFile';\n\nexport default AddFile;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAA2E,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAG3E,MAAMkB,OAAyB,GAAGA,CAAC;EAAEC;AAAM,CAAC,KAAK;EAC7C,MAAMC,gBAAgB,GAAG,IAAAC,kBAAW,EAAC,YAAY;IAC7C,MAAMC,KAAK,GAAG,MAAM,IAAAC,iBAAW,EAAC;MAC5BC,QAAQ,EAAE,IAAI;MACdC,IAAI,EAAE;IACV,CAAC,CAAC;IAEFN,KAAK,CAACG,KAAK,CAAC;EAChB,CAAC,EAAE,CAACH,KAAK,CAAC,CAAC;EAEX,oBACIvB,MAAA,CAAAa,OAAA,CAAAiB,aAAA,CAAC5B,QAAA,CAAA6B,aAAa;IAACC,GAAG,EAAC;EAAW,gBAC1BhC,MAAA,CAAAa,OAAA,CAAAiB,aAAA,CAAC5B,QAAA,CAAA+B,wBAAwB;IAACC,OAAO,EAAEA,CAAA,KAAM,KAAKV,gBAAgB,CAAC;EAAE,gBAC7DxB,MAAA,CAAAa,OAAA,CAAAiB,aAAA,CAAChC,KAAA,CAAAqC,IAAI;IAACC,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC,YAAY;EAAE,CAAE,CAClB,CACf,CAAC;AAExB,CAAC;AAEDf,OAAO,CAACgB,WAAW,GAAG,SAAS;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3B,OAAA,GAEjBS,OAAO","ignoreList":[]}
+{"version":3,"file":"AddFile.js","names":["_core","require","_react","_interopRequireWildcard","_AddFile","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AddFile","addFileIcon","onAdd","openSelectDialog","useCallback","files","selectFiles","multiple","type","createElement","StyledAddFile","key","StyledAddFIleIconWrapper","onClick","Icon","size","icons","displayName","_default","exports"],"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,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAA2E,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAG3E,MAAMkB,OAAyB,GAAGA,CAAC;EAAEC,WAAW,GAAG,YAAY;EAAEC;AAAM,CAAC,KAAK;EACzE,MAAMC,gBAAgB,GAAG,IAAAC,kBAAW,EAAC,YAAY;IAC7C,MAAMC,KAAK,GAAG,MAAM,IAAAC,iBAAW,EAAC;MAC5BC,QAAQ,EAAE,IAAI;MACdC,IAAI,EAAE;IACV,CAAC,CAAC;IAEFN,KAAK,CAACG,KAAK,CAAC;EAChB,CAAC,EAAE,CAACH,KAAK,CAAC,CAAC;EAEX,oBACIxB,MAAA,CAAAa,OAAA,CAAAkB,aAAA,CAAC7B,QAAA,CAAA8B,aAAa;IAACC,GAAG,EAAC;EAAW,gBAC1BjC,MAAA,CAAAa,OAAA,CAAAkB,aAAA,CAAC7B,QAAA,CAAAgC,wBAAwB;IAACC,OAAO,EAAEA,CAAA,KAAM,KAAKV,gBAAgB,CAAC;EAAE,gBAC7DzB,MAAA,CAAAa,OAAA,CAAAkB,aAAA,CAACjC,KAAA,CAAAsC,IAAI;IAACC,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAACf,WAAW;EAAE,CAAE,CACjB,CACf,CAAC;AAExB,CAAC;AAEDD,OAAO,CAACiB,WAAW,GAAG,SAAS;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA5B,OAAA,GAEjBS,OAAO","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"AddFile.types.js","names":[],"sources":["../../../../../src/components/gallery-editor/add-file/AddFile.types.ts"],"sourcesContent":["/**\n * Props for the add-file tile inside the gallery editor.\n */\nexport interface AddFileProps {\n    /**\n     * Is called with the selected local files.\n     * @description\n     * The editor add-tile uses this callback after the file picker resolves with the selected local image or video files.\n     * @example\n     * <AddFile onAdd={(files) => console.log(files)} />\n     */\n    onAdd: (files: File[]) => void;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"AddFile.types.js","names":[],"sources":["../../../../../src/components/gallery-editor/add-file/AddFile.types.ts"],"sourcesContent":["/**\n * Props for the add-file tile inside the gallery editor.\n */\nexport interface AddFileProps {\n    /**\n     * Defines the icon that is displayed inside the add-file tile.\n     * @description\n     * This icon is shown in the tile that opens the file picker for adding new items to the gallery.\n     * @default 'fa fa-plus'\n     * @example\n     * <AddFile addFileIcon=\"fa fa-image-circle-plus\" onAdd={(files) => console.log(files)} />\n     * @optional\n     */\n    addFileIcon?: string;\n    /**\n     * Is called with the selected local files.\n     * @description\n     * The editor add-tile uses this callback after the file picker resolves with the selected local image or video files.\n     * @example\n     * <AddFile onAdd={(files) => console.log(files)} />\n     */\n    onAdd: (files: File[]) => void;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_Gallery","_interopRequireDefault","require","_GalleryEditor","_GalleryViewer","_gallery","e","__esModule","default"],"sources":["../../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Gallery } from './components/Gallery';\nexport { default as GalleryEditor } from './components/gallery-editor/GalleryEditor';\nexport { default as GalleryViewer } from './components/gallery-viewer/GalleryViewer';\nexport type { GalleryProps } from './components/Gallery.types';\nexport type { GalleryEditorProps } from './components/gallery-editor/GalleryEditor.types';\nexport type { GalleryViewerProps } from './components/gallery-viewer/GalleryViewer.types';\nexport { GalleryViewMode } from './types/gallery';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,cAAA,GAAAH,sBAAA,CAAAC,OAAA;AAIA,IAAAG,QAAA,GAAAH,OAAA;AAAkD,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_Gallery","_interopRequireDefault","require","_GalleryEditor","_GalleryViewer","_gallery","e","__esModule","default"],"sources":["../../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Gallery } from './components/Gallery';\nexport { default as GalleryEditor } from './components/gallery-editor/GalleryEditor';\nexport { default as GalleryViewer } from './components/gallery-viewer/GalleryViewer';\nexport type { GalleryProps, GalleryRef } from './components/Gallery.types';\nexport type {\n    GalleryEditorProps,\n    GalleryEditorRef,\n} from './components/gallery-editor/GalleryEditor.types';\nexport type { GalleryViewerProps } from './components/gallery-viewer/GalleryViewer.types';\nexport { GalleryViewMode } from './types/gallery';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,cAAA,GAAAH,sBAAA,CAAAC,OAAA;AAOA,IAAAG,QAAA,GAAAH,OAAA;AAAkD,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}

package/lib/esm/components/Gallery.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
 import GalleryEditor from './gallery-editor/GalleryEditor';
 import GalleryViewer from './gallery-viewer/GalleryViewer';
 import { GalleryViewMode } from '../types/gallery';
-const Gallery = ({
+const Gallery = /*#__PURE__*/forwardRef(({
   allowDragAndDrop = false,
+  addFileIcon = 'fa fa-plus',
   doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',
   isEditMode = false,
   fileMinWidth = 100,
@@ -13,18 +14,33 @@ const Gallery = ({
   onFileCountChange,
   onRemove,
   viewMode = GalleryViewMode.GRID
-}) => isEditMode ? /*#__PURE__*/React.createElement(GalleryEditor, {
-  allowDragAndDrop: allowDragAndDrop,
-  doubleFileDialogMessage: doubleFileDialogMessage,
-  fileMinWidth: fileMinWidth,
-  files: files,
-  maxFiles: maxFiles,
-  onAdd: onAdd,
-  onFileCountChange: onFileCountChange,
-  onRemove: onRemove
-}) : /*#__PURE__*/React.createElement(GalleryViewer, {
-  files: files,
-  viewMode: viewMode
+}, ref) => {
+  const editorRef = useRef(null);
+  const handleClear = useCallback(() => {
+    if (!isEditMode) {
+      console.warn('Gallery.clear() can only be used in edit mode.');
+      return;
+    }
+    editorRef.current?.clear();
+  }, [isEditMode]);
+  useImperativeHandle(ref, () => ({
+    clear: handleClear
+  }), [handleClear]);
+  return isEditMode ? /*#__PURE__*/React.createElement(GalleryEditor, {
+    ref: editorRef,
+    allowDragAndDrop: allowDragAndDrop,
+    addFileIcon: addFileIcon,
+    doubleFileDialogMessage: doubleFileDialogMessage,
+    fileMinWidth: fileMinWidth,
+    files: files,
+    maxFiles: maxFiles,
+    onAdd: onAdd,
+    onFileCountChange: onFileCountChange,
+    onRemove: onRemove
+  }) : /*#__PURE__*/React.createElement(GalleryViewer, {
+    files: files,
+    viewMode: viewMode
+  });
 });
 Gallery.displayName = 'Gallery';
 export default Gallery;

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

@@ -1 +1 @@
-{"version":3,"file":"Gallery.js","names":["React","GalleryEditor","GalleryViewer","GalleryViewMode","Gallery","allowDragAndDrop","doubleFileDialogMessage","isEditMode","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","viewMode","GRID","createElement","displayName"],"sources":["../../../src/components/Gallery.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport GalleryEditor from './gallery-editor/GalleryEditor';\nimport GalleryViewer from './gallery-viewer/GalleryViewer';\nimport type { GalleryProps } from './Gallery.types';\nimport { GalleryViewMode } from '../types/gallery';\n\nconst Gallery: FC<GalleryProps> = ({\n    allowDragAndDrop = false,\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    isEditMode ? (\n        <GalleryEditor\n            allowDragAndDrop={allowDragAndDrop}\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\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAc,OAAO;AACjC,OAAOC,aAAa,MAAM,gCAAgC;AAC1D,OAAOC,aAAa,MAAM,gCAAgC;AAE1D,SAASC,eAAe,QAAQ,kBAAkB;AAElD,MAAMC,OAAyB,GAAGA,CAAC;EAC/BC,gBAAgB,GAAG,KAAK;EACxBC,uBAAuB,GAAG,mCAAmC;EAC7DC,UAAU,GAAG,KAAK;EAClBC,YAAY,GAAG,GAAG;EAClBC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,iBAAiB;EACjBC,QAAQ;EACRC,QAAQ,GAAGX,eAAe,CAACY;AAC/B,CAAC,KACGR,UAAU,gBACNP,KAAA,CAAAgB,aAAA,CAACf,aAAa;EACVI,gBAAgB,EAAEA,gBAAiB;EACnCC,uBAAuB,EAAEA,uBAAwB;EACjDE,YAAY,EAAEA,YAAa;EAC3BC,KAAK,EAAEA,KAAM;EACbC,QAAQ,EAAEA,QAAS;EACnBC,KAAK,EAAEA,KAAM;EACbC,iBAAiB,EAAEA,iBAAkB;EACrCC,QAAQ,EAAEA;AAAS,CACtB,CAAC,gBAEFb,KAAA,CAAAgB,aAAA,CAACd,aAAa;EAACO,KAAK,EAAEA,KAAM;EAACK,QAAQ,EAAEA;AAAS,CAAE,CACrD;AAELV,OAAO,CAACa,WAAW,GAAG,SAAS;AAE/B,eAAeb,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","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":[]}

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 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     * 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     * 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.js

@@ -1,14 +1,15 @@
 import { uploadFile } from '@chayns-components/core';
 import { createDialog, DialogType } from 'chayns-api';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+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 AddFile from './add-file/AddFile';
 import GalleryEditorItem from './gallery-editor-item/GalleryEditorItem';
 import { StyledGalleryEditor, StyledGalleryEditorGrid } from './GalleryEditor.styles';
-const GalleryEditor = ({
+const GalleryEditor = /*#__PURE__*/forwardRef(({
   allowDragAndDrop = false,
+  addFileIcon = 'fa fa-plus',
   doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',
   fileMinWidth = 100,
   files,
@@ -16,8 +17,11 @@ const GalleryEditor = ({
   onAdd,
   onFileCountChange,
   onRemove
-}) => {
+}, 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) {
@@ -112,6 +116,9 @@ const GalleryEditor = ({
   const handleOpenFiles = useCallback(file => {
     openFiles(fileItems, file);
   }, [fileItems]);
+  useImperativeHandle(ref, () => ({
+    clear: handleClear
+  }), [handleClear]);
   useEffect(() => {
     if (typeof onFileCountChange === 'function') {
       onFileCountChange(fileItems.length);
@@ -175,15 +182,16 @@ const GalleryEditor = ({
     }
     return [...items, /*#__PURE__*/React.createElement(AddFile, {
       key: "add_file",
+      addFileIcon: addFileIcon,
       onAdd: handleAddFiles
     })];
-  }, [fileItems, handleAddFiles, handleDeleteFile, handleOpenFiles, maxFiles]);
+  }, [addFileIcon, fileItems, handleAddFiles, handleDeleteFile, handleOpenFiles, maxFiles]);
   return /*#__PURE__*/React.createElement(StyledGalleryEditor, null, /*#__PURE__*/React.createElement(StyledGalleryEditorGrid, {
     $fileMinWidth: fileMinWidth,
     onDragOver: event => event.preventDefault(),
     onDrop: event => void handleDrop(event)
   }, galleryItems));
-};
+});
 GalleryEditor.displayName = 'GalleryEditor';
 export default GalleryEditor;
 //# sourceMappingURL=GalleryEditor.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"GalleryEditor.js","names":["uploadFile","createDialog","DialogType","React","useCallback","useEffect","useMemo","useState","v4","uuidv4","filterDuplicateFile","generatePreviewUrl","generateVideoThumbnail","openFiles","mapFilesToInternalItems","AddFile","GalleryEditorItem","StyledGalleryEditor","StyledGalleryEditorGrid","GalleryEditor","allowDragAndDrop","doubleFileDialogMessage","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","fileItems","setFileItems","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","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, { DragEvent, FC, useCallback, useEffect, useMemo, useState } 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 } from './GalleryEditor.types';\n\nconst GalleryEditor: FC<GalleryEditorProps> = ({\n    allowDragAndDrop = false,\n    doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',\n    fileMinWidth = 100,\n    files,\n    maxFiles,\n    onAdd,\n    onFileCountChange,\n    onRemove,\n}) => {\n    const [fileItems, setFileItems] = useState<InternalFileItem[]>(() =>\n        mapFilesToInternalItems(files),\n    );\n\n    const handlePreviewUrlCallback = useCallback((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    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(0, Math.max(maxFiles - fileItems.length, 0));\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    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 [...items, <AddFile key=\"add_file\" onAdd={handleAddFiles} />];\n    }, [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\nGalleryEditor.displayName = 'GalleryEditor';\n\nexport default GalleryEditor;\n"],"mappings":"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","ignoreList":[]}
+{"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":[]}

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';\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     * 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"],"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     * 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/add-file/AddFile.js

@@ -2,6 +2,7 @@ import { Icon, selectFiles } from '@chayns-components/core';
 import React, { useCallback } from 'react';
 import { StyledAddFile, StyledAddFIleIconWrapper } from './AddFile.styles';
 const AddFile = ({
+  addFileIcon = 'fa fa-plus',
   onAdd
 }) => {
   const openSelectDialog = useCallback(async () => {
@@ -17,7 +18,7 @@ const AddFile = ({
     onClick: () => void openSelectDialog()
   }, /*#__PURE__*/React.createElement(Icon, {
     size: 40,
-    icons: ['fa fa-plus']
+    icons: [addFileIcon]
   })));
 };
 AddFile.displayName = 'AddFile';

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","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> = ({ 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={['fa fa-plus']} />\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;AAAM,CAAC,KAAK;EAC7C,MAAMC,gBAAgB,GAAGL,WAAW,CAAC,YAAY;IAC7C,MAAMM,KAAK,GAAG,MAAMR,WAAW,CAAC;MAC5BS,QAAQ,EAAE,IAAI;MACdC,IAAI,EAAE;IACV,CAAC,CAAC;IAEFJ,KAAK,CAACE,KAAK,CAAC;EAChB,CAAC,EAAE,CAACF,KAAK,CAAC,CAAC;EAEX,oBACIL,KAAA,CAAAU,aAAA,CAACR,aAAa;IAACS,GAAG,EAAC;EAAW,gBAC1BX,KAAA,CAAAU,aAAA,CAACP,wBAAwB;IAACS,OAAO,EAAEA,CAAA,KAAM,KAAKN,gBAAgB,CAAC;EAAE,gBAC7DN,KAAA,CAAAU,aAAA,CAACZ,IAAI;IAACe,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC,YAAY;EAAE,CAAE,CAClB,CACf,CAAC;AAExB,CAAC;AAEDV,OAAO,CAACW,WAAW,GAAG,SAAS;AAE/B,eAAeX,OAAO","ignoreList":[]}
+{"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":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"AddFile.types.js","names":[],"sources":["../../../../../src/components/gallery-editor/add-file/AddFile.types.ts"],"sourcesContent":["/**\n * Props for the add-file tile inside the gallery editor.\n */\nexport interface AddFileProps {\n    /**\n     * Is called with the selected local files.\n     * @description\n     * The editor add-tile uses this callback after the file picker resolves with the selected local image or video files.\n     * @example\n     * <AddFile onAdd={(files) => console.log(files)} />\n     */\n    onAdd: (files: File[]) => void;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"AddFile.types.js","names":[],"sources":["../../../../../src/components/gallery-editor/add-file/AddFile.types.ts"],"sourcesContent":["/**\n * Props for the add-file tile inside the gallery editor.\n */\nexport interface AddFileProps {\n    /**\n     * Defines the icon that is displayed inside the add-file tile.\n     * @description\n     * This icon is shown in the tile that opens the file picker for adding new items to the gallery.\n     * @default 'fa fa-plus'\n     * @example\n     * <AddFile addFileIcon=\"fa fa-image-circle-plus\" onAdd={(files) => console.log(files)} />\n     * @optional\n     */\n    addFileIcon?: string;\n    /**\n     * Is called with the selected local files.\n     * @description\n     * The editor add-tile uses this callback after the file picker resolves with the selected local image or video files.\n     * @example\n     * <AddFile onAdd={(files) => console.log(files)} />\n     */\n    onAdd: (files: File[]) => void;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","Gallery","GalleryEditor","GalleryViewer","GalleryViewMode"],"sources":["../../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Gallery } from './components/Gallery';\nexport { default as GalleryEditor } from './components/gallery-editor/GalleryEditor';\nexport { default as GalleryViewer } from './components/gallery-viewer/GalleryViewer';\nexport type { GalleryProps } from './components/Gallery.types';\nexport type { GalleryEditorProps } from './components/gallery-editor/GalleryEditor.types';\nexport type { GalleryViewerProps } from './components/gallery-viewer/GalleryViewer.types';\nexport { GalleryViewMode } from './types/gallery';\n"],"mappings":"AAAA;;AAEA,SAASA,OAAO,IAAIC,OAAO,QAAQ,sBAAsB;AACzD,SAASD,OAAO,IAAIE,aAAa,QAAQ,2CAA2C;AACpF,SAASF,OAAO,IAAIG,aAAa,QAAQ,2CAA2C;AAIpF,SAASC,eAAe,QAAQ,iBAAiB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["default","Gallery","GalleryEditor","GalleryViewer","GalleryViewMode"],"sources":["../../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Gallery } from './components/Gallery';\nexport { default as GalleryEditor } from './components/gallery-editor/GalleryEditor';\nexport { default as GalleryViewer } from './components/gallery-viewer/GalleryViewer';\nexport type { GalleryProps, GalleryRef } from './components/Gallery.types';\nexport type {\n    GalleryEditorProps,\n    GalleryEditorRef,\n} from './components/gallery-editor/GalleryEditor.types';\nexport type { GalleryViewerProps } from './components/gallery-viewer/GalleryViewer.types';\nexport { GalleryViewMode } from './types/gallery';\n"],"mappings":"AAAA;;AAEA,SAASA,OAAO,IAAIC,OAAO,QAAQ,sBAAsB;AACzD,SAASD,OAAO,IAAIE,aAAa,QAAQ,2CAA2C;AACpF,SAASF,OAAO,IAAIG,aAAa,QAAQ,2CAA2C;AAOpF,SAASC,eAAe,QAAQ,iBAAiB","ignoreList":[]}

package/lib/types/components/Gallery.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
-import type { GalleryProps } from './Gallery.types';
-declare const Gallery: FC<GalleryProps>;
+import React from 'react';
+import type { GalleryProps, GalleryRef } from './Gallery.types';
+declare const Gallery: React.ForwardRefExoticComponent<GalleryProps & React.RefAttributes<GalleryRef>>;
 export default Gallery;

package/lib/types/components/Gallery.types.d.ts

@@ -3,6 +3,14 @@ import type { GalleryViewMode } from '../types/gallery';
 /**
  * Props for the public Gallery wrapper component.
  */
+export type GalleryRef = {
+    /**
+     * Clears all locally managed gallery items in edit mode.
+     * @description
+     * When the gallery is rendered in read-only mode, calling this method only emits a console warning.
+     */
+    clear: () => void;
+};
 export interface GalleryProps {
     /**
      * Enables drag and drop while the component is used in edit mode.
@@ -34,6 +42,16 @@ export interface GalleryProps {
      * @optional
      */
     fileMinWidth?: number;
+    /**
+     * Defines the icon that is shown in the add-file tile in edit mode.
+     * @description
+     * The icon is forwarded to the editor and replaces the default plus icon on the add-tile.
+     * @default 'fa fa-plus'
+     * @example
+     * <Gallery addFileIcon="fa fa-image-circle-plus" isEditMode files={files} />
+     * @optional
+     */
+    addFileIcon?: string;
     /**
      * Provides already known media items that should be rendered by the gallery.
      * @description

package/lib/types/components/gallery-editor/GalleryEditor.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React from 'react';
 import type { GalleryEditorProps } from './GalleryEditor.types';
-declare const GalleryEditor: FC<GalleryEditorProps>;
+declare const GalleryEditor: React.ForwardRefExoticComponent<GalleryEditorProps & React.RefAttributes<import("../Gallery.types").GalleryRef>>;
 export default GalleryEditor;

package/lib/types/components/gallery-editor/GalleryEditor.types.d.ts

@@ -1,4 +1,5 @@
 import type { FileItem } from '@chayns-components/core';
+import type { GalleryRef } from '../Gallery.types';
 /**
  * Props for the editable gallery component.
  */
@@ -33,6 +34,16 @@ export interface GalleryEditorProps {
      * @optional
      */
     fileMinWidth?: number;
+    /**
+     * Defines the icon that is shown in the add-file tile.
+     * @description
+     * The editor renders this icon inside the tile that opens the file picker for adding more items.
+     * @default 'fa fa-plus'
+     * @example
+     * <GalleryEditor addFileIcon="fa fa-image-circle-plus" files={files} />
+     * @optional
+     */
+    addFileIcon?: string;
     /**
      * Provides already uploaded media items that should be merged into the editor state.
      * @description
@@ -79,3 +90,4 @@ export interface GalleryEditorProps {
      */
     onRemove?: (file: FileItem) => void;
 }
+export type GalleryEditorRef = GalleryRef;

package/lib/types/components/gallery-editor/add-file/AddFile.types.d.ts

@@ -2,6 +2,16 @@
  * Props for the add-file tile inside the gallery editor.
  */
 export interface AddFileProps {
+    /**
+     * Defines the icon that is displayed inside the add-file tile.
+     * @description
+     * This icon is shown in the tile that opens the file picker for adding new items to the gallery.
+     * @default 'fa fa-plus'
+     * @example
+     * <AddFile addFileIcon="fa fa-image-circle-plus" onAdd={(files) => console.log(files)} />
+     * @optional
+     */
+    addFileIcon?: string;
     /**
      * Is called with the selected local files.
      * @description

package/lib/types/index.d.ts

@@ -1,7 +1,7 @@
 export { default as Gallery } from './components/Gallery';
 export { default as GalleryEditor } from './components/gallery-editor/GalleryEditor';
 export { default as GalleryViewer } from './components/gallery-viewer/GalleryViewer';
-export type { GalleryProps } from './components/Gallery.types';
-export type { GalleryEditorProps } from './components/gallery-editor/GalleryEditor.types';
+export type { GalleryProps, GalleryRef } from './components/Gallery.types';
+export type { GalleryEditorProps, GalleryEditorRef, } from './components/gallery-editor/GalleryEditor.types';
 export type { GalleryViewerProps } from './components/gallery-viewer/GalleryViewer.types';
 export { GalleryViewMode } from './types/gallery';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/gallery",
-    "version": "5.2.0",
+    "version": "5.2.3",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -84,5 +84,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "82de2d58db2a74db0a79e51bf153e49da5061fd4"
+    "gitHead": "b66e2010d0ae820378ceb6ac043abe04d5ced46e"
 }