@chayns-components/core 5.3.10 → 5.3.11-alpha.0

package/lib/esm/components/file-list/file-item/FileItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileItem.js","names":["React","useCallback","useMemo","getHumanSize","getIconByMimeType","Icon","ContextMenu","ListItem","StyledFileItem","StyledFileItemIcon","ttsToITextString","useTextstringValue","textStrings","FileItem","mimeType","onRemove","size","name","id","source","shouldAllowDownload","humanFileSize","undefined","icon","handleDownload","File","url","URL","createObjectURL","a","document","createElement","href","download","body","appendChild","click","removeChild","revokeObjectURL","fetch","then","res","ok","Error","blob","catch","rel","target","canDownload","canRemove","downloadText","textstring","components","fileItem","removeText","remove","rightElement","items","icons","key","onClick","text","title","subtitle","rightElements","displayName"],"sources":["../../../../../src/components/file-list/file-item/FileItem.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { getHumanSize, getIconByMimeType } from '../../../utils/file';\nimport Icon from '../../icon/Icon';\nimport ContextMenu from '../../context-menu/ContextMenu';\nimport type { ContextMenuItem } from '../../context-menu/ContextMenu.types';\nimport ListItem from '../../list/list-item/ListItem';\nimport type { IFileItem } from '../FileList';\nimport { StyledFileItem, StyledFileItemIcon } from './FileItem.styles';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\n\nexport type FileItemProps = IFileItem & {\n    onRemove?: (name: string) => void;\n    shouldAllowDownload?: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n    mimeType,\n    onRemove,\n    size,\n    name,\n    id,\n    source,\n    shouldAllowDownload,\n}) => {\n    const humanFileSize = useMemo(() => {\n        if (typeof size === 'number') {\n            return getHumanSize(size);\n        }\n\n        return undefined;\n    }, [size]);\n\n    const icon = useMemo(() => getIconByMimeType(mimeType), [mimeType]);\n\n    const handleDownload = useCallback(() => {\n        if (!source) return;\n\n        if (source instanceof File) {\n            const url = URL.createObjectURL(source);\n            const a = document.createElement('a');\n            a.href = url;\n            a.download = name;\n            document.body.appendChild(a);\n            a.click();\n            document.body.removeChild(a);\n            URL.revokeObjectURL(url);\n        } else {\n            // Try fetching as blob to force download. If CORS blocks it,\n            // fall back to opening the URL directly.\n            fetch(source)\n                .then((res) => {\n                    if (!res.ok) throw new Error('fetch failed');\n                    return res.blob();\n                })\n                .then((blob) => {\n                    const url = URL.createObjectURL(blob);\n                    const a = document.createElement('a');\n                    a.href = url;\n                    a.download = name;\n                    document.body.appendChild(a);\n                    a.click();\n                    document.body.removeChild(a);\n                    URL.revokeObjectURL(url);\n                })\n                .catch(() => {\n                    // CORS or network error: fall back to direct link\n                    const a = document.createElement('a');\n                    a.href = source;\n                    a.download = name;\n                    a.rel = 'noopener noreferrer';\n                    a.target = '_blank';\n                    document.body.appendChild(a);\n                    a.click();\n                    document.body.removeChild(a);\n                });\n        }\n    }, [name, source]);\n\n    const canDownload = shouldAllowDownload && !!source;\n    const canRemove = typeof onRemove === 'function';\n\n    const downloadText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.fileItem.download),\n    });\n    const removeText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.fileItem.remove),\n    });\n\n    const rightElement = useMemo(() => {\n        // Both actions available → show as ContextMenu\n        if (canDownload && canRemove) {\n            const items: ContextMenuItem[] = [\n                {\n                    icons: ['fa fa-download'],\n                    key: 'download',\n                    onClick: handleDownload,\n                    text: downloadText,\n                },\n                {\n                    icons: ['fa fa-trash'],\n                    key: 'remove',\n                    onClick: () => onRemove(id),\n                    text: removeText,\n                },\n            ];\n\n            return <ContextMenu items={items} />;\n        }\n\n        // Only download\n        if (canDownload) {\n            return (\n                <StyledFileItemIcon onClick={handleDownload}>\n                    <Icon icons={['fa fa-download']} />\n                </StyledFileItemIcon>\n            );\n        }\n\n        // Only remove\n        if (canRemove) {\n            return (\n                <StyledFileItemIcon onClick={() => onRemove(id)}>\n                    <Icon icons={['ts-wrong']} />\n                </StyledFileItemIcon>\n            );\n        }\n\n        return undefined;\n    }, [canDownload, canRemove, downloadText, handleDownload, id, onRemove, removeText]);\n\n    return useMemo(\n        () => (\n            <StyledFileItem>\n                <ListItem\n                    title={name}\n                    subtitle={humanFileSize}\n                    icons={[icon]}\n                    rightElements={rightElement}\n                />\n            </StyledFileItem>\n        ),\n        [humanFileSize, icon, name, rightElement],\n    );\n};\n\nFileItem.displayName = 'FileList';\n\nexport default FileItem;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FileItem.js","names":["React","useCallback","useMemo","getHumanSize","getIconByMimeType","Icon","ContextMenu","ListItem","StyledFileItem","StyledFileItemKeyboardWrapper","StyledFileItemIcon","ttsToITextString","useTextstringValue","textStrings","FileItem","mimeType","onRemove","size","name","id","source","shouldAllowDownload","handleRemove","handleItemKeyDown","event","key","preventDefault","handleRemoveKeyDown","stopPropagation","humanFileSize","undefined","icon","handleDownload","File","url","URL","createObjectURL","a","document","createElement","href","download","body","appendChild","click","removeChild","revokeObjectURL","fetch","then","res","ok","Error","blob","catch","rel","target","canDownload","canRemove","downloadText","textstring","components","fileItem","removeText","remove","rightElement","items","icons","onClick","text","onKeyDown","tabIndex","title","subtitle","rightElements","displayName"],"sources":["../../../../../src/components/file-list/file-item/FileItem.tsx"],"sourcesContent":["import React, { FC, KeyboardEventHandler, useCallback, useMemo } from 'react';\nimport { getHumanSize, getIconByMimeType } from '../../../utils/file';\nimport Icon from '../../icon/Icon';\nimport ContextMenu from '../../context-menu/ContextMenu';\nimport type { ContextMenuItem } from '../../context-menu/ContextMenu.types';\nimport ListItem from '../../list/list-item/ListItem';\nimport type { IFileItem } from '../FileList';\nimport {\n    StyledFileItem,\n    StyledFileItemActions,\n    StyledFileItemKeyboardWrapper,\n    StyledFileItemRemoveButton,\n    StyledFileItemIcon,\n} from './FileItem.styles';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\n\nexport type FileItemProps = IFileItem & {\n    onRemove?: (name: string) => void;\n    shouldAllowDownload?: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n    mimeType,\n    onRemove,\n    size,\n    name,\n    id,\n    source,\n    shouldAllowDownload,\n}) => {\n    const handleRemove = useCallback(() => {\n        if (typeof onRemove === 'function') {\n            onRemove(id);\n        }\n    }, [id, onRemove]);\n\n    const handleItemKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (event.key === 'Delete') {\n                event.preventDefault();\n                handleRemove();\n            }\n        },\n        [handleRemove],\n    );\n\n    const handleRemoveKeyDown = useCallback<KeyboardEventHandler<HTMLSpanElement>>(\n        (event) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                event.stopPropagation();\n                handleRemove();\n            }\n        },\n        [handleRemove],\n    );\n\n    const humanFileSize = useMemo(() => {\n        if (typeof size === 'number') {\n            return getHumanSize(size);\n        }\n\n        return undefined;\n    }, [size]);\n\n    const icon = useMemo(() => getIconByMimeType(mimeType), [mimeType]);\n\n    const handleDownload = useCallback(() => {\n        if (!source) return;\n\n        if (source instanceof File) {\n            const url = URL.createObjectURL(source);\n            const a = document.createElement('a');\n            a.href = url;\n            a.download = name;\n            document.body.appendChild(a);\n            a.click();\n            document.body.removeChild(a);\n            URL.revokeObjectURL(url);\n        } else {\n            // Try fetching as blob to force download. If CORS blocks it,\n            // fall back to opening the URL directly.\n            fetch(source)\n                .then((res) => {\n                    if (!res.ok) throw new Error('fetch failed');\n                    return res.blob();\n                })\n                .then((blob) => {\n                    const url = URL.createObjectURL(blob);\n                    const a = document.createElement('a');\n                    a.href = url;\n                    a.download = name;\n                    document.body.appendChild(a);\n                    a.click();\n                    document.body.removeChild(a);\n                    URL.revokeObjectURL(url);\n                })\n                .catch(() => {\n                    // CORS or network error: fall back to direct link\n                    const a = document.createElement('a');\n                    a.href = source;\n                    a.download = name;\n                    a.rel = 'noopener noreferrer';\n                    a.target = '_blank';\n                    document.body.appendChild(a);\n                    a.click();\n                    document.body.removeChild(a);\n                });\n        }\n    }, [name, source]);\n\n    const canDownload = shouldAllowDownload && !!source;\n    const canRemove = typeof onRemove === 'function';\n\n    const downloadText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.fileItem.download),\n    });\n    const removeText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.fileItem.remove),\n    });\n\n    const rightElement = useMemo(() => {\n        // Both actions available → show as ContextMenu\n        if (canDownload && canRemove) {\n            const items: ContextMenuItem[] = [\n                {\n                    icons: ['fa fa-download'],\n                    key: 'download',\n                    onClick: handleDownload,\n                    text: downloadText,\n                },\n                {\n                    icons: ['fa fa-trash'],\n                    key: 'remove',\n                    onClick: () => onRemove(id),\n                    text: removeText,\n                },\n            ];\n\n            return <ContextMenu items={items} />;\n        }\n\n        // Only download\n        if (canDownload) {\n            return (\n                <StyledFileItemIcon onClick={handleDownload}>\n                    <Icon icons={['fa fa-download']} />\n                </StyledFileItemIcon>\n            );\n        }\n\n        // Only remove\n        if (canRemove) {\n            return (\n                <StyledFileItemIcon onClick={() => onRemove(id)}>\n                    <Icon icons={['ts-wrong']} />\n                </StyledFileItemIcon>\n            );\n        }\n\n        return undefined;\n    }, [canDownload, canRemove, downloadText, handleDownload, id, onRemove, removeText]);\n\n    return useMemo(\n        () => (\n            <StyledFileItem>\n                <StyledFileItemKeyboardWrapper\n                    onKeyDown={handleItemKeyDown}\n                    tabIndex={typeof onRemove === 'function' ? 0 : -1}\n                >\n                    <ListItem\n                        title={name}\n                        subtitle={humanFileSize}\n                        icons={[icon]}\n                        rightElements={rightElement}\n                    />\n                </StyledFileItemKeyboardWrapper>\n            </StyledFileItem>\n        ),\n        [handleItemKeyDown, humanFileSize, icon, name, rightElement],\n    );\n};\n\nFileItem.displayName = 'FileList';\n\nexport default FileItem;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/file-list/file-item/FileItem.styles.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';
 export const StyledFileItem = styled.div``;
 export const StyledFileItemIcon = styled.div`
     align-items: center;
@@ -9,4 +10,21 @@ export const StyledFileItemIcon = styled.div`
     padding: 6px;
     transition: background-color 0.3s ease;
 `;
+export const StyledFileItemKeyboardWrapper = styled.div`
+    &:focus-visible {
+        ${keyboardFocusHighlightingRingCss}
+    }
+`;
+export const StyledFileItemActions = styled.span`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+`;
+export const StyledFileItemRemoveButton = styled.span`
+    display: inline-flex;
+
+    &:focus-visible {
+        ${keyboardFocusHighlightingRingCss}
+    }
+`;
 //# sourceMappingURL=FileItem.styles.js.map

package/lib/esm/components/file-list/file-item/FileItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileItem.styles.js","names":["styled","StyledFileItem","div","StyledFileItemIcon"],"sources":["../../../../../src/components/file-list/file-item/FileItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledFileItem = styled.div``;\nexport const StyledFileItemIcon = styled.div`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    background-color: transparent;\n    border-radius: 3px;\n    padding: 6px;\n    transition: background-color 0.3s ease;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,cAAc,GAAGD,MAAM,CAACE,GAAG,EAAE;AAC1C,OAAO,MAAMC,kBAAkB,GAAGH,MAAM,CAACE,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"FileItem.styles.js","names":["styled","keyboardFocusHighlightingRingCss","StyledFileItem","div","StyledFileItemIcon","StyledFileItemKeyboardWrapper","StyledFileItemActions","span","StyledFileItemRemoveButton"],"sources":["../../../../../src/components/file-list/file-item/FileItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';\n\nexport const StyledFileItem = styled.div``;\nexport const StyledFileItemIcon = styled.div`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    background-color: transparent;\n    border-radius: 3px;\n    padding: 6px;\n    transition: background-color 0.3s ease;\n`;\n\nexport const StyledFileItemKeyboardWrapper = styled.div`\n    &:focus-visible {\n        ${keyboardFocusHighlightingRingCss}\n    }\n`;\n\nexport const StyledFileItemActions = styled.span`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n`;\n\nexport const StyledFileItemRemoveButton = styled.span`\n    display: inline-flex;\n\n    &:focus-visible {\n        ${keyboardFocusHighlightingRingCss}\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,gCAAgC,QAAQ,iDAAiD;AAElG,OAAO,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAG,EAAE;AAC1C,OAAO,MAAMC,kBAAkB,GAAGJ,MAAM,CAACG,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,6BAA6B,GAAGL,MAAM,CAACG,GAAG;AACvD;AACA,UAAUF,gCAAgC;AAC1C;AACA,CAAC;AAED,OAAO,MAAMK,qBAAqB,GAAGN,MAAM,CAACO,IAAI;AAChD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,0BAA0B,GAAGR,MAAM,CAACO,IAAI;AACrD;AACA;AACA;AACA,UAAUN,gCAAgC;AAC1C;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/file-select/FileSelect.js

@@ -2,6 +2,7 @@ import { createDialog, DialogType } from 'chayns-api';
 import React, { useCallback, useMemo } from 'react';
 import { isValidFileType } from '../../utils/file';
 import { selectFiles } from '../../utils/fileDialog';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import Icon from '../icon/Icon';
 import { StyledFileSelect, StyledFileSelectContainer, StyledFileSelectText, StyledFileSelectWrapper } from './FileSelect.styles';
 var DialogView = /*#__PURE__*/function (DialogView) {
@@ -18,8 +19,10 @@ const FileSelect = ({
   onAdd,
   fileSelectionPlaceholder = 'Dateien hochladen',
   imageSelectPlaceholder,
-  shouldPreventImageUpload = false
+  shouldPreventImageUpload = false,
+  shouldEnableKeyboardHighlighting
 }) => {
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
   const handleAddImages = useCallback(images => {
     if (typeof onAdd === 'function') {
       onAdd(images);
@@ -106,20 +109,40 @@ const FileSelect = ({
     }
     handleAddFiles(draggedFiles);
   }, [shouldPreventImageUpload, handleAddFiles, fileTypes, maxFileSizeInMB, handleOpenEditor]);
+  const handleFileSelectionKeyDown = useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      void handleFileSelectionClick();
+    }
+  }, [handleFileSelectionClick]);
+  const handleImageSelectionKeyDown = useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      void handleImageSelectionClick();
+    }
+  }, [handleImageSelectionClick]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledFileSelect, null, /*#__PURE__*/React.createElement(StyledFileSelectWrapper, {
     $isDisabled: isDisabled
   }, /*#__PURE__*/React.createElement(StyledFileSelectContainer, {
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     onClick: () => void handleFileSelectionClick(),
+    onKeyDown: handleFileSelectionKeyDown,
     onDragOver: e => e.preventDefault(),
-    onDrop: handleDrop
+    onDrop: handleDrop,
+    role: "button",
+    tabIndex: isDisabled ? -1 : 0
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: fileSelectionIcons
   }), /*#__PURE__*/React.createElement(StyledFileSelectText, null, fileSelectionPlaceholder)), imageSelectPlaceholder && /*#__PURE__*/React.createElement(StyledFileSelectContainer, {
     $isImageSelection: true,
-    onClick: () => void handleImageSelectionClick()
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    onClick: () => void handleImageSelectionClick(),
+    onKeyDown: handleImageSelectionKeyDown,
+    role: "button",
+    tabIndex: isDisabled ? -1 : 0
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: imageSelectIcons
-  }), /*#__PURE__*/React.createElement(StyledFileSelectText, null, imageSelectPlaceholder)))), [isDisabled, fileSelectionIcons, fileSelectionPlaceholder, imageSelectPlaceholder, imageSelectIcons, handleFileSelectionClick, handleDrop, handleImageSelectionClick]);
+  }), /*#__PURE__*/React.createElement(StyledFileSelectText, null, imageSelectPlaceholder)))), [isDisabled, fileSelectionIcons, fileSelectionPlaceholder, imageSelectPlaceholder, imageSelectIcons, shouldShowKeyboardHighlighting, handleFileSelectionClick, handleDrop, handleFileSelectionKeyDown, handleImageSelectionClick, handleImageSelectionKeyDown]);
 };
 FileSelect.displayName = 'FileSelect';
 export default FileSelect;

package/lib/esm/components/file-select/FileSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileSelect.js","names":["createDialog","DialogType","React","useCallback","useMemo","isValidFileType","selectFiles","Icon","StyledFileSelect","StyledFileSelectContainer","StyledFileSelectText","StyledFileSelectWrapper","DialogView","FileSelect","fileSelectionIcons","imageSelectIcons","fileTypes","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","shouldPreventImageUpload","handleAddImages","images","handleAddFiles","newFiles","handleOpenEditor","file","buttonType","result","dialogInput","upload","initialView","EDITOR","imageArrayBuffer","type","MODULE","system","url","scope","module","buttons","open","size","name","handleImageSelectionClick","PIXABAY","handleFileSelectionClick","multiple","length","startsWith","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","files","filter","types","createElement","$isDisabled","onClick","onDragOver","onDrop","icons","$isImageSelection","displayName"],"sources":["../../../../src/components/file-select/FileSelect.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { DragEvent, FC, useCallback, useMemo } from 'react';\nimport type { ImageDialogResult } from '../../types/fileInput';\nimport { isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport {\n    StyledFileSelect,\n    StyledFileSelectContainer,\n    StyledFileSelectText,\n    StyledFileSelectWrapper,\n} from './FileSelect.styles';\n\nenum DialogView {\n    PIXABAY = 'pixabay',\n    EDITOR = 'editor',\n}\n\ntype DialogInput = {\n    upload: boolean;\n    initialView: DialogView;\n    imageArrayBuffer?: File;\n};\n\nexport interface UploadedFile {\n    url: string;\n    size?: number;\n    name?: string;\n}\n\nexport type FileSelectProps = {\n    /**\n     * An array of icons that should be displayed inside the FileInput\n     */\n    fileSelectionIcons?: string[];\n    /**\n     * The text that should be displayed inside the FileInput.\n     */\n    fileSelectionPlaceholder?: string;\n    /**\n     * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n     */\n    fileTypes?: string;\n    /**\n     * The icon of the image selection.\n     */\n    imageSelectIcons?: string[];\n    /**\n     * If set, pictures can be select via Pixabay.\n     */\n    imageSelectPlaceholder?: string;\n    /**\n     * Whether the FileInput is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The maximum amount of Files that can be uploaded.\n     */\n    maxFiles?: number;\n    /**\n     * The maximum size of a file in MB.\n     */\n    maxFileSizeInMB?: number;\n    /**\n     * A function to be executed when files are added.\n     */\n    onAdd?: (files: File[] | UploadedFile[]) => void;\n    /**\n     * Whether the image upload should be prevented.\n     */\n    shouldPreventImageUpload?: boolean;\n};\n\nconst FileSelect: FC<FileSelectProps> = ({\n    fileSelectionIcons = ['fa fa-upload'],\n    imageSelectIcons = ['ts-image'],\n    fileTypes,\n    isDisabled,\n    maxFileSizeInMB,\n    onAdd,\n    fileSelectionPlaceholder = 'Dateien hochladen',\n    imageSelectPlaceholder,\n    shouldPreventImageUpload = false,\n}) => {\n    const handleAddImages = useCallback(\n        (images: UploadedFile[]) => {\n            if (typeof onAdd === 'function') {\n                onAdd(images);\n            }\n        },\n        [onAdd],\n    );\n\n    const handleAddFiles = useCallback(\n        (newFiles: File[]) => {\n            if (typeof onAdd === 'function') {\n                onAdd(newFiles);\n            }\n        },\n        [onAdd],\n    );\n\n    const handleOpenEditor = useCallback(\n        async (file: File) => {\n            const { buttonType, result } = (await createDialog<DialogInput>({\n                dialogInput: {\n                    upload: true,\n                    initialView: DialogView.EDITOR,\n                    imageArrayBuffer: file,\n                },\n                type: DialogType.MODULE,\n                system: {\n                    url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n                    scope: 'dialog_image_editor',\n                    module: './ImageEditorEntry',\n                },\n                buttons: [],\n            }).open()) as ImageDialogResult;\n\n            if (buttonType === 1 && result?.url)\n                handleAddImages([\n                    {\n                        url: result.url,\n                        size: file.size,\n                        name: file.name,\n                    },\n                ]);\n        },\n        [handleAddImages],\n    );\n\n    const handleImageSelectionClick = useCallback(async () => {\n        if (isDisabled) return;\n\n        const { buttonType, result } = (await createDialog<DialogInput>({\n            dialogInput: { upload: true, initialView: DialogView.PIXABAY },\n            type: DialogType.MODULE,\n            system: {\n                url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n                scope: 'dialog_image_editor',\n                module: './ImageEditorEntry',\n            },\n            buttons: [],\n        }).open()) as ImageDialogResult;\n\n        if (buttonType === 1 && result?.url) handleAddImages([{ url: result.url }]);\n    }, [handleAddImages, isDisabled]);\n\n    const handleFileSelectionClick = useCallback(async () => {\n        if (isDisabled) return;\n\n        const newFiles = await selectFiles({ multiple: true, type: fileTypes, maxFileSizeInMB });\n\n        if (\n            newFiles.length === 1 &&\n            newFiles[0] &&\n            newFiles[0].type.startsWith('image') &&\n            !shouldPreventImageUpload\n        ) {\n            void handleOpenEditor(newFiles[0]);\n\n            return;\n        }\n\n        handleAddFiles(newFiles);\n    }, [\n        fileTypes,\n        handleAddFiles,\n        handleOpenEditor,\n        isDisabled,\n        maxFileSizeInMB,\n        shouldPreventImageUpload,\n    ]);\n\n    const handleDrop = useCallback(\n        (e: DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n\n            const draggedFiles = Array.from(e.dataTransfer.files).filter((file) => {\n                if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n                    return false;\n                }\n\n                return !(maxFileSizeInMB && file.size > maxFileSizeInMB * 1024 * 1024);\n            });\n\n            if (\n                draggedFiles.length === 1 &&\n                draggedFiles[0] &&\n                draggedFiles[0].type.startsWith('image') &&\n                !shouldPreventImageUpload\n            ) {\n                void handleOpenEditor(draggedFiles[0]);\n\n                return;\n            }\n\n            handleAddFiles(draggedFiles);\n        },\n        [shouldPreventImageUpload, handleAddFiles, fileTypes, maxFileSizeInMB, handleOpenEditor],\n    );\n\n    return useMemo(\n        () => (\n            <StyledFileSelect>\n                <StyledFileSelectWrapper $isDisabled={isDisabled}>\n                    <StyledFileSelectContainer\n                        onClick={() => void handleFileSelectionClick()}\n                        onDragOver={(e) => e.preventDefault()}\n                        onDrop={handleDrop}\n                    >\n                        <Icon icons={fileSelectionIcons} />\n                        <StyledFileSelectText>{fileSelectionPlaceholder}</StyledFileSelectText>\n                    </StyledFileSelectContainer>\n                    {imageSelectPlaceholder && (\n                        <StyledFileSelectContainer\n                            $isImageSelection\n                            onClick={() => void handleImageSelectionClick()}\n                        >\n                            <Icon icons={imageSelectIcons} />\n                            <StyledFileSelectText>{imageSelectPlaceholder}</StyledFileSelectText>\n                        </StyledFileSelectContainer>\n                    )}\n                </StyledFileSelectWrapper>\n            </StyledFileSelect>\n        ),\n        [\n            isDisabled,\n            fileSelectionIcons,\n            fileSelectionPlaceholder,\n            imageSelectPlaceholder,\n            imageSelectIcons,\n            handleFileSelectionClick,\n            handleDrop,\n            handleImageSelectionClick,\n        ],\n    );\n};\n\nFileSelect.displayName = 'FileSelect';\n\nexport default FileSelect;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FileSelect.js","names":["createDialog","DialogType","React","useCallback","useMemo","isValidFileType","selectFiles","useKeyboardFocusHighlighting","Icon","StyledFileSelect","StyledFileSelectContainer","StyledFileSelectText","StyledFileSelectWrapper","DialogView","FileSelect","fileSelectionIcons","imageSelectIcons","fileTypes","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","shouldPreventImageUpload","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","handleAddImages","images","handleAddFiles","newFiles","handleOpenEditor","file","buttonType","result","dialogInput","upload","initialView","EDITOR","imageArrayBuffer","type","MODULE","system","url","scope","module","buttons","open","size","name","handleImageSelectionClick","PIXABAY","handleFileSelectionClick","multiple","length","startsWith","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","files","filter","types","handleFileSelectionKeyDown","event","key","handleImageSelectionKeyDown","createElement","$isDisabled","$shouldShowKeyboardHighlighting","onClick","onKeyDown","onDragOver","onDrop","role","tabIndex","icons","$isImageSelection","displayName"],"sources":["../../../../src/components/file-select/FileSelect.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { DragEvent, FC, KeyboardEventHandler, useCallback, useMemo } from 'react';\nimport type { ImageDialogResult } from '../../types/fileInput';\nimport { isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport Icon from '../icon/Icon';\nimport {\n    StyledFileSelect,\n    StyledFileSelectContainer,\n    StyledFileSelectText,\n    StyledFileSelectWrapper,\n} from './FileSelect.styles';\n\nenum DialogView {\n    PIXABAY = 'pixabay',\n    EDITOR = 'editor',\n}\n\ntype DialogInput = {\n    upload: boolean;\n    initialView: DialogView;\n    imageArrayBuffer?: File;\n};\n\nexport interface UploadedFile {\n    url: string;\n    size?: number;\n    name?: string;\n}\n\nexport type FileSelectProps = {\n    /**\n     * An array of icons that should be displayed inside the FileInput\n     */\n    fileSelectionIcons?: string[];\n    /**\n     * The text that should be displayed inside the FileInput.\n     */\n    fileSelectionPlaceholder?: string;\n    /**\n     * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n     */\n    fileTypes?: string;\n    /**\n     * The icon of the image selection.\n     */\n    imageSelectIcons?: string[];\n    /**\n     * If set, pictures can be select via Pixabay.\n     */\n    imageSelectPlaceholder?: string;\n    /**\n     * Whether the FileInput is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The maximum amount of Files that can be uploaded.\n     */\n    maxFiles?: number;\n    /**\n     * The maximum size of a file in MB.\n     */\n    maxFileSizeInMB?: number;\n    /**\n     * A function to be executed when files are added.\n     */\n    onAdd?: (files: File[] | UploadedFile[]) => void;\n    /**\n     * Whether the image upload should be prevented.\n     */\n    shouldPreventImageUpload?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting for selection triggers.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst FileSelect: FC<FileSelectProps> = ({\n    fileSelectionIcons = ['fa fa-upload'],\n    imageSelectIcons = ['ts-image'],\n    fileTypes,\n    isDisabled,\n    maxFileSizeInMB,\n    onAdd,\n    fileSelectionPlaceholder = 'Dateien hochladen',\n    imageSelectPlaceholder,\n    shouldPreventImageUpload = false,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting && !isDisabled,\n    );\n\n    const handleAddImages = useCallback(\n        (images: UploadedFile[]) => {\n            if (typeof onAdd === 'function') {\n                onAdd(images);\n            }\n        },\n        [onAdd],\n    );\n\n    const handleAddFiles = useCallback(\n        (newFiles: File[]) => {\n            if (typeof onAdd === 'function') {\n                onAdd(newFiles);\n            }\n        },\n        [onAdd],\n    );\n\n    const handleOpenEditor = useCallback(\n        async (file: File) => {\n            const { buttonType, result } = (await createDialog<DialogInput>({\n                dialogInput: {\n                    upload: true,\n                    initialView: DialogView.EDITOR,\n                    imageArrayBuffer: file,\n                },\n                type: DialogType.MODULE,\n                system: {\n                    url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n                    scope: 'dialog_image_editor',\n                    module: './ImageEditorEntry',\n                },\n                buttons: [],\n            }).open()) as ImageDialogResult;\n\n            if (buttonType === 1 && result?.url)\n                handleAddImages([\n                    {\n                        url: result.url,\n                        size: file.size,\n                        name: file.name,\n                    },\n                ]);\n        },\n        [handleAddImages],\n    );\n\n    const handleImageSelectionClick = useCallback(async () => {\n        if (isDisabled) return;\n\n        const { buttonType, result } = (await createDialog<DialogInput>({\n            dialogInput: { upload: true, initialView: DialogView.PIXABAY },\n            type: DialogType.MODULE,\n            system: {\n                url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n                scope: 'dialog_image_editor',\n                module: './ImageEditorEntry',\n            },\n            buttons: [],\n        }).open()) as ImageDialogResult;\n\n        if (buttonType === 1 && result?.url) handleAddImages([{ url: result.url }]);\n    }, [handleAddImages, isDisabled]);\n\n    const handleFileSelectionClick = useCallback(async () => {\n        if (isDisabled) return;\n\n        const newFiles = await selectFiles({ multiple: true, type: fileTypes, maxFileSizeInMB });\n\n        if (\n            newFiles.length === 1 &&\n            newFiles[0] &&\n            newFiles[0].type.startsWith('image') &&\n            !shouldPreventImageUpload\n        ) {\n            void handleOpenEditor(newFiles[0]);\n\n            return;\n        }\n\n        handleAddFiles(newFiles);\n    }, [\n        fileTypes,\n        handleAddFiles,\n        handleOpenEditor,\n        isDisabled,\n        maxFileSizeInMB,\n        shouldPreventImageUpload,\n    ]);\n\n    const handleDrop = useCallback(\n        (e: DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n\n            const draggedFiles = Array.from(e.dataTransfer.files).filter((file) => {\n                if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n                    return false;\n                }\n\n                return !(maxFileSizeInMB && file.size > maxFileSizeInMB * 1024 * 1024);\n            });\n\n            if (\n                draggedFiles.length === 1 &&\n                draggedFiles[0] &&\n                draggedFiles[0].type.startsWith('image') &&\n                !shouldPreventImageUpload\n            ) {\n                void handleOpenEditor(draggedFiles[0]);\n\n                return;\n            }\n\n            handleAddFiles(draggedFiles);\n        },\n        [shouldPreventImageUpload, handleAddFiles, fileTypes, maxFileSizeInMB, handleOpenEditor],\n    );\n\n    const handleFileSelectionKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                void handleFileSelectionClick();\n            }\n        },\n        [handleFileSelectionClick],\n    );\n\n    const handleImageSelectionKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                void handleImageSelectionClick();\n            }\n        },\n        [handleImageSelectionClick],\n    );\n\n    return useMemo(\n        () => (\n            <StyledFileSelect>\n                <StyledFileSelectWrapper $isDisabled={isDisabled}>\n                    <StyledFileSelectContainer\n                        $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                        onClick={() => void handleFileSelectionClick()}\n                        onKeyDown={handleFileSelectionKeyDown}\n                        onDragOver={(e) => e.preventDefault()}\n                        onDrop={handleDrop}\n                        role=\"button\"\n                        tabIndex={isDisabled ? -1 : 0}\n                    >\n                        <Icon icons={fileSelectionIcons} />\n                        <StyledFileSelectText>{fileSelectionPlaceholder}</StyledFileSelectText>\n                    </StyledFileSelectContainer>\n                    {imageSelectPlaceholder && (\n                        <StyledFileSelectContainer\n                            $isImageSelection\n                            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                            onClick={() => void handleImageSelectionClick()}\n                            onKeyDown={handleImageSelectionKeyDown}\n                            role=\"button\"\n                            tabIndex={isDisabled ? -1 : 0}\n                        >\n                            <Icon icons={imageSelectIcons} />\n                            <StyledFileSelectText>{imageSelectPlaceholder}</StyledFileSelectText>\n                        </StyledFileSelectContainer>\n                    )}\n                </StyledFileSelectWrapper>\n            </StyledFileSelect>\n        ),\n        [\n            isDisabled,\n            fileSelectionIcons,\n            fileSelectionPlaceholder,\n            imageSelectPlaceholder,\n            imageSelectIcons,\n            shouldShowKeyboardHighlighting,\n            handleFileSelectionClick,\n            handleDrop,\n            handleFileSelectionKeyDown,\n            handleImageSelectionClick,\n            handleImageSelectionKeyDown,\n        ],\n    );\n};\n\nFileSelect.displayName = 'FileSelect';\n\nexport default FileSelect;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/file-select/FileSelect.styles.js

@@ -1,5 +1,6 @@
 import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
+import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledFileSelect = styled.div``;
 export const StyledFileSelectWrapper = styled.div`
     display: flex;
@@ -35,6 +36,15 @@ export const StyledFileSelectContainer = styled.div`
 }) => $isImageSelection && css`
             border-left: none;
         `}
+
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible {
+                transition: none;
+                ${keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 export const StyledFileSelectText = styled.p`
     color: ${({

package/lib/esm/components/file-select/FileSelect.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileSelect.styles.js","names":["motion","styled","css","StyledFileSelect","div","StyledFileSelectWrapper","$isDisabled","StyledUploadedFilesList","$shouldShowBorder","theme","headline","StyledFileSelectContainer","text","$isImageSelection","StyledFileSelectText","p","StyledMotionFileSelectList"],"sources":["../../../../src/components/file-select/FileSelect.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledFileSelect = styled.div``;\n\ntype StyledFileSelectWrapperProps = WithTheme<{\n    $isDisabled?: boolean;\n}>;\n\nexport const StyledFileSelectWrapper = styled.div<StyledFileSelectWrapperProps>`\n    display: flex;\n\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledFileSelectContainerProps = WithTheme<{\n    $isImageSelection?: boolean;\n}>;\n\ntype StyledUploadedFilesListProps = WithTheme<{ $shouldShowBorder: boolean }>;\n\nexport const StyledUploadedFilesList = styled.div<StyledUploadedFilesListProps>`\n    ${({ $shouldShowBorder, theme }: StyledUploadedFilesListProps) =>\n        $shouldShowBorder &&\n        css`\n            border-top: 1px solid ${theme.headline};\n        `}\n`;\n\nexport const StyledFileSelectContainer = styled.div<StyledFileSelectContainerProps>`\n    border: ${({ theme }: StyledFileSelectContainerProps) => theme.text} 1px dashed;\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    padding: 15px;\n    justify-content: center;\n    width: 100%;\n\n    ${({ $isImageSelection }) =>\n        $isImageSelection &&\n        css`\n            border-left: none;\n        `}\n`;\n\ntype StyledFileSelectTextProps = WithTheme<unknown>;\n\nexport const StyledFileSelectText = styled.p<StyledFileSelectTextProps>`\n    color: ${({ theme }: StyledFileSelectTextProps) => theme.text};\n`;\n\nexport const StyledMotionFileSelectList = styled(motion.div)``;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,gBAAgB,GAAGF,MAAM,CAACG,GAAG,EAAE;AAM5C,OAAO,MAAMC,uBAAuB,GAAGJ,MAAM,CAACG,GAAiC;AAC/E;AACA;AACA,cAAc,CAAC;EAAEE;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D,CAAC;AAQD,OAAO,MAAMC,uBAAuB,GAAGN,MAAM,CAACG,GAAiC;AAC/E,MAAM,CAAC;EAAEI,iBAAiB;EAAEC;AAAoC,CAAC,KACzDD,iBAAiB,IACjBN,GAAG;AACX,oCAAoCO,KAAK,CAACC,QAAQ;AAClD,SAAS;AACT,CAAC;AAED,OAAO,MAAMC,yBAAyB,GAAGV,MAAM,CAACG,GAAmC;AACnF,cAAc,CAAC;EAAEK;AAAsC,CAAC,KAAKA,KAAK,CAACG,IAAI;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAkB,CAAC,KACpBA,iBAAiB,IACjBX,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAID,OAAO,MAAMY,oBAAoB,GAAGb,MAAM,CAACc,CAA4B;AACvE,aAAa,CAAC;EAAEN;AAAiC,CAAC,KAAKA,KAAK,CAACG,IAAI;AACjE,CAAC;AAED,OAAO,MAAMI,0BAA0B,GAAGf,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC,EAAE","ignoreList":[]}
+{"version":3,"file":"FileSelect.styles.js","names":["motion","styled","css","keyboardFocusHighlightingRingCss","StyledFileSelect","div","StyledFileSelectWrapper","$isDisabled","StyledUploadedFilesList","$shouldShowBorder","theme","headline","StyledFileSelectContainer","text","$isImageSelection","$shouldShowKeyboardHighlighting","StyledFileSelectText","p","StyledMotionFileSelectList"],"sources":["../../../../src/components/file-select/FileSelect.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\nexport const StyledFileSelect = styled.div``;\n\ntype StyledFileSelectWrapperProps = WithTheme<{\n    $isDisabled?: boolean;\n}>;\n\nexport const StyledFileSelectWrapper = styled.div<StyledFileSelectWrapperProps>`\n    display: flex;\n\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledFileSelectContainerProps = WithTheme<{\n    $isImageSelection?: boolean;\n    $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\ntype StyledUploadedFilesListProps = WithTheme<{ $shouldShowBorder: boolean }>;\n\nexport const StyledUploadedFilesList = styled.div<StyledUploadedFilesListProps>`\n    ${({ $shouldShowBorder, theme }: StyledUploadedFilesListProps) =>\n        $shouldShowBorder &&\n        css`\n            border-top: 1px solid ${theme.headline};\n        `}\n`;\n\nexport const StyledFileSelectContainer = styled.div<StyledFileSelectContainerProps>`\n    border: ${({ theme }: StyledFileSelectContainerProps) => theme.text} 1px dashed;\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    padding: 15px;\n    justify-content: center;\n    width: 100%;\n\n    ${({ $isImageSelection }) =>\n        $isImageSelection &&\n        css`\n            border-left: none;\n        `}\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                transition: none;\n                ${keyboardFocusHighlightingRingCss}\n            }\n        `}\n`;\n\ntype StyledFileSelectTextProps = WithTheme<unknown>;\n\nexport const StyledFileSelectText = styled.p<StyledFileSelectTextProps>`\n    color: ${({ theme }: StyledFileSelectTextProps) => theme.text};\n`;\n\nexport const StyledMotionFileSelectList = styled(motion.div)``;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,gCAAgC,QAAQ,8CAA8C;AAE/F,OAAO,MAAMC,gBAAgB,GAAGH,MAAM,CAACI,GAAG,EAAE;AAM5C,OAAO,MAAMC,uBAAuB,GAAGL,MAAM,CAACI,GAAiC;AAC/E;AACA;AACA,cAAc,CAAC;EAAEE;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D,CAAC;AASD,OAAO,MAAMC,uBAAuB,GAAGP,MAAM,CAACI,GAAiC;AAC/E,MAAM,CAAC;EAAEI,iBAAiB;EAAEC;AAAoC,CAAC,KACzDD,iBAAiB,IACjBP,GAAG;AACX,oCAAoCQ,KAAK,CAACC,QAAQ;AAClD,SAAS;AACT,CAAC;AAED,OAAO,MAAMC,yBAAyB,GAAGX,MAAM,CAACI,GAAmC;AACnF,cAAc,CAAC;EAAEK;AAAsC,CAAC,KAAKA,KAAK,CAACG,IAAI;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAkB,CAAC,KACpBA,iBAAiB,IACjBZ,GAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEa;AAAgC,CAAC,KAClCA,+BAA+B,IAC/Bb,GAAG;AACX;AACA;AACA,kBAAkBC,gCAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAID,OAAO,MAAMa,oBAAoB,GAAGf,MAAM,CAACgB,CAA4B;AACvE,aAAa,CAAC;EAAEP;AAAiC,CAAC,KAAKA,KAAK,CAACG,IAAI;AACjE,CAAC;AAED,OAAO,MAAMK,0BAA0B,GAAGjB,MAAM,CAACD,MAAM,CAACK,GAAG,CAAC,EAAE","ignoreList":[]}

package/lib/esm/components/filter/Filter.js

@@ -1,3 +1,5 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/* eslint-disable @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, react/jsx-props-no-spreading */
 import React, { forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { StyledFilter, StyledFilterContentWrapper, StyledFilterHead, StyledFilterHeadline, StyledFilterHeadlineElement, StyledFilterIcon, StyledFilterIconWrapper, StyledFilterSearch } from './Filter.styles';
 import ExpandableContent from '../expandable-content/ExpandableContent';
@@ -8,6 +10,8 @@ import { FilterType } from '../../types/filter';
 import SearchInput from '../search-input/SearchInput';
 import ContextMenu from '../context-menu/ContextMenu';
 import Checkbox from '../checkbox/Checkbox';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
+import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
 
 //
 
@@ -21,7 +25,8 @@ const Filter = /*#__PURE__*/forwardRef(({
   checkboxConfig,
   comboboxConfig,
   onActiveChange,
-  rightIcons
+  rightIcons,
+  shouldEnableKeyboardHighlighting
 }, ref) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isSearchActive, setIsSearchActive] = useState(false);
@@ -30,7 +35,10 @@ const Filter = /*#__PURE__*/forwardRef(({
   const iconRef = useRef(null);
   const filterRef = useRef(null);
   const searchRef = useRef(null);
+  const colorScheme = useColorScheme();
+  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
   const contextMenuRef = useRef(null);
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlightingEffective);
   const type = useMemo(() => {
     if (filterButtonConfig && !searchConfig && !sortConfig && !checkboxConfig && !comboboxConfig) {
       return FilterType.ONLY_FILTER;
@@ -67,6 +75,7 @@ const Filter = /*#__PURE__*/forwardRef(({
   const handleHide = useCallback(() => {
     setIsOpen(false);
     if (type === FilterType.ONLY_SORT && contextMenuRef.current) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
       contextMenuRef.current.hide();
     }
     if (type === FilterType.ONLY_SEARCH) {
@@ -87,6 +96,7 @@ const Filter = /*#__PURE__*/forwardRef(({
       setShouldFocus(true);
     }
     if (type === FilterType.ONLY_SORT && contextMenuRef.current) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
       contextMenuRef.current.hide();
     }
     if (type === FilterType.ONLY_SEARCH) {
@@ -104,15 +114,25 @@ const Filter = /*#__PURE__*/forwardRef(({
       handleShow();
     }
   }, [handleHide, handleShow, isOpen]);
+  const handleIconKeyDown = useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleIconClick();
+    }
+  }, [handleIconClick]);
   const iconElement = useMemo(() => /*#__PURE__*/React.createElement(StyledFilterIcon, {
     onClick: handleIconClick,
+    onKeyDown: handleIconKeyDown,
     $isOpen: isOpen,
     ref: iconRef,
+    role: shouldEnableKeyboardHighlightingEffective ? 'button' : undefined,
+    tabIndex: shouldEnableKeyboardHighlightingEffective ? 0 : -1,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     $shouldShowRoundedHoverEffect: shouldShowRoundedHoverEffect
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: icons,
     size: 18
-  })), [handleIconClick, icons, isOpen, shouldShowRoundedHoverEffect]);
+  })), [handleIconClick, handleIconKeyDown, icons, isOpen, shouldEnableKeyboardHighlightingEffective, shouldShowKeyboardHighlighting, shouldShowRoundedHoverEffect]);
   const sortItems = useMemo(() => {
     if (!sortConfig) {
       return [];
@@ -139,12 +159,12 @@ const Filter = /*#__PURE__*/forwardRef(({
     if (!comboboxConfig) {
       return null;
     }
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      React.createElement(ComboBox, comboboxConfig)
-    );
-  }, [comboboxConfig]);
+    return /*#__PURE__*/React.createElement(ComboBox
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , _extends({}, comboboxConfig, {
+      shouldEnableKeyboardHighlighting: comboboxConfig.shouldEnableKeyboardHighlighting ?? shouldEnableKeyboardHighlightingEffective
+    }));
+  }, [comboboxConfig, shouldEnableKeyboardHighlightingEffective]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledFilter, {
     ref: filterRef
   }, /*#__PURE__*/React.createElement(StyledFilterHead, null, ! /*#__PURE__*/isValidElement(headline) ? /*#__PURE__*/React.createElement(StyledFilterHeadline, {
@@ -155,8 +175,18 @@ const Filter = /*#__PURE__*/forwardRef(({
     icons: rIcons,
     onClick
   }) => /*#__PURE__*/React.createElement(StyledFilterIcon, {
+    key: rIcons.join('-'),
     onClick: onClick,
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        onClick();
+      }
+    },
     $isOpen: false,
+    role: shouldEnableKeyboardHighlightingEffective ? 'button' : undefined,
+    tabIndex: shouldEnableKeyboardHighlightingEffective ? 0 : -1,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     $shouldShowRoundedHoverEffect: shouldShowRoundedHoverEffect
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: rIcons,
@@ -169,15 +199,20 @@ const Filter = /*#__PURE__*/forwardRef(({
     ref: searchRef,
     isActive: isSearchActive,
     value: searchConfig.searchValue,
-    onChange: ev => searchConfig.onSearchChange(ev.target.value)
+    onChange: ev => searchConfig.onSearchChange(ev.target.value),
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective
   })), type === FilterType.ONLY_SORT && sortConfig && /*#__PURE__*/React.createElement(ContextMenu, {
     ref: contextMenuRef,
-    items: sortItems
-  }, iconElement), type === FilterType.ONLY_CHECKBOX && checkboxConfig &&
-  /*#__PURE__*/
+    items: sortItems,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective
+  }, iconElement), type === FilterType.ONLY_CHECKBOX && checkboxConfig && /*#__PURE__*/React.createElement(Checkbox
   // eslint-disable-next-line react/jsx-props-no-spreading
-  React.createElement(Checkbox, checkboxConfig), type === FilterType.ONLY_COMBOBOX && comboboxElement), [FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && /*#__PURE__*/React.createElement(StyledFilterContentWrapper, {
-    ref: contentRef
+  , _extends({}, checkboxConfig, {
+    shouldEnableKeyboardHighlighting: checkboxConfig.shouldEnableKeyboardHighlighting ?? shouldEnableKeyboardHighlightingEffective
+  })), type === FilterType.ONLY_COMBOBOX && comboboxElement), [FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && /*#__PURE__*/React.createElement(StyledFilterContentWrapper, {
+    ref: contentRef,
+    inert: !isOpen ? 'true' : undefined,
+    "aria-hidden": !isOpen
   }, /*#__PURE__*/React.createElement(ExpandableContent, {
     isOpen: isOpen
   }, /*#__PURE__*/React.createElement(FilterContent, {
@@ -186,8 +221,9 @@ const Filter = /*#__PURE__*/forwardRef(({
     filterButtonConfig: filterButtonConfig,
     sortConfig: sortConfig,
     checkboxConfig: checkboxConfig,
-    comboboxConfig: comboboxConfig
-  })))), [headline, isSearchActive, type, rightIcons, iconElement, searchConfig, sortConfig, sortItems, checkboxConfig, isOpen, shouldFocus, filterButtonConfig, comboboxConfig, comboboxElement, shouldShowRoundedHoverEffect]);
+    comboboxConfig: comboboxConfig,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective
+  })))), [headline, isSearchActive, type, rightIcons, iconElement, searchConfig, sortConfig, sortItems, checkboxConfig, isOpen, shouldFocus, shouldEnableKeyboardHighlightingEffective, filterButtonConfig, comboboxConfig, comboboxElement, shouldShowKeyboardHighlighting, shouldShowRoundedHoverEffect]);
 });
 Filter.displayName = 'Filter';
 export default Filter;

package/lib/esm/components/filter/Filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","names":["React","forwardRef","isValidElement","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","StyledFilter","StyledFilterContentWrapper","StyledFilterHead","StyledFilterHeadline","StyledFilterHeadlineElement","StyledFilterIcon","StyledFilterIconWrapper","StyledFilterSearch","ExpandableContent","Icon","FilterContent","ComboBox","FilterType","SearchInput","ContextMenu","Checkbox","Filter","headline","searchConfig","sortConfig","shouldAutoFocus","shouldShowRoundedHoverEffect","filterButtonConfig","checkboxConfig","comboboxConfig","onActiveChange","rightIcons","ref","isOpen","setIsOpen","isSearchActive","setIsSearchActive","shouldFocus","setShouldFocus","contentRef","iconRef","filterRef","searchRef","contextMenuRef","type","ONLY_FILTER","ONLY_SORT","ONLY_SEARCH","ONLY_CHECKBOX","ONLY_COMBOBOX","MULTIPLE","icons","handleHide","current","hide","focus","window","setTimeout","handleShow","show","handleIconClick","iconElement","createElement","onClick","$isOpen","$shouldShowRoundedHoverEffect","size","sortItems","selectedItem","onSortChange","items","map","id","text","key","toString","isSelected","comboboxElement","$isSearchActive","includes","rIcons","isActive","value","searchValue","onChange","ev","onSearchChange","target","displayName"],"sources":["../../../../src/components/filter/Filter.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    isValidElement,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport {\n    StyledFilter,\n    StyledFilterContentWrapper,\n    StyledFilterHead,\n    StyledFilterHeadline,\n    StyledFilterHeadlineElement,\n    StyledFilterIcon,\n    StyledFilterIconWrapper,\n    StyledFilterSearch,\n} from './Filter.styles';\nimport ExpandableContent from '../expandable-content/ExpandableContent';\nimport Icon from '../icon/Icon';\nimport FilterContent from './filter-content/FilterContent';\nimport ComboBox from '../combobox/ComboBox';\nimport {\n    CheckboxConfig,\n    ComboboxConfig,\n    FilterButtonConfig,\n    FilterRef,\n    FilterType,\n    SearchConfig,\n    SortConfig,\n} from '../../types/filter';\nimport SearchInput from '../search-input/SearchInput';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport Checkbox from '../checkbox/Checkbox';\nimport { InputRef } from '../input/Input';\nimport type { ContextMenuItem, ContextMenuRef } from '../context-menu/ContextMenu.types';\n\nexport interface FilterRightIcon {\n    icons: string[];\n    onClick: VoidFunction;\n}\n\n//\nexport type FilterProps = {\n    headline: ReactNode;\n    searchConfig?: SearchConfig;\n    filterButtonConfig?: FilterButtonConfig;\n    sortConfig?: SortConfig;\n    checkboxConfig?: CheckboxConfig;\n    comboboxConfig?: ComboboxConfig;\n    onActiveChange?: (isActive: boolean) => void;\n    shouldShowRoundedHoverEffect?: boolean;\n    rightIcons?: FilterRightIcon[];\n    shouldAutoFocus?: boolean;\n};\n\nconst Filter = forwardRef<FilterRef, FilterProps>(\n    (\n        {\n            headline,\n            searchConfig,\n            sortConfig,\n            shouldAutoFocus = false,\n            shouldShowRoundedHoverEffect = false,\n            filterButtonConfig,\n            checkboxConfig,\n            comboboxConfig,\n            onActiveChange,\n            rightIcons,\n        },\n        ref,\n    ) => {\n        const [isOpen, setIsOpen] = useState(false);\n        const [isSearchActive, setIsSearchActive] = useState(false);\n        const [shouldFocus, setShouldFocus] = useState(false);\n\n        const contentRef = useRef<HTMLDivElement | null>(null);\n        const iconRef = useRef<HTMLDivElement | null>(null);\n        const filterRef = useRef<HTMLDivElement | null>(null);\n        const searchRef = useRef<InputRef | null>(null);\n\n        const contextMenuRef = useRef<ContextMenuRef>(null);\n\n        const type = useMemo(() => {\n            if (\n                filterButtonConfig &&\n                !searchConfig &&\n                !sortConfig &&\n                !checkboxConfig &&\n                !comboboxConfig\n            ) {\n                return FilterType.ONLY_FILTER;\n            }\n\n            if (\n                !filterButtonConfig &&\n                !searchConfig &&\n                sortConfig &&\n                !checkboxConfig &&\n                !comboboxConfig\n            ) {\n                return FilterType.ONLY_SORT;\n            }\n\n            if (\n                !filterButtonConfig &&\n                searchConfig &&\n                !sortConfig &&\n                !checkboxConfig &&\n                !comboboxConfig\n            ) {\n                return FilterType.ONLY_SEARCH;\n            }\n\n            if (\n                !filterButtonConfig &&\n                !searchConfig &&\n                !sortConfig &&\n                checkboxConfig &&\n                !comboboxConfig\n            ) {\n                return FilterType.ONLY_CHECKBOX;\n            }\n\n            if (\n                !filterButtonConfig &&\n                !searchConfig &&\n                !sortConfig &&\n                !checkboxConfig &&\n                comboboxConfig\n            ) {\n                return FilterType.ONLY_COMBOBOX;\n            }\n\n            return FilterType.MULTIPLE;\n        }, [checkboxConfig, comboboxConfig, filterButtonConfig, searchConfig, sortConfig]);\n\n        const icons = useMemo(() => {\n            switch (type) {\n                case FilterType.ONLY_FILTER:\n                    return ['fa fa-filter'];\n                case FilterType.ONLY_SORT:\n                    return ['fa fa-arrow-up-arrow-down'];\n                default:\n                    return ['fa fa-search'];\n            }\n        }, [type]);\n\n        useEffect(() => {\n            if (typeof onActiveChange === 'function') {\n                onActiveChange(isOpen);\n            }\n        }, [isOpen, onActiveChange]);\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n\n            if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n                contextMenuRef.current.hide();\n            }\n\n            if (type === FilterType.ONLY_SEARCH) {\n                setIsSearchActive(false);\n            }\n        }, [type]);\n\n        useEffect(() => {\n            if (shouldFocus) {\n                searchRef.current?.focus();\n\n                window.setTimeout(() => {\n                    setShouldFocus(false);\n                }, 200);\n            }\n        }, [shouldFocus]);\n\n        const handleShow = useCallback(() => {\n            setIsOpen(true);\n\n            if (shouldAutoFocus) {\n                setShouldFocus(true);\n            }\n\n            if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n                contextMenuRef.current.hide();\n            }\n\n            if (type === FilterType.ONLY_SEARCH) {\n                setIsSearchActive(true);\n            }\n        }, [shouldAutoFocus, type]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        const handleIconClick = useCallback(() => {\n            if (isOpen) {\n                handleHide();\n            } else {\n                handleShow();\n            }\n        }, [handleHide, handleShow, isOpen]);\n\n        const iconElement = useMemo(\n            () => (\n                <StyledFilterIcon\n                    onClick={handleIconClick}\n                    $isOpen={isOpen}\n                    ref={iconRef}\n                    $shouldShowRoundedHoverEffect={shouldShowRoundedHoverEffect}\n                >\n                    <Icon icons={icons} size={18} />\n                </StyledFilterIcon>\n            ),\n            [handleIconClick, icons, isOpen, shouldShowRoundedHoverEffect],\n        );\n\n        const sortItems: ContextMenuItem[] = useMemo(() => {\n            if (!sortConfig) {\n                return [];\n            }\n\n            const { selectedItem, onSortChange } = sortConfig;\n\n            return sortConfig.items.map(({ id, text }) => ({\n                text,\n                key: id.toString(),\n                isSelected: id === selectedItem.id,\n                icons: id === selectedItem.id ? ['fas fa-circle-small'] : [],\n                onClick: () => onSortChange({ text, id }),\n            }));\n        }, [sortConfig]);\n\n        const comboboxElement = useMemo(() => {\n            if (!comboboxConfig) {\n                return null;\n            }\n\n            return (\n                // eslint-disable-next-line react/jsx-props-no-spreading\n                <ComboBox {...comboboxConfig} />\n            );\n        }, [comboboxConfig]);\n\n        return useMemo(\n            () => (\n                <StyledFilter ref={filterRef}>\n                    <StyledFilterHead>\n                        {!isValidElement(headline) ? (\n                            <StyledFilterHeadline $isSearchActive={isSearchActive}>\n                                {headline}\n                            </StyledFilterHeadline>\n                        ) : (\n                            <StyledFilterHeadlineElement $isSearchActive={isSearchActive}>\n                                {headline}\n                            </StyledFilterHeadlineElement>\n                        )}\n                        {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n                            <StyledFilterIconWrapper>\n                                {rightIcons &&\n                                    rightIcons.map(({ icons: rIcons, onClick }) => (\n                                        <StyledFilterIcon\n                                            onClick={onClick}\n                                            $isOpen={false}\n                                            $shouldShowRoundedHoverEffect={\n                                                shouldShowRoundedHoverEffect\n                                            }\n                                        >\n                                            <Icon icons={rIcons} size={18} />\n                                        </StyledFilterIcon>\n                                    ))}\n                                {iconElement}\n                            </StyledFilterIconWrapper>\n                        )}\n                        {type === FilterType.ONLY_SEARCH && searchConfig && (\n                            <StyledFilterSearch>\n                                <SearchInput\n                                    onActiveChange={(isActive) => {\n                                        setIsSearchActive(isActive);\n                                        setIsOpen(isActive);\n                                    }}\n                                    ref={searchRef}\n                                    isActive={isSearchActive}\n                                    value={searchConfig.searchValue}\n                                    onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n                                />\n                            </StyledFilterSearch>\n                        )}\n                        {type === FilterType.ONLY_SORT && sortConfig && (\n                            <ContextMenu ref={contextMenuRef} items={sortItems}>\n                                {iconElement}\n                            </ContextMenu>\n                        )}\n                        {type === FilterType.ONLY_CHECKBOX && checkboxConfig && (\n                            // eslint-disable-next-line react/jsx-props-no-spreading\n                            <Checkbox {...checkboxConfig} />\n                        )}\n                        {type === FilterType.ONLY_COMBOBOX && comboboxElement}\n                    </StyledFilterHead>\n                    {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n                        <StyledFilterContentWrapper ref={contentRef}>\n                            <ExpandableContent isOpen={isOpen}>\n                                <FilterContent\n                                    shouldAutoFocus={shouldFocus}\n                                    searchConfig={searchConfig}\n                                    filterButtonConfig={filterButtonConfig}\n                                    sortConfig={sortConfig}\n                                    checkboxConfig={checkboxConfig}\n                                    comboboxConfig={comboboxConfig}\n                                />\n                            </ExpandableContent>\n                        </StyledFilterContentWrapper>\n                    )}\n                </StyledFilter>\n            ),\n            [\n                headline,\n                isSearchActive,\n                type,\n                rightIcons,\n                iconElement,\n                searchConfig,\n                sortConfig,\n                sortItems,\n                checkboxConfig,\n                isOpen,\n                shouldFocus,\n                filterButtonConfig,\n                comboboxConfig,\n                comboboxElement,\n                shouldShowRoundedHoverEffect,\n            ],\n        );\n    },\n);\n\nFilter.displayName = 'Filter';\n\nexport default Filter;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Filter.js","names":["React","forwardRef","isValidElement","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","StyledFilter","StyledFilterContentWrapper","StyledFilterHead","StyledFilterHeadline","StyledFilterHeadlineElement","StyledFilterIcon","StyledFilterIconWrapper","StyledFilterSearch","ExpandableContent","Icon","FilterContent","ComboBox","FilterType","SearchInput","ContextMenu","Checkbox","useKeyboardFocusHighlighting","useColorScheme","Filter","headline","searchConfig","sortConfig","shouldAutoFocus","shouldShowRoundedHoverEffect","filterButtonConfig","checkboxConfig","comboboxConfig","onActiveChange","rightIcons","shouldEnableKeyboardHighlighting","ref","isOpen","setIsOpen","isSearchActive","setIsSearchActive","shouldFocus","setShouldFocus","contentRef","iconRef","filterRef","searchRef","colorScheme","shouldEnableKeyboardHighlightingEffective","contextMenuRef","shouldShowKeyboardHighlighting","type","ONLY_FILTER","ONLY_SORT","ONLY_SEARCH","ONLY_CHECKBOX","ONLY_COMBOBOX","MULTIPLE","icons","handleHide","current","hide","focus","window","setTimeout","handleShow","show","handleIconClick","handleIconKeyDown","event","key","preventDefault","iconElement","createElement","onClick","onKeyDown","$isOpen","role","undefined","tabIndex","$shouldShowKeyboardHighlighting","$shouldShowRoundedHoverEffect","size","sortItems","selectedItem","onSortChange","items","map","id","text","toString","isSelected","comboboxElement","_extends","$isSearchActive","includes","rIcons","join","isActive","value","searchValue","onChange","ev","onSearchChange","target","inert","displayName"],"sources":["../../../../src/components/filter/Filter.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, react/jsx-props-no-spreading */\nimport React, {\n    forwardRef,\n    isValidElement,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport {\n    StyledFilter,\n    StyledFilterContentWrapper,\n    StyledFilterHead,\n    StyledFilterHeadline,\n    StyledFilterHeadlineElement,\n    StyledFilterIcon,\n    StyledFilterIconWrapper,\n    StyledFilterSearch,\n} from './Filter.styles';\nimport ExpandableContent from '../expandable-content/ExpandableContent';\nimport Icon from '../icon/Icon';\nimport FilterContent from './filter-content/FilterContent';\nimport ComboBox from '../combobox/ComboBox';\nimport {\n    CheckboxConfig,\n    ComboboxConfig,\n    FilterButtonConfig,\n    FilterRef,\n    FilterType,\n    SearchConfig,\n    SortConfig,\n} from '../../types/filter';\nimport SearchInput from '../search-input/SearchInput';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport type { ContextMenuItem, ContextMenuRef } from '../context-menu/ContextMenu.types';\nimport Checkbox from '../checkbox/Checkbox';\nimport { InputRef } from '../input/Input';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport interface FilterRightIcon {\n    icons: string[];\n    onClick: VoidFunction;\n}\n\n//\nexport type FilterProps = {\n    headline: ReactNode;\n    searchConfig?: SearchConfig;\n    filterButtonConfig?: FilterButtonConfig;\n    sortConfig?: SortConfig;\n    checkboxConfig?: CheckboxConfig;\n    comboboxConfig?: ComboboxConfig;\n    onActiveChange?: (isActive: boolean) => void;\n    shouldShowRoundedHoverEffect?: boolean;\n    rightIcons?: FilterRightIcon[];\n    shouldAutoFocus?: boolean;\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Filter = forwardRef<FilterRef, FilterProps>(\n    (\n        {\n            headline,\n            searchConfig,\n            sortConfig,\n            shouldAutoFocus = false,\n            shouldShowRoundedHoverEffect = false,\n            filterButtonConfig,\n            checkboxConfig,\n            comboboxConfig,\n            onActiveChange,\n            rightIcons,\n            shouldEnableKeyboardHighlighting,\n        },\n        ref,\n    ) => {\n        const [isOpen, setIsOpen] = useState(false);\n        const [isSearchActive, setIsSearchActive] = useState(false);\n        const [shouldFocus, setShouldFocus] = useState(false);\n\n        const contentRef = useRef<HTMLDivElement | null>(null);\n        const iconRef = useRef<HTMLDivElement | null>(null);\n        const filterRef = useRef<HTMLDivElement | null>(null);\n        const searchRef = useRef<InputRef | null>(null);\n\n        const colorScheme = useColorScheme();\n        const shouldEnableKeyboardHighlightingEffective =\n            shouldEnableKeyboardHighlighting ??\n            colorScheme?.shouldEnableKeyboardHighlighting ??\n            false;\n\n        const contextMenuRef = useRef<ContextMenuRef>(null);\n        const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n            shouldEnableKeyboardHighlightingEffective,\n        );\n\n        const type = useMemo(() => {\n            if (\n                filterButtonConfig &&\n                !searchConfig &&\n                !sortConfig &&\n                !checkboxConfig &&\n                !comboboxConfig\n            ) {\n                return FilterType.ONLY_FILTER;\n            }\n\n            if (\n                !filterButtonConfig &&\n                !searchConfig &&\n                sortConfig &&\n                !checkboxConfig &&\n                !comboboxConfig\n            ) {\n                return FilterType.ONLY_SORT;\n            }\n\n            if (\n                !filterButtonConfig &&\n                searchConfig &&\n                !sortConfig &&\n                !checkboxConfig &&\n                !comboboxConfig\n            ) {\n                return FilterType.ONLY_SEARCH;\n            }\n\n            if (\n                !filterButtonConfig &&\n                !searchConfig &&\n                !sortConfig &&\n                checkboxConfig &&\n                !comboboxConfig\n            ) {\n                return FilterType.ONLY_CHECKBOX;\n            }\n\n            if (\n                !filterButtonConfig &&\n                !searchConfig &&\n                !sortConfig &&\n                !checkboxConfig &&\n                comboboxConfig\n            ) {\n                return FilterType.ONLY_COMBOBOX;\n            }\n\n            return FilterType.MULTIPLE;\n        }, [checkboxConfig, comboboxConfig, filterButtonConfig, searchConfig, sortConfig]);\n\n        const icons = useMemo(() => {\n            switch (type) {\n                case FilterType.ONLY_FILTER:\n                    return ['fa fa-filter'];\n                case FilterType.ONLY_SORT:\n                    return ['fa fa-arrow-up-arrow-down'];\n                default:\n                    return ['fa fa-search'];\n            }\n        }, [type]);\n\n        useEffect(() => {\n            if (typeof onActiveChange === 'function') {\n                onActiveChange(isOpen);\n            }\n        }, [isOpen, onActiveChange]);\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n\n            if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n                // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access\n                contextMenuRef.current.hide();\n            }\n\n            if (type === FilterType.ONLY_SEARCH) {\n                setIsSearchActive(false);\n            }\n        }, [type]);\n\n        useEffect(() => {\n            if (shouldFocus) {\n                searchRef.current?.focus();\n\n                window.setTimeout(() => {\n                    setShouldFocus(false);\n                }, 200);\n            }\n        }, [shouldFocus]);\n\n        const handleShow = useCallback(() => {\n            setIsOpen(true);\n\n            if (shouldAutoFocus) {\n                setShouldFocus(true);\n            }\n\n            if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n                // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access\n                contextMenuRef.current.hide();\n            }\n\n            if (type === FilterType.ONLY_SEARCH) {\n                setIsSearchActive(true);\n            }\n        }, [shouldAutoFocus, type]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        const handleIconClick = useCallback(() => {\n            if (isOpen) {\n                handleHide();\n            } else {\n                handleShow();\n            }\n        }, [handleHide, handleShow, isOpen]);\n\n        const handleIconKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n            (event) => {\n                if (event.key === 'Enter' || event.key === ' ') {\n                    event.preventDefault();\n                    handleIconClick();\n                }\n            },\n            [handleIconClick],\n        );\n\n        const iconElement = useMemo(\n            () => (\n                <StyledFilterIcon\n                    onClick={handleIconClick}\n                    onKeyDown={handleIconKeyDown}\n                    $isOpen={isOpen}\n                    ref={iconRef}\n                    role={shouldEnableKeyboardHighlightingEffective ? 'button' : undefined}\n                    tabIndex={shouldEnableKeyboardHighlightingEffective ? 0 : -1}\n                    $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                    $shouldShowRoundedHoverEffect={shouldShowRoundedHoverEffect}\n                >\n                    <Icon icons={icons} size={18} />\n                </StyledFilterIcon>\n            ),\n            [\n                handleIconClick,\n                handleIconKeyDown,\n                icons,\n                isOpen,\n                shouldEnableKeyboardHighlightingEffective,\n                shouldShowKeyboardHighlighting,\n                shouldShowRoundedHoverEffect,\n            ],\n        );\n\n        const sortItems: ContextMenuItem[] = useMemo(() => {\n            if (!sortConfig) {\n                return [];\n            }\n\n            const { selectedItem, onSortChange } = sortConfig;\n\n            return sortConfig.items.map(({ id, text }) => ({\n                text,\n                key: id.toString(),\n                isSelected: id === selectedItem.id,\n                icons: id === selectedItem.id ? ['fas fa-circle-small'] : [],\n                onClick: () => onSortChange({ text, id }),\n            }));\n        }, [sortConfig]);\n\n        const comboboxElement = useMemo(() => {\n            if (!comboboxConfig) {\n                return null;\n            }\n\n            return (\n                <ComboBox\n                    // eslint-disable-next-line react/jsx-props-no-spreading\n                    {...comboboxConfig}\n                    shouldEnableKeyboardHighlighting={\n                        comboboxConfig.shouldEnableKeyboardHighlighting ??\n                        shouldEnableKeyboardHighlightingEffective\n                    }\n                />\n            );\n        }, [comboboxConfig, shouldEnableKeyboardHighlightingEffective]);\n\n        return useMemo(\n            () => (\n                <StyledFilter ref={filterRef}>\n                    <StyledFilterHead>\n                        {!isValidElement(headline) ? (\n                            <StyledFilterHeadline $isSearchActive={isSearchActive}>\n                                {headline}\n                            </StyledFilterHeadline>\n                        ) : (\n                            <StyledFilterHeadlineElement $isSearchActive={isSearchActive}>\n                                {headline}\n                            </StyledFilterHeadlineElement>\n                        )}\n                        {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n                            <StyledFilterIconWrapper>\n                                {rightIcons &&\n                                    rightIcons.map(({ icons: rIcons, onClick }) => (\n                                        <StyledFilterIcon\n                                            key={rIcons.join('-')}\n                                            onClick={onClick}\n                                            onKeyDown={(event) => {\n                                                if (event.key === 'Enter' || event.key === ' ') {\n                                                    event.preventDefault();\n                                                    onClick();\n                                                }\n                                            }}\n                                            $isOpen={false}\n                                            role={\n                                                shouldEnableKeyboardHighlightingEffective\n                                                    ? 'button'\n                                                    : undefined\n                                            }\n                                            tabIndex={\n                                                shouldEnableKeyboardHighlightingEffective ? 0 : -1\n                                            }\n                                            $shouldShowKeyboardHighlighting={\n                                                shouldShowKeyboardHighlighting\n                                            }\n                                            $shouldShowRoundedHoverEffect={\n                                                shouldShowRoundedHoverEffect\n                                            }\n                                        >\n                                            <Icon icons={rIcons} size={18} />\n                                        </StyledFilterIcon>\n                                    ))}\n                                {iconElement}\n                            </StyledFilterIconWrapper>\n                        )}\n                        {type === FilterType.ONLY_SEARCH && searchConfig && (\n                            <StyledFilterSearch>\n                                <SearchInput\n                                    onActiveChange={(isActive) => {\n                                        setIsSearchActive(isActive);\n                                        setIsOpen(isActive);\n                                    }}\n                                    ref={searchRef}\n                                    isActive={isSearchActive}\n                                    value={searchConfig.searchValue}\n                                    onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n                                    shouldEnableKeyboardHighlighting={\n                                        shouldEnableKeyboardHighlightingEffective\n                                    }\n                                />\n                            </StyledFilterSearch>\n                        )}\n                        {type === FilterType.ONLY_SORT && sortConfig && (\n                            <ContextMenu\n                                ref={contextMenuRef}\n                                items={sortItems}\n                                shouldEnableKeyboardHighlighting={\n                                    shouldEnableKeyboardHighlightingEffective\n                                }\n                            >\n                                {iconElement}\n                            </ContextMenu>\n                        )}\n                        {type === FilterType.ONLY_CHECKBOX && checkboxConfig && (\n                            <Checkbox\n                                // eslint-disable-next-line react/jsx-props-no-spreading\n                                {...checkboxConfig}\n                                shouldEnableKeyboardHighlighting={\n                                    checkboxConfig.shouldEnableKeyboardHighlighting ??\n                                    shouldEnableKeyboardHighlightingEffective\n                                }\n                            />\n                        )}\n                        {type === FilterType.ONLY_COMBOBOX && comboboxElement}\n                    </StyledFilterHead>\n                    {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n                        <StyledFilterContentWrapper\n                            ref={contentRef}\n                            inert={!isOpen ? 'true' : undefined}\n                            aria-hidden={!isOpen}\n                        >\n                            <ExpandableContent isOpen={isOpen}>\n                                <FilterContent\n                                    shouldAutoFocus={shouldFocus}\n                                    searchConfig={searchConfig}\n                                    filterButtonConfig={filterButtonConfig}\n                                    sortConfig={sortConfig}\n                                    checkboxConfig={checkboxConfig}\n                                    comboboxConfig={comboboxConfig}\n                                    shouldEnableKeyboardHighlighting={\n                                        shouldEnableKeyboardHighlightingEffective\n                                    }\n                                />\n                            </ExpandableContent>\n                        </StyledFilterContentWrapper>\n                    )}\n                </StyledFilter>\n            ),\n            [\n                headline,\n                isSearchActive,\n                type,\n                rightIcons,\n                iconElement,\n                searchConfig,\n                sortConfig,\n                sortItems,\n                checkboxConfig,\n                isOpen,\n                shouldFocus,\n                shouldEnableKeyboardHighlightingEffective,\n                filterButtonConfig,\n                comboboxConfig,\n                comboboxElement,\n                shouldShowKeyboardHighlighting,\n                shouldShowRoundedHoverEffect,\n            ],\n        );\n    },\n);\n\nFilter.displayName = 'Filter';\n\nexport default Filter;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/filter/Filter.styles.js

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import { motion } from 'motion/react';
+import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledFilter = styled.div``;
 export const StyledFilterHead = styled.div`
     display: flex;
@@ -69,6 +70,14 @@ export const StyledFilterIcon = styled.div`
   theme
 }) => theme['100']};
     }
+
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible {
+                ${keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 export const StyledMotionFilterBackground = styled(motion.div)`
     width: 30px;

package/lib/esm/components/filter/Filter.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.styles.js","names":["styled","css","motion","StyledFilter","div","StyledFilterHead","StyledFilterHeadline","h1","$isSearchActive","StyledFilterHeadlineElement","StyledFilterIconWrapper","StyledFilterSearch","StyledFilterIcon","$shouldShowRoundedHoverEffect","$isOpen","theme","StyledMotionFilterBackground","$top","$left","StyledFilterContentWrapper"],"sources":["../../../../src/components/filter/Filter.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { motion } from 'motion/react';\n\nexport const StyledFilter = styled.div``;\n\nexport const StyledFilterHead = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 20px;\n\n    position: relative;\n`;\n\ntype StyledFilterHeadlineProps = WithTheme<{ $isSearchActive: boolean }>;\n\nexport const StyledFilterHeadline = styled.h1<StyledFilterHeadlineProps>`\n    margin: 0;\n\n    opacity: ${({ $isSearchActive }) => ($isSearchActive ? 0 : 1)};\n\n    transition: opacity 0.3s;\n`;\n\nexport const StyledFilterHeadlineElement = styled.div<StyledFilterHeadlineProps>`\n    opacity: ${({ $isSearchActive }) => ($isSearchActive ? 0 : 1)};\n\n    transition: opacity 0.3s;\n`;\n\nexport const StyledFilterIconWrapper = styled.div`\n    display: flex;\n    align-items: center;\n`;\n\nexport const StyledFilterSearch = styled.div`\n    position: absolute;\n    width: 100%;\n`;\n\ntype StyledFilterIconProps = WithTheme<{\n    $isOpen: boolean;\n    $shouldShowRoundedHoverEffect: boolean;\n}>;\n\nexport const StyledFilterIcon = styled.div<StyledFilterIconProps>`\n    cursor: pointer;\n\n    aspect-ratio: 1;\n\n    height: ${({ $shouldShowRoundedHoverEffect }) => ($shouldShowRoundedHoverEffect ? 42 : 30)}px;\n    border-radius: ${({ $shouldShowRoundedHoverEffect }) =>\n        $shouldShowRoundedHoverEffect ? 3 : 0}px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    ${({ $shouldShowRoundedHoverEffect, $isOpen }) =>\n        $shouldShowRoundedHoverEffect &&\n        $isOpen &&\n        css`\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        `}\n\n    ${({ $isOpen, theme }) =>\n        $isOpen &&\n        css`\n            background-color: ${theme['100']};\n        `}\n\n    &:hover {\n        background-color: ${({ theme }) => theme['100']};\n    }\n`;\n\ntype StyledMotionFilterBackgroundProps = WithTheme<{ $top: number; $left: number }>;\n\nexport const StyledMotionFilterBackground = styled(motion.div)<StyledMotionFilterBackgroundProps>`\n    width: 30px;\n\n    position: absolute;\n\n    top: ${({ $top }) => $top}px;\n    left: ${({ $left }) => $left}px;\n\n    background-color: ${({ theme }) => theme['100']};\n`;\n\nexport const StyledFilterContentWrapper = styled.div``;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,MAAM,QAAQ,cAAc;AAErC,OAAO,MAAMC,YAAY,GAAGH,MAAM,CAACI,GAAG,EAAE;AAExC,OAAO,MAAMC,gBAAgB,GAAGL,MAAM,CAACI,GAAG;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAME,oBAAoB,GAAGN,MAAM,CAACO,EAA6B;AACxE;AACA;AACA,eAAe,CAAC;EAAEC;AAAgB,CAAC,KAAMA,eAAe,GAAG,CAAC,GAAG,CAAE;AACjE;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGT,MAAM,CAACI,GAA8B;AAChF,eAAe,CAAC;EAAEI;AAAgB,CAAC,KAAMA,eAAe,GAAG,CAAC,GAAG,CAAE;AACjE;AACA;AACA,CAAC;AAED,OAAO,MAAME,uBAAuB,GAAGV,MAAM,CAACI,GAAG;AACjD;AACA;AACA,CAAC;AAED,OAAO,MAAMO,kBAAkB,GAAGX,MAAM,CAACI,GAAG;AAC5C;AACA;AACA,CAAC;AAOD,OAAO,MAAMQ,gBAAgB,GAAGZ,MAAM,CAACI,GAA0B;AACjE;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAES;AAA8B,CAAC,KAAMA,6BAA6B,GAAG,EAAE,GAAG,EAAG;AAC9F,qBAAqB,CAAC;EAAEA;AAA8B,CAAC,KAC/CA,6BAA6B,GAAG,CAAC,GAAG,CAAC;AAC7C;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEA,6BAA6B;EAAEC;AAAQ,CAAC,KACzCD,6BAA6B,IAC7BC,OAAO,IACPb,GAAG;AACX;AACA;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEa,OAAO;EAAEC;AAAM,CAAC,KACjBD,OAAO,IACPb,GAAG;AACX,gCAAgCc,KAAK,CAAC,KAAK,CAAC;AAC5C,SAAS;AACT;AACA;AACA,4BAA4B,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACvD;AACA,CAAC;AAID,OAAO,MAAMC,4BAA4B,GAAGhB,MAAM,CAACE,MAAM,CAACE,GAAG,CAAoC;AACjG;AACA;AACA;AACA;AACA,WAAW,CAAC;EAAEa;AAAK,CAAC,KAAKA,IAAI;AAC7B,YAAY,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK;AAChC;AACA,wBAAwB,CAAC;EAAEH;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AAED,OAAO,MAAMI,0BAA0B,GAAGnB,MAAM,CAACI,GAAG,EAAE","ignoreList":[]}
+{"version":3,"file":"Filter.styles.js","names":["styled","css","motion","keyboardFocusHighlightingRingCss","StyledFilter","div","StyledFilterHead","StyledFilterHeadline","h1","$isSearchActive","StyledFilterHeadlineElement","StyledFilterIconWrapper","StyledFilterSearch","StyledFilterIcon","$shouldShowRoundedHoverEffect","$isOpen","theme","$shouldShowKeyboardHighlighting","StyledMotionFilterBackground","$top","$left","StyledFilterContentWrapper"],"sources":["../../../../src/components/filter/Filter.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { motion } from 'motion/react';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\nexport const StyledFilter = styled.div``;\n\nexport const StyledFilterHead = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 20px;\n\n    position: relative;\n`;\n\ntype StyledFilterHeadlineProps = WithTheme<{ $isSearchActive: boolean }>;\n\nexport const StyledFilterHeadline = styled.h1<StyledFilterHeadlineProps>`\n    margin: 0;\n\n    opacity: ${({ $isSearchActive }) => ($isSearchActive ? 0 : 1)};\n\n    transition: opacity 0.3s;\n`;\n\nexport const StyledFilterHeadlineElement = styled.div<StyledFilterHeadlineProps>`\n    opacity: ${({ $isSearchActive }) => ($isSearchActive ? 0 : 1)};\n\n    transition: opacity 0.3s;\n`;\n\nexport const StyledFilterIconWrapper = styled.div`\n    display: flex;\n    align-items: center;\n`;\n\nexport const StyledFilterSearch = styled.div`\n    position: absolute;\n    width: 100%;\n`;\n\ntype StyledFilterIconProps = WithTheme<{\n    $isOpen: boolean;\n    $shouldShowRoundedHoverEffect: boolean;\n    $shouldShowKeyboardHighlighting: boolean;\n}>;\n\nexport const StyledFilterIcon = styled.div<StyledFilterIconProps>`\n    cursor: pointer;\n\n    aspect-ratio: 1;\n\n    height: ${({ $shouldShowRoundedHoverEffect }) => ($shouldShowRoundedHoverEffect ? 42 : 30)}px;\n    border-radius: ${({ $shouldShowRoundedHoverEffect }) =>\n        $shouldShowRoundedHoverEffect ? 3 : 0}px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    ${({ $shouldShowRoundedHoverEffect, $isOpen }) =>\n        $shouldShowRoundedHoverEffect &&\n        $isOpen &&\n        css`\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        `}\n\n    ${({ $isOpen, theme }) =>\n        $isOpen &&\n        css`\n            background-color: ${theme['100']};\n        `}\n\n    &:hover {\n        background-color: ${({ theme }) => theme['100']};\n    }\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                ${keyboardFocusHighlightingRingCss}\n            }\n        `}\n`;\n\ntype StyledMotionFilterBackgroundProps = WithTheme<{ $top: number; $left: number }>;\n\nexport const StyledMotionFilterBackground = styled(motion.div)<StyledMotionFilterBackgroundProps>`\n    width: 30px;\n\n    position: absolute;\n\n    top: ${({ $top }) => $top}px;\n    left: ${({ $left }) => $left}px;\n\n    background-color: ${({ theme }) => theme['100']};\n`;\n\nexport const StyledFilterContentWrapper = styled.div``;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,MAAM,QAAQ,cAAc;AACrC,SAASC,gCAAgC,QAAQ,8CAA8C;AAE/F,OAAO,MAAMC,YAAY,GAAGJ,MAAM,CAACK,GAAG,EAAE;AAExC,OAAO,MAAMC,gBAAgB,GAAGN,MAAM,CAACK,GAAG;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAME,oBAAoB,GAAGP,MAAM,CAACQ,EAA6B;AACxE;AACA;AACA,eAAe,CAAC;EAAEC;AAAgB,CAAC,KAAMA,eAAe,GAAG,CAAC,GAAG,CAAE;AACjE;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGV,MAAM,CAACK,GAA8B;AAChF,eAAe,CAAC;EAAEI;AAAgB,CAAC,KAAMA,eAAe,GAAG,CAAC,GAAG,CAAE;AACjE;AACA;AACA,CAAC;AAED,OAAO,MAAME,uBAAuB,GAAGX,MAAM,CAACK,GAAG;AACjD;AACA;AACA,CAAC;AAED,OAAO,MAAMO,kBAAkB,GAAGZ,MAAM,CAACK,GAAG;AAC5C;AACA;AACA,CAAC;AAQD,OAAO,MAAMQ,gBAAgB,GAAGb,MAAM,CAACK,GAA0B;AACjE;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAES;AAA8B,CAAC,KAAMA,6BAA6B,GAAG,EAAE,GAAG,EAAG;AAC9F,qBAAqB,CAAC;EAAEA;AAA8B,CAAC,KAC/CA,6BAA6B,GAAG,CAAC,GAAG,CAAC;AAC7C;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEA,6BAA6B;EAAEC;AAAQ,CAAC,KACzCD,6BAA6B,IAC7BC,OAAO,IACPd,GAAG;AACX;AACA;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEc,OAAO;EAAEC;AAAM,CAAC,KACjBD,OAAO,IACPd,GAAG;AACX,gCAAgCe,KAAK,CAAC,KAAK,CAAC;AAC5C,SAAS;AACT;AACA;AACA,4BAA4B,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACvD;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCA,+BAA+B,IAC/BhB,GAAG;AACX;AACA,kBAAkBE,gCAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAID,OAAO,MAAMe,4BAA4B,GAAGlB,MAAM,CAACE,MAAM,CAACG,GAAG,CAAoC;AACjG;AACA;AACA;AACA;AACA,WAAW,CAAC;EAAEc;AAAK,CAAC,KAAKA,IAAI;AAC7B,YAAY,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK;AAChC;AACA,wBAAwB,CAAC;EAAEJ;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AAED,OAAO,MAAMK,0BAA0B,GAAGrB,MAAM,CAACK,GAAG,EAAE","ignoreList":[]}