@chayns-components/core 5.5.30 → 5.5.34

package/lib/cjs/components/multi-action-button/action-button/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.js","names":["_react","require","_react2","_interopRequireDefault","_Icon","_Tooltip","_ActionButton","_popup","e","__esModule","default","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","onFocus","onBlur","showLabel","shouldUseContentWidth","height","shouldShowKeyboardHighlighting","_action$disabledReaso","_action$status","_action$status2","isPrimary","isSecondary","actionColor","color","isActionDisabled","Boolean","disabledReason","trim","shouldShowDisabledReason","iconSize","actionContent","createElement","StyledActionContent","StyledIconSlot","$height","$isDisabled","icon","icons","size","AnimatePresence","initial","StyledLabelWrapper","animate","opacity","width","marginLeft","exit","transition","StyledSecondaryLabel","style","label","StyledActionButton","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isInteractionDisabled","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$statusType","type","$shouldUseContentWidth","$shouldShowKeyboardHighlighting","alignment","PopupAlignment","BottomRight","item","text","maxItemWidth","displayName","_default","exports"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, FocusEventHandler, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport Tooltip from '../../tooltip/Tooltip';\nimport {\n    StyledActionButton,\n    StyledActionContent,\n    StyledIconSlot,\n    StyledLabelWrapper,\n    StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\nimport { PopupAlignment } from '../../../types/popup';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n    action: MultiActionButtonAction;\n    actionType: 'primary' | 'secondary';\n    backgroundColor?: string;\n    isCollapsed: boolean;\n    isDisabled: boolean;\n    isExpanded?: boolean;\n    isHidden?: boolean;\n    isShrunk?: boolean;\n    isSolo?: boolean;\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n    onFocus?: FocusEventHandler<HTMLButtonElement>;\n    onBlur?: FocusEventHandler<HTMLButtonElement>;\n    showLabel: boolean;\n    shouldUseContentWidth: boolean;\n    height: number;\n    shouldShowKeyboardHighlighting?: boolean;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n    action,\n    actionType,\n    backgroundColor,\n    isCollapsed,\n    isDisabled,\n    isExpanded,\n    isHidden,\n    isShrunk,\n    isSolo,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    onFocus,\n    onBlur,\n    showLabel,\n    shouldUseContentWidth,\n    height,\n    shouldShowKeyboardHighlighting = false,\n}) => {\n    const isPrimary = actionType === 'primary';\n    const isSecondary = actionType === 'secondary';\n    const actionColor = action.color ?? '#FFFFFF';\n    const isActionDisabled = isDisabled || Boolean(action.isDisabled);\n    const disabledReason = action.disabledReason?.trim();\n    const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;\n    const iconSize = height - 24;\n\n    const actionContent = (\n        <StyledActionContent>\n            <StyledIconSlot $height={height} $isDisabled={isActionDisabled}>\n                {typeof action.icon === 'string' ? (\n                    <Icon icons={[action.icon]} color={actionColor} size={iconSize} />\n                ) : (\n                    action.icon\n                )}\n            </StyledIconSlot>\n            <AnimatePresence initial={false}>\n                {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n                {showLabel && (\n                    <StyledLabelWrapper\n                        animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n                        exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n                        initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n                        transition={LABEL_TRANSITION}\n                    >\n                        <StyledSecondaryLabel style={{ color: actionColor }}>\n                            {action.label}\n                        </StyledSecondaryLabel>\n                    </StyledLabelWrapper>\n                )}\n            </AnimatePresence>\n        </StyledActionContent>\n    );\n\n    return (\n        <StyledActionButton\n            aria-disabled={isActionDisabled}\n            disabled={isActionDisabled && !shouldShowDisabledReason}\n            $backgroundColor={backgroundColor}\n            $isCollapsed={isCollapsed}\n            $isExpanded={isSecondary ? isExpanded : undefined}\n            $isInteractionDisabled={isActionDisabled}\n            $isHidden={isSecondary ? isHidden : undefined}\n            $isPrimary={isPrimary}\n            $isSecondary={isSecondary}\n            $isShrunk={isPrimary ? isShrunk : undefined}\n            $isSolo={isPrimary ? isSolo : undefined}\n            $pulseColors={action.status?.pulseColors}\n            $height={height}\n            $statusType={action.status?.type}\n            $shouldUseContentWidth={shouldUseContentWidth}\n            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n            onClick={onClick}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            type=\"button\"\n        >\n            {shouldShowDisabledReason && disabledReason ? (\n                <Tooltip\n                    alignment={PopupAlignment.BottomRight}\n                    item={{ text: disabledReason }}\n                    maxItemWidth={400}\n                >\n                    {actionContent}\n                </Tooltip>\n            ) : (\n                actionContent\n            )}\n        </StyledActionButton>\n    );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ActionButton.js","names":["_react","require","_react2","_interopRequireWildcard","_useFocusRingPortal","_Icon","_interopRequireDefault","_Tooltip","_ActionButton","_popup","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","onFocus","onBlur","showLabel","shouldUseContentWidth","height","shouldShowKeyboardHighlighting","_action$disabledReaso","_action$status","_action$status2","actionButtonRef","useRef","isPrimary","isSecondary","actionColor","color","isActionDisabled","Boolean","disabledReason","trim","shouldShowDisabledReason","iconSize","useFocusRingPortal","isEnabled","actionContent","createElement","StyledActionContent","StyledIconSlot","$height","$isDisabled","icon","icons","size","AnimatePresence","initial","StyledLabelWrapper","animate","opacity","width","marginLeft","exit","transition","StyledSecondaryLabel","style","label","StyledActionButton","ref","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isInteractionDisabled","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$statusType","type","$shouldUseContentWidth","alignment","PopupAlignment","BottomRight","item","text","maxItemWidth","displayName","_default","exports"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, FocusEventHandler, MouseEvent, useRef } from 'react';\nimport { useFocusRingPortal } from '../../../hooks/useFocusRingPortal';\nimport Icon from '../../icon/Icon';\nimport Tooltip from '../../tooltip/Tooltip';\nimport {\n    StyledActionButton,\n    StyledActionContent,\n    StyledIconSlot,\n    StyledLabelWrapper,\n    StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\nimport { PopupAlignment } from '../../../types/popup';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n    action: MultiActionButtonAction;\n    actionType: 'primary' | 'secondary';\n    backgroundColor?: string;\n    isCollapsed: boolean;\n    isDisabled: boolean;\n    isExpanded?: boolean;\n    isHidden?: boolean;\n    isShrunk?: boolean;\n    isSolo?: boolean;\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n    onFocus?: FocusEventHandler<HTMLButtonElement>;\n    onBlur?: FocusEventHandler<HTMLButtonElement>;\n    showLabel: boolean;\n    shouldUseContentWidth: boolean;\n    height: number;\n    shouldShowKeyboardHighlighting?: boolean;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n    action,\n    actionType,\n    backgroundColor,\n    isCollapsed,\n    isDisabled,\n    isExpanded,\n    isHidden,\n    isShrunk,\n    isSolo,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    onFocus,\n    onBlur,\n    showLabel,\n    shouldUseContentWidth,\n    height,\n    shouldShowKeyboardHighlighting = false,\n}) => {\n    const actionButtonRef = useRef<HTMLButtonElement>(null);\n\n    const isPrimary = actionType === 'primary';\n    const isSecondary = actionType === 'secondary';\n    const actionColor = action.color ?? '#FFFFFF';\n    const isActionDisabled = isDisabled || Boolean(action.isDisabled);\n    const disabledReason = action.disabledReason?.trim();\n    const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;\n    const iconSize = height - 24;\n\n    useFocusRingPortal(actionButtonRef, {\n        isEnabled: shouldShowKeyboardHighlighting && !isActionDisabled,\n    });\n\n    const actionContent = (\n        <StyledActionContent>\n            <StyledIconSlot $height={height} $isDisabled={isActionDisabled}>\n                {typeof action.icon === 'string' ? (\n                    <Icon icons={[action.icon]} color={actionColor} size={iconSize} />\n                ) : (\n                    action.icon\n                )}\n            </StyledIconSlot>\n            <AnimatePresence initial={false}>\n                {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n                {showLabel && (\n                    <StyledLabelWrapper\n                        animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n                        exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n                        initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n                        transition={LABEL_TRANSITION}\n                    >\n                        <StyledSecondaryLabel style={{ color: actionColor }}>\n                            {action.label}\n                        </StyledSecondaryLabel>\n                    </StyledLabelWrapper>\n                )}\n            </AnimatePresence>\n        </StyledActionContent>\n    );\n\n    return (\n        <StyledActionButton\n            ref={actionButtonRef}\n            aria-disabled={isActionDisabled}\n            disabled={isActionDisabled && !shouldShowDisabledReason}\n            $backgroundColor={backgroundColor}\n            $isCollapsed={isCollapsed}\n            $isExpanded={isSecondary ? isExpanded : undefined}\n            $isInteractionDisabled={isActionDisabled}\n            $isHidden={isSecondary ? isHidden : undefined}\n            $isPrimary={isPrimary}\n            $isSecondary={isSecondary}\n            $isShrunk={isPrimary ? isShrunk : undefined}\n            $isSolo={isPrimary ? isSolo : undefined}\n            $pulseColors={action.status?.pulseColors}\n            $height={height}\n            $statusType={action.status?.type}\n            $shouldUseContentWidth={shouldUseContentWidth}\n            onClick={onClick}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            type=\"button\"\n        >\n            {shouldShowDisabledReason && disabledReason ? (\n                <Tooltip\n                    alignment={PopupAlignment.BottomRight}\n                    item={{ text: disabledReason }}\n                    maxItemWidth={400}\n                >\n                    {actionContent}\n                </Tooltip>\n            ) : (\n                actionContent\n            )}\n        </StyledActionButton>\n    );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/multi-action-button/action-button/ActionButton.styles.js

@@ -177,18 +177,9 @@ const StyledActionButton = exports.StyledActionButton = _styledComponents.defaul
             }
         `}
 
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
-            &:focus-visible {
-                transition: none;
-                z-index: 1;
-                outline: solid 2px color-mix(in srgb, currentColor 70%, transparent);
-                box-shadow: inset 0 0 0 2px rgba(0, 102, 204, 0.25);
-                outline-offset: -2px;
-                color: white;
-            }
-        `}
+    &:focus-visible {
+        outline: none;
+    }
 `;
 const StyledActionContent = exports.StyledActionContent = _styledComponents.default.span`
     align-items: center;

package/lib/cjs/components/multi-action-button/action-button/ActionButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_MultiActionButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","pulse","color1","color2","keyframes","StyledActionButton","exports","styled","button","$height","$backgroundColor","theme","primary","$shouldUseContentWidth","css","$isExpanded","props","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$isInteractionDisabled","$statusType","$pulseColors","MultiActionButtonStatusType","Pulse","$shouldShowKeyboardHighlighting","StyledActionContent","span","StyledIconSlot","$isDisabled","StyledLabelWrapper","motion","StyledSecondaryLabel"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from '../MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n    $backgroundColor?: string;\n    $isCollapsed?: boolean;\n    $isExpanded?: boolean;\n    $isHidden?: boolean;\n    $isPrimary?: boolean;\n    $isSecondary?: boolean;\n    $isShrunk?: boolean;\n    $isSolo?: boolean;\n    $pulseColors?: [string, string];\n    $isInteractionDisabled?: boolean;\n    $height: number;\n    $statusType?: MultiActionButtonStatusType;\n    $shouldUseContentWidth?: boolean;\n    $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nconst pulse = (color1: string, color2: string) => keyframes`\n    0% {\n        background: ${color1};\n    }\n    50% {\n        background: ${color2};\n    }\n    100% {\n        background: ${color1};\n    }\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n    align-items: center;\n    border: none;\n    border-radius: ${({ $height }) => $height / 2}px;\n    cursor: pointer;\n    display: inline-flex;\n    flex: 1 1 auto;\n    height: ${({ $height }) => $height}px;\n    line-height: 22px;\n    min-height: ${({ $height }) => $height}px;\n    overflow: hidden;\n    padding: 0;\n    position: relative;\n    transition:\n        background-color 0.2s ease,\n        border-radius 0.2s ease,\n        color 0.2s ease,\n        flex-grow 0.2s ease,\n        opacity 0.2s ease,\n        padding 0.2s ease,\n        width 0.2s ease;\n    user-select: none;\n    white-space: nowrap;\n\n    background-color: ${({ $backgroundColor, theme }) =>\n        $backgroundColor || theme?.primary || '#000'};\n    color: #fff;\n\n    /* When width is content-driven, avoid flex stretching. */\n    ${({ $shouldUseContentWidth }) =>\n        $shouldUseContentWidth &&\n        css`\n            flex: 0 1 auto;\n        `}\n\n    /* Expanded secondary button when width is not content-driven. */\n    ${({ $isExpanded, $shouldUseContentWidth }) =>\n        $isExpanded &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Collapsed state clamps to a fixed icon size. */\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Primary action stretches unless content-driven. */\n    ${({ $isPrimary, $isCollapsed, $shouldUseContentWidth }) =>\n        $isPrimary &&\n        !$isCollapsed &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Shrink the primary action to icon size when secondary is expanded. */\n    ${(props) =>\n        props.$isShrunk &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Keep secondary icon-only when collapsed and not expanded. */\n    ${(props) =>\n        props.$isSecondary &&\n        !props.$isExpanded &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Fully hide the secondary action when the whole control is collapsed. */\n    ${({ $isHidden }) =>\n        $isHidden &&\n        css`\n            opacity: 0;\n            pointer-events: none;\n            width: 0;\n        `}\n\n    /* Joining both buttons into a pill shape. */\n    ${({ $isPrimary }) =>\n        $isPrimary &&\n        css`\n            border-bottom-right-radius: 0;\n            border-top-right-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isPrimary &&\n        props.$isCollapsed &&\n        css`\n            border-bottom-right-radius: ${props.$height / 2}px;\n            border-top-right-radius: ${props.$height / 2}px;\n        `}\n\n    ${({ $isSecondary }) =>\n        $isSecondary &&\n        css`\n            border-bottom-left-radius: 0;\n            border-top-left-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isSolo &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    ${({ $isInteractionDisabled }) =>\n        $isInteractionDisabled &&\n        css`\n            cursor: default;\n        `}\n\n    /* Optional pulse overlay used by status. */\n    ${({ $statusType, $pulseColors }) =>\n        $statusType === MultiActionButtonStatusType.Pulse &&\n        css`\n            overflow: hidden;\n\n            &::before {\n                animation: ${pulse($pulseColors?.[0] || '#A50000', $pulseColors?.[1] || '#630000')}\n                    1.6s ease-in-out infinite;\n                border-radius: 3px;\n                content: '';\n                inset: 0;\n                pointer-events: none;\n                position: absolute;\n            }\n        `}\n\n    &:disabled {\n        cursor: default;\n    }\n\n    ${({ $isInteractionDisabled, $backgroundColor, theme }) =>\n        !$isInteractionDisabled &&\n        css`\n            &:hover:not(:disabled) {\n                background-color: ${`color-mix(in srgb, ${$backgroundColor || theme?.primary || '#000'} 85%, black)`};\n            }\n        `}\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                transition: none;\n                z-index: 1;\n                outline: solid 2px color-mix(in srgb, currentColor 70%, transparent);\n                box-shadow: inset 0 0 0 2px rgba(0, 102, 204, 0.25);\n                outline-offset: -2px;\n                color: white;\n            }\n        `}\n`;\n\nexport const StyledActionContent = styled.span`\n    align-items: center;\n    display: inline-flex;\n    flex: 1 1 auto;\n    gap: 0;\n    min-width: 0;\n    position: relative;\n    z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span<{ $height: number; $isDisabled?: boolean }>`\n    align-items: center;\n    display: inline-flex;\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height}px;\n    justify-content: center;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n    width: ${({ $height }) => $height}px;\n`;\n\nexport const StyledLabelWrapper = styled(motion.span)`\n    /* The wrapper animates width/margin to avoid layout jumps. */\n    display: inline-flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-align: left;\n`;\n\nexport const StyledSecondaryLabel = styled.span`\n    display: block;\n    flex: 1 1 auto;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    padding-right: 18px;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ActionButton.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_MultiActionButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","pulse","color1","color2","keyframes","StyledActionButton","exports","styled","button","$height","$backgroundColor","theme","primary","$shouldUseContentWidth","css","$isExpanded","props","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$isInteractionDisabled","$statusType","$pulseColors","MultiActionButtonStatusType","Pulse","StyledActionContent","span","StyledIconSlot","$isDisabled","StyledLabelWrapper","motion","StyledSecondaryLabel"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from '../MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n    $backgroundColor?: string;\n    $isCollapsed?: boolean;\n    $isExpanded?: boolean;\n    $isHidden?: boolean;\n    $isPrimary?: boolean;\n    $isSecondary?: boolean;\n    $isShrunk?: boolean;\n    $isSolo?: boolean;\n    $pulseColors?: [string, string];\n    $isInteractionDisabled?: boolean;\n    $height: number;\n    $statusType?: MultiActionButtonStatusType;\n    $shouldUseContentWidth?: boolean;\n}>;\n\nconst pulse = (color1: string, color2: string) => keyframes`\n    0% {\n        background: ${color1};\n    }\n    50% {\n        background: ${color2};\n    }\n    100% {\n        background: ${color1};\n    }\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n    align-items: center;\n    border: none;\n    border-radius: ${({ $height }) => $height / 2}px;\n    cursor: pointer;\n    display: inline-flex;\n    flex: 1 1 auto;\n    height: ${({ $height }) => $height}px;\n    line-height: 22px;\n    min-height: ${({ $height }) => $height}px;\n    overflow: hidden;\n    padding: 0;\n    position: relative;\n    transition:\n        background-color 0.2s ease,\n        border-radius 0.2s ease,\n        color 0.2s ease,\n        flex-grow 0.2s ease,\n        opacity 0.2s ease,\n        padding 0.2s ease,\n        width 0.2s ease;\n    user-select: none;\n    white-space: nowrap;\n\n    background-color: ${({ $backgroundColor, theme }) =>\n        $backgroundColor || theme?.primary || '#000'};\n    color: #fff;\n\n    /* When width is content-driven, avoid flex stretching. */\n    ${({ $shouldUseContentWidth }) =>\n        $shouldUseContentWidth &&\n        css`\n            flex: 0 1 auto;\n        `}\n\n    /* Expanded secondary button when width is not content-driven. */\n    ${({ $isExpanded, $shouldUseContentWidth }) =>\n        $isExpanded &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Collapsed state clamps to a fixed icon size. */\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Primary action stretches unless content-driven. */\n    ${({ $isPrimary, $isCollapsed, $shouldUseContentWidth }) =>\n        $isPrimary &&\n        !$isCollapsed &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Shrink the primary action to icon size when secondary is expanded. */\n    ${(props) =>\n        props.$isShrunk &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Keep secondary icon-only when collapsed and not expanded. */\n    ${(props) =>\n        props.$isSecondary &&\n        !props.$isExpanded &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Fully hide the secondary action when the whole control is collapsed. */\n    ${({ $isHidden }) =>\n        $isHidden &&\n        css`\n            opacity: 0;\n            pointer-events: none;\n            width: 0;\n        `}\n\n    /* Joining both buttons into a pill shape. */\n    ${({ $isPrimary }) =>\n        $isPrimary &&\n        css`\n            border-bottom-right-radius: 0;\n            border-top-right-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isPrimary &&\n        props.$isCollapsed &&\n        css`\n            border-bottom-right-radius: ${props.$height / 2}px;\n            border-top-right-radius: ${props.$height / 2}px;\n        `}\n\n    ${({ $isSecondary }) =>\n        $isSecondary &&\n        css`\n            border-bottom-left-radius: 0;\n            border-top-left-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isSolo &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    ${({ $isInteractionDisabled }) =>\n        $isInteractionDisabled &&\n        css`\n            cursor: default;\n        `}\n\n    /* Optional pulse overlay used by status. */\n    ${({ $statusType, $pulseColors }) =>\n        $statusType === MultiActionButtonStatusType.Pulse &&\n        css`\n            overflow: hidden;\n\n            &::before {\n                animation: ${pulse($pulseColors?.[0] || '#A50000', $pulseColors?.[1] || '#630000')}\n                    1.6s ease-in-out infinite;\n                border-radius: 3px;\n                content: '';\n                inset: 0;\n                pointer-events: none;\n                position: absolute;\n            }\n        `}\n\n    &:disabled {\n        cursor: default;\n    }\n\n    ${({ $isInteractionDisabled, $backgroundColor, theme }) =>\n        !$isInteractionDisabled &&\n        css`\n            &:hover:not(:disabled) {\n                background-color: ${`color-mix(in srgb, ${$backgroundColor || theme?.primary || '#000'} 85%, black)`};\n            }\n        `}\n\n    &:focus-visible {\n        outline: none;\n    }\n`;\n\nexport const StyledActionContent = styled.span`\n    align-items: center;\n    display: inline-flex;\n    flex: 1 1 auto;\n    gap: 0;\n    min-width: 0;\n    position: relative;\n    z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span<{ $height: number; $isDisabled?: boolean }>`\n    align-items: center;\n    display: inline-flex;\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height}px;\n    justify-content: center;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n    width: ${({ $height }) => $height}px;\n`;\n\nexport const StyledLabelWrapper = styled(motion.span)`\n    /* The wrapper animates width/margin to avoid layout jumps. */\n    display: inline-flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-align: left;\n`;\n\nexport const StyledSecondaryLabel = styled.span`\n    display: block;\n    flex: 1 1 auto;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    padding-right: 18px;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/radio-button/RadioButton.js

@@ -9,6 +9,7 @@ var _react2 = _interopRequireWildcard(require("react"));
 var _RadioButtonGroup = require("./radio-button-group/RadioButtonGroup");
 var _RadioButton = require("./RadioButton.styles");
 var _calculate = require("../../utils/calculate");
+var _useFocusRingPortal = require("../../hooks/useFocusRingPortal");
 var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 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 RadioButton = ({
@@ -33,12 +34,17 @@ const RadioButton = ({
   const [isHovered, setIsHovered] = (0, _react2.useState)(false);
   const [radioButtonTop, setRadioButtonTop] = (0, _react2.useState)(undefined);
   const radioButtonBoxRef = (0, _react2.useRef)(null);
+  const radioButtonInputRef = (0, _react2.useRef)(null);
   const radioButtonRootRef = (0, _react2.useRef)(null);
   const isInGroup = typeof updateSelectedRadioButtonId === 'function';
   const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;
   const uncheckable = radioButtonsCanBeUnchecked;
   const effectiveShouldEnableKeyboardHighlighting = shouldEnableKeyboardHighlightingFromGroup ?? shouldEnableKeyboardHighlighting;
   const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(effectiveShouldEnableKeyboardHighlighting && !isDisabled);
+  (0, _useFocusRingPortal.useFocusRingPortal)(radioButtonInputRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    shape: 'circle'
+  });
   (0, _react2.useEffect)(() => {
     if (radioButtonRootRef.current && !shouldShowCentered) {
       var _radioButtonBoxRef$cu;
@@ -127,13 +133,13 @@ const RadioButton = ({
     ref: radioButtonRootRef,
     $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
   }, /*#__PURE__*/_react2.default.createElement(_RadioButton.StyledRadioButtonCheckBox, {
+    ref: radioButtonInputRef,
     onClick: handleClick,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     onKeyDown: handleKeyDown,
     disabled: isDisabled,
     $isDisabled: isDisabled,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     type: "radio",
     checked: isMarked,
     onChange: () => {}

package/lib/cjs/components/radio-button/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","names":["_react","require","_react2","_interopRequireWildcard","_RadioButtonGroup","_RadioButton","_calculate","_useKeyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","RadioButton","children","shouldShowRightElementOnlyOnChecked","label","id","rightElement","shouldShowCentered","isDisabled","shouldEnableKeyboardHighlighting","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonRightElements","updateHasRightElement","radioButtonsCanBeUnchecked","shouldEnableKeyboardHighlightingFromGroup","useContext","RadioButtonGroupContext","internalIsChecked","setInternalIsChecked","useState","isHovered","setIsHovered","radioButtonTop","setRadioButtonTop","undefined","radioButtonBoxRef","useRef","radioButtonRootRef","isInGroup","isMarked","uncheckable","effectiveShouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useEffect","current","_radioButtonBoxRef$cu","singleLineHeight","getHeightOfSingleTextLine","container","boxHeight","getBoundingClientRect","height","handleClick","useCallback","prev","handleMouseEnter","handleMouseLeave","handleKeyDown","event","key","preventDefault","radioButtonRightElementMargin","useMemo","index","findIndex","element","prevButton","currentButton","nextButton","hasRightElement","shouldShowRightElement","window","setTimeout","createElement","StyledRadioButton","$isDisabled","$radioButtonRightElementMargin","StyledRadioButtonWrapper","ref","$shouldShowKeyboardHighlighting","StyledRadioButtonCheckBox","onClick","onMouseEnter","onMouseLeave","onKeyDown","disabled","type","checked","onChange","StyledRadioButtonPseudoCheckBox","$isChecked","style","top","transform","StyledRadioButtonCheckBoxMark","$isHovered","$isSelected","StyledLabelWrapper","StyledRadioButtonLabel","AnimatePresence","initial","StyledMotionRadioButtonChildren","animate","opacity","transition","duration","displayName","_default","exports"],"sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    FC,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useState,\n    type ReactNode,\n    useRef,\n} from 'react';\nimport { RadioButtonRightElementMargin } from '../../types/radioButton';\nimport { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';\nimport {\n    StyledLabelWrapper,\n    StyledMotionRadioButtonChildren,\n    StyledRadioButton,\n    StyledRadioButtonCheckBox,\n    StyledRadioButtonCheckBoxMark,\n    StyledRadioButtonLabel,\n    StyledRadioButtonPseudoCheckBox,\n    StyledRadioButtonWrapper,\n} from './RadioButton.styles';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport type RadioButtonProps = {\n    /**\n     * The children that should be displayed after the RadioButton is checked.\n     */\n    children?: ReactNode;\n    /**\n     * whether the RadioButton should be shown.\n     */\n    isDisabled?: boolean;\n    /**\n     * The id of the radio button.\n     */\n    id: string | number;\n    /**\n     * The label that should be displayed next to the radio button.\n     */\n    label?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the label.\n     */\n    rightElement?: ReactNode;\n    /**\n     * Whether the rightElement should only be displayed when the RadioButton is checked\n     */\n    shouldShowRightElementOnlyOnChecked?: boolean;\n    /**\n     * Whether the RadioButton should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst RadioButton: FC<RadioButtonProps> = ({\n    children,\n    shouldShowRightElementOnlyOnChecked = false,\n    label,\n    id,\n    rightElement,\n    shouldShowCentered = true,\n    isDisabled = false,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const {\n        selectedRadioButtonId,\n        updateSelectedRadioButtonId,\n        radioButtonRightElements,\n        updateHasRightElement,\n        radioButtonsCanBeUnchecked,\n        shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingFromGroup,\n    } = useContext(RadioButtonGroupContext);\n\n    const [internalIsChecked, setInternalIsChecked] = useState(false);\n    const [isHovered, setIsHovered] = useState(false);\n    const [radioButtonTop, setRadioButtonTop] = useState<number | undefined>(undefined);\n\n    const radioButtonBoxRef = useRef<HTMLDivElement>(null);\n    const radioButtonRootRef = useRef<HTMLDivElement>(null);\n\n    const isInGroup = typeof updateSelectedRadioButtonId === 'function';\n\n    const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;\n\n    const uncheckable = radioButtonsCanBeUnchecked;\n\n    const effectiveShouldEnableKeyboardHighlighting =\n        shouldEnableKeyboardHighlightingFromGroup ?? shouldEnableKeyboardHighlighting;\n\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        effectiveShouldEnableKeyboardHighlighting && !isDisabled,\n    );\n\n    useEffect(() => {\n        if (radioButtonRootRef.current && !shouldShowCentered) {\n            const singleLineHeight = getHeightOfSingleTextLine({\n                container: radioButtonRootRef.current,\n            });\n\n            const boxHeight = radioButtonBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n            setRadioButtonTop((singleLineHeight - boxHeight) / 2);\n        }\n    }, [shouldShowCentered]);\n\n    const handleClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (uncheckable) {\n            if (updateSelectedRadioButtonId) {\n                updateSelectedRadioButtonId(id === selectedRadioButtonId ? undefined : id);\n            }\n            setInternalIsChecked((prev) => !prev);\n            return;\n        }\n        if (typeof updateSelectedRadioButtonId === 'function') {\n            updateSelectedRadioButtonId(id);\n        }\n        setInternalIsChecked(true);\n    }, [id, isDisabled, uncheckable, selectedRadioButtonId, updateSelectedRadioButtonId]);\n\n    const handleMouseEnter = useCallback(() => {\n        if (!isDisabled) {\n            setIsHovered(true);\n        }\n    }, [isDisabled]);\n\n    const handleMouseLeave = () => {\n        setIsHovered(false);\n    };\n\n    const handleKeyDown = useCallback(\n        (event: React.KeyboardEvent<HTMLInputElement>) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                handleClick();\n            }\n        },\n        [handleClick],\n    );\n\n    const radioButtonRightElementMargin: RadioButtonRightElementMargin = useMemo(() => {\n        if (!radioButtonRightElements) {\n            return 'NONE';\n        }\n\n        const index = radioButtonRightElements.findIndex((element) => element.id === id);\n\n        if (index < 0) {\n            return 'NONE';\n        }\n\n        const prevButton = radioButtonRightElements[index - 1];\n        const currentButton = radioButtonRightElements[index];\n        const nextButton = radioButtonRightElements[index + 1];\n\n        if (!currentButton?.hasRightElement) {\n            return 'NONE';\n        }\n\n        switch (true) {\n            case prevButton?.hasRightElement && !nextButton?.hasRightElement:\n                return 'TOP';\n            case !prevButton?.hasRightElement && nextButton?.hasRightElement:\n                return 'BOTTOM';\n            case currentButton?.hasRightElement &&\n                !nextButton?.hasRightElement &&\n                !prevButton?.hasRightElement:\n                return 'NONE';\n            default:\n                return 'BOTH';\n        }\n    }, [id, radioButtonRightElements]);\n\n    const shouldShowRightElement = useMemo(() => {\n        if (rightElement) {\n            if (shouldShowRightElementOnlyOnChecked) {\n                return isMarked;\n            }\n\n            return true;\n        }\n\n        return false;\n    }, [isMarked, rightElement, shouldShowRightElementOnlyOnChecked]);\n\n    useEffect(() => {\n        if (typeof updateHasRightElement === 'function') {\n            window.setTimeout(() => {\n                updateHasRightElement(id, shouldShowRightElement);\n            }, 10);\n        }\n    }, [id, shouldShowRightElement, updateHasRightElement]);\n\n    return useMemo(\n        () => (\n            <StyledRadioButton\n                $isDisabled={isDisabled}\n                $radioButtonRightElementMargin={radioButtonRightElementMargin}\n            >\n                <StyledRadioButtonWrapper\n                    ref={radioButtonRootRef}\n                    $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                >\n                    <StyledRadioButtonCheckBox\n                        onClick={handleClick}\n                        onMouseEnter={handleMouseEnter}\n                        onMouseLeave={handleMouseLeave}\n                        onKeyDown={handleKeyDown}\n                        disabled={isDisabled}\n                        $isDisabled={isDisabled}\n                        $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                        type=\"radio\"\n                        checked={isMarked}\n                        onChange={() => {}}\n                    />\n                    <StyledRadioButtonPseudoCheckBox\n                        $isDisabled={isDisabled}\n                        $isChecked={isMarked}\n                        ref={radioButtonBoxRef}\n                        onClick={handleClick}\n                        style={{\n                            top: shouldShowCentered ? '50%' : radioButtonTop,\n                            transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n                        }}\n                    >\n                        <StyledRadioButtonCheckBoxMark\n                            onMouseEnter={handleMouseEnter}\n                            onMouseLeave={handleMouseLeave}\n                            $isHovered={isHovered}\n                            $isSelected={isMarked}\n                            $isDisabled={isDisabled}\n                        />\n                    </StyledRadioButtonPseudoCheckBox>\n                    <StyledLabelWrapper>\n                        {label && (\n                            <StyledRadioButtonLabel\n                                $isDisabled={isDisabled}\n                                onClick={handleClick}\n                                onMouseEnter={handleMouseEnter}\n                                onMouseLeave={handleMouseLeave}\n                            >\n                                {label}\n                            </StyledRadioButtonLabel>\n                        )}\n                        {shouldShowRightElement && rightElement}\n                    </StyledLabelWrapper>\n                </StyledRadioButtonWrapper>\n                {children && (\n                    <AnimatePresence initial={false}>\n                        <StyledMotionRadioButtonChildren\n                            animate={\n                                isMarked\n                                    ? { opacity: 1, height: 'auto' }\n                                    : { opacity: 0, height: 0 }\n                            }\n                            transition={{ duration: 0.2 }}\n                        >\n                            {children}\n                        </StyledMotionRadioButtonChildren>\n                    </AnimatePresence>\n                )}\n            </StyledRadioButton>\n        ),\n        [\n            children,\n            handleClick,\n            handleKeyDown,\n            handleMouseEnter,\n            isDisabled,\n            isHovered,\n            isMarked,\n            label,\n            radioButtonRightElementMargin,\n            radioButtonTop,\n            rightElement,\n            shouldShowCentered,\n            shouldShowKeyboardHighlighting,\n            shouldShowRightElement,\n        ],\n    );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"RadioButton.js","names":["_react","require","_react2","_interopRequireWildcard","_RadioButtonGroup","_RadioButton","_calculate","_useFocusRingPortal","_useKeyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","RadioButton","children","shouldShowRightElementOnlyOnChecked","label","id","rightElement","shouldShowCentered","isDisabled","shouldEnableKeyboardHighlighting","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonRightElements","updateHasRightElement","radioButtonsCanBeUnchecked","shouldEnableKeyboardHighlightingFromGroup","useContext","RadioButtonGroupContext","internalIsChecked","setInternalIsChecked","useState","isHovered","setIsHovered","radioButtonTop","setRadioButtonTop","undefined","radioButtonBoxRef","useRef","radioButtonInputRef","radioButtonRootRef","isInGroup","isMarked","uncheckable","effectiveShouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","shape","useEffect","current","_radioButtonBoxRef$cu","singleLineHeight","getHeightOfSingleTextLine","container","boxHeight","getBoundingClientRect","height","handleClick","useCallback","prev","handleMouseEnter","handleMouseLeave","handleKeyDown","event","key","preventDefault","radioButtonRightElementMargin","useMemo","index","findIndex","element","prevButton","currentButton","nextButton","hasRightElement","shouldShowRightElement","window","setTimeout","createElement","StyledRadioButton","$isDisabled","$radioButtonRightElementMargin","StyledRadioButtonWrapper","ref","$shouldShowKeyboardHighlighting","StyledRadioButtonCheckBox","onClick","onMouseEnter","onMouseLeave","onKeyDown","disabled","type","checked","onChange","StyledRadioButtonPseudoCheckBox","$isChecked","style","top","transform","StyledRadioButtonCheckBoxMark","$isHovered","$isSelected","StyledLabelWrapper","StyledRadioButtonLabel","AnimatePresence","initial","StyledMotionRadioButtonChildren","animate","opacity","transition","duration","displayName","_default","exports"],"sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    FC,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useState,\n    type ReactNode,\n    useRef,\n} from 'react';\nimport { RadioButtonRightElementMargin } from '../../types/radioButton';\nimport { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';\nimport {\n    StyledLabelWrapper,\n    StyledMotionRadioButtonChildren,\n    StyledRadioButton,\n    StyledRadioButtonCheckBox,\n    StyledRadioButtonCheckBoxMark,\n    StyledRadioButtonLabel,\n    StyledRadioButtonPseudoCheckBox,\n    StyledRadioButtonWrapper,\n} from './RadioButton.styles';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport type RadioButtonProps = {\n    /**\n     * The children that should be displayed after the RadioButton is checked.\n     */\n    children?: ReactNode;\n    /**\n     * whether the RadioButton should be shown.\n     */\n    isDisabled?: boolean;\n    /**\n     * The id of the radio button.\n     */\n    id: string | number;\n    /**\n     * The label that should be displayed next to the radio button.\n     */\n    label?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the label.\n     */\n    rightElement?: ReactNode;\n    /**\n     * Whether the rightElement should only be displayed when the RadioButton is checked\n     */\n    shouldShowRightElementOnlyOnChecked?: boolean;\n    /**\n     * Whether the RadioButton should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst RadioButton: FC<RadioButtonProps> = ({\n    children,\n    shouldShowRightElementOnlyOnChecked = false,\n    label,\n    id,\n    rightElement,\n    shouldShowCentered = true,\n    isDisabled = false,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const {\n        selectedRadioButtonId,\n        updateSelectedRadioButtonId,\n        radioButtonRightElements,\n        updateHasRightElement,\n        radioButtonsCanBeUnchecked,\n        shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingFromGroup,\n    } = useContext(RadioButtonGroupContext);\n\n    const [internalIsChecked, setInternalIsChecked] = useState(false);\n    const [isHovered, setIsHovered] = useState(false);\n    const [radioButtonTop, setRadioButtonTop] = useState<number | undefined>(undefined);\n\n    const radioButtonBoxRef = useRef<HTMLDivElement>(null);\n    const radioButtonInputRef = useRef<HTMLInputElement>(null);\n    const radioButtonRootRef = useRef<HTMLDivElement>(null);\n\n    const isInGroup = typeof updateSelectedRadioButtonId === 'function';\n\n    const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;\n\n    const uncheckable = radioButtonsCanBeUnchecked;\n\n    const effectiveShouldEnableKeyboardHighlighting =\n        shouldEnableKeyboardHighlightingFromGroup ?? shouldEnableKeyboardHighlighting;\n\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        effectiveShouldEnableKeyboardHighlighting && !isDisabled,\n    );\n    useFocusRingPortal(radioButtonInputRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        shape: 'circle',\n    });\n\n    useEffect(() => {\n        if (radioButtonRootRef.current && !shouldShowCentered) {\n            const singleLineHeight = getHeightOfSingleTextLine({\n                container: radioButtonRootRef.current,\n            });\n\n            const boxHeight = radioButtonBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n            setRadioButtonTop((singleLineHeight - boxHeight) / 2);\n        }\n    }, [shouldShowCentered]);\n\n    const handleClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (uncheckable) {\n            if (updateSelectedRadioButtonId) {\n                updateSelectedRadioButtonId(id === selectedRadioButtonId ? undefined : id);\n            }\n            setInternalIsChecked((prev) => !prev);\n            return;\n        }\n        if (typeof updateSelectedRadioButtonId === 'function') {\n            updateSelectedRadioButtonId(id);\n        }\n        setInternalIsChecked(true);\n    }, [id, isDisabled, uncheckable, selectedRadioButtonId, updateSelectedRadioButtonId]);\n\n    const handleMouseEnter = useCallback(() => {\n        if (!isDisabled) {\n            setIsHovered(true);\n        }\n    }, [isDisabled]);\n\n    const handleMouseLeave = () => {\n        setIsHovered(false);\n    };\n\n    const handleKeyDown = useCallback(\n        (event: React.KeyboardEvent<HTMLInputElement>) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                handleClick();\n            }\n        },\n        [handleClick],\n    );\n\n    const radioButtonRightElementMargin: RadioButtonRightElementMargin = useMemo(() => {\n        if (!radioButtonRightElements) {\n            return 'NONE';\n        }\n\n        const index = radioButtonRightElements.findIndex((element) => element.id === id);\n\n        if (index < 0) {\n            return 'NONE';\n        }\n\n        const prevButton = radioButtonRightElements[index - 1];\n        const currentButton = radioButtonRightElements[index];\n        const nextButton = radioButtonRightElements[index + 1];\n\n        if (!currentButton?.hasRightElement) {\n            return 'NONE';\n        }\n\n        switch (true) {\n            case prevButton?.hasRightElement && !nextButton?.hasRightElement:\n                return 'TOP';\n            case !prevButton?.hasRightElement && nextButton?.hasRightElement:\n                return 'BOTTOM';\n            case currentButton?.hasRightElement &&\n                !nextButton?.hasRightElement &&\n                !prevButton?.hasRightElement:\n                return 'NONE';\n            default:\n                return 'BOTH';\n        }\n    }, [id, radioButtonRightElements]);\n\n    const shouldShowRightElement = useMemo(() => {\n        if (rightElement) {\n            if (shouldShowRightElementOnlyOnChecked) {\n                return isMarked;\n            }\n\n            return true;\n        }\n\n        return false;\n    }, [isMarked, rightElement, shouldShowRightElementOnlyOnChecked]);\n\n    useEffect(() => {\n        if (typeof updateHasRightElement === 'function') {\n            window.setTimeout(() => {\n                updateHasRightElement(id, shouldShowRightElement);\n            }, 10);\n        }\n    }, [id, shouldShowRightElement, updateHasRightElement]);\n\n    return useMemo(\n        () => (\n            <StyledRadioButton\n                $isDisabled={isDisabled}\n                $radioButtonRightElementMargin={radioButtonRightElementMargin}\n            >\n                <StyledRadioButtonWrapper\n                    ref={radioButtonRootRef}\n                    $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                >\n                    <StyledRadioButtonCheckBox\n                        ref={radioButtonInputRef}\n                        onClick={handleClick}\n                        onMouseEnter={handleMouseEnter}\n                        onMouseLeave={handleMouseLeave}\n                        onKeyDown={handleKeyDown}\n                        disabled={isDisabled}\n                        $isDisabled={isDisabled}\n                        type=\"radio\"\n                        checked={isMarked}\n                        onChange={() => {}}\n                    />\n                    <StyledRadioButtonPseudoCheckBox\n                        $isDisabled={isDisabled}\n                        $isChecked={isMarked}\n                        ref={radioButtonBoxRef}\n                        onClick={handleClick}\n                        style={{\n                            top: shouldShowCentered ? '50%' : radioButtonTop,\n                            transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n                        }}\n                    >\n                        <StyledRadioButtonCheckBoxMark\n                            onMouseEnter={handleMouseEnter}\n                            onMouseLeave={handleMouseLeave}\n                            $isHovered={isHovered}\n                            $isSelected={isMarked}\n                            $isDisabled={isDisabled}\n                        />\n                    </StyledRadioButtonPseudoCheckBox>\n                    <StyledLabelWrapper>\n                        {label && (\n                            <StyledRadioButtonLabel\n                                $isDisabled={isDisabled}\n                                onClick={handleClick}\n                                onMouseEnter={handleMouseEnter}\n                                onMouseLeave={handleMouseLeave}\n                            >\n                                {label}\n                            </StyledRadioButtonLabel>\n                        )}\n                        {shouldShowRightElement && rightElement}\n                    </StyledLabelWrapper>\n                </StyledRadioButtonWrapper>\n                {children && (\n                    <AnimatePresence initial={false}>\n                        <StyledMotionRadioButtonChildren\n                            animate={\n                                isMarked\n                                    ? { opacity: 1, height: 'auto' }\n                                    : { opacity: 0, height: 0 }\n                            }\n                            transition={{ duration: 0.2 }}\n                        >\n                            {children}\n                        </StyledMotionRadioButtonChildren>\n                    </AnimatePresence>\n                )}\n            </StyledRadioButton>\n        ),\n        [\n            children,\n            handleClick,\n            handleKeyDown,\n            handleMouseEnter,\n            isDisabled,\n            isHovered,\n            isMarked,\n            label,\n            radioButtonRightElementMargin,\n            radioButtonTop,\n            rightElement,\n            shouldShowCentered,\n            shouldShowKeyboardHighlighting,\n            shouldShowRightElement,\n        ],\n    );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/radio-button/RadioButton.styles.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledRadioButtonWrapper = exports.StyledRadioButtonPseudoCheckBox = exports.StyledRadioButtonLabel = exports.StyledRadioButtonCheckBoxMark = exports.StyledRadioButtonCheckBox = exports.StyledRadioButton = exports.StyledMotionRadioButtonChildren = exports.StyledLabelWrapper = void 0;
 var _react = require("motion/react");
 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 StyledRadioButton = exports.StyledRadioButton = _styledComponents.default.span`
     display: flex;
@@ -75,15 +74,6 @@ const StyledRadioButtonCheckBox = exports.StyledRadioButtonCheckBox = _styledCom
     cursor: ${({
   $isDisabled
 }) => $isDisabled ? 'default !important' : 'pointer !important'};
-
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
-            &:focus-visible + ${StyledRadioButtonPseudoCheckBox} {
-                transition: none;
-                ${_keyboardFocusHighlighting.keyboardFocusHighlightingCircleRingCss}
-            }
-        `}
 `;
 const StyledRadioButtonCheckBoxMark = exports.StyledRadioButtonCheckBoxMark = _styledComponents.default.span`
     background-color: transparent;

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledRadioButton","exports","styled","span","$isDisabled","$radioButtonRightElementMargin","css","StyledRadioButtonWrapper","div","StyledRadioButtonPseudoCheckBox","theme","$isChecked","StyledRadioButtonCheckBox","input","$shouldShowKeyboardHighlighting","keyboardFocusHighlightingCircleRingCss","StyledRadioButtonCheckBoxMark","$isHovered","$isSelected","StyledRadioButtonLabel","text","StyledLabelWrapper","StyledMotionRadioButtonChildren","motion"],"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":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAGA,IAAAG,0BAAA,GAAAH,OAAA;AAAsG,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,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;AAO/F,MAAMkB,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,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,OAAO,IAAAC,qBAAG;AAC1B;AACA,iBAAiB;IACL,KAAK,KAAK;MACN,OAAO,IAAAA,qBAAG;AAC1B;AACA,iBAAiB;IACL,KAAK,QAAQ;MACT,OAAO,IAAAA,qBAAG;AAC1B;AACA,iBAAiB;IACL,KAAK,MAAM;IACX;MACI,OAAO,IAAAA,qBAAG;AAC1B;AACA,iBAAiB;EACT;AACJ,CAAC;AACL,CAAC;AAMM,MAAMC,wBAAwB,GAAAN,OAAA,CAAAM,wBAAA,GAAGL,yBAAM,CAACM,GAAkC;AACjF;AACA;AACA;AACA;AACA;AACA,CAAC;AAOM,MAAMC,+BAA+B,GAAAR,OAAA,CAAAQ,+BAAA,GAAGP,yBAAM,CAACM,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;EAAEN;AAAkD,CAAC,KAC5DA,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AACjE,CAAC;AAOM,MAAMQ,yBAAyB,GAAAX,OAAA,CAAAW,yBAAA,GAAGV,yBAAM,CAACW,KAAqC;AACrF;AACA;AACA;AACA,cAAc,CAAC;EAAET;AAA4C,CAAC,KACtDA,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AACjE;AACA,MAAM,CAAC;EAAEU;AAAgC,CAAC,KAClCA,+BAA+B,IAC/B,IAAAR,qBAAG;AACX,gCAAgCG,+BAA+B;AAC/D;AACA,kBAAkBM,iEAAsC;AACxD;AACA,SAAS;AACT,CAAC;AAQM,MAAMC,6BAA6B,GAAAf,OAAA,CAAAe,6BAAA,GAAGd,yBAAM,CAACC,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;EAAEa,UAAU;EAAEC;AAAY,CAAC,KAAK;EAC/B,IAAIA,WAAW,EAAE;IACb,OAAO,IAAAZ,qBAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIW,UAAU,EAAE;IACZ,OAAO,IAAAX,qBAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAO,IAAAA,qBAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAIM,MAAMa,sBAAsB,GAAAlB,OAAA,CAAAkB,sBAAA,GAAGjB,yBAAM,CAACM,GAAgC;AAC7E,aAAa,CAAC;EAAEE;AAAmC,CAAC,KAAKA,KAAK,CAACU,IAAI;AACnE;AACA,cAAc,CAAC;EAAEhB;AAAyC,CAAC,KACnDA,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AACjE,CAAC;AAEM,MAAMiB,kBAAkB,GAAApB,OAAA,CAAAoB,kBAAA,GAAGnB,yBAAM,CAACM,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMc,+BAA+B,GAAArB,OAAA,CAAAqB,+BAAA,GAAG,IAAApB,yBAAM,EACjDqB,aAAM,CAACf,GACX,CAAuC;AACvC;AACA;AACA;AACA,aAAa,CAAC;EAAEE;AAA4C,CAAC,KAAKA,KAAK,CAACU,IAAI;AAC5E,CAAC","ignoreList":[]}
+{"version":3,"file":"RadioButton.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledRadioButton","exports","styled","span","$isDisabled","$radioButtonRightElementMargin","css","StyledRadioButtonWrapper","div","StyledRadioButtonPseudoCheckBox","theme","$isChecked","StyledRadioButtonCheckBox","input","StyledRadioButtonCheckBoxMark","$isHovered","$isSelected","StyledRadioButtonLabel","text","StyledLabelWrapper","StyledMotionRadioButtonChildren","motion"],"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":"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","ignoreList":[]}

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

@@ -11,6 +11,7 @@ var _Input = _interopRequireWildcard(require("../input/Input"));
 var _SearchInput = require("./SearchInput.styles");
 var _styledComponents = require("styled-components");
 var _element = require("../../hooks/element");
+var _useFocusRingPortal = require("../../hooks/useFocusRingPortal");
 var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
@@ -34,6 +35,10 @@ const SearchInput = /*#__PURE__*/(0, _react2.forwardRef)(({
   const parentWidth = (0, _element.useElementSize)(pseudoRef);
   const theme = (0, _styledComponents.useTheme)();
   const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting);
+  (0, _useFocusRingPortal.useFocusRingPortal)(iconTriggerRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    shape: 'circle'
+  });
   const handleBackIconClick = (0, _react2.useCallback)(() => setIsSearchInputActive(false), []);
   const handleSearchIconClick = (0, _react2.useCallback)(() => setIsSearchInputActive(true), []);
   const handleIconTriggerClick = (0, _react2.useCallback)(() => {
@@ -95,7 +100,6 @@ const SearchInput = /*#__PURE__*/(0, _react2.forwardRef)(({
     initial: false
   }, isSearchInputActive && /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputContentWrapper, {
     $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     animate: {
       opacity: 1,
       width
@@ -127,8 +131,7 @@ const SearchInput = /*#__PURE__*/(0, _react2.forwardRef)(({
     id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon',
     tabIndex: 0,
     onClick: handleIconTriggerClick,
-    onKeyDown: handleIconTriggerKeyDown,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
+    onKeyDown: handleIconTriggerKeyDown
   }, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapperContent, {
     animate: {
       opacity: 1
@@ -143,8 +146,7 @@ const SearchInput = /*#__PURE__*/(0, _react2.forwardRef)(({
     key: isSearchInputActive ? 'backIcon' : 'searchIcon',
     transition: {
       duration: 0.3
-    },
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
+    }
   }, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
     key: "icon",
     color: iconColor,
@@ -157,8 +159,7 @@ const SearchInput = /*#__PURE__*/(0, _react2.forwardRef)(({
     id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon',
     tabIndex: 0,
     onClick: handleIconTriggerClick,
-    onKeyDown: handleIconTriggerKeyDown,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
+    onKeyDown: handleIconTriggerKeyDown
   }, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapperContent, {
     animate: {
       opacity: 1
@@ -173,8 +174,7 @@ const SearchInput = /*#__PURE__*/(0, _react2.forwardRef)(({
     key: isSearchInputActive ? 'backIcon' : 'searchIcon',
     transition: {
       duration: 0.3
-    },
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
+    }
   }, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
     key: "icon",
     color: iconColor,
@@ -184,7 +184,6 @@ const SearchInput = /*#__PURE__*/(0, _react2.forwardRef)(({
     initial: false
   }, isSearchInputActive && /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputContentWrapper, {
     $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     animate: {
       opacity: 1,
       width: '100%'

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":["_react","require","_react2","_interopRequireWildcard","_Icon","_interopRequireDefault","_Input","_SearchInput","_styledComponents","_element","_useKeyboardFocusHighlighting","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SearchInput","forwardRef","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","InputSize","Medium","value","shouldEnableKeyboardHighlighting","width","widthValue","ref","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","pseudoRef","iconTriggerRef","parentWidth","useElementSize","theme","useTheme","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","handleBackIconClick","useCallback","handleSearchIconClick","handleIconTriggerClick","handleIconTriggerKeyDown","event","key","preventDefault","handleInputKeyDown","_iconTriggerRef$curre","current","focus","useEffect","_inputRef$current","useImperativeHandle","_inputRef$current2","blur","_inputRef$current3","useMemo","createElement","Fragment","StyledSearchInput","className","$size","$shouldUseAbsolutePositioning","AnimatePresence","initial","StyledMotionSearchInputContentWrapper","$shouldShowKeyboardHighlighting","animate","opacity","exit","transition","duration","type","shouldShowClearIcon","StyledSearchInputIconTrigger","id","tabIndex","onClick","StyledMotionSearchInputIconWrapperContent","position","color","icons","StyledMotionSearchInputIconWrapper","leftElement","text","StyledSearchInputPseudoElement","displayName","_default","exports"],"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":["_react","require","_react2","_interopRequireWildcard","_Icon","_interopRequireDefault","_Input","_SearchInput","_styledComponents","_element","_useFocusRingPortal","_useKeyboardFocusHighlighting","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SearchInput","forwardRef","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","InputSize","Medium","value","shouldEnableKeyboardHighlighting","width","widthValue","ref","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","pseudoRef","iconTriggerRef","parentWidth","useElementSize","theme","useTheme","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","shape","handleBackIconClick","useCallback","handleSearchIconClick","handleIconTriggerClick","handleIconTriggerKeyDown","event","key","preventDefault","handleInputKeyDown","_iconTriggerRef$curre","current","focus","useEffect","_inputRef$current","useImperativeHandle","_inputRef$current2","blur","_inputRef$current3","useMemo","createElement","Fragment","StyledSearchInput","className","$size","$shouldUseAbsolutePositioning","AnimatePresence","initial","StyledMotionSearchInputContentWrapper","animate","opacity","exit","transition","duration","type","shouldShowClearIcon","StyledSearchInputIconTrigger","id","tabIndex","onClick","StyledMotionSearchInputIconWrapperContent","position","color","icons","StyledMotionSearchInputIconWrapper","leftElement","text","StyledSearchInputPseudoElement","displayName","_default","exports"],"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/cjs/components/search-input/SearchInput.styles.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledSearchInputPseudoElement = exports.StyledSearchInputIconTrigger = exports.StyledSearchInput = exports.StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputIconWrapper = exports.StyledMotionSearchInputContentWrapper = void 0;
 var _react = require("motion/react");
 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 StyledSearchInput = exports.StyledSearchInput = _styledComponents.default.div`
     display: flex;
@@ -51,9 +50,7 @@ const StyledMotionSearchInputContentWrapper = exports.StyledMotionSearchInputCon
             right: 0;
         `}
 
-    overflow: ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting ? 'visible' : 'hidden'};
+    overflow: hidden;
 `;
 const StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputIconWrapperContent = (0, _styledComponents.default)(_react.motion.div)`
     display: flex;
@@ -68,17 +65,10 @@ const StyledSearchInputIconTrigger = exports.StyledSearchInputIconTrigger = _sty
     border-radius: 6px;
     cursor: pointer;
 
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
-            &:focus-visible {
-                transition: none;
-                ${_keyboardFocusHighlighting.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;
+    }
 `;
 const StyledMotionSearchInputIconWrapper = exports.StyledMotionSearchInputIconWrapper = _styledComponents.default.div`
     width: 18px;