npm - @chayns-components/core - Versions diffs - 5.4.5 → 5.4.6-alpha.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (472) hide show

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

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

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

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

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

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

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

@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
+import { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';
 import Icon from '../../icon/Icon';
 import { StyledFilterButtonItem, StyledFilterButtonItemBorder, StyledFilterButtonItemLabel, StyledFilterButtonItemLabelCount, StyledFilterButtonItemLabelText, StyledMotionFilterButtonItemBackground } from './FilterButton.styles';
 const FilterButton = ({
@@ -11,8 +12,14 @@ const FilterButton = ({
   isSelected,
   id,
   isDisabled,
+  shouldEnableKeyboardHighlighting,
+  tabIndex,
+  onFocus,
+  onArrowNavigate,
+  buttonRef,
   onSelect
 }) => {
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
   const handleClick = useCallback(event => {
     if (isDisabled) {
       return;
@@ -21,11 +28,42 @@ const FilterButton = ({
     event.stopPropagation();
     onSelect(id);
   }, [id, isDisabled, onSelect]);
+  const handleKeyDown = useCallback(event => {
+    if (isDisabled) {
+      return;
+    }
+    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+      event.preventDefault();
+      onArrowNavigate?.(id, 1);
+      return;
+    }
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      onArrowNavigate?.(id, -1);
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onSelect(id);
+    }
+  }, [id, isDisabled, onArrowNavigate, onSelect]);
+  const handleFocus = useCallback(() => {
+    onFocus?.(id);
+  }, [id, onFocus]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledFilterButtonItem, {
+    ref: buttonRef,
+    $shape: shape,
     $isSelected: isSelected,
     $isDisabled: isDisabled,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     $size: size,
-    onClick: handleClick
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    role: shouldEnableKeyboardHighlighting ? 'button' : undefined,
+    tabIndex: !isDisabled ? tabIndex ?? 0 : -1,
+    "aria-pressed": shouldEnableKeyboardHighlighting ? isSelected : undefined,
+    "aria-disabled": shouldEnableKeyboardHighlighting ? isDisabled : undefined
   }, /*#__PURE__*/React.createElement(StyledFilterButtonItemLabel, null, icons && /*#__PURE__*/React.createElement(Icon, {
     icons: icons,
     size: 15
@@ -37,7 +75,7 @@ const FilterButton = ({
     $isSelected: isSelected,
     $shape: shape,
     $color: color
-  })), [color, count, handleClick, icons, isDisabled, isSelected, shape, size, text]);
+  })), [color, buttonRef, count, handleClick, handleFocus, handleKeyDown, icons, isDisabled, isSelected, shape, shouldEnableKeyboardHighlighting, shouldShowKeyboardHighlighting, size, tabIndex, text]);
 };
 FilterButton.displayName = 'FilterButton';
 export default FilterButton;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterButton.js","names":["React","useCallback","useMemo","Icon","StyledFilterButtonItem","StyledFilterButtonItemBorder","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelCount","StyledFilterButtonItemLabelText","StyledMotionFilterButtonItemBackground","FilterButton","icons","size","shape","text","color","count","isSelected","id","isDisabled","onSelect","handleClick","event","preventDefault","stopPropagation","createElement","$isSelected","$isDisabled","$size","onClick","~~toLocaleString~~","~~$shape~~","$color","displayName"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.tsx"],"sourcesContent":["import React, { CSSProperties, FC, MouseEvent, useCallback, useMemo } from 'react';\nimport type { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\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 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 onSelect,\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 return useMemo(\n () => (\n <StyledFilterButtonItem\n $isSelected={isSelected}\n $isDisabled={isDisabled}\n $size={size}\n onClick={handleClick}\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 [color, count, handleClick, icons, isDisabled, isSelected, shape, size, text],\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n\nexport default FilterButton;\n"],"mappings":"AAAA,OAAOA,KAAK,~~IAAmCC~~,WAAW,~~EAAEC~~,OAAO,~~QAAQ~~,OAAO;~~AAElF~~,OAAOC,IAAI,MAAM,iBAAiB;AAClC,SACIC,sBAAsB,EACtBC,4BAA4B,EAC5BC,2BAA2B,EAC3BC,gCAAgC,EAChCC,+BAA+B,EAC/BC,sCAAsC,QACnC,uBAAuB;~~AAe9B~~,MAAMC,YAAmC,GAAGA,CAAC;EACzCC,KAAK;EACLC,IAAI;EACJC,KAAK;EACLC,IAAI;EACJC,KAAK;EACLC,KAAK;EACLC,UAAU;EACVC,EAAE;EACFC,UAAU;EACVC;AACJ,CAAC,KAAK;EACF,MAAMC,WAAW,~~GAAGpB~~,WAAW,~~CAC1BqB~~,KAAiB,IAAK;IACnB,~~IAAIH~~,UAAU,EAAE;MACZ;IACJ;~~IAEAG~~,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;~~IAEvBJ~~,QAAQ,~~CAACF~~,EAAE,CAAC;EAChB,CAAC,EACD,CAACA,EAAE,EAAEC,UAAU,~~EAAEC~~,QAAQ,CAC7B,CAAC;EAED,~~OAAOlB~~,OAAO,CACV,mBACIF,KAAA,~~CAAAyB~~,aAAA,~~CAACrB~~,sBAAsB;~~IACnBsB~~,WAAW,~~EAAET~~,UAAW;~~IACxBU~~,WAAW,~~EAAER~~,UAAW;~~IACxBS~~,KAAK,~~EAAEhB~~,IAAK;~~IACZiB~~,OAAO,~~EAAER~~;~~EAAY~~,~~gBAErBrB~~,KAAA,~~CAAAyB~~,aAAA,~~CAACnB~~,2BAA2B,QACvBK,KAAK,~~iBAAIX~~,KAAA,~~CAAAyB~~,aAAA,~~CAACtB~~,IAAI;IAACQ,KAAK,EAAEA,KAAM;IAACC,IAAI,EAAE;EAAG,CAAE,CAAC,~~eAC1CZ~~,KAAA,~~CAAAyB~~,aAAA,~~CAACjB~~,+BAA+B,QAAEM,IAAsC,CAAC,EACxE,OAAOE,KAAK,KAAK,QAAQ,~~iBACtBhB~~,KAAA,~~CAAAyB~~,aAAA,~~CAAClB~~,gCAAgC,QAC5BS,KAAK,~~CAACc~~,cAAc,CAAC,CACQ,CAEb,CAAC,~~eAC9B9B~~,KAAA,~~CAAAyB~~,aAAA,~~CAACpB~~,4BAA4B;~~IACzBqB~~,WAAW,~~EAAET~~,UAAW;~~IACxBc~~,MAAM,~~EAAElB~~,KAAM;~~IACdmB~~,MAAM,~~EAAEjB~~;EAAM,CACjB,CAAC,~~eACFf~~,KAAA,~~CAAAyB~~,aAAA,~~CAAChB~~,sCAAsC;~~IACnCiB~~,WAAW,~~EAAET~~,UAAW;~~IACxBc~~,MAAM,~~EAAElB~~,KAAM;~~IACdmB~~,MAAM,~~EAAEjB~~;EAAM,CACjB,CACmB,CAC3B,EACD,~~CAACA~~,KAAK,~~EAAEC~~,KAAK,~~EAAEK~~,WAAW,~~EAAEV~~,KAAK,~~EAAEQ~~,UAAU,~~EAAEF~~,UAAU,~~EAAEJ~~,KAAK,~~EAAED~~,IAAI,~~EAAEE~~,IAAI,~~CAChF~~,CAAC;AACL,CAAC;AAEDJ,YAAY,~~CAACuB~~,WAAW,GAAG,cAAc;AAEzC,~~eAAevB~~,YAAY","ignoreList":[]}
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":[]}

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

@@ -1,6 +1,7 @@
 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;
@@ -27,6 +28,16 @@ export const StyledFilterButtonItem = styled.div`
                 opacity: 0.2;
             `}
     }
+    ${({
+  $shouldShowKeyboardHighlighting,
+  $shape
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible {
+                ${keyboardFocusHighlightingRingCss};
+                border-radius: ${$shape === FilterButtonItemShape.Round ? 100 : 3}px;
+            }
+        `}
 `;
 export const StyledFilterButtonItemLabel = styled.div`
     display: flex;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterButton.styles.js","names":["motion","styled","css","FilterButtonItemShape","FilterButtonSize","StyledFilterButtonItem","div","$isDisabled","$size","Normal","$isSelected","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","p","theme","text","StyledFilterButtonItemLabelCount","StyledFilterButtonItemBorder","$~~shape","Round","$~~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 $isSelected: boolean;\n $isDisabled?: 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\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;~~AAStF~~,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,CAAC;AAED,OAAO,~~MAAMS~~,2BAA2B,~~GAAGV~~,MAAM,~~CAACK~~,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,~~MAAMM~~,+BAA+B,~~GAAGX~~,MAAM,~~CAACY~~,CAAuC;AAC7F,aAAa,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA;AACA,CAAC;AAID,OAAO,MAAMC,gCAAgC,~~GAAGf~~,MAAM,~~CAACY~~,CAAwC;AAC/F,aAAa,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAME,4BAA4B,~~GAAGhB~~,MAAM,~~CAACK~~,GAAsC;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,CAAC;~~EAAEY~~;AAAO,CAAC,KAAMA,MAAM,~~KAAKf~~,qBAAqB,~~CAACgB~~,KAAK,GAAG,GAAG,GAAG,CAAE;AACvF;AACA,MAAM,CAAC;~~EAAEC~~,MAAM;~~EAAEN~~,KAAK;~~EAAEJ~~;AAA+C,CAAC,KAChE,CAACA,WAAW,~~IACZR~~,GAAG;AACX;AACA;AACA,~~4BAA4BkB~~,MAAM,~~IAAIN~~,KAAK,~~CAACO~~,QAAQ;AACpD,SAAS;AACT,CAAC;AAQD,OAAO,MAAMC,sCAAsC,~~GAAGrB~~,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;~~EAAEQ~~;AAAO,CAAC,KAAMA,MAAM,~~KAAKf~~,qBAAqB,~~CAACgB~~,KAAK,GAAG,GAAG,GAAG,CAAE;AACvF,wBAAwB,CAAC;~~EAAEC~~,MAAM;~~EAAEN~~;AAA6C,CAAC,~~KACzEM~~,MAAM,~~IAAIN~~,KAAK,~~CAACO~~,QAAQ;AAChC,CAAC","ignoreList":[]}
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":[]}

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

@@ -1,15 +1,29 @@
 import React, { useCallback, useState } from 'react';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import { StyledGridBottomRightImage, StyledGridImage, StyledGridLeftImage, StyledGridTopRightImage } from './GridImage.styles';
 const GridImage = ({
   background,
   images,
   shouldShowRoundImage,
   size,
-  onClick
+  onClick,
+  shouldEnableKeyboardHighlighting
 }) => {
   const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);
   const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);
   const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);
+  const isClickable = typeof onClick === 'function';
+  const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlighting;
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
+  const handleKeyDown = useCallback(event => {
+    if (!isClickable) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick?.(event);
+    }
+  }, [isClickable, onClick]);
   const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);
   const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);
   const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);
@@ -17,8 +31,12 @@ const GridImage = ({
   return /*#__PURE__*/React.createElement(StyledGridImage, {
     $background: background,
     $shouldShowRoundImage: shouldShowRoundImage,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     $size: size,
-    onClick: typeof onClick === 'function' ? onClick : undefined
+    onClick: isClickable ? onClick : undefined,
+    onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
+    tabIndex: isKeyboardFocusable ? 0 : -1,
+    role: isClickable ? 'button' : undefined
   }, /*#__PURE__*/React.createElement(StyledGridLeftImage, {
     $isHidden: isGridImageHidden,
     onLoad: handleLeftImageLoaded,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"GridImage.js","names":["React","useCallback","useState","StyledGridBottomRightImage","StyledGridImage","StyledGridLeftImage","StyledGridTopRightImage","GridImage","background","images","shouldShowRoundImage","size","onClick","hasLoadedLeftImage","setHasLoadedLeftImage","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","$background","$shouldShowRoundImage","$size","undefined","$isHidden","onLoad","src","displayName"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, { CSSProperties, FC, MouseEventHandler, useCallback, useState } from 'react';\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\nconst GridImage: FC<GridImageProps> = ({\n background,\n images,\n shouldShowRoundImage,\n size,\n onClick,\n}) => {\n const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\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 $size={size}\n onClick={~~typeof~~ onClick ~~===~~ ~~'function'~~ ? ~~onClick~~ : 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,~~IAA0CC~~,WAAW,~~EAAEC~~,QAAQ,~~QAAQ~~,OAAO;~~AAC1F~~,SACIC,0BAA0B,EAC1BC,eAAe,EACfC,mBAAmB,EACnBC,uBAAuB,QACpB,oBAAoB;~~AAyB3B~~,MAAMC,SAA6B,GAAGA,CAAC;EACnCC,UAAU;EACVC,MAAM;EACNC,oBAAoB;EACpBC,IAAI;EACJC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,kBAAkB,EAAEC,qBAAqB,CAAC,~~GAAGZ~~,QAAQ,CAAC,KAAK,CAAC;EACnE,MAAM,~~CAACa~~,sBAAsB,EAAEC,yBAAyB,CAAC,~~GAAGd~~,QAAQ,CAAC,KAAK,CAAC;EAC3E,MAAM,~~CAACe~~,yBAAyB,EAAEC,4BAA4B,CAAC,~~GAAGhB~~,QAAQ,CAAC,KAAK,CAAC;EAEjF,~~MAAMiB~~,qBAAqB,~~GAAGlB~~,WAAW,CAAC,~~MAAMa~~,qBAAqB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAEhF,~~MAAMM~~,yBAAyB,~~GAAGnB~~,WAAW,CAAC,~~MAAMe~~,yBAAyB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAExF,~~MAAMK~~,4BAA4B,~~GAAGpB~~,WAAW,CAAC,~~MAAMiB~~,4BAA4B,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAE9F,~~MAAMI~~,iBAAiB,GACnB,~~CAACT~~,kBAAkB,IAAI,CAACE,sBAAsB,IAAI,CAACE,yBAAyB;EAEhF,~~oBACIjB~~,KAAA,~~CAAAuB~~,aAAA,~~CAACnB~~,eAAe;~~IACZoB~~,WAAW,~~EAAEhB~~,UAAW;~~IACxBiB~~,qBAAqB,~~EAAEf~~,oBAAqB;~~IAC5CgB~~,KAAK,~~EAAEf~~,IAAK;IACZC,OAAO,~~EAAE~~,~~OAAOA~~,OAAO,~~KAAK~~,~~UAAU~~,~~GAAGA~~,~~OAAO~~,~~GAAGe~~;EAAU,~~gBAE7D3B~~,KAAA,~~CAAAuB~~,aAAA,~~CAAClB~~,mBAAmB;~~IAChBuB~~,SAAS,~~EAAEN~~,iBAAkB;~~IAC7BO~~,MAAM,~~EAAEV~~,qBAAsB;~~IAC9BO~~,KAAK,~~EAAEf~~,IAAK;~~IACZmB~~,GAAG,~~EAAErB~~,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,~~eACFT~~,KAAA,~~CAAAuB~~,aAAA,~~CAACjB~~,uBAAuB;~~IACpBsB~~,SAAS,~~EAAEN~~,iBAAkB;~~IAC7BO~~,MAAM,~~EAAET~~,yBAA0B;~~IAClCM~~,KAAK,~~EAAEf~~,IAAK;~~IACZmB~~,GAAG,~~EAAErB~~,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,~~eACFT~~,KAAA,~~CAAAuB~~,aAAA,~~CAACpB~~,0BAA0B;~~IACvByB~~,SAAS,~~EAAEN~~,iBAAkB;~~IAC7BO~~,MAAM,~~EAAER~~,4BAA6B;~~IACrCS~~,GAAG,~~EAAErB~~,MAAM,CAAC,CAAC;EAAE,CAClB,CACY,CAAC;AAE1B,CAAC;AAEDF,SAAS,~~CAACwB~~,WAAW,GAAG,WAAW;AAEnC,~~eAAexB~~,SAAS","ignoreList":[]}
1	+ {"version":3,"file":"GridImage.js","names":["React","useCallback","useState","useKeyboardFocusHighlighting","StyledGridBottomRightImage","StyledGridImage","StyledGridLeftImage","StyledGridTopRightImage","GridImage","background","images","shouldShowRoundImage","size","onClick","shouldEnableKeyboardHighlighting","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 SyntheticEvent,\n useCallback,\n useState,\n} from 'react';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\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 [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 && shouldEnableKeyboardHighlighting;\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\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 $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":[]}

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

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

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

	@@ -1 +1 @@
1	- {"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 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\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,~~MAAM~~,mBAAmB;~~AAStC~~,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,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":[]}
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":[]}

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

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useCallback } 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 { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 const GroupedImage = ({
   cornerImage,
   height = 40,
@@ -12,12 +13,25 @@ const GroupedImage = ({
   shouldPreventBackground = false,
   shouldShowRoundImage = false,
   cornerElement,
-  onImageError
+  onImageError,
+  shouldEnableKeyboardHighlighting
 }) => {
   const hasCornerImage = Boolean(cornerImage);
   const hasCornerElement = Boolean(cornerElement);
   const hasMultipleImages = images.length > 1;
   const uuid = useUuid();
+  const isClickable = typeof onClick === 'function';
+  const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlighting;
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
+  const handleKeyDown = useCallback(event => {
+    if (!isClickable) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick?.(event);
+    }
+  }, [isClickable, onClick]);
   const imageElements = images.slice(0, 2).map((src, index) => /*#__PURE__*/React.createElement(StyledGroupImageElement, {
     $background: imageBackground,
     $isSecondImage: index === 1,
@@ -44,8 +58,12 @@ const GroupedImage = ({
     onError: event => typeof onImageError === 'function' && onImageError(event, index)
   })))));
   return /*#__PURE__*/React.createElement(StyledGroupedImage, {
-    onClick: onClick,
-    $height: height
+    onClick: isClickable ? onClick : undefined,
+    onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
+    tabIndex: isKeyboardFocusable ? 0 : -1,
+    role: isClickable ? 'button' : undefined,
+    $height: height,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
   }, hasCornerImage && /*#__PURE__*/React.createElement(CareOfClipPath, {
     height: height,
     uuid: uuid,

package/lib/esm/components/grouped-image/GroupedImage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GroupedImage.js","names":["React","StyledCornerElement","StyledCornerImage","StyledGroupedImage","StyledGroupImageElement","CareOfClipPath","useUuid","SecondImageClipPath","GroupedImage","cornerImage","height","imageBackground","images","onClick","shouldPreventBackground","shouldShowRoundImage","cornerElement","onImageError","hasCornerImage","Boolean","hasCornerElement","hasMultipleImages","length","uuid","imageElements","slice","map","src","index","createElement","$background","$isSecondImage","$hasCornerImage","$hasMultipleImages","$shouldPreventBackground","$shouldShowRoundImage","$uuid","~~key","~~width","viewBox","xmlns","preserveAspectRatio","alt","onError","~~event~~","$height","imageFactors","displayName"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, { CSSProperties, FC, MouseEventHandler, ReactNode, SyntheticEvent } from 'react';\nimport {\n StyledCornerElement,\n StyledCornerImage,\n StyledGroupedImage,\n StyledGroupImageElement,\n} from './GroupedImage.styles';\nimport CareOfClipPath from './clip-paths/CareOfClipPath';\nimport { useUuid } from '../../hooks/uuid';\nimport SecondImageClipPath from './clip-paths/SecondImageClipPath';\n\ninterface GroupedImageProps {\n /*\n Optional image to display in the bottom right corner of the grouped image.\n /\n cornerImage?: string;\n /\n Height of the grouped image container.\n /\n height?: number;\n /\n Background for the single images.\n /\n imageBackground?: CSSProperties['background'];\n /\n Array of image URLs to display in the grouped image. If only one image is provided, it will be displayed as a full image.\n /\n images: string[];\n /\n Optional click handler for the grouped image.\n /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /\n Whether to prevent the background of the images from being set.\n /\n shouldPreventBackground?: boolean;\n /\n Whether to show the images in a round shape.\n /\n shouldShowRoundImage?: boolean;\n /\n Optional Element to display in the right corner of the image\n /\n cornerElement?: ReactNode;\n /\n Optional handler for image load errors.\n */\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n}\n\nconst GroupedImage: FC<GroupedImageProps> = ({\n cornerImage,\n height = 40,\n imageBackground,\n images,\n onClick,\n shouldPreventBackground = false,\n shouldShowRoundImage = false,\n cornerElement,\n onImageError,\n}) => {\n const hasCornerImage = Boolean(cornerImage);\n const hasCornerElement = Boolean(cornerElement);\n const hasMultipleImages = images.length > 1;\n const uuid = useUuid();\n\n const imageElements = images.slice(0, 2).map((src, index) => (\n <StyledGroupImageElement\n $background={imageBackground}\n $isSecondImage={index === 1}\n $hasCornerImage={hasCornerImage}\n $hasMultipleImages={hasMultipleImages}\n $shouldPreventBackground={shouldPreventBackground}\n $shouldShowRoundImage={shouldShowRoundImage}\n $uuid={uuid}\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n >\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 40 40\"\n xmlns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"xMidYMid slice\"\n >\n <foreignObject width=\"40\" height=\"40\">\n <img\n alt={`image--${index}`}\n src={src}\n onError={(event) =>\n typeof onImageError === 'function' && onImageError(event, index)\n }\n />\n </foreignObject>\n </svg>\n </StyledGroupImageElement>\n ));\n\n return (\n <StyledGroupedImage onClick={onClick} $height={height}>\n {hasCornerImage && (\n <CareOfClipPath\n height={height}\n uuid={uuid}\n imageFactors={hasMultipleImages ? [0.76, 0.8] : [1]}\n />\n )}\n {hasMultipleImages && (\n <SecondImageClipPath\n height={height}\n uuid={uuid}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n\n {imageElements}\n\n {hasCornerImage && (\n <StyledCornerImage\n $background={imageBackground}\n $shouldPreventBackground={shouldPreventBackground}\n $hasMultipleImages={hasMultipleImages}\n src={cornerImage}\n key=\"corner-image\"\n />\n )}\n {hasCornerElement && <StyledCornerElement>{cornerElement}</StyledCornerElement>}\n </StyledGroupedImage>\n );\n};\n\nGroupedImage.displayName = 'GroupedImage';\n\nexport default GroupedImage;\n"],"mappings":"AAAA,OAAOA,KAAK,~~MAA2E~~,OAAO;~~AAC9F~~,SACIC,mBAAmB,EACnBC,iBAAiB,EACjBC,kBAAkB,EAClBC,uBAAuB,QACpB,uBAAuB;AAC9B,OAAOC,cAAc,MAAM,6BAA6B;AACxD,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,OAAOC,mBAAmB,MAAM,kCAAkC;~~AAyClE~~,MAAMC,YAAmC,GAAGA,CAAC;EACzCC,WAAW;EACXC,MAAM,GAAG,EAAE;EACXC,eAAe;EACfC,MAAM;EACNC,OAAO;EACPC,uBAAuB,GAAG,KAAK;EAC/BC,oBAAoB,GAAG,KAAK;EAC5BC,aAAa;EACbC;AACJ,CAAC,KAAK;EACF,MAAMC,cAAc,GAAGC,OAAO,~~CAACV~~,WAAW,CAAC;EAC3C,~~MAAMW~~,gBAAgB,GAAGD,OAAO,~~CAACH~~,aAAa,CAAC;EAC/C,~~MAAMK~~,iBAAiB,~~GAAGT~~,MAAM,~~CAACU~~,MAAM,GAAG,CAAC;EAC3C,MAAMC,IAAI,~~GAAGjB~~,OAAO,CAAC,CAAC;~~EAEtB~~,~~MAAMkB~~,aAAa,~~GAAGZ~~,MAAM,~~CAACa~~,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAACC,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,~~kBACpD5B~~,KAAA,~~CAAA6B~~,aAAA,~~CAACzB~~,uBAAuB;~~IACpB0B~~,WAAW,~~EAAEnB~~,eAAgB;~~IAC7BoB~~,cAAc,EAAEH,KAAK,KAAK,CAAE;IAC5BI,eAAe,~~EAAEd~~,cAAe;~~IAChCe~~,kBAAkB,~~EAAEZ~~,iBAAkB;~~IACtCa~~,wBAAwB,~~EAAEpB~~,uBAAwB;~~IAClDqB~~,qBAAqB,~~EAAEpB~~,oBAAqB;~~IAC5CqB~~,KAAK,~~EAAEb~~;IACP;IAAA;~~IACAc~~,GAAG,~~EAAET~~;EAAM,~~gBAEX5B~~,KAAA,~~CAAA6B~~,aAAA;~~IACIS~~,KAAK,EAAC,MAAM;~~IACZ5B~~,MAAM,EAAC,MAAM;~~IACb6B~~,OAAO,EAAC,WAAW;IACnBC,KAAK,EAAC,4BAA4B;IAClCC,mBAAmB,EAAC;EAAgB,~~gBAEpCzC~~,KAAA,~~CAAA6B~~,aAAA;~~IAAeS~~,KAAK,EAAC,IAAI;~~IAAC5B~~,MAAM,EAAC;EAAI,~~gBACjCV~~,KAAA,~~CAAA6B~~,aAAA;~~IACIa~~,GAAG,EAAE,~~UAAUd~~,KAAK,EAAG;IACvBD,GAAG,EAAEA,GAAI;~~IACTgB~~,OAAO,~~EAAGC~~,KAAK,IACX,~~OAAO3B~~,YAAY,KAAK,UAAU,IAAIA,YAAY,~~CAAC2B~~,KAAK,~~EAAEhB~~,KAAK;EAClE,CACJ,CACU,CACd,CACgB,CAC5B,CAAC;EAEF,~~oBACI5B~~,KAAA,~~CAAA6B~~,aAAA,~~CAAC1B~~,kBAAkB;~~IAACU~~,OAAO,~~EAAEA~~,~~OAAQ~~;~~IAACgC~~,OAAO,~~EAAEnC~~;~~EAAO~~,~~GACjDQ~~,cAAc,~~iBACXlB~~,KAAA,~~CAAA6B~~,aAAA,~~CAACxB~~,cAAc;~~IACXK~~,MAAM,EAAEA,MAAO;~~IACfa~~,IAAI,EAAEA,IAAK;~~IACXuB~~,YAAY,~~EAAEzB~~,iBAAiB,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;EAAE,CACvD,CACJ,EACAA,iBAAiB,~~iBACdrB~~,KAAA,~~CAAA6B~~,aAAA,~~CAACtB~~,mBAAmB;~~IAChBG~~,MAAM,EAAEA,MAAO;~~IACfa~~,IAAI,EAAEA,IAAK;~~IACXR~~,oBAAoB,EAAEA;EAAqB,CAC9C,CACJ,~~EAEAS~~,aAAa,~~EAEbN~~,cAAc,~~iBACXlB~~,KAAA,~~CAAA6B~~,aAAA,~~CAAC3B~~,iBAAiB;~~IACd4B~~,WAAW,~~EAAEnB~~,eAAgB;~~IAC7BuB~~,wBAAwB,~~EAAEpB~~,uBAAwB;~~IAClDmB~~,kBAAkB,~~EAAEZ~~,iBAAkB;~~IACtCM~~,GAAG,~~EAAElB~~,WAAY;~~IACjB4B~~,GAAG,EAAC;EAAc,CACrB,CACJ,~~EACAjB~~,gBAAgB,~~iBAAIpB~~,KAAA,~~CAAA6B~~,aAAA,~~CAAC5B~~,mBAAmB,~~QAAEe~~,aAAmC,CAC9D,CAAC;AAE7B,CAAC;AAEDR,YAAY,~~CAACuC~~,WAAW,GAAG,cAAc;AAEzC,~~eAAevC~~,YAAY","ignoreList":[]}
1	+ {"version":3,"file":"GroupedImage.js","names":["React","useCallback","StyledCornerElement","StyledCornerImage","StyledGroupedImage","StyledGroupImageElement","CareOfClipPath","useUuid","SecondImageClipPath","useKeyboardFocusHighlighting","GroupedImage","cornerImage","height","imageBackground","images","onClick","shouldPreventBackground","shouldShowRoundImage","cornerElement","onImageError","shouldEnableKeyboardHighlighting","hasCornerImage","Boolean","hasCornerElement","hasMultipleImages","length","uuid","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","handleKeyDown","event","key","preventDefault","imageElements","slice","map","src","index","createElement","$background","$isSecondImage","$hasCornerImage","$hasMultipleImages","$shouldPreventBackground","$shouldShowRoundImage","$uuid","width","viewBox","xmlns","preserveAspectRatio","alt","onError","undefined","onKeyDown","tabIndex","role","$height","$shouldShowKeyboardHighlighting","imageFactors","displayName"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n KeyboardEventHandler,\n MouseEvent,\n MouseEventHandler,\n ReactNode,\n SyntheticEvent,\n useCallback,\n} from 'react';\nimport {\n StyledCornerElement,\n StyledCornerImage,\n StyledGroupedImage,\n StyledGroupImageElement,\n} from './GroupedImage.styles';\nimport CareOfClipPath from './clip-paths/CareOfClipPath';\nimport { useUuid } from '../../hooks/uuid';\nimport SecondImageClipPath from './clip-paths/SecondImageClipPath';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\ninterface GroupedImageProps {\n /*\n Optional image to display in the bottom right corner of the grouped image.\n /\n cornerImage?: string;\n /\n Height of the grouped image container.\n /\n height?: number;\n /\n Background for the single images.\n /\n imageBackground?: CSSProperties['background'];\n /\n Array of image URLs to display in the grouped image. If only one image is provided, it will be displayed as a full image.\n /\n images: string[];\n /\n Optional click handler for the grouped image.\n /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /\n Whether to prevent the background of the images from being set.\n /\n shouldPreventBackground?: boolean;\n /\n Whether to show the images in a round shape.\n /\n shouldShowRoundImage?: boolean;\n /\n Optional Element to display in the right corner of the image\n /\n cornerElement?: ReactNode;\n /\n Optional handler for image load errors.\n /\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n /\n Enables keyboard-only focus highlighting for clickable grouped images.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n}\n\nconst GroupedImage: FC<GroupedImageProps> = ({\n cornerImage,\n height = 40,\n imageBackground,\n images,\n onClick,\n shouldPreventBackground = false,\n shouldShowRoundImage = false,\n cornerElement,\n onImageError,\n shouldEnableKeyboardHighlighting,\n}) => {\n const hasCornerImage = Boolean(cornerImage);\n const hasCornerElement = Boolean(cornerElement);\n const hasMultipleImages = images.length > 1;\n const uuid = useUuid();\n const isClickable = typeof onClick === 'function';\n const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlighting;\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\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 imageElements = images.slice(0, 2).map((src, index) => (\n <StyledGroupImageElement\n $background={imageBackground}\n $isSecondImage={index === 1}\n $hasCornerImage={hasCornerImage}\n $hasMultipleImages={hasMultipleImages}\n $shouldPreventBackground={shouldPreventBackground}\n $shouldShowRoundImage={shouldShowRoundImage}\n $uuid={uuid}\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n >\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 40 40\"\n xmlns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"xMidYMid slice\"\n >\n <foreignObject width=\"40\" height=\"40\">\n <img\n alt={`image--${index}`}\n src={src}\n onError={(event) =>\n typeof onImageError === 'function' && onImageError(event, index)\n }\n />\n </foreignObject>\n </svg>\n </StyledGroupImageElement>\n ));\n\n return (\n <StyledGroupedImage\n onClick={isClickable ? onClick : undefined}\n onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n tabIndex={isKeyboardFocusable ? 0 : -1}\n role={isClickable ? 'button' : undefined}\n $height={height}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n >\n {hasCornerImage && (\n <CareOfClipPath\n height={height}\n uuid={uuid}\n imageFactors={hasMultipleImages ? [0.76, 0.8] : [1]}\n />\n )}\n {hasMultipleImages && (\n <SecondImageClipPath\n height={height}\n uuid={uuid}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n\n {imageElements}\n\n {hasCornerImage && (\n <StyledCornerImage\n $background={imageBackground}\n $shouldPreventBackground={shouldPreventBackground}\n $hasMultipleImages={hasMultipleImages}\n src={cornerImage}\n key=\"corner-image\"\n />\n )}\n {hasCornerElement && <StyledCornerElement>{cornerElement}</StyledCornerElement>}\n </StyledGroupedImage>\n );\n};\n\nGroupedImage.displayName = 'GroupedImage';\n\nexport default GroupedImage;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/grouped-image/GroupedImage.styles.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components';
+import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledGroupedImage = styled.div`
     flex: 0 0 auto;
     height: ${({
@@ -8,6 +9,14 @@ export const StyledGroupedImage = styled.div`
     width: ${({
   $height
 }) => $height}px;
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible {
+                ${keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 export const StyledGroupImageElement = styled.div.attrs(({
   $isSecondImage,