@chayns-components/core 5.4.5 → 5.4.6-alpha.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/lib/esm/components/filter/filter-content/FilterContent.js

@@ -1,3 +1,5 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/* eslint-disable react/jsx-props-no-spreading */
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { StyledFilterContentControlWrapper, StyledFilterContentLabel, StyledFilterContentLabeledRow, StyledFilterContent } from './FilterContent.styles';
 import Input from '../../input/Input';
@@ -14,7 +16,8 @@ const FilterContent = ({
   filterButtonConfig,
   checkboxConfig,
   comboboxConfig,
-  shouldAutoFocus
+  shouldAutoFocus,
+  shouldEnableKeyboardHighlighting
 }) => {
   const searchRef = useRef(null);
   const ts = textStrings.components.filter.filterContent;
@@ -51,7 +54,9 @@ const FilterContent = ({
     leftElement: /*#__PURE__*/React.createElement(Icon, {
       icons: ['fa fa-search']
     })
-  }), filterButtonConfig && /*#__PURE__*/React.createElement(FilterButtons, filterButtonConfig), sortConfig && /*#__PURE__*/React.createElement(StyledFilterContentLabeledRow, null, /*#__PURE__*/React.createElement(StyledFilterContentLabel, null, /*#__PURE__*/React.createElement(Textstring, {
+  }), filterButtonConfig && /*#__PURE__*/React.createElement(FilterButtons, _extends({}, filterButtonConfig, {
+    shouldEnableKeyboardHighlighting: filterButtonConfig.shouldEnableKeyboardHighlighting ?? shouldEnableKeyboardHighlighting
+  })), sortConfig && /*#__PURE__*/React.createElement(StyledFilterContentLabeledRow, null, /*#__PURE__*/React.createElement(StyledFilterContentLabel, null, /*#__PURE__*/React.createElement(Textstring, {
     textstring: ttsToITextString(ts.sort)
   })), /*#__PURE__*/React.createElement(StyledFilterContentControlWrapper, null, /*#__PURE__*/React.createElement(ComboBox, {
     lists: getSortComboBoxLists(sortConfig),
@@ -60,11 +65,16 @@ const FilterContent = ({
       text: sortConfig.selectedItem.text,
       value: sortConfig.selectedItem.id
     },
-    onSelect: handleSelectSortItem
-  }))), comboboxConfig && /*#__PURE__*/React.createElement(StyledFilterContentLabeledRow, null, /*#__PURE__*/React.createElement(StyledFilterContentLabel, null, comboboxConfig.label), /*#__PURE__*/React.createElement(StyledFilterContentControlWrapper, null, /*#__PURE__*/React.createElement(ComboBox, comboboxConfig))), checkboxConfig &&
+    onSelect: handleSelectSortItem,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
+  }))), comboboxConfig && /*#__PURE__*/React.createElement(StyledFilterContentLabeledRow, null, /*#__PURE__*/React.createElement(StyledFilterContentLabel, null, comboboxConfig.label), /*#__PURE__*/React.createElement(StyledFilterContentControlWrapper, null, /*#__PURE__*/React.createElement(ComboBox, _extends({}, comboboxConfig, {
+    shouldEnableKeyboardHighlighting: comboboxConfig.shouldEnableKeyboardHighlighting ?? shouldEnableKeyboardHighlighting
+  })))), checkboxConfig &&
   /*#__PURE__*/
   // eslint-disable-next-line react/jsx-props-no-spreading
-  React.createElement(Checkbox, checkboxConfig))), [checkboxConfig, comboboxConfig, filterButtonConfig, handleSelectSortItem, searchConfig, sortConfig, ts.input.placeholder, ts.sort]);
+  React.createElement(Checkbox, _extends({}, checkboxConfig, {
+    shouldEnableKeyboardHighlighting: checkboxConfig.shouldEnableKeyboardHighlighting ?? shouldEnableKeyboardHighlighting
+  })))), [checkboxConfig, comboboxConfig, filterButtonConfig, handleSelectSortItem, searchConfig, shouldEnableKeyboardHighlighting, sortConfig, ts.input.placeholder, ts.sort]);
 };
 FilterContent.displayName = 'FilterContent';
 export default FilterContent;

package/lib/esm/components/filter/filter-content/FilterContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterContent.js","names":["React","useCallback","useEffect","useMemo","useRef","StyledFilterContentControlWrapper","StyledFilterContentLabel","StyledFilterContentLabeledRow","StyledFilterContent","Input","Icon","FilterButtons","ComboBox","Checkbox","Textstring","TextstringProvider","ttsToITextString","textStrings","getSortComboBoxLists","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","comboboxConfig","shouldAutoFocus","searchRef","ts","components","filter","filterContent","handleSelectSortItem","item","text","value","onSortChange","id","current","focus","createElement","libraryName","ref","onChange","ev","onSearchChange","target","placeholder","textstring","input","searchValue","shouldShowClearIcon","length","leftElement","icons","sort","lists","selectedItem","onSelect","label","displayName"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useRef } from 'react';\nimport {\n    StyledFilterContentControlWrapper,\n    StyledFilterContentLabel,\n    StyledFilterContentLabeledRow,\n    StyledFilterContent,\n} from './FilterContent.styles';\nimport Input, { InputRef } from '../../input/Input';\nimport Icon from '../../icon/Icon';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport ComboBox from '../../combobox/ComboBox';\nimport Checkbox from '../../checkbox/Checkbox';\nimport { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\nimport type { IComboBoxItem } from '../../combobox/ComboBox.types';\nimport type { FilterContentProps } from './FilterContent.types';\nimport { getSortComboBoxLists } from './FilterContent.utils';\n\nconst FilterContent: FC<FilterContentProps> = ({\n    searchConfig,\n    sortConfig,\n    filterButtonConfig,\n    checkboxConfig,\n    comboboxConfig,\n    shouldAutoFocus,\n}) => {\n    const searchRef = useRef<InputRef>(null);\n\n    const ts = textStrings.components.filter.filterContent;\n\n    const handleSelectSortItem = useCallback(\n        (item: IComboBoxItem | undefined) => {\n            if (!item) {\n                return;\n            }\n\n            const { text, value } = item;\n\n            if (sortConfig) {\n                sortConfig.onSortChange({ text, id: value });\n            }\n        },\n        [sortConfig],\n    );\n\n    useEffect(() => {\n        if (shouldAutoFocus) {\n            searchRef.current?.focus();\n        }\n    }, [shouldAutoFocus]);\n\n    return useMemo(\n        () => (\n            <TextstringProvider libraryName=\"@chayns-components-core\">\n                <StyledFilterContent>\n                    {searchConfig && (\n                        <Input\n                            ref={searchRef}\n                            onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n                            placeholder={\n                                <Textstring textstring={ttsToITextString(ts.input.placeholder)} />\n                            }\n                            value={searchConfig.searchValue}\n                            shouldShowClearIcon={searchConfig.searchValue.length > 0}\n                            leftElement={<Icon icons={['fa fa-search']} />}\n                        />\n                    )}\n                    {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n                    {filterButtonConfig && <FilterButtons {...filterButtonConfig} />}\n                    {sortConfig && (\n                        <StyledFilterContentLabeledRow>\n                            <StyledFilterContentLabel>\n                                <Textstring textstring={ttsToITextString(ts.sort)} />\n                            </StyledFilterContentLabel>\n                            <StyledFilterContentControlWrapper>\n                                <ComboBox\n                                    lists={getSortComboBoxLists(sortConfig)}\n                                    placeholder=\"\"\n                                    selectedItem={{\n                                        text: sortConfig.selectedItem.text,\n                                        value: sortConfig.selectedItem.id,\n                                    }}\n                                    onSelect={handleSelectSortItem}\n                                />\n                            </StyledFilterContentControlWrapper>\n                        </StyledFilterContentLabeledRow>\n                    )}\n                    {comboboxConfig && (\n                        <StyledFilterContentLabeledRow>\n                            <StyledFilterContentLabel>\n                                {comboboxConfig.label}\n                            </StyledFilterContentLabel>\n                            <StyledFilterContentControlWrapper>\n                                {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n                                <ComboBox {...comboboxConfig} />\n                            </StyledFilterContentControlWrapper>\n                        </StyledFilterContentLabeledRow>\n                    )}\n                    {checkboxConfig && (\n                        // eslint-disable-next-line react/jsx-props-no-spreading\n                        <Checkbox {...checkboxConfig} />\n                    )}\n                </StyledFilterContent>\n            </TextstringProvider>\n        ),\n        [\n            checkboxConfig,\n            comboboxConfig,\n            filterButtonConfig,\n            handleSelectSortItem,\n            searchConfig,\n            sortConfig,\n            ts.input.placeholder,\n            ts.sort,\n        ],\n    );\n};\n\nFilterContent.displayName = 'FilterContent';\n\nexport default FilterContent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FilterContent.js","names":["React","useCallback","useEffect","useMemo","useRef","StyledFilterContentControlWrapper","StyledFilterContentLabel","StyledFilterContentLabeledRow","StyledFilterContent","Input","Icon","FilterButtons","ComboBox","Checkbox","Textstring","TextstringProvider","ttsToITextString","textStrings","getSortComboBoxLists","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","comboboxConfig","shouldAutoFocus","shouldEnableKeyboardHighlighting","searchRef","ts","components","filter","filterContent","handleSelectSortItem","item","text","value","onSortChange","id","current","focus","createElement","libraryName","ref","onChange","ev","onSearchChange","target","placeholder","textstring","input","searchValue","shouldShowClearIcon","length","leftElement","icons","_extends","sort","lists","selectedItem","onSelect","label","displayName"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport React, { FC, useCallback, useEffect, useMemo, useRef } from 'react';\nimport {\n    StyledFilterContentControlWrapper,\n    StyledFilterContentLabel,\n    StyledFilterContentLabeledRow,\n    StyledFilterContent,\n} from './FilterContent.styles';\nimport Input, { InputRef } from '../../input/Input';\nimport Icon from '../../icon/Icon';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport ComboBox from '../../combobox/ComboBox';\nimport Checkbox from '../../checkbox/Checkbox';\nimport { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\nimport type { IComboBoxItem } from '../../combobox/ComboBox.types';\nimport type { FilterContentProps } from './FilterContent.types';\nimport { getSortComboBoxLists } from './FilterContent.utils';\n\nconst FilterContent: FC<FilterContentProps> = ({\n    searchConfig,\n    sortConfig,\n    filterButtonConfig,\n    checkboxConfig,\n    comboboxConfig,\n    shouldAutoFocus,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const searchRef = useRef<InputRef>(null);\n\n    const ts = textStrings.components.filter.filterContent;\n\n    const handleSelectSortItem = useCallback(\n        (item: IComboBoxItem | undefined) => {\n            if (!item) {\n                return;\n            }\n\n            const { text, value } = item;\n\n            if (sortConfig) {\n                sortConfig.onSortChange({ text, id: value });\n            }\n        },\n        [sortConfig],\n    );\n\n    useEffect(() => {\n        if (shouldAutoFocus) {\n            searchRef.current?.focus();\n        }\n    }, [shouldAutoFocus]);\n\n    return useMemo(\n        () => (\n            <TextstringProvider libraryName=\"@chayns-components-core\">\n                <StyledFilterContent>\n                    {searchConfig && (\n                        <Input\n                            ref={searchRef}\n                            onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n                            placeholder={\n                                <Textstring textstring={ttsToITextString(ts.input.placeholder)} />\n                            }\n                            value={searchConfig.searchValue}\n                            shouldShowClearIcon={searchConfig.searchValue.length > 0}\n                            leftElement={<Icon icons={['fa fa-search']} />}\n                        />\n                    )}\n                    {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n                    {filterButtonConfig && (\n                        <FilterButtons\n                            {...filterButtonConfig}\n                            shouldEnableKeyboardHighlighting={\n                                filterButtonConfig.shouldEnableKeyboardHighlighting ??\n                                shouldEnableKeyboardHighlighting\n                            }\n                        />\n                    )}\n                    {sortConfig && (\n                        <StyledFilterContentLabeledRow>\n                            <StyledFilterContentLabel>\n                                <Textstring textstring={ttsToITextString(ts.sort)} />\n                            </StyledFilterContentLabel>\n                            <StyledFilterContentControlWrapper>\n                                <ComboBox\n                                    lists={getSortComboBoxLists(sortConfig)}\n                                    placeholder=\"\"\n                                    selectedItem={{\n                                        text: sortConfig.selectedItem.text,\n                                        value: sortConfig.selectedItem.id,\n                                    }}\n                                    onSelect={handleSelectSortItem}\n                                    shouldEnableKeyboardHighlighting={\n                                        shouldEnableKeyboardHighlighting\n                                    }\n                                />\n                            </StyledFilterContentControlWrapper>\n                        </StyledFilterContentLabeledRow>\n                    )}\n                    {comboboxConfig && (\n                        <StyledFilterContentLabeledRow>\n                            <StyledFilterContentLabel>\n                                {comboboxConfig.label}\n                            </StyledFilterContentLabel>\n                            <StyledFilterContentControlWrapper>\n                                {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n                                <ComboBox\n                                    {...comboboxConfig}\n                                    shouldEnableKeyboardHighlighting={\n                                        comboboxConfig.shouldEnableKeyboardHighlighting ??\n                                        shouldEnableKeyboardHighlighting\n                                    }\n                                />\n                            </StyledFilterContentControlWrapper>\n                        </StyledFilterContentLabeledRow>\n                    )}\n                    {checkboxConfig && (\n                        // eslint-disable-next-line react/jsx-props-no-spreading\n                        <Checkbox\n                            {...checkboxConfig}\n                            shouldEnableKeyboardHighlighting={\n                                checkboxConfig.shouldEnableKeyboardHighlighting ??\n                                shouldEnableKeyboardHighlighting\n                            }\n                        />\n                    )}\n                </StyledFilterContent>\n            </TextstringProvider>\n        ),\n        [\n            checkboxConfig,\n            comboboxConfig,\n            filterButtonConfig,\n            handleSelectSortItem,\n            searchConfig,\n            shouldEnableKeyboardHighlighting,\n            sortConfig,\n            ts.input.placeholder,\n            ts.sort,\n        ],\n    );\n};\n\nFilterContent.displayName = 'FilterContent';\n\nexport default FilterContent;\n"],"mappings":"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","ignoreList":[]}