@chayns-components/core 5.5.30 → 5.5.34

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

@@ -1 +1 @@
-{"version":3,"file":"FileSelect.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_file","_fileDialog","_useKeyboardFocusHighlighting","_Icon","_interopRequireDefault","_FileSelect","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DialogView","FileSelect","fileSelectionIcons","imageSelectIcons","fileTypes","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","shouldPreventImageUpload","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","handleAddImages","useCallback","images","handleAddFiles","newFiles","handleOpenEditor","file","buttonType","result","createDialog","dialogInput","upload","initialView","EDITOR","imageArrayBuffer","type","DialogType","MODULE","system","url","scope","module","buttons","open","size","name","handleImageSelectionClick","PIXABAY","handleFileSelectionClick","selectFiles","multiple","length","startsWith","handleDrop","preventDefault","draggedFiles","Array","from","dataTransfer","files","filter","isValidFileType","types","handleFileSelectionKeyDown","event","key","handleImageSelectionKeyDown","useMemo","createElement","StyledFileSelect","StyledFileSelectWrapper","$isDisabled","StyledFileSelectContainer","$shouldShowKeyboardHighlighting","onClick","onKeyDown","onDragOver","onDrop","role","tabIndex","icons","StyledFileSelectText","$isImageSelection","displayName","_default","exports"],"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":[]}
+{"version":3,"file":"FileSelect.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_file","_fileDialog","_useFocusRingPortal","_useKeyboardFocusHighlighting","_Icon","_interopRequireDefault","_FileSelect","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DialogView","FileSelect","fileSelectionIcons","imageSelectIcons","fileTypes","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","shouldPreventImageUpload","shouldEnableKeyboardHighlighting","fileSelectionRef","useRef","imageSelectionRef","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","Boolean","handleAddImages","useCallback","images","handleAddFiles","newFiles","handleOpenEditor","file","buttonType","result","createDialog","dialogInput","upload","initialView","EDITOR","imageArrayBuffer","type","DialogType","MODULE","system","url","scope","module","buttons","open","size","name","handleImageSelectionClick","PIXABAY","handleFileSelectionClick","selectFiles","multiple","length","startsWith","handleDrop","preventDefault","draggedFiles","Array","from","dataTransfer","files","filter","isValidFileType","types","handleFileSelectionKeyDown","event","key","handleImageSelectionKeyDown","useMemo","createElement","StyledFileSelect","StyledFileSelectWrapper","$isDisabled","StyledFileSelectContainer","ref","onClick","onKeyDown","onDragOver","onDrop","role","tabIndex","icons","StyledFileSelectText","$isImageSelection","displayName","_default","exports"],"sources":["../../../../src/components/file-select/FileSelect.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { DragEvent, FC, KeyboardEventHandler, useCallback, useMemo, useRef } from 'react';\nimport type { ImageDialogResult } from '../../types/fileInput';\nimport { isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\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 fileSelectionRef = useRef<HTMLDivElement>(null);\n    const imageSelectionRef = useRef<HTMLDivElement>(null);\n\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting && !isDisabled,\n    );\n    useFocusRingPortal(fileSelectionRef, { isEnabled: shouldShowKeyboardHighlighting });\n    useFocusRingPortal(imageSelectionRef, {\n        isEnabled: shouldShowKeyboardHighlighting && Boolean(imageSelectPlaceholder),\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                        ref={fileSelectionRef}\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                            ref={imageSelectionRef}\n                            $isImageSelection\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            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/cjs/components/file-select/FileSelect.styles.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledUploadedFilesList = exports.StyledMotionFileSelectList = exports.StyledFileSelectWrapper = exports.StyledFileSelectText = exports.StyledFileSelectContainer = exports.StyledFileSelect = void 0;
 var _react = require("motion/react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledFileSelect = exports.StyledFileSelect = _styledComponents.default.div``;
 const StyledFileSelectWrapper = exports.StyledFileSelectWrapper = _styledComponents.default.div`
@@ -44,14 +43,9 @@ const StyledFileSelectContainer = exports.StyledFileSelectContainer = _styledCom
             border-left: none;
         `}
 
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
-            &:focus-visible {
-                transition: none;
-                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
-            }
-        `}
+    &:focus-visible {
+        outline: none;
+    }
 `;
 const StyledFileSelectText = exports.StyledFileSelectText = _styledComponents.default.p`
     color: ${({

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

@@ -1 +1 @@
-{"version":3,"file":"FileSelect.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledFileSelect","exports","styled","div","StyledFileSelectWrapper","$isDisabled","StyledUploadedFilesList","$shouldShowBorder","theme","css","headline","StyledFileSelectContainer","text","$isImageSelection","$shouldShowKeyboardHighlighting","keyboardFocusHighlightingRingCss","StyledFileSelectText","p","StyledMotionFileSelectList","motion"],"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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAEA,IAAAG,0BAAA,GAAAH,OAAA;AAAgG,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAEzF,MAAMkB,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AAMrC,MAAMC,uBAAuB,GAAAH,OAAA,CAAAG,uBAAA,GAAGF,yBAAM,CAACC,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;AASM,MAAMC,uBAAuB,GAAAL,OAAA,CAAAK,uBAAA,GAAGJ,yBAAM,CAACC,GAAiC;AAC/E,MAAM,CAAC;EAAEI,iBAAiB;EAAEC;AAAoC,CAAC,KACzDD,iBAAiB,IACjB,IAAAE,qBAAG;AACX,oCAAoCD,KAAK,CAACE,QAAQ;AAClD,SAAS;AACT,CAAC;AAEM,MAAMC,yBAAyB,GAAAV,OAAA,CAAAU,yBAAA,GAAGT,yBAAM,CAACC,GAAmC;AACnF,cAAc,CAAC;EAAEK;AAAsC,CAAC,KAAKA,KAAK,CAACI,IAAI;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAkB,CAAC,KACpBA,iBAAiB,IACjB,IAAAJ,qBAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEK;AAAgC,CAAC,KAClCA,+BAA+B,IAC/B,IAAAL,qBAAG;AACX;AACA;AACA,kBAAkBM,2DAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAIM,MAAMC,oBAAoB,GAAAf,OAAA,CAAAe,oBAAA,GAAGd,yBAAM,CAACe,CAA4B;AACvE,aAAa,CAAC;EAAET;AAAiC,CAAC,KAAKA,KAAK,CAACI,IAAI;AACjE,CAAC;AAEM,MAAMM,0BAA0B,GAAAjB,OAAA,CAAAiB,0BAAA,GAAG,IAAAhB,yBAAM,EAACiB,aAAM,CAAChB,GAAG,CAAC,EAAE","ignoreList":[]}
+{"version":3,"file":"FileSelect.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledFileSelect","exports","styled","div","StyledFileSelectWrapper","$isDisabled","StyledUploadedFilesList","$shouldShowBorder","theme","css","headline","StyledFileSelectContainer","text","$isImageSelection","StyledFileSelectText","p","StyledMotionFileSelectList","motion"],"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    &:focus-visible {\n        outline: 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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAE,wBAAAC,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAH,uBAAA,YAAAA,CAAAC,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAGzC,MAAMkB,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AAMrC,MAAMC,uBAAuB,GAAAH,OAAA,CAAAG,uBAAA,GAAGF,yBAAM,CAACC,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;AAQM,MAAMC,uBAAuB,GAAAL,OAAA,CAAAK,uBAAA,GAAGJ,yBAAM,CAACC,GAAiC;AAC/E,MAAM,CAAC;EAAEI,iBAAiB;EAAEC;AAAoC,CAAC,KACzDD,iBAAiB,IACjB,IAAAE,qBAAG;AACX,oCAAoCD,KAAK,CAACE,QAAQ;AAClD,SAAS;AACT,CAAC;AAEM,MAAMC,yBAAyB,GAAAV,OAAA,CAAAU,yBAAA,GAAGT,yBAAM,CAACC,GAAmC;AACnF,cAAc,CAAC;EAAEK;AAAsC,CAAC,KAAKA,KAAK,CAACI,IAAI;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAkB,CAAC,KACpBA,iBAAiB,IACjB,IAAAJ,qBAAG;AACX;AACA,SAAS;AACT;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMK,oBAAoB,GAAAb,OAAA,CAAAa,oBAAA,GAAGZ,yBAAM,CAACa,CAA4B;AACvE,aAAa,CAAC;EAAEP;AAAiC,CAAC,KAAKA,KAAK,CAACI,IAAI;AACjE,CAAC;AAEM,MAAMI,0BAA0B,GAAAf,OAAA,CAAAe,0BAAA,GAAG,IAAAd,yBAAM,EAACe,aAAM,CAACd,GAAG,CAAC,EAAE","ignoreList":[]}

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

@@ -14,11 +14,45 @@ var _filter = require("../../types/filter");
 var _SearchInput = _interopRequireDefault(require("../search-input/SearchInput"));
 var _ContextMenu = _interopRequireDefault(require("../context-menu/ContextMenu"));
 var _Checkbox = _interopRequireDefault(require("../checkbox/Checkbox"));
+var _useFocusRingPortal = require("../../hooks/useFocusRingPortal");
 var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 var _ColorSchemeProvider = require("../color-scheme-provider/ColorSchemeProvider");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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 */
+const FilterIconButton = ({
+  icons,
+  onClick,
+  isOpen,
+  shouldEnableKeyboardHighlighting,
+  shouldShowKeyboardHighlighting,
+  shouldShowRoundedHoverEffect
+}) => {
+  const iconRef = (0, _react.useRef)(null);
+  (0, _useFocusRingPortal.useFocusRingPortal)(iconRef, {
+    isEnabled: shouldShowKeyboardHighlighting
+  });
+  const handleKeyDown = (0, _react.useCallback)(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick();
+    }
+  }, [onClick]);
+  return /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterIcon, {
+    ref: iconRef,
+    onClick: onClick,
+    onKeyDown: handleKeyDown,
+    $isOpen: isOpen,
+    role: shouldEnableKeyboardHighlighting ? 'button' : undefined,
+    tabIndex: shouldEnableKeyboardHighlighting ? 0 : -1,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    $shouldShowRoundedHoverEffect: shouldShowRoundedHoverEffect
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: icons,
+    size: 18
+  }));
+};
+
 //
 
 const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
@@ -45,6 +79,9 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
   const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? (colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.shouldEnableKeyboardHighlighting) ?? false;
   const contextMenuRef = (0, _react.useRef)(null);
   const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlightingEffective);
+  (0, _useFocusRingPortal.useFocusRingPortal)(iconRef, {
+    isEnabled: shouldShowKeyboardHighlighting
+  });
   const type = (0, _react.useMemo)(() => {
     if (filterButtonConfig && !searchConfig && !sortConfig && !checkboxConfig && !comboboxConfig) {
       return _filter.FilterType.ONLY_FILTER;
@@ -181,24 +218,15 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
   }, headline), [_filter.FilterType.MULTIPLE, _filter.FilterType.ONLY_FILTER].includes(type) && /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterIconWrapper, null, rightIcons && rightIcons.map(({
     icons: rIcons,
     onClick
-  }) => /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterIcon, {
+  }) => /*#__PURE__*/_react.default.createElement(FilterIconButton, {
     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.default.createElement(_Icon.default, {
     icons: rIcons,
-    size: 18
-  }))), iconElement), type === _filter.FilterType.ONLY_SEARCH && searchConfig && /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterSearch, null, /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    onClick: onClick,
+    isOpen: false,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective,
+    shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    shouldShowRoundedHoverEffect: shouldShowRoundedHoverEffect
+  })), iconElement), type === _filter.FilterType.ONLY_SEARCH && searchConfig && /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterSearch, null, /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
     onActiveChange: isActive => {
       setIsSearchActive(isActive);
       setIsOpen(isActive);

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

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","names":["_react","_interopRequireWildcard","require","_Filter","_ExpandableContent","_interopRequireDefault","_Icon","_FilterContent","_ComboBox","_filter","_SearchInput","_ContextMenu","_Checkbox","_useKeyboardFocusHighlighting","_ColorSchemeProvider","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","Filter","forwardRef","headline","searchConfig","sortConfig","shouldAutoFocus","shouldShowRoundedHoverEffect","filterButtonConfig","checkboxConfig","comboboxConfig","onActiveChange","rightIcons","shouldEnableKeyboardHighlighting","ref","isOpen","setIsOpen","useState","isSearchActive","setIsSearchActive","shouldFocus","setShouldFocus","contentRef","useRef","iconRef","filterRef","searchRef","colorScheme","useColorScheme","shouldEnableKeyboardHighlightingEffective","contextMenuRef","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","type","useMemo","FilterType","ONLY_FILTER","ONLY_SORT","ONLY_SEARCH","ONLY_CHECKBOX","ONLY_COMBOBOX","MULTIPLE","icons","useEffect","handleHide","useCallback","current","hide","_searchRef$current","focus","window","setTimeout","handleShow","useImperativeHandle","show","handleIconClick","handleIconKeyDown","event","key","preventDefault","iconElement","createElement","StyledFilterIcon","onClick","onKeyDown","$isOpen","role","undefined","tabIndex","$shouldShowKeyboardHighlighting","$shouldShowRoundedHoverEffect","size","sortItems","selectedItem","onSortChange","items","map","id","text","toString","isSelected","comboboxElement","StyledFilter","StyledFilterHead","isValidElement","StyledFilterHeadline","$isSearchActive","StyledFilterHeadlineElement","includes","StyledFilterIconWrapper","rIcons","join","StyledFilterSearch","isActive","value","searchValue","onChange","ev","onSearchChange","target","StyledFilterContentWrapper","inert","displayName","_default","exports"],"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":[]}
+{"version":3,"file":"Filter.js","names":["_react","_interopRequireWildcard","require","_Filter","_ExpandableContent","_interopRequireDefault","_Icon","_FilterContent","_ComboBox","_filter","_SearchInput","_ContextMenu","_Checkbox","_useFocusRingPortal","_useKeyboardFocusHighlighting","_ColorSchemeProvider","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","FilterIconButton","icons","onClick","isOpen","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","shouldShowRoundedHoverEffect","iconRef","useRef","useFocusRingPortal","isEnabled","handleKeyDown","useCallback","event","key","preventDefault","createElement","StyledFilterIcon","ref","onKeyDown","$isOpen","role","undefined","tabIndex","$shouldShowKeyboardHighlighting","$shouldShowRoundedHoverEffect","size","Filter","forwardRef","headline","searchConfig","sortConfig","shouldAutoFocus","filterButtonConfig","checkboxConfig","comboboxConfig","onActiveChange","rightIcons","setIsOpen","useState","isSearchActive","setIsSearchActive","shouldFocus","setShouldFocus","contentRef","filterRef","searchRef","colorScheme","useColorScheme","shouldEnableKeyboardHighlightingEffective","contextMenuRef","useKeyboardFocusHighlighting","type","useMemo","FilterType","ONLY_FILTER","ONLY_SORT","ONLY_SEARCH","ONLY_CHECKBOX","ONLY_COMBOBOX","MULTIPLE","useEffect","handleHide","current","hide","_searchRef$current","focus","window","setTimeout","handleShow","useImperativeHandle","show","handleIconClick","handleIconKeyDown","iconElement","sortItems","selectedItem","onSortChange","items","map","id","text","toString","isSelected","comboboxElement","StyledFilter","StyledFilterHead","isValidElement","StyledFilterHeadline","$isSearchActive","StyledFilterHeadlineElement","includes","StyledFilterIconWrapper","rIcons","join","StyledFilterSearch","isActive","value","searchValue","onChange","ev","onSearchChange","target","StyledFilterContentWrapper","inert","displayName","_default","exports"],"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 { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport interface FilterRightIcon {\n    icons: string[];\n    onClick: VoidFunction;\n}\n\ntype FilterIconButtonProps = FilterRightIcon & {\n    isOpen: boolean;\n    shouldEnableKeyboardHighlighting: boolean;\n    shouldShowKeyboardHighlighting: boolean;\n    shouldShowRoundedHoverEffect: boolean;\n};\n\nconst FilterIconButton: React.FC<FilterIconButtonProps> = ({\n    icons,\n    onClick,\n    isOpen,\n    shouldEnableKeyboardHighlighting,\n    shouldShowKeyboardHighlighting,\n    shouldShowRoundedHoverEffect,\n}) => {\n    const iconRef = useRef<HTMLDivElement | null>(null);\n\n    useFocusRingPortal(iconRef, { isEnabled: shouldShowKeyboardHighlighting });\n\n    const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                onClick();\n            }\n        },\n        [onClick],\n    );\n\n    return (\n        <StyledFilterIcon\n            ref={iconRef}\n            onClick={onClick}\n            onKeyDown={handleKeyDown}\n            $isOpen={isOpen}\n            role={shouldEnableKeyboardHighlighting ? 'button' : undefined}\n            tabIndex={shouldEnableKeyboardHighlighting ? 0 : -1}\n            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n            $shouldShowRoundedHoverEffect={shouldShowRoundedHoverEffect}\n        >\n            <Icon icons={icons} size={18} />\n        </StyledFilterIcon>\n    );\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        useFocusRingPortal(iconRef, { isEnabled: shouldShowKeyboardHighlighting });\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                                        <FilterIconButton\n                                            key={rIcons.join('-')}\n                                            icons={rIcons}\n                                            onClick={onClick}\n                                            isOpen={false}\n                                            shouldEnableKeyboardHighlighting={\n                                                shouldEnableKeyboardHighlightingEffective\n                                            }\n                                            shouldShowKeyboardHighlighting={\n                                                shouldShowKeyboardHighlighting\n                                            }\n                                            shouldShowRoundedHoverEffect={\n                                                shouldShowRoundedHoverEffect\n                                            }\n                                        />\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/cjs/components/filter/Filter.styles.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledMotionFilterBackground = exports.StyledFilterSearch = exports.StyledFilterIconWrapper = exports.StyledFilterIcon = exports.StyledFilterHeadlineElement = exports.StyledFilterHeadline = exports.StyledFilterHead = exports.StyledFilterContentWrapper = exports.StyledFilter = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _react = require("motion/react");
-var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledFilter = exports.StyledFilter = _styledComponents.default.div``;
 const StyledFilterHead = exports.StyledFilterHead = _styledComponents.default.div`
@@ -82,7 +81,8 @@ const StyledFilterIcon = exports.StyledFilterIcon = _styledComponents.default.di
   $shouldShowKeyboardHighlighting
 }) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
             &:focus-visible {
-                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
+                outline: none;
+                box-shadow: none;
             }
         `}
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"Filter.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_react","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledFilter","exports","styled","div","StyledFilterHead","StyledFilterHeadline","h1","$isSearchActive","StyledFilterHeadlineElement","StyledFilterIconWrapper","StyledFilterSearch","StyledFilterIcon","$shouldShowRoundedHoverEffect","$isOpen","css","theme","$shouldShowKeyboardHighlighting","keyboardFocusHighlightingRingCss","StyledMotionFilterBackground","motion","$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,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,0BAAA,GAAAF,OAAA;AAAgG,SAAAD,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAEzF,MAAMkB,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AAEjC,MAAMC,gBAAgB,GAAAH,OAAA,CAAAG,gBAAA,GAAGF,yBAAM,CAACC,GAAG;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAME,oBAAoB,GAAAJ,OAAA,CAAAI,oBAAA,GAAGH,yBAAM,CAACI,EAA6B;AACxE;AACA;AACA,eAAe,CAAC;EAAEC;AAAgB,CAAC,KAAMA,eAAe,GAAG,CAAC,GAAG,CAAE;AACjE;AACA;AACA,CAAC;AAEM,MAAMC,2BAA2B,GAAAP,OAAA,CAAAO,2BAAA,GAAGN,yBAAM,CAACC,GAA8B;AAChF,eAAe,CAAC;EAAEI;AAAgB,CAAC,KAAMA,eAAe,GAAG,CAAC,GAAG,CAAE;AACjE;AACA;AACA,CAAC;AAEM,MAAME,uBAAuB,GAAAR,OAAA,CAAAQ,uBAAA,GAAGP,yBAAM,CAACC,GAAG;AACjD;AACA;AACA,CAAC;AAEM,MAAMO,kBAAkB,GAAAT,OAAA,CAAAS,kBAAA,GAAGR,yBAAM,CAACC,GAAG;AAC5C;AACA;AACA,CAAC;AAQM,MAAMQ,gBAAgB,GAAAV,OAAA,CAAAU,gBAAA,GAAGT,yBAAM,CAACC,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,IACP,IAAAC,qBAAG;AACX;AACA;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAED,OAAO;EAAEE;AAAM,CAAC,KACjBF,OAAO,IACP,IAAAC,qBAAG;AACX,gCAAgCC,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/B,IAAAF,qBAAG;AACX;AACA,kBAAkBG,2DAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAIM,MAAMC,4BAA4B,GAAAjB,OAAA,CAAAiB,4BAAA,GAAG,IAAAhB,yBAAM,EAACiB,aAAM,CAAChB,GAAG,CAAoC;AACjG;AACA;AACA;AACA;AACA,WAAW,CAAC;EAAEiB;AAAK,CAAC,KAAKA,IAAI;AAC7B,YAAY,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK;AAChC;AACA,wBAAwB,CAAC;EAAEN;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AAEM,MAAMO,0BAA0B,GAAArB,OAAA,CAAAqB,0BAAA,GAAGpB,yBAAM,CAACC,GAAG,EAAE","ignoreList":[]}
+{"version":3,"file":"Filter.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_react","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledFilter","exports","styled","div","StyledFilterHead","StyledFilterHeadline","h1","$isSearchActive","StyledFilterHeadlineElement","StyledFilterIconWrapper","StyledFilterSearch","StyledFilterIcon","$shouldShowRoundedHoverEffect","$isOpen","css","theme","$shouldShowKeyboardHighlighting","StyledMotionFilterBackground","motion","$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    $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                outline: none;\n                box-shadow: none;\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":"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","ignoreList":[]}

package/lib/cjs/components/filter-buttons/filter-button/FilterButton.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _useFocusRingPortal = require("../../../hooks/useFocusRingPortal");
 var _useKeyboardFocusHighlighting = require("../../../hooks/useKeyboardFocusHighlighting");
 var _Icon = _interopRequireDefault(require("../../icon/Icon"));
 var _FilterButton = require("./FilterButton.styles");
@@ -27,7 +28,11 @@ const FilterButton = ({
   buttonRef,
   onSelect
 }) => {
+  const filterButtonRef = (0, _react.useRef)(null);
   const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting && !isDisabled);
+  (0, _useFocusRingPortal.useFocusRingPortal)(filterButtonRef, {
+    isEnabled: shouldShowKeyboardHighlighting
+  });
   const handleClick = (0, _react.useCallback)(event => {
     if (isDisabled) {
       return;
@@ -59,7 +64,10 @@ const FilterButton = ({
     onFocus === null || onFocus === void 0 || onFocus(id);
   }, [id, onFocus]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FilterButton.StyledFilterButtonItem, {
-    ref: buttonRef,
+    ref: element => {
+      filterButtonRef.current = element;
+      buttonRef === null || buttonRef === void 0 || buttonRef(element);
+    },
     $shape: shape,
     $isSelected: isSelected,
     $isDisabled: isDisabled,

package/lib/cjs/components/filter-buttons/filter-button/FilterButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterButton.js","names":["_react","_interopRequireWildcard","require","_useKeyboardFocusHighlighting","_Icon","_interopRequireDefault","_FilterButton","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FilterButton","icons","size","shape","text","color","count","isSelected","id","isDisabled","shouldEnableKeyboardHighlighting","tabIndex","onFocus","onArrowNavigate","buttonRef","onSelect","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","handleClick","useCallback","event","preventDefault","stopPropagation","handleKeyDown","key","handleFocus","useMemo","createElement","StyledFilterButtonItem","ref","$shape","$isSelected","$isDisabled","$shouldShowKeyboardHighlighting","$size","onClick","onKeyDown","role","undefined","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","StyledFilterButtonItemLabelCount","toLocaleString","StyledFilterButtonItemBorder","$color","StyledMotionFilterButtonItemBackground","displayName","_default","exports"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.tsx"],"sourcesContent":["import React, {\n    CSSProperties,\n    FC,\n    KeyboardEventHandler,\n    MouseEvent,\n    useCallback,\n    useMemo,\n} from 'react';\nimport type { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';\nimport Icon from '../../icon/Icon';\nimport {\n    StyledFilterButtonItem,\n    StyledFilterButtonItemBorder,\n    StyledFilterButtonItemLabel,\n    StyledFilterButtonItemLabelCount,\n    StyledFilterButtonItemLabelText,\n    StyledMotionFilterButtonItemBackground,\n} from './FilterButton.styles';\n\nexport type FilterButtonProps = {\n    color?: CSSProperties['color'];\n    icons?: string[];\n    isSelected: boolean;\n    shape: FilterButtonItemShape;\n    size: FilterButtonSize;\n    count?: number;\n    text: string;\n    id: string;\n    isDisabled?: boolean;\n    shouldEnableKeyboardHighlighting?: boolean;\n    tabIndex?: number;\n    onFocus?: (id: string) => void;\n    onArrowNavigate?: (id: string, direction: -1 | 1) => void;\n    buttonRef?: (element: HTMLDivElement | null) => void;\n    onSelect: (key: string) => void;\n};\n\nconst FilterButton: FC<FilterButtonProps> = ({\n    icons,\n    size,\n    shape,\n    text,\n    color,\n    count,\n    isSelected,\n    id,\n    isDisabled,\n    shouldEnableKeyboardHighlighting,\n    tabIndex,\n    onFocus,\n    onArrowNavigate,\n    buttonRef,\n    onSelect,\n}) => {\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting && !isDisabled,\n    );\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (isDisabled) {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n\n            onSelect(id);\n        },\n        [id, isDisabled, onSelect],\n    );\n\n    const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (isDisabled) {\n                return;\n            }\n\n            if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n                event.preventDefault();\n                onArrowNavigate?.(id, 1);\n                return;\n            }\n\n            if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n                event.preventDefault();\n                onArrowNavigate?.(id, -1);\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                onSelect(id);\n            }\n        },\n        [id, isDisabled, onArrowNavigate, onSelect],\n    );\n\n    const handleFocus = useCallback(() => {\n        onFocus?.(id);\n    }, [id, onFocus]);\n\n    return useMemo(\n        () => (\n            <StyledFilterButtonItem\n                ref={buttonRef}\n                $shape={shape}\n                $isSelected={isSelected}\n                $isDisabled={isDisabled}\n                $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                $size={size}\n                onClick={handleClick}\n                onKeyDown={handleKeyDown}\n                onFocus={handleFocus}\n                role={shouldEnableKeyboardHighlighting ? 'button' : undefined}\n                tabIndex={!isDisabled ? (tabIndex ?? 0) : -1}\n                aria-pressed={shouldEnableKeyboardHighlighting ? isSelected : undefined}\n                aria-disabled={shouldEnableKeyboardHighlighting ? isDisabled : undefined}\n            >\n                <StyledFilterButtonItemLabel>\n                    {icons && <Icon icons={icons} size={15} />}\n                    <StyledFilterButtonItemLabelText>{text}</StyledFilterButtonItemLabelText>\n                    {typeof count === 'number' && (\n                        <StyledFilterButtonItemLabelCount>\n                            {count.toLocaleString()}\n                        </StyledFilterButtonItemLabelCount>\n                    )}\n                </StyledFilterButtonItemLabel>\n                <StyledFilterButtonItemBorder\n                    $isSelected={isSelected}\n                    $shape={shape}\n                    $color={color}\n                />\n                <StyledMotionFilterButtonItemBackground\n                    $isSelected={isSelected}\n                    $shape={shape}\n                    $color={color}\n                />\n            </StyledFilterButtonItem>\n        ),\n        [\n            color,\n            buttonRef,\n            count,\n            handleClick,\n            handleFocus,\n            handleKeyDown,\n            icons,\n            isDisabled,\n            isSelected,\n            shape,\n            shouldEnableKeyboardHighlighting,\n            shouldShowKeyboardHighlighting,\n            size,\n            tabIndex,\n            text,\n        ],\n    );\n};\n\nFilterButton.displayName = 'FilterButton';\n\nexport default FilterButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FilterButton.js","names":["_react","_interopRequireWildcard","require","_useFocusRingPortal","_useKeyboardFocusHighlighting","_Icon","_interopRequireDefault","_FilterButton","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FilterButton","icons","size","shape","text","color","count","isSelected","id","isDisabled","shouldEnableKeyboardHighlighting","tabIndex","onFocus","onArrowNavigate","buttonRef","onSelect","filterButtonRef","useRef","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","handleClick","useCallback","event","preventDefault","stopPropagation","handleKeyDown","key","handleFocus","useMemo","createElement","StyledFilterButtonItem","ref","element","current","$shape","$isSelected","$isDisabled","$shouldShowKeyboardHighlighting","$size","onClick","onKeyDown","role","undefined","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","StyledFilterButtonItemLabelCount","toLocaleString","StyledFilterButtonItemBorder","$color","StyledMotionFilterButtonItemBackground","displayName","_default","exports"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.tsx"],"sourcesContent":["import React, {\n    CSSProperties,\n    FC,\n    KeyboardEventHandler,\n    MouseEvent,\n    useCallback,\n    useMemo,\n    useRef,\n    type MutableRefObject,\n} from 'react';\nimport type { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport { useFocusRingPortal } from '../../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';\nimport Icon from '../../icon/Icon';\nimport {\n    StyledFilterButtonItem,\n    StyledFilterButtonItemBorder,\n    StyledFilterButtonItemLabel,\n    StyledFilterButtonItemLabelCount,\n    StyledFilterButtonItemLabelText,\n    StyledMotionFilterButtonItemBackground,\n} from './FilterButton.styles';\n\nexport type FilterButtonProps = {\n    color?: CSSProperties['color'];\n    icons?: string[];\n    isSelected: boolean;\n    shape: FilterButtonItemShape;\n    size: FilterButtonSize;\n    count?: number;\n    text: string;\n    id: string;\n    isDisabled?: boolean;\n    shouldEnableKeyboardHighlighting?: boolean;\n    tabIndex?: number;\n    onFocus?: (id: string) => void;\n    onArrowNavigate?: (id: string, direction: -1 | 1) => void;\n    buttonRef?: (element: HTMLDivElement | null) => void;\n    onSelect: (key: string) => void;\n};\n\nconst FilterButton: FC<FilterButtonProps> = ({\n    icons,\n    size,\n    shape,\n    text,\n    color,\n    count,\n    isSelected,\n    id,\n    isDisabled,\n    shouldEnableKeyboardHighlighting,\n    tabIndex,\n    onFocus,\n    onArrowNavigate,\n    buttonRef,\n    onSelect,\n}) => {\n    const filterButtonRef = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement | null>;\n\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting && !isDisabled,\n    );\n    useFocusRingPortal(filterButtonRef, { isEnabled: shouldShowKeyboardHighlighting });\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (isDisabled) {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n\n            onSelect(id);\n        },\n        [id, isDisabled, onSelect],\n    );\n\n    const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (isDisabled) {\n                return;\n            }\n\n            if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n                event.preventDefault();\n                onArrowNavigate?.(id, 1);\n                return;\n            }\n\n            if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n                event.preventDefault();\n                onArrowNavigate?.(id, -1);\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                onSelect(id);\n            }\n        },\n        [id, isDisabled, onArrowNavigate, onSelect],\n    );\n\n    const handleFocus = useCallback(() => {\n        onFocus?.(id);\n    }, [id, onFocus]);\n\n    return useMemo(\n        () => (\n            <StyledFilterButtonItem\n                ref={(element) => {\n                    filterButtonRef.current = element;\n                    buttonRef?.(element);\n                }}\n                $shape={shape}\n                $isSelected={isSelected}\n                $isDisabled={isDisabled}\n                $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                $size={size}\n                onClick={handleClick}\n                onKeyDown={handleKeyDown}\n                onFocus={handleFocus}\n                role={shouldEnableKeyboardHighlighting ? 'button' : undefined}\n                tabIndex={!isDisabled ? (tabIndex ?? 0) : -1}\n                aria-pressed={shouldEnableKeyboardHighlighting ? isSelected : undefined}\n                aria-disabled={shouldEnableKeyboardHighlighting ? isDisabled : undefined}\n            >\n                <StyledFilterButtonItemLabel>\n                    {icons && <Icon icons={icons} size={15} />}\n                    <StyledFilterButtonItemLabelText>{text}</StyledFilterButtonItemLabelText>\n                    {typeof count === 'number' && (\n                        <StyledFilterButtonItemLabelCount>\n                            {count.toLocaleString()}\n                        </StyledFilterButtonItemLabelCount>\n                    )}\n                </StyledFilterButtonItemLabel>\n                <StyledFilterButtonItemBorder\n                    $isSelected={isSelected}\n                    $shape={shape}\n                    $color={color}\n                />\n                <StyledMotionFilterButtonItemBackground\n                    $isSelected={isSelected}\n                    $shape={shape}\n                    $color={color}\n                />\n            </StyledFilterButtonItem>\n        ),\n        [\n            color,\n            buttonRef,\n            count,\n            handleClick,\n            handleFocus,\n            handleKeyDown,\n            icons,\n            isDisabled,\n            isSelected,\n            shape,\n            shouldEnableKeyboardHighlighting,\n            shouldShowKeyboardHighlighting,\n            size,\n            tabIndex,\n            text,\n        ],\n    );\n};\n\nFilterButton.displayName = 'FilterButton';\n\nexport default FilterButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js

@@ -7,7 +7,6 @@ exports.StyledMotionFilterButtonItemBackground = exports.StyledFilterButtonItemL
 var _react = require("motion/react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _filterButtons = require("../../../types/filterButtons");
-var _keyboardFocusHighlighting = require("../../../utils/keyboardFocusHighlighting.styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledFilterButtonItem = exports.StyledFilterButtonItem = _styledComponents.default.div`
     position: relative;
@@ -41,7 +40,6 @@ const StyledFilterButtonItem = exports.StyledFilterButtonItem = _styledComponent
   $shape
 }) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
             &:focus-visible {
-                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss};
                 border-radius: ${$shape === _filterButtons.FilterButtonItemShape.Round ? 100 : 3}px;
             }
         `}

package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterButton.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_filterButtons","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledFilterButtonItem","exports","styled","div","$isDisabled","$size","FilterButtonSize","Normal","$isSelected","css","$shouldShowKeyboardHighlighting","$shape","keyboardFocusHighlightingRingCss","FilterButtonItemShape","Round","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","p","theme","text","StyledFilterButtonItemLabelCount","StyledFilterButtonItemBorder","$color","headline","StyledMotionFilterButtonItemBackground","motion"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledFilterButtonItemProps = WithTheme<{\n    $size: FilterButtonSize;\n    $shape: FilterButtonItemShape;\n    $isSelected: boolean;\n    $isDisabled?: boolean;\n    $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nexport const StyledFilterButtonItem = styled.div<StyledFilterButtonItemProps>`\n    position: relative;\n    line-height: 1;\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    user-select: none;\n    padding: ${({ $size }) => ($size === FilterButtonSize.Normal ? '8px 14px' : '4px 8px')};\n\n    display: flex;\n    align-items: center;\n\n    opacity: ${({ $isDisabled }) => ($isDisabled ? '.6' : '1')};\n\n    &:hover > div:last-child {\n        ${({ $isSelected, $isDisabled }) =>\n            !$isSelected &&\n            !$isDisabled &&\n            css`\n                opacity: 0.2;\n            `}\n    }\n\n    ${({ $shouldShowKeyboardHighlighting, $shape }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                ${keyboardFocusHighlightingRingCss};\n                border-radius: ${$shape === FilterButtonItemShape.Round ? 100 : 3}px;\n            }\n        `}\n`;\n\nexport const StyledFilterButtonItemLabel = styled.div`\n    display: flex;\n    gap: 5px;\n    align-items: baseline;\n    position: relative;\n    z-index: 1;\n`;\n\ntype StyledFilterButtonItemLabelTextProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelText = styled.p<StyledFilterButtonItemLabelTextProps>`\n    color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n    margin: 0;\n    line-height: 1;\n`;\n\ntype StyledFilterButtonItemLabelCountProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelCount = styled.p<StyledFilterButtonItemLabelCountProps>`\n    color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n    margin: 0;\n    line-height: 1;\n    font-weight: bold;\n`;\n\ntype StyledFilterButtonItemBorderProps = WithTheme<{\n    $shape: FilterButtonItemShape;\n    $color: CSSProperties['color'];\n    $isSelected: boolean;\n}>;\n\nexport const StyledFilterButtonItemBorder = styled.div<StyledFilterButtonItemBorderProps>`\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    opacity: 0.4;\n    z-index: 0;\n    border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n\n    ${({ $color, theme, $isSelected }: StyledFilterButtonItemBorderProps) =>\n        !$isSelected &&\n        css`\n            border-width: 1px;\n            border-style: solid;\n            border-color: ${$color ?? theme.headline};\n        `};\n`;\n\ntype StyledFilterButtonItemBackgroundProps = WithTheme<{\n    $shape: FilterButtonItemShape;\n    $color: CSSProperties['color'];\n    $isSelected: boolean;\n}>;\n\nexport const StyledMotionFilterButtonItemBackground = styled(\n    motion.div,\n)<StyledFilterButtonItemBackgroundProps>`\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    z-index: 0;\n    opacity: ${({ $isSelected }) => ($isSelected ? 0.4 : 0)};\n    transition: opacity 0.5s ease;\n    border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n    background-color: ${({ $color, theme }: StyledFilterButtonItemBackgroundProps) =>\n        $color ?? theme.headline};\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FilterButton.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_filterButtons","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledFilterButtonItem","exports","styled","div","$isDisabled","$size","FilterButtonSize","Normal","$isSelected","css","$shouldShowKeyboardHighlighting","$shape","FilterButtonItemShape","Round","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","p","theme","text","StyledFilterButtonItemLabelCount","StyledFilterButtonItemBorder","$color","headline","StyledMotionFilterButtonItemBackground","motion"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledFilterButtonItemProps = WithTheme<{\n    $size: FilterButtonSize;\n    $shape: FilterButtonItemShape;\n    $isSelected: boolean;\n    $isDisabled?: boolean;\n    $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nexport const StyledFilterButtonItem = styled.div<StyledFilterButtonItemProps>`\n    position: relative;\n    line-height: 1;\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    user-select: none;\n    padding: ${({ $size }) => ($size === FilterButtonSize.Normal ? '8px 14px' : '4px 8px')};\n\n    display: flex;\n    align-items: center;\n\n    opacity: ${({ $isDisabled }) => ($isDisabled ? '.6' : '1')};\n\n    &:hover > div:last-child {\n        ${({ $isSelected, $isDisabled }) =>\n            !$isSelected &&\n            !$isDisabled &&\n            css`\n                opacity: 0.2;\n            `}\n    }\n\n    ${({ $shouldShowKeyboardHighlighting, $shape }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                border-radius: ${$shape === FilterButtonItemShape.Round ? 100 : 3}px;\n            }\n        `}\n`;\n\nexport const StyledFilterButtonItemLabel = styled.div`\n    display: flex;\n    gap: 5px;\n    align-items: baseline;\n    position: relative;\n    z-index: 1;\n`;\n\ntype StyledFilterButtonItemLabelTextProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelText = styled.p<StyledFilterButtonItemLabelTextProps>`\n    color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n    margin: 0;\n    line-height: 1;\n`;\n\ntype StyledFilterButtonItemLabelCountProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelCount = styled.p<StyledFilterButtonItemLabelCountProps>`\n    color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n    margin: 0;\n    line-height: 1;\n    font-weight: bold;\n`;\n\ntype StyledFilterButtonItemBorderProps = WithTheme<{\n    $shape: FilterButtonItemShape;\n    $color: CSSProperties['color'];\n    $isSelected: boolean;\n}>;\n\nexport const StyledFilterButtonItemBorder = styled.div<StyledFilterButtonItemBorderProps>`\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    opacity: 0.4;\n    z-index: 0;\n    border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n\n    ${({ $color, theme, $isSelected }: StyledFilterButtonItemBorderProps) =>\n        !$isSelected &&\n        css`\n            border-width: 1px;\n            border-style: solid;\n            border-color: ${$color ?? theme.headline};\n        `};\n`;\n\ntype StyledFilterButtonItemBackgroundProps = WithTheme<{\n    $shape: FilterButtonItemShape;\n    $color: CSSProperties['color'];\n    $isSelected: boolean;\n}>;\n\nexport const StyledMotionFilterButtonItemBackground = styled(\n    motion.div,\n)<StyledFilterButtonItemBackgroundProps>`\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    z-index: 0;\n    opacity: ${({ $isSelected }) => ($isSelected ? 0.4 : 0)};\n    transition: opacity 0.5s ease;\n    border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n    background-color: ${({ $color, theme }: StyledFilterButtonItemBackgroundProps) =>\n        $color ?? theme.headline};\n`;\n"],"mappings":"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","ignoreList":[]}