@chayns-components/core 5.5.30 → 5.5.34

package/lib/esm/components/radio-button/RadioButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.styles.js","names":["motion","styled","css","keyboardFocusHighlightingCircleRingCss","StyledRadioButton","span","$isDisabled","$radioButtonRightElementMargin","StyledRadioButtonWrapper","div","StyledRadioButtonPseudoCheckBox","theme","$isChecked","StyledRadioButtonCheckBox","input","$shouldShowKeyboardHighlighting","StyledRadioButtonCheckBoxMark","$isHovered","$isSelected","StyledRadioButtonLabel","text","StyledLabelWrapper","StyledMotionRadioButtonChildren"],"sources":["../../../../src/components/radio-button/RadioButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { RadioButtonRightElementMargin } from '../../types/radioButton';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingCircleRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledRadioButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $radioButtonRightElementMargin: RadioButtonRightElementMargin;\n}>;\n\nexport const StyledRadioButton = styled.span<StyledRadioButtonProps>`\n    display: flex;\n    flex-direction: column;\n\n    position: relative;\n\n    opacity: ${({ $isDisabled }: StyledRadioButtonProps) => ($isDisabled ? 0.5 : 1)};\n\n    ${({ $radioButtonRightElementMargin }: StyledRadioButtonProps) => {\n        switch ($radioButtonRightElementMargin) {\n            case 'BOTH':\n                return css`\n                    margin: 6px 0;\n                `;\n            case 'TOP':\n                return css`\n                    margin-top: 6px;\n                `;\n            case 'BOTTOM':\n                return css`\n                    margin-bottom: 6px;\n                `;\n            case 'NONE':\n            default:\n                return css`\n                    margin: 0;\n                `;\n        }\n    }}\n`;\n\ntype StyledRadioButtonWrapperProps = {\n    $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledRadioButtonWrapper = styled.div<StyledRadioButtonWrapperProps>`\n    display: flex;\n    align-items: center;\n    position: relative;\n    gap: 5px;\n    user-select: none;\n`;\n\ntype StyledRadioButtonPseudoCheckBoxProps = WithTheme<{\n    $isChecked: boolean;\n    $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonPseudoCheckBox = styled.div<StyledRadioButtonPseudoCheckBoxProps>`\n    background-color: ${({ theme, $isChecked }: StyledRadioButtonPseudoCheckBoxProps) =>\n        $isChecked ? theme['secondary-408'] : theme['secondary-403']};\n    opacity: 1;\n    border: 1px solid\n        rgba(${({ theme }: StyledRadioButtonPseudoCheckBoxProps) => theme['409-rgb']}, 0.5);\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    border-radius: 100%;\n    z-index: 1;\n    cursor: ${({ $isDisabled }: StyledRadioButtonPseudoCheckBoxProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\ntype StyledRadioButtonCheckBoxProps = WithTheme<{\n    $isDisabled: boolean;\n    $shouldShowKeyboardHighlighting: boolean;\n}>;\n\nexport const StyledRadioButtonCheckBox = styled.input<StyledRadioButtonCheckBoxProps>`\n    opacity: 0;\n    height: 15px;\n    width: 15px;\n    cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible + ${StyledRadioButtonPseudoCheckBox} {\n                transition: none;\n                ${keyboardFocusHighlightingCircleRingCss}\n            }\n        `}\n`;\n\ntype StyledRadioButtonCheckBoxMarkProps = WithTheme<{\n    $isHovered: boolean;\n    $isSelected: boolean;\n    $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonCheckBoxMark = styled.span<StyledRadioButtonCheckBoxMarkProps>`\n    background-color: transparent;\n    position: absolute;\n    top: 1px;\n    left: 3.925px;\n    display: inline-block;\n    transform: rotate(35deg);\n    height: 9px;\n    width: 5px;\n    border-bottom: 2px solid white;\n    border-right: 2px solid white;\n    border-top: transparent;\n    border-left: transparent;\n    z-index: 2;\n    cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxMarkProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n\n    ${({ $isHovered, $isSelected }) => {\n        if ($isSelected) {\n            return css`\n                opacity: 1;\n            `;\n        }\n\n        if ($isHovered) {\n            return css`\n                opacity: 0.5;\n            `;\n        }\n\n        return css`\n            opacity: 0;\n        `;\n    }}\n`;\n\ntype StyledRadioButtonLabelProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButtonLabel = styled.div<StyledRadioButtonLabelProps>`\n    color: ${({ theme }: StyledRadioButtonLabelProps) => theme.text};\n    margin: 0;\n    cursor: ${({ $isDisabled }: StyledRadioButtonLabelProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\nexport const StyledLabelWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    gap: 12px;\n`;\n\ntype StyledMotionRadioButtonChildrenProps = WithTheme<unknown>;\n\nexport const StyledMotionRadioButtonChildren = styled(\n    motion.div,\n)<StyledMotionRadioButtonChildrenProps>`\n    margin-left: 20px;\n    cursor: text;\n    overflow: hidden;\n    color: ${({ theme }: StyledMotionRadioButtonChildrenProps) => theme.text};\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"RadioButton.styles.js","names":["motion","styled","css","StyledRadioButton","span","$isDisabled","$radioButtonRightElementMargin","StyledRadioButtonWrapper","div","StyledRadioButtonPseudoCheckBox","theme","$isChecked","StyledRadioButtonCheckBox","input","StyledRadioButtonCheckBoxMark","$isHovered","$isSelected","StyledRadioButtonLabel","text","StyledLabelWrapper","StyledMotionRadioButtonChildren"],"sources":["../../../../src/components/radio-button/RadioButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { RadioButtonRightElementMargin } from '../../types/radioButton';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledRadioButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $radioButtonRightElementMargin: RadioButtonRightElementMargin;\n}>;\n\nexport const StyledRadioButton = styled.span<StyledRadioButtonProps>`\n    display: flex;\n    flex-direction: column;\n\n    position: relative;\n\n    opacity: ${({ $isDisabled }: StyledRadioButtonProps) => ($isDisabled ? 0.5 : 1)};\n\n    ${({ $radioButtonRightElementMargin }: StyledRadioButtonProps) => {\n        switch ($radioButtonRightElementMargin) {\n            case 'BOTH':\n                return css`\n                    margin: 6px 0;\n                `;\n            case 'TOP':\n                return css`\n                    margin-top: 6px;\n                `;\n            case 'BOTTOM':\n                return css`\n                    margin-bottom: 6px;\n                `;\n            case 'NONE':\n            default:\n                return css`\n                    margin: 0;\n                `;\n        }\n    }}\n`;\n\ntype StyledRadioButtonWrapperProps = {\n    $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledRadioButtonWrapper = styled.div<StyledRadioButtonWrapperProps>`\n    display: flex;\n    align-items: center;\n    position: relative;\n    gap: 5px;\n    user-select: none;\n`;\n\ntype StyledRadioButtonPseudoCheckBoxProps = WithTheme<{\n    $isChecked: boolean;\n    $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonPseudoCheckBox = styled.div<StyledRadioButtonPseudoCheckBoxProps>`\n    background-color: ${({ theme, $isChecked }: StyledRadioButtonPseudoCheckBoxProps) =>\n        $isChecked ? theme['secondary-408'] : theme['secondary-403']};\n    opacity: 1;\n    border: 1px solid\n        rgba(${({ theme }: StyledRadioButtonPseudoCheckBoxProps) => theme['409-rgb']}, 0.5);\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    border-radius: 100%;\n    z-index: 1;\n    cursor: ${({ $isDisabled }: StyledRadioButtonPseudoCheckBoxProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\ntype StyledRadioButtonCheckBoxProps = WithTheme<{\n    $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonCheckBox = styled.input<StyledRadioButtonCheckBoxProps>`\n    opacity: 0;\n    height: 15px;\n    width: 15px;\n    cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\ntype StyledRadioButtonCheckBoxMarkProps = WithTheme<{\n    $isHovered: boolean;\n    $isSelected: boolean;\n    $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonCheckBoxMark = styled.span<StyledRadioButtonCheckBoxMarkProps>`\n    background-color: transparent;\n    position: absolute;\n    top: 1px;\n    left: 3.925px;\n    display: inline-block;\n    transform: rotate(35deg);\n    height: 9px;\n    width: 5px;\n    border-bottom: 2px solid white;\n    border-right: 2px solid white;\n    border-top: transparent;\n    border-left: transparent;\n    z-index: 2;\n    cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxMarkProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n\n    ${({ $isHovered, $isSelected }) => {\n        if ($isSelected) {\n            return css`\n                opacity: 1;\n            `;\n        }\n\n        if ($isHovered) {\n            return css`\n                opacity: 0.5;\n            `;\n        }\n\n        return css`\n            opacity: 0;\n        `;\n    }}\n`;\n\ntype StyledRadioButtonLabelProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButtonLabel = styled.div<StyledRadioButtonLabelProps>`\n    color: ${({ theme }: StyledRadioButtonLabelProps) => theme.text};\n    margin: 0;\n    cursor: ${({ $isDisabled }: StyledRadioButtonLabelProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\nexport const StyledLabelWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    gap: 12px;\n`;\n\ntype StyledMotionRadioButtonChildrenProps = WithTheme<unknown>;\n\nexport const StyledMotionRadioButtonChildren = styled(\n    motion.div,\n)<StyledMotionRadioButtonChildrenProps>`\n    margin-left: 20px;\n    cursor: text;\n    overflow: hidden;\n    color: ${({ theme }: StyledMotionRadioButtonChildrenProps) => theme.text};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,IAA4B;AACpE;AACA;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAoC,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AACnF;AACA,MAAM,CAAC;EAAEC;AAAuD,CAAC,KAAK;EAC9D,QAAQA,8BAA8B;IAClC,KAAK,MAAM;MACP,OAAOJ,GAAG;AAC1B;AACA,iBAAiB;IACL,KAAK,KAAK;MACN,OAAOA,GAAG;AAC1B;AACA,iBAAiB;IACL,KAAK,QAAQ;MACT,OAAOA,GAAG;AAC1B;AACA,iBAAiB;IACL,KAAK,MAAM;IACX;MACI,OAAOA,GAAG;AAC1B;AACA,iBAAiB;EACT;AACJ,CAAC;AACL,CAAC;AAMD,OAAO,MAAMK,wBAAwB,GAAGN,MAAM,CAACO,GAAkC;AACjF;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,+BAA+B,GAAGR,MAAM,CAACO,GAAyC;AAC/F,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAiD,CAAC,KAC5EA,UAAU,GAAGD,KAAK,CAAC,eAAe,CAAC,GAAGA,KAAK,CAAC,eAAe,CAAC;AACpE;AACA;AACA,eAAe,CAAC;EAAEA;AAA4C,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACpF;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEL;AAAkD,CAAC,KAC5DA,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AACjE,CAAC;AAMD,OAAO,MAAMO,yBAAyB,GAAGX,MAAM,CAACY,KAAqC;AACrF;AACA;AACA;AACA,cAAc,CAAC;EAAER;AAA4C,CAAC,KACtDA,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AACjE,CAAC;AAQD,OAAO,MAAMS,6BAA6B,GAAGb,MAAM,CAACG,IAAwC;AAC5F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAAgD,CAAC,KAC1DA,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AACjE;AACA,MAAM,CAAC;EAAEU,UAAU;EAAEC;AAAY,CAAC,KAAK;EAC/B,IAAIA,WAAW,EAAE;IACb,OAAOd,GAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIa,UAAU,EAAE;IACZ,OAAOb,GAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAID,OAAO,MAAMe,sBAAsB,GAAGhB,MAAM,CAACO,GAAgC;AAC7E,aAAa,CAAC;EAAEE;AAAmC,CAAC,KAAKA,KAAK,CAACQ,IAAI;AACnE;AACA,cAAc,CAAC;EAAEb;AAAyC,CAAC,KACnDA,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AACjE,CAAC;AAED,OAAO,MAAMc,kBAAkB,GAAGlB,MAAM,CAACO,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMY,+BAA+B,GAAGnB,MAAM,CACjDD,MAAM,CAACQ,GACX,CAAuC;AACvC;AACA;AACA;AACA,aAAa,CAAC;EAAEE;AAA4C,CAAC,KAAKA,KAAK,CAACQ,IAAI;AAC5E,CAAC","ignoreList":[]}

package/lib/esm/components/search-input/SearchInput.js

@@ -5,6 +5,7 @@ import Input, { InputSize } from '../input/Input';
 import { StyledMotionSearchInputContentWrapper, StyledMotionSearchInputIconWrapper, StyledMotionSearchInputIconWrapperContent, StyledSearchInput, StyledSearchInputIconTrigger, StyledSearchInputPseudoElement } from './SearchInput.styles';
 import { useTheme } from 'styled-components';
 import { useElementSize } from '../../hooks/element';
+import { useFocusRingPortal } from '../../hooks/useFocusRingPortal';
 import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 const SearchInput = /*#__PURE__*/forwardRef(({
   iconColor,
@@ -26,6 +27,10 @@ const SearchInput = /*#__PURE__*/forwardRef(({
   const parentWidth = useElementSize(pseudoRef);
   const theme = useTheme();
   const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
+  useFocusRingPortal(iconTriggerRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    shape: 'circle'
+  });
   const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);
   const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);
   const handleIconTriggerClick = useCallback(() => {
@@ -79,7 +84,6 @@ const SearchInput = /*#__PURE__*/forwardRef(({
     initial: false
   }, isSearchInputActive && /*#__PURE__*/React.createElement(StyledMotionSearchInputContentWrapper, {
     $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     animate: {
       opacity: 1,
       width
@@ -111,8 +115,7 @@ const SearchInput = /*#__PURE__*/forwardRef(({
     id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon',
     tabIndex: 0,
     onClick: handleIconTriggerClick,
-    onKeyDown: handleIconTriggerKeyDown,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
+    onKeyDown: handleIconTriggerKeyDown
   }, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapperContent, {
     animate: {
       opacity: 1
@@ -127,8 +130,7 @@ const SearchInput = /*#__PURE__*/forwardRef(({
     key: isSearchInputActive ? 'backIcon' : 'searchIcon',
     transition: {
       duration: 0.3
-    },
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
+    }
   }, /*#__PURE__*/React.createElement(Icon, {
     key: "icon",
     color: iconColor,
@@ -141,8 +143,7 @@ const SearchInput = /*#__PURE__*/forwardRef(({
     id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon',
     tabIndex: 0,
     onClick: handleIconTriggerClick,
-    onKeyDown: handleIconTriggerKeyDown,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
+    onKeyDown: handleIconTriggerKeyDown
   }, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapperContent, {
     animate: {
       opacity: 1
@@ -157,8 +158,7 @@ const SearchInput = /*#__PURE__*/forwardRef(({
     key: isSearchInputActive ? 'backIcon' : 'searchIcon',
     transition: {
       duration: 0.3
-    },
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
+    }
   }, /*#__PURE__*/React.createElement(Icon, {
     key: "icon",
     color: iconColor,
@@ -168,7 +168,6 @@ const SearchInput = /*#__PURE__*/forwardRef(({
     initial: false
   }, isSearchInputActive && /*#__PURE__*/React.createElement(StyledMotionSearchInputContentWrapper, {
     $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     animate: {
       opacity: 1,
       width: '100%'

package/lib/esm/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","StyledSearchInputIconTrigger","StyledSearchInputPseudoElement","useTheme","useElementSize","useKeyboardFocusHighlighting","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","Medium","value","shouldEnableKeyboardHighlighting","width","widthValue","ref","isSearchInputActive","setIsSearchInputActive","trim","inputRef","pseudoRef","iconTriggerRef","parentWidth","theme","shouldShowKeyboardHighlighting","handleBackIconClick","handleSearchIconClick","handleIconTriggerClick","handleIconTriggerKeyDown","event","key","preventDefault","handleInputKeyDown","current","focus","blur","createElement","Fragment","className","$size","$shouldUseAbsolutePositioning","initial","$shouldShowKeyboardHighlighting","animate","opacity","exit","transition","duration","type","shouldShowClearIcon","id","tabIndex","onClick","position","color","icons","leftElement","text","displayName"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n    StyledSearchInputIconTrigger,\n    StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/element';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether the SearchInput should be positioned absolute.\n     */\n    shouldUseAbsolutePositioning?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n    /**\n     * Enables keyboard-only focus highlighting.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n    /**\n     * The width of the parent.\n     */\n    width?: number;\n};\n\nconst SearchInput = forwardRef<InputRef, SearchInputProps>(\n    (\n        {\n            iconColor,\n            isActive,\n            onActiveChange,\n            onChange,\n            onKeyDown,\n            placeholder,\n            shouldUseAbsolutePositioning = false,\n            size = InputSize.Medium,\n            value,\n            shouldEnableKeyboardHighlighting,\n            width: widthValue,\n        },\n        ref,\n    ) => {\n        const [isSearchInputActive, setIsSearchInputActive] = useState(\n            isActive ?? (typeof value === 'string' && value.trim() !== ''),\n        );\n\n        const inputRef = useRef<InputRef>(null);\n        const pseudoRef = useRef<HTMLDivElement>(null);\n        const iconTriggerRef = useRef<HTMLDivElement>(null);\n\n        const parentWidth = useElementSize(pseudoRef);\n\n        const theme = useTheme() as Theme;\n\n        const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n            shouldEnableKeyboardHighlighting,\n        );\n\n        const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n        const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n        const handleIconTriggerClick = useCallback(() => {\n            if (isSearchInputActive) {\n                handleBackIconClick();\n                return;\n            }\n\n            handleSearchIconClick();\n        }, [handleBackIconClick, handleSearchIconClick, isSearchInputActive]);\n\n        const handleIconTriggerKeyDown = useCallback(\n            (event: React.KeyboardEvent<HTMLDivElement>) => {\n                if (event.key === 'Enter' || event.key === ' ') {\n                    event.preventDefault();\n                    handleIconTriggerClick();\n                }\n            },\n            [handleIconTriggerClick],\n        );\n\n        const handleInputKeyDown = useCallback(\n            (event: React.KeyboardEvent<HTMLInputElement>) => {\n                if (event.key === 'Escape') {\n                    event.preventDefault();\n                    setIsSearchInputActive(false);\n                    iconTriggerRef.current?.focus();\n                }\n\n                if (typeof onKeyDown === 'function') {\n                    onKeyDown(event);\n                }\n            },\n            [onActiveChange, onKeyDown],\n        );\n\n        useEffect(() => {\n            if (typeof onActiveChange === 'function') {\n                onActiveChange(isSearchInputActive);\n            }\n        }, [isSearchInputActive, onActiveChange]);\n\n        useEffect(() => {\n            if (isSearchInputActive) {\n                inputRef.current?.focus();\n            }\n        }, [isSearchInputActive]);\n\n        useEffect(() => {\n            if (typeof isActive === 'boolean') {\n                setIsSearchInputActive(isActive);\n            }\n        }, [isActive]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n                blur: () => inputRef.current?.blur(),\n            }),\n            [],\n        );\n\n        const width = useMemo(\n            () => widthValue ?? parentWidth?.width,\n            [parentWidth?.width, widthValue],\n        );\n\n        return (\n            <>\n                <StyledSearchInput\n                    className=\"beta-chayns-search-input\"\n                    $size={size}\n                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                >\n                    {shouldUseAbsolutePositioning ? (\n                        <AnimatePresence initial={false}>\n                            {isSearchInputActive && (\n                                <StyledMotionSearchInputContentWrapper\n                                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                    $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                                    animate={{ opacity: 1, width }}\n                                    exit={{ opacity: 0, width: 0 }}\n                                    initial={{ opacity: 0, width: 0 }}\n                                    key=\"searchInputContentWrapper\"\n                                    transition={{ duration: 0.25, type: 'tween' }}\n                                >\n                                    <Input\n                                        onChange={onChange}\n                                        onKeyDown={handleInputKeyDown}\n                                        placeholder={placeholder}\n                                        ref={inputRef}\n                                        shouldEnableKeyboardHighlighting={\n                                            shouldEnableKeyboardHighlighting\n                                        }\n                                        shouldShowClearIcon\n                                        size={size}\n                                        value={value}\n                                    />\n                                </StyledMotionSearchInputContentWrapper>\n                            )}\n                            <StyledSearchInputIconTrigger\n                                ref={iconTriggerRef}\n                                id={\n                                    isSearchInputActive\n                                        ? 'search-input-backIcon'\n                                        : 'search-input-searchIcon'\n                                }\n                                tabIndex={0}\n                                onClick={handleIconTriggerClick}\n                                onKeyDown={handleIconTriggerKeyDown}\n                                $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                            >\n                                <StyledMotionSearchInputIconWrapperContent\n                                    animate={{ opacity: 1 }}\n                                    exit={{ opacity: 0, position: 'absolute' }}\n                                    initial={{ opacity: 0 }}\n                                    key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                    transition={{ duration: 0.3 }}\n                                    $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                                >\n                                    <Icon\n                                        key=\"icon\"\n                                        color={iconColor}\n                                        tabIndex={-1}\n                                        icons={\n                                            isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']\n                                        }\n                                    />\n                                </StyledMotionSearchInputIconWrapperContent>\n                            </StyledSearchInputIconTrigger>\n                        </AnimatePresence>\n                    ) : (\n                        <>\n                            <StyledMotionSearchInputIconWrapper>\n                                <AnimatePresence initial={false}>\n                                    <StyledSearchInputIconTrigger\n                                        ref={iconTriggerRef}\n                                        id={\n                                            isSearchInputActive\n                                                ? 'search-input-backIcon'\n                                                : 'search-input-searchIcon'\n                                        }\n                                        tabIndex={0}\n                                        onClick={handleIconTriggerClick}\n                                        onKeyDown={handleIconTriggerKeyDown}\n                                        $shouldShowKeyboardHighlighting={\n                                            shouldShowKeyboardHighlighting\n                                        }\n                                    >\n                                        <StyledMotionSearchInputIconWrapperContent\n                                            animate={{ opacity: 1 }}\n                                            exit={{ opacity: 0, position: 'absolute' }}\n                                            initial={{ opacity: 0 }}\n                                            key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                            transition={{ duration: 0.3 }}\n                                            $shouldShowKeyboardHighlighting={\n                                                shouldShowKeyboardHighlighting\n                                            }\n                                        >\n                                            <Icon\n                                                key=\"icon\"\n                                                color={iconColor}\n                                                tabIndex={-1}\n                                                icons={\n                                                    isSearchInputActive\n                                                        ? ['fa fa-arrow-left']\n                                                        : ['fa fa-search']\n                                                }\n                                            />\n                                        </StyledMotionSearchInputIconWrapperContent>\n                                    </StyledSearchInputIconTrigger>\n                                </AnimatePresence>\n                            </StyledMotionSearchInputIconWrapper>\n                            <AnimatePresence initial={false}>\n                                {isSearchInputActive && (\n                                    <StyledMotionSearchInputContentWrapper\n                                        $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                        $shouldShowKeyboardHighlighting={\n                                            shouldShowKeyboardHighlighting\n                                        }\n                                        animate={{ opacity: 1, width: '100%' }}\n                                        exit={{ opacity: 0, width: 0 }}\n                                        initial={{ opacity: 0, width: 0 }}\n                                        key=\"searchInputContentWrapper\"\n                                        transition={{ duration: 0.3 }}\n                                    >\n                                        <Input\n                                            key=\"input\"\n                                            leftElement={\n                                                <Icon\n                                                    color={theme.text}\n                                                    icons={['far fa-search']}\n                                                />\n                                            }\n                                            onChange={onChange}\n                                            onKeyDown={handleInputKeyDown}\n                                            placeholder={placeholder}\n                                            ref={inputRef}\n                                            shouldEnableKeyboardHighlighting={\n                                                shouldEnableKeyboardHighlighting\n                                            }\n                                            shouldShowClearIcon\n                                            size={size}\n                                            value={value}\n                                        />\n                                    </StyledMotionSearchInputContentWrapper>\n                                )}\n                            </AnimatePresence>\n                        </>\n                    )}\n                </StyledSearchInput>\n                <StyledSearchInputPseudoElement ref={pseudoRef} />\n            </>\n        );\n    },\n);\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","StyledSearchInputIconTrigger","StyledSearchInputPseudoElement","useTheme","useElementSize","useFocusRingPortal","useKeyboardFocusHighlighting","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","Medium","value","shouldEnableKeyboardHighlighting","width","widthValue","ref","isSearchInputActive","setIsSearchInputActive","trim","inputRef","pseudoRef","iconTriggerRef","parentWidth","theme","shouldShowKeyboardHighlighting","isEnabled","shape","handleBackIconClick","handleSearchIconClick","handleIconTriggerClick","handleIconTriggerKeyDown","event","key","preventDefault","handleInputKeyDown","current","focus","blur","createElement","Fragment","className","$size","$shouldUseAbsolutePositioning","initial","animate","opacity","exit","transition","duration","type","shouldShowClearIcon","id","tabIndex","onClick","position","color","icons","leftElement","text","displayName"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n    StyledSearchInputIconTrigger,\n    StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/element';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether the SearchInput should be positioned absolute.\n     */\n    shouldUseAbsolutePositioning?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n    /**\n     * Enables keyboard-only focus highlighting.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n    /**\n     * The width of the parent.\n     */\n    width?: number;\n};\n\nconst SearchInput = forwardRef<InputRef, SearchInputProps>(\n    (\n        {\n            iconColor,\n            isActive,\n            onActiveChange,\n            onChange,\n            onKeyDown,\n            placeholder,\n            shouldUseAbsolutePositioning = false,\n            size = InputSize.Medium,\n            value,\n            shouldEnableKeyboardHighlighting,\n            width: widthValue,\n        },\n        ref,\n    ) => {\n        const [isSearchInputActive, setIsSearchInputActive] = useState(\n            isActive ?? (typeof value === 'string' && value.trim() !== ''),\n        );\n\n        const inputRef = useRef<InputRef>(null);\n        const pseudoRef = useRef<HTMLDivElement>(null);\n        const iconTriggerRef = useRef<HTMLDivElement>(null);\n\n        const parentWidth = useElementSize(pseudoRef);\n\n        const theme = useTheme() as Theme;\n\n        const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n            shouldEnableKeyboardHighlighting,\n        );\n        useFocusRingPortal(iconTriggerRef, {\n            isEnabled: shouldShowKeyboardHighlighting,\n            shape: 'circle',\n        });\n\n        const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n        const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n        const handleIconTriggerClick = useCallback(() => {\n            if (isSearchInputActive) {\n                handleBackIconClick();\n                return;\n            }\n\n            handleSearchIconClick();\n        }, [handleBackIconClick, handleSearchIconClick, isSearchInputActive]);\n\n        const handleIconTriggerKeyDown = useCallback(\n            (event: React.KeyboardEvent<HTMLDivElement>) => {\n                if (event.key === 'Enter' || event.key === ' ') {\n                    event.preventDefault();\n                    handleIconTriggerClick();\n                }\n            },\n            [handleIconTriggerClick],\n        );\n\n        const handleInputKeyDown = useCallback(\n            (event: React.KeyboardEvent<HTMLInputElement>) => {\n                if (event.key === 'Escape') {\n                    event.preventDefault();\n                    setIsSearchInputActive(false);\n                    iconTriggerRef.current?.focus();\n                }\n\n                if (typeof onKeyDown === 'function') {\n                    onKeyDown(event);\n                }\n            },\n            [onActiveChange, onKeyDown],\n        );\n\n        useEffect(() => {\n            if (typeof onActiveChange === 'function') {\n                onActiveChange(isSearchInputActive);\n            }\n        }, [isSearchInputActive, onActiveChange]);\n\n        useEffect(() => {\n            if (isSearchInputActive) {\n                inputRef.current?.focus();\n            }\n        }, [isSearchInputActive]);\n\n        useEffect(() => {\n            if (typeof isActive === 'boolean') {\n                setIsSearchInputActive(isActive);\n            }\n        }, [isActive]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n                blur: () => inputRef.current?.blur(),\n            }),\n            [],\n        );\n\n        const width = useMemo(\n            () => widthValue ?? parentWidth?.width,\n            [parentWidth?.width, widthValue],\n        );\n\n        return (\n            <>\n                <StyledSearchInput\n                    className=\"beta-chayns-search-input\"\n                    $size={size}\n                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                >\n                    {shouldUseAbsolutePositioning ? (\n                        <AnimatePresence initial={false}>\n                            {isSearchInputActive && (\n                                <StyledMotionSearchInputContentWrapper\n                                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                    animate={{ opacity: 1, width }}\n                                    exit={{ opacity: 0, width: 0 }}\n                                    initial={{ opacity: 0, width: 0 }}\n                                    key=\"searchInputContentWrapper\"\n                                    transition={{ duration: 0.25, type: 'tween' }}\n                                >\n                                    <Input\n                                        onChange={onChange}\n                                        onKeyDown={handleInputKeyDown}\n                                        placeholder={placeholder}\n                                        ref={inputRef}\n                                        shouldEnableKeyboardHighlighting={\n                                            shouldEnableKeyboardHighlighting\n                                        }\n                                        shouldShowClearIcon\n                                        size={size}\n                                        value={value}\n                                    />\n                                </StyledMotionSearchInputContentWrapper>\n                            )}\n                            <StyledSearchInputIconTrigger\n                                ref={iconTriggerRef}\n                                id={\n                                    isSearchInputActive\n                                        ? 'search-input-backIcon'\n                                        : 'search-input-searchIcon'\n                                }\n                                tabIndex={0}\n                                onClick={handleIconTriggerClick}\n                                onKeyDown={handleIconTriggerKeyDown}\n                            >\n                                <StyledMotionSearchInputIconWrapperContent\n                                    animate={{ opacity: 1 }}\n                                    exit={{ opacity: 0, position: 'absolute' }}\n                                    initial={{ opacity: 0 }}\n                                    key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                    transition={{ duration: 0.3 }}\n                                >\n                                    <Icon\n                                        key=\"icon\"\n                                        color={iconColor}\n                                        tabIndex={-1}\n                                        icons={\n                                            isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']\n                                        }\n                                    />\n                                </StyledMotionSearchInputIconWrapperContent>\n                            </StyledSearchInputIconTrigger>\n                        </AnimatePresence>\n                    ) : (\n                        <>\n                            <StyledMotionSearchInputIconWrapper>\n                                <AnimatePresence initial={false}>\n                                    <StyledSearchInputIconTrigger\n                                        ref={iconTriggerRef}\n                                        id={\n                                            isSearchInputActive\n                                                ? 'search-input-backIcon'\n                                                : 'search-input-searchIcon'\n                                        }\n                                        tabIndex={0}\n                                        onClick={handleIconTriggerClick}\n                                        onKeyDown={handleIconTriggerKeyDown}\n                                    >\n                                        <StyledMotionSearchInputIconWrapperContent\n                                            animate={{ opacity: 1 }}\n                                            exit={{ opacity: 0, position: 'absolute' }}\n                                            initial={{ opacity: 0 }}\n                                            key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                            transition={{ duration: 0.3 }}\n                                        >\n                                            <Icon\n                                                key=\"icon\"\n                                                color={iconColor}\n                                                tabIndex={-1}\n                                                icons={\n                                                    isSearchInputActive\n                                                        ? ['fa fa-arrow-left']\n                                                        : ['fa fa-search']\n                                                }\n                                            />\n                                        </StyledMotionSearchInputIconWrapperContent>\n                                    </StyledSearchInputIconTrigger>\n                                </AnimatePresence>\n                            </StyledMotionSearchInputIconWrapper>\n                            <AnimatePresence initial={false}>\n                                {isSearchInputActive && (\n                                    <StyledMotionSearchInputContentWrapper\n                                        $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                        animate={{ opacity: 1, width: '100%' }}\n                                        exit={{ opacity: 0, width: 0 }}\n                                        initial={{ opacity: 0, width: 0 }}\n                                        key=\"searchInputContentWrapper\"\n                                        transition={{ duration: 0.3 }}\n                                    >\n                                        <Input\n                                            key=\"input\"\n                                            leftElement={\n                                                <Icon\n                                                    color={theme.text}\n                                                    icons={['far fa-search']}\n                                                />\n                                            }\n                                            onChange={onChange}\n                                            onKeyDown={handleInputKeyDown}\n                                            placeholder={placeholder}\n                                            ref={inputRef}\n                                            shouldEnableKeyboardHighlighting={\n                                                shouldEnableKeyboardHighlighting\n                                            }\n                                            shouldShowClearIcon\n                                            size={size}\n                                            value={value}\n                                        />\n                                    </StyledMotionSearchInputContentWrapper>\n                                )}\n                            </AnimatePresence>\n                        </>\n                    )}\n                </StyledSearchInput>\n                <StyledSearchInputPseudoElement ref={pseudoRef} />\n            </>\n        );\n    },\n);\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/search-input/SearchInput.styles.js

@@ -1,6 +1,5 @@
 import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
-import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledSearchInput = styled.div`
     display: flex;
     align-items: center;
@@ -44,9 +43,7 @@ export const StyledMotionSearchInputContentWrapper = styled(motion.div)`
             right: 0;
         `}
 
-    overflow: ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting ? 'visible' : 'hidden'};
+    overflow: hidden;
 `;
 export const StyledMotionSearchInputIconWrapperContent = styled(motion.div)`
     display: flex;
@@ -61,17 +58,10 @@ export const StyledSearchInputIconTrigger = styled.div`
     border-radius: 6px;
     cursor: pointer;
 
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && css`
-            &:focus-visible {
-                transition: none;
-                ${keyboardFocusHighlightingRingCss}
-                border-radius: 50%;
-                box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.35);
-                outline-offset: 2px;
-            }
-        `}
+    &:focus-visible {
+        outline: none;
+        box-shadow: none;
+    }
 `;
 export const StyledMotionSearchInputIconWrapper = styled.div`
     width: 18px;

package/lib/esm/components/search-input/SearchInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.styles.js","names":["motion","styled","css","keyboardFocusHighlightingRingCss","StyledSearchInput","div","$size","$shouldUseAbsolutePositioning","theme","StyledSearchInputPseudoElement","StyledMotionSearchInputContentWrapper","$shouldShowKeyboardHighlighting","StyledMotionSearchInputIconWrapperContent","StyledSearchInputIconTrigger","StyledMotionSearchInputIconWrapper"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledSearchInputProps = WithTheme<{\n    $size: InputSize;\n    $shouldUseAbsolutePositioning: boolean;\n}>;\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n    display: flex;\n    align-items: center;\n\n    height: ${({ $size }: StyledSearchInputProps) => ($size === 'medium' ? '42px' : '32px')};\n\n    ${({ $shouldUseAbsolutePositioning, theme }: StyledSearchInputProps) =>\n        $shouldUseAbsolutePositioning\n            ? css`\n                  justify-content: center;\n                  aspect-ratio: 1;\n                  border-radius: 3px;\n                  position: relative;\n                  cursor: pointer;\n\n                  @media (pointer: fine) {\n                      &:hover {\n                          background-color: ${theme[201]};\n                      }\n                  }\n              `\n            : css`\n                  gap: 8px;\n                  justify-content: flex-end;\n                  width: 100%;\n              `}\n`;\n\nexport const StyledSearchInputPseudoElement = styled.div`\n    position: absolute;\n    right: 0;\n    left: 0;\n`;\n\ntype StyledMotionSearchInputContentWrapperProps = {\n    $shouldUseAbsolutePositioning: boolean;\n    $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledMotionSearchInputContentWrapper = styled(\n    motion.div,\n)<StyledMotionSearchInputContentWrapperProps>`\n    ${({ $shouldUseAbsolutePositioning }) =>\n        $shouldUseAbsolutePositioning &&\n        css`\n            position: absolute;\n            top: 0;\n            right: 0;\n        `}\n\n    overflow: ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting ? 'visible' : 'hidden'};\n`;\n\ntype StyledMotionSearchInputIconWrapperContentProps = {\n    $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(\n    motion.div,\n)<StyledMotionSearchInputIconWrapperContentProps>`\n    display: flex;\n    cursor: pointer;\n`;\n\ntype StyledSearchInputIconTriggerProps = {\n    $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledSearchInputIconTrigger = styled.div<StyledSearchInputIconTriggerProps>`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border-radius: 6px;\n    cursor: pointer;\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                transition: none;\n                ${keyboardFocusHighlightingRingCss}\n                border-radius: 50%;\n                box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.35);\n                outline-offset: 2px;\n            }\n        `}\n`;\n\nexport const StyledMotionSearchInputIconWrapper = styled.div`\n    width: 18px;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,gCAAgC,QAAQ,8CAA8C;AAO/F,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAA2B;AACnE;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAA8B,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AAC3F;AACA,MAAM,CAAC;EAAEC,6BAA6B;EAAEC;AAA8B,CAAC,KAC/DD,6BAA6B,GACvBL,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8CAA8CM,KAAK,CAAC,GAAG,CAAC;AACxD;AACA;AACA,eAAe,GACDN,GAAG;AACjB;AACA;AACA;AACA,eAAe;AACf,CAAC;AAED,OAAO,MAAMO,8BAA8B,GAAGR,MAAM,CAACI,GAAG;AACxD;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMK,qCAAqC,GAAGT,MAAM,CACvDD,MAAM,CAACK,GACX,CAA6C;AAC7C,MAAM,CAAC;EAAEE;AAA8B,CAAC,KAChCA,6BAA6B,IAC7BL,GAAG;AACX;AACA;AACA;AACA,SAAS;AACT;AACA,gBAAgB,CAAC;EAAES;AAAgC,CAAC,KAC5CA,+BAA+B,GAAG,SAAS,GAAG,QAAQ;AAC9D,CAAC;AAMD,OAAO,MAAMC,yCAAyC,GAAGX,MAAM,CAC3DD,MAAM,CAACK,GACX,CAAiD;AACjD;AACA;AACA,CAAC;AAMD,OAAO,MAAMQ,4BAA4B,GAAGZ,MAAM,CAACI,GAAsC;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEM;AAAgC,CAAC,KAClCA,+BAA+B,IAC/BT,GAAG;AACX;AACA;AACA,kBAAkBC,gCAAgC;AAClD;AACA;AACA;AACA;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMW,kCAAkC,GAAGb,MAAM,CAACI,GAAG;AAC5D;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"SearchInput.styles.js","names":["motion","styled","css","StyledSearchInput","div","$size","$shouldUseAbsolutePositioning","theme","StyledSearchInputPseudoElement","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInputIconTrigger","StyledMotionSearchInputIconWrapper"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = WithTheme<{\n    $size: InputSize;\n    $shouldUseAbsolutePositioning: boolean;\n}>;\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n    display: flex;\n    align-items: center;\n\n    height: ${({ $size }: StyledSearchInputProps) => ($size === 'medium' ? '42px' : '32px')};\n\n    ${({ $shouldUseAbsolutePositioning, theme }: StyledSearchInputProps) =>\n        $shouldUseAbsolutePositioning\n            ? css`\n                  justify-content: center;\n                  aspect-ratio: 1;\n                  border-radius: 3px;\n                  position: relative;\n                  cursor: pointer;\n\n                  @media (pointer: fine) {\n                      &:hover {\n                          background-color: ${theme[201]};\n                      }\n                  }\n              `\n            : css`\n                  gap: 8px;\n                  justify-content: flex-end;\n                  width: 100%;\n              `}\n`;\n\nexport const StyledSearchInputPseudoElement = styled.div`\n    position: absolute;\n    right: 0;\n    left: 0;\n`;\n\ntype StyledMotionSearchInputContentWrapperProps = {\n    $shouldUseAbsolutePositioning: boolean;\n};\n\nexport const StyledMotionSearchInputContentWrapper = styled(\n    motion.div,\n)<StyledMotionSearchInputContentWrapperProps>`\n    ${({ $shouldUseAbsolutePositioning }) =>\n        $shouldUseAbsolutePositioning &&\n        css`\n            position: absolute;\n            top: 0;\n            right: 0;\n        `}\n\n    overflow: hidden;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)`\n    display: flex;\n    cursor: pointer;\n`;\n\nexport const StyledSearchInputIconTrigger = styled.div`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border-radius: 6px;\n    cursor: pointer;\n\n    &:focus-visible {\n        outline: none;\n        box-shadow: none;\n    }\n`;\n\nexport const StyledMotionSearchInputIconWrapper = styled.div`\n    width: 18px;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,GAA2B;AACnE;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAA8B,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AAC3F;AACA,MAAM,CAAC;EAAEC,6BAA6B;EAAEC;AAA8B,CAAC,KAC/DD,6BAA6B,GACvBJ,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8CAA8CK,KAAK,CAAC,GAAG,CAAC;AACxD;AACA;AACA,eAAe,GACDL,GAAG;AACjB;AACA;AACA;AACA,eAAe;AACf,CAAC;AAED,OAAO,MAAMM,8BAA8B,GAAGP,MAAM,CAACG,GAAG;AACxD;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMK,qCAAqC,GAAGR,MAAM,CACvDD,MAAM,CAACI,GACX,CAA6C;AAC7C,MAAM,CAAC;EAAEE;AAA8B,CAAC,KAChCA,6BAA6B,IAC7BJ,GAAG;AACX;AACA;AACA;AACA,SAAS;AACT;AACA;AACA,CAAC;AAED,OAAO,MAAMQ,yCAAyC,GAAGT,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC;AAC3E;AACA;AACA,CAAC;AAED,OAAO,MAAMO,4BAA4B,GAAGV,MAAM,CAACG,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMQ,kCAAkC,GAAGX,MAAM,CAACG,GAAG;AAC5D;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/sharing-bar/SharingBar.js

@@ -1,4 +1,5 @@
 import React, { useCallback, useRef } from 'react';
+import { useFocusRingPortal } from '../../hooks/useFocusRingPortal';
 import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
 import Icon from '../icon/Icon';
@@ -14,7 +15,11 @@ const SharingBar = ({
   const colorScheme = useColorScheme();
   const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
   const contextMenuRef = useRef(null);
+  const sharingBarRef = useRef(null);
   const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlightingEffective);
+  useFocusRingPortal(sharingBarRef, {
+    isEnabled: shouldShowKeyboardHighlighting
+  });
   const showContextMenu = useCallback(() => {
     contextMenuRef.current?.show();
   }, []);
@@ -27,6 +32,12 @@ const SharingBar = ({
     if (event.currentTarget !== event.target) {
       return;
     }
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      event.stopPropagation();
+      contextMenuRef.current?.hide();
+      return;
+    }
     if (event.key !== 'Enter' && event.key !== ' ') {
       return;
     }
@@ -35,6 +46,7 @@ const SharingBar = ({
     showContextMenu();
   }, [showContextMenu]);
   return /*#__PURE__*/React.createElement(StyledSharingBar, {
+    ref: sharingBarRef,
     onClick: handleSharingBarClick,
     onKeyDown: shouldEnableKeyboardHighlightingEffective ? handleKeyDown : undefined,
     tabIndex: shouldEnableKeyboardHighlightingEffective ? 0 : undefined,

package/lib/esm/components/sharing-bar/SharingBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SharingBar.js","names":["React","useCallback","useRef","useKeyboardFocusHighlighting","useColorScheme","Icon","StyledSharingBar","StyledSharingBarIconWrapper","StyledSharingBarText","SharingContextMenu","SharingBar","label","link","popupAlignment","container","shouldEnableKeyboardHighlighting","colorScheme","shouldEnableKeyboardHighlightingEffective","contextMenuRef","shouldShowKeyboardHighlighting","showContextMenu","current","show","handleSharingBarClick","event","preventDefault","stopPropagation","handleKeyDown","currentTarget","target","key","createElement","onClick","onKeyDown","undefined","tabIndex","role","icons","ref","alignment","shouldDisableClick","displayName"],"sources":["../../../../src/components/sharing-bar/SharingBar.tsx"],"sourcesContent":["import React, { FC, KeyboardEventHandler, MouseEventHandler, useCallback, useRef } from 'react';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledSharingBar,\n    StyledSharingBarIconWrapper,\n    StyledSharingBarText,\n} from './SharingBar.styles';\nimport type { ContextMenuAlignment } from '../context-menu/ContextMenu.types';\nimport SharingContextMenu from '../sharing-context-menu/SharingContextMenu';\n\nexport type SharingBarProps = {\n    /**\n     * The element where the content of the `SharingBar` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The label that should be displayed.\n     */\n    label: string;\n    /**\n     * The link that should be shared.\n     */\n    link: string;\n    /**\n     * The alignment of the sharing options.\n     */\n    popupAlignment: ContextMenuAlignment;\n    /**\n     * Enables keyboard-only focus highlighting and keyboard interaction.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst SharingBar: FC<SharingBarProps> = ({\n    label,\n    link,\n    popupAlignment,\n    container,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const colorScheme = useColorScheme();\n    const shouldEnableKeyboardHighlightingEffective =\n        shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n    const contextMenuRef = useRef<{ hide: VoidFunction; show: VoidFunction }>(null);\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlightingEffective,\n    );\n\n    const showContextMenu = useCallback(() => {\n        contextMenuRef.current?.show();\n    }, []);\n\n    const handleSharingBarClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            showContextMenu();\n        },\n        [showContextMenu],\n    );\n\n    const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (event.currentTarget !== event.target) {\n                return;\n            }\n\n            if (event.key !== 'Enter' && event.key !== ' ') {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n            showContextMenu();\n        },\n        [showContextMenu],\n    );\n\n    return (\n        <StyledSharingBar\n            onClick={handleSharingBarClick}\n            onKeyDown={shouldEnableKeyboardHighlightingEffective ? handleKeyDown : undefined}\n            tabIndex={shouldEnableKeyboardHighlightingEffective ? 0 : undefined}\n            role={shouldEnableKeyboardHighlightingEffective ? 'button' : undefined}\n            data-should-show-keyboard-highlighting={\n                shouldShowKeyboardHighlighting ? 'true' : undefined\n            }\n        >\n            <StyledSharingBarIconWrapper>\n                <Icon icons={['fa fa-share-nodes']} />\n            </StyledSharingBarIconWrapper>\n            <SharingContextMenu\n                link={link}\n                ref={contextMenuRef}\n                alignment={popupAlignment}\n                container={container}\n                shouldDisableClick\n            >\n                {null}\n            </SharingContextMenu>\n            <StyledSharingBarText>{label}</StyledSharingBarText>\n        </StyledSharingBar>\n    );\n};\n\nSharingBar.displayName = 'SharingBar';\n\nexport default SharingBar;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAiDC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAC/F,SAASC,4BAA4B,QAAQ,0CAA0C;AACvF,SAASC,cAAc,QAAQ,8CAA8C;AAC7E,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,gBAAgB,EAChBC,2BAA2B,EAC3BC,oBAAoB,QACjB,qBAAqB;AAE5B,OAAOC,kBAAkB,MAAM,4CAA4C;AAyB3E,MAAMC,UAA+B,GAAGA,CAAC;EACrCC,KAAK;EACLC,IAAI;EACJC,cAAc;EACdC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,WAAW,GAAGZ,cAAc,CAAC,CAAC;EACpC,MAAMa,yCAAyC,GAC3CF,gCAAgC,IAAIC,WAAW,EAAED,gCAAgC,IAAI,KAAK;EAE9F,MAAMG,cAAc,GAAGhB,MAAM,CAA6C,IAAI,CAAC;EAC/E,MAAMiB,8BAA8B,GAAGhB,4BAA4B,CAC/Dc,yCACJ,CAAC;EAED,MAAMG,eAAe,GAAGnB,WAAW,CAAC,MAAM;IACtCiB,cAAc,CAACG,OAAO,EAAEC,IAAI,CAAC,CAAC;EAClC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,qBAAqB,GAAGtB,WAAW,CACpCuB,KAAK,IAAK;IACPA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAEvBN,eAAe,CAAC,CAAC;EACrB,CAAC,EACD,CAACA,eAAe,CACpB,CAAC;EAED,MAAMO,aAAa,GAAG1B,WAAW,CAC5BuB,KAAK,IAAK;IACP,IAAIA,KAAK,CAACI,aAAa,KAAKJ,KAAK,CAACK,MAAM,EAAE;MACtC;IACJ;IAEA,IAAIL,KAAK,CAACM,GAAG,KAAK,OAAO,IAAIN,KAAK,CAACM,GAAG,KAAK,GAAG,EAAE;MAC5C;IACJ;IAEAN,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IACvBN,eAAe,CAAC,CAAC;EACrB,CAAC,EACD,CAACA,eAAe,CACpB,CAAC;EAED,oBACIpB,KAAA,CAAA+B,aAAA,CAACzB,gBAAgB;IACb0B,OAAO,EAAET,qBAAsB;IAC/BU,SAAS,EAAEhB,yCAAyC,GAAGU,aAAa,GAAGO,SAAU;IACjFC,QAAQ,EAAElB,yCAAyC,GAAG,CAAC,GAAGiB,SAAU;IACpEE,IAAI,EAAEnB,yCAAyC,GAAG,QAAQ,GAAGiB,SAAU;IACvE,0CACIf,8BAA8B,GAAG,MAAM,GAAGe;EAC7C,gBAEDlC,KAAA,CAAA+B,aAAA,CAACxB,2BAA2B,qBACxBP,KAAA,CAAA+B,aAAA,CAAC1B,IAAI;IAACgC,KAAK,EAAE,CAAC,mBAAmB;EAAE,CAAE,CACZ,CAAC,eAC9BrC,KAAA,CAAA+B,aAAA,CAACtB,kBAAkB;IACfG,IAAI,EAAEA,IAAK;IACX0B,GAAG,EAAEpB,cAAe;IACpBqB,SAAS,EAAE1B,cAAe;IAC1BC,SAAS,EAAEA,SAAU;IACrB0B,kBAAkB;EAAA,GAEjB,IACe,CAAC,eACrBxC,KAAA,CAAA+B,aAAA,CAACvB,oBAAoB,QAAEG,KAA4B,CACrC,CAAC;AAE3B,CAAC;AAEDD,UAAU,CAAC+B,WAAW,GAAG,YAAY;AAErC,eAAe/B,UAAU","ignoreList":[]}
+{"version":3,"file":"SharingBar.js","names":["React","useCallback","useRef","useFocusRingPortal","useKeyboardFocusHighlighting","useColorScheme","Icon","StyledSharingBar","StyledSharingBarIconWrapper","StyledSharingBarText","SharingContextMenu","SharingBar","label","link","popupAlignment","container","shouldEnableKeyboardHighlighting","colorScheme","shouldEnableKeyboardHighlightingEffective","contextMenuRef","sharingBarRef","shouldShowKeyboardHighlighting","isEnabled","showContextMenu","current","show","handleSharingBarClick","event","preventDefault","stopPropagation","handleKeyDown","currentTarget","target","key","hide","createElement","ref","onClick","onKeyDown","undefined","tabIndex","role","icons","alignment","shouldDisableClick","displayName"],"sources":["../../../../src/components/sharing-bar/SharingBar.tsx"],"sourcesContent":["import React, { FC, KeyboardEventHandler, MouseEventHandler, useCallback, useRef } from 'react';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledSharingBar,\n    StyledSharingBarIconWrapper,\n    StyledSharingBarText,\n} from './SharingBar.styles';\nimport type { ContextMenuAlignment } from '../context-menu/ContextMenu.types';\nimport SharingContextMenu from '../sharing-context-menu/SharingContextMenu';\n\nexport type SharingBarProps = {\n    /**\n     * The element where the content of the `SharingBar` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The label that should be displayed.\n     */\n    label: string;\n    /**\n     * The link that should be shared.\n     */\n    link: string;\n    /**\n     * The alignment of the sharing options.\n     */\n    popupAlignment: ContextMenuAlignment;\n    /**\n     * Enables keyboard-only focus highlighting and keyboard interaction.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst SharingBar: FC<SharingBarProps> = ({\n    label,\n    link,\n    popupAlignment,\n    container,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const colorScheme = useColorScheme();\n    const shouldEnableKeyboardHighlightingEffective =\n        shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n    const contextMenuRef = useRef<{ hide: VoidFunction; show: VoidFunction }>(null);\n    const sharingBarRef = useRef<HTMLDivElement>(null);\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlightingEffective,\n    );\n    useFocusRingPortal(sharingBarRef, { isEnabled: shouldShowKeyboardHighlighting });\n\n    const showContextMenu = useCallback(() => {\n        contextMenuRef.current?.show();\n    }, []);\n\n    const handleSharingBarClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            showContextMenu();\n        },\n        [showContextMenu],\n    );\n\n    const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (event.currentTarget !== event.target) {\n                return;\n            }\n\n            if (event.key === 'Escape') {\n                event.preventDefault();\n                event.stopPropagation();\n                contextMenuRef.current?.hide();\n                return;\n            }\n\n            if (event.key !== 'Enter' && event.key !== ' ') {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n            showContextMenu();\n        },\n        [showContextMenu],\n    );\n\n    return (\n        <StyledSharingBar\n            ref={sharingBarRef}\n            onClick={handleSharingBarClick}\n            onKeyDown={shouldEnableKeyboardHighlightingEffective ? handleKeyDown : undefined}\n            tabIndex={shouldEnableKeyboardHighlightingEffective ? 0 : undefined}\n            role={shouldEnableKeyboardHighlightingEffective ? 'button' : undefined}\n            data-should-show-keyboard-highlighting={\n                shouldShowKeyboardHighlighting ? 'true' : undefined\n            }\n        >\n            <StyledSharingBarIconWrapper>\n                <Icon icons={['fa fa-share-nodes']} />\n            </StyledSharingBarIconWrapper>\n            <SharingContextMenu\n                link={link}\n                ref={contextMenuRef}\n                alignment={popupAlignment}\n                container={container}\n                shouldDisableClick\n            >\n                {null}\n            </SharingContextMenu>\n            <StyledSharingBarText>{label}</StyledSharingBarText>\n        </StyledSharingBar>\n    );\n};\n\nSharingBar.displayName = 'SharingBar';\n\nexport default SharingBar;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/sharing-bar/SharingBar.styles.js

@@ -1,14 +1,10 @@
 import styled from 'styled-components';
-import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledSharingBar = styled.div`
+    border-radius: 4px;
     cursor: pointer;
     display: flex;
     align-items: center;
     width: fit-content;
-
-    &[data-should-show-keyboard-highlighting='true']:focus-visible {
-        ${keyboardFocusHighlightingRingCss}
-    }
 `;
 export const StyledSharingBarIconWrapper = styled.div`
     margin-right: -4px;

package/lib/esm/components/sharing-bar/SharingBar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SharingBar.styles.js","names":["styled","keyboardFocusHighlightingRingCss","StyledSharingBar","div","StyledSharingBarIconWrapper","StyledSharingBarText","p","theme","text"],"sources":["../../../../src/components/sharing-bar/SharingBar.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\nexport const StyledSharingBar = styled.div`\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    width: fit-content;\n\n    &[data-should-show-keyboard-highlighting='true']:focus-visible {\n        ${keyboardFocusHighlightingRingCss}\n    }\n`;\n\nexport const StyledSharingBarIconWrapper = styled.div`\n    margin-right: -4px;\n`;\n\ntype StyledSharingBarTextProps = WithTheme<unknown>;\n\nexport const StyledSharingBarText = styled.p<StyledSharingBarTextProps>`\n    color: ${({ theme }: StyledSharingBarTextProps) => theme.text};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAASC,gCAAgC,QAAQ,8CAA8C;AAE/F,OAAO,MAAMC,gBAAgB,GAAGF,MAAM,CAACG,GAAG;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA,UAAUF,gCAAgC;AAC1C;AACA,CAAC;AAED,OAAO,MAAMG,2BAA2B,GAAGJ,MAAM,CAACG,GAAG;AACrD;AACA,CAAC;AAID,OAAO,MAAME,oBAAoB,GAAGL,MAAM,CAACM,CAA4B;AACvE,aAAa,CAAC;EAAEC;AAAiC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACjE,CAAC","ignoreList":[]}
+{"version":3,"file":"SharingBar.styles.js","names":["styled","StyledSharingBar","div","StyledSharingBarIconWrapper","StyledSharingBarText","p","theme","text"],"sources":["../../../../src/components/sharing-bar/SharingBar.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSharingBar = styled.div`\n    border-radius: 4px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    width: fit-content;\n`;\n\nexport const StyledSharingBarIconWrapper = styled.div`\n    margin-right: -4px;\n`;\n\ntype StyledSharingBarTextProps = WithTheme<unknown>;\n\nexport const StyledSharingBarText = styled.p<StyledSharingBarTextProps>`\n    color: ${({ theme }: StyledSharingBarTextProps) => theme.text};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,gBAAgB,GAAGD,MAAM,CAACE,GAAG;AAC1C;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGH,MAAM,CAACE,GAAG;AACrD;AACA,CAAC;AAID,OAAO,MAAME,oBAAoB,GAAGJ,MAAM,CAACK,CAA4B;AACvE,aAAa,CAAC;EAAEC;AAAiC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACjE,CAAC","ignoreList":[]}

package/lib/esm/components/slider/Slider.js

@@ -2,6 +2,7 @@ import { setRefreshScrollEnabled } from 'chayns-api';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTheme } from 'styled-components';
 import { useElementSize } from '../../hooks/element';
+import { useFocusRingPortal } from '../../hooks/useFocusRingPortal';
 import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import { calculateGradientOffset, calculatePopupPosition, fillSlider, getThumbMaxWidth } from '../../utils/slider';
 import { StyledHighlightedStep, StyledSlider, StyledSliderInput, StyledSliderThumb, StyledSliderThumbLabel } from './Slider.styles';
@@ -39,6 +40,16 @@ const Slider = ({
   const sliderWrapperSize = useElementSize(sliderWrapperRef);
   const theme = useTheme();
   const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
+  useFocusRingPortal(fromSliderRef, {
+    isEnabled: shouldShowKeyboardHighlighting && isFromThumbFocused,
+    overlayRef: fromSliderThumbRef,
+    shape: 'circle'
+  });
+  useFocusRingPortal(toSliderRef, {
+    isEnabled: shouldShowKeyboardHighlighting && isToThumbFocused,
+    overlayRef: toSliderThumbRef,
+    shape: 'circle'
+  });
   const updateFromValue = useCallback(nextValue => {
     previousFromValueRef.current = nextValue;
     setFromValue(nextValue);
@@ -320,7 +331,6 @@ const Slider = ({
     onChange: handleInputChange,
     onMouseUp: handleMouseUp,
     $background: fromInputBackground,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     onFocus: () => {
       setIsFromThumbFocused(true);
       setIsToThumbFocused(false);
@@ -331,8 +341,7 @@ const Slider = ({
   }), /*#__PURE__*/React.createElement(StyledSliderThumb, {
     ref: fromSliderThumbRef,
     $position: fromSliderThumbPosition,
-    $isBigSlider: isBigSlider,
-    $shouldShowFocusRing: shouldShowKeyboardHighlighting && isFromThumbFocused
+    $isBigSlider: isBigSlider
   }, shouldShowThumbLabel && /*#__PURE__*/React.createElement(StyledSliderThumbLabel, {
     $width: thumbWidth,
     $isBigSlider: isBigSlider,
@@ -341,8 +350,7 @@ const Slider = ({
   }, typeof thumbLabelFormatter === 'function' ? thumbLabelFormatter(fromValue) : fromValue)), interval && /*#__PURE__*/React.createElement(StyledSliderThumb, {
     ref: toSliderThumbRef,
     $position: toSliderThumbPosition,
-    $isBigSlider: isBigSlider,
-    $shouldShowFocusRing: shouldShowKeyboardHighlighting && isToThumbFocused
+    $isBigSlider: isBigSlider
   }, shouldShowThumbLabel && /*#__PURE__*/React.createElement(StyledSliderThumbLabel, {
     $width: thumbWidth,
     $isBigSlider: isBigSlider,
@@ -370,7 +378,6 @@ const Slider = ({
     onTouchEnd: handleTouchEnd,
     onChange: handleControlToSlider,
     onMouseUp: handleMouseUp,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     onFocus: () => {
       setIsToThumbFocused(true);
       setIsFromThumbFocused(false);