@chayns-components/core 5.5.29 → 5.5.31-alpha.0

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

@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledGridTopRightImage = exports.StyledGridLeftImage = exports.StyledGridImage = exports.StyledGridBottomRightImage = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledGridImage = exports.StyledGridImage = _styledComponents.default.div`
     background: ${({
   $background,
@@ -29,13 +28,9 @@ const StyledGridImage = exports.StyledGridImage = _styledComponents.default.div`
 }) => $size}px;
     flex: 0 0 auto;
 
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
-            &:focus-visible {
-                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
-            }
-        `}
+    &:focus-visible {
+        outline: none;
+    }
 `;
 const StyledGridLeftImage = exports.StyledGridLeftImage = _styledComponents.default.img`
     border-right: ${({

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

@@ -1 +1 @@
-{"version":3,"file":"GridImage.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledGridImage","exports","styled","div","$background","theme","$shouldShowRoundImage","undefined","$size","$shouldShowKeyboardHighlighting","css","keyboardFocusHighlightingRingCss","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":"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","ignoreList":[]}
+{"version":3,"file":"GridImage.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledGridImage","exports","styled","div","$background","theme","$shouldShowRoundImage","undefined","$size","StyledGridLeftImage","img","$isHidden","StyledGridTopRightImage","StyledGridBottomRightImage"],"sources":["../../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldShowRoundImage?: boolean;\n    $size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n    background: ${({ $background, theme }: StyledGridImageProps) =>\n        $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n    height: ${({ $size }) => $size}px;\n    overflow: hidden;\n    position: relative;\n    transition: border-radius 0.3s ease;\n    width: ${({ $size }) => $size}px;\n    flex: 0 0 auto;\n\n    &:focus-visible {\n        outline: none;\n    }\n`;\n\ntype StyledGridLeftImageProps = {\n    $isHidden: boolean;\n    $size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n    border-right: ${({ $size }) => $size / 40}px solid white;\n    height: 100%;\n    left: 0;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    top: 0;\n    transition: opacity 0.4s ease;\n    width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n    $isHidden: boolean;\n    $size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n    border-bottom: ${({ $size }) => $size / 40}px solid white;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    top: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n    $isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n    bottom: 0;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAgD,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AASzC,MAAMG,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAyB;AAC/D,kBAAkB,CAAC;EAAEC,WAAW;EAAEC;AAA4B,CAAC,KACvDD,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACnE,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAGC,SAAU;AAC/F,iCAAiC,CAAC;EAAEF;AAA4B,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACtF,cAAc,CAAC;EAAEG;AAAM,CAAC,KAAKA,KAAK;AAClC;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC;AACA;AACA;AACA;AACA;AACA,CAAC;AAOM,MAAMC,mBAAmB,GAAAR,OAAA,CAAAQ,mBAAA,GAAGP,yBAAM,CAACQ,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;AAOM,MAAMC,uBAAuB,GAAAX,OAAA,CAAAW,uBAAA,GAAGV,yBAAM,CAACQ,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;AAMM,MAAME,0BAA0B,GAAAZ,OAAA,CAAAY,0BAAA,GAAGX,yBAAM,CAACQ,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/cjs/components/grouped-image/GroupedImage.js

@@ -9,6 +9,7 @@ var _GroupedImage = require("./GroupedImage.styles");
 var _CareOfClipPath = _interopRequireDefault(require("./clip-paths/CareOfClipPath"));
 var _uuid = require("../../hooks/uuid");
 var _SecondImageClipPath = _interopRequireDefault(require("./clip-paths/SecondImageClipPath"));
+var _useFocusRingPortal = require("../../hooks/useFocusRingPortal");
 var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 var _ColorSchemeProvider = require("../color-scheme-provider/ColorSchemeProvider");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -58,6 +59,7 @@ const GroupedImage = ({
   onImageError,
   shouldEnableKeyboardHighlighting
 }) => {
+  const groupedImageRef = (0, _react.useRef)(null);
   const colorScheme = (0, _ColorSchemeProvider.useColorScheme)();
   const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? (colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.shouldEnableKeyboardHighlighting) ?? false;
   const hasCornerImage = Boolean(cornerImage);
@@ -68,6 +70,10 @@ const GroupedImage = ({
   const isClickable = typeof onClick === 'function';
   const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlightingEffective;
   const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(isKeyboardFocusable);
+  (0, _useFocusRingPortal.useFocusRingPortal)(groupedImageRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    shape: shouldShowRoundImage ? 'circle' : 'rectangle'
+  });
   const handleKeyDown = (0, _react.useCallback)(event => {
     if (!isClickable) {
       return;
@@ -103,12 +109,12 @@ const GroupedImage = ({
     onError: event => typeof onImageError === 'function' && onImageError(event, index)
   })))));
   return /*#__PURE__*/_react.default.createElement(_GroupedImage.StyledGroupedImage, {
+    ref: groupedImageRef,
     onClick: isClickable ? onClick : undefined,
     onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
     tabIndex: isKeyboardFocusable ? 0 : -1,
     role: isClickable ? 'button' : undefined,
-    $height: height,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
+    $height: height
   }, hasCornerImage && /*#__PURE__*/_react.default.createElement(_CareOfClipPath.default, {
     height: height,
     uuid: uuid,

package/lib/cjs/components/grouped-image/GroupedImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupedImage.js","names":["_react","_interopRequireWildcard","require","_GroupedImage","_CareOfClipPath","_interopRequireDefault","_uuid","_SecondImageClipPath","_useKeyboardFocusHighlighting","_ColorSchemeProvider","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","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","useColorScheme","shouldEnableKeyboardHighlightingEffective","hasCornerImage","hasCornerElement","hasMultipleImages","length","uuid","useUuid","cornerImageDisplayUrl","undefined","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","handleKeyDown","useCallback","event","key","preventDefault","imageElements","map","src","index","createElement","StyledGroupImageElement","$background","$isSecondImage","$hasCornerImage","$hasMultipleImages","$shouldPreventBackground","$shouldShowRoundImage","$uuid","width","viewBox","xmlns","preserveAspectRatio","alt","onError","StyledGroupedImage","onKeyDown","tabIndex","role","$height","$shouldShowKeyboardHighlighting","imageFactors","StyledCornerImage","StyledCornerElement","displayName","_default","exports"],"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":[]}
+{"version":3,"file":"GroupedImage.js","names":["_react","_interopRequireWildcard","require","_GroupedImage","_CareOfClipPath","_interopRequireDefault","_uuid","_SecondImageClipPath","_useFocusRingPortal","_useKeyboardFocusHighlighting","_ColorSchemeProvider","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","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","groupedImageRef","useRef","colorScheme","useColorScheme","shouldEnableKeyboardHighlightingEffective","hasCornerImage","hasCornerElement","hasMultipleImages","length","uuid","useUuid","cornerImageDisplayUrl","undefined","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","shape","handleKeyDown","useCallback","event","key","preventDefault","imageElements","map","src","index","createElement","StyledGroupImageElement","$background","$isSecondImage","$hasCornerImage","$hasMultipleImages","$shouldPreventBackground","$shouldShowRoundImage","$uuid","width","viewBox","xmlns","preserveAspectRatio","alt","onError","StyledGroupedImage","ref","onKeyDown","tabIndex","role","$height","imageFactors","StyledCornerImage","StyledCornerElement","displayName","_default","exports"],"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    useRef,\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 { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\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 groupedImageRef = useRef<HTMLDivElement>(null);\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    useFocusRingPortal(groupedImageRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        shape: shouldShowRoundImage ? 'circle' : 'rectangle',\n    });\n\n    const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (!isClickable) {\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n            }\n        },\n        [isClickable, onClick],\n    );\n\n    const 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            ref={groupedImageRef}\n            onClick={isClickable ? onClick : undefined}\n            onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n            tabIndex={isKeyboardFocusable ? 0 : -1}\n            role={isClickable ? 'button' : undefined}\n            $height={height}\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/cjs/components/grouped-image/GroupedImage.styles.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledGroupedImage = exports.StyledGroupImageElement = exports.StyledCornerImage = exports.StyledCornerElement = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledGroupedImage = exports.StyledGroupedImage = _styledComponents.default.div`
     flex: 0 0 auto;
@@ -17,13 +16,9 @@ const StyledGroupedImage = exports.StyledGroupedImage = _styledComponents.defaul
   $height
 }) => $height}px;
 
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
-            &:focus-visible {
-                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
-            }
-        `}
+    &:focus-visible {
+        outline: none;
+    }
 `;
 const StyledGroupImageElement = exports.StyledGroupImageElement = _styledComponents.default.div.attrs(({
   $isSecondImage,

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

@@ -1 +1 @@
-{"version":3,"file":"GroupedImage.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledGroupedImage","exports","styled","div","$height","$shouldShowKeyboardHighlighting","css","keyboardFocusHighlightingRingCss","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,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAGA,IAAAC,0BAAA,GAAAD,OAAA;AAAgG,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAOzF,MAAMkB,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,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/B,IAAAC,qBAAG;AACX;AACA,kBAAkBC,2DAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAYM,MAAMC,uBAAuB,GAAAP,OAAA,CAAAO,uBAAA,GAAGN,yBAAM,CAACC,GAAG,CAACM,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,OAAO,IAAAL,qBAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAII,cAAc,EAAE;IAChB,OAAO,IAAAJ,qBAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAO,IAAAA,qBAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EAAEI;AAAe,CAAC,KACjBA,cAAc,GACR,IAAAJ,qBAAG;AACjB;AACA;AACA,eAAe,GACD,IAAAA,qBAAG;AACjB;AACA;AACA,eAAe;AACf;AACA,MAAM,CAAC;EAAEW,WAAW;EAAEC,wBAAwB;EAAEC;AAAM,CAAC,KAC/C,CAACD,wBAAwB,IACzB,IAAAZ,qBAAG;AACX,0BAA0BW,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;AAQM,MAAMC,iBAAiB,GAAAnB,OAAA,CAAAmB,iBAAA,GAAGlB,yBAAM,CAACmB,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,IACzB,IAAAZ,qBAAG;AACX,0BAA0BW,WAAW,IAAI,QAAQE,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AACT,CAAC;AAEM,MAAMG,mBAAmB,GAAArB,OAAA,CAAAqB,mBAAA,GAAGpB,yBAAM,CAACqB,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":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledGroupedImage","exports","styled","div","$height","StyledGroupImageElement","attrs","$isSecondImage","$hasMultipleImages","$hasCornerImage","$uuid","clipPath","style","$shouldShowRoundImage","css","$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    &:focus-visible {\n        outline: none;\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":"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","ignoreList":[]}

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _useFocusRingPortal = require("../../../hooks/useFocusRingPortal");
 var _HighlightSliderItem = require("./HighlightSliderItem.styles");
 var _ProgressBar = require("../../progress-bar/ProgressBar.styles");
 var _uuid = require("../../../hooks/uuid");
@@ -21,8 +22,12 @@ const HighlightSliderItem = ({
   shouldEnableKeyboardHighlighting,
   shouldShowKeyboardHighlighting = false
 }) => {
+  const itemRef = (0, _react.useRef)(null);
   const uuid = (0, _uuid.useUuid)();
   const isKeyboardFocusable = isInteractive && shouldEnableKeyboardHighlighting;
+  (0, _useFocusRingPortal.useFocusRingPortal)(itemRef, {
+    isEnabled: shouldShowKeyboardHighlighting
+  });
   const handleKeyDown = (0, _react.useCallback)(event => {
     if (!isInteractive) {
       return;
@@ -33,11 +38,11 @@ const HighlightSliderItem = ({
     }
   }, [index, isInteractive, onClick]);
   return /*#__PURE__*/_react.default.createElement(_HighlightSliderItem.StyledHighlightSliderItem, {
+    ref: itemRef,
     onClick: isInteractive ? () => onClick(index) : undefined,
     onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
     tabIndex: isKeyboardFocusable ? 0 : -1,
-    role: isInteractive ? 'button' : undefined,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
+    role: isInteractive ? 'button' : undefined
   }, /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarProgressWrapper, null, isActive && /*#__PURE__*/_react.default.createElement(_HighlightSliderItem.StyledHighlightSliderItemProgress, {
     key: `highlight-slider-item-active--${uuid}`,
     initial: {

package/lib/cjs/components/highlight-slider/highlight-slider-item/HighlightSliderItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightSliderItem.js","names":["_react","_interopRequireWildcard","require","_HighlightSliderItem","_ProgressBar","_uuid","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","HighlightSliderItem","colors","isActive","isFinished","onFinish","index","onClick","duration","isInteractive","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","uuid","useUuid","isKeyboardFocusable","handleKeyDown","useCallback","event","key","preventDefault","createElement","StyledHighlightSliderItem","undefined","onKeyDown","tabIndex","role","$shouldShowKeyboardHighlighting","StyledProgressBarProgressWrapper","StyledHighlightSliderItemProgress","initial","width","left","animate","exit","onAnimationComplete","$backgroundColor","fillColor","transition","ease","style","StyledHighlightSliderItemBackground","backgroundColor","displayName","_default","exports"],"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":"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","ignoreList":[]}
+{"version":3,"file":"HighlightSliderItem.js","names":["_react","_interopRequireWildcard","require","_useFocusRingPortal","_HighlightSliderItem","_ProgressBar","_uuid","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","HighlightSliderItem","colors","isActive","isFinished","onFinish","index","onClick","duration","isInteractive","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","itemRef","useRef","uuid","useUuid","isKeyboardFocusable","useFocusRingPortal","isEnabled","handleKeyDown","useCallback","event","key","preventDefault","createElement","StyledHighlightSliderItem","ref","undefined","onKeyDown","tabIndex","role","StyledProgressBarProgressWrapper","StyledHighlightSliderItemProgress","initial","width","left","animate","exit","onAnimationComplete","$backgroundColor","fillColor","transition","ease","style","StyledHighlightSliderItemBackground","backgroundColor","displayName","_default","exports"],"sources":["../../../../../src/components/highlight-slider/highlight-slider-item/HighlightSliderItem.tsx"],"sourcesContent":["import React, { FC, KeyboardEventHandler, useCallback, useRef } from 'react';\nimport { useFocusRingPortal } from '../../../hooks/useFocusRingPortal';\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 itemRef = useRef<HTMLDivElement>(null);\n    const uuid = useUuid();\n    const isKeyboardFocusable = isInteractive && shouldEnableKeyboardHighlighting;\n    useFocusRingPortal(itemRef, { isEnabled: shouldShowKeyboardHighlighting });\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            ref={itemRef}\n            onClick={isInteractive ? () => onClick(index) : undefined}\n            onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n            tabIndex={isKeyboardFocusable ? 0 : -1}\n            role={isInteractive ? 'button' : undefined}\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,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAD,OAAA;AACA,IAAAE,oBAAA,GAAAF,OAAA;AAKA,IAAAG,YAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAA8C,SAAAD,wBAAAM,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAR,uBAAA,YAAAA,CAAAM,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAoB9C,MAAMkB,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,OAAO,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAC5C,MAAMC,IAAI,GAAG,IAAAC,aAAO,EAAC,CAAC;EACtB,MAAMC,mBAAmB,GAAGP,aAAa,IAAIC,gCAAgC;EAC7E,IAAAO,sCAAkB,EAACL,OAAO,EAAE;IAAEM,SAAS,EAAEP;EAA+B,CAAC,CAAC;EAE1E,MAAMQ,aAAa,GAAG,IAAAC,kBAAW,EAC5BC,KAAK,IAAK;IACP,IAAI,CAACZ,aAAa,EAAE;MAChB;IACJ;IAEA,IAAIY,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC5CD,KAAK,CAACE,cAAc,CAAC,CAAC;MACtBhB,OAAO,CAACD,KAAK,CAAC;IAClB;EACJ,CAAC,EACD,CAACA,KAAK,EAAEG,aAAa,EAAEF,OAAO,CAClC,CAAC;EAED,oBACIhC,MAAA,CAAAiB,OAAA,CAAAgC,aAAA,CAAC7C,oBAAA,CAAA8C,yBAAyB;IACtBC,GAAG,EAAEd,OAAQ;IACbL,OAAO,EAAEE,aAAa,GAAG,MAAMF,OAAO,CAACD,KAAK,CAAC,GAAGqB,SAAU;IAC1DC,SAAS,EAAEZ,mBAAmB,GAAGG,aAAa,GAAGQ,SAAU;IAC3DE,QAAQ,EAAEb,mBAAmB,GAAG,CAAC,GAAG,CAAC,CAAE;IACvCc,IAAI,EAAErB,aAAa,GAAG,QAAQ,GAAGkB;EAAU,gBAE3CpD,MAAA,CAAAiB,OAAA,CAAAgC,aAAA,CAAC5C,YAAA,CAAAmD,gCAAgC,QAC5B5B,QAAQ,iBACL5B,MAAA,CAAAiB,OAAA,CAAAgC,aAAA,CAAC7C,oBAAA,CAAAqD,iCAAiC;IAC9BV,GAAG,EAAE,iCAAiCR,IAAI,EAAG;IAC7CmB,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,KAAMjC,QAAQ,CAACC,KAAK,CAAE;IAC3CiC,gBAAgB,EAAErC,MAAM,CAACsC,SAAU;IACnCC,UAAU,EAAE;MACRC,IAAI,EAAE,QAAQ;MACdlC;IACJ;EAAE,CACL,CACJ,EACAJ,UAAU,iBACP7B,MAAA,CAAAiB,OAAA,CAAAgC,aAAA,CAAC7C,oBAAA,CAAAqD,iCAAiC;IAC9BV,GAAG,EAAE,mCAAmCR,IAAI,EAAG;IAC/C6B,KAAK,EAAE;MAAET,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACrCI,gBAAgB,EAAErC,MAAM,CAACsC;EAAU,CACtC,CACJ,eACDjE,MAAA,CAAAiB,OAAA,CAAAgC,aAAA,CAAC7C,oBAAA,CAAAiE,mCAAmC;IAACL,gBAAgB,EAAErC,MAAM,CAAC2C;EAAgB,CAAE,CAClD,CACX,CAAC;AAEpC,CAAC;AAED5C,mBAAmB,CAAC6C,WAAW,GAAG,qBAAqB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAxD,OAAA,GAEzCS,mBAAmB","ignoreList":[]}

package/lib/cjs/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.js

@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledHighlightSliderItemProgress = exports.StyledHighlightSliderItemBackground = exports.StyledHighlightSliderItem = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _react = require("motion/react");
-var _keyboardFocusHighlighting = require("../../../utils/keyboardFocusHighlighting.styles");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledHighlightSliderItem = exports.StyledHighlightSliderItem = _styledComponents.default.div`
     overflow: hidden;
     position: relative;
@@ -16,13 +15,9 @@ const StyledHighlightSliderItem = exports.StyledHighlightSliderItem = _styledCom
     border-radius: 4px;
     cursor: pointer;
 
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
-            &:focus-visible {
-                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
-            }
-        `}
+    &:focus-visible {
+        outline: none;
+    }
 `;
 const StyledHighlightSliderItemProgress = exports.StyledHighlightSliderItemProgress = (0, _styledComponents.default)(_react.motion.div)`
     height: 4px;

package/lib/cjs/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightSliderItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_react","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledHighlightSliderItem","exports","styled","div","$shouldShowKeyboardHighlighting","css","keyboardFocusHighlightingRingCss","StyledHighlightSliderItemProgress","motion","$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,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAAE,0BAAA,GAAAF,OAAA;AAAmG,SAAAD,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAM5F,MAAMkB,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAGE,yBAAM,CAACC,GAAmC;AACnF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCA,+BAA+B,IAC/B,IAAAC,qBAAG;AACX;AACA,kBAAkBC,2DAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAGM,MAAMC,iCAAiC,GAAAN,OAAA,CAAAM,iCAAA,GAAG,IAAAL,yBAAM,EACnDM,aAAM,CAACL,GACX,CAAyC;AACzC;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEM;AAAyD,CAAC,KAC7EA,gBAAgB;AACxB,CAAC;AAIM,MAAMC,mCAAmC,GAAAT,OAAA,CAAAS,mCAAA,GAAG,IAAAR,yBAAM,EACrDM,aAAM,CAACL,GACX,CAA2C;AAC3C;AACA;AACA;AACA,wBAAwB,CAAC;EAAEM;AAA2D,CAAC,KAC/EA,gBAAgB;AACxB,CAAC","ignoreList":[]}
+{"version":3,"file":"HighlightSliderItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","_react","e","__esModule","default","StyledHighlightSliderItem","exports","styled","div","StyledHighlightSliderItemProgress","motion","$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\n    &:focus-visible {\n        outline: none;\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,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAAsC,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAG/B,MAAMG,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAGE,yBAAM,CAACC,GAAG;AACnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAGM,MAAMC,iCAAiC,GAAAH,OAAA,CAAAG,iCAAA,GAAG,IAAAF,yBAAM,EACnDG,aAAM,CAACF,GACX,CAAyC;AACzC;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEG;AAAyD,CAAC,KAC7EA,gBAAgB;AACxB,CAAC;AAIM,MAAMC,mCAAmC,GAAAN,OAAA,CAAAM,mCAAA,GAAG,IAAAL,yBAAM,EACrDG,aAAM,CAACF,GACX,CAA2C;AAC3C;AACA;AACA;AACA,wBAAwB,CAAC;EAAEG;AAA2D,CAAC,KAC/EA,gBAAgB;AACxB,CAAC","ignoreList":[]}

package/lib/cjs/components/icon/Icon.js

@@ -5,12 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _clsx = _interopRequireDefault(require("clsx"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _icon = require("../../utils/icon");
+var _useFocusRingPortal = require("../../hooks/useFocusRingPortal");
 var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 var _ColorSchemeProvider = require("../color-scheme-provider/ColorSchemeProvider");
 var _Icon = require("./Icon.styles");
 var _styledComponents = require("styled-components");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Icon = ({
   className,
@@ -25,11 +27,17 @@ const Icon = ({
   shouldStopPropagation,
   shouldEnableKeyboardHighlighting
 }) => {
+  const iconWrapperRef = (0, _react.useRef)(null);
   const theme = (0, _styledComponents.useTheme)();
   const colorScheme = (0, _ColorSchemeProvider.useColorScheme)();
   const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? (colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.shouldEnableKeyboardHighlighting) ?? false;
   const isClickable = typeof onClick === 'function' && !isDisabled;
   const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlightingEffective && isClickable);
+  (0, _useFocusRingPortal.useFocusRingPortal)(iconWrapperRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    shape: 'circle',
+    padding: 4
+  });
   const handleClick = event => {
     if (shouldStopPropagation) {
       event.stopPropagation();
@@ -65,6 +73,7 @@ const Icon = ({
   const shouldUseStackedIcon = icons.length > 1;
   const wrapperClasses = (0, _clsx.default)('beta-chayns-icon', shouldUseStackedIcon ? 'fa-stack' : '', className);
   return /*#__PURE__*/_react.default.createElement(_Icon.StyledIconWrapper, {
+    ref: iconWrapperRef,
     tabIndex: shouldEnableKeyboardHighlightingEffective && isClickable ? tabIndex ?? 0 : tabIndex,
     className: wrapperClasses,
     $isDisabled: isDisabled,
@@ -73,7 +82,6 @@ const Icon = ({
     onDoubleClick: typeof onDoubleClick === 'function' && !isDisabled ? handleDoubleClick : undefined,
     onMouseDown: typeof onMouseDown === 'function' && !isDisabled ? onMouseDown : undefined,
     onKeyDown: shouldEnableKeyboardHighlightingEffective ? handleKeyDown : undefined,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     $size: size,
     role: isClickable ? 'button' : undefined
   }, icons.map(icon => {

package/lib/cjs/components/icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["_clsx","_interopRequireDefault","require","_react","_icon","_useKeyboardFocusHighlighting","_ColorSchemeProvider","_Icon","_styledComponents","e","__esModule","default","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","tabIndex","size","shouldStopPropagation","shouldEnableKeyboardHighlighting","theme","useTheme","colorScheme","useColorScheme","shouldEnableKeyboardHighlightingEffective","isClickable","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","handleClick","event","stopPropagation","handleDoubleClick","handleKeyDown","key","preventDefault","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","createElement","StyledIconWrapper","$isDisabled","undefined","$isOnClick","onKeyDown","$shouldShowKeyboardHighlighting","$size","role","map","iconStyle","themedIcon","replace","iconClasses","StyledIcon","$color","includes","$fontSize","$isStacked","displayName","_default","exports"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, KeyboardEventHandler, MouseEventHandler } from 'react';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledIcon as StyledIconElement, StyledIconWrapper } from './Icon.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport type IconProps = {\n    /**\n     * Additional class name for the icon wrapper element.\n     * @description\n     * This class name is applied to the wrapper element that contains the icon. It can be used to\n     * style the icon wrapper element.\n     * @example\n     * <Icon className=\"my-custom-class\" icons={['fa-user']} />\n     * @optional\n     */\n    className?: string;\n    /**\n     * The color of the icon.\n     * @description\n     * This property can be used to set the color of the icon. The color is only used for icons that\n     * don't have a predefined color (e.g., 'fa-inverse' icons will always be white). If no color is\n     * specified, the icon color of the theme or the text color will be used.\n     * @example\n     * <Icon color=\"red\" icons={['fa-user']} />\n     * @optional\n     */\n    color?: string;\n    /**\n     * The icon(s) to be displayed.\n     * @description\n     * This property can be used to set the icon(s) to be displayed. The icon(s) must be specified as\n     * an array of strings. Each string must be a valid icon name.\n     * @example\n     * <Icon icons={['fa-user']} />\n     * <Icon icons={['fa fa-circle fa-stack-2x', 'fa fa-french-fries fa-inverse']} />\n     */\n    icons: string[];\n    /**\n     * Whether the icon should be disabled.\n     * @description\n     * This property can be used to disable the icon. When the icon is disabled, it will not be\n     * clickable, and it will not emit any events.\n     * @example\n     * <Icon icons={['fa-user']} isDisabled />\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the icon is clicked.\n     * @description\n     * This function is executed when the icon is clicked. It can be used to handle the click event.\n     * @example\n     * <Icon icons={['fa-user']} onClick={() => console.log('Icon clicked')} />\n     * @optional\n     */\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon is double-clicked.\n     * @description\n     * This function is executed when the icon is double-clicked. It can be used to handle the\n     * double-click event.\n     * @example\n     * <Icon icons={['fa-user']} onDoubleClick={() => console.log('Icon double-clicked')} />\n     * @optional\n     */\n    onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon is pressed.\n     * @description\n     * This function is executed when the icon is pressed. It can be used to handle the mouse down event.\n     * @example\n     * <Icon icons={['fa-user']} onMouseDown={() => console.log('Icon pressed')} />\n     * @optional\n     */\n    onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * The size of the icon.\n     * @description\n     * This property can be used to set the size of the icon. The size must be specified as a number\n     * in pixels.\n     * @default 15\n     * @example\n     * <Icon icons={['fa-user']} size={20} />\n     * @optional\n     */\n    size?: number;\n    /**\n     * Stops event propagation on click.\n     * @description\n     * This property can be used to prevent the icon from propagating the click event to its parent\n     * elements.\n     * @example\n     * <Icon icons={['fa-user']} shouldStopPropagation />\n     * @optional\n     */\n    shouldStopPropagation?: boolean;\n    /**\n     * Optional tab index for the icon.\n     */\n    tabIndex?: number;\n    /**\n     * Enables keyboard-only focus highlighting for clickable icons.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n    className,\n    color,\n    icons,\n    isDisabled,\n    onClick,\n    onDoubleClick,\n    onMouseDown,\n    tabIndex,\n    size = 15,\n    shouldStopPropagation,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const theme = useTheme() as Theme;\n    const colorScheme = useColorScheme();\n    const shouldEnableKeyboardHighlightingEffective =\n        shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n    const isClickable = typeof onClick === 'function' && !isDisabled;\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlightingEffective && isClickable,\n    );\n\n    const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onDoubleClick === 'function') {\n            onDoubleClick(event);\n        }\n    };\n\n    const handleKeyDown: KeyboardEventHandler<HTMLSpanElement> = (event) => {\n        if (!isClickable) {\n            return;\n        }\n\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            handleClick(event as unknown as React.MouseEvent<HTMLSpanElement>);\n        }\n    };\n\n    let maxStackSizeFactor = 1;\n\n    icons.forEach((icon) => {\n        const stackSizeFactor = getStackSizeFactor(icon);\n\n        if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n            maxStackSizeFactor = stackSizeFactor;\n        }\n    });\n\n    const shouldUseStackedIcon = icons.length > 1;\n\n    const wrapperClasses = clsx(\n        'beta-chayns-icon',\n        shouldUseStackedIcon ? 'fa-stack' : '',\n        className,\n    );\n\n    return (\n        <StyledIconWrapper\n            tabIndex={\n                shouldEnableKeyboardHighlightingEffective && isClickable\n                    ? (tabIndex ?? 0)\n                    : tabIndex\n            }\n            className={wrapperClasses}\n            $isDisabled={isDisabled}\n            onClick={isClickable ? handleClick : undefined}\n            $isOnClick={isClickable}\n            onDoubleClick={\n                typeof onDoubleClick === 'function' && !isDisabled ? handleDoubleClick : undefined\n            }\n            onMouseDown={typeof onMouseDown === 'function' && !isDisabled ? onMouseDown : undefined}\n            onKeyDown={shouldEnableKeyboardHighlightingEffective ? handleKeyDown : undefined}\n            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n            $size={size}\n            role={isClickable ? 'button' : undefined}\n        >\n            {icons.map((icon) => {\n                const stackSizeFactor = getStackSizeFactor(icon);\n\n                const iconStyle = `${(theme?.iconStyle as string) ?? 'fa-regular'} `;\n                const themedIcon = icon?.replace(/^fa\\s/, iconStyle);\n\n                const iconClasses = clsx(themedIcon, {\n                    'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n                });\n\n                return (\n                    <StyledIconElement\n                        className={iconClasses}\n                        $color={icon.includes('fa-inverse') ? 'white' : color}\n                        $fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n                        $isStacked={shouldUseStackedIcon}\n                        key={icon}\n                        $size={size}\n                    />\n                );\n            })}\n        </StyledIconWrapper>\n    );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Icon.js","names":["_clsx","_interopRequireDefault","require","_react","_interopRequireWildcard","_icon","_useFocusRingPortal","_useKeyboardFocusHighlighting","_ColorSchemeProvider","_Icon","_styledComponents","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","tabIndex","size","shouldStopPropagation","shouldEnableKeyboardHighlighting","iconWrapperRef","useRef","theme","useTheme","colorScheme","useColorScheme","shouldEnableKeyboardHighlightingEffective","isClickable","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","shape","padding","handleClick","event","stopPropagation","handleDoubleClick","handleKeyDown","key","preventDefault","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","createElement","StyledIconWrapper","ref","$isDisabled","undefined","$isOnClick","onKeyDown","$size","role","map","iconStyle","themedIcon","replace","iconClasses","StyledIcon","$color","includes","$fontSize","$isStacked","displayName","_default","exports"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, KeyboardEventHandler, MouseEventHandler, useRef } from 'react';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledIcon as StyledIconElement, StyledIconWrapper } from './Icon.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport type IconProps = {\n    /**\n     * Additional class name for the icon wrapper element.\n     * @description\n     * This class name is applied to the wrapper element that contains the icon. It can be used to\n     * style the icon wrapper element.\n     * @example\n     * <Icon className=\"my-custom-class\" icons={['fa-user']} />\n     * @optional\n     */\n    className?: string;\n    /**\n     * The color of the icon.\n     * @description\n     * This property can be used to set the color of the icon. The color is only used for icons that\n     * don't have a predefined color (e.g., 'fa-inverse' icons will always be white). If no color is\n     * specified, the icon color of the theme or the text color will be used.\n     * @example\n     * <Icon color=\"red\" icons={['fa-user']} />\n     * @optional\n     */\n    color?: string;\n    /**\n     * The icon(s) to be displayed.\n     * @description\n     * This property can be used to set the icon(s) to be displayed. The icon(s) must be specified as\n     * an array of strings. Each string must be a valid icon name.\n     * @example\n     * <Icon icons={['fa-user']} />\n     * <Icon icons={['fa fa-circle fa-stack-2x', 'fa fa-french-fries fa-inverse']} />\n     */\n    icons: string[];\n    /**\n     * Whether the icon should be disabled.\n     * @description\n     * This property can be used to disable the icon. When the icon is disabled, it will not be\n     * clickable, and it will not emit any events.\n     * @example\n     * <Icon icons={['fa-user']} isDisabled />\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the icon is clicked.\n     * @description\n     * This function is executed when the icon is clicked. It can be used to handle the click event.\n     * @example\n     * <Icon icons={['fa-user']} onClick={() => console.log('Icon clicked')} />\n     * @optional\n     */\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon is double-clicked.\n     * @description\n     * This function is executed when the icon is double-clicked. It can be used to handle the\n     * double-click event.\n     * @example\n     * <Icon icons={['fa-user']} onDoubleClick={() => console.log('Icon double-clicked')} />\n     * @optional\n     */\n    onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon is pressed.\n     * @description\n     * This function is executed when the icon is pressed. It can be used to handle the mouse down event.\n     * @example\n     * <Icon icons={['fa-user']} onMouseDown={() => console.log('Icon pressed')} />\n     * @optional\n     */\n    onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * The size of the icon.\n     * @description\n     * This property can be used to set the size of the icon. The size must be specified as a number\n     * in pixels.\n     * @default 15\n     * @example\n     * <Icon icons={['fa-user']} size={20} />\n     * @optional\n     */\n    size?: number;\n    /**\n     * Stops event propagation on click.\n     * @description\n     * This property can be used to prevent the icon from propagating the click event to its parent\n     * elements.\n     * @example\n     * <Icon icons={['fa-user']} shouldStopPropagation />\n     * @optional\n     */\n    shouldStopPropagation?: boolean;\n    /**\n     * Optional tab index for the icon.\n     */\n    tabIndex?: number;\n    /**\n     * Enables keyboard-only focus highlighting for clickable icons.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n    className,\n    color,\n    icons,\n    isDisabled,\n    onClick,\n    onDoubleClick,\n    onMouseDown,\n    tabIndex,\n    size = 15,\n    shouldStopPropagation,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const iconWrapperRef = useRef<HTMLSpanElement>(null);\n    const theme = useTheme() as Theme;\n    const colorScheme = useColorScheme();\n    const shouldEnableKeyboardHighlightingEffective =\n        shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n    const isClickable = typeof onClick === 'function' && !isDisabled;\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlightingEffective && isClickable,\n    );\n    useFocusRingPortal(iconWrapperRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        shape: 'circle',\n        padding: 4,\n    });\n\n    const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onDoubleClick === 'function') {\n            onDoubleClick(event);\n        }\n    };\n\n    const handleKeyDown: KeyboardEventHandler<HTMLSpanElement> = (event) => {\n        if (!isClickable) {\n            return;\n        }\n\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            handleClick(event as unknown as React.MouseEvent<HTMLSpanElement>);\n        }\n    };\n\n    let maxStackSizeFactor = 1;\n\n    icons.forEach((icon) => {\n        const stackSizeFactor = getStackSizeFactor(icon);\n\n        if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n            maxStackSizeFactor = stackSizeFactor;\n        }\n    });\n\n    const shouldUseStackedIcon = icons.length > 1;\n\n    const wrapperClasses = clsx(\n        'beta-chayns-icon',\n        shouldUseStackedIcon ? 'fa-stack' : '',\n        className,\n    );\n\n    return (\n        <StyledIconWrapper\n            ref={iconWrapperRef}\n            tabIndex={\n                shouldEnableKeyboardHighlightingEffective && isClickable\n                    ? (tabIndex ?? 0)\n                    : tabIndex\n            }\n            className={wrapperClasses}\n            $isDisabled={isDisabled}\n            onClick={isClickable ? handleClick : undefined}\n            $isOnClick={isClickable}\n            onDoubleClick={\n                typeof onDoubleClick === 'function' && !isDisabled ? handleDoubleClick : undefined\n            }\n            onMouseDown={typeof onMouseDown === 'function' && !isDisabled ? onMouseDown : undefined}\n            onKeyDown={shouldEnableKeyboardHighlightingEffective ? handleKeyDown : undefined}\n            $size={size}\n            role={isClickable ? 'button' : undefined}\n        >\n            {icons.map((icon) => {\n                const stackSizeFactor = getStackSizeFactor(icon);\n\n                const iconStyle = `${(theme?.iconStyle as string) ?? 'fa-regular'} `;\n                const themedIcon = icon?.replace(/^fa\\s/, iconStyle);\n\n                const iconClasses = clsx(themedIcon, {\n                    'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n                });\n\n                return (\n                    <StyledIconElement\n                        className={iconClasses}\n                        $color={icon.includes('fa-inverse') ? 'white' : color}\n                        $fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n                        $isStacked={shouldUseStackedIcon}\n                        key={icon}\n                        $size={size}\n                    />\n                );\n            })}\n        </StyledIconWrapper>\n    );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/icon/Icon.styles.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledUnicodeIcon = exports.StyledIconWrapper = exports.StyledIcon = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledIconWrapper = exports.StyledIconWrapper = _styledComponents.default.span`
     align-items: center;
@@ -27,27 +26,10 @@ const StyledIconWrapper = exports.StyledIconWrapper = _styledComponents.default.
   $size
 }) => `${$size}px`};
 
-    ${({
-  $shouldShowKeyboardHighlighting,
-  $size
-}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
-            &:focus-visible {
-                outline: none;
-                color: inherit;
-            }
-
-            &:focus-visible::after {
-                ${_keyboardFocusHighlighting.keyboardFocusHighlightingCircleRingCss};
-                content: '';
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                width: ${$size + 14}px;
-                height: ${$size + 14}px;
-                transform: translate(-50%, -50%);
-                pointer-events: none;
-            }
-        `}
+    &:focus-visible {
+        outline: none;
+        color: inherit;
+    }
 
     // To insure that stacked icons have the same size as normal icons.
     &&.fa-stack {

package/lib/cjs/components/icon/Icon.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledIconWrapper","exports","styled","span","$isDisabled","$isOnClick","$size","$shouldShowKeyboardHighlighting","css","keyboardFocusHighlightingCircleRingCss","StyledIcon","$color","theme","iconColor","text","$isStacked","undefined","$fontSize","StyledUnicodeIcon","headline","$icon","iconStyle"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingCircleRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledIconWrapperProps = {\n    $isDisabled?: boolean;\n    $isOnClick: boolean;\n    $size: number;\n    $shouldShowKeyboardHighlighting?: boolean;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ $isDisabled, $isOnClick }) =>\n        $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n    display: inline-flex;\n    min-height: ${({ $size }) => `${$size}px`};\n    justify-content: center;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.3s ease;\n    min-width: ${({ $size }) => `${$size}px`};\n\n    ${({ $shouldShowKeyboardHighlighting, $size }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                outline: none;\n                color: inherit;\n            }\n\n            &:focus-visible::after {\n                ${keyboardFocusHighlightingCircleRingCss};\n                content: '';\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                width: ${$size + 14}px;\n                height: ${$size + 14}px;\n                transform: translate(-50%, -50%);\n                pointer-events: none;\n            }\n        `}\n\n    // To insure that stacked icons have the same size as normal icons.\n    &&.fa-stack {\n        height: fit-content;\n        width: fit-content;\n        line-height: ${({ $size }) => $size}px;\n    }\n`;\n\ntype StyledIconProps = WithTheme<{\n    $fontSize: number;\n    $isStacked?: boolean;\n    $color?: string;\n    $size: number;\n}>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n    color: ${({ $color, theme }: StyledIconProps) => $color || theme.iconColor || theme.text};\n    display: ${({ $isStacked }) => ($isStacked ? undefined : 'inline-flex')};\n    font-size: ${({ $fontSize }) => `${$fontSize}px`};\n\n    ${({ $fontSize, $size }) =>\n        $fontSize !== $size &&\n        css`\n            top: 50%;\n            transform: translateY(-50%);\n        `}\n`;\n\ntype StyledUnicodeIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledUnicodeIcon = styled.i<StyledUnicodeIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledUnicodeIconProps) => theme.iconColor || theme.headline};\n\n    &:before {\n        content: ${({ $icon }) => `\"\\\\${$icon}\" !important`};\n    }\n    &:after {\n        content: ${({ theme, $icon }) => {\n            if (theme.iconStyle === 'fa-duotone') {\n                return `\"\\\\${$icon}\" !important`;\n            }\n            return '';\n        }};\n    }\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Icon.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledIconWrapper","exports","styled","span","$isDisabled","$isOnClick","$size","StyledIcon","$color","theme","iconColor","text","$isStacked","undefined","$fontSize","css","StyledUnicodeIcon","headline","$icon","iconStyle"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledIconWrapperProps = {\n    $isDisabled?: boolean;\n    $isOnClick: boolean;\n    $size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ $isDisabled, $isOnClick }) =>\n        $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n    display: inline-flex;\n    min-height: ${({ $size }) => `${$size}px`};\n    justify-content: center;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.3s ease;\n    min-width: ${({ $size }) => `${$size}px`};\n\n    &:focus-visible {\n        outline: none;\n        color: inherit;\n    }\n\n    // To insure that stacked icons have the same size as normal icons.\n    &&.fa-stack {\n        height: fit-content;\n        width: fit-content;\n        line-height: ${({ $size }) => $size}px;\n    }\n`;\n\ntype StyledIconProps = WithTheme<{\n    $fontSize: number;\n    $isStacked?: boolean;\n    $color?: string;\n    $size: number;\n}>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n    color: ${({ $color, theme }: StyledIconProps) => $color || theme.iconColor || theme.text};\n    display: ${({ $isStacked }) => ($isStacked ? undefined : 'inline-flex')};\n    font-size: ${({ $fontSize }) => `${$fontSize}px`};\n\n    ${({ $fontSize, $size }) =>\n        $fontSize !== $size &&\n        css`\n            top: 50%;\n            transform: translateY(-50%);\n        `}\n`;\n\ntype StyledUnicodeIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledUnicodeIcon = styled.i<StyledUnicodeIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledUnicodeIconProps) => theme.iconColor || theme.headline};\n\n    &:before {\n        content: ${({ $icon }) => `\"\\\\${$icon}\" !important`};\n    }\n    &:after {\n        content: ${({ theme, $icon }) => {\n            if (theme.iconStyle === 'fa-duotone') {\n                return `\"\\\\${$icon}\" !important`;\n            }\n            return '';\n        }};\n    }\n`;\n"],"mappings":"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","ignoreList":[]}