@chayns-components/core 5.4.13 → 5.4.14-alpha.0

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":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"FilterContent.types.js","names":[],"sources":["../../../../../src/components/filter/filter-content/FilterContent.types.ts"],"sourcesContent":["import type {\n    CheckboxConfig,\n    ComboboxConfig,\n    FilterButtonConfig,\n    SearchConfig,\n    SortConfig,\n} from '../../../types/filter';\n\n/**\n * Props for the `FilterContent` component.\n */\nexport type FilterContentProps = {\n    /**\n     * Search configuration for the optional search input.\n     */\n    searchConfig?: SearchConfig;\n    /**\n     * Configuration for the optional filter button group.\n     */\n    filterButtonConfig?: FilterButtonConfig;\n    /**\n     * Configuration for the optional sort combobox.\n     */\n    sortConfig?: SortConfig;\n    /**\n     * Configuration for the optional checkbox.\n     */\n    checkboxConfig?: CheckboxConfig;\n    /**\n     * Configuration for the optional labeled combobox.\n     */\n    comboboxConfig?: ComboboxConfig;\n    /**\n     * Whether the search input should receive focus when the filter opens.\n     */\n    shouldAutoFocus: boolean;\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"FilterContent.types.js","names":[],"sources":["../../../../../src/components/filter/filter-content/FilterContent.types.ts"],"sourcesContent":["import type {\n    CheckboxConfig,\n    ComboboxConfig,\n    FilterButtonConfig,\n    SearchConfig,\n    SortConfig,\n} from '../../../types/filter';\n\n/**\n * Props for the `FilterContent` component.\n */\nexport type FilterContentProps = {\n    /**\n     * Search configuration for the optional search input.\n     */\n    searchConfig?: SearchConfig;\n    /**\n     * Configuration for the optional filter button group.\n     */\n    filterButtonConfig?: FilterButtonConfig;\n    /**\n     * Configuration for the optional sort combobox.\n     */\n    sortConfig?: SortConfig;\n    /**\n     * Configuration for the optional checkbox.\n     */\n    checkboxConfig?: CheckboxConfig;\n    /**\n     * Configuration for the optional labeled combobox.\n     */\n    comboboxConfig?: ComboboxConfig;\n    /**\n     * Whether the search input should receive focus when the filter opens.\n     */\n    shouldAutoFocus: boolean;\n    /**\n     * Enables keyboard-only focus highlighting for controls that support it.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n"],"mappings":"","ignoreList":[]}

package/lib/esm/components/filter-buttons/FilterButtons.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FilterButtonItemShape, FilterButtonSize } from '../../types/filterButtons';
 import FilterButton from './filter-button/FilterButton';
 import { StyledFilterButton } from './FilterButtons.styles';
@@ -10,9 +10,22 @@ const FilterButtons = ({
   onSelect,
   items,
   shouldCalcCountForAll = false,
-  size = FilterButtonSize.Normal
+  size = FilterButtonSize.Normal,
+  shouldEnableKeyboardHighlighting
 }) => {
   const [selectedIds, setSelectedIds] = useState(['all']);
+  const [focusedId, setFocusedId] = useState('all');
+  const buttonRefs = useRef({});
+  const keyboardNavigationItems = useMemo(() => [{
+    id: 'all',
+    isDisabled: false
+  }, ...items.map(({
+    id,
+    isDisabled
+  }) => ({
+    id,
+    isDisabled: Boolean(isDisabled)
+  }))], [items]);
 
   /**
    * This function set the selectedItemKey
@@ -41,6 +54,43 @@ const FilterButtons = ({
       onSelect(newIds.filter(selectedId => selectedId !== 'all'));
     }
   }, [onSelect, selectedIds]);
+  useEffect(() => {
+    const currentFocusedItem = keyboardNavigationItems.find(({
+      id
+    }) => id === focusedId);
+    if (currentFocusedItem && !currentFocusedItem.isDisabled) {
+      return;
+    }
+    const nextFocusable = keyboardNavigationItems.find(({
+      isDisabled
+    }) => !isDisabled);
+    if (nextFocusable) {
+      setFocusedId(nextFocusable.id);
+    }
+  }, [focusedId, keyboardNavigationItems]);
+  const handleArrowNavigate = useCallback((currentId, direction) => {
+    if (!shouldEnableKeyboardHighlighting || keyboardNavigationItems.length < 2) {
+      return;
+    }
+    const startIndex = keyboardNavigationItems.findIndex(({
+      id
+    }) => id === currentId);
+    if (startIndex < 0) {
+      return;
+    }
+    let attempts = 0;
+    let nextIndex = startIndex;
+    while (attempts < keyboardNavigationItems.length) {
+      nextIndex = (nextIndex + direction + keyboardNavigationItems.length) % keyboardNavigationItems.length;
+      const nextItem = keyboardNavigationItems[nextIndex];
+      if (nextItem && !nextItem.isDisabled) {
+        setFocusedId(nextItem.id);
+        buttonRefs.current[nextItem.id]?.focus();
+        return;
+      }
+      attempts += 1;
+    }
+  }, [keyboardNavigationItems, shouldEnableKeyboardHighlighting]);
   const reactItems = useMemo(() => {
     if (items.length === 0) {
       return null;
@@ -55,7 +105,14 @@ const FilterButtons = ({
       count: allButtonCount,
       isSelected: selectedIds.includes('all') || Array.isArray(selectedIds) && selectedIds.length === 0,
       size: size,
-      onSelect: handleSelect
+      onSelect: handleSelect,
+      shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
+      onArrowNavigate: handleArrowNavigate,
+      onFocus: setFocusedId,
+      tabIndex: 0,
+      buttonRef: element => {
+        buttonRefs.current.all = element;
+      }
     }))];
     items.forEach(({
       icons,
@@ -76,11 +133,18 @@ const FilterButtons = ({
         shape: FilterButtonItemShape.Round,
         size: size,
         text: text,
-        isDisabled: isDisabled
+        isDisabled: isDisabled,
+        shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
+        onArrowNavigate: handleArrowNavigate,
+        onFocus: setFocusedId,
+        tabIndex: isDisabled ? -1 : 0,
+        buttonRef: element => {
+          buttonRefs.current[id] = element;
+        }
       }));
     });
     return array;
-  }, [allCount, handleSelect, items, selectedIds, shouldCalcCountForAll, size]);
+  }, [allCount, handleSelect, items, selectedIds, shouldCalcCountForAll, shouldEnableKeyboardHighlighting, handleArrowNavigate, size]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledFilterButton, null, reactItems), [reactItems]);
 };
 FilterButtons.displayName = 'FilterButtons';

package/lib/esm/components/filter-buttons/FilterButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterButtons.js","names":["React","useCallback","useEffect","useMemo","useState","FilterButtonItemShape","FilterButtonSize","FilterButton","StyledFilterButton","AllButton","TextstringProvider","FilterButtons","allCount","selectedItemIds","onSelect","items","shouldCalcCountForAll","size","Normal","selectedIds","setSelectedIds","handleSelect","id","newIds","includes","filter","filteredId","length","selectedId","reactItems","allButtonCount","reduce","acc","item","count","array","createElement","libraryName","isSelected","Array","isArray","forEach","icons","text","color","isDisabled","push","key","shape","Round","displayName"],"sources":["../../../../src/components/filter-buttons/FilterButtons.tsx"],"sourcesContent":["import React, { FC, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n    FilterButtonItemShape,\n    FilterButtonSize,\n    IFilterButtonItem,\n} from '../../types/filterButtons';\nimport FilterButton from './filter-button/FilterButton';\nimport { StyledFilterButton } from './FilterButtons.styles';\nimport { AllButton } from './all-button/AllButton';\nimport { TextstringProvider } from '@chayns-components/textstring';\n\nexport type FilterButtonsProps = {\n    /**\n     * The number that should be displayed as count in the \"all\" button.\n     */\n    allCount?: number;\n    /**\n     * The items that should be displayed.\n     */\n    items: IFilterButtonItem[];\n    /**\n     * A function that should be executed when an item is selected.\n     */\n    onSelect?: (keys: string[]) => void;\n    /**\n     * The keys of items that should be selected.\n     */\n    selectedItemIds?: string[];\n    /**\n     * If true, the count of all items will be shown in the \"all\" button.\n     */\n    shouldCalcCountForAll?: boolean;\n    /**\n     * The size auf the filter buttons. Use the FilterButtonSize enum.\n     */\n    size?: FilterButtonSize;\n};\n\nconst FilterButtons: FC<FilterButtonsProps> = ({\n    allCount,\n    selectedItemIds,\n    onSelect,\n    items,\n    shouldCalcCountForAll = false,\n    size = FilterButtonSize.Normal,\n}) => {\n    const [selectedIds, setSelectedIds] = useState<string[]>(['all']);\n\n    /**\n     * This function set the selectedItemKey\n     */\n    useEffect(() => {\n        if (selectedItemIds) {\n            setSelectedIds(selectedItemIds);\n        }\n    }, [selectedItemIds]);\n\n    /**\n     * Function to update the selected items\n     */\n    const handleSelect = useCallback(\n        (id: string) => {\n            let newIds: string[];\n\n            if (id === 'all') {\n                newIds = selectedIds.includes('all') ? ['all'] : [];\n            } else {\n                newIds = selectedIds.includes(id)\n                    ? selectedIds.filter((filteredId) => filteredId !== id)\n                    : [...selectedIds.filter((filteredId) => filteredId !== 'all'), id];\n            }\n\n            if (newIds.length === 0) {\n                newIds = ['all'];\n            }\n\n            setSelectedIds(newIds);\n\n            if (typeof onSelect === 'function') {\n                onSelect(newIds.filter((selectedId) => selectedId !== 'all'));\n            }\n        },\n        [onSelect, selectedIds],\n    );\n\n    const reactItems = useMemo(() => {\n        if (items.length === 0) {\n            return null;\n        }\n\n        let allButtonCount = allCount;\n\n        if (typeof allButtonCount !== 'number' && shouldCalcCountForAll) {\n            allButtonCount = items.reduce((acc, item) => acc + (item.count || 0), 0);\n        }\n\n        const array: ReactElement[] = [\n            <TextstringProvider libraryName=\"@chayns-components-core\">\n                <AllButton\n                    count={allButtonCount}\n                    isSelected={\n                        selectedIds.includes('all') ||\n                        (Array.isArray(selectedIds) && selectedIds.length === 0)\n                    }\n                    size={size}\n                    onSelect={handleSelect}\n                />\n            </TextstringProvider>,\n        ];\n\n        items.forEach(({ icons, text, color, count, id, isDisabled }) => {\n            array.push(\n                <FilterButton\n                    color={color}\n                    icons={icons}\n                    id={id}\n                    key={id}\n                    count={count}\n                    onSelect={handleSelect}\n                    isSelected={selectedIds.includes(id)}\n                    shape={FilterButtonItemShape.Round}\n                    size={size}\n                    text={text}\n                    isDisabled={isDisabled}\n                />,\n            );\n        });\n\n        return array;\n    }, [allCount, handleSelect, items, selectedIds, shouldCalcCountForAll, size]);\n\n    return useMemo(() => <StyledFilterButton>{reactItems}</StyledFilterButton>, [reactItems]);\n};\n\nFilterButtons.displayName = 'FilterButtons';\n\nexport default FilterButtons;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FilterButtons.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","FilterButtonItemShape","FilterButtonSize","FilterButton","StyledFilterButton","AllButton","TextstringProvider","FilterButtons","allCount","selectedItemIds","onSelect","items","shouldCalcCountForAll","size","Normal","shouldEnableKeyboardHighlighting","selectedIds","setSelectedIds","focusedId","setFocusedId","buttonRefs","keyboardNavigationItems","id","isDisabled","map","Boolean","handleSelect","newIds","includes","filter","filteredId","length","selectedId","currentFocusedItem","find","nextFocusable","handleArrowNavigate","currentId","direction","startIndex","findIndex","attempts","nextIndex","nextItem","current","focus","reactItems","allButtonCount","reduce","acc","item","count","array","createElement","libraryName","isSelected","Array","isArray","onArrowNavigate","onFocus","tabIndex","buttonRef","element","all","forEach","icons","text","color","push","key","shape","Round","displayName"],"sources":["../../../../src/components/filter-buttons/FilterButtons.tsx"],"sourcesContent":["import React, { FC, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n    FilterButtonItemShape,\n    FilterButtonSize,\n    IFilterButtonItem,\n} from '../../types/filterButtons';\nimport FilterButton from './filter-button/FilterButton';\nimport { StyledFilterButton } from './FilterButtons.styles';\nimport { AllButton } from './all-button/AllButton';\nimport { TextstringProvider } from '@chayns-components/textstring';\n\nexport type FilterButtonsProps = {\n    /**\n     * The number that should be displayed as count in the \"all\" button.\n     */\n    allCount?: number;\n    /**\n     * The items that should be displayed.\n     */\n    items: IFilterButtonItem[];\n    /**\n     * A function that should be executed when an item is selected.\n     */\n    onSelect?: (keys: string[]) => void;\n    /**\n     * The keys of items that should be selected.\n     */\n    selectedItemIds?: string[];\n    /**\n     * If true, the count of all items will be shown in the \"all\" button.\n     */\n    shouldCalcCountForAll?: boolean;\n    /**\n     * The size auf the filter buttons. Use the FilterButtonSize enum.\n     */\n    size?: FilterButtonSize;\n    /**\n     * Enables keyboard-only focus highlighting for filter buttons.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst FilterButtons: FC<FilterButtonsProps> = ({\n    allCount,\n    selectedItemIds,\n    onSelect,\n    items,\n    shouldCalcCountForAll = false,\n    size = FilterButtonSize.Normal,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const [selectedIds, setSelectedIds] = useState<string[]>(['all']);\n    const [focusedId, setFocusedId] = useState<string>('all');\n    const buttonRefs = useRef<Record<string, HTMLDivElement | null>>({});\n\n    const keyboardNavigationItems = useMemo(\n        () => [\n            { id: 'all', isDisabled: false },\n            ...items.map(({ id, isDisabled }) => ({ id, isDisabled: Boolean(isDisabled) })),\n        ],\n        [items],\n    );\n\n    /**\n     * This function set the selectedItemKey\n     */\n    useEffect(() => {\n        if (selectedItemIds) {\n            setSelectedIds(selectedItemIds);\n        }\n    }, [selectedItemIds]);\n\n    /**\n     * Function to update the selected items\n     */\n    const handleSelect = useCallback(\n        (id: string) => {\n            let newIds: string[];\n\n            if (id === 'all') {\n                newIds = selectedIds.includes('all') ? ['all'] : [];\n            } else {\n                newIds = selectedIds.includes(id)\n                    ? selectedIds.filter((filteredId) => filteredId !== id)\n                    : [...selectedIds.filter((filteredId) => filteredId !== 'all'), id];\n            }\n\n            if (newIds.length === 0) {\n                newIds = ['all'];\n            }\n\n            setSelectedIds(newIds);\n\n            if (typeof onSelect === 'function') {\n                onSelect(newIds.filter((selectedId) => selectedId !== 'all'));\n            }\n        },\n        [onSelect, selectedIds],\n    );\n\n    useEffect(() => {\n        const currentFocusedItem = keyboardNavigationItems.find(({ id }) => id === focusedId);\n\n        if (currentFocusedItem && !currentFocusedItem.isDisabled) {\n            return;\n        }\n\n        const nextFocusable = keyboardNavigationItems.find(({ isDisabled }) => !isDisabled);\n\n        if (nextFocusable) {\n            setFocusedId(nextFocusable.id);\n        }\n    }, [focusedId, keyboardNavigationItems]);\n\n    const handleArrowNavigate = useCallback(\n        (currentId: string, direction: -1 | 1) => {\n            if (!shouldEnableKeyboardHighlighting || keyboardNavigationItems.length < 2) {\n                return;\n            }\n\n            const startIndex = keyboardNavigationItems.findIndex(({ id }) => id === currentId);\n\n            if (startIndex < 0) {\n                return;\n            }\n\n            let attempts = 0;\n            let nextIndex = startIndex;\n\n            while (attempts < keyboardNavigationItems.length) {\n                nextIndex =\n                    (nextIndex + direction + keyboardNavigationItems.length) %\n                    keyboardNavigationItems.length;\n\n                const nextItem = keyboardNavigationItems[nextIndex];\n\n                if (nextItem && !nextItem.isDisabled) {\n                    setFocusedId(nextItem.id);\n                    buttonRefs.current[nextItem.id]?.focus();\n                    return;\n                }\n\n                attempts += 1;\n            }\n        },\n        [keyboardNavigationItems, shouldEnableKeyboardHighlighting],\n    );\n\n    const reactItems = useMemo(() => {\n        if (items.length === 0) {\n            return null;\n        }\n\n        let allButtonCount = allCount;\n\n        if (typeof allButtonCount !== 'number' && shouldCalcCountForAll) {\n            allButtonCount = items.reduce((acc, item) => acc + (item.count || 0), 0);\n        }\n\n        const array: ReactElement[] = [\n            <TextstringProvider libraryName=\"@chayns-components-core\">\n                <AllButton\n                    count={allButtonCount}\n                    isSelected={\n                        selectedIds.includes('all') ||\n                        (Array.isArray(selectedIds) && selectedIds.length === 0)\n                    }\n                    size={size}\n                    onSelect={handleSelect}\n                    shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                    onArrowNavigate={handleArrowNavigate}\n                    onFocus={setFocusedId}\n                    tabIndex={0}\n                    buttonRef={(element) => {\n                        buttonRefs.current.all = element;\n                    }}\n                />\n            </TextstringProvider>,\n        ];\n\n        items.forEach(({ icons, text, color, count, id, isDisabled }) => {\n            array.push(\n                <FilterButton\n                    color={color}\n                    icons={icons}\n                    id={id}\n                    key={id}\n                    count={count}\n                    onSelect={handleSelect}\n                    isSelected={selectedIds.includes(id)}\n                    shape={FilterButtonItemShape.Round}\n                    size={size}\n                    text={text}\n                    isDisabled={isDisabled}\n                    shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                    onArrowNavigate={handleArrowNavigate}\n                    onFocus={setFocusedId}\n                    tabIndex={isDisabled ? -1 : 0}\n                    buttonRef={(element) => {\n                        buttonRefs.current[id] = element;\n                    }}\n                />,\n            );\n        });\n\n        return array;\n    }, [\n        allCount,\n        handleSelect,\n        items,\n        selectedIds,\n        shouldCalcCountForAll,\n        shouldEnableKeyboardHighlighting,\n        handleArrowNavigate,\n        size,\n    ]);\n\n    return useMemo(() => <StyledFilterButton>{reactItems}</StyledFilterButton>, [reactItems]);\n};\n\nFilterButtons.displayName = 'FilterButtons';\n\nexport default FilterButtons;\n"],"mappings":"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","ignoreList":[]}