@chayns-components/gallery 5.5.30 → 5.5.33-alpha.0

package/AGENTS.md

@@ -123,6 +123,7 @@ import { Gallery } from '@chayns-components/gallery';
 | `onAdd` | `((file: FileItem) => void) \| undefined` | no | Is called after a file has been uploaded successfully in edit mode. |
 | `onFileCountChange` | `((fileCount: number) => void) \| undefined` | no | Is called whenever the internal item count changes in edit mode. |
 | `onRemove` | `((file: FileItem) => void) \| undefined` | no | Is called after an uploaded file has been removed in edit mode. |
+| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for interactive gallery tiles. |
 | `shouldLoadImages` | `boolean \| undefined` | no | Controls when the gallery is allowed to load the final media assets. |
 | `viewMode` | `GalleryViewMode \| undefined` | no | Defines how known media items are arranged in read-only mode. |
 
@@ -258,6 +259,7 @@ import { GalleryEditor } from '@chayns-components/gallery';
 | `onAdd` | `((file: FileItem) => void) \| undefined` | no | Is called after a file has been uploaded successfully. |
 | `onFileCountChange` | `((fileCount: number) => void) \| undefined` | no | Is called whenever the internal item count changes, including local pending uploads. |
 | `onRemove` | `((file: FileItem) => void) \| undefined` | no | Is called after an uploaded file has been removed. |
+| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for interactive gallery tiles. |
 | `shouldLoadImages` | `boolean \| undefined` | no | Controls whether the editor may load the final media assets immediately. |
 
 ### Types

package/lib/cjs/components/Gallery.js

@@ -22,6 +22,7 @@ const Gallery = /*#__PURE__*/(0, _react.forwardRef)(({
   onFileCountChange,
   onRemove,
   shouldLoadImages = true,
+  shouldEnableKeyboardHighlighting,
   viewMode = _gallery.GalleryViewMode.GRID
 }, ref) => {
   const editorRef = (0, _react.useRef)(null);
@@ -47,9 +48,11 @@ const Gallery = /*#__PURE__*/(0, _react.forwardRef)(({
     onAdd: onAdd,
     onFileCountChange: onFileCountChange,
     onRemove: onRemove,
-    shouldLoadImages: shouldLoadImages
+    shouldLoadImages: shouldLoadImages,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
   }) : /*#__PURE__*/_react.default.createElement(_GalleryViewer.default, {
     files: files,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
     shouldLoadImages: shouldLoadImages,
     viewMode: viewMode
   });

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

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

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

@@ -11,6 +11,7 @@ var _GalleryEditor = require("./GalleryEditor.styles");
 var _GalleryEditorItem = _interopRequireDefault(require("./gallery-editor-item/GalleryEditorItem"));
 var _GalleryEditor2 = require("./GalleryEditor.constants");
 var _useGalleryEditorState = _interopRequireDefault(require("./useGalleryEditorState"));
+var _textstrings = require("@chayns/textstrings");
 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 = /*#__PURE__*/(0, _react2.forwardRef)(({
@@ -23,7 +24,8 @@ const GalleryEditor = /*#__PURE__*/(0, _react2.forwardRef)(({
   onAdd,
   onFileCountChange,
   onRemove,
-  shouldLoadImages = true
+  shouldLoadImages = true,
+  shouldEnableKeyboardHighlighting
 }, ref) => {
   const {
     fileItems,
@@ -45,7 +47,9 @@ const GalleryEditor = /*#__PURE__*/(0, _react2.forwardRef)(({
     clear: handleClear
   }), [handleClear]);
   const shouldShowAddFileTile = !maxFiles || maxFiles > fileItems.length;
-  return /*#__PURE__*/_react2.default.createElement(_GalleryEditor.StyledGalleryEditor, null, /*#__PURE__*/_react2.default.createElement(_GalleryEditor.StyledGalleryEditorGrid, {
+  return /*#__PURE__*/_react2.default.createElement(_textstrings.TextStringProvider, {
+    libraries: "@chayns-components-gallery"
+  }, /*#__PURE__*/_react2.default.createElement(_GalleryEditor.StyledGalleryEditor, null, /*#__PURE__*/_react2.default.createElement(_GalleryEditor.StyledGalleryEditorGrid, {
     $fileMinWidth: fileMinWidth,
     $gap: _GalleryEditor2.GALLERY_EDITOR_GRID_GAP_PX,
     onDragOver: event => event.preventDefault(),
@@ -57,11 +61,13 @@ const GalleryEditor = /*#__PURE__*/(0, _react2.forwardRef)(({
     fileItem: file,
     handleDeleteFile: handleDeleteFile,
     onClick: handleOpenFiles,
-    shouldLoadImages: shouldLoadImages
+    shouldLoadImages: shouldLoadImages,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
   }))), shouldShowAddFileTile && /*#__PURE__*/_react2.default.createElement(_AddFile.default, {
     addFileIcon: addFileIcon,
-    onAdd: handleAddFiles
-  })));
+    onAdd: handleAddFiles,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
+  }))));
 });
 GalleryEditor.displayName = 'GalleryEditor';
 var _default = exports.default = GalleryEditor;

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

@@ -1 +1 @@
-{"version":3,"file":"GalleryEditor.js","names":["_react","require","_react2","_interopRequireWildcard","_AddFile","_interopRequireDefault","_GalleryEditor","_GalleryEditorItem","_GalleryEditor2","_useGalleryEditorState","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","shouldLoadImages","ref","fileItems","handleAddFiles","handleClear","handleDeleteFile","handleDrop","handleOpenFiles","useGalleryEditorState","useImperativeHandle","clear","shouldShowAddFileTile","length","createElement","StyledGalleryEditor","StyledGalleryEditorGrid","$fileMinWidth","$gap","GALLERY_EDITOR_GRID_GAP_PX","onDragOver","event","preventDefault","onDrop","AnimatePresence","initial","map","file","key","id","fileItem","onClick","displayName","_default","exports"],"sources":["../../../../src/components/gallery-editor/GalleryEditor.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { forwardRef, useImperativeHandle } from 'react';\nimport AddFile from './add-file/AddFile';\nimport { StyledGalleryEditor, StyledGalleryEditorGrid } from './GalleryEditor.styles';\nimport type { GalleryEditorProps, GalleryEditorRef } from './GalleryEditor.types';\nimport GalleryEditorItem from './gallery-editor-item/GalleryEditorItem';\nimport { GALLERY_EDITOR_GRID_GAP_PX } from './GalleryEditor.constants';\nimport useGalleryEditorState from './useGalleryEditorState';\n\nconst GalleryEditor = forwardRef<GalleryEditorRef, GalleryEditorProps>(\n    (\n        {\n            allowDragAndDrop = false,\n            addFileIcon = 'fa fa-plus',\n            doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',\n            fileMinWidth = 100,\n            files,\n            maxFiles,\n            onAdd,\n            onFileCountChange,\n            onRemove,\n            shouldLoadImages = true,\n        },\n        ref,\n    ) => {\n        const {\n            fileItems,\n            handleAddFiles,\n            handleClear,\n            handleDeleteFile,\n            handleDrop,\n            handleOpenFiles,\n        } = useGalleryEditorState({\n            allowDragAndDrop,\n            doubleFileDialogMessage,\n            files,\n            maxFiles,\n            onAdd,\n            onFileCountChange,\n            onRemove,\n        });\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: handleClear,\n            }),\n            [handleClear],\n        );\n\n        const shouldShowAddFileTile = !maxFiles || maxFiles > fileItems.length;\n\n        return (\n            <StyledGalleryEditor>\n                <StyledGalleryEditorGrid\n                    $fileMinWidth={fileMinWidth}\n                    $gap={GALLERY_EDITOR_GRID_GAP_PX}\n                    onDragOver={(event) => event.preventDefault()}\n                    onDrop={(event) => void handleDrop(event)}\n                >\n                    <AnimatePresence initial={false}>\n                        {fileItems.map((file) => (\n                            <GalleryEditorItem\n                                key={file.id}\n                                fileItem={file}\n                                handleDeleteFile={handleDeleteFile}\n                                onClick={handleOpenFiles}\n                                shouldLoadImages={shouldLoadImages}\n                            />\n                        ))}\n                    </AnimatePresence>\n\n                    {shouldShowAddFileTile && (\n                        <AddFile addFileIcon={addFileIcon} onAdd={handleAddFiles} />\n                    )}\n                </StyledGalleryEditorGrid>\n            </StyledGalleryEditor>\n        );\n    },\n);\n\nGalleryEditor.displayName = 'GalleryEditor';\n\nexport default GalleryEditor;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"GalleryEditor.js","names":["_react","require","_react2","_interopRequireWildcard","_AddFile","_interopRequireDefault","_GalleryEditor","_GalleryEditorItem","_GalleryEditor2","_useGalleryEditorState","_textstrings","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","shouldLoadImages","shouldEnableKeyboardHighlighting","ref","fileItems","handleAddFiles","handleClear","handleDeleteFile","handleDrop","handleOpenFiles","useGalleryEditorState","useImperativeHandle","clear","shouldShowAddFileTile","length","createElement","TextStringProvider","libraries","StyledGalleryEditor","StyledGalleryEditorGrid","$fileMinWidth","$gap","GALLERY_EDITOR_GRID_GAP_PX","onDragOver","event","preventDefault","onDrop","AnimatePresence","initial","map","file","key","id","fileItem","onClick","displayName","_default","exports"],"sources":["../../../../src/components/gallery-editor/GalleryEditor.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { forwardRef, useImperativeHandle } from 'react';\nimport AddFile from './add-file/AddFile';\nimport { StyledGalleryEditor, StyledGalleryEditorGrid } from './GalleryEditor.styles';\nimport type { GalleryEditorProps, GalleryEditorRef } from './GalleryEditor.types';\nimport GalleryEditorItem from './gallery-editor-item/GalleryEditorItem';\nimport { GALLERY_EDITOR_GRID_GAP_PX } from './GalleryEditor.constants';\nimport useGalleryEditorState from './useGalleryEditorState';\nimport { TextStringProvider } from '@chayns/textstrings';\n\nconst GalleryEditor = forwardRef<GalleryEditorRef, GalleryEditorProps>(\n    (\n        {\n            allowDragAndDrop = false,\n            addFileIcon = 'fa fa-plus',\n            doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',\n            fileMinWidth = 100,\n            files,\n            maxFiles,\n            onAdd,\n            onFileCountChange,\n            onRemove,\n            shouldLoadImages = true,\n            shouldEnableKeyboardHighlighting,\n        },\n        ref,\n    ) => {\n        const {\n            fileItems,\n            handleAddFiles,\n            handleClear,\n            handleDeleteFile,\n            handleDrop,\n            handleOpenFiles,\n        } = useGalleryEditorState({\n            allowDragAndDrop,\n            doubleFileDialogMessage,\n            files,\n            maxFiles,\n            onAdd,\n            onFileCountChange,\n            onRemove,\n        });\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: handleClear,\n            }),\n            [handleClear],\n        );\n\n        const shouldShowAddFileTile = !maxFiles || maxFiles > fileItems.length;\n\n        return (\n            <TextStringProvider libraries=\"@chayns-components-gallery\">\n                <StyledGalleryEditor>\n                    <StyledGalleryEditorGrid\n                        $fileMinWidth={fileMinWidth}\n                        $gap={GALLERY_EDITOR_GRID_GAP_PX}\n                        onDragOver={(event) => event.preventDefault()}\n                        onDrop={(event) => void handleDrop(event)}\n                    >\n                        <AnimatePresence initial={false}>\n                            {fileItems.map((file) => (\n                                <GalleryEditorItem\n                                    key={file.id}\n                                    fileItem={file}\n                                    handleDeleteFile={handleDeleteFile}\n                                    onClick={handleOpenFiles}\n                                    shouldLoadImages={shouldLoadImages}\n                                    shouldEnableKeyboardHighlighting={\n                                        shouldEnableKeyboardHighlighting\n                                    }\n                                />\n                            ))}\n                        </AnimatePresence>\n\n                        {shouldShowAddFileTile && (\n                            <AddFile\n                                addFileIcon={addFileIcon}\n                                onAdd={handleAddFiles}\n                                shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                            />\n                        )}\n                    </StyledGalleryEditorGrid>\n                </StyledGalleryEditor>\n            </TextStringProvider>\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';\nimport type { GalleryRef } from '../Gallery.types';\n\n/**\n * Props for the editable gallery component.\n */\nexport interface GalleryEditorProps {\n    /**\n     * Enables drag and drop file selection inside the editor grid.\n     * @description\n     * When enabled, users can drop local image or video files onto the editor grid to start the upload flow.\n     * @default false\n     * @example\n     * <GalleryEditor allowDragAndDrop files={files} />\n     * @optional\n     */\n    allowDragAndDrop?: boolean;\n    /**\n     * Defines the dialog message that is shown when a duplicate upload is detected.\n     * @description\n     * The message is shown when a newly uploaded file resolves to a URL that already exists in the editor state.\n     * @default 'Diese Datei ist bereits vorhanden'\n     * @example\n     * <GalleryEditor doubleFileDialogMessage=\"This file already exists.\" files={files} />\n     * @optional\n     */\n    doubleFileDialogMessage?: string;\n    /**\n     * Defines the minimum width of one tile in the editor grid.\n     * @description\n     * The editor uses this value to size the responsive grid columns that hold uploaded items and the add-tile.\n     * @default 100\n     * @example\n     * <GalleryEditor fileMinWidth={140} files={files} />\n     * @optional\n     */\n    fileMinWidth?: number;\n    /**\n     * Defines the icon that is shown in the add-file tile.\n     * @description\n     * The editor renders this icon inside the tile that opens the file picker for adding more items.\n     * @default 'fa fa-plus'\n     * @example\n     * <GalleryEditor addFileIcon=\"fa fa-image-circle-plus\" files={files} />\n     * @optional\n     */\n    addFileIcon?: string;\n    /**\n     * Provides already uploaded media items that should be merged into the editor state.\n     * @description\n     * These files represent the externally known uploaded baseline. The editor may additionally hold local pending uploads.\n     * @example\n     * <GalleryEditor files={files} />\n     * @optional\n     */\n    files?: FileItem[];\n    /**\n     * Controls whether the editor may load the final media assets immediately.\n     * @description\n     * When set to `true`, the editor behaves like the current implementation and loads the final media immediately.\n     * When set to `false`, uploaded media keeps rendering previews first and delays the final image load until this flag becomes `true`.\n     * @default true\n     * @example\n     * <GalleryEditor files={files} shouldLoadImages={false} />\n     * @optional\n     */\n    shouldLoadImages?: boolean;\n    /**\n     * Limits how many files can be managed by the editor.\n     * @description\n     * After the limit is reached, the add-tile is hidden and additional file selection is ignored.\n     * @example\n     * <GalleryEditor files={files} maxFiles={6} />\n     * @optional\n     */\n    maxFiles?: number;\n    /**\n     * Is called after a file has been uploaded successfully.\n     * @description\n     * The callback receives the uploaded file representation so the consuming state can persist it externally.\n     * @example\n     * <GalleryEditor onAdd={(file) => setFiles((prev) => [...prev, file])} />\n     * @optional\n     */\n    onAdd?: (file: FileItem) => void;\n    /**\n     * Is called whenever the internal item count changes, including local pending uploads.\n     * @description\n     * Use this callback when surrounding UI needs to react to the number of currently managed items.\n     * @example\n     * <GalleryEditor onFileCountChange={(count) => console.log(count)} />\n     * @optional\n     */\n    onFileCountChange?: (fileCount: number) => void;\n    /**\n     * Is called after an uploaded file has been removed.\n     * @description\n     * The callback receives the removed uploaded file so the consuming state can remove it from its controlled `files` array.\n     * @example\n     * <GalleryEditor onRemove={(file) => removeFile(file.id)} />\n     * @optional\n     */\n    onRemove?: (file: FileItem) => void;\n}\n\nexport type GalleryEditorRef = GalleryRef;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"GalleryEditor.types.js","names":[],"sources":["../../../../src/components/gallery-editor/GalleryEditor.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport type { GalleryRef } from '../Gallery.types';\n\n/**\n * Props for the editable gallery component.\n */\nexport interface GalleryEditorProps {\n    /**\n     * Enables drag and drop file selection inside the editor grid.\n     * @description\n     * When enabled, users can drop local image or video files onto the editor grid to start the upload flow.\n     * @default false\n     * @example\n     * <GalleryEditor allowDragAndDrop files={files} />\n     * @optional\n     */\n    allowDragAndDrop?: boolean;\n    /**\n     * Defines the dialog message that is shown when a duplicate upload is detected.\n     * @description\n     * The message is shown when a newly uploaded file resolves to a URL that already exists in the editor state.\n     * @default 'Diese Datei ist bereits vorhanden'\n     * @example\n     * <GalleryEditor doubleFileDialogMessage=\"This file already exists.\" files={files} />\n     * @optional\n     */\n    doubleFileDialogMessage?: string;\n    /**\n     * Defines the minimum width of one tile in the editor grid.\n     * @description\n     * The editor uses this value to size the responsive grid columns that hold uploaded items and the add-tile.\n     * @default 100\n     * @example\n     * <GalleryEditor fileMinWidth={140} files={files} />\n     * @optional\n     */\n    fileMinWidth?: number;\n    /**\n     * Defines the icon that is shown in the add-file tile.\n     * @description\n     * The editor renders this icon inside the tile that opens the file picker for adding more items.\n     * @default 'fa fa-plus'\n     * @example\n     * <GalleryEditor addFileIcon=\"fa fa-image-circle-plus\" files={files} />\n     * @optional\n     */\n    addFileIcon?: string;\n    /**\n     * Provides already uploaded media items that should be merged into the editor state.\n     * @description\n     * These files represent the externally known uploaded baseline. The editor may additionally hold local pending uploads.\n     * @example\n     * <GalleryEditor files={files} />\n     * @optional\n     */\n    files?: FileItem[];\n    /**\n     * Controls whether the editor may load the final media assets immediately.\n     * @description\n     * When set to `true`, the editor behaves like the current implementation and loads the final media immediately.\n     * When set to `false`, uploaded media keeps rendering previews first and delays the final image load until this flag becomes `true`.\n     * @default true\n     * @example\n     * <GalleryEditor files={files} shouldLoadImages={false} />\n     * @optional\n     */\n    shouldLoadImages?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting for interactive gallery tiles.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n    /**\n     * Limits how many files can be managed by the editor.\n     * @description\n     * After the limit is reached, the add-tile is hidden and additional file selection is ignored.\n     * @example\n     * <GalleryEditor files={files} maxFiles={6} />\n     * @optional\n     */\n    maxFiles?: number;\n    /**\n     * Is called after a file has been uploaded successfully.\n     * @description\n     * The callback receives the uploaded file representation so the consuming state can persist it externally.\n     * @example\n     * <GalleryEditor onAdd={(file) => setFiles((prev) => [...prev, file])} />\n     * @optional\n     */\n    onAdd?: (file: FileItem) => void;\n    /**\n     * Is called whenever the internal item count changes, including local pending uploads.\n     * @description\n     * Use this callback when surrounding UI needs to react to the number of currently managed items.\n     * @example\n     * <GalleryEditor onFileCountChange={(count) => console.log(count)} />\n     * @optional\n     */\n    onFileCountChange?: (fileCount: number) => void;\n    /**\n     * Is called after an uploaded file has been removed.\n     * @description\n     * The callback receives the removed uploaded file so the consuming state can remove it from its controlled `files` array.\n     * @example\n     * <GalleryEditor onRemove={(file) => removeFile(file.id)} />\n     * @optional\n     */\n    onRemove?: (file: FileItem) => void;\n}\n\nexport type GalleryEditorRef = GalleryRef;\n"],"mappings":"","ignoreList":[]}

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

@@ -10,8 +10,14 @@ 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
+  onAdd,
+  shouldEnableKeyboardHighlighting
 }) => {
+  const iconWrapperRef = (0, _react.useRef)(null);
+  const shouldShowKeyboardHighlighting = (0, _core.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting);
+  (0, _core.useFocusRingPortal)(iconWrapperRef, {
+    isEnabled: shouldShowKeyboardHighlighting
+  });
   const openSelectDialog = (0, _react.useCallback)(async () => {
     const files = await (0, _core.selectFiles)({
       multiple: true,
@@ -19,10 +25,18 @@ const AddFile = ({
     });
     onAdd(files);
   }, [onAdd]);
+  const handleKeyDown = (0, _react.useCallback)(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      void openSelectDialog();
+    }
+  }, [openSelectDialog]);
   return /*#__PURE__*/_react.default.createElement(_AddFile.StyledAddFile, {
     key: "addButton"
   }, /*#__PURE__*/_react.default.createElement(_AddFile.StyledAddFIleIconWrapper, {
-    onClick: () => void openSelectDialog()
+    ref: iconWrapperRef,
+    onClick: () => void openSelectDialog(),
+    onKeyDown: handleKeyDown
   }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
     size: 40,
     icons: [addFileIcon]

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","addFileIcon","onAdd","openSelectDialog","useCallback","files","selectFiles","multiple","type","createElement","StyledAddFile","key","StyledAddFIleIconWrapper","onClick","Icon","size","icons","displayName","_default","exports","memo"],"sources":["../../../../../src/components/gallery-editor/add-file/AddFile.tsx"],"sourcesContent":["import { Icon, selectFiles } from '@chayns-components/core';\nimport React, { FC, memo, useCallback } from 'react';\nimport { StyledAddFile, StyledAddFIleIconWrapper } from './AddFile.styles';\nimport type { AddFileProps } from './AddFile.types';\n\nconst AddFile: FC<AddFileProps> = ({ addFileIcon = 'fa fa-plus', onAdd }) => {\n    const openSelectDialog = useCallback(async () => {\n        const files = await selectFiles({\n            multiple: true,\n            type: 'image/*, video/*',\n        });\n\n        onAdd(files);\n    }, [onAdd]);\n\n    return (\n        <StyledAddFile key=\"addButton\">\n            <StyledAddFIleIconWrapper onClick={() => void openSelectDialog()}>\n                <Icon size={40} icons={[addFileIcon]} />\n            </StyledAddFIleIconWrapper>\n        </StyledAddFile>\n    );\n};\n\nAddFile.displayName = 'AddFile';\n\nexport default memo(AddFile);\n"],"mappings":";;;;;;AAAA,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,gBAEjB,IAAA6B,WAAI,EAACpB,OAAO,CAAC","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","shouldEnableKeyboardHighlighting","iconWrapperRef","useRef","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","openSelectDialog","useCallback","files","selectFiles","multiple","type","handleKeyDown","event","key","preventDefault","createElement","StyledAddFile","StyledAddFIleIconWrapper","ref","onClick","onKeyDown","Icon","size","icons","displayName","_default","exports","memo"],"sources":["../../../../../src/components/gallery-editor/add-file/AddFile.tsx"],"sourcesContent":["import {\n    Icon,\n    selectFiles,\n    useFocusRingPortal,\n    useKeyboardFocusHighlighting,\n} from '@chayns-components/core';\nimport React, { FC, KeyboardEventHandler, memo, useCallback, useRef } from 'react';\nimport { StyledAddFile, StyledAddFIleIconWrapper } from './AddFile.styles';\nimport type { AddFileProps } from './AddFile.types';\n\nconst AddFile: FC<AddFileProps> = ({\n    addFileIcon = 'fa fa-plus',\n    onAdd,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const iconWrapperRef = useRef<HTMLButtonElement>(null);\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting,\n    );\n    useFocusRingPortal(iconWrapperRef, { isEnabled: shouldShowKeyboardHighlighting });\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    const handleKeyDown = useCallback<KeyboardEventHandler<HTMLButtonElement>>(\n        (event) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                void openSelectDialog();\n            }\n        },\n        [openSelectDialog],\n    );\n\n    return (\n        <StyledAddFile key=\"addButton\">\n            <StyledAddFIleIconWrapper\n                ref={iconWrapperRef}\n                onClick={() => void openSelectDialog()}\n                onKeyDown={handleKeyDown}\n            >\n                <Icon size={40} icons={[addFileIcon]} />\n            </StyledAddFIleIconWrapper>\n        </StyledAddFile>\n    );\n};\n\nAddFile.displayName = 'AddFile';\n\nexport default memo(AddFile);\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAMA,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;EAC/BC,WAAW,GAAG,YAAY;EAC1BC,KAAK;EACLC;AACJ,CAAC,KAAK;EACF,MAAMC,cAAc,GAAG,IAAAC,aAAM,EAAoB,IAAI,CAAC;EACtD,MAAMC,8BAA8B,GAAG,IAAAC,kCAA4B,EAC/DJ,gCACJ,CAAC;EACD,IAAAK,wBAAkB,EAACJ,cAAc,EAAE;IAAEK,SAAS,EAAEH;EAA+B,CAAC,CAAC;EACjF,MAAMI,gBAAgB,GAAG,IAAAC,kBAAW,EAAC,YAAY;IAC7C,MAAMC,KAAK,GAAG,MAAM,IAAAC,iBAAW,EAAC;MAC5BC,QAAQ,EAAE,IAAI;MACdC,IAAI,EAAE;IACV,CAAC,CAAC;IAEFb,KAAK,CAACU,KAAK,CAAC;EAChB,CAAC,EAAE,CAACV,KAAK,CAAC,CAAC;EAEX,MAAMc,aAAa,GAAG,IAAAL,kBAAW,EAC5BM,KAAK,IAAK;IACP,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC5CD,KAAK,CAACE,cAAc,CAAC,CAAC;MACtB,KAAKT,gBAAgB,CAAC,CAAC;IAC3B;EACJ,CAAC,EACD,CAACA,gBAAgB,CACrB,CAAC;EAED,oBACIhC,MAAA,CAAAa,OAAA,CAAA6B,aAAA,CAACxC,QAAA,CAAAyC,aAAa;IAACH,GAAG,EAAC;EAAW,gBAC1BxC,MAAA,CAAAa,OAAA,CAAA6B,aAAA,CAACxC,QAAA,CAAA0C,wBAAwB;IACrBC,GAAG,EAAEnB,cAAe;IACpBoB,OAAO,EAAEA,CAAA,KAAM,KAAKd,gBAAgB,CAAC,CAAE;IACvCe,SAAS,EAAET;EAAc,gBAEzBtC,MAAA,CAAAa,OAAA,CAAA6B,aAAA,CAAC5C,KAAA,CAAAkD,IAAI;IAACC,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC3B,WAAW;EAAE,CAAE,CACjB,CACf,CAAC;AAExB,CAAC;AAEDD,OAAO,CAAC6B,WAAW,GAAG,SAAS;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAxC,OAAA,gBAEjB,IAAAyC,WAAI,EAAChC,OAAO,CAAC","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     * 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":[]}
+{"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     * Enables keyboard-only focus highlighting for the add-file button.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n}\n"],"mappings":"","ignoreList":[]}

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

@@ -10,15 +10,27 @@ var _GalleryEditorItem = require("./GalleryEditorItem.styles");
 var _GalleryEditorMediaItem = _interopRequireDefault(require("./gallery-editor-media-item/GalleryEditorMediaItem"));
 var _GalleryEditorPreviewItem = _interopRequireDefault(require("./gallery-editor-preview-item/GalleryEditorPreviewItem"));
 var _GalleryEditor = require("../GalleryEditor.constants");
+var _textstrings = require("@chayns/textstrings");
+var _textStrings = _interopRequireDefault(require("../../../constants/textStrings"));
 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 GalleryEditorItem = ({
   fileItem,
   handleDeleteFile,
   shouldLoadImages = true,
+  shouldEnableKeyboardHighlighting,
   ratio = 1,
   onClick
 }) => {
+  const {
+    t
+  } = (0, _textstrings.useTranslation)();
+  const deleteButtonRef = (0, _react.useRef)(null);
+  const shouldShowKeyboardHighlighting = (0, _core.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting);
+  (0, _core.useFocusRingPortal)(deleteButtonRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    padding: -1
+  });
   const shouldRenderPreview = fileItem.state === 'uploading';
   const shouldRenderMedia = fileItem.state !== 'none' && (Boolean(fileItem.previewUrl) || Boolean(fileItem.uploadedFile));
   let mediaContent = null;
@@ -33,7 +45,8 @@ const GalleryEditorItem = ({
       ratio: ratio,
       openSelectedFile: onClick,
       previewUrl: fileItem.previewUrl,
-      shouldLoadImages: shouldLoadImages
+      shouldLoadImages: shouldLoadImages,
+      shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
     });
   }
   return /*#__PURE__*/_react.default.createElement(_GalleryEditorItem.StyledMotionGalleryEditorItem, {
@@ -53,13 +66,14 @@ const GalleryEditorItem = ({
       duration: _GalleryEditor.GALLERY_EDITOR_ITEM_FADE_DURATION_S
     }
   }, mediaContent, /*#__PURE__*/_react.default.createElement(_GalleryEditorItem.StyledGalleryEditorItemDeleteButton, {
+    ref: deleteButtonRef,
     type: "button",
     onClick: event => {
       event.stopPropagation();
       handleDeleteFile(fileItem.id);
     },
     $zIndex: _GalleryEditor.GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX,
-    "aria-label": "Bild entfernen"
+    "aria-label": t(_textStrings.default.galleryEditor.accessibility.removeImage)
   }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
     size: 20,
     icons: ['ts-wrong']

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

@@ -1 +1 @@
-{"version":3,"file":"GalleryEditorItem.js","names":["_core","require","_react","_interopRequireWildcard","_GalleryEditorItem","_GalleryEditorMediaItem","_interopRequireDefault","_GalleryEditorPreviewItem","_GalleryEditor","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GalleryEditorItem","fileItem","handleDeleteFile","shouldLoadImages","ratio","onClick","shouldRenderPreview","state","shouldRenderMedia","Boolean","previewUrl","uploadedFile","mediaContent","createElement","openSelectedFile","StyledMotionGalleryEditorItem","initial","opacity","scale","animate","exit","transition","duration","GALLERY_EDITOR_ITEM_FADE_DURATION_S","StyledGalleryEditorItemDeleteButton","type","event","stopPropagation","id","$zIndex","GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX","Icon","size","icons","displayName","_default","exports","memo"],"sources":["../../../../../src/components/gallery-editor/gallery-editor-item/GalleryEditorItem.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport React, { FC, ReactNode, memo } from 'react';\nimport {\n    StyledMotionGalleryEditorItem,\n    StyledGalleryEditorItemDeleteButton,\n} from './GalleryEditorItem.styles';\nimport GalleryEditorMediaItem from './gallery-editor-media-item/GalleryEditorMediaItem';\nimport GalleryEditorPreviewItem from './gallery-editor-preview-item/GalleryEditorPreviewItem';\nimport type { GalleryEditorItemProps } from './GalleryEditorItem.types';\nimport {\n    GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX,\n    GALLERY_EDITOR_ITEM_FADE_DURATION_S,\n} from '../GalleryEditor.constants';\n\nconst GalleryEditorItem: FC<GalleryEditorItemProps> = ({\n    fileItem,\n    handleDeleteFile,\n    shouldLoadImages = true,\n    ratio = 1,\n    onClick,\n}) => {\n    const shouldRenderPreview = fileItem.state === 'uploading';\n    const shouldRenderMedia =\n        fileItem.state !== 'none' &&\n        (Boolean(fileItem.previewUrl) || Boolean(fileItem.uploadedFile));\n\n    let mediaContent: ReactNode = null;\n\n    if (shouldRenderPreview) {\n        mediaContent = <GalleryEditorPreviewItem ratio={ratio} fileItem={fileItem} />;\n    } else if (shouldRenderMedia) {\n        mediaContent = (\n            <GalleryEditorMediaItem\n                fileItem={fileItem}\n                ratio={ratio}\n                openSelectedFile={onClick}\n                previewUrl={fileItem.previewUrl}\n                shouldLoadImages={shouldLoadImages}\n            />\n        );\n    }\n\n    return (\n        <StyledMotionGalleryEditorItem\n            initial={{ opacity: 0, scale: 0.98 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.98 }}\n            transition={{ duration: GALLERY_EDITOR_ITEM_FADE_DURATION_S }}\n        >\n            {mediaContent}\n            <StyledGalleryEditorItemDeleteButton\n                type=\"button\"\n                onClick={(event) => {\n                    event.stopPropagation();\n                    handleDeleteFile(fileItem.id);\n                }}\n                $zIndex={GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX}\n                aria-label=\"Bild entfernen\"\n            >\n                <Icon size={20} icons={['ts-wrong']} />\n            </StyledGalleryEditorItemDeleteButton>\n        </StyledMotionGalleryEditorItem>\n    );\n};\n\nGalleryEditorItem.displayName = 'GalleryEditorItem';\n\nexport default memo(GalleryEditorItem);\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AAIA,IAAAI,uBAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,yBAAA,GAAAD,sBAAA,CAAAL,OAAA;AAEA,IAAAO,cAAA,GAAAP,OAAA;AAGoC,SAAAK,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAM,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAEpC,MAAMgB,iBAA6C,GAAGA,CAAC;EACnDC,QAAQ;EACRC,gBAAgB;EAChBC,gBAAgB,GAAG,IAAI;EACvBC,KAAK,GAAG,CAAC;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,mBAAmB,GAAGL,QAAQ,CAACM,KAAK,KAAK,WAAW;EAC1D,MAAMC,iBAAiB,GACnBP,QAAQ,CAACM,KAAK,KAAK,MAAM,KACxBE,OAAO,CAACR,QAAQ,CAACS,UAAU,CAAC,IAAID,OAAO,CAACR,QAAQ,CAACU,YAAY,CAAC,CAAC;EAEpE,IAAIC,YAAuB,GAAG,IAAI;EAElC,IAAIN,mBAAmB,EAAE;IACrBM,YAAY,gBAAGtC,MAAA,CAAAS,OAAA,CAAA8B,aAAA,CAAClC,yBAAA,CAAAI,OAAwB;MAACqB,KAAK,EAAEA,KAAM;MAACH,QAAQ,EAAEA;IAAS,CAAE,CAAC;EACjF,CAAC,MAAM,IAAIO,iBAAiB,EAAE;IAC1BI,YAAY,gBACRtC,MAAA,CAAAS,OAAA,CAAA8B,aAAA,CAACpC,uBAAA,CAAAM,OAAsB;MACnBkB,QAAQ,EAAEA,QAAS;MACnBG,KAAK,EAAEA,KAAM;MACbU,gBAAgB,EAAET,OAAQ;MAC1BK,UAAU,EAAET,QAAQ,CAACS,UAAW;MAChCP,gBAAgB,EAAEA;IAAiB,CACtC,CACJ;EACL;EAEA,oBACI7B,MAAA,CAAAS,OAAA,CAAA8B,aAAA,CAACrC,kBAAA,CAAAuC,6BAA6B;IAC1BC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAK,CAAE;IACrCC,OAAO,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAE;IAClCE,IAAI,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAK,CAAE;IAClCG,UAAU,EAAE;MAAEC,QAAQ,EAAEC;IAAoC;EAAE,GAE7DX,YAAY,eACbtC,MAAA,CAAAS,OAAA,CAAA8B,aAAA,CAACrC,kBAAA,CAAAgD,mCAAmC;IAChCC,IAAI,EAAC,QAAQ;IACbpB,OAAO,EAAGqB,KAAK,IAAK;MAChBA,KAAK,CAACC,eAAe,CAAC,CAAC;MACvBzB,gBAAgB,CAACD,QAAQ,CAAC2B,EAAE,CAAC;IACjC,CAAE;IACFC,OAAO,EAAEC,mDAAqC;IAC9C,cAAW;EAAgB,gBAE3BxD,MAAA,CAAAS,OAAA,CAAA8B,aAAA,CAACzC,KAAA,CAAA2D,IAAI;IAACC,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC,UAAU;EAAE,CAAE,CACL,CACV,CAAC;AAExC,CAAC;AAEDjC,iBAAiB,CAACkC,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAArD,OAAA,gBAErC,IAAAsD,WAAI,EAACrC,iBAAiB,CAAC","ignoreList":[]}
+{"version":3,"file":"GalleryEditorItem.js","names":["_core","require","_react","_interopRequireWildcard","_GalleryEditorItem","_GalleryEditorMediaItem","_interopRequireDefault","_GalleryEditorPreviewItem","_GalleryEditor","_textstrings","_textStrings","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GalleryEditorItem","fileItem","handleDeleteFile","shouldLoadImages","shouldEnableKeyboardHighlighting","ratio","onClick","useTranslation","deleteButtonRef","useRef","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","padding","shouldRenderPreview","state","shouldRenderMedia","Boolean","previewUrl","uploadedFile","mediaContent","createElement","openSelectedFile","StyledMotionGalleryEditorItem","initial","opacity","scale","animate","exit","transition","duration","GALLERY_EDITOR_ITEM_FADE_DURATION_S","StyledGalleryEditorItemDeleteButton","ref","type","event","stopPropagation","id","$zIndex","GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX","textStrings","galleryEditor","accessibility","removeImage","Icon","size","icons","displayName","_default","exports","memo"],"sources":["../../../../../src/components/gallery-editor/gallery-editor-item/GalleryEditorItem.tsx"],"sourcesContent":["import { Icon, useFocusRingPortal, useKeyboardFocusHighlighting } from '@chayns-components/core';\nimport React, { FC, ReactNode, memo, useRef } from 'react';\nimport {\n    StyledMotionGalleryEditorItem,\n    StyledGalleryEditorItemDeleteButton,\n} from './GalleryEditorItem.styles';\nimport GalleryEditorMediaItem from './gallery-editor-media-item/GalleryEditorMediaItem';\nimport GalleryEditorPreviewItem from './gallery-editor-preview-item/GalleryEditorPreviewItem';\nimport type { GalleryEditorItemProps } from './GalleryEditorItem.types';\nimport {\n    GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX,\n    GALLERY_EDITOR_ITEM_FADE_DURATION_S,\n} from '../GalleryEditor.constants';\nimport { useTranslation } from '@chayns/textstrings';\nimport textStrings from '../../../constants/textStrings';\n\nconst GalleryEditorItem: FC<GalleryEditorItemProps> = ({\n    fileItem,\n    handleDeleteFile,\n    shouldLoadImages = true,\n    shouldEnableKeyboardHighlighting,\n    ratio = 1,\n    onClick,\n}) => {\n    const { t } = useTranslation();\n    const deleteButtonRef = useRef<HTMLButtonElement>(null);\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting,\n    );\n    useFocusRingPortal(deleteButtonRef, { isEnabled: shouldShowKeyboardHighlighting, padding: -1 });\n\n    const shouldRenderPreview = fileItem.state === 'uploading';\n    const shouldRenderMedia =\n        fileItem.state !== 'none' &&\n        (Boolean(fileItem.previewUrl) || Boolean(fileItem.uploadedFile));\n\n    let mediaContent: ReactNode = null;\n\n    if (shouldRenderPreview) {\n        mediaContent = <GalleryEditorPreviewItem ratio={ratio} fileItem={fileItem} />;\n    } else if (shouldRenderMedia) {\n        mediaContent = (\n            <GalleryEditorMediaItem\n                fileItem={fileItem}\n                ratio={ratio}\n                openSelectedFile={onClick}\n                previewUrl={fileItem.previewUrl}\n                shouldLoadImages={shouldLoadImages}\n                shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n            />\n        );\n    }\n\n    return (\n        <StyledMotionGalleryEditorItem\n            initial={{ opacity: 0, scale: 0.98 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.98 }}\n            transition={{ duration: GALLERY_EDITOR_ITEM_FADE_DURATION_S }}\n        >\n            {mediaContent}\n            <StyledGalleryEditorItemDeleteButton\n                ref={deleteButtonRef}\n                type=\"button\"\n                onClick={(event) => {\n                    event.stopPropagation();\n                    handleDeleteFile(fileItem.id);\n                }}\n                $zIndex={GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX}\n                aria-label={t(textStrings.galleryEditor.accessibility.removeImage)}\n            >\n                <Icon size={20} icons={['ts-wrong']} />\n            </StyledGalleryEditorItemDeleteButton>\n        </StyledMotionGalleryEditorItem>\n    );\n};\n\nGalleryEditorItem.displayName = 'GalleryEditorItem';\n\nexport default memo(GalleryEditorItem);\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AAIA,IAAAI,uBAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,yBAAA,GAAAD,sBAAA,CAAAL,OAAA;AAEA,IAAAO,cAAA,GAAAP,OAAA;AAIA,IAAAQ,YAAA,GAAAR,OAAA;AACA,IAAAS,YAAA,GAAAJ,sBAAA,CAAAL,OAAA;AAAyD,SAAAK,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAZ,uBAAA,YAAAA,CAAAQ,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAEzD,MAAMgB,iBAA6C,GAAGA,CAAC;EACnDC,QAAQ;EACRC,gBAAgB;EAChBC,gBAAgB,GAAG,IAAI;EACvBC,gCAAgC;EAChCC,KAAK,GAAG,CAAC;EACTC;AACJ,CAAC,KAAK;EACF,MAAM;IAAEtB;EAAE,CAAC,GAAG,IAAAuB,2BAAc,EAAC,CAAC;EAC9B,MAAMC,eAAe,GAAG,IAAAC,aAAM,EAAoB,IAAI,CAAC;EACvD,MAAMC,8BAA8B,GAAG,IAAAC,kCAA4B,EAC/DP,gCACJ,CAAC;EACD,IAAAQ,wBAAkB,EAACJ,eAAe,EAAE;IAAEK,SAAS,EAAEH,8BAA8B;IAAEI,OAAO,EAAE,CAAC;EAAE,CAAC,CAAC;EAE/F,MAAMC,mBAAmB,GAAGd,QAAQ,CAACe,KAAK,KAAK,WAAW;EAC1D,MAAMC,iBAAiB,GACnBhB,QAAQ,CAACe,KAAK,KAAK,MAAM,KACxBE,OAAO,CAACjB,QAAQ,CAACkB,UAAU,CAAC,IAAID,OAAO,CAACjB,QAAQ,CAACmB,YAAY,CAAC,CAAC;EAEpE,IAAIC,YAAuB,GAAG,IAAI;EAElC,IAAIN,mBAAmB,EAAE;IACrBM,YAAY,gBAAGjD,MAAA,CAAAW,OAAA,CAAAuC,aAAA,CAAC7C,yBAAA,CAAAM,OAAwB;MAACsB,KAAK,EAAEA,KAAM;MAACJ,QAAQ,EAAEA;IAAS,CAAE,CAAC;EACjF,CAAC,MAAM,IAAIgB,iBAAiB,EAAE;IAC1BI,YAAY,gBACRjD,MAAA,CAAAW,OAAA,CAAAuC,aAAA,CAAC/C,uBAAA,CAAAQ,OAAsB;MACnBkB,QAAQ,EAAEA,QAAS;MACnBI,KAAK,EAAEA,KAAM;MACbkB,gBAAgB,EAAEjB,OAAQ;MAC1Ba,UAAU,EAAElB,QAAQ,CAACkB,UAAW;MAChChB,gBAAgB,EAAEA,gBAAiB;MACnCC,gCAAgC,EAAEA;IAAiC,CACtE,CACJ;EACL;EAEA,oBACIhC,MAAA,CAAAW,OAAA,CAAAuC,aAAA,CAAChD,kBAAA,CAAAkD,6BAA6B;IAC1BC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAK,CAAE;IACrCC,OAAO,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAE;IAClCE,IAAI,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAK,CAAE;IAClCG,UAAU,EAAE;MAAEC,QAAQ,EAAEC;IAAoC;EAAE,GAE7DX,YAAY,eACbjD,MAAA,CAAAW,OAAA,CAAAuC,aAAA,CAAChD,kBAAA,CAAA2D,mCAAmC;IAChCC,GAAG,EAAE1B,eAAgB;IACrB2B,IAAI,EAAC,QAAQ;IACb7B,OAAO,EAAG8B,KAAK,IAAK;MAChBA,KAAK,CAACC,eAAe,CAAC,CAAC;MACvBnC,gBAAgB,CAACD,QAAQ,CAACqC,EAAE,CAAC;IACjC,CAAE;IACFC,OAAO,EAAEC,mDAAqC;IAC9C,cAAYxD,CAAC,CAACyD,oBAAW,CAACC,aAAa,CAACC,aAAa,CAACC,WAAW;EAAE,gBAEnExE,MAAA,CAAAW,OAAA,CAAAuC,aAAA,CAACpD,KAAA,CAAA2E,IAAI;IAACC,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC,UAAU;EAAE,CAAE,CACL,CACV,CAAC;AAExC,CAAC;AAED/C,iBAAiB,CAACgD,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAnE,OAAA,gBAErC,IAAAoE,WAAI,EAACnD,iBAAiB,CAAC","ignoreList":[]}

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

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

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

@@ -15,6 +15,7 @@ const GalleryEditorMediaItem = ({
   openSelectedFile,
   previewUrl,
   shouldLoadImages = true,
+  shouldEnableKeyboardHighlighting,
   ratio
 }) => /*#__PURE__*/_react.default.createElement(_GalleryEditorMediaItem.StyledMotionGalleryEditorMediaItem, {
   animate: {
@@ -35,7 +36,8 @@ const GalleryEditorMediaItem = ({
   playIconSize: 30,
   previewUrl: previewUrl,
   ratio: ratio,
-  shouldLoadImages: shouldLoadImages
+  shouldLoadImages: shouldLoadImages,
+  shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
 }));
 GalleryEditorMediaItem.displayName = 'GalleryEditorMediaItem';
 var _default = exports.default = /*#__PURE__*/(0, _react.memo)(GalleryEditorMediaItem);

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

@@ -1 +1 @@
-{"version":3,"file":"GalleryEditorMediaItem.js","names":["_react","_interopRequireWildcard","require","_MediaContent","_interopRequireDefault","_GalleryEditorMediaItem","_GalleryEditor","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GalleryEditorMediaItem","fileItem","openSelectedFile","previewUrl","shouldLoadImages","ratio","createElement","StyledMotionGalleryEditorMediaItem","animate","opacity","initial","exit","transition","duration","GALLERY_EDITOR_MEDIA_FADE_DURATION_S","uploadedFile","file","onClick","playIconSize","displayName","_default","exports","memo"],"sources":["../../../../../../src/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.tsx"],"sourcesContent":["import React, { FC, memo } from 'react';\nimport MediaContent from '../../../media-content/MediaContent';\nimport { StyledMotionGalleryEditorMediaItem } from './GalleryEditorMediaItem.styles';\nimport type { GalleryEditorMediaItemProps } from './GalleryEditorMediaItem.types';\nimport { GALLERY_EDITOR_MEDIA_FADE_DURATION_S } from '../../GalleryEditor.constants';\n\nconst GalleryEditorMediaItem: FC<GalleryEditorMediaItemProps> = ({\n    fileItem,\n    openSelectedFile,\n    previewUrl,\n    shouldLoadImages = true,\n    ratio,\n}) => (\n    <StyledMotionGalleryEditorMediaItem\n        animate={{ opacity: 1 }}\n        initial={{ opacity: 0 }}\n        exit={{ opacity: 0 }}\n        transition={{ duration: GALLERY_EDITOR_MEDIA_FADE_DURATION_S }}\n    >\n        {fileItem.uploadedFile && (\n            <MediaContent\n                file={fileItem.uploadedFile}\n                onClick={() => openSelectedFile(fileItem)}\n                playIconSize={30}\n                previewUrl={previewUrl}\n                ratio={ratio}\n                shouldLoadImages={shouldLoadImages}\n            />\n        )}\n    </StyledMotionGalleryEditorMediaItem>\n);\n\nGalleryEditorMediaItem.displayName = 'GalleryEditorMediaItem';\n\nexport default memo(GalleryEditorMediaItem);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,uBAAA,GAAAH,OAAA;AAEA,IAAAI,cAAA,GAAAJ,OAAA;AAAqF,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAM,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAErF,MAAMgB,sBAAuD,GAAGA,CAAC;EAC7DC,QAAQ;EACRC,gBAAgB;EAChBC,UAAU;EACVC,gBAAgB,GAAG,IAAI;EACvBC;AACJ,CAAC,kBACG/B,MAAA,CAAAS,OAAA,CAAAuB,aAAA,CAAC3B,uBAAA,CAAA4B,kCAAkC;EAC/BC,OAAO,EAAE;IAAEC,OAAO,EAAE;EAAE,CAAE;EACxBC,OAAO,EAAE;IAAED,OAAO,EAAE;EAAE,CAAE;EACxBE,IAAI,EAAE;IAAEF,OAAO,EAAE;EAAE,CAAE;EACrBG,UAAU,EAAE;IAAEC,QAAQ,EAAEC;EAAqC;AAAE,GAE9Db,QAAQ,CAACc,YAAY,iBAClBzC,MAAA,CAAAS,OAAA,CAAAuB,aAAA,CAAC7B,aAAA,CAAAM,OAAY;EACTiC,IAAI,EAAEf,QAAQ,CAACc,YAAa;EAC5BE,OAAO,EAAEA,CAAA,KAAMf,gBAAgB,CAACD,QAAQ,CAAE;EAC1CiB,YAAY,EAAE,EAAG;EACjBf,UAAU,EAAEA,UAAW;EACvBE,KAAK,EAAEA,KAAM;EACbD,gBAAgB,EAAEA;AAAiB,CACtC,CAE2B,CACvC;AAEDJ,sBAAsB,CAACmB,WAAW,GAAG,wBAAwB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAtC,OAAA,gBAE/C,IAAAuC,WAAI,EAACtB,sBAAsB,CAAC","ignoreList":[]}
+{"version":3,"file":"GalleryEditorMediaItem.js","names":["_react","_interopRequireWildcard","require","_MediaContent","_interopRequireDefault","_GalleryEditorMediaItem","_GalleryEditor","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GalleryEditorMediaItem","fileItem","openSelectedFile","previewUrl","shouldLoadImages","shouldEnableKeyboardHighlighting","ratio","createElement","StyledMotionGalleryEditorMediaItem","animate","opacity","initial","exit","transition","duration","GALLERY_EDITOR_MEDIA_FADE_DURATION_S","uploadedFile","file","onClick","playIconSize","displayName","_default","exports","memo"],"sources":["../../../../../../src/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.tsx"],"sourcesContent":["import React, { FC, memo } from 'react';\nimport MediaContent from '../../../media-content/MediaContent';\nimport { StyledMotionGalleryEditorMediaItem } from './GalleryEditorMediaItem.styles';\nimport type { GalleryEditorMediaItemProps } from './GalleryEditorMediaItem.types';\nimport { GALLERY_EDITOR_MEDIA_FADE_DURATION_S } from '../../GalleryEditor.constants';\n\nconst GalleryEditorMediaItem: FC<GalleryEditorMediaItemProps> = ({\n    fileItem,\n    openSelectedFile,\n    previewUrl,\n    shouldLoadImages = true,\n    shouldEnableKeyboardHighlighting,\n    ratio,\n}) => (\n    <StyledMotionGalleryEditorMediaItem\n        animate={{ opacity: 1 }}\n        initial={{ opacity: 0 }}\n        exit={{ opacity: 0 }}\n        transition={{ duration: GALLERY_EDITOR_MEDIA_FADE_DURATION_S }}\n    >\n        {fileItem.uploadedFile && (\n            <MediaContent\n                file={fileItem.uploadedFile}\n                onClick={() => openSelectedFile(fileItem)}\n                playIconSize={30}\n                previewUrl={previewUrl}\n                ratio={ratio}\n                shouldLoadImages={shouldLoadImages}\n                shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n            />\n        )}\n    </StyledMotionGalleryEditorMediaItem>\n);\n\nGalleryEditorMediaItem.displayName = 'GalleryEditorMediaItem';\n\nexport default memo(GalleryEditorMediaItem);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,uBAAA,GAAAH,OAAA;AAEA,IAAAI,cAAA,GAAAJ,OAAA;AAAqF,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAM,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAErF,MAAMgB,sBAAuD,GAAGA,CAAC;EAC7DC,QAAQ;EACRC,gBAAgB;EAChBC,UAAU;EACVC,gBAAgB,GAAG,IAAI;EACvBC,gCAAgC;EAChCC;AACJ,CAAC,kBACGhC,MAAA,CAAAS,OAAA,CAAAwB,aAAA,CAAC5B,uBAAA,CAAA6B,kCAAkC;EAC/BC,OAAO,EAAE;IAAEC,OAAO,EAAE;EAAE,CAAE;EACxBC,OAAO,EAAE;IAAED,OAAO,EAAE;EAAE,CAAE;EACxBE,IAAI,EAAE;IAAEF,OAAO,EAAE;EAAE,CAAE;EACrBG,UAAU,EAAE;IAAEC,QAAQ,EAAEC;EAAqC;AAAE,GAE9Dd,QAAQ,CAACe,YAAY,iBAClB1C,MAAA,CAAAS,OAAA,CAAAwB,aAAA,CAAC9B,aAAA,CAAAM,OAAY;EACTkC,IAAI,EAAEhB,QAAQ,CAACe,YAAa;EAC5BE,OAAO,EAAEA,CAAA,KAAMhB,gBAAgB,CAACD,QAAQ,CAAE;EAC1CkB,YAAY,EAAE,EAAG;EACjBhB,UAAU,EAAEA,UAAW;EACvBG,KAAK,EAAEA,KAAM;EACbF,gBAAgB,EAAEA,gBAAiB;EACnCC,gCAAgC,EAAEA;AAAiC,CACtE,CAE2B,CACvC;AAEDL,sBAAsB,CAACoB,WAAW,GAAG,wBAAwB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAvC,OAAA,gBAE/C,IAAAwC,WAAI,EAACvB,sBAAsB,CAAC","ignoreList":[]}

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

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

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

@@ -16,6 +16,7 @@ const EMPTY_FILE_ITEMS = [];
 const GalleryViewer = ({
   files,
   shouldLoadImages = true,
+  shouldEnableKeyboardHighlighting,
   viewMode = _gallery2.GalleryViewMode.GRID
 }) => {
   const fileItems = files ?? EMPTY_FILE_ITEMS;
@@ -38,6 +39,7 @@ const GalleryViewer = ({
       viewMode
     }),
     shouldLoadImages: shouldLoadImages,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
     remainingItemsLength: fileItems.length > _GalleryViewer2.GALLERY_VIEWER_MAX_VISIBLE_ITEMS && index === 3 ? fileItems.length : undefined
   }))));
 };

package/lib/cjs/components/gallery-viewer/GalleryViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryViewer.js","names":["_react","_interopRequireWildcard","require","_GalleryViewerItem","_interopRequireDefault","_GalleryViewer","_gallery","_gallery2","_GalleryViewer2","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","EMPTY_FILE_ITEMS","GalleryViewer","files","shouldLoadImages","viewMode","GalleryViewMode","GRID","fileItems","ratio","getGalleryRatio","handleOpenFiles","useCallback","file","openKnownFiles","visibleItems","slice","GALLERY_VIEWER_MAX_VISIBLE_ITEMS","createElement","StyledGalleryViewer","StyledGalleryViewerItemWrapper","$ratio","$itemCount","length","$viewMode","map","index","key","getGalleryViewerKey","fileItem","onClick","getReadOnlyItemRatio","remainingItemsLength","undefined","displayName","_default","exports","memo"],"sources":["../../../../src/components/gallery-viewer/GalleryViewer.tsx"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport React, { FC, memo, useCallback } from 'react';\nimport GalleryViewerItem from './gallery-viewer-item/GalleryViewerItem';\nimport { StyledGalleryViewer, StyledGalleryViewerItemWrapper } from './GalleryViewer.styles';\nimport type { GalleryViewerProps } from './GalleryViewer.types';\nimport {\n    getGalleryRatio,\n    getGalleryViewerKey,\n    getReadOnlyItemRatio,\n    openKnownFiles,\n} from '../../utils/gallery';\nimport { GalleryViewMode } from '../../types/gallery';\nimport { GALLERY_VIEWER_MAX_VISIBLE_ITEMS } from './GalleryViewer.constants';\n\nconst EMPTY_FILE_ITEMS: FileItem[] = [];\n\nconst GalleryViewer: FC<GalleryViewerProps> = ({\n    files,\n    shouldLoadImages = true,\n    viewMode = GalleryViewMode.GRID,\n}) => {\n    const fileItems = files ?? EMPTY_FILE_ITEMS;\n    const ratio = getGalleryRatio(fileItems);\n\n    const handleOpenFiles = useCallback(\n        (file: FileItem) => {\n            openKnownFiles(fileItems, file);\n        },\n        [fileItems],\n    );\n\n    const visibleItems = fileItems.slice(0, GALLERY_VIEWER_MAX_VISIBLE_ITEMS);\n\n    return (\n        <StyledGalleryViewer>\n            <StyledGalleryViewerItemWrapper\n                $ratio={ratio}\n                $itemCount={fileItems.length}\n                $viewMode={viewMode}\n            >\n                {visibleItems.map((file, index) => (\n                    <GalleryViewerItem\n                        key={getGalleryViewerKey(file, index)}\n                        fileItem={file}\n                        onClick={handleOpenFiles}\n                        ratio={getReadOnlyItemRatio({ fileItems, index, viewMode })}\n                        shouldLoadImages={shouldLoadImages}\n                        remainingItemsLength={\n                            fileItems.length > GALLERY_VIEWER_MAX_VISIBLE_ITEMS && index === 3\n                                ? fileItems.length\n                                : undefined\n                        }\n                    />\n                ))}\n            </StyledGalleryViewerItemWrapper>\n        </StyledGalleryViewer>\n    );\n};\n\nGalleryViewer.displayName = 'GalleryViewer';\n\nexport default memo(GalleryViewer);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"GalleryViewer.js","names":["_react","_interopRequireWildcard","require","_GalleryViewerItem","_interopRequireDefault","_GalleryViewer","_gallery","_gallery2","_GalleryViewer2","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","EMPTY_FILE_ITEMS","GalleryViewer","files","shouldLoadImages","shouldEnableKeyboardHighlighting","viewMode","GalleryViewMode","GRID","fileItems","ratio","getGalleryRatio","handleOpenFiles","useCallback","file","openKnownFiles","visibleItems","slice","GALLERY_VIEWER_MAX_VISIBLE_ITEMS","createElement","StyledGalleryViewer","StyledGalleryViewerItemWrapper","$ratio","$itemCount","length","$viewMode","map","index","key","getGalleryViewerKey","fileItem","onClick","getReadOnlyItemRatio","remainingItemsLength","undefined","displayName","_default","exports","memo"],"sources":["../../../../src/components/gallery-viewer/GalleryViewer.tsx"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport React, { FC, memo, useCallback } from 'react';\nimport GalleryViewerItem from './gallery-viewer-item/GalleryViewerItem';\nimport { StyledGalleryViewer, StyledGalleryViewerItemWrapper } from './GalleryViewer.styles';\nimport type { GalleryViewerProps } from './GalleryViewer.types';\nimport {\n    getGalleryRatio,\n    getGalleryViewerKey,\n    getReadOnlyItemRatio,\n    openKnownFiles,\n} from '../../utils/gallery';\nimport { GalleryViewMode } from '../../types/gallery';\nimport { GALLERY_VIEWER_MAX_VISIBLE_ITEMS } from './GalleryViewer.constants';\n\nconst EMPTY_FILE_ITEMS: FileItem[] = [];\n\nconst GalleryViewer: FC<GalleryViewerProps> = ({\n    files,\n    shouldLoadImages = true,\n    shouldEnableKeyboardHighlighting,\n    viewMode = GalleryViewMode.GRID,\n}) => {\n    const fileItems = files ?? EMPTY_FILE_ITEMS;\n    const ratio = getGalleryRatio(fileItems);\n\n    const handleOpenFiles = useCallback(\n        (file: FileItem) => {\n            openKnownFiles(fileItems, file);\n        },\n        [fileItems],\n    );\n\n    const visibleItems = fileItems.slice(0, GALLERY_VIEWER_MAX_VISIBLE_ITEMS);\n\n    return (\n        <StyledGalleryViewer>\n            <StyledGalleryViewerItemWrapper\n                $ratio={ratio}\n                $itemCount={fileItems.length}\n                $viewMode={viewMode}\n            >\n                {visibleItems.map((file, index) => (\n                    <GalleryViewerItem\n                        key={getGalleryViewerKey(file, index)}\n                        fileItem={file}\n                        onClick={handleOpenFiles}\n                        ratio={getReadOnlyItemRatio({ fileItems, index, viewMode })}\n                        shouldLoadImages={shouldLoadImages}\n                        shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                        remainingItemsLength={\n                            fileItems.length > GALLERY_VIEWER_MAX_VISIBLE_ITEMS && index === 3\n                                ? fileItems.length\n                                : undefined\n                        }\n                    />\n                ))}\n            </StyledGalleryViewerItemWrapper>\n        </StyledGalleryViewer>\n    );\n};\n\nGalleryViewer.displayName = 'GalleryViewer';\n\nexport default memo(GalleryViewer);\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/gallery-viewer/GalleryViewer.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryViewer.types.js","names":[],"sources":["../../../../src/components/gallery-viewer/GalleryViewer.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport type { GalleryViewMode } from '../../types/gallery';\n\n/**\n * Props for the prop-driven read-only gallery viewer.\n */\nexport interface GalleryViewerProps {\n    /**\n     * Provides the already known media items that should be rendered without local upload state.\n     * @description\n     * The viewer renders these files directly from props and does not mirror them into local component state.\n     * @example\n     * <GalleryViewer files={files} />\n     * @optional\n     */\n    files?: FileItem[];\n    /**\n     * Controls whether the viewer may load the final media assets immediately.\n     * @description\n     * When set to `true`, the viewer renders and loads the actual images right away.\n     * When set to `false`, the viewer keeps showing previews first and defers the final image load until this flag becomes `true`.\n     * @default true\n     * @example\n     * <GalleryViewer files={files} shouldLoadImages={false} />\n     * @optional\n     */\n    shouldLoadImages?: boolean;\n    /**\n     * Defines how the media tiles are arranged in read-only mode.\n     * @description\n     * Use this prop to switch between the supported viewer layouts for known media.\n     * @default GalleryViewMode.GRID\n     * @example\n     * <GalleryViewer files={files} viewMode={GalleryViewMode.SQUARE} />\n     * @optional\n     */\n    viewMode?: GalleryViewMode;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"GalleryViewer.types.js","names":[],"sources":["../../../../src/components/gallery-viewer/GalleryViewer.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport type { GalleryViewMode } from '../../types/gallery';\n\n/**\n * Props for the prop-driven read-only gallery viewer.\n */\nexport interface GalleryViewerProps {\n    /**\n     * Provides the already known media items that should be rendered without local upload state.\n     * @description\n     * The viewer renders these files directly from props and does not mirror them into local component state.\n     * @example\n     * <GalleryViewer files={files} />\n     * @optional\n     */\n    files?: FileItem[];\n    /**\n     * Controls whether the viewer may load the final media assets immediately.\n     * @description\n     * When set to `true`, the viewer renders and loads the actual images right away.\n     * When set to `false`, the viewer keeps showing previews first and defers the final image load until this flag becomes `true`.\n     * @default true\n     * @example\n     * <GalleryViewer files={files} shouldLoadImages={false} />\n     * @optional\n     */\n    shouldLoadImages?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting for media tiles.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n    /**\n     * Defines how the media tiles are arranged in read-only mode.\n     * @description\n     * Use this prop to switch between the supported viewer layouts for known media.\n     * @default GalleryViewMode.GRID\n     * @example\n     * <GalleryViewer files={files} viewMode={GalleryViewMode.SQUARE} />\n     * @optional\n     */\n    viewMode?: GalleryViewMode;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/cjs/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.js

@@ -14,14 +14,16 @@ const GalleryViewerItem = ({
   shouldLoadImages = true,
   ratio = 1,
   remainingItemsLength,
-  onClick
+  onClick,
+  shouldEnableKeyboardHighlighting
 }) => {
   const handleClick = (0, _react.useCallback)(() => onClick(fileItem), [fileItem, onClick]);
   return /*#__PURE__*/_react.default.createElement(_GalleryViewerItem.StyledGalleryViewerItem, null, /*#__PURE__*/_react.default.createElement(_MediaContent.default, {
     file: fileItem.file,
     onClick: handleClick,
     ratio: ratio,
-    shouldLoadImages: shouldLoadImages
+    shouldLoadImages: shouldLoadImages,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
   }), remainingItemsLength && /*#__PURE__*/_react.default.createElement(_GalleryViewerItem.StyledGalleryViewerMoreItemsIndicator, {
     onClick: handleClick
   }, /*#__PURE__*/_react.default.createElement("p", null, `+ ${remainingItemsLength - 3}`)));

package/lib/cjs/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryViewerItem.js","names":["_react","_interopRequireWildcard","require","_MediaContent","_interopRequireDefault","_GalleryViewerItem","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GalleryViewerItem","fileItem","shouldLoadImages","ratio","remainingItemsLength","onClick","handleClick","useCallback","createElement","StyledGalleryViewerItem","file","StyledGalleryViewerMoreItemsIndicator","displayName","_default","exports","memo"],"sources":["../../../../../src/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.tsx"],"sourcesContent":["import React, { FC, memo, useCallback } from 'react';\nimport MediaContent from '../../media-content/MediaContent';\nimport {\n    StyledGalleryViewerItem,\n    StyledGalleryViewerMoreItemsIndicator,\n} from './GalleryViewerItem.styles';\nimport type { GalleryViewerItemProps } from './GalleryViewerItem.types';\n\nconst GalleryViewerItem: FC<GalleryViewerItemProps> = ({\n    fileItem,\n    shouldLoadImages = true,\n    ratio = 1,\n    remainingItemsLength,\n    onClick,\n}) => {\n    const handleClick = useCallback(() => onClick(fileItem), [fileItem, onClick]);\n\n    return (\n        <StyledGalleryViewerItem>\n            <MediaContent\n                file={fileItem.file}\n                onClick={handleClick}\n                ratio={ratio}\n                shouldLoadImages={shouldLoadImages}\n            />\n            {remainingItemsLength && (\n                <StyledGalleryViewerMoreItemsIndicator onClick={handleClick}>\n                    <p>{`+ ${remainingItemsLength - 3}`}</p>\n                </StyledGalleryViewerMoreItemsIndicator>\n            )}\n        </StyledGalleryViewerItem>\n    );\n};\n\nGalleryViewerItem.displayName = 'GalleryViewerItem';\n\nexport default memo(GalleryViewerItem);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AAGoC,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAT,uBAAA,YAAAA,CAAAK,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAGpC,MAAMgB,iBAA6C,GAAGA,CAAC;EACnDC,QAAQ;EACRC,gBAAgB,GAAG,IAAI;EACvBC,KAAK,GAAG,CAAC;EACTC,oBAAoB;EACpBC;AACJ,CAAC,KAAK;EACF,MAAMC,WAAW,GAAG,IAAAC,kBAAW,EAAC,MAAMF,OAAO,CAACJ,QAAQ,CAAC,EAAE,CAACA,QAAQ,EAAEI,OAAO,CAAC,CAAC;EAE7E,oBACI9B,MAAA,CAAAQ,OAAA,CAAAyB,aAAA,CAAC5B,kBAAA,CAAA6B,uBAAuB,qBACpBlC,MAAA,CAAAQ,OAAA,CAAAyB,aAAA,CAAC9B,aAAA,CAAAK,OAAY;IACT2B,IAAI,EAAET,QAAQ,CAACS,IAAK;IACpBL,OAAO,EAAEC,WAAY;IACrBH,KAAK,EAAEA,KAAM;IACbD,gBAAgB,EAAEA;EAAiB,CACtC,CAAC,EACDE,oBAAoB,iBACjB7B,MAAA,CAAAQ,OAAA,CAAAyB,aAAA,CAAC5B,kBAAA,CAAA+B,qCAAqC;IAACN,OAAO,EAAEC;EAAY,gBACxD/B,MAAA,CAAAQ,OAAA,CAAAyB,aAAA,YAAI,KAAKJ,oBAAoB,GAAG,CAAC,EAAM,CACJ,CAEtB,CAAC;AAElC,CAAC;AAEDJ,iBAAiB,CAACY,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA/B,OAAA,gBAErC,IAAAgC,WAAI,EAACf,iBAAiB,CAAC","ignoreList":[]}
+{"version":3,"file":"GalleryViewerItem.js","names":["_react","_interopRequireWildcard","require","_MediaContent","_interopRequireDefault","_GalleryViewerItem","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GalleryViewerItem","fileItem","shouldLoadImages","ratio","remainingItemsLength","onClick","shouldEnableKeyboardHighlighting","handleClick","useCallback","createElement","StyledGalleryViewerItem","file","StyledGalleryViewerMoreItemsIndicator","displayName","_default","exports","memo"],"sources":["../../../../../src/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.tsx"],"sourcesContent":["import React, { FC, memo, useCallback } from 'react';\nimport MediaContent from '../../media-content/MediaContent';\nimport {\n    StyledGalleryViewerItem,\n    StyledGalleryViewerMoreItemsIndicator,\n} from './GalleryViewerItem.styles';\nimport type { GalleryViewerItemProps } from './GalleryViewerItem.types';\n\nconst GalleryViewerItem: FC<GalleryViewerItemProps> = ({\n    fileItem,\n    shouldLoadImages = true,\n    ratio = 1,\n    remainingItemsLength,\n    onClick,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const handleClick = useCallback(() => onClick(fileItem), [fileItem, onClick]);\n\n    return (\n        <StyledGalleryViewerItem>\n            <MediaContent\n                file={fileItem.file}\n                onClick={handleClick}\n                ratio={ratio}\n                shouldLoadImages={shouldLoadImages}\n                shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n            />\n            {remainingItemsLength && (\n                <StyledGalleryViewerMoreItemsIndicator onClick={handleClick}>\n                    <p>{`+ ${remainingItemsLength - 3}`}</p>\n                </StyledGalleryViewerMoreItemsIndicator>\n            )}\n        </StyledGalleryViewerItem>\n    );\n};\n\nGalleryViewerItem.displayName = 'GalleryViewerItem';\n\nexport default memo(GalleryViewerItem);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AAGoC,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAT,uBAAA,YAAAA,CAAAK,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAGpC,MAAMgB,iBAA6C,GAAGA,CAAC;EACnDC,QAAQ;EACRC,gBAAgB,GAAG,IAAI;EACvBC,KAAK,GAAG,CAAC;EACTC,oBAAoB;EACpBC,OAAO;EACPC;AACJ,CAAC,KAAK;EACF,MAAMC,WAAW,GAAG,IAAAC,kBAAW,EAAC,MAAMH,OAAO,CAACJ,QAAQ,CAAC,EAAE,CAACA,QAAQ,EAAEI,OAAO,CAAC,CAAC;EAE7E,oBACI9B,MAAA,CAAAQ,OAAA,CAAA0B,aAAA,CAAC7B,kBAAA,CAAA8B,uBAAuB,qBACpBnC,MAAA,CAAAQ,OAAA,CAAA0B,aAAA,CAAC/B,aAAA,CAAAK,OAAY;IACT4B,IAAI,EAAEV,QAAQ,CAACU,IAAK;IACpBN,OAAO,EAAEE,WAAY;IACrBJ,KAAK,EAAEA,KAAM;IACbD,gBAAgB,EAAEA,gBAAiB;IACnCI,gCAAgC,EAAEA;EAAiC,CACtE,CAAC,EACDF,oBAAoB,iBACjB7B,MAAA,CAAAQ,OAAA,CAAA0B,aAAA,CAAC7B,kBAAA,CAAAgC,qCAAqC;IAACP,OAAO,EAAEE;EAAY,gBACxDhC,MAAA,CAAAQ,OAAA,CAAA0B,aAAA,YAAI,KAAKL,oBAAoB,GAAG,CAAC,EAAM,CACJ,CAEtB,CAAC;AAElC,CAAC;AAEDJ,iBAAiB,CAACa,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAhC,OAAA,gBAErC,IAAAiC,WAAI,EAAChB,iBAAiB,CAAC","ignoreList":[]}

package/lib/cjs/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryViewerItem.types.js","names":[],"sources":["../../../../../src/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\n\n/**\n * Props for a dedicated read-only gallery tile.\n */\nexport interface GalleryViewerItemProps {\n    /**\n     * Provides the uploaded media that should be rendered.\n     * @description\n     * The viewer item renders only already known media and never deals with upload-specific transient state.\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} />\n     */\n    fileItem: FileItem;\n    /**\n     * Controls whether the item may load the final media source immediately.\n     * @description\n     * The item forwards this flag to the shared media renderer so preview-first rendering can be controlled by the parent gallery.\n     * @default true\n     * @optional\n     */\n    shouldLoadImages?: boolean;\n    /**\n     * Defines the aspect ratio that should be reserved for the tile.\n     * @description\n     * Use this prop to reserve a deterministic tile height for stable read-only rendering.\n     * @default 1\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} ratio={1.5} />\n     * @optional\n     */\n    ratio?: number;\n    /**\n     * Provides the total item count when the last visible tile should show a remaining-items overlay.\n     * @description\n     * When this prop is set on the last visible viewer tile, the tile displays the `+n` overlay for hidden items.\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} remainingItemsLength={5} />\n     * @optional\n     */\n    remainingItemsLength?: number;\n    /**\n     * Is called when the tile is selected.\n     * @description\n     * The viewer uses this callback to open the selected file inside the slideshow flow.\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} />\n     */\n    onClick: (file: FileItem) => void;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"GalleryViewerItem.types.js","names":[],"sources":["../../../../../src/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\n\n/**\n * Props for a dedicated read-only gallery tile.\n */\nexport interface GalleryViewerItemProps {\n    /**\n     * Provides the uploaded media that should be rendered.\n     * @description\n     * The viewer item renders only already known media and never deals with upload-specific transient state.\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} />\n     */\n    fileItem: FileItem;\n    /**\n     * Controls whether the item may load the final media source immediately.\n     * @description\n     * The item forwards this flag to the shared media renderer so preview-first rendering can be controlled by the parent gallery.\n     * @default true\n     * @optional\n     */\n    shouldLoadImages?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting for the media tile.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n    /**\n     * Defines the aspect ratio that should be reserved for the tile.\n     * @description\n     * Use this prop to reserve a deterministic tile height for stable read-only rendering.\n     * @default 1\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} ratio={1.5} />\n     * @optional\n     */\n    ratio?: number;\n    /**\n     * Provides the total item count when the last visible tile should show a remaining-items overlay.\n     * @description\n     * When this prop is set on the last visible viewer tile, the tile displays the `+n` overlay for hidden items.\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} remainingItemsLength={5} />\n     * @optional\n     */\n    remainingItemsLength?: number;\n    /**\n     * Is called when the tile is selected.\n     * @description\n     * The viewer uses this callback to open the selected file inside the slideshow flow.\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} />\n     */\n    onClick: (file: FileItem) => void;\n}\n"],"mappings":"","ignoreList":[]}