@chayns-components/core 5.4.20 → 5.4.21-alpha.0

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

@@ -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

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

@@ -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

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

@@ -1,15 +1,32 @@
 import React, { useCallback, useState } from 'react';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
+import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
 import { StyledGridBottomRightImage, StyledGridImage, StyledGridLeftImage, StyledGridTopRightImage } from './GridImage.styles';
 const GridImage = ({
   background,
   images,
   shouldShowRoundImage,
   size,
-  onClick
+  onClick,
+  shouldEnableKeyboardHighlighting
 }) => {
+  const colorScheme = useColorScheme();
+  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
   const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);
   const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);
   const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);
+  const isClickable = typeof onClick === 'function';
+  const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlightingEffective;
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(isKeyboardFocusable);
+  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 +34,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

@@ -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":[]}
+{"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":"AAAA,OAAOA,KAAK,IAMRC,WAAW,EACXC,QAAQ,QACL,OAAO;AACd,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,WAAW,GAAGZ,cAAc,CAAC,CAAC;EACpC,MAAMa,yCAAyC,GAC3CF,gCAAgC,IAAIC,WAAW,EAAED,gCAAgC,IAAI,KAAK;EAE9F,MAAM,CAACG,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGjB,QAAQ,CAAC,KAAK,CAAC;EACnE,MAAM,CAACkB,sBAAsB,EAAEC,yBAAyB,CAAC,GAAGnB,QAAQ,CAAC,KAAK,CAAC;EAC3E,MAAM,CAACoB,yBAAyB,EAAEC,4BAA4B,CAAC,GAAGrB,QAAQ,CAAC,KAAK,CAAC;EAEjF,MAAMsB,WAAW,GAAG,OAAOV,OAAO,KAAK,UAAU;EACjD,MAAMW,mBAAmB,GAAGD,WAAW,IAAIP,yCAAyC;EACpF,MAAMS,8BAA8B,GAAGvB,4BAA4B,CAACsB,mBAAmB,CAAC;EAExF,MAAME,aAAa,GAAG1B,WAAW,CAC5B2B,KAAK,IAAK;IACP,IAAI,CAACJ,WAAW,EAAE;MACd;IACJ;IAEA,IAAII,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC5CD,KAAK,CAACE,cAAc,CAAC,CAAC;MACtBhB,OAAO,GAAGc,KAA8C,CAAC;IAC7D;EACJ,CAAC,EACD,CAACJ,WAAW,EAAEV,OAAO,CACzB,CAAC;EAED,MAAMiB,qBAAqB,GAAG9B,WAAW,CAAC,MAAMkB,qBAAqB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAEhF,MAAMa,yBAAyB,GAAG/B,WAAW,CAAC,MAAMoB,yBAAyB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAExF,MAAMY,4BAA4B,GAAGhC,WAAW,CAAC,MAAMsB,4BAA4B,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAE9F,MAAMW,iBAAiB,GACnB,CAAChB,kBAAkB,IAAI,CAACE,sBAAsB,IAAI,CAACE,yBAAyB;EAEhF,oBACItB,KAAA,CAAAmC,aAAA,CAAC7B,eAAe;IACZ8B,WAAW,EAAE1B,UAAW;IACxB2B,qBAAqB,EAAEzB,oBAAqB;IAC5C0B,+BAA+B,EAAEZ,8BAA+B;IAChEa,KAAK,EAAE1B,IAAK;IACZC,OAAO,EAAEU,WAAW,GAAGV,OAAO,GAAG0B,SAAU;IAC3CC,SAAS,EAAEhB,mBAAmB,GAAGE,aAAa,GAAGa,SAAU;IAC3DE,QAAQ,EAAEjB,mBAAmB,GAAG,CAAC,GAAG,CAAC,CAAE;IACvCkB,IAAI,EAAEnB,WAAW,GAAG,QAAQ,GAAGgB;EAAU,gBAEzCxC,KAAA,CAAAmC,aAAA,CAAC5B,mBAAmB;IAChBqC,SAAS,EAAEV,iBAAkB;IAC7BW,MAAM,EAAEd,qBAAsB;IAC9BQ,KAAK,EAAE1B,IAAK;IACZiC,GAAG,EAAEnC,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,eACFX,KAAA,CAAAmC,aAAA,CAAC3B,uBAAuB;IACpBoC,SAAS,EAAEV,iBAAkB;IAC7BW,MAAM,EAAEb,yBAA0B;IAClCO,KAAK,EAAE1B,IAAK;IACZiC,GAAG,EAAEnC,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,eACFX,KAAA,CAAAmC,aAAA,CAAC9B,0BAA0B;IACvBuC,SAAS,EAAEV,iBAAkB;IAC7BW,MAAM,EAAEZ,4BAA6B;IACrCa,GAAG,EAAEnC,MAAM,CAAC,CAAC;EAAE,CAClB,CACY,CAAC;AAE1B,CAAC;AAEDF,SAAS,CAACsC,WAAW,GAAG,WAAW;AAEnC,eAAetC,SAAS","ignoreList":[]}

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

@@ -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

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

@@ -1,8 +1,10 @@
-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';
+import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
 const GROUPED_IMAGE_SERVICE_ORIGIN = 'https://tsimg.cloud';
 const IMAGE_SERVICE_PARAM_PATTERN = /^(?:[whsbd]\d+|f(?:webp|avif|json|none)|c(?:c|f)|m(?:cr|sd|ct|pd|cv))$/i;
 const getGroupedImageDisplayUrl = (url, size) => {
@@ -45,13 +47,28 @@ const GroupedImage = ({
   shouldPreventBackground = false,
   shouldShowRoundImage = false,
   cornerElement,
-  onImageError
+  onImageError,
+  shouldEnableKeyboardHighlighting
 }) => {
+  const colorScheme = useColorScheme();
+  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
   const hasCornerImage = Boolean(cornerImage);
   const hasCornerElement = Boolean(cornerElement);
   const hasMultipleImages = images.length > 1;
   const uuid = useUuid();
   const cornerImageDisplayUrl = cornerImage ? getGroupedImageDisplayUrl(cornerImage, height) : undefined;
+  const isClickable = typeof onClick === 'function';
+  const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlightingEffective;
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(isKeyboardFocusable);
+  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,
@@ -78,8 +95,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

@@ -1 +1 @@
-{"version":3,"file":"GroupedImage.js","names":["React","StyledCornerElement","StyledCornerImage","StyledGroupedImage","StyledGroupImageElement","CareOfClipPath","useUuid","SecondImageClipPath","GROUPED_IMAGE_SERVICE_ORIGIN","IMAGE_SERVICE_PARAM_PATTERN","getGroupedImageDisplayUrl","url","size","urlObject","URL","origin","pathSegments","pathname","split","fileName","pop","extensionIndex","lastIndexOf","extension","slice","fileBaseName","parameterSegment","hasImageServiceParameters","Boolean","every","parameter","test","normalizedSize","Math","max","round","fileBaseNameWithoutParams","preservedParams","filter","p","newParams","push","join","toString","GroupedImage","cornerImage","height","imageBackground","images","onClick","shouldPreventBackground","shouldShowRoundImage","cornerElement","onImageError","hasCornerImage","hasCornerElement","hasMultipleImages","length","uuid","cornerImageDisplayUrl","undefined","imageElements","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\nconst GROUPED_IMAGE_SERVICE_ORIGIN = 'https://tsimg.cloud';\nconst IMAGE_SERVICE_PARAM_PATTERN =\n    /^(?:[whsbd]\\d+|f(?:webp|avif|json|none)|c(?:c|f)|m(?:cr|sd|ct|pd|cv))$/i;\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 getGroupedImageDisplayUrl = (url: string, size: number): string => {\n    try {\n        const urlObject = new URL(url);\n\n        if (urlObject.origin !== GROUPED_IMAGE_SERVICE_ORIGIN) {\n            return url;\n        }\n\n        const pathSegments = urlObject.pathname.split('/');\n        const fileName = pathSegments.pop();\n\n        if (!fileName) {\n            return url;\n        }\n\n        const extensionIndex = fileName.lastIndexOf('.');\n        const extension = extensionIndex > -1 ? fileName.slice(extensionIndex) : '';\n        const fileBaseName = extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;\n        const parameterSegment = fileBaseName.split('_').pop() ?? '';\n        const hasImageServiceParameters = Boolean(\n            parameterSegment &&\n            parameterSegment !== fileBaseName &&\n            parameterSegment\n                .split('-')\n                .every((parameter) => IMAGE_SERVICE_PARAM_PATTERN.test(parameter)),\n        );\n        const normalizedSize = Math.max(1, Math.round(size));\n\n        if (hasImageServiceParameters) {\n            const fileBaseNameWithoutParams = fileBaseName.slice(0, fileBaseName.lastIndexOf('_'));\n            const preservedParams = parameterSegment\n                .split('-')\n                .filter((p) => !/^[whs]\\d+$/i.test(p));\n            const newParams = [...preservedParams, `w${normalizedSize}`, `h${normalizedSize}`];\n            pathSegments.push(`${fileBaseNameWithoutParams}_${newParams.join('-')}${extension}`);\n        } else {\n            pathSegments.push(`${fileBaseName}_w${normalizedSize}-h${normalizedSize}${extension}`);\n        }\n        urlObject.pathname = pathSegments.join('/');\n\n        return urlObject.toString();\n    } catch {\n        return url;\n    }\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    const cornerImageDisplayUrl = cornerImage\n        ? getGroupedImageDisplayUrl(cornerImage, height)\n        : undefined;\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={getGroupedImageDisplayUrl(src, height)}\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={cornerImageDisplayUrl}\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":[]}
+{"version":3,"file":"GroupedImage.js","names":["React","useCallback","StyledCornerElement","StyledCornerImage","StyledGroupedImage","StyledGroupImageElement","CareOfClipPath","useUuid","SecondImageClipPath","useKeyboardFocusHighlighting","useColorScheme","GROUPED_IMAGE_SERVICE_ORIGIN","IMAGE_SERVICE_PARAM_PATTERN","getGroupedImageDisplayUrl","url","size","urlObject","URL","origin","pathSegments","pathname","split","fileName","pop","extensionIndex","lastIndexOf","extension","slice","fileBaseName","parameterSegment","hasImageServiceParameters","Boolean","every","parameter","test","normalizedSize","Math","max","round","fileBaseNameWithoutParams","preservedParams","filter","p","newParams","push","join","toString","GroupedImage","cornerImage","height","imageBackground","images","onClick","shouldPreventBackground","shouldShowRoundImage","cornerElement","onImageError","shouldEnableKeyboardHighlighting","colorScheme","shouldEnableKeyboardHighlightingEffective","hasCornerImage","hasCornerElement","hasMultipleImages","length","uuid","cornerImageDisplayUrl","undefined","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","handleKeyDown","event","key","preventDefault","imageElements","map","src","index","createElement","$background","$isSecondImage","$hasCornerImage","$hasMultipleImages","$shouldPreventBackground","$shouldShowRoundImage","$uuid","width","viewBox","xmlns","preserveAspectRatio","alt","onError","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';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nconst GROUPED_IMAGE_SERVICE_ORIGIN = 'https://tsimg.cloud';\nconst IMAGE_SERVICE_PARAM_PATTERN =\n    /^(?:[whsbd]\\d+|f(?:webp|avif|json|none)|c(?:c|f)|m(?:cr|sd|ct|pd|cv))$/i;\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 getGroupedImageDisplayUrl = (url: string, size: number): string => {\n    try {\n        const urlObject = new URL(url);\n\n        if (urlObject.origin !== GROUPED_IMAGE_SERVICE_ORIGIN) {\n            return url;\n        }\n\n        const pathSegments = urlObject.pathname.split('/');\n        const fileName = pathSegments.pop();\n\n        if (!fileName) {\n            return url;\n        }\n\n        const extensionIndex = fileName.lastIndexOf('.');\n        const extension = extensionIndex > -1 ? fileName.slice(extensionIndex) : '';\n        const fileBaseName = extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;\n        const parameterSegment = fileBaseName.split('_').pop() ?? '';\n        const hasImageServiceParameters = Boolean(\n            parameterSegment &&\n            parameterSegment !== fileBaseName &&\n            parameterSegment\n                .split('-')\n                .every((parameter) => IMAGE_SERVICE_PARAM_PATTERN.test(parameter)),\n        );\n        const normalizedSize = Math.max(1, Math.round(size));\n\n        if (hasImageServiceParameters) {\n            const fileBaseNameWithoutParams = fileBaseName.slice(0, fileBaseName.lastIndexOf('_'));\n            const preservedParams = parameterSegment\n                .split('-')\n                .filter((p) => !/^[whs]\\d+$/i.test(p));\n            const newParams = [...preservedParams, `w${normalizedSize}`, `h${normalizedSize}`];\n            pathSegments.push(`${fileBaseNameWithoutParams}_${newParams.join('-')}${extension}`);\n        } else {\n            pathSegments.push(`${fileBaseName}_w${normalizedSize}-h${normalizedSize}${extension}`);\n        }\n        urlObject.pathname = pathSegments.join('/');\n\n        return urlObject.toString();\n    } catch {\n        return url;\n    }\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 colorScheme = useColorScheme();\n    const shouldEnableKeyboardHighlightingEffective =\n        shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n    const hasCornerImage = Boolean(cornerImage);\n    const hasCornerElement = Boolean(cornerElement);\n    const hasMultipleImages = images.length > 1;\n    const uuid = useUuid();\n    const cornerImageDisplayUrl = cornerImage\n        ? getGroupedImageDisplayUrl(cornerImage, height)\n        : undefined;\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 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={getGroupedImageDisplayUrl(src, height)}\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={cornerImageDisplayUrl}\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

@@ -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,

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

@@ -1 +1 @@
-{"version":3,"file":"GroupedImage.styles.js","names":["styled","css","StyledGroupedImage","div","$height","StyledGroupImageElement","attrs","$isSecondImage","$hasMultipleImages","$hasCornerImage","$uuid","clipPath","style","$shouldShowRoundImage","$background","$shouldPreventBackground","theme","StyledCornerImage","img","StyledCornerElement","span"],"sources":["../../../../src/components/grouped-image/GroupedImage.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { CSSProperties } from 'react';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGroupedImageProps = WithTheme<{\n    $height: CSSProperties['height'];\n}>;\n\nexport const StyledGroupedImage = styled.div<StyledGroupedImageProps>`\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height}px;\n    position: relative;\n    width: ${({ $height }) => $height}px;\n`;\n\ntype StyledImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $isSecondImage?: boolean;\n    $shouldPreventBackground?: boolean;\n    $shouldShowRoundImage?: boolean;\n    $hasCornerImage: boolean;\n    $hasMultipleImages: boolean;\n    $uuid: string;\n}>;\n\nexport const StyledGroupImageElement = styled.div.attrs<StyledImageProps>(\n    ({ $isSecondImage, $hasMultipleImages, $hasCornerImage, $uuid }) => {\n        let clipPath: string | undefined;\n        if (\n            ($isSecondImage && $hasCornerImage) ||\n            (!$isSecondImage && !$hasMultipleImages && $hasCornerImage)\n        ) {\n            clipPath = `url(#care-of-mask--${$uuid})`;\n        } else if (!$isSecondImage && $hasMultipleImages) {\n            clipPath = `url(#second-image-mask--${$uuid})`;\n        }\n\n        return {\n            style: {\n                clipPath,\n            },\n        };\n    },\n)`\n    aspect-ratio: 1;\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : '0')};\n    position: absolute;\n    overflow: hidden;\n\n    ${({ $hasMultipleImages, $isSecondImage }) => {\n        if (!$hasMultipleImages) {\n            return css`\n                height: 100%;\n            `;\n        }\n\n        if ($isSecondImage) {\n            return css`\n                height: 80%;\n            `;\n        }\n\n        return css`\n            height: 76%;\n        `;\n    }}\n\n    ${({ $isSecondImage }) =>\n        $isSecondImage\n            ? css`\n                  bottom: 0;\n                  right: 0;\n              `\n            : css`\n                  top: 0;\n                  left: 0;\n              `}\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n    \n    img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n`;\n\ntype StyledCornerImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldPreventBackground?: boolean;\n    $hasMultipleImages: boolean;\n}>;\n\nexport const StyledCornerImage = styled.img<StyledCornerImageProps>`\n    aspect-ratio: 1;\n    bottom: 0;\n    height: ${({ $hasMultipleImages }) => ($hasMultipleImages ? '28%' : '38%')};\n    position: absolute;\n    right: 0;\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n`;\n\nexport const StyledCornerElement = styled.span`\n    height: 18px;\n    width: 18px;\n    position: absolute;\n    bottom: 0;\n    right: -5px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    & > * {\n        max-height: 100%;\n        max-width: 100%;\n        display: block;\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA,cAAc,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO;AACtC;AACA,aAAa,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO;AACrC,CAAC;AAYD,OAAO,MAAMC,uBAAuB,GAAGL,MAAM,CAACG,GAAG,CAACG,KAAK,CACnD,CAAC;EAAEC,cAAc;EAAEC,kBAAkB;EAAEC,eAAe;EAAEC;AAAM,CAAC,KAAK;EAChE,IAAIC,QAA4B;EAChC,IACKJ,cAAc,IAAIE,eAAe,IACjC,CAACF,cAAc,IAAI,CAACC,kBAAkB,IAAIC,eAAgB,EAC7D;IACEE,QAAQ,GAAG,sBAAsBD,KAAK,GAAG;EAC7C,CAAC,MAAM,IAAI,CAACH,cAAc,IAAIC,kBAAkB,EAAE;IAC9CG,QAAQ,GAAG,2BAA2BD,KAAK,GAAG;EAClD;EAEA,OAAO;IACHE,KAAK,EAAE;MACHD;IACJ;EACJ,CAAC;AACL,CACJ,CAAC;AACD;AACA,qBAAqB,CAAC;EAAEE;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAG,GAAI;AACzF;AACA;AACA;AACA,MAAM,CAAC;EAAEL,kBAAkB;EAAED;AAAe,CAAC,KAAK;EAC1C,IAAI,CAACC,kBAAkB,EAAE;IACrB,OAAOP,GAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIM,cAAc,EAAE;IAChB,OAAON,GAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EAAEM;AAAe,CAAC,KACjBA,cAAc,GACRN,GAAG;AACjB;AACA;AACA,eAAe,GACDA,GAAG;AACjB;AACA;AACA,eAAe;AACf;AACA,MAAM,CAAC;EAAEa,WAAW;EAAEC,wBAAwB;EAAEC;AAAM,CAAC,KAC/C,CAACD,wBAAwB,IACzBd,GAAG;AACX,0BAA0Ba,WAAW,IAAI,QAAQE,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMC,iBAAiB,GAAGjB,MAAM,CAACkB,GAA2B;AACnE;AACA;AACA,cAAc,CAAC;EAAEV;AAAmB,CAAC,KAAMA,kBAAkB,GAAG,KAAK,GAAG,KAAM;AAC9E;AACA;AACA;AACA,MAAM,CAAC;EAAEM,WAAW;EAAEC,wBAAwB;EAAEC;AAAM,CAAC,KAC/C,CAACD,wBAAwB,IACzBd,GAAG;AACX,0BAA0Ba,WAAW,IAAI,QAAQE,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AACT,CAAC;AAED,OAAO,MAAMG,mBAAmB,GAAGnB,MAAM,CAACoB,IAAI;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"GroupedImage.styles.js","names":["styled","css","keyboardFocusHighlightingRingCss","StyledGroupedImage","div","$height","$shouldShowKeyboardHighlighting","StyledGroupImageElement","attrs","$isSecondImage","$hasMultipleImages","$hasCornerImage","$uuid","clipPath","style","$shouldShowRoundImage","$background","$shouldPreventBackground","theme","StyledCornerImage","img","StyledCornerElement","span"],"sources":["../../../../src/components/grouped-image/GroupedImage.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { CSSProperties } from 'react';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledGroupedImageProps = WithTheme<{\n    $height: CSSProperties['height'];\n    $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nexport const StyledGroupedImage = styled.div<StyledGroupedImageProps>`\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height}px;\n    position: relative;\n    width: ${({ $height }) => $height}px;\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                ${keyboardFocusHighlightingRingCss}\n            }\n        `}\n`;\n\ntype StyledImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $isSecondImage?: boolean;\n    $shouldPreventBackground?: boolean;\n    $shouldShowRoundImage?: boolean;\n    $hasCornerImage: boolean;\n    $hasMultipleImages: boolean;\n    $uuid: string;\n}>;\n\nexport const StyledGroupImageElement = styled.div.attrs<StyledImageProps>(\n    ({ $isSecondImage, $hasMultipleImages, $hasCornerImage, $uuid }) => {\n        let clipPath: string | undefined;\n        if (\n            ($isSecondImage && $hasCornerImage) ||\n            (!$isSecondImage && !$hasMultipleImages && $hasCornerImage)\n        ) {\n            clipPath = `url(#care-of-mask--${$uuid})`;\n        } else if (!$isSecondImage && $hasMultipleImages) {\n            clipPath = `url(#second-image-mask--${$uuid})`;\n        }\n\n        return {\n            style: {\n                clipPath,\n            },\n        };\n    },\n)`\n    aspect-ratio: 1;\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : '0')};\n    position: absolute;\n    overflow: hidden;\n\n    ${({ $hasMultipleImages, $isSecondImage }) => {\n        if (!$hasMultipleImages) {\n            return css`\n                height: 100%;\n            `;\n        }\n\n        if ($isSecondImage) {\n            return css`\n                height: 80%;\n            `;\n        }\n\n        return css`\n            height: 76%;\n        `;\n    }}\n\n    ${({ $isSecondImage }) =>\n        $isSecondImage\n            ? css`\n                  bottom: 0;\n                  right: 0;\n              `\n            : css`\n                  top: 0;\n                  left: 0;\n              `}\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n    \n    img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n`;\n\ntype StyledCornerImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldPreventBackground?: boolean;\n    $hasMultipleImages: boolean;\n}>;\n\nexport const StyledCornerImage = styled.img<StyledCornerImageProps>`\n    aspect-ratio: 1;\n    bottom: 0;\n    height: ${({ $hasMultipleImages }) => ($hasMultipleImages ? '28%' : '38%')};\n    position: absolute;\n    right: 0;\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n`;\n\nexport const StyledCornerElement = styled.span`\n    height: 18px;\n    width: 18px;\n    position: absolute;\n    bottom: 0;\n    right: -5px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    & > * {\n        max-height: 100%;\n        max-width: 100%;\n        display: block;\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,gCAAgC,QAAQ,8CAA8C;AAO/F,OAAO,MAAMC,kBAAkB,GAAGH,MAAM,CAACI,GAA4B;AACrE;AACA,cAAc,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO;AACtC;AACA,aAAa,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO;AACrC;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCA,+BAA+B,IAC/BL,GAAG;AACX;AACA,kBAAkBC,gCAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAYD,OAAO,MAAMK,uBAAuB,GAAGP,MAAM,CAACI,GAAG,CAACI,KAAK,CACnD,CAAC;EAAEC,cAAc;EAAEC,kBAAkB;EAAEC,eAAe;EAAEC;AAAM,CAAC,KAAK;EAChE,IAAIC,QAA4B;EAChC,IACKJ,cAAc,IAAIE,eAAe,IACjC,CAACF,cAAc,IAAI,CAACC,kBAAkB,IAAIC,eAAgB,EAC7D;IACEE,QAAQ,GAAG,sBAAsBD,KAAK,GAAG;EAC7C,CAAC,MAAM,IAAI,CAACH,cAAc,IAAIC,kBAAkB,EAAE;IAC9CG,QAAQ,GAAG,2BAA2BD,KAAK,GAAG;EAClD;EAEA,OAAO;IACHE,KAAK,EAAE;MACHD;IACJ;EACJ,CAAC;AACL,CACJ,CAAC;AACD;AACA,qBAAqB,CAAC;EAAEE;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAG,GAAI;AACzF;AACA;AACA;AACA,MAAM,CAAC;EAAEL,kBAAkB;EAAED;AAAe,CAAC,KAAK;EAC1C,IAAI,CAACC,kBAAkB,EAAE;IACrB,OAAOT,GAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIQ,cAAc,EAAE;IAChB,OAAOR,GAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EAAEQ;AAAe,CAAC,KACjBA,cAAc,GACRR,GAAG;AACjB;AACA;AACA,eAAe,GACDA,GAAG;AACjB;AACA;AACA,eAAe;AACf;AACA,MAAM,CAAC;EAAEe,WAAW;EAAEC,wBAAwB;EAAEC;AAAM,CAAC,KAC/C,CAACD,wBAAwB,IACzBhB,GAAG;AACX,0BAA0Be,WAAW,IAAI,QAAQE,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMC,iBAAiB,GAAGnB,MAAM,CAACoB,GAA2B;AACnE;AACA;AACA,cAAc,CAAC;EAAEV;AAAmB,CAAC,KAAMA,kBAAkB,GAAG,KAAK,GAAG,KAAM;AAC9E;AACA;AACA;AACA,MAAM,CAAC;EAAEM,WAAW;EAAEC,wBAAwB;EAAEC;AAAM,CAAC,KAC/C,CAACD,wBAAwB,IACzBhB,GAAG;AACX,0BAA0Be,WAAW,IAAI,QAAQE,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AACT,CAAC;AAED,OAAO,MAAMG,mBAAmB,GAAGrB,MAAM,CAACsB,IAAI;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/highlight-slider/HighlightSlider.js

@@ -1,6 +1,8 @@
 import React, { useCallback, useMemo } from 'react';
 import { StyledHighlightSlider } from './HighlightSlider.styles';
 import HighlightSliderItem from './highlight-slider-item/HighlightSliderItem';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
+import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
 const DEFAULT_HIGHLIGHT_SLIDER_COLORS = {
   backgroundColor: '#E0E0E0',
   fillColor: '#808080'
@@ -10,8 +12,13 @@ const HighlightSlider = ({
   colors = DEFAULT_HIGHLIGHT_SLIDER_COLORS,
   onIndexChange,
   currentIndex,
-  duration = 10
+  duration = 10,
+  shouldEnableKeyboardHighlighting
 }) => {
+  const colorScheme = useColorScheme();
+  const isInteractive = typeof onIndexChange === 'function';
+  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlightingEffective && isInteractive);
   const handleFinish = useCallback(index => {
     if (typeof onIndexChange === 'function') {
       onIndexChange(index >= count - 1 ? 0 : index + 1);
@@ -32,8 +39,11 @@ const HighlightSlider = ({
     isActive: currentIndex === index,
     isFinished: currentIndex > index,
     onClick: handleClick,
-    onFinish: handleFinish
-  })), [colors, count, currentIndex, duration, handleClick, handleFinish]);
+    onFinish: handleFinish,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective,
+    shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    isInteractive: isInteractive
+  })), [colors, count, currentIndex, duration, handleClick, handleFinish, shouldEnableKeyboardHighlightingEffective, shouldShowKeyboardHighlighting, isInteractive]);
   return /*#__PURE__*/React.createElement(StyledHighlightSlider, null, content);
 };
 HighlightSlider.displayName = 'HighlightSlider';

package/lib/esm/components/highlight-slider/HighlightSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightSlider.js","names":["React","useCallback","useMemo","StyledHighlightSlider","HighlightSliderItem","DEFAULT_HIGHLIGHT_SLIDER_COLORS","backgroundColor","fillColor","HighlightSlider","count","colors","onIndexChange","currentIndex","duration","handleFinish","index","handleClick","content","Array","from","length","map","value","createElement","key","isActive","isFinished","onClick","onFinish","displayName"],"sources":["../../../../src/components/highlight-slider/HighlightSlider.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { StyledHighlightSlider } from './HighlightSlider.styles';\nimport HighlightSliderItem, {\n    HighlightSliderItemColors,\n} from './highlight-slider-item/HighlightSliderItem';\n\nconst DEFAULT_HIGHLIGHT_SLIDER_COLORS: HighlightSliderItemColors = {\n    backgroundColor: '#E0E0E0',\n    fillColor: '#808080',\n};\n\nexport type HighlightSliderProps = {\n    /**\n     * The Colors of the slider.\n     */\n    colors?: HighlightSliderItemColors;\n    /**\n     * The total number of sections, that should be displayed.\n     */\n    count: number;\n    /**\n     * The current index.\n     */\n    currentIndex: number;\n    /**\n     * The duration of the animation of a single item in seconds.\n     */\n    duration?: number;\n    /**\n     * Function to be executed if the index has changed.\n     */\n    onIndexChange?: (index: number) => void;\n};\n\nconst HighlightSlider: FC<HighlightSliderProps> = ({\n    count,\n    colors = DEFAULT_HIGHLIGHT_SLIDER_COLORS,\n    onIndexChange,\n    currentIndex,\n    duration = 10,\n}) => {\n    const handleFinish = useCallback(\n        (index: number) => {\n            if (typeof onIndexChange === 'function') {\n                onIndexChange(index >= count - 1 ? 0 : index + 1);\n            }\n        },\n        [count, onIndexChange],\n    );\n\n    const handleClick = useCallback(\n        (index: number) => {\n            if (typeof onIndexChange === 'function') {\n                onIndexChange(index);\n            }\n        },\n        [onIndexChange],\n    );\n\n    const content = useMemo(\n        () =>\n            Array.from({ length: count }).map((value, index) => (\n                <HighlightSliderItem\n                    key={`highlight-slider-item--${value as number}`}\n                    index={index}\n                    duration={duration}\n                    colors={colors}\n                    isActive={currentIndex === index}\n                    isFinished={currentIndex > index}\n                    onClick={handleClick}\n                    onFinish={handleFinish}\n                />\n            )),\n        [colors, count, currentIndex, duration, handleClick, handleFinish],\n    );\n\n    return <StyledHighlightSlider>{content}</StyledHighlightSlider>;\n};\n\nHighlightSlider.displayName = 'HighlightSlider';\n\nexport default HighlightSlider;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACvD,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,OAAOC,mBAAmB,MAEnB,6CAA6C;AAEpD,MAAMC,+BAA0D,GAAG;EAC/DC,eAAe,EAAE,SAAS;EAC1BC,SAAS,EAAE;AACf,CAAC;AAyBD,MAAMC,eAAyC,GAAGA,CAAC;EAC/CC,KAAK;EACLC,MAAM,GAAGL,+BAA+B;EACxCM,aAAa;EACbC,YAAY;EACZC,QAAQ,GAAG;AACf,CAAC,KAAK;EACF,MAAMC,YAAY,GAAGb,WAAW,CAC3Bc,KAAa,IAAK;IACf,IAAI,OAAOJ,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACI,KAAK,IAAIN,KAAK,GAAG,CAAC,GAAG,CAAC,GAAGM,KAAK,GAAG,CAAC,CAAC;IACrD;EACJ,CAAC,EACD,CAACN,KAAK,EAAEE,aAAa,CACzB,CAAC;EAED,MAAMK,WAAW,GAAGf,WAAW,CAC1Bc,KAAa,IAAK;IACf,IAAI,OAAOJ,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACI,KAAK,CAAC;IACxB;EACJ,CAAC,EACD,CAACJ,aAAa,CAClB,CAAC;EAED,MAAMM,OAAO,GAAGf,OAAO,CACnB,MACIgB,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAEX;EAAM,CAAC,CAAC,CAACY,GAAG,CAAC,CAACC,KAAK,EAAEP,KAAK,kBAC3Cf,KAAA,CAAAuB,aAAA,CAACnB,mBAAmB;IAChBoB,GAAG,EAAE,0BAA0BF,KAAK,EAAa;IACjDP,KAAK,EAAEA,KAAM;IACbF,QAAQ,EAAEA,QAAS;IACnBH,MAAM,EAAEA,MAAO;IACfe,QAAQ,EAAEb,YAAY,KAAKG,KAAM;IACjCW,UAAU,EAAEd,YAAY,GAAGG,KAAM;IACjCY,OAAO,EAAEX,WAAY;IACrBY,QAAQ,EAAEd;EAAa,CAC1B,CACJ,CAAC,EACN,CAACJ,MAAM,EAAED,KAAK,EAAEG,YAAY,EAAEC,QAAQ,EAAEG,WAAW,EAAEF,YAAY,CACrE,CAAC;EAED,oBAAOd,KAAA,CAAAuB,aAAA,CAACpB,qBAAqB,QAAEc,OAA+B,CAAC;AACnE,CAAC;AAEDT,eAAe,CAACqB,WAAW,GAAG,iBAAiB;AAE/C,eAAerB,eAAe","ignoreList":[]}
+{"version":3,"file":"HighlightSlider.js","names":["React","useCallback","useMemo","StyledHighlightSlider","HighlightSliderItem","useKeyboardFocusHighlighting","useColorScheme","DEFAULT_HIGHLIGHT_SLIDER_COLORS","backgroundColor","fillColor","HighlightSlider","count","colors","onIndexChange","currentIndex","duration","shouldEnableKeyboardHighlighting","colorScheme","isInteractive","shouldEnableKeyboardHighlightingEffective","shouldShowKeyboardHighlighting","handleFinish","index","handleClick","content","Array","from","length","map","value","createElement","key","isActive","isFinished","onClick","onFinish","displayName"],"sources":["../../../../src/components/highlight-slider/HighlightSlider.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { StyledHighlightSlider } from './HighlightSlider.styles';\nimport HighlightSliderItem, {\n    HighlightSliderItemColors,\n} from './highlight-slider-item/HighlightSliderItem';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nconst DEFAULT_HIGHLIGHT_SLIDER_COLORS: HighlightSliderItemColors = {\n    backgroundColor: '#E0E0E0',\n    fillColor: '#808080',\n};\n\nexport type HighlightSliderProps = {\n    /**\n     * The Colors of the slider.\n     */\n    colors?: HighlightSliderItemColors;\n    /**\n     * The total number of sections, that should be displayed.\n     */\n    count: number;\n    /**\n     * The current index.\n     */\n    currentIndex: number;\n    /**\n     * The duration of the animation of a single item in seconds.\n     */\n    duration?: number;\n    /**\n     * Function to be executed if the index has changed.\n     */\n    onIndexChange?: (index: number) => void;\n    /**\n     * Enables keyboard-only focus highlighting for interactive slider items.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst HighlightSlider: FC<HighlightSliderProps> = ({\n    count,\n    colors = DEFAULT_HIGHLIGHT_SLIDER_COLORS,\n    onIndexChange,\n    currentIndex,\n    duration = 10,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const colorScheme = useColorScheme();\n    const isInteractive = typeof onIndexChange === 'function';\n    const shouldEnableKeyboardHighlightingEffective =\n        shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlightingEffective && isInteractive,\n    );\n\n    const handleFinish = useCallback(\n        (index: number) => {\n            if (typeof onIndexChange === 'function') {\n                onIndexChange(index >= count - 1 ? 0 : index + 1);\n            }\n        },\n        [count, onIndexChange],\n    );\n\n    const handleClick = useCallback(\n        (index: number) => {\n            if (typeof onIndexChange === 'function') {\n                onIndexChange(index);\n            }\n        },\n        [onIndexChange],\n    );\n\n    const content = useMemo(\n        () =>\n            Array.from({ length: count }).map((value, index) => (\n                <HighlightSliderItem\n                    key={`highlight-slider-item--${value as number}`}\n                    index={index}\n                    duration={duration}\n                    colors={colors}\n                    isActive={currentIndex === index}\n                    isFinished={currentIndex > index}\n                    onClick={handleClick}\n                    onFinish={handleFinish}\n                    shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlightingEffective}\n                    shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                    isInteractive={isInteractive}\n                />\n            )),\n        [\n            colors,\n            count,\n            currentIndex,\n            duration,\n            handleClick,\n            handleFinish,\n            shouldEnableKeyboardHighlightingEffective,\n            shouldShowKeyboardHighlighting,\n            isInteractive,\n        ],\n    );\n\n    return <StyledHighlightSlider>{content}</StyledHighlightSlider>;\n};\n\nHighlightSlider.displayName = 'HighlightSlider';\n\nexport default HighlightSlider;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACvD,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,OAAOC,mBAAmB,MAEnB,6CAA6C;AACpD,SAASC,4BAA4B,QAAQ,0CAA0C;AACvF,SAASC,cAAc,QAAQ,8CAA8C;AAE7E,MAAMC,+BAA0D,GAAG;EAC/DC,eAAe,EAAE,SAAS;EAC1BC,SAAS,EAAE;AACf,CAAC;AA6BD,MAAMC,eAAyC,GAAGA,CAAC;EAC/CC,KAAK;EACLC,MAAM,GAAGL,+BAA+B;EACxCM,aAAa;EACbC,YAAY;EACZC,QAAQ,GAAG,EAAE;EACbC;AACJ,CAAC,KAAK;EACF,MAAMC,WAAW,GAAGX,cAAc,CAAC,CAAC;EACpC,MAAMY,aAAa,GAAG,OAAOL,aAAa,KAAK,UAAU;EACzD,MAAMM,yCAAyC,GAC3CH,gCAAgC,IAAIC,WAAW,EAAED,gCAAgC,IAAI,KAAK;EAC9F,MAAMI,8BAA8B,GAAGf,4BAA4B,CAC/Dc,yCAAyC,IAAID,aACjD,CAAC;EAED,MAAMG,YAAY,GAAGpB,WAAW,CAC3BqB,KAAa,IAAK;IACf,IAAI,OAAOT,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACS,KAAK,IAAIX,KAAK,GAAG,CAAC,GAAG,CAAC,GAAGW,KAAK,GAAG,CAAC,CAAC;IACrD;EACJ,CAAC,EACD,CAACX,KAAK,EAAEE,aAAa,CACzB,CAAC;EAED,MAAMU,WAAW,GAAGtB,WAAW,CAC1BqB,KAAa,IAAK;IACf,IAAI,OAAOT,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACS,KAAK,CAAC;IACxB;EACJ,CAAC,EACD,CAACT,aAAa,CAClB,CAAC;EAED,MAAMW,OAAO,GAAGtB,OAAO,CACnB,MACIuB,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAEhB;EAAM,CAAC,CAAC,CAACiB,GAAG,CAAC,CAACC,KAAK,EAAEP,KAAK,kBAC3CtB,KAAA,CAAA8B,aAAA,CAAC1B,mBAAmB;IAChB2B,GAAG,EAAE,0BAA0BF,KAAK,EAAa;IACjDP,KAAK,EAAEA,KAAM;IACbP,QAAQ,EAAEA,QAAS;IACnBH,MAAM,EAAEA,MAAO;IACfoB,QAAQ,EAAElB,YAAY,KAAKQ,KAAM;IACjCW,UAAU,EAAEnB,YAAY,GAAGQ,KAAM;IACjCY,OAAO,EAAEX,WAAY;IACrBY,QAAQ,EAAEd,YAAa;IACvBL,gCAAgC,EAAEG,yCAA0C;IAC5EC,8BAA8B,EAAEA,8BAA+B;IAC/DF,aAAa,EAAEA;EAAc,CAChC,CACJ,CAAC,EACN,CACIN,MAAM,EACND,KAAK,EACLG,YAAY,EACZC,QAAQ,EACRQ,WAAW,EACXF,YAAY,EACZF,yCAAyC,EACzCC,8BAA8B,EAC9BF,aAAa,CAErB,CAAC;EAED,oBAAOlB,KAAA,CAAA8B,aAAA,CAAC3B,qBAAqB,QAAEqB,OAA+B,CAAC;AACnE,CAAC;AAEDd,eAAe,CAAC0B,WAAW,GAAG,iBAAiB;AAE/C,eAAe1B,eAAe","ignoreList":[]}

package/lib/esm/components/highlight-slider/highlight-slider-item/HighlightSliderItem.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { StyledHighlightSliderItem, StyledHighlightSliderItemBackground, StyledHighlightSliderItemProgress } from './HighlightSliderItem.styles';
 import { StyledProgressBarProgressWrapper } from '../../progress-bar/ProgressBar.styles';
 import { useUuid } from '../../../hooks/uuid';
@@ -9,11 +9,28 @@ const HighlightSliderItem = ({
   onFinish,
   index,
   onClick,
-  duration
+  duration,
+  isInteractive,
+  shouldEnableKeyboardHighlighting,
+  shouldShowKeyboardHighlighting = false
 }) => {
   const uuid = useUuid();
+  const isKeyboardFocusable = isInteractive && shouldEnableKeyboardHighlighting;
+  const handleKeyDown = useCallback(event => {
+    if (!isInteractive) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick(index);
+    }
+  }, [index, isInteractive, onClick]);
   return /*#__PURE__*/React.createElement(StyledHighlightSliderItem, {
-    onClick: () => onClick(index)
+    onClick: isInteractive ? () => onClick(index) : undefined,
+    onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
+    tabIndex: isKeyboardFocusable ? 0 : -1,
+    role: isInteractive ? 'button' : undefined,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
   }, /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, isActive && /*#__PURE__*/React.createElement(StyledHighlightSliderItemProgress, {
     key: `highlight-slider-item-active--${uuid}`,
     initial: {