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

package/lib/esm/components/media-content/MediaContent.js

@@ -1,4 +1,4 @@
-import { Icon } from '@chayns-components/core';
+import { Icon, useFocusRingPortal, useKeyboardFocusHighlighting } from '@chayns-components/core';
 import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { StyledMediaContentImage, StyledMediaContentImageWrapper, StyledMediaContentPlayIcon, StyledMediaContentPreviewImage, StyledMediaContentVideo, StyledMediaContentVideoWrapper } from './MediaContent.styles';
 import { getMediaPreviewUrl, getMediaSourceUrl, getResponsiveImageServiceUrl, isVideoFile } from './MediaContent.utils';
@@ -10,6 +10,7 @@ const MediaContent = ({
   ratio,
   onClick,
   shouldLoadImages = true,
+  shouldEnableKeyboardHighlighting,
   playIconSize = 50
 }) => {
   const isVideo = isVideoFile(file);
@@ -19,6 +20,7 @@ const MediaContent = ({
   const [resolvedFinalSourceUrl, setResolvedFinalSourceUrl] = useState();
   const [containerElement, setContainerElement] = useState(null);
   const imageRef = useRef(null);
+  const contentRef = useRef(null);
   const videoRef = useRef(null);
   const renderSize = useMediaContentSize(containerElement);
   const devicePixelRatio = typeof window !== 'undefined' && Number.isFinite(window.devicePixelRatio) && window.devicePixelRatio > 0 ? window.devicePixelRatio : 1;
@@ -64,9 +66,21 @@ const MediaContent = ({
   }, [finalSourceUrl, isVideo, shouldLoadImages]);
   const shouldRenderFinalImage = shouldLoadImages && Boolean(finalSourceUrl);
   const shouldShowPreview = Boolean(displayPreviewUrl);
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
+  useFocusRingPortal(contentRef, {
+    isEnabled: shouldShowKeyboardHighlighting
+  });
+  const handleKeyDown = event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick();
+    }
+  };
   if (isVideo) {
     return /*#__PURE__*/React.createElement(StyledMediaContentVideoWrapper, {
       ref: setContainerElement,
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
       onClick: onClick,
       $ratio: ratio
     }, displayPreviewUrl && /*#__PURE__*/React.createElement(StyledMediaContentPreviewImage, {
@@ -90,7 +104,12 @@ const MediaContent = ({
     })));
   }
   return /*#__PURE__*/React.createElement(StyledMediaContentImageWrapper, {
-    ref: setContainerElement,
+    ref: element => {
+      setContainerElement(element);
+      contentRef.current = element;
+    },
+    tabIndex: 0,
+    onKeyDown: handleKeyDown,
     onClick: onClick,
     $ratio: ratio
   }, shouldShowPreview && /*#__PURE__*/React.createElement(StyledMediaContentPreviewImage, {

package/lib/esm/components/media-content/MediaContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaContent.js","names":["Icon","React","memo","useEffect","useMemo","useRef","useState","StyledMediaContentImage","StyledMediaContentImageWrapper","StyledMediaContentPlayIcon","StyledMediaContentPreviewImage","StyledMediaContentVideo","StyledMediaContentVideoWrapper","getMediaPreviewUrl","getMediaSourceUrl","getResponsiveImageServiceUrl","isVideoFile","MEDIA_CONTENT_IMAGE_FADE_DURATION_MS","useMediaContentSize","MediaContent","file","previewUrl","ratio","onClick","shouldLoadImages","playIconSize","isVideo","sourceKey","previewSourceUrl","hasLoadedFinalMedia","setHasLoadedFinalMedia","resolvedFinalSourceUrl","setResolvedFinalSourceUrl","containerElement","setContainerElement","imageRef","videoRef","renderSize","devicePixelRatio","window","Number","isFinite","displayPreviewUrl","undefined","finalSourceUrl","shouldHidePreview","previewLayerStyle","opacity","filter","finalMediaStyle","transition","current","complete","naturalWidth","readyState","shouldRenderFinalImage","Boolean","shouldShowPreview","createElement","ref","$ratio","draggable","src","alt","style","size","icons","poster","preload","onLoadedData","type","onLoad","displayName"],"sources":["../../../../src/components/media-content/MediaContent.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport React, { FC, memo, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n    StyledMediaContentImage,\n    StyledMediaContentImageWrapper,\n    StyledMediaContentPlayIcon,\n    StyledMediaContentPreviewImage,\n    StyledMediaContentVideo,\n    StyledMediaContentVideoWrapper,\n} from './MediaContent.styles';\nimport type { MediaContentProps } from './MediaContent.types';\nimport {\n    getMediaPreviewUrl,\n    getMediaSourceUrl,\n    getResponsiveImageServiceUrl,\n    isVideoFile,\n} from './MediaContent.utils';\nimport { MEDIA_CONTENT_IMAGE_FADE_DURATION_MS } from './MediaContent.constants';\nimport useMediaContentSize from './useMediaContentSize';\n\nconst MediaContent: FC<MediaContentProps> = ({\n    file,\n    previewUrl,\n    ratio,\n    onClick,\n    shouldLoadImages = true,\n    playIconSize = 50,\n}) => {\n    const isVideo = isVideoFile(file);\n    const sourceKey = getMediaSourceUrl(file);\n    const previewSourceUrl = getMediaPreviewUrl(file, previewUrl);\n    const [hasLoadedFinalMedia, setHasLoadedFinalMedia] = useState(false);\n    const [resolvedFinalSourceUrl, setResolvedFinalSourceUrl] = useState<string>();\n    const [containerElement, setContainerElement] = useState<HTMLDivElement | null>(null);\n    const imageRef = useRef<HTMLImageElement>(null);\n    const videoRef = useRef<HTMLVideoElement>(null);\n    const renderSize = useMediaContentSize(containerElement);\n    const devicePixelRatio =\n        typeof window !== 'undefined' &&\n        Number.isFinite(window.devicePixelRatio) &&\n        window.devicePixelRatio > 0\n            ? window.devicePixelRatio\n            : 1;\n    const displayPreviewUrl = useMemo(\n        () =>\n            previewSourceUrl\n                ? getResponsiveImageServiceUrl(previewSourceUrl, renderSize, devicePixelRatio)\n                : undefined,\n        [devicePixelRatio, previewSourceUrl, renderSize],\n    );\n    const finalSourceUrl = isVideo ? sourceKey : resolvedFinalSourceUrl;\n    const shouldHidePreview = shouldLoadImages && hasLoadedFinalMedia;\n    const previewLayerStyle = {\n        opacity: shouldHidePreview ? 0 : 1,\n        filter: shouldHidePreview ? 'blur(0px)' : undefined,\n    };\n    const finalMediaStyle = {\n        opacity: hasLoadedFinalMedia || !displayPreviewUrl ? 1 : 0,\n        transition: `opacity ${MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease`,\n    };\n\n    useEffect(() => {\n        setHasLoadedFinalMedia(false);\n    }, [sourceKey]);\n\n    useEffect(() => {\n        if (!shouldLoadImages) {\n            setResolvedFinalSourceUrl(undefined);\n            return;\n        }\n\n        if (isVideo) {\n            setResolvedFinalSourceUrl(sourceKey);\n            return;\n        }\n\n        if (!renderSize) {\n            setResolvedFinalSourceUrl(undefined);\n            return;\n        }\n\n        setResolvedFinalSourceUrl(\n            getResponsiveImageServiceUrl(sourceKey, renderSize, devicePixelRatio),\n        );\n    }, [devicePixelRatio, isVideo, renderSize, shouldLoadImages, sourceKey]);\n\n    useEffect(() => {\n        if (!shouldLoadImages || !finalSourceUrl) {\n            return;\n        }\n\n        if (!isVideo && imageRef.current?.complete && imageRef.current.naturalWidth > 0) {\n            setHasLoadedFinalMedia(true);\n        }\n\n        if (isVideo && videoRef.current?.readyState && videoRef.current.readyState >= 2) {\n            setHasLoadedFinalMedia(true);\n        }\n    }, [finalSourceUrl, isVideo, shouldLoadImages]);\n\n    const shouldRenderFinalImage = shouldLoadImages && Boolean(finalSourceUrl);\n    const shouldShowPreview = Boolean(displayPreviewUrl);\n\n    if (isVideo) {\n        return (\n            <StyledMediaContentVideoWrapper\n                ref={setContainerElement}\n                onClick={onClick}\n                $ratio={ratio}\n            >\n                {displayPreviewUrl && (\n                    <StyledMediaContentPreviewImage\n                        draggable={false}\n                        src={displayPreviewUrl}\n                        alt=\"\"\n                        aria-hidden=\"true\"\n                        style={previewLayerStyle}\n                    />\n                )}\n                <StyledMediaContentPlayIcon>\n                    <Icon size={playIconSize} icons={['fa fa-play']} />\n                </StyledMediaContentPlayIcon>\n                {shouldRenderFinalImage && (\n                    <StyledMediaContentVideo\n                        ref={videoRef}\n                        poster={displayPreviewUrl}\n                        preload=\"metadata\"\n                        onLoadedData={() => setHasLoadedFinalMedia(true)}\n                        style={finalMediaStyle}\n                    >\n                        <source src={finalSourceUrl} type=\"video/mp4\" />\n                    </StyledMediaContentVideo>\n                )}\n            </StyledMediaContentVideoWrapper>\n        );\n    }\n\n    return (\n        <StyledMediaContentImageWrapper ref={setContainerElement} onClick={onClick} $ratio={ratio}>\n            {shouldShowPreview && (\n                <StyledMediaContentPreviewImage\n                    draggable={false}\n                    src={displayPreviewUrl}\n                    alt=\"\"\n                    aria-hidden=\"true\"\n                    style={previewLayerStyle}\n                />\n            )}\n            {shouldRenderFinalImage && (\n                <StyledMediaContentImage\n                    ref={imageRef}\n                    draggable={false}\n                    src={finalSourceUrl}\n                    alt=\"\"\n                    onLoad={() => setHasLoadedFinalMedia(true)}\n                    style={finalMediaStyle}\n                />\n            )}\n        </StyledMediaContentImageWrapper>\n    );\n};\n\nMediaContent.displayName = 'MediaContent';\n\nexport default memo(MediaContent);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MediaContent.js","names":["Icon","useFocusRingPortal","useKeyboardFocusHighlighting","React","memo","useEffect","useMemo","useRef","useState","StyledMediaContentImage","StyledMediaContentImageWrapper","StyledMediaContentPlayIcon","StyledMediaContentPreviewImage","StyledMediaContentVideo","StyledMediaContentVideoWrapper","getMediaPreviewUrl","getMediaSourceUrl","getResponsiveImageServiceUrl","isVideoFile","MEDIA_CONTENT_IMAGE_FADE_DURATION_MS","useMediaContentSize","MediaContent","file","previewUrl","ratio","onClick","shouldLoadImages","shouldEnableKeyboardHighlighting","playIconSize","isVideo","sourceKey","previewSourceUrl","hasLoadedFinalMedia","setHasLoadedFinalMedia","resolvedFinalSourceUrl","setResolvedFinalSourceUrl","containerElement","setContainerElement","imageRef","contentRef","videoRef","renderSize","devicePixelRatio","window","Number","isFinite","displayPreviewUrl","undefined","finalSourceUrl","shouldHidePreview","previewLayerStyle","opacity","filter","finalMediaStyle","transition","current","complete","naturalWidth","readyState","shouldRenderFinalImage","Boolean","shouldShowPreview","shouldShowKeyboardHighlighting","isEnabled","handleKeyDown","event","key","preventDefault","createElement","ref","tabIndex","onKeyDown","$ratio","draggable","src","alt","style","size","icons","poster","preload","onLoadedData","type","element","onLoad","displayName"],"sources":["../../../../src/components/media-content/MediaContent.tsx"],"sourcesContent":["import { Icon, useFocusRingPortal, useKeyboardFocusHighlighting } from '@chayns-components/core';\nimport React, { FC, KeyboardEventHandler, memo, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n    StyledMediaContentImage,\n    StyledMediaContentImageWrapper,\n    StyledMediaContentPlayIcon,\n    StyledMediaContentPreviewImage,\n    StyledMediaContentVideo,\n    StyledMediaContentVideoWrapper,\n} from './MediaContent.styles';\nimport type { MediaContentProps } from './MediaContent.types';\nimport {\n    getMediaPreviewUrl,\n    getMediaSourceUrl,\n    getResponsiveImageServiceUrl,\n    isVideoFile,\n} from './MediaContent.utils';\nimport { MEDIA_CONTENT_IMAGE_FADE_DURATION_MS } from './MediaContent.constants';\nimport useMediaContentSize from './useMediaContentSize';\n\nconst MediaContent: FC<MediaContentProps> = ({\n    file,\n    previewUrl,\n    ratio,\n    onClick,\n    shouldLoadImages = true,\n    shouldEnableKeyboardHighlighting,\n    playIconSize = 50,\n}) => {\n    const isVideo = isVideoFile(file);\n    const sourceKey = getMediaSourceUrl(file);\n    const previewSourceUrl = getMediaPreviewUrl(file, previewUrl);\n    const [hasLoadedFinalMedia, setHasLoadedFinalMedia] = useState(false);\n    const [resolvedFinalSourceUrl, setResolvedFinalSourceUrl] = useState<string>();\n    const [containerElement, setContainerElement] = useState<HTMLDivElement | null>(null);\n    const imageRef = useRef<HTMLImageElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n    const videoRef = useRef<HTMLVideoElement>(null);\n    const renderSize = useMediaContentSize(containerElement);\n    const devicePixelRatio =\n        typeof window !== 'undefined' &&\n        Number.isFinite(window.devicePixelRatio) &&\n        window.devicePixelRatio > 0\n            ? window.devicePixelRatio\n            : 1;\n    const displayPreviewUrl = useMemo(\n        () =>\n            previewSourceUrl\n                ? getResponsiveImageServiceUrl(previewSourceUrl, renderSize, devicePixelRatio)\n                : undefined,\n        [devicePixelRatio, previewSourceUrl, renderSize],\n    );\n    const finalSourceUrl = isVideo ? sourceKey : resolvedFinalSourceUrl;\n    const shouldHidePreview = shouldLoadImages && hasLoadedFinalMedia;\n    const previewLayerStyle = {\n        opacity: shouldHidePreview ? 0 : 1,\n        filter: shouldHidePreview ? 'blur(0px)' : undefined,\n    };\n    const finalMediaStyle = {\n        opacity: hasLoadedFinalMedia || !displayPreviewUrl ? 1 : 0,\n        transition: `opacity ${MEDIA_CONTENT_IMAGE_FADE_DURATION_MS}ms ease`,\n    };\n\n    useEffect(() => {\n        setHasLoadedFinalMedia(false);\n    }, [sourceKey]);\n\n    useEffect(() => {\n        if (!shouldLoadImages) {\n            setResolvedFinalSourceUrl(undefined);\n            return;\n        }\n\n        if (isVideo) {\n            setResolvedFinalSourceUrl(sourceKey);\n            return;\n        }\n\n        if (!renderSize) {\n            setResolvedFinalSourceUrl(undefined);\n            return;\n        }\n\n        setResolvedFinalSourceUrl(\n            getResponsiveImageServiceUrl(sourceKey, renderSize, devicePixelRatio),\n        );\n    }, [devicePixelRatio, isVideo, renderSize, shouldLoadImages, sourceKey]);\n\n    useEffect(() => {\n        if (!shouldLoadImages || !finalSourceUrl) {\n            return;\n        }\n\n        if (!isVideo && imageRef.current?.complete && imageRef.current.naturalWidth > 0) {\n            setHasLoadedFinalMedia(true);\n        }\n\n        if (isVideo && videoRef.current?.readyState && videoRef.current.readyState >= 2) {\n            setHasLoadedFinalMedia(true);\n        }\n    }, [finalSourceUrl, isVideo, shouldLoadImages]);\n\n    const shouldRenderFinalImage = shouldLoadImages && Boolean(finalSourceUrl);\n    const shouldShowPreview = Boolean(displayPreviewUrl);\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting,\n    );\n    useFocusRingPortal(contentRef, { isEnabled: shouldShowKeyboardHighlighting });\n\n    const handleKeyDown = ((event) => {\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            onClick();\n        }\n    }) as KeyboardEventHandler<HTMLDivElement>;\n\n    if (isVideo) {\n        return (\n            <StyledMediaContentVideoWrapper\n                ref={setContainerElement}\n                tabIndex={0}\n                onKeyDown={handleKeyDown}\n                onClick={onClick}\n                $ratio={ratio}\n            >\n                {displayPreviewUrl && (\n                    <StyledMediaContentPreviewImage\n                        draggable={false}\n                        src={displayPreviewUrl}\n                        alt=\"\"\n                        aria-hidden=\"true\"\n                        style={previewLayerStyle}\n                    />\n                )}\n                <StyledMediaContentPlayIcon>\n                    <Icon size={playIconSize} icons={['fa fa-play']} />\n                </StyledMediaContentPlayIcon>\n                {shouldRenderFinalImage && (\n                    <StyledMediaContentVideo\n                        ref={videoRef}\n                        poster={displayPreviewUrl}\n                        preload=\"metadata\"\n                        onLoadedData={() => setHasLoadedFinalMedia(true)}\n                        style={finalMediaStyle}\n                    >\n                        <source src={finalSourceUrl} type=\"video/mp4\" />\n                    </StyledMediaContentVideo>\n                )}\n            </StyledMediaContentVideoWrapper>\n        );\n    }\n\n    return (\n        <StyledMediaContentImageWrapper\n            ref={(element) => {\n                setContainerElement(element);\n                contentRef.current = element;\n            }}\n            tabIndex={0}\n            onKeyDown={handleKeyDown}\n            onClick={onClick}\n            $ratio={ratio}\n        >\n            {shouldShowPreview && (\n                <StyledMediaContentPreviewImage\n                    draggable={false}\n                    src={displayPreviewUrl}\n                    alt=\"\"\n                    aria-hidden=\"true\"\n                    style={previewLayerStyle}\n                />\n            )}\n            {shouldRenderFinalImage && (\n                <StyledMediaContentImage\n                    ref={imageRef}\n                    draggable={false}\n                    src={finalSourceUrl}\n                    alt=\"\"\n                    onLoad={() => setHasLoadedFinalMedia(true)}\n                    style={finalMediaStyle}\n                />\n            )}\n        </StyledMediaContentImageWrapper>\n    );\n};\n\nMediaContent.displayName = 'MediaContent';\n\nexport default memo(MediaContent);\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -94,6 +94,10 @@ export interface GalleryProps {
      * @optional
      */
     shouldLoadImages?: boolean;
+    /**
+     * Enables keyboard-only focus highlighting for interactive gallery tiles.
+     */
+    shouldEnableKeyboardHighlighting?: boolean;
     /**
      * Is called after a file has been uploaded successfully in edit mode.
      * @description

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

@@ -64,6 +64,10 @@ export interface GalleryEditorProps {
      * @optional
      */
     shouldLoadImages?: boolean;
+    /**
+     * Enables keyboard-only focus highlighting for interactive gallery tiles.
+     */
+    shouldEnableKeyboardHighlighting?: boolean;
     /**
      * Limits how many files can be managed by the editor.
      * @description

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

@@ -20,4 +20,8 @@ export interface AddFileProps {
      * <AddFile onAdd={(files) => console.log(files)} />
      */
     onAdd: (files: File[]) => void;
+    /**
+     * Enables keyboard-only focus highlighting for the add-file button.
+     */
+    shouldEnableKeyboardHighlighting?: boolean;
 }

package/lib/types/components/gallery-editor/gallery-editor-item/GalleryEditorItem.types.d.ts

@@ -19,6 +19,10 @@ export interface GalleryEditorItemProps {
      * @optional
      */
     shouldLoadImages?: boolean;
+    /**
+     * Enables keyboard-only focus highlighting for the media tile and delete button.
+     */
+    shouldEnableKeyboardHighlighting?: boolean;
     /**
      * Is called when the delete button is clicked in edit mode.
      * @description

package/lib/types/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.types.d.ts

@@ -19,6 +19,10 @@ export interface GalleryEditorMediaItemProps {
      * @optional
      */
     shouldLoadImages?: boolean;
+    /**
+     * Enables keyboard-only focus highlighting for the media tile.
+     */
+    shouldEnableKeyboardHighlighting?: boolean;
     /**
      * Is called when the media tile is selected.
      * @description

package/lib/types/components/gallery-viewer/GalleryViewer.types.d.ts

@@ -24,6 +24,10 @@ export interface GalleryViewerProps {
      * @optional
      */
     shouldLoadImages?: boolean;
+    /**
+     * Enables keyboard-only focus highlighting for media tiles.
+     */
+    shouldEnableKeyboardHighlighting?: boolean;
     /**
      * Defines how the media tiles are arranged in read-only mode.
      * @description

package/lib/types/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.d.ts

@@ -19,6 +19,10 @@ export interface GalleryViewerItemProps {
      * @optional
      */
     shouldLoadImages?: boolean;
+    /**
+     * Enables keyboard-only focus highlighting for the media tile.
+     */
+    shouldEnableKeyboardHighlighting?: boolean;
     /**
      * Defines the aspect ratio that should be reserved for the tile.
      * @description

package/lib/types/components/media-content/MediaContent.types.d.ts

@@ -35,6 +35,10 @@ export interface MediaContentProps {
      * @optional
      */
     shouldLoadImages?: boolean;
+    /**
+     * Enables keyboard-only focus highlighting for the media tile.
+     */
+    shouldEnableKeyboardHighlighting?: boolean;
     /**
      * Is called when the media tile is selected.
      * @description

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/gallery",
-    "version": "5.5.30",
+    "version": "5.5.31-alpha.0",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -69,7 +69,7 @@
         "typescript": "^5.9.3"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.5.30",
+        "@chayns-components/core": "^5.5.31-alpha.0",
         "react-compiler-runtime": "^1.0.0",
         "uuid": "^10.0.0"
     },
@@ -83,5 +83,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "b90fd1685e1067d28e29580095f3d290be892769"
+    "gitHead": "7619ce466c615fadd5eb31f93c24a252683aff0e"
 }