@chayns-components/core 5.5.30 → 5.5.34

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

@@ -10,8 +10,41 @@ import { FilterType } from '../../types/filter';
 import SearchInput from '../search-input/SearchInput';
 import ContextMenu from '../context-menu/ContextMenu';
 import Checkbox from '../checkbox/Checkbox';
+import { useFocusRingPortal } from '../../hooks/useFocusRingPortal';
 import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
+const FilterIconButton = ({
+  icons,
+  onClick,
+  isOpen,
+  shouldEnableKeyboardHighlighting,
+  shouldShowKeyboardHighlighting,
+  shouldShowRoundedHoverEffect
+}) => {
+  const iconRef = useRef(null);
+  useFocusRingPortal(iconRef, {
+    isEnabled: shouldShowKeyboardHighlighting
+  });
+  const handleKeyDown = useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick();
+    }
+  }, [onClick]);
+  return /*#__PURE__*/React.createElement(StyledFilterIcon, {
+    ref: iconRef,
+    onClick: onClick,
+    onKeyDown: handleKeyDown,
+    $isOpen: isOpen,
+    role: shouldEnableKeyboardHighlighting ? 'button' : undefined,
+    tabIndex: shouldEnableKeyboardHighlighting ? 0 : -1,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    $shouldShowRoundedHoverEffect: shouldShowRoundedHoverEffect
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icons: icons,
+    size: 18
+  }));
+};
 
 //
 
@@ -39,6 +72,9 @@ const Filter = /*#__PURE__*/forwardRef(({
   const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
   const contextMenuRef = useRef(null);
   const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlightingEffective);
+  useFocusRingPortal(iconRef, {
+    isEnabled: shouldShowKeyboardHighlighting
+  });
   const type = useMemo(() => {
     if (filterButtonConfig && !searchConfig && !sortConfig && !checkboxConfig && !comboboxConfig) {
       return FilterType.ONLY_FILTER;
@@ -174,24 +210,15 @@ const Filter = /*#__PURE__*/forwardRef(({
   }, headline), [FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && /*#__PURE__*/React.createElement(StyledFilterIconWrapper, null, rightIcons && rightIcons.map(({
     icons: rIcons,
     onClick
-  }) => /*#__PURE__*/React.createElement(StyledFilterIcon, {
+  }) => /*#__PURE__*/React.createElement(FilterIconButton, {
     key: rIcons.join('-'),
-    onClick: onClick,
-    onKeyDown: event => {
-      if (event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault();
-        onClick();
-      }
-    },
-    $isOpen: false,
-    role: shouldEnableKeyboardHighlightingEffective ? 'button' : undefined,
-    tabIndex: shouldEnableKeyboardHighlightingEffective ? 0 : -1,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
-    $shouldShowRoundedHoverEffect: shouldShowRoundedHoverEffect
-  }, /*#__PURE__*/React.createElement(Icon, {
     icons: rIcons,
-    size: 18
-  }))), iconElement), type === FilterType.ONLY_SEARCH && searchConfig && /*#__PURE__*/React.createElement(StyledFilterSearch, null, /*#__PURE__*/React.createElement(SearchInput, {
+    onClick: onClick,
+    isOpen: false,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective,
+    shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    shouldShowRoundedHoverEffect: shouldShowRoundedHoverEffect
+  })), iconElement), type === FilterType.ONLY_SEARCH && searchConfig && /*#__PURE__*/React.createElement(StyledFilterSearch, null, /*#__PURE__*/React.createElement(SearchInput, {
     onActiveChange: isActive => {
       setIsSearchActive(isActive);
       setIsOpen(isActive);

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

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

@@ -1,6 +1,5 @@
 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;
@@ -75,7 +74,8 @@ export const StyledFilterIcon = styled.div`
   $shouldShowKeyboardHighlighting
 }) => $shouldShowKeyboardHighlighting && css`
             &:focus-visible {
-                ${keyboardFocusHighlightingRingCss}
+                outline: none;
+                box-shadow: none;
             }
         `}
 `;

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

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"file":"Filter.styles.js","names":["styled","css","motion","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';\n\nexport const StyledFilter = styled.div``;\n\nexport const StyledFilterHead = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 20px;\n\n    position: relative;\n`;\n\ntype StyledFilterHeadlineProps = WithTheme<{ $isSearchActive: boolean }>;\n\nexport const StyledFilterHeadline = styled.h1<StyledFilterHeadlineProps>`\n    margin: 0;\n\n    opacity: ${({ $isSearchActive }) => ($isSearchActive ? 0 : 1)};\n\n    transition: opacity 0.3s;\n`;\n\nexport const StyledFilterHeadlineElement = styled.div<StyledFilterHeadlineProps>`\n    opacity: ${({ $isSearchActive }) => ($isSearchActive ? 0 : 1)};\n\n    transition: opacity 0.3s;\n`;\n\nexport const StyledFilterIconWrapper = styled.div`\n    display: flex;\n    align-items: center;\n`;\n\nexport const StyledFilterSearch = styled.div`\n    position: absolute;\n    width: 100%;\n`;\n\ntype StyledFilterIconProps = WithTheme<{\n    $isOpen: boolean;\n    $shouldShowRoundedHoverEffect: boolean;\n    $shouldShowKeyboardHighlighting: boolean;\n}>;\n\nexport const StyledFilterIcon = styled.div<StyledFilterIconProps>`\n    cursor: pointer;\n\n    aspect-ratio: 1;\n\n    height: ${({ $shouldShowRoundedHoverEffect }) => ($shouldShowRoundedHoverEffect ? 42 : 30)}px;\n    border-radius: ${({ $shouldShowRoundedHoverEffect }) =>\n        $shouldShowRoundedHoverEffect ? 3 : 0}px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    ${({ $shouldShowRoundedHoverEffect, $isOpen }) =>\n        $shouldShowRoundedHoverEffect &&\n        $isOpen &&\n        css`\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        `}\n\n    ${({ $isOpen, theme }) =>\n        $isOpen &&\n        css`\n            background-color: ${theme['100']};\n        `}\n\n    &:hover {\n        background-color: ${({ theme }) => theme['100']};\n    }\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                outline: none;\n                box-shadow: none;\n            }\n        `}\n`;\n\ntype StyledMotionFilterBackgroundProps = WithTheme<{ $top: number; $left: number }>;\n\nexport const StyledMotionFilterBackground = styled(motion.div)<StyledMotionFilterBackgroundProps>`\n    width: 30px;\n\n    position: absolute;\n\n    top: ${({ $top }) => $top}px;\n    left: ${({ $left }) => $left}px;\n\n    background-color: ${({ theme }) => theme['100']};\n`;\n\nexport const StyledFilterContentWrapper = styled.div``;\n"],"mappings":"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;AAQD,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;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCA,+BAA+B,IAC/Bf,GAAG;AACX;AACA;AACA;AACA;AACA,SAAS;AACT,CAAC;AAID,OAAO,MAAMgB,4BAA4B,GAAGjB,MAAM,CAACE,MAAM,CAACE,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,GAAGpB,MAAM,CAACI,GAAG,EAAE","ignoreList":[]}

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

@@ -1,4 +1,5 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
+import { useFocusRingPortal } from '../../../hooks/useFocusRingPortal';
 import { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';
 import Icon from '../../icon/Icon';
 import { StyledFilterButtonItem, StyledFilterButtonItemBorder, StyledFilterButtonItemLabel, StyledFilterButtonItemLabelCount, StyledFilterButtonItemLabelText, StyledMotionFilterButtonItemBackground } from './FilterButton.styles';
@@ -19,7 +20,11 @@ const FilterButton = ({
   buttonRef,
   onSelect
 }) => {
+  const filterButtonRef = useRef(null);
   const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
+  useFocusRingPortal(filterButtonRef, {
+    isEnabled: shouldShowKeyboardHighlighting
+  });
   const handleClick = useCallback(event => {
     if (isDisabled) {
       return;
@@ -51,7 +56,10 @@ const FilterButton = ({
     onFocus?.(id);
   }, [id, onFocus]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledFilterButtonItem, {
-    ref: buttonRef,
+    ref: element => {
+      filterButtonRef.current = element;
+      buttonRef?.(element);
+    },
     $shape: shape,
     $isSelected: isSelected,
     $isDisabled: isDisabled,

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

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

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

@@ -1,7 +1,6 @@
 import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
 import { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';
-import { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';
 export const StyledFilterButtonItem = styled.div`
     position: relative;
     line-height: 1;
@@ -34,7 +33,6 @@ export const StyledFilterButtonItem = styled.div`
   $shape
 }) => $shouldShowKeyboardHighlighting && css`
             &:focus-visible {
-                ${keyboardFocusHighlightingRingCss};
                 border-radius: ${$shape === FilterButtonItemShape.Round ? 100 : 3}px;
             }
         `}

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

@@ -1 +1 @@
-{"version":3,"file":"FilterButton.styles.js","names":["motion","styled","css","FilterButtonItemShape","FilterButtonSize","keyboardFocusHighlightingRingCss","StyledFilterButtonItem","div","$isDisabled","$size","Normal","$isSelected","$shouldShowKeyboardHighlighting","$shape","Round","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","p","theme","text","StyledFilterButtonItemLabelCount","StyledFilterButtonItemBorder","$color","headline","StyledMotionFilterButtonItemBackground"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledFilterButtonItemProps = WithTheme<{\n    $size: FilterButtonSize;\n    $shape: FilterButtonItemShape;\n    $isSelected: boolean;\n    $isDisabled?: boolean;\n    $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nexport const StyledFilterButtonItem = styled.div<StyledFilterButtonItemProps>`\n    position: relative;\n    line-height: 1;\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    user-select: none;\n    padding: ${({ $size }) => ($size === FilterButtonSize.Normal ? '8px 14px' : '4px 8px')};\n\n    display: flex;\n    align-items: center;\n\n    opacity: ${({ $isDisabled }) => ($isDisabled ? '.6' : '1')};\n\n    &:hover > div:last-child {\n        ${({ $isSelected, $isDisabled }) =>\n            !$isSelected &&\n            !$isDisabled &&\n            css`\n                opacity: 0.2;\n            `}\n    }\n\n    ${({ $shouldShowKeyboardHighlighting, $shape }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                ${keyboardFocusHighlightingRingCss};\n                border-radius: ${$shape === FilterButtonItemShape.Round ? 100 : 3}px;\n            }\n        `}\n`;\n\nexport const StyledFilterButtonItemLabel = styled.div`\n    display: flex;\n    gap: 5px;\n    align-items: baseline;\n    position: relative;\n    z-index: 1;\n`;\n\ntype StyledFilterButtonItemLabelTextProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelText = styled.p<StyledFilterButtonItemLabelTextProps>`\n    color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n    margin: 0;\n    line-height: 1;\n`;\n\ntype StyledFilterButtonItemLabelCountProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelCount = styled.p<StyledFilterButtonItemLabelCountProps>`\n    color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n    margin: 0;\n    line-height: 1;\n    font-weight: bold;\n`;\n\ntype StyledFilterButtonItemBorderProps = WithTheme<{\n    $shape: FilterButtonItemShape;\n    $color: CSSProperties['color'];\n    $isSelected: boolean;\n}>;\n\nexport const StyledFilterButtonItemBorder = styled.div<StyledFilterButtonItemBorderProps>`\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    opacity: 0.4;\n    z-index: 0;\n    border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n\n    ${({ $color, theme, $isSelected }: StyledFilterButtonItemBorderProps) =>\n        !$isSelected &&\n        css`\n            border-width: 1px;\n            border-style: solid;\n            border-color: ${$color ?? theme.headline};\n        `};\n`;\n\ntype StyledFilterButtonItemBackgroundProps = WithTheme<{\n    $shape: FilterButtonItemShape;\n    $color: CSSProperties['color'];\n    $isSelected: boolean;\n}>;\n\nexport const StyledMotionFilterButtonItemBackground = styled(\n    motion.div,\n)<StyledFilterButtonItemBackgroundProps>`\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    z-index: 0;\n    opacity: ${({ $isSelected }) => ($isSelected ? 0.4 : 0)};\n    transition: opacity 0.5s ease;\n    border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n    background-color: ${({ $color, theme }: StyledFilterButtonItemBackgroundProps) =>\n        $color ?? theme.headline};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AAErC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,8BAA8B;AAEtF,SAASC,gCAAgC,QAAQ,iDAAiD;AAUlG,OAAO,MAAMC,sBAAsB,GAAGL,MAAM,CAACM,GAAgC;AAC7E;AACA;AACA,cAAc,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE;AACA,eAAe,CAAC;EAAEC;AAAM,CAAC,KAAMA,KAAK,KAAKL,gBAAgB,CAACM,MAAM,GAAG,UAAU,GAAG,SAAU;AAC1F;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,IAAI,GAAG,GAAI;AAC9D;AACA;AACA,UAAU,CAAC;EAAEG,WAAW;EAAEH;AAAY,CAAC,KAC3B,CAACG,WAAW,IACZ,CAACH,WAAW,IACZN,GAAG;AACf;AACA,aAAa;AACb;AACA;AACA,MAAM,CAAC;EAAEU,+BAA+B;EAAEC;AAAO,CAAC,KAC1CD,+BAA+B,IAC/BV,GAAG;AACX;AACA,kBAAkBG,gCAAgC;AAClD,iCAAiCQ,MAAM,KAAKV,qBAAqB,CAACW,KAAK,GAAG,GAAG,GAAG,CAAC;AACjF;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGd,MAAM,CAACM,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMS,+BAA+B,GAAGf,MAAM,CAACgB,CAAuC;AAC7F,aAAa,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA;AACA,CAAC;AAID,OAAO,MAAMC,gCAAgC,GAAGnB,MAAM,CAACgB,CAAwC;AAC/F,aAAa,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAME,4BAA4B,GAAGpB,MAAM,CAACM,GAAsC;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,CAAC;EAAEM;AAAO,CAAC,KAAMA,MAAM,KAAKV,qBAAqB,CAACW,KAAK,GAAG,GAAG,GAAG,CAAE;AACvF;AACA,MAAM,CAAC;EAAEQ,MAAM;EAAEJ,KAAK;EAAEP;AAA+C,CAAC,KAChE,CAACA,WAAW,IACZT,GAAG;AACX;AACA;AACA,4BAA4BoB,MAAM,IAAIJ,KAAK,CAACK,QAAQ;AACpD,SAAS;AACT,CAAC;AAQD,OAAO,MAAMC,sCAAsC,GAAGvB,MAAM,CACxDD,MAAM,CAACO,GACX,CAAwC;AACxC;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEI;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,qBAAqB,CAAC;EAAEE;AAAO,CAAC,KAAMA,MAAM,KAAKV,qBAAqB,CAACW,KAAK,GAAG,GAAG,GAAG,CAAE;AACvF,wBAAwB,CAAC;EAAEQ,MAAM;EAAEJ;AAA6C,CAAC,KACzEI,MAAM,IAAIJ,KAAK,CAACK,QAAQ;AAChC,CAAC","ignoreList":[]}
+{"version":3,"file":"FilterButton.styles.js","names":["motion","styled","css","FilterButtonItemShape","FilterButtonSize","StyledFilterButtonItem","div","$isDisabled","$size","Normal","$isSelected","$shouldShowKeyboardHighlighting","$shape","Round","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","p","theme","text","StyledFilterButtonItemLabelCount","StyledFilterButtonItemBorder","$color","headline","StyledMotionFilterButtonItemBackground"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledFilterButtonItemProps = WithTheme<{\n    $size: FilterButtonSize;\n    $shape: FilterButtonItemShape;\n    $isSelected: boolean;\n    $isDisabled?: boolean;\n    $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nexport const StyledFilterButtonItem = styled.div<StyledFilterButtonItemProps>`\n    position: relative;\n    line-height: 1;\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    user-select: none;\n    padding: ${({ $size }) => ($size === FilterButtonSize.Normal ? '8px 14px' : '4px 8px')};\n\n    display: flex;\n    align-items: center;\n\n    opacity: ${({ $isDisabled }) => ($isDisabled ? '.6' : '1')};\n\n    &:hover > div:last-child {\n        ${({ $isSelected, $isDisabled }) =>\n            !$isSelected &&\n            !$isDisabled &&\n            css`\n                opacity: 0.2;\n            `}\n    }\n\n    ${({ $shouldShowKeyboardHighlighting, $shape }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                border-radius: ${$shape === FilterButtonItemShape.Round ? 100 : 3}px;\n            }\n        `}\n`;\n\nexport const StyledFilterButtonItemLabel = styled.div`\n    display: flex;\n    gap: 5px;\n    align-items: baseline;\n    position: relative;\n    z-index: 1;\n`;\n\ntype StyledFilterButtonItemLabelTextProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelText = styled.p<StyledFilterButtonItemLabelTextProps>`\n    color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n    margin: 0;\n    line-height: 1;\n`;\n\ntype StyledFilterButtonItemLabelCountProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelCount = styled.p<StyledFilterButtonItemLabelCountProps>`\n    color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n    margin: 0;\n    line-height: 1;\n    font-weight: bold;\n`;\n\ntype StyledFilterButtonItemBorderProps = WithTheme<{\n    $shape: FilterButtonItemShape;\n    $color: CSSProperties['color'];\n    $isSelected: boolean;\n}>;\n\nexport const StyledFilterButtonItemBorder = styled.div<StyledFilterButtonItemBorderProps>`\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    opacity: 0.4;\n    z-index: 0;\n    border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n\n    ${({ $color, theme, $isSelected }: StyledFilterButtonItemBorderProps) =>\n        !$isSelected &&\n        css`\n            border-width: 1px;\n            border-style: solid;\n            border-color: ${$color ?? theme.headline};\n        `};\n`;\n\ntype StyledFilterButtonItemBackgroundProps = WithTheme<{\n    $shape: FilterButtonItemShape;\n    $color: CSSProperties['color'];\n    $isSelected: boolean;\n}>;\n\nexport const StyledMotionFilterButtonItemBackground = styled(\n    motion.div,\n)<StyledFilterButtonItemBackgroundProps>`\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    z-index: 0;\n    opacity: ${({ $isSelected }) => ($isSelected ? 0.4 : 0)};\n    transition: opacity 0.5s ease;\n    border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n    background-color: ${({ $color, theme }: StyledFilterButtonItemBackgroundProps) =>\n        $color ?? theme.headline};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AAErC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,8BAA8B;AAWtF,OAAO,MAAMC,sBAAsB,GAAGJ,MAAM,CAACK,GAAgC;AAC7E;AACA;AACA,cAAc,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE;AACA,eAAe,CAAC;EAAEC;AAAM,CAAC,KAAMA,KAAK,KAAKJ,gBAAgB,CAACK,MAAM,GAAG,UAAU,GAAG,SAAU;AAC1F;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,IAAI,GAAG,GAAI;AAC9D;AACA;AACA,UAAU,CAAC;EAAEG,WAAW;EAAEH;AAAY,CAAC,KAC3B,CAACG,WAAW,IACZ,CAACH,WAAW,IACZL,GAAG;AACf;AACA,aAAa;AACb;AACA;AACA,MAAM,CAAC;EAAES,+BAA+B;EAAEC;AAAO,CAAC,KAC1CD,+BAA+B,IAC/BT,GAAG;AACX;AACA,iCAAiCU,MAAM,KAAKT,qBAAqB,CAACU,KAAK,GAAG,GAAG,GAAG,CAAC;AACjF;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGb,MAAM,CAACK,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMS,+BAA+B,GAAGd,MAAM,CAACe,CAAuC;AAC7F,aAAa,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA;AACA,CAAC;AAID,OAAO,MAAMC,gCAAgC,GAAGlB,MAAM,CAACe,CAAwC;AAC/F,aAAa,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAME,4BAA4B,GAAGnB,MAAM,CAACK,GAAsC;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,CAAC;EAAEM;AAAO,CAAC,KAAMA,MAAM,KAAKT,qBAAqB,CAACU,KAAK,GAAG,GAAG,GAAG,CAAE;AACvF;AACA,MAAM,CAAC;EAAEQ,MAAM;EAAEJ,KAAK;EAAEP;AAA+C,CAAC,KAChE,CAACA,WAAW,IACZR,GAAG;AACX;AACA;AACA,4BAA4BmB,MAAM,IAAIJ,KAAK,CAACK,QAAQ;AACpD,SAAS;AACT,CAAC;AAQD,OAAO,MAAMC,sCAAsC,GAAGtB,MAAM,CACxDD,MAAM,CAACM,GACX,CAAwC;AACxC;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEI;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,qBAAqB,CAAC;EAAEE;AAAO,CAAC,KAAMA,MAAM,KAAKT,qBAAqB,CAACU,KAAK,GAAG,GAAG,GAAG,CAAE;AACvF,wBAAwB,CAAC;EAAEQ,MAAM;EAAEJ;AAA6C,CAAC,KACzEI,MAAM,IAAIJ,KAAK,CAACK,QAAQ;AAChC,CAAC","ignoreList":[]}

package/lib/esm/components/grid-image/GridImage.js

@@ -1,4 +1,5 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
+import { useFocusRingPortal } from '../../hooks/useFocusRingPortal';
 import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
 import { StyledGridBottomRightImage, StyledGridImage, StyledGridLeftImage, StyledGridTopRightImage } from './GridImage.styles';
@@ -10,6 +11,7 @@ const GridImage = ({
   onClick,
   shouldEnableKeyboardHighlighting
 }) => {
+  const gridImageRef = useRef(null);
   const colorScheme = useColorScheme();
   const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
   const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);
@@ -18,6 +20,10 @@ const GridImage = ({
   const isClickable = typeof onClick === 'function';
   const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlightingEffective;
   const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(isKeyboardFocusable);
+  useFocusRingPortal(gridImageRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    shape: shouldShowRoundImage ? 'circle' : 'rectangle'
+  });
   const handleKeyDown = useCallback(event => {
     if (!isClickable) {
       return;
@@ -32,9 +38,9 @@ const GridImage = ({
   const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);
   const isGridImageHidden = !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;
   return /*#__PURE__*/React.createElement(StyledGridImage, {
+    ref: gridImageRef,
     $background: background,
     $shouldShowRoundImage: shouldShowRoundImage,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     $size: size,
     onClick: isClickable ? onClick : undefined,
     onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,

package/lib/esm/components/grid-image/GridImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridImage.js","names":["React","useCallback","useState","useKeyboardFocusHighlighting","useColorScheme","StyledGridBottomRightImage","StyledGridImage","StyledGridLeftImage","StyledGridTopRightImage","GridImage","background","images","shouldShowRoundImage","size","onClick","shouldEnableKeyboardHighlighting","colorScheme","shouldEnableKeyboardHighlightingEffective","hasLoadedLeftImage","setHasLoadedLeftImage","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","handleKeyDown","event","key","preventDefault","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","$background","$shouldShowRoundImage","$shouldShowKeyboardHighlighting","$size","undefined","onKeyDown","tabIndex","role","$isHidden","onLoad","src","displayName"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, {\n    CSSProperties,\n    FC,\n    KeyboardEventHandler,\n    MouseEventHandler,\n    MouseEvent,\n    useCallback,\n    useState,\n} from 'react';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n    StyledGridBottomRightImage,\n    StyledGridImage,\n    StyledGridLeftImage,\n    StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n    /**\n     * The background color of the image.\n     */\n    background?: CSSProperties['background'];\n    /**\n     * The images to be displayed in the `GridImage`. Only the first three images are displayed.\n     */\n    images: string[];\n    /**\n     * Function to be executed when the images are clicked.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Images of users should always be displayed in a round shape. Therefore, this property can be set to true.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * The size of the `GridImage` in pixels, which is set as both width and height.\n     */\n    size: number;\n    /**\n     * Enables keyboard-only focus highlighting for clickable GridImage instances.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst GridImage: FC<GridImageProps> = ({\n    background,\n    images,\n    shouldShowRoundImage,\n    size,\n    onClick,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const colorScheme = useColorScheme();\n    const shouldEnableKeyboardHighlightingEffective =\n        shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n    const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n    const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n    const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n    const isClickable = typeof onClick === 'function';\n    const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlightingEffective;\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(isKeyboardFocusable);\n\n    const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (!isClickable) {\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n            }\n        },\n        [isClickable, onClick],\n    );\n\n    const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n    const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n    const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n    const isGridImageHidden =\n        !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;\n\n    return (\n        <StyledGridImage\n            $background={background}\n            $shouldShowRoundImage={shouldShowRoundImage}\n            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n            $size={size}\n            onClick={isClickable ? onClick : undefined}\n            onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n            tabIndex={isKeyboardFocusable ? 0 : -1}\n            role={isClickable ? 'button' : undefined}\n        >\n            <StyledGridLeftImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleLeftImageLoaded}\n                $size={size}\n                src={images[0]}\n            />\n            <StyledGridTopRightImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleTopRightImageLoaded}\n                $size={size}\n                src={images[1]}\n            />\n            <StyledGridBottomRightImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleBottomRightImageLoaded}\n                src={images[2]}\n            />\n        </StyledGridImage>\n    );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"GridImage.js","names":["React","useCallback","useRef","useState","useFocusRingPortal","useKeyboardFocusHighlighting","useColorScheme","StyledGridBottomRightImage","StyledGridImage","StyledGridLeftImage","StyledGridTopRightImage","GridImage","background","images","shouldShowRoundImage","size","onClick","shouldEnableKeyboardHighlighting","gridImageRef","colorScheme","shouldEnableKeyboardHighlightingEffective","hasLoadedLeftImage","setHasLoadedLeftImage","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","isEnabled","shape","handleKeyDown","event","key","preventDefault","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","ref","$background","$shouldShowRoundImage","$size","undefined","onKeyDown","tabIndex","role","$isHidden","onLoad","src","displayName"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, {\n    CSSProperties,\n    FC,\n    KeyboardEventHandler,\n    MouseEventHandler,\n    MouseEvent,\n    useCallback,\n    useRef,\n    useState,\n} from 'react';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n    StyledGridBottomRightImage,\n    StyledGridImage,\n    StyledGridLeftImage,\n    StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n    /**\n     * The background color of the image.\n     */\n    background?: CSSProperties['background'];\n    /**\n     * The images to be displayed in the `GridImage`. Only the first three images are displayed.\n     */\n    images: string[];\n    /**\n     * Function to be executed when the images are clicked.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Images of users should always be displayed in a round shape. Therefore, this property can be set to true.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * The size of the `GridImage` in pixels, which is set as both width and height.\n     */\n    size: number;\n    /**\n     * Enables keyboard-only focus highlighting for clickable GridImage instances.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst GridImage: FC<GridImageProps> = ({\n    background,\n    images,\n    shouldShowRoundImage,\n    size,\n    onClick,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const gridImageRef = useRef<HTMLDivElement>(null);\n    const colorScheme = useColorScheme();\n    const shouldEnableKeyboardHighlightingEffective =\n        shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n    const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n    const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n    const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n    const isClickable = typeof onClick === 'function';\n    const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlightingEffective;\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(isKeyboardFocusable);\n    useFocusRingPortal(gridImageRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        shape: shouldShowRoundImage ? 'circle' : 'rectangle',\n    });\n\n    const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (!isClickable) {\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n            }\n        },\n        [isClickable, onClick],\n    );\n\n    const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n    const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n    const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n    const isGridImageHidden =\n        !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;\n\n    return (\n        <StyledGridImage\n            ref={gridImageRef}\n            $background={background}\n            $shouldShowRoundImage={shouldShowRoundImage}\n            $size={size}\n            onClick={isClickable ? onClick : undefined}\n            onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n            tabIndex={isKeyboardFocusable ? 0 : -1}\n            role={isClickable ? 'button' : undefined}\n        >\n            <StyledGridLeftImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleLeftImageLoaded}\n                $size={size}\n                src={images[0]}\n            />\n            <StyledGridTopRightImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleTopRightImageLoaded}\n                $size={size}\n                src={images[1]}\n            />\n            <StyledGridBottomRightImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleBottomRightImageLoaded}\n                src={images[2]}\n            />\n        </StyledGridImage>\n    );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"AAAA,OAAOA,KAAK,IAMRC,WAAW,EACXC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,kBAAkB,QAAQ,gCAAgC;AACnE,SAASC,4BAA4B,QAAQ,0CAA0C;AACvF,SAASC,cAAc,QAAQ,8CAA8C;AAC7E,SACIC,0BAA0B,EAC1BC,eAAe,EACfC,mBAAmB,EACnBC,uBAAuB,QACpB,oBAAoB;AA6B3B,MAAMC,SAA6B,GAAGA,CAAC;EACnCC,UAAU;EACVC,MAAM;EACNC,oBAAoB;EACpBC,IAAI;EACJC,OAAO;EACPC;AACJ,CAAC,KAAK;EACF,MAAMC,YAAY,GAAGhB,MAAM,CAAiB,IAAI,CAAC;EACjD,MAAMiB,WAAW,GAAGb,cAAc,CAAC,CAAC;EACpC,MAAMc,yCAAyC,GAC3CH,gCAAgC,IAAIE,WAAW,EAAEF,gCAAgC,IAAI,KAAK;EAE9F,MAAM,CAACI,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGnB,QAAQ,CAAC,KAAK,CAAC;EACnE,MAAM,CAACoB,sBAAsB,EAAEC,yBAAyB,CAAC,GAAGrB,QAAQ,CAAC,KAAK,CAAC;EAC3E,MAAM,CAACsB,yBAAyB,EAAEC,4BAA4B,CAAC,GAAGvB,QAAQ,CAAC,KAAK,CAAC;EAEjF,MAAMwB,WAAW,GAAG,OAAOX,OAAO,KAAK,UAAU;EACjD,MAAMY,mBAAmB,GAAGD,WAAW,IAAIP,yCAAyC;EACpF,MAAMS,8BAA8B,GAAGxB,4BAA4B,CAACuB,mBAAmB,CAAC;EACxFxB,kBAAkB,CAACc,YAAY,EAAE;IAC7BY,SAAS,EAAED,8BAA8B;IACzCE,KAAK,EAAEjB,oBAAoB,GAAG,QAAQ,GAAG;EAC7C,CAAC,CAAC;EAEF,MAAMkB,aAAa,GAAG/B,WAAW,CAC5BgC,KAAK,IAAK;IACP,IAAI,CAACN,WAAW,EAAE;MACd;IACJ;IAEA,IAAIM,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC5CD,KAAK,CAACE,cAAc,CAAC,CAAC;MACtBnB,OAAO,GAAGiB,KAA8C,CAAC;IAC7D;EACJ,CAAC,EACD,CAACN,WAAW,EAAEX,OAAO,CACzB,CAAC;EAED,MAAMoB,qBAAqB,GAAGnC,WAAW,CAAC,MAAMqB,qBAAqB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAEhF,MAAMe,yBAAyB,GAAGpC,WAAW,CAAC,MAAMuB,yBAAyB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAExF,MAAMc,4BAA4B,GAAGrC,WAAW,CAAC,MAAMyB,4BAA4B,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAE9F,MAAMa,iBAAiB,GACnB,CAAClB,kBAAkB,IAAI,CAACE,sBAAsB,IAAI,CAACE,yBAAyB;EAEhF,oBACIzB,KAAA,CAAAwC,aAAA,CAAChC,eAAe;IACZiC,GAAG,EAAEvB,YAAa;IAClBwB,WAAW,EAAE9B,UAAW;IACxB+B,qBAAqB,EAAE7B,oBAAqB;IAC5C8B,KAAK,EAAE7B,IAAK;IACZC,OAAO,EAAEW,WAAW,GAAGX,OAAO,GAAG6B,SAAU;IAC3CC,SAAS,EAAElB,mBAAmB,GAAGI,aAAa,GAAGa,SAAU;IAC3DE,QAAQ,EAAEnB,mBAAmB,GAAG,CAAC,GAAG,CAAC,CAAE;IACvCoB,IAAI,EAAErB,WAAW,GAAG,QAAQ,GAAGkB;EAAU,gBAEzC7C,KAAA,CAAAwC,aAAA,CAAC/B,mBAAmB;IAChBwC,SAAS,EAAEV,iBAAkB;IAC7BW,MAAM,EAAEd,qBAAsB;IAC9BQ,KAAK,EAAE7B,IAAK;IACZoC,GAAG,EAAEtC,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,eACFb,KAAA,CAAAwC,aAAA,CAAC9B,uBAAuB;IACpBuC,SAAS,EAAEV,iBAAkB;IAC7BW,MAAM,EAAEb,yBAA0B;IAClCO,KAAK,EAAE7B,IAAK;IACZoC,GAAG,EAAEtC,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,eACFb,KAAA,CAAAwC,aAAA,CAACjC,0BAA0B;IACvB0C,SAAS,EAAEV,iBAAkB;IAC7BW,MAAM,EAAEZ,4BAA6B;IACrCa,GAAG,EAAEtC,MAAM,CAAC,CAAC;EAAE,CAClB,CACY,CAAC;AAE1B,CAAC;AAEDF,SAAS,CAACyC,WAAW,GAAG,WAAW;AAEnC,eAAezC,SAAS","ignoreList":[]}

package/lib/esm/components/grid-image/GridImage.styles.js

@@ -1,5 +1,4 @@
-import styled, { css } from 'styled-components';
-import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
+import styled from 'styled-components';
 export const StyledGridImage = styled.div`
     background: ${({
   $background,
@@ -22,13 +21,9 @@ export const StyledGridImage = styled.div`
 }) => $size}px;
     flex: 0 0 auto;
 
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && css`
-            &:focus-visible {
-                ${keyboardFocusHighlightingRingCss}
-            }
-        `}
+    &:focus-visible {
+        outline: none;
+    }
 `;
 export const StyledGridLeftImage = styled.img`
     border-right: ${({

package/lib/esm/components/grid-image/GridImage.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridImage.styles.js","names":["styled","css","keyboardFocusHighlightingRingCss","StyledGridImage","div","$background","theme","$shouldShowRoundImage","undefined","$size","$shouldShowKeyboardHighlighting","StyledGridLeftImage","img","$isHidden","StyledGridTopRightImage","StyledGridBottomRightImage"],"sources":["../../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledGridImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldShowRoundImage?: boolean;\n    $shouldShowKeyboardHighlighting?: boolean;\n    $size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n    background: ${({ $background, theme }: StyledGridImageProps) =>\n        $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n    height: ${({ $size }) => $size}px;\n    overflow: hidden;\n    position: relative;\n    transition: border-radius 0.3s ease;\n    width: ${({ $size }) => $size}px;\n    flex: 0 0 auto;\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                ${keyboardFocusHighlightingRingCss}\n            }\n        `}\n`;\n\ntype StyledGridLeftImageProps = {\n    $isHidden: boolean;\n    $size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n    border-right: ${({ $size }) => $size / 40}px solid white;\n    height: 100%;\n    left: 0;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    top: 0;\n    transition: opacity 0.4s ease;\n    width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n    $isHidden: boolean;\n    $size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n    border-bottom: ${({ $size }) => $size / 40}px solid white;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    top: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n    $isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n    bottom: 0;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,gCAAgC,QAAQ,8CAA8C;AAS/F,OAAO,MAAMC,eAAe,GAAGH,MAAM,CAACI,GAAyB;AAC/D,kBAAkB,CAAC;EAAEC,WAAW;EAAEC;AAA4B,CAAC,KACvDD,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACnE,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAGC,SAAU;AAC/F,iCAAiC,CAAC;EAAEF;AAA4B,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACtF,cAAc,CAAC;EAAEG;AAAM,CAAC,KAAKA,KAAK;AAClC;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCA,+BAA+B,IAC/BT,GAAG;AACX;AACA,kBAAkBC,gCAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAOD,OAAO,MAAMS,mBAAmB,GAAGX,MAAM,CAACY,GAA6B;AACvE,oBAAoB,CAAC;EAAEH;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC7C;AACA;AACA;AACA,eAAe,CAAC;EAAEI;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,uBAAuB,GAAGd,MAAM,CAACY,GAAiC;AAC/E,qBAAqB,CAAC;EAAEH;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC9C;AACA;AACA,eAAe,CAAC;EAAEI;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAME,0BAA0B,GAAGf,MAAM,CAACY,GAAoC;AACrF;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"GridImage.styles.js","names":["styled","StyledGridImage","div","$background","theme","$shouldShowRoundImage","undefined","$size","StyledGridLeftImage","img","$isHidden","StyledGridTopRightImage","StyledGridBottomRightImage"],"sources":["../../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldShowRoundImage?: boolean;\n    $size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n    background: ${({ $background, theme }: StyledGridImageProps) =>\n        $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n    height: ${({ $size }) => $size}px;\n    overflow: hidden;\n    position: relative;\n    transition: border-radius 0.3s ease;\n    width: ${({ $size }) => $size}px;\n    flex: 0 0 auto;\n\n    &:focus-visible {\n        outline: none;\n    }\n`;\n\ntype StyledGridLeftImageProps = {\n    $isHidden: boolean;\n    $size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n    border-right: ${({ $size }) => $size / 40}px solid white;\n    height: 100%;\n    left: 0;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    top: 0;\n    transition: opacity 0.4s ease;\n    width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n    $isHidden: boolean;\n    $size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n    border-bottom: ${({ $size }) => $size / 40}px solid white;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    top: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n    $isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n    bottom: 0;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAe,mBAAmB;AAS/C,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAAyB;AAC/D,kBAAkB,CAAC;EAAEC,WAAW;EAAEC;AAA4B,CAAC,KACvDD,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACnE,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAGC,SAAU;AAC/F,iCAAiC,CAAC;EAAEF;AAA4B,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACtF,cAAc,CAAC;EAAEG;AAAM,CAAC,KAAKA,KAAK;AAClC;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,mBAAmB,GAAGR,MAAM,CAACS,GAA6B;AACvE,oBAAoB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC7C;AACA;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,uBAAuB,GAAGX,MAAM,CAACS,GAAiC;AAC/E,qBAAqB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC9C;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAME,0BAA0B,GAAGZ,MAAM,CAACS,GAAoC;AACrF;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/grouped-image/GroupedImage.js

@@ -1,8 +1,9 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { StyledCornerElement, StyledCornerImage, StyledGroupedImage, StyledGroupImageElement } from './GroupedImage.styles';
 import CareOfClipPath from './clip-paths/CareOfClipPath';
 import { useUuid } from '../../hooks/uuid';
 import SecondImageClipPath from './clip-paths/SecondImageClipPath';
+import { useFocusRingPortal } from '../../hooks/useFocusRingPortal';
 import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
 const GROUPED_IMAGE_SERVICE_ORIGIN = 'https://tsimg.cloud';
@@ -50,6 +51,7 @@ const GroupedImage = ({
   onImageError,
   shouldEnableKeyboardHighlighting
 }) => {
+  const groupedImageRef = useRef(null);
   const colorScheme = useColorScheme();
   const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
   const hasCornerImage = Boolean(cornerImage);
@@ -60,6 +62,10 @@ const GroupedImage = ({
   const isClickable = typeof onClick === 'function';
   const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlightingEffective;
   const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(isKeyboardFocusable);
+  useFocusRingPortal(groupedImageRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    shape: shouldShowRoundImage ? 'circle' : 'rectangle'
+  });
   const handleKeyDown = useCallback(event => {
     if (!isClickable) {
       return;
@@ -95,12 +101,12 @@ const GroupedImage = ({
     onError: event => typeof onImageError === 'function' && onImageError(event, index)
   })))));
   return /*#__PURE__*/React.createElement(StyledGroupedImage, {
+    ref: groupedImageRef,
     onClick: isClickable ? onClick : undefined,
     onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
     tabIndex: isKeyboardFocusable ? 0 : -1,
     role: isClickable ? 'button' : undefined,
-    $height: height,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
+    $height: height
   }, hasCornerImage && /*#__PURE__*/React.createElement(CareOfClipPath, {
     height: height,
     uuid: uuid,