npm - @chayns-components/core - Versions diffs - 5.3.9 → 5.3.11-alpha.0 - Mend

@chayns-components/core 5.3.9 → 5.3.11-alpha.0

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

Files changed (495) hide show

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"GridImage.js","names":["React","useCallback","useState","StyledGridBottomRightImage","StyledGridImage","StyledGridLeftImage","StyledGridTopRightImage","GridImage","background","images","shouldShowRoundImage","size","onClick","hasLoadedLeftImage","setHasLoadedLeftImage","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","$background","$shouldShowRoundImage","$size","undefined","$isHidden","onLoad","src","displayName"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, { CSSProperties, FC, MouseEventHandler, useCallback, useState } from 'react';\nimport {\n StyledGridBottomRightImage,\n StyledGridImage,\n StyledGridLeftImage,\n StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n /*\n The background color of the image.\n /\n background?: CSSProperties['background'];\n /\n The images to be displayed in the `GridImage`. Only the first three images are displayed.\n /\n images: string[];\n /\n Function to be executed when the images are clicked.\n /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /\n Images of users should always be displayed in a round shape. Therefore, this property can be set to true.\n /\n shouldShowRoundImage?: boolean;\n /\n The size of the `GridImage` in pixels, which is set as both width and height.\n */\n size: number;\n};\n\nconst GridImage: FC<GridImageProps> = ({\n background,\n images,\n shouldShowRoundImage,\n size,\n onClick,\n}) => {\n const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n const isGridImageHidden =\n !hasLoadedLeftImage \|\| !hasLoadedTopRightImage \|\| !hasLoadedBottomRightImage;\n\n return (\n <StyledGridImage\n $background={background}\n $shouldShowRoundImage={shouldShowRoundImage}\n $size={size}\n onClick={~~typeof~~ onClick ~~===~~ ~~'function'~~ ? ~~onClick~~ : undefined}\n >\n <StyledGridLeftImage\n $isHidden={isGridImageHidden}\n onLoad={handleLeftImageLoaded}\n $size={size}\n src={images[0]}\n />\n <StyledGridTopRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleTopRightImageLoaded}\n $size={size}\n src={images[1]}\n />\n <StyledGridBottomRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleBottomRightImageLoaded}\n src={images[2]}\n />\n </StyledGridImage>\n );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"AAAA,OAAOA,KAAK,~~IAA0CC~~,WAAW,~~EAAEC~~,QAAQ,~~QAAQ~~,OAAO;~~AAC1F~~,SACIC,0BAA0B,EAC1BC,eAAe,EACfC,mBAAmB,EACnBC,uBAAuB,QACpB,oBAAoB;~~AAyB3B~~,MAAMC,SAA6B,GAAGA,CAAC;EACnCC,UAAU;EACVC,MAAM;EACNC,oBAAoB;EACpBC,IAAI;EACJC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,kBAAkB,EAAEC,qBAAqB,CAAC,~~GAAGZ~~,QAAQ,CAAC,KAAK,CAAC;EACnE,MAAM,~~CAACa~~,sBAAsB,EAAEC,yBAAyB,CAAC,~~GAAGd~~,QAAQ,CAAC,KAAK,CAAC;EAC3E,MAAM,~~CAACe~~,yBAAyB,EAAEC,4BAA4B,CAAC,~~GAAGhB~~,QAAQ,CAAC,KAAK,CAAC;EAEjF,~~MAAMiB~~,qBAAqB,~~GAAGlB~~,WAAW,CAAC,~~MAAMa~~,qBAAqB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAEhF,~~MAAMM~~,yBAAyB,~~GAAGnB~~,WAAW,CAAC,~~MAAMe~~,yBAAyB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAExF,~~MAAMK~~,4BAA4B,~~GAAGpB~~,WAAW,CAAC,~~MAAMiB~~,4BAA4B,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAE9F,~~MAAMI~~,iBAAiB,GACnB,~~CAACT~~,kBAAkB,IAAI,CAACE,sBAAsB,IAAI,CAACE,yBAAyB;EAEhF,~~oBACIjB~~,KAAA,~~CAAAuB~~,aAAA,~~CAACnB~~,eAAe;~~IACZoB~~,WAAW,~~EAAEhB~~,UAAW;~~IACxBiB~~,qBAAqB,~~EAAEf~~,oBAAqB;~~IAC5CgB~~,KAAK,~~EAAEf~~,IAAK;IACZC,OAAO,~~EAAE~~,~~OAAOA~~,OAAO,~~KAAK~~,~~UAAU~~,~~GAAGA~~,~~OAAO~~,~~GAAGe~~;EAAU,~~gBAE7D3B~~,KAAA,~~CAAAuB~~,aAAA,~~CAAClB~~,mBAAmB;~~IAChBuB~~,SAAS,~~EAAEN~~,iBAAkB;~~IAC7BO~~,MAAM,~~EAAEV~~,qBAAsB;~~IAC9BO~~,KAAK,~~EAAEf~~,IAAK;~~IACZmB~~,GAAG,~~EAAErB~~,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,~~eACFT~~,KAAA,~~CAAAuB~~,aAAA,~~CAACjB~~,uBAAuB;~~IACpBsB~~,SAAS,~~EAAEN~~,iBAAkB;~~IAC7BO~~,MAAM,~~EAAET~~,yBAA0B;~~IAClCM~~,KAAK,~~EAAEf~~,IAAK;~~IACZmB~~,GAAG,~~EAAErB~~,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,~~eACFT~~,KAAA,~~CAAAuB~~,aAAA,~~CAACpB~~,0BAA0B;~~IACvByB~~,SAAS,~~EAAEN~~,iBAAkB;~~IAC7BO~~,MAAM,~~EAAER~~,4BAA6B;~~IACrCS~~,GAAG,~~EAAErB~~,MAAM,CAAC,CAAC;EAAE,CAClB,CACY,CAAC;AAE1B,CAAC;AAEDF,SAAS,~~CAACwB~~,WAAW,GAAG,WAAW;AAEnC,~~eAAexB~~,SAAS","ignoreList":[]}
1	+ {"version":3,"file":"GridImage.js","names":["React","useCallback","useState","useKeyboardFocusHighlighting","StyledGridBottomRightImage","StyledGridImage","StyledGridLeftImage","StyledGridTopRightImage","GridImage","background","images","shouldShowRoundImage","size","onClick","shouldEnableKeyboardHighlighting","hasLoadedLeftImage","setHasLoadedLeftImage","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","handleKeyDown","event","key","preventDefault","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","$background","$shouldShowRoundImage","$shouldShowKeyboardHighlighting","$size","undefined","onKeyDown","tabIndex","role","$isHidden","onLoad","src","displayName"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n KeyboardEventHandler,\n MouseEventHandler,\n MouseEvent,\n SyntheticEvent,\n useCallback,\n useState,\n} from 'react';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport {\n StyledGridBottomRightImage,\n StyledGridImage,\n StyledGridLeftImage,\n StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n /*\n The background color of the image.\n /\n background?: CSSProperties['background'];\n /\n The images to be displayed in the `GridImage`. Only the first three images are displayed.\n /\n images: string[];\n /\n Function to be executed when the images are clicked.\n /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /\n Images of users should always be displayed in a round shape. Therefore, this property can be set to true.\n /\n shouldShowRoundImage?: boolean;\n /\n The size of the `GridImage` in pixels, which is set as both width and height.\n /\n size: number;\n /\n Enables keyboard-only focus highlighting for clickable GridImage instances.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst GridImage: FC<GridImageProps> = ({\n background,\n images,\n shouldShowRoundImage,\n size,\n onClick,\n shouldEnableKeyboardHighlighting,\n}) => {\n const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n const isClickable = typeof onClick === 'function';\n const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlighting;\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (!isClickable) {\n return;\n }\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n }\n },\n [isClickable, onClick],\n );\n\n const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n const isGridImageHidden =\n !hasLoadedLeftImage \|\| !hasLoadedTopRightImage \|\| !hasLoadedBottomRightImage;\n\n return (\n <StyledGridImage\n $background={background}\n $shouldShowRoundImage={shouldShowRoundImage}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n $size={size}\n onClick={isClickable ? onClick : undefined}\n onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n tabIndex={isKeyboardFocusable ? 0 : -1}\n role={isClickable ? 'button' : undefined}\n >\n <StyledGridLeftImage\n $isHidden={isGridImageHidden}\n onLoad={handleLeftImageLoaded}\n $size={size}\n src={images[0]}\n />\n <StyledGridTopRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleTopRightImageLoaded}\n $size={size}\n src={images[1]}\n />\n <StyledGridBottomRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleBottomRightImageLoaded}\n src={images[2]}\n />\n </StyledGridImage>\n );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"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","ignoreList":[]}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	@@ -1 +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":[]}
1	+ {"version":3,"file":"HighlightSlider.js","names":["React","useCallback","useMemo","StyledHighlightSlider","HighlightSliderItem","useKeyboardFocusHighlighting","DEFAULT_HIGHLIGHT_SLIDER_COLORS","backgroundColor","fillColor","HighlightSlider","count","colors","onIndexChange","currentIndex","duration","shouldEnableKeyboardHighlighting","isInteractive","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';\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 isInteractive = typeof onIndexChange === 'function';\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && 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={shouldEnableKeyboardHighlighting}\n shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n isInteractive={isInteractive}\n />\n )),\n [\n colors,\n count,\n currentIndex,\n duration,\n handleClick,\n handleFinish,\n shouldEnableKeyboardHighlighting,\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;AAEvF,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,aAAa,GAAG,OAAOJ,aAAa,KAAK,UAAU;EACzD,MAAMK,8BAA8B,GAAGZ,4BAA4B,CAC/DU,gCAAgC,IAAIC,aACxC,CAAC;EAED,MAAME,YAAY,GAAGjB,WAAW,CAC3BkB,KAAa,IAAK;IACf,IAAI,OAAOP,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACO,KAAK,IAAIT,KAAK,GAAG,CAAC,GAAG,CAAC,GAAGS,KAAK,GAAG,CAAC,CAAC;IACrD;EACJ,CAAC,EACD,CAACT,KAAK,EAAEE,aAAa,CACzB,CAAC;EAED,MAAMQ,WAAW,GAAGnB,WAAW,CAC1BkB,KAAa,IAAK;IACf,IAAI,OAAOP,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACO,KAAK,CAAC;IACxB;EACJ,CAAC,EACD,CAACP,aAAa,CAClB,CAAC;EAED,MAAMS,OAAO,GAAGnB,OAAO,CACnB,MACIoB,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAEd;EAAM,CAAC,CAAC,CAACe,GAAG,CAAC,CAACC,KAAK,EAAEP,KAAK,kBAC3CnB,KAAA,CAAA2B,aAAA,CAACvB,mBAAmB;IAChBwB,GAAG,EAAE,0BAA0BF,KAAK,EAAa;IACjDP,KAAK,EAAEA,KAAM;IACbL,QAAQ,EAAEA,QAAS;IACnBH,MAAM,EAAEA,MAAO;IACfkB,QAAQ,EAAEhB,YAAY,KAAKM,KAAM;IACjCW,UAAU,EAAEjB,YAAY,GAAGM,KAAM;IACjCY,OAAO,EAAEX,WAAY;IACrBY,QAAQ,EAAEd,YAAa;IACvBH,gCAAgC,EAAEA,gCAAiC;IACnEE,8BAA8B,EAAEA,8BAA+B;IAC/DD,aAAa,EAAEA;EAAc,CAChC,CACJ,CAAC,EACN,CACIL,MAAM,EACND,KAAK,EACLG,YAAY,EACZC,QAAQ,EACRM,WAAW,EACXF,YAAY,EACZH,gCAAgC,EAChCE,8BAA8B,EAC9BD,aAAa,CAErB,CAAC;EAED,oBAAOhB,KAAA,CAAA2B,aAAA,CAACxB,qBAAqB,QAAEkB,OAA+B,CAAC;AACnE,CAAC;AAEDZ,eAAe,CAACwB,WAAW,GAAG,iBAAiB;AAE/C,eAAexB,eAAe","ignoreList":[]}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HighlightSliderItem.js","names":["React","StyledHighlightSliderItem","StyledHighlightSliderItemBackground","StyledHighlightSliderItemProgress","StyledProgressBarProgressWrapper","useUuid","HighlightSliderItem","colors","isActive","isFinished","onFinish","index","onClick","duration","uuid","~~createElement~~","key","initial","width","left","animate","exit","onAnimationComplete","$backgroundColor","fillColor","transition","ease","style","backgroundColor","displayName"],"sources":["../../../../../src/components/highlight-slider/highlight-slider-item/HighlightSliderItem.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport {\n StyledHighlightSliderItem,\n StyledHighlightSliderItemBackground,\n StyledHighlightSliderItemProgress,\n} from './HighlightSliderItem.styles';\nimport { StyledProgressBarProgressWrapper } from '../../progress-bar/ProgressBar.styles';\nimport { useUuid } from '../../../hooks/uuid';\n\nexport interface HighlightSliderItemColors {\n backgroundColor: string;\n fillColor: string;\n}\n\nexport type HighlightSliderItemProps = {\n index: number;\n isActive: boolean;\n isFinished: boolean;\n onClick: (index: number) => void;\n onFinish: (index: number) => void;\n duration: number;\n colors: HighlightSliderItemColors;\n};\n\nconst HighlightSliderItem: FC<HighlightSliderItemProps> = ({\n colors,\n isActive,\n isFinished,\n onFinish,\n index,\n onClick,\n duration,\n}) => {\n const uuid = useUuid();\n\n return (\n <StyledHighlightSliderItem onClick={() => onClick(index)}>\n <StyledProgressBarProgressWrapper>\n {isActive && (\n <StyledHighlightSliderItemProgress\n key={`highlight-slider-item-active--${uuid}`}\n initial={{ width: '100%', left: '-100%' }}\n animate={{ width: '100%', left: '0%' }}\n exit={{ width: '100%', left: '0%' }}\n onAnimationComplete={() => onFinish(index)}\n $backgroundColor={colors.fillColor}\n transition={{\n ease: 'linear',\n duration,\n }}\n />\n )}\n {isFinished && (\n <StyledHighlightSliderItemProgress\n key={`highlight-slider-item-finished--${uuid}`}\n style={{ width: '100%', left: '0%' }}\n $backgroundColor={colors.fillColor}\n />\n )}\n <StyledHighlightSliderItemBackground $backgroundColor={colors.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n </StyledHighlightSliderItem>\n );\n};\n\nHighlightSliderItem.displayName = 'HighlightSliderItem';\n\nexport default HighlightSliderItem;\n"],"mappings":"AAAA,OAAOA,KAAK,~~MAAc~~,OAAO;~~AACjC~~,SACIC,yBAAyB,EACzBC,mCAAmC,EACnCC,iCAAiC,QAC9B,8BAA8B;AACrC,SAASC,gCAAgC,QAAQ,uCAAuC;AACxF,SAASC,OAAO,QAAQ,qBAAqB;~~AAiB7C~~,MAAMC,mBAAiD,GAAGA,CAAC;EACvDC,MAAM;EACNC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EACRC,KAAK;EACLC,OAAO;EACPC;~~AACJ~~,CAAC,KAAK;EACF,MAAMC,IAAI,~~GAAGT~~,OAAO,CAAC,CAAC;~~EAEtB~~,~~oBACIL~~,KAAA,~~CAAAe~~,aAAA,~~CAACd~~,yBAAyB;~~IAACW~~,OAAO,~~EAAEA~~,~~CAAA~~,~~KAAMA~~,OAAO,CAACD,KAAK;~~EAAE~~,~~gBACrDX~~,KAAA,~~CAAAe~~,aAAA,~~CAACX~~,gCAAgC,QAC5BI,QAAQ,~~iBACLR~~,KAAA,~~CAAAe~~,aAAA,~~CAACZ~~,iCAAiC;~~IAC9Ba~~,GAAG,EAAE,~~iCAAiCF~~,IAAI,EAAG;~~IAC7CG~~,OAAO,EAAE;MAAEC,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC1CC,OAAO,EAAE;MAAEF,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACvCE,IAAI,EAAE;MAAEH,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACpCG,mBAAmB,EAAEA,CAAA,~~KAAMZ~~,QAAQ,CAACC,KAAK,CAAE;~~IAC3CY~~,gBAAgB,~~EAAEhB~~,MAAM,~~CAACiB~~,SAAU;IACnCC,UAAU,EAAE;MACRC,IAAI,EAAE,QAAQ;~~MACdb~~;IACJ;EAAE,CACL,CACJ,EACAJ,UAAU,~~iBACPT~~,KAAA,~~CAAAe~~,aAAA,~~CAACZ~~,iCAAiC;~~IAC9Ba~~,GAAG,EAAE,~~mCAAmCF~~,IAAI,EAAG;IAC/Ca,KAAK,EAAE;MAAET,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACrCI,gBAAgB,~~EAAEhB~~,MAAM,~~CAACiB~~;EAAU,CACtC,CACJ,~~eACDxB~~,KAAA,~~CAAAe~~,aAAA,~~CAACb~~,mCAAmC;~~IAACqB~~,gBAAgB,~~EAAEhB~~,MAAM,~~CAACqB~~;EAAgB,CAAE,CAClD,CACX,CAAC;AAEpC,CAAC;~~AAEDtB~~,mBAAmB,~~CAACuB~~,WAAW,GAAG,qBAAqB;AAEvD,~~eAAevB~~,mBAAmB","ignoreList":[]}
1	+ {"version":3,"file":"HighlightSliderItem.js","names":["React","useCallback","StyledHighlightSliderItem","StyledHighlightSliderItemBackground","StyledHighlightSliderItemProgress","StyledProgressBarProgressWrapper","useUuid","HighlightSliderItem","colors","isActive","isFinished","onFinish","index","onClick","duration","isInteractive","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","uuid","isKeyboardFocusable","handleKeyDown","event","key","preventDefault","createElement","undefined","onKeyDown","tabIndex","role","$shouldShowKeyboardHighlighting","initial","width","left","animate","exit","onAnimationComplete","$backgroundColor","fillColor","transition","ease","style","backgroundColor","displayName"],"sources":["../../../../../src/components/highlight-slider/highlight-slider-item/HighlightSliderItem.tsx"],"sourcesContent":["import React, { FC, KeyboardEventHandler, useCallback } from 'react';\nimport {\n StyledHighlightSliderItem,\n StyledHighlightSliderItemBackground,\n StyledHighlightSliderItemProgress,\n} from './HighlightSliderItem.styles';\nimport { StyledProgressBarProgressWrapper } from '../../progress-bar/ProgressBar.styles';\nimport { useUuid } from '../../../hooks/uuid';\n\nexport interface HighlightSliderItemColors {\n backgroundColor: string;\n fillColor: string;\n}\n\nexport type HighlightSliderItemProps = {\n index: number;\n isActive: boolean;\n isFinished: boolean;\n onClick: (index: number) => void;\n onFinish: (index: number) => void;\n duration: number;\n colors: HighlightSliderItemColors;\n isInteractive: boolean;\n shouldEnableKeyboardHighlighting?: boolean;\n shouldShowKeyboardHighlighting?: boolean;\n};\n\nconst HighlightSliderItem: FC<HighlightSliderItemProps> = ({\n colors,\n isActive,\n isFinished,\n onFinish,\n index,\n onClick,\n duration,\n isInteractive,\n shouldEnableKeyboardHighlighting,\n shouldShowKeyboardHighlighting = false,\n}) => {\n const uuid = useUuid();\n const isKeyboardFocusable = isInteractive && shouldEnableKeyboardHighlighting;\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (!isInteractive) {\n return;\n }\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n onClick(index);\n }\n },\n [index, isInteractive, onClick],\n );\n\n return (\n <StyledHighlightSliderItem\n onClick={isInteractive ? () => onClick(index) : undefined}\n onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n tabIndex={isKeyboardFocusable ? 0 : -1}\n role={isInteractive ? 'button' : undefined}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n >\n <StyledProgressBarProgressWrapper>\n {isActive && (\n <StyledHighlightSliderItemProgress\n key={`highlight-slider-item-active--${uuid}`}\n initial={{ width: '100%', left: '-100%' }}\n animate={{ width: '100%', left: '0%' }}\n exit={{ width: '100%', left: '0%' }}\n onAnimationComplete={() => onFinish(index)}\n $backgroundColor={colors.fillColor}\n transition={{\n ease: 'linear',\n duration,\n }}\n />\n )}\n {isFinished && (\n <StyledHighlightSliderItemProgress\n key={`highlight-slider-item-finished--${uuid}`}\n style={{ width: '100%', left: '0%' }}\n $backgroundColor={colors.fillColor}\n />\n )}\n <StyledHighlightSliderItemBackground $backgroundColor={colors.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n </StyledHighlightSliderItem>\n );\n};\n\nHighlightSliderItem.displayName = 'HighlightSliderItem';\n\nexport default HighlightSliderItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAA8BC,WAAW,QAAQ,OAAO;AACpE,SACIC,yBAAyB,EACzBC,mCAAmC,EACnCC,iCAAiC,QAC9B,8BAA8B;AACrC,SAASC,gCAAgC,QAAQ,uCAAuC;AACxF,SAASC,OAAO,QAAQ,qBAAqB;AAoB7C,MAAMC,mBAAiD,GAAGA,CAAC;EACvDC,MAAM;EACNC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EACRC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,aAAa;EACbC,gCAAgC;EAChCC,8BAA8B,GAAG;AACrC,CAAC,KAAK;EACF,MAAMC,IAAI,GAAGZ,OAAO,CAAC,CAAC;EACtB,MAAMa,mBAAmB,GAAGJ,aAAa,IAAIC,gCAAgC;EAE7E,MAAMI,aAAa,GAAGnB,WAAW,CAC5BoB,KAAK,IAAK;IACP,IAAI,CAACN,aAAa,EAAE;MAChB;IACJ;IAEA,IAAIM,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC5CD,KAAK,CAACE,cAAc,CAAC,CAAC;MACtBV,OAAO,CAACD,KAAK,CAAC;IAClB;EACJ,CAAC,EACD,CAACA,KAAK,EAAEG,aAAa,EAAEF,OAAO,CAClC,CAAC;EAED,oBACIb,KAAA,CAAAwB,aAAA,CAACtB,yBAAyB;IACtBW,OAAO,EAAEE,aAAa,GAAG,MAAMF,OAAO,CAACD,KAAK,CAAC,GAAGa,SAAU;IAC1DC,SAAS,EAAEP,mBAAmB,GAAGC,aAAa,GAAGK,SAAU;IAC3DE,QAAQ,EAAER,mBAAmB,GAAG,CAAC,GAAG,CAAC,CAAE;IACvCS,IAAI,EAAEb,aAAa,GAAG,QAAQ,GAAGU,SAAU;IAC3CI,+BAA+B,EAAEZ;EAA+B,gBAEhEjB,KAAA,CAAAwB,aAAA,CAACnB,gCAAgC,QAC5BI,QAAQ,iBACLT,KAAA,CAAAwB,aAAA,CAACpB,iCAAiC;IAC9BkB,GAAG,EAAE,iCAAiCJ,IAAI,EAAG;IAC7CY,OAAO,EAAE;MAAEC,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC1CC,OAAO,EAAE;MAAEF,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACvCE,IAAI,EAAE;MAAEH,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACpCG,mBAAmB,EAAEA,CAAA,KAAMxB,QAAQ,CAACC,KAAK,CAAE;IAC3CwB,gBAAgB,EAAE5B,MAAM,CAAC6B,SAAU;IACnCC,UAAU,EAAE;MACRC,IAAI,EAAE,QAAQ;MACdzB;IACJ;EAAE,CACL,CACJ,EACAJ,UAAU,iBACPV,KAAA,CAAAwB,aAAA,CAACpB,iCAAiC;IAC9BkB,GAAG,EAAE,mCAAmCJ,IAAI,EAAG;IAC/CsB,KAAK,EAAE;MAAET,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACrCI,gBAAgB,EAAE5B,MAAM,CAAC6B;EAAU,CACtC,CACJ,eACDrC,KAAA,CAAAwB,aAAA,CAACrB,mCAAmC;IAACiC,gBAAgB,EAAE5B,MAAM,CAACiC;EAAgB,CAAE,CAClD,CACX,CAAC;AAEpC,CAAC;AAEDlC,mBAAmB,CAACmC,WAAW,GAAG,qBAAqB;AAEvD,eAAenC,mBAAmB","ignoreList":[]}

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

@@ -1,5 +1,6 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { motion } from 'motion/react';
+import { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';
 export const StyledHighlightSliderItem = styled.div`
     overflow: hidden;
     position: relative;
@@ -7,6 +8,14 @@ export const StyledHighlightSliderItem = styled.div`
     height: 4px;
     border-radius: 4px;
     cursor: pointer;
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible {
+                ${keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 export const StyledHighlightSliderItemProgress = styled(motion.div)`
     height: 4px;

package/lib/esm/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HighlightSliderItem.styles.js","names":["styled","motion","StyledHighlightSliderItem","div","StyledHighlightSliderItemProgress","$backgroundColor","StyledHighlightSliderItemBackground"],"sources":["../../../../../src/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { motion } from 'motion/react';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledHighlightSliderItem = styled.div`\n overflow: hidden;\n position: relative;\n width: 100%;\n height: 4px;\n border-radius: 4px;\n cursor: pointer;\n`;\ntype StyledHighlightSliderItemProgressProps = WithTheme<{ $backgroundColor: string }>;\n\nexport const StyledHighlightSliderItemProgress = styled(\n motion.div,\n)<StyledHighlightSliderItemProgressProps>`\n height: 4px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n background-color: ${({ $backgroundColor }: StyledHighlightSliderItemProgressProps) =>\n $backgroundColor};\n`;\n\ntype StyledHighlightSliderItemBackgroundProps = WithTheme<{ $backgroundColor: string }>;\n\nexport const StyledHighlightSliderItemBackground = styled(\n motion.div,\n)<StyledHighlightSliderItemBackgroundProps>`\n height: 4px;\n width: 100%;\n border-radius: 2px;\n background-color: ${({ $backgroundColor }: StyledHighlightSliderItemBackgroundProps) =>\n $backgroundColor};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,~~MAAM~~,mBAAmB;~~AACtC~~,SAASC,MAAM,QAAQ,cAAc;~~AAGrC~~,OAAO,MAAMC,yBAAyB,~~GAAGF~~,MAAM,~~CAACG~~,~~GAAG~~;~~AACnD~~;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAGD,OAAO,~~MAAMC~~,iCAAiC,~~GAAGJ~~,MAAM,~~CACnDC~~,MAAM,~~CAACE~~,GACX,CAAyC;AACzC;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;~~EAAEE~~;AAAyD,CAAC,KAC7EA,gBAAgB;AACxB,CAAC;AAID,OAAO,MAAMC,mCAAmC,~~GAAGN~~,MAAM,~~CACrDC~~,MAAM,~~CAACE~~,GACX,CAA2C;AAC3C;AACA;AACA;AACA,wBAAwB,CAAC;~~EAAEE~~;AAA2D,CAAC,KAC/EA,gBAAgB;AACxB,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"HighlightSliderItem.styles.js","names":["styled","css","motion","keyboardFocusHighlightingRingCss","StyledHighlightSliderItem","div","$shouldShowKeyboardHighlighting","StyledHighlightSliderItemProgress","$backgroundColor","StyledHighlightSliderItemBackground"],"sources":["../../../../../src/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { motion } from 'motion/react';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledHighlightSliderItemProps = {\n $shouldShowKeyboardHighlighting?: boolean;\n};\n\nexport const StyledHighlightSliderItem = styled.div<StyledHighlightSliderItemProps>`\n overflow: hidden;\n position: relative;\n width: 100%;\n height: 4px;\n border-radius: 4px;\n cursor: pointer;\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n ${keyboardFocusHighlightingRingCss}\n }\n `}\n`;\ntype StyledHighlightSliderItemProgressProps = WithTheme<{ $backgroundColor: string }>;\n\nexport const StyledHighlightSliderItemProgress = styled(\n motion.div,\n)<StyledHighlightSliderItemProgressProps>`\n height: 4px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n background-color: ${({ $backgroundColor }: StyledHighlightSliderItemProgressProps) =>\n $backgroundColor};\n`;\n\ntype StyledHighlightSliderItemBackgroundProps = WithTheme<{ $backgroundColor: string }>;\n\nexport const StyledHighlightSliderItemBackground = styled(\n motion.div,\n)<StyledHighlightSliderItemBackgroundProps>`\n height: 4px;\n width: 100%;\n border-radius: 2px;\n background-color: ${({ $backgroundColor }: StyledHighlightSliderItemBackgroundProps) =>\n $backgroundColor};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,MAAM,QAAQ,cAAc;AAErC,SAASC,gCAAgC,QAAQ,iDAAiD;AAMlG,OAAO,MAAMC,yBAAyB,GAAGJ,MAAM,CAACK,GAAmC;AACnF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCA,+BAA+B,IAC/BL,GAAG;AACX;AACA,kBAAkBE,gCAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAGD,OAAO,MAAMI,iCAAiC,GAAGP,MAAM,CACnDE,MAAM,CAACG,GACX,CAAyC;AACzC;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEG;AAAyD,CAAC,KAC7EA,gBAAgB;AACxB,CAAC;AAID,OAAO,MAAMC,mCAAmC,GAAGT,MAAM,CACrDE,MAAM,CAACG,GACX,CAA2C;AAC3C;AACA;AACA;AACA,wBAAwB,CAAC;EAAEG;AAA2D,CAAC,KAC/EA,gBAAgB;AACxB,CAAC","ignoreList":[]}

package/lib/esm/components/icon/Icon.js CHANGED Viewed

@@ -1,7 +1,9 @@
 import clsx from 'clsx';
 import React from 'react';
 import { getStackSizeFactor } from '../../utils/icon';
-import { StyledIcon, StyledIconWrapper } from './Icon.styles';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
+import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
+import { StyledIcon as StyledIconElement, StyledIconWrapper } from './Icon.styles';
 import { useTheme } from 'styled-components';
 const Icon = ({
   className,
@@ -13,9 +15,14 @@ const Icon = ({
   onMouseDown,
   tabIndex,
   size = 15,
-  shouldStopPropagation
+  shouldStopPropagation,
+  shouldEnableKeyboardHighlighting
 }) => {
   const theme = useTheme();
+  const colorScheme = useColorScheme();
+  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
+  const isClickable = typeof onClick === 'function' && !isDisabled;
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlightingEffective && isClickable);
   const handleClick = event => {
     if (shouldStopPropagation) {
       event.stopPropagation();
@@ -32,6 +39,15 @@ const Icon = ({
       onDoubleClick(event);
     }
   };
+  const handleKeyDown = event => {
+    if (!isClickable) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleClick(event);
+    }
+  };
   let maxStackSizeFactor = 1;
   icons.forEach(icon => {
     const stackSizeFactor = getStackSizeFactor(icon);
@@ -42,14 +58,17 @@ const Icon = ({
   const shouldUseStackedIcon = icons.length > 1;
   const wrapperClasses = clsx('beta-chayns-icon', shouldUseStackedIcon ? 'fa-stack' : '', className);
   return /*#__PURE__*/React.createElement(StyledIconWrapper, {
-    tabIndex: tabIndex,
+    tabIndex: shouldEnableKeyboardHighlightingEffective && isClickable ? tabIndex ?? 0 : tabIndex,
     className: wrapperClasses,
     $isDisabled: isDisabled,
-    onClick: typeof onClick === 'function' && !isDisabled ? handleClick : undefined,
-    $isOnClick: typeof onClick === 'function' && !isDisabled,
+    onClick: isClickable ? handleClick : undefined,
+    $isOnClick: isClickable,
     onDoubleClick: typeof onDoubleClick === 'function' && !isDisabled ? handleDoubleClick : undefined,
     onMouseDown: typeof onMouseDown === 'function' && !isDisabled ? onMouseDown : undefined,
-    $size: size
+    onKeyDown: shouldEnableKeyboardHighlightingEffective ? handleKeyDown : undefined,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    $size: size,
+    role: isClickable ? 'button' : undefined
   }, icons.map(icon => {
     const stackSizeFactor = getStackSizeFactor(icon);
     const iconStyle = `${theme?.iconStyle ?? 'fa-regular'} `;
@@ -57,7 +76,7 @@ const Icon = ({
     const iconClasses = clsx(themedIcon, {
       'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined
     });
-    return /*#__PURE__*/React.createElement(StyledIcon, {
+    return /*#__PURE__*/React.createElement(StyledIconElement, {
       className: iconClasses,
       $color: icon.includes('fa-inverse') ? 'white' : color,
       $fontSize: (stackSizeFactor || 1) / maxStackSizeFactor * size,