@chayns-components/core 5.5.30 → 5.5.34

package/lib/esm/components/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","useKeyboardFocusHighlighting","AreaContext","useColorScheme","AccordionBody","AccordionGroupContext","AccordionHead","AccordionWrappedContext","StyledMotionAccordion","useInitialRenderRef","AccordionContext","createContext","isWrapped","undefined","Accordion","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldForceBackground","shouldForceBottomLine","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","shouldHideBottomLine","title","titleElement","onTitleInputChange","titleInputProps","shouldSkipAnimation","shouldSkipAnimationProp","colors","shouldIndex","onBodyAnimationComplete","shouldEnableKeyboardHighlighting","groupIsWrapped","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","activeAccordionUuid","updateActiveAccordionUuid","registerAccordionUuid","unregisterAccordionUuid","isParentWrapped","contextIsWrapped","colorScheme","shouldEnableKeyboardHighlightingEffective","isAccordionOpen","setIsAccordionOpen","isGroupFocusWithin","setIsGroupFocusWithin","uuid","isInitialRenderRef","initialRenderSkipRef","current","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","shouldShowKeyboardHighlighting","isKeyboardFocusable","isInKeyboardNavigationGroup","isLastAccordion","length","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","accordionWrappedContextProviderValue","initialAnimation","height","opacity","tabIndex","handleKeyDown","e","isCurrentAccordionTarget","currentTarget","target","key","currentIndex","indexOf","nextIndex","nextAccordionUuid","nextAccordionElement","document","querySelector","focus","preventDefault","parentAccordion","parentElement","closest","parentGroupId","getAttribute","split","handleFocus","handleBlur","nextFocusedElement","relatedTarget","currentGroupElement","contains","createElement","animate","className","exit","initial","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldForceBottomLine","$shouldHideBackground","$shouldHideBottomLine","$bottomBorderColor","borderBottomColor","$shouldEnableKeyboardHighlighting","$shouldShowKeyboardHighlighting","onKeyDown","onFocus","onBlur","onMouseEnter","onMouseLeave","transition","duration","Provider","value","type","onClick","titleColor","maxHeight","onScroll","onAnimationComplete","shouldHideBody","displayName"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    type CSSProperties,\n    FC,\n    type MouseEventHandler,\n    ReactNode,\n    UIEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    KeyboardEvent,\n    FocusEvent,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';\nimport { StyledMotionAccordion } from './Accordion.styles';\nimport { useInitialRenderRef } from '../../hooks/ref';\n\nexport const AccordionContext = React.createContext<{ isWrapped?: boolean }>({\n    isWrapped: undefined,\n});\n\ntype AccordionColors = {\n    titleColor?: CSSProperties['color'];\n    borderBottomColor?: CSSProperties['borderBottomColor'];\n};\n\nexport type AccordionProps = {\n    /**\n     * Maximum height of the accordion body element. This automatically makes the content of the\n     * body element scrollable.\n     */\n    bodyMaxHeight?: number;\n    /**\n     * The content of the accordion body\n     */\n    children: ReactNode;\n    /**\n     * The icon that is displayed in front of the title\n     */\n    icon?: string;\n    /**\n     * This can be used to automatically expand the Accordion during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n     */\n    isDisabled?: boolean;\n    /**\n     * This can be used so that the Accordion cannot be opened or closed.\n     * In addition, in this case the icon is exchanged to mark the Accordions.\n     */\n    isFixed?: boolean;\n    /**\n     * This can be used to open the Accordion from the outside\n     */\n    isOpened?: boolean;\n    /**\n     * This will gray out the title of the Accordion to indicate hidden content, for example.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * Function that is executed when the accordion body will be scrolled\n     */\n    onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n    /**\n     * Function that is executed when the accordion will be closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the accordion is no longer hovered.\n     */\n    onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the accordion is hovered.\n     */\n    onHoverStart?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function that is executed when the accordion will be opened.\n     */\n    onOpen?: VoidFunction;\n    /**\n     * Function that is executed when the accordion body is animated\n     */\n    onBodyAnimationComplete?: VoidFunction;\n    /**\n     * Function that is executed when the text of the search in the accordion\n     * head changes. When this function is given, the search field is displayed\n     * in the Accordion Head.\n     */\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the search in the accordion\n     * title changes. When this function is given, the search field is displayed\n     * as the Accordion title.\n     */\n    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Content to be displayed on the right side in the head of the Accordion\n     */\n    rightElement?: ReactNode;\n    /**\n     * The placeholder to be used for the search\n     */\n    searchPlaceholder?: string;\n    /**\n     * The value that is displayed inside the search\n     */\n    searchValue?: string;\n    /**\n     * This will force the background color of the accordion to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * This will hide the background color of the accordion\n     */\n    shouldHideBackground?: boolean;\n    /**\n     * Whether the bottom line should always be shown, regardless of other line-related props.\n     */\n    shouldForceBottomLine?: boolean;\n    /**\n     * Whether the bottom line should be hidden.\n     */\n    shouldHideBottomLine?: boolean;\n    /**\n     * This will render the Accordion closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\n    /**\n     * Whether the icon should be rotating.\n     */\n    shouldRotateIcon?: boolean;\n    /**\n     * Whether the animation should be skipped.\n     * If 'isDefaultOpen' is true the initial animation will be skipped even this prop is false\n     */\n    shouldSkipAnimation?: boolean;\n    /**\n     * Title of the Accordion displayed in the head\n     */\n    title?: string;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n    /**\n     * The props of the title Input.\n     */\n    titleInputProps?: InputProps;\n    /**\n     * Provide custom colors to the Accordion Component\n     */\n    colors?: AccordionColors;\n    /**\n     * Whether the accordion should be indexed.\n     */\n    shouldIndex?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting. The highlighting is only visible while the\n     * user navigates with the keyboard and is reset on mouse movement or click.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n    bodyMaxHeight,\n    children,\n    icon,\n    isDefaultOpen = false,\n    isDisabled = false,\n    isFixed = false,\n    isOpened,\n    isTitleGreyed = false,\n    onBodyScroll,\n    onClose,\n    onHoverEnd,\n    onHoverStart,\n    onOpen,\n    onSearchChange,\n    rightElement,\n    searchPlaceholder,\n    searchValue,\n    shouldForceBackground = false,\n    shouldForceBottomLine = false,\n    shouldHideBackground = false,\n    shouldRenderClosed = false,\n    shouldRotateIcon = true,\n    shouldHideBottomLine = false,\n    title,\n    titleElement,\n    onTitleInputChange,\n    titleInputProps,\n    shouldSkipAnimation: shouldSkipAnimationProp = false,\n    colors,\n    shouldIndex = false,\n    onBodyAnimationComplete,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const {\n        isWrapped: groupIsWrapped,\n        openAccordionUuid,\n        accordionGroupUuid,\n        accordionUuids,\n        updateOpenAccordionUuid,\n        activeAccordionUuid,\n        updateActiveAccordionUuid,\n        registerAccordionUuid,\n        unregisterAccordionUuid,\n    } = useContext(AccordionGroupContext);\n    const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n    const { isWrapped: contextIsWrapped } = useContext(AccordionWrappedContext);\n    const colorScheme = useColorScheme();\n    const shouldEnableKeyboardHighlightingEffective =\n        shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n    const isWrapped = useMemo(\n        () => groupIsWrapped ?? contextIsWrapped,\n        [contextIsWrapped, groupIsWrapped],\n    );\n\n    const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n    const [isGroupFocusWithin, setIsGroupFocusWithin] = useState(false);\n\n    const uuid = useUuid();\n\n    const isInitialRenderRef = useRef(true);\n\n    const initialRenderSkipRef = useInitialRenderRef(true);\n\n    const shouldSkipAnimation =\n        shouldSkipAnimationProp ?? (initialRenderSkipRef.current && isDefaultOpen);\n\n    const isInGroup = shouldSkipAnimation ? false : typeof updateOpenAccordionUuid === 'function';\n\n    const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n    const isOpenRef = useRef(isOpen);\n    const onCloseRef = useRef(onClose);\n    const onOpenRef = useRef(onOpen);\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlightingEffective,\n    );\n    const isKeyboardFocusable =\n        !isDisabled && (shouldIndex || shouldEnableKeyboardHighlightingEffective);\n\n    const isInKeyboardNavigationGroup =\n        isKeyboardFocusable &&\n        typeof updateActiveAccordionUuid === 'function' &&\n        typeof accordionGroupUuid === 'string';\n\n    useEffect(() => {\n        if (\n            typeof accordionGroupUuid === 'string' &&\n            typeof registerAccordionUuid === 'function' &&\n            typeof unregisterAccordionUuid === 'function'\n        ) {\n            registerAccordionUuid(uuid);\n\n            return () => {\n                unregisterAccordionUuid(uuid);\n            };\n        }\n\n        return undefined;\n    }, [accordionGroupUuid, registerAccordionUuid, unregisterAccordionUuid, uuid]);\n\n    const isLastAccordion = useMemo(\n        () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n        [accordionUuids, uuid],\n    );\n\n    useEffect(() => {\n        isOpenRef.current = isOpen;\n        onCloseRef.current = onClose;\n        onOpenRef.current = onOpen;\n    }, [isOpen, onClose, onOpen]);\n\n    const handleHeadClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (isKeyboardFocusable && typeof updateActiveAccordionUuid === 'function') {\n            updateActiveAccordionUuid(uuid);\n        }\n\n        if (typeof updateOpenAccordionUuid === 'function') {\n            updateOpenAccordionUuid(uuid);\n        }\n\n        setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n    }, [isDisabled, isKeyboardFocusable, updateActiveAccordionUuid, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isDisabled && isOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid);\n            }\n\n            setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n        }\n    }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isOpen) {\n            if (typeof onOpenRef.current === 'function') {\n                onOpenRef.current();\n            }\n        } else if (typeof onCloseRef.current === 'function') {\n            onCloseRef.current();\n        }\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n            } else {\n                setIsAccordionOpen(true);\n            }\n        }\n    }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (typeof isOpened === 'boolean') {\n            if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n                updateOpenAccordionUuid(uuid);\n            } else {\n                setIsAccordionOpen(isOpened);\n            }\n        }\n    }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n    const accordionContextProviderValue = useMemo(\n        () => ({ isWrapped: isWrapped === true }),\n        [isWrapped],\n    );\n\n    const areaContextProviderValue = useMemo(\n        () => ({ shouldChangeColor: !shouldHideBackground }),\n        [shouldHideBackground],\n    );\n\n    const accordionWrappedContextProviderValue = useMemo(() => ({ isWrapped: true }), []);\n\n    const initialAnimation = useMemo(() => {\n        if (shouldSkipAnimation) {\n            return { height: 'auto', opacity: 1 };\n        }\n\n        return isOpen ? { height: 'auto', opacity: 1 } : { height: 0, opacity: 0 };\n    }, [isOpen, shouldSkipAnimation]);\n\n    const tabIndex = useMemo(() => (isKeyboardFocusable ? 0 : -1), [isKeyboardFocusable]);\n\n    const handleKeyDown = useCallback(\n        (e: KeyboardEvent<HTMLDivElement>) => {\n            const isCurrentAccordionTarget = e.currentTarget === e.target;\n\n            if (\n                isCurrentAccordionTarget &&\n                isInKeyboardNavigationGroup &&\n                accordionUuids?.length &&\n                (e.key === 'ArrowDown' || e.key === 'ArrowUp')\n            ) {\n                const currentIndex = accordionUuids.indexOf(uuid);\n\n                if (currentIndex !== -1) {\n                    const nextIndex =\n                        e.key === 'ArrowDown'\n                            ? (currentIndex + 1) % accordionUuids.length\n                            : (currentIndex - 1 + accordionUuids.length) % accordionUuids.length;\n                    const nextAccordionUuid = accordionUuids[nextIndex];\n\n                    if (nextAccordionUuid && nextAccordionUuid !== uuid) {\n                        const nextAccordionElement = document.querySelector<HTMLDivElement>(\n                            `[data-uuid=\"${accordionGroupUuid}---${nextAccordionUuid}\"]`,\n                        );\n\n                        if (nextAccordionElement) {\n                            updateActiveAccordionUuid(nextAccordionUuid);\n                            nextAccordionElement.focus();\n                            return;\n                        }\n                    }\n                }\n            }\n\n            if (\n                isCurrentAccordionTarget &&\n                (e.key === 'Enter' || e.key === ' ') &&\n                isKeyboardFocusable\n            ) {\n                handleHeadClick();\n            }\n\n            if (\n                isCurrentAccordionTarget &&\n                e.key === 'ArrowRight' &&\n                isKeyboardFocusable &&\n                !isOpen\n            ) {\n                e.preventDefault();\n                handleHeadClick();\n            }\n\n            if (isCurrentAccordionTarget && (e.key === 'Escape' || e.key === 'ArrowLeft')) {\n                if (isOpen && isKeyboardFocusable) {\n                    e.preventDefault();\n                    handleHeadClick();\n                    return;\n                }\n\n                if (\n                    isInKeyboardNavigationGroup &&\n                    typeof updateActiveAccordionUuid === 'function'\n                ) {\n                    e.preventDefault();\n                    updateActiveAccordionUuid(undefined);\n                    let parentAccordion =\n                        e.currentTarget.parentElement?.closest<HTMLElement>(\n                            '.beta-chayns-accordion',\n                        );\n                    while (parentAccordion) {\n                        const parentGroupId = parentAccordion\n                            .getAttribute('data-uuid')\n                            ?.split('---')[0];\n                        if (parentGroupId !== accordionGroupUuid) {\n                            parentAccordion.focus();\n                            break;\n                        }\n                        parentAccordion =\n                            parentAccordion.parentElement?.closest<HTMLElement>(\n                                '.beta-chayns-accordion',\n                            );\n                    }\n                }\n            }\n        },\n        [\n            accordionGroupUuid,\n            accordionUuids,\n            handleHeadClick,\n            isInKeyboardNavigationGroup,\n            isKeyboardFocusable,\n            isOpen,\n            updateActiveAccordionUuid,\n            uuid,\n        ],\n    );\n\n    const handleFocus = useCallback(\n        (e: FocusEvent<HTMLDivElement>) => {\n            if (\n                e.currentTarget === e.target &&\n                isInKeyboardNavigationGroup &&\n                typeof updateActiveAccordionUuid === 'function'\n            ) {\n                setIsGroupFocusWithin(true);\n                updateActiveAccordionUuid(uuid);\n            }\n        },\n        [isInKeyboardNavigationGroup, updateActiveAccordionUuid, uuid],\n    );\n\n    const handleBlur = useCallback(\n        (e: FocusEvent<HTMLDivElement>) => {\n            if (\n                isInKeyboardNavigationGroup &&\n                typeof updateActiveAccordionUuid === 'function' &&\n                typeof accordionGroupUuid === 'string'\n            ) {\n                const nextFocusedElement = e.relatedTarget as Node | null;\n                const currentGroupElement = e.currentTarget as HTMLElement;\n\n                if (!nextFocusedElement || !currentGroupElement.contains(nextFocusedElement)) {\n                    setIsGroupFocusWithin(false);\n                    updateActiveAccordionUuid(undefined);\n                }\n            }\n        },\n        [accordionGroupUuid, isInKeyboardNavigationGroup, updateActiveAccordionUuid],\n    );\n\n    useEffect(() => {\n        if (!isInKeyboardNavigationGroup) {\n            setIsGroupFocusWithin(false);\n        } else if (\n            activeAccordionUuid == null &&\n            typeof updateActiveAccordionUuid === 'function' &&\n            accordionUuids?.[0] === uuid\n        ) {\n            updateActiveAccordionUuid(uuid);\n        }\n    }, [\n        accordionUuids,\n        activeAccordionUuid,\n        isInKeyboardNavigationGroup,\n        updateActiveAccordionUuid,\n        uuid,\n    ]);\n\n    return (\n        <StyledMotionAccordion\n            animate={{ height: 'auto', opacity: 1 }}\n            data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n            className=\"beta-chayns-accordion\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={initialAnimation}\n            $isOpen={isOpen}\n            tabIndex={tabIndex}\n            $shouldShowLines={!isLastAccordion || !isWrapped}\n            $isParentWrapped={isParentWrapped}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldForceBottomLine={shouldForceBottomLine}\n            $shouldHideBackground={shouldHideBackground}\n            $shouldHideBottomLine={shouldHideBottomLine}\n            $bottomBorderColor={colors?.borderBottomColor}\n            $shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlightingEffective}\n            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n            onKeyDown={handleKeyDown}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onMouseEnter={onHoverStart}\n            onMouseLeave={onHoverEnd}\n            transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n        >\n            <AccordionContext.Provider value={accordionContextProviderValue}>\n                <MotionConfig transition={{ type: 'tween' }}>\n                    <AccordionHead\n                        uuid={uuid}\n                        icon={icon}\n                        isOpen={isOpen}\n                        shouldSkipAnimation={shouldSkipAnimation}\n                        isFixed={isFixed}\n                        isTitleGreyed={isTitleGreyed || isDisabled}\n                        isWrapped={isWrapped === true}\n                        onClick={handleHeadClick}\n                        onSearchChange={onSearchChange}\n                        rightElement={rightElement}\n                        searchPlaceholder={searchPlaceholder}\n                        searchValue={searchValue}\n                        shouldRotateIcon={shouldRotateIcon}\n                        title={title}\n                        titleElement={titleElement}\n                        onTitleInputChange={onTitleInputChange}\n                        titleInputProps={titleInputProps}\n                        titleColor={colors?.titleColor}\n                        shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlightingEffective}\n                    />\n                    <AnimatePresence initial={false}>\n                        {(isOpen || shouldRenderClosed) && (\n                            <AccordionBody\n                                shouldSkipAnimation={shouldSkipAnimation}\n                                maxHeight={bodyMaxHeight}\n                                onScroll={onBodyScroll}\n                                onAnimationComplete={onBodyAnimationComplete}\n                                shouldHideBody={shouldRenderClosed && !isOpen}\n                            >\n                                <AccordionWrappedContext.Provider\n                                    value={accordionWrappedContextProviderValue}\n                                >\n                                    <AreaContext.Provider value={areaContextProviderValue}>\n                                        {children}\n                                    </AreaContext.Provider>\n                                </AccordionWrappedContext.Provider>\n                            </AccordionBody>\n                        )}\n                    </AnimatePresence>\n                </MotionConfig>\n            </AccordionContext.Provider>\n        </StyledMotionAccordion>\n    );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Accordion.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useTheme","useUuid","useFocusRingPortal","useKeyboardFocusHighlighting","AreaContext","useColorScheme","AccordionBody","AccordionGroupContext","AccordionHead","AccordionWrappedContext","StyledMotionAccordion","useInitialRenderRef","AccordionContext","createContext","isWrapped","undefined","Accordion","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldForceBackground","shouldForceBottomLine","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","shouldHideBottomLine","title","titleElement","onTitleInputChange","titleInputProps","shouldSkipAnimation","shouldSkipAnimationProp","colors","shouldIndex","onBodyAnimationComplete","shouldEnableKeyboardHighlighting","theme","groupIsWrapped","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","activeAccordionUuid","updateActiveAccordionUuid","registerAccordionUuid","unregisterAccordionUuid","isParentWrapped","contextIsWrapped","colorScheme","shouldEnableKeyboardHighlightingEffective","isAccordionOpen","setIsAccordionOpen","isGroupFocusWithin","setIsGroupFocusWithin","uuid","isInitialRenderRef","accordionRef","initialRenderSkipRef","current","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","shouldShowKeyboardHighlighting","isKeyboardFocusable","isEnabled","borderRadius","cardBorderRadius","isInKeyboardNavigationGroup","isLastAccordion","length","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","accordionWrappedContextProviderValue","initialAnimation","height","opacity","tabIndex","handleKeyDown","e","isCurrentAccordionTarget","currentTarget","target","key","preventDefault","currentIndex","indexOf","nextIndex","nextAccordionUuid","nextAccordionElement","document","querySelector","focus","parentAccordion","parentElement","closest","parentGroupId","getAttribute","split","handleFocus","handleBlur","nextFocusedElement","relatedTarget","currentGroupElement","contains","createElement","ref","animate","className","exit","initial","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldForceBottomLine","$shouldHideBackground","$shouldHideBottomLine","$bottomBorderColor","borderBottomColor","$shouldEnableKeyboardHighlighting","$shouldShowKeyboardHighlighting","onKeyDown","onFocus","onBlur","onMouseEnter","onMouseLeave","transition","duration","Provider","value","type","onClick","titleColor","maxHeight","onScroll","onAnimationComplete","shouldHideBody","displayName"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    type CSSProperties,\n    FC,\n    type MouseEventHandler,\n    ReactNode,\n    UIEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    KeyboardEvent,\n    FocusEvent,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useUuid } from '../../hooks/uuid';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { type Theme, useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';\nimport { StyledMotionAccordion } from './Accordion.styles';\nimport { useInitialRenderRef } from '../../hooks/ref';\n\nexport const AccordionContext = React.createContext<{ isWrapped?: boolean }>({\n    isWrapped: undefined,\n});\n\ntype AccordionColors = {\n    titleColor?: CSSProperties['color'];\n    borderBottomColor?: CSSProperties['borderBottomColor'];\n};\n\nexport type AccordionProps = {\n    /**\n     * Maximum height of the accordion body element. This automatically makes the content of the\n     * body element scrollable.\n     */\n    bodyMaxHeight?: number;\n    /**\n     * The content of the accordion body\n     */\n    children: ReactNode;\n    /**\n     * The icon that is displayed in front of the title\n     */\n    icon?: string;\n    /**\n     * This can be used to automatically expand the Accordion during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n     */\n    isDisabled?: boolean;\n    /**\n     * This can be used so that the Accordion cannot be opened or closed.\n     * In addition, in this case the icon is exchanged to mark the Accordions.\n     */\n    isFixed?: boolean;\n    /**\n     * This can be used to open the Accordion from the outside\n     */\n    isOpened?: boolean;\n    /**\n     * This will gray out the title of the Accordion to indicate hidden content, for example.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * Function that is executed when the accordion body will be scrolled\n     */\n    onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n    /**\n     * Function that is executed when the accordion will be closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the accordion is no longer hovered.\n     */\n    onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the accordion is hovered.\n     */\n    onHoverStart?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function that is executed when the accordion will be opened.\n     */\n    onOpen?: VoidFunction;\n    /**\n     * Function that is executed when the accordion body is animated\n     */\n    onBodyAnimationComplete?: VoidFunction;\n    /**\n     * Function that is executed when the text of the search in the accordion\n     * head changes. When this function is given, the search field is displayed\n     * in the Accordion Head.\n     */\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the search in the accordion\n     * title changes. When this function is given, the search field is displayed\n     * as the Accordion title.\n     */\n    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Content to be displayed on the right side in the head of the Accordion\n     */\n    rightElement?: ReactNode;\n    /**\n     * The placeholder to be used for the search\n     */\n    searchPlaceholder?: string;\n    /**\n     * The value that is displayed inside the search\n     */\n    searchValue?: string;\n    /**\n     * This will force the background color of the accordion to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * This will hide the background color of the accordion\n     */\n    shouldHideBackground?: boolean;\n    /**\n     * Whether the bottom line should always be shown, regardless of other line-related props.\n     */\n    shouldForceBottomLine?: boolean;\n    /**\n     * Whether the bottom line should be hidden.\n     */\n    shouldHideBottomLine?: boolean;\n    /**\n     * This will render the Accordion closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\n    /**\n     * Whether the icon should be rotating.\n     */\n    shouldRotateIcon?: boolean;\n    /**\n     * Whether the animation should be skipped.\n     * If 'isDefaultOpen' is true the initial animation will be skipped even this prop is false\n     */\n    shouldSkipAnimation?: boolean;\n    /**\n     * Title of the Accordion displayed in the head\n     */\n    title?: string;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n    /**\n     * The props of the title Input.\n     */\n    titleInputProps?: InputProps;\n    /**\n     * Provide custom colors to the Accordion Component\n     */\n    colors?: AccordionColors;\n    /**\n     * Whether the accordion should be indexed.\n     */\n    shouldIndex?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting. The highlighting is only visible while the\n     * user navigates with the keyboard and is reset on mouse movement or click.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n    bodyMaxHeight,\n    children,\n    icon,\n    isDefaultOpen = false,\n    isDisabled = false,\n    isFixed = false,\n    isOpened,\n    isTitleGreyed = false,\n    onBodyScroll,\n    onClose,\n    onHoverEnd,\n    onHoverStart,\n    onOpen,\n    onSearchChange,\n    rightElement,\n    searchPlaceholder,\n    searchValue,\n    shouldForceBackground = false,\n    shouldForceBottomLine = false,\n    shouldHideBackground = false,\n    shouldRenderClosed = false,\n    shouldRotateIcon = true,\n    shouldHideBottomLine = false,\n    title,\n    titleElement,\n    onTitleInputChange,\n    titleInputProps,\n    shouldSkipAnimation: shouldSkipAnimationProp = false,\n    colors,\n    shouldIndex = false,\n    onBodyAnimationComplete,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const theme = useTheme() as Theme;\n    const {\n        isWrapped: groupIsWrapped,\n        openAccordionUuid,\n        accordionGroupUuid,\n        accordionUuids,\n        updateOpenAccordionUuid,\n        activeAccordionUuid,\n        updateActiveAccordionUuid,\n        registerAccordionUuid,\n        unregisterAccordionUuid,\n    } = useContext(AccordionGroupContext);\n    const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n    const { isWrapped: contextIsWrapped } = useContext(AccordionWrappedContext);\n    const colorScheme = useColorScheme();\n    const shouldEnableKeyboardHighlightingEffective =\n        shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n    const isWrapped = useMemo(\n        () => groupIsWrapped ?? contextIsWrapped,\n        [contextIsWrapped, groupIsWrapped],\n    );\n\n    const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n    const [isGroupFocusWithin, setIsGroupFocusWithin] = useState(false);\n\n    const uuid = useUuid();\n\n    const isInitialRenderRef = useRef(true);\n    const accordionRef = useRef<HTMLDivElement>(null);\n\n    const initialRenderSkipRef = useInitialRenderRef(true);\n\n    const shouldSkipAnimation =\n        shouldSkipAnimationProp ?? (initialRenderSkipRef.current && isDefaultOpen);\n\n    const isInGroup = shouldSkipAnimation ? false : typeof updateOpenAccordionUuid === 'function';\n\n    const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n    const isOpenRef = useRef(isOpen);\n    const onCloseRef = useRef(onClose);\n    const onOpenRef = useRef(onOpen);\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlightingEffective,\n    );\n    const isKeyboardFocusable =\n        !isDisabled && (shouldIndex || shouldEnableKeyboardHighlightingEffective);\n\n    useFocusRingPortal(accordionRef, {\n        isEnabled: shouldShowKeyboardHighlighting && isKeyboardFocusable,\n        borderRadius: `${theme.cardBorderRadius}px`,\n    });\n\n    const isInKeyboardNavigationGroup =\n        isKeyboardFocusable &&\n        typeof updateActiveAccordionUuid === 'function' &&\n        typeof accordionGroupUuid === 'string';\n\n    useEffect(() => {\n        if (\n            typeof accordionGroupUuid === 'string' &&\n            typeof registerAccordionUuid === 'function' &&\n            typeof unregisterAccordionUuid === 'function'\n        ) {\n            registerAccordionUuid(uuid);\n\n            return () => {\n                unregisterAccordionUuid(uuid);\n            };\n        }\n\n        return undefined;\n    }, [accordionGroupUuid, registerAccordionUuid, unregisterAccordionUuid, uuid]);\n\n    const isLastAccordion = useMemo(\n        () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n        [accordionUuids, uuid],\n    );\n\n    useEffect(() => {\n        isOpenRef.current = isOpen;\n        onCloseRef.current = onClose;\n        onOpenRef.current = onOpen;\n    }, [isOpen, onClose, onOpen]);\n\n    const handleHeadClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (isKeyboardFocusable && typeof updateActiveAccordionUuid === 'function') {\n            updateActiveAccordionUuid(uuid);\n        }\n\n        if (typeof updateOpenAccordionUuid === 'function') {\n            updateOpenAccordionUuid(uuid);\n        }\n\n        setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n    }, [isDisabled, isKeyboardFocusable, updateActiveAccordionUuid, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isDisabled && isOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid);\n            }\n\n            setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n        }\n    }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isOpen) {\n            if (typeof onOpenRef.current === 'function') {\n                onOpenRef.current();\n            }\n        } else if (typeof onCloseRef.current === 'function') {\n            onCloseRef.current();\n        }\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n            } else {\n                setIsAccordionOpen(true);\n            }\n        }\n    }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (typeof isOpened === 'boolean') {\n            if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n                updateOpenAccordionUuid(uuid);\n            } else {\n                setIsAccordionOpen(isOpened);\n            }\n        }\n    }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n    const accordionContextProviderValue = useMemo(\n        () => ({ isWrapped: isWrapped === true }),\n        [isWrapped],\n    );\n\n    const areaContextProviderValue = useMemo(\n        () => ({ shouldChangeColor: !shouldHideBackground }),\n        [shouldHideBackground],\n    );\n\n    const accordionWrappedContextProviderValue = useMemo(() => ({ isWrapped: true }), []);\n\n    const initialAnimation = useMemo(() => {\n        if (shouldSkipAnimation) {\n            return { height: 'auto', opacity: 1 };\n        }\n\n        return isOpen ? { height: 'auto', opacity: 1 } : { height: 0, opacity: 0 };\n    }, [isOpen, shouldSkipAnimation]);\n\n    const tabIndex = useMemo(() => (isKeyboardFocusable ? 0 : -1), [isKeyboardFocusable]);\n\n    const handleKeyDown = useCallback(\n        (e: KeyboardEvent<HTMLDivElement>) => {\n            const isCurrentAccordionTarget = e.currentTarget === e.target;\n\n            if (\n                isCurrentAccordionTarget &&\n                isInKeyboardNavigationGroup &&\n                accordionUuids?.length &&\n                (e.key === 'ArrowDown' || e.key === 'ArrowUp')\n            ) {\n                e.preventDefault();\n                const currentIndex = accordionUuids.indexOf(uuid);\n\n                if (currentIndex !== -1) {\n                    const nextIndex =\n                        e.key === 'ArrowDown'\n                            ? (currentIndex + 1) % accordionUuids.length\n                            : (currentIndex - 1 + accordionUuids.length) % accordionUuids.length;\n                    const nextAccordionUuid = accordionUuids[nextIndex];\n\n                    if (nextAccordionUuid && nextAccordionUuid !== uuid) {\n                        const nextAccordionElement = document.querySelector<HTMLDivElement>(\n                            `[data-uuid=\"${accordionGroupUuid}---${nextAccordionUuid}\"]`,\n                        );\n\n                        if (nextAccordionElement) {\n                            updateActiveAccordionUuid(nextAccordionUuid);\n                            nextAccordionElement.focus();\n                            return;\n                        }\n                    }\n                }\n            }\n\n            if (\n                isCurrentAccordionTarget &&\n                (e.key === 'Enter' || e.key === ' ') &&\n                isKeyboardFocusable\n            ) {\n                handleHeadClick();\n            }\n\n            if (\n                isCurrentAccordionTarget &&\n                e.key === 'ArrowRight' &&\n                isKeyboardFocusable &&\n                !isOpen\n            ) {\n                e.preventDefault();\n                handleHeadClick();\n            }\n\n            if (isCurrentAccordionTarget && (e.key === 'Escape' || e.key === 'ArrowLeft')) {\n                if (isOpen && isKeyboardFocusable) {\n                    e.preventDefault();\n                    handleHeadClick();\n                    return;\n                }\n\n                if (\n                    isInKeyboardNavigationGroup &&\n                    typeof updateActiveAccordionUuid === 'function'\n                ) {\n                    e.preventDefault();\n                    updateActiveAccordionUuid(undefined);\n                    let parentAccordion =\n                        e.currentTarget.parentElement?.closest<HTMLElement>(\n                            '.beta-chayns-accordion',\n                        );\n                    while (parentAccordion) {\n                        const parentGroupId = parentAccordion\n                            .getAttribute('data-uuid')\n                            ?.split('---')[0];\n                        if (parentGroupId !== accordionGroupUuid) {\n                            parentAccordion.focus();\n                            break;\n                        }\n                        parentAccordion =\n                            parentAccordion.parentElement?.closest<HTMLElement>(\n                                '.beta-chayns-accordion',\n                            );\n                    }\n                }\n            }\n        },\n        [\n            accordionGroupUuid,\n            accordionUuids,\n            handleHeadClick,\n            isInKeyboardNavigationGroup,\n            isKeyboardFocusable,\n            isOpen,\n            updateActiveAccordionUuid,\n            uuid,\n        ],\n    );\n\n    const handleFocus = useCallback(\n        (e: FocusEvent<HTMLDivElement>) => {\n            if (\n                e.currentTarget === e.target &&\n                isInKeyboardNavigationGroup &&\n                typeof updateActiveAccordionUuid === 'function'\n            ) {\n                setIsGroupFocusWithin(true);\n                updateActiveAccordionUuid(uuid);\n            }\n        },\n        [isInKeyboardNavigationGroup, updateActiveAccordionUuid, uuid],\n    );\n\n    const handleBlur = useCallback(\n        (e: FocusEvent<HTMLDivElement>) => {\n            if (\n                isInKeyboardNavigationGroup &&\n                typeof updateActiveAccordionUuid === 'function' &&\n                typeof accordionGroupUuid === 'string'\n            ) {\n                const nextFocusedElement = e.relatedTarget as Node | null;\n                const currentGroupElement = e.currentTarget as HTMLElement;\n\n                if (!nextFocusedElement || !currentGroupElement.contains(nextFocusedElement)) {\n                    setIsGroupFocusWithin(false);\n                    updateActiveAccordionUuid(undefined);\n                }\n            }\n        },\n        [accordionGroupUuid, isInKeyboardNavigationGroup, updateActiveAccordionUuid],\n    );\n\n    useEffect(() => {\n        if (!isInKeyboardNavigationGroup) {\n            setIsGroupFocusWithin(false);\n        } else if (\n            activeAccordionUuid == null &&\n            typeof updateActiveAccordionUuid === 'function' &&\n            accordionUuids?.[0] === uuid\n        ) {\n            updateActiveAccordionUuid(uuid);\n        }\n    }, [\n        accordionUuids,\n        activeAccordionUuid,\n        isInKeyboardNavigationGroup,\n        updateActiveAccordionUuid,\n        uuid,\n    ]);\n\n    return (\n        <StyledMotionAccordion\n            ref={accordionRef}\n            animate={{ height: 'auto', opacity: 1 }}\n            data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n            className=\"beta-chayns-accordion\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={initialAnimation}\n            $isOpen={isOpen}\n            tabIndex={tabIndex}\n            $shouldShowLines={!isLastAccordion || !isWrapped}\n            $isParentWrapped={isParentWrapped}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldForceBottomLine={shouldForceBottomLine}\n            $shouldHideBackground={shouldHideBackground}\n            $shouldHideBottomLine={shouldHideBottomLine}\n            $bottomBorderColor={colors?.borderBottomColor}\n            $shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlightingEffective}\n            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n            onKeyDown={handleKeyDown}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onMouseEnter={onHoverStart}\n            onMouseLeave={onHoverEnd}\n            transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n        >\n            <AccordionContext.Provider value={accordionContextProviderValue}>\n                <MotionConfig transition={{ type: 'tween' }}>\n                    <AccordionHead\n                        uuid={uuid}\n                        icon={icon}\n                        isOpen={isOpen}\n                        shouldSkipAnimation={shouldSkipAnimation}\n                        isFixed={isFixed}\n                        isTitleGreyed={isTitleGreyed || isDisabled}\n                        isWrapped={isWrapped === true}\n                        onClick={handleHeadClick}\n                        onSearchChange={onSearchChange}\n                        rightElement={rightElement}\n                        searchPlaceholder={searchPlaceholder}\n                        searchValue={searchValue}\n                        shouldRotateIcon={shouldRotateIcon}\n                        title={title}\n                        titleElement={titleElement}\n                        onTitleInputChange={onTitleInputChange}\n                        titleInputProps={titleInputProps}\n                        titleColor={colors?.titleColor}\n                        shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlightingEffective}\n                    />\n                    <AnimatePresence initial={false}>\n                        {(isOpen || shouldRenderClosed) && (\n                            <AccordionBody\n                                shouldSkipAnimation={shouldSkipAnimation}\n                                maxHeight={bodyMaxHeight}\n                                onScroll={onBodyScroll}\n                                onAnimationComplete={onBodyAnimationComplete}\n                                shouldHideBody={shouldRenderClosed && !isOpen}\n                            >\n                                <AccordionWrappedContext.Provider\n                                    value={accordionWrappedContextProviderValue}\n                                >\n                                    <AreaContext.Provider value={areaContextProviderValue}>\n                                        {children}\n                                    </AreaContext.Provider>\n                                </AccordionWrappedContext.Provider>\n                            </AccordionBody>\n                        )}\n                    </AnimatePresence>\n                </MotionConfig>\n            </AccordionContext.Provider>\n        </StyledMotionAccordion>\n    );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/accordion/Accordion.styles.js

@@ -1,6 +1,5 @@
 import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
-import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledMotionAccordion = styled(motion.div)`
     ${({
   $isOpen,
@@ -99,7 +98,6 @@ export const StyledMotionAccordion = styled(motion.div)`
 }) => $shouldEnableKeyboardHighlighting && $shouldShowKeyboardHighlighting && !$shouldHideBackground && css`
             &:focus-visible {
                 transition: none;
-                ${keyboardFocusHighlightingRingCss};
             }
         `};
 `;

package/lib/esm/components/accordion/Accordion.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.styles.js","names":["motion","styled","css","keyboardFocusHighlightingRingCss","StyledMotionAccordion","div","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBackground","theme","cardBackgroundOpacity","cardBorderRadius","cardShadow","accordionLines","$shouldForceBottomLine","$shouldShowLines","$shouldHideBottomLine","$bottomBorderColor","undefined","shouldShowBottomBorder","$isParentWrapped","$shouldEnableKeyboardHighlighting","$shouldShowKeyboardHighlighting"],"sources":["../../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledMotionAccordionProps = WithTheme<{\n    $isOpen: boolean;\n    $isParentWrapped?: boolean;\n    $isWrapped?: boolean;\n    $shouldForceBackground?: boolean;\n    $shouldForceBottomLine?: boolean;\n    $shouldHideBackground?: boolean;\n    $shouldShowLines?: boolean;\n    $shouldHideBottomLine: boolean;\n    $bottomBorderColor?: string;\n    $shouldEnableKeyboardHighlighting?: boolean;\n    $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nexport const StyledMotionAccordion = styled(motion.div)<StyledMotionAccordionProps>`\n    ${({\n        $isOpen,\n        $isWrapped,\n        $shouldForceBackground,\n        $shouldHideBackground,\n        theme,\n    }: StyledMotionAccordionProps) =>\n        ($isOpen || $shouldForceBackground) &&\n        !$isWrapped &&\n        !$shouldHideBackground &&\n        css`\n            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n            border-radius: ${theme.cardBorderRadius}px;\n            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n        `}\n\n    ${({ theme }: StyledMotionAccordionProps) =>\n        theme.accordionLines &&\n        css`\n            border-bottom: 1px solid transparent;\n        `}\n\n    margin-bottom: ${({ $isOpen, $isWrapped }: StyledMotionAccordionProps) =>\n        $isOpen && !$isWrapped ? '30px' : '0px'};\n    transition:\n        background-color 0.3s ease,\n        border-bottom-color 0.3s ease,\n        border-radius 0.3s ease,\n        box-shadow 0.3s ease,\n        margin-bottom 0.3s ease;\n    will-change: unset !important;\n\n    margin-top: 10px;\n\n    ${({\n        $isOpen,\n        $isWrapped,\n        $shouldForceBackground,\n        $shouldForceBottomLine,\n        $shouldShowLines,\n        $shouldHideBottomLine,\n        theme,\n        $bottomBorderColor,\n    }: StyledMotionAccordionProps) => {\n        if ($shouldForceBottomLine) {\n            return css`\n                border-bottom-color: ${$bottomBorderColor ??\n                `rgba(${theme['headline-rgb'] ?? '0 0 0'}, 1)`};\n            `;\n        }\n\n        if ($shouldForceBackground || $shouldHideBottomLine) return undefined;\n        const shouldShowBottomBorder =\n            theme.accordionLines && $shouldShowLines && ($isWrapped || !$isOpen);\n\n        if ($bottomBorderColor && shouldShowBottomBorder)\n            return css`\n                border-bottom-color: ${$bottomBorderColor};\n            `;\n\n        if (shouldShowBottomBorder) {\n            return css`\n                border-bottom-color: rgba(${theme['headline-rgb']}, 1);\n            `;\n        }\n\n        return undefined;\n    }}\n    ${({ $isParentWrapped }: StyledMotionAccordionProps) =>\n        $isParentWrapped &&\n        css`\n            padding-left: 17px;\n        `}\n    ${({ $isWrapped }: StyledMotionAccordionProps) =>\n        !$isWrapped\n            ? css`\n                  margin-top: 5px;\n              `\n            : css`\n                  margin: 0;\n              `}\n    ${({\n        $isWrapped,\n        $shouldHideBackground,\n        theme,\n        $shouldEnableKeyboardHighlighting,\n    }: StyledMotionAccordionProps) =>\n        !$isWrapped &&\n        !$shouldHideBackground &&\n        css`\n            &:hover {\n                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n            }\n            ${!$shouldEnableKeyboardHighlighting\n                ? css`\n                      &:focus-visible {\n                          background-color: rgba(\n                              ${theme['100-rgb']},\n                              ${theme.cardBackgroundOpacity}\n                          );\n                      }\n                  `\n                : null}\n        `};\n\n    ${({\n        $shouldEnableKeyboardHighlighting,\n        $shouldShowKeyboardHighlighting,\n        $shouldHideBackground,\n    }: StyledMotionAccordionProps) =>\n        $shouldEnableKeyboardHighlighting &&\n        $shouldShowKeyboardHighlighting &&\n        !$shouldHideBackground &&\n        css`\n            &:focus-visible {\n                transition: none;\n                ${keyboardFocusHighlightingRingCss};\n            }\n        `};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,gCAAgC,QAAQ,8CAA8C;AAgB/F,OAAO,MAAMC,qBAAqB,GAAGH,MAAM,CAACD,MAAM,CAACK,GAAG,CAA6B;AACnF,MAAM,CAAC;EACCC,OAAO;EACPC,UAAU;EACVC,sBAAsB;EACtBC,qBAAqB;EACrBC;AACwB,CAAC,KACzB,CAACJ,OAAO,IAAIE,sBAAsB,KAClC,CAACD,UAAU,IACX,CAACE,qBAAqB,IACtBP,GAAG;AACX,qCAAqCQ,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,6BAA6BD,KAAK,CAACE,gBAAgB;AACnD,oDAAoDF,KAAK,CAACG,UAAU;AACpE,SAAS;AACT;AACA,MAAM,CAAC;EAAEH;AAAkC,CAAC,KACpCA,KAAK,CAACI,cAAc,IACpBZ,GAAG;AACX;AACA,SAAS;AACT;AACA,qBAAqB,CAAC;EAAEI,OAAO;EAAEC;AAAuC,CAAC,KACjED,OAAO,IAAI,CAACC,UAAU,GAAG,MAAM,GAAG,KAAK;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EACCD,OAAO;EACPC,UAAU;EACVC,sBAAsB;EACtBO,sBAAsB;EACtBC,gBAAgB;EAChBC,qBAAqB;EACrBP,KAAK;EACLQ;AACwB,CAAC,KAAK;EAC9B,IAAIH,sBAAsB,EAAE;IACxB,OAAOb,GAAG;AACtB,uCAAuCgB,kBAAkB,IACzC,QAAQR,KAAK,CAAC,cAAc,CAAC,IAAI,OAAO,MAAM;AAC9D,aAAa;EACL;EAEA,IAAIF,sBAAsB,IAAIS,qBAAqB,EAAE,OAAOE,SAAS;EACrE,MAAMC,sBAAsB,GACxBV,KAAK,CAACI,cAAc,IAAIE,gBAAgB,KAAKT,UAAU,IAAI,CAACD,OAAO,CAAC;EAExE,IAAIY,kBAAkB,IAAIE,sBAAsB,EAC5C,OAAOlB,GAAG;AACtB,uCAAuCgB,kBAAkB;AACzD,aAAa;EAEL,IAAIE,sBAAsB,EAAE;IACxB,OAAOlB,GAAG;AACtB,4CAA4CQ,KAAK,CAAC,cAAc,CAAC;AACjE,aAAa;EACL;EAEA,OAAOS,SAAS;AACpB,CAAC;AACL,MAAM,CAAC;EAAEE;AAA6C,CAAC,KAC/CA,gBAAgB,IAChBnB,GAAG;AACX;AACA,SAAS;AACT,MAAM,CAAC;EAAEK;AAAuC,CAAC,KACzC,CAACA,UAAU,GACLL,GAAG;AACjB;AACA,eAAe,GACDA,GAAG;AACjB;AACA,eAAe;AACf,MAAM,CAAC;EACCK,UAAU;EACVE,qBAAqB;EACrBC,KAAK;EACLY;AACwB,CAAC,KACzB,CAACf,UAAU,IACX,CAACE,qBAAqB,IACtBP,GAAG;AACX;AACA,yCAAyCQ,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,cAAc,CAACW,iCAAiC,GAC9BpB,GAAG;AACrB;AACA;AACA,gCAAgCQ,KAAK,CAAC,SAAS,CAAC;AAChD,gCAAgCA,KAAK,CAACC,qBAAqB;AAC3D;AACA;AACA,mBAAmB,GACD,IAAI;AACtB,SAAS;AACT;AACA,MAAM,CAAC;EACCW,iCAAiC;EACjCC,+BAA+B;EAC/Bd;AACwB,CAAC,KACzBa,iCAAiC,IACjCC,+BAA+B,IAC/B,CAACd,qBAAqB,IACtBP,GAAG;AACX;AACA;AACA,kBAAkBC,gCAAgC;AAClD;AACA,SAAS;AACT,CAAC","ignoreList":[]}
+{"version":3,"file":"Accordion.styles.js","names":["motion","styled","css","StyledMotionAccordion","div","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBackground","theme","cardBackgroundOpacity","cardBorderRadius","cardShadow","accordionLines","$shouldForceBottomLine","$shouldShowLines","$shouldHideBottomLine","$bottomBorderColor","undefined","shouldShowBottomBorder","$isParentWrapped","$shouldEnableKeyboardHighlighting","$shouldShowKeyboardHighlighting"],"sources":["../../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionProps = WithTheme<{\n    $isOpen: boolean;\n    $isParentWrapped?: boolean;\n    $isWrapped?: boolean;\n    $shouldForceBackground?: boolean;\n    $shouldForceBottomLine?: boolean;\n    $shouldHideBackground?: boolean;\n    $shouldShowLines?: boolean;\n    $shouldHideBottomLine: boolean;\n    $bottomBorderColor?: string;\n    $shouldEnableKeyboardHighlighting?: boolean;\n    $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nexport const StyledMotionAccordion = styled(motion.div)<StyledMotionAccordionProps>`\n    ${({\n        $isOpen,\n        $isWrapped,\n        $shouldForceBackground,\n        $shouldHideBackground,\n        theme,\n    }: StyledMotionAccordionProps) =>\n        ($isOpen || $shouldForceBackground) &&\n        !$isWrapped &&\n        !$shouldHideBackground &&\n        css`\n            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n            border-radius: ${theme.cardBorderRadius}px;\n            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n        `}\n\n    ${({ theme }: StyledMotionAccordionProps) =>\n        theme.accordionLines &&\n        css`\n            border-bottom: 1px solid transparent;\n        `}\n\n    margin-bottom: ${({ $isOpen, $isWrapped }: StyledMotionAccordionProps) =>\n        $isOpen && !$isWrapped ? '30px' : '0px'};\n    transition:\n        background-color 0.3s ease,\n        border-bottom-color 0.3s ease,\n        border-radius 0.3s ease,\n        box-shadow 0.3s ease,\n        margin-bottom 0.3s ease;\n    will-change: unset !important;\n\n    margin-top: 10px;\n\n    ${({\n        $isOpen,\n        $isWrapped,\n        $shouldForceBackground,\n        $shouldForceBottomLine,\n        $shouldShowLines,\n        $shouldHideBottomLine,\n        theme,\n        $bottomBorderColor,\n    }: StyledMotionAccordionProps) => {\n        if ($shouldForceBottomLine) {\n            return css`\n                border-bottom-color: ${$bottomBorderColor ??\n                `rgba(${theme['headline-rgb'] ?? '0 0 0'}, 1)`};\n            `;\n        }\n\n        if ($shouldForceBackground || $shouldHideBottomLine) return undefined;\n        const shouldShowBottomBorder =\n            theme.accordionLines && $shouldShowLines && ($isWrapped || !$isOpen);\n\n        if ($bottomBorderColor && shouldShowBottomBorder)\n            return css`\n                border-bottom-color: ${$bottomBorderColor};\n            `;\n\n        if (shouldShowBottomBorder) {\n            return css`\n                border-bottom-color: rgba(${theme['headline-rgb']}, 1);\n            `;\n        }\n\n        return undefined;\n    }}\n    ${({ $isParentWrapped }: StyledMotionAccordionProps) =>\n        $isParentWrapped &&\n        css`\n            padding-left: 17px;\n        `}\n    ${({ $isWrapped }: StyledMotionAccordionProps) =>\n        !$isWrapped\n            ? css`\n                  margin-top: 5px;\n              `\n            : css`\n                  margin: 0;\n              `}\n    ${({\n        $isWrapped,\n        $shouldHideBackground,\n        theme,\n        $shouldEnableKeyboardHighlighting,\n    }: StyledMotionAccordionProps) =>\n        !$isWrapped &&\n        !$shouldHideBackground &&\n        css`\n            &:hover {\n                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n            }\n            ${!$shouldEnableKeyboardHighlighting\n                ? css`\n                      &:focus-visible {\n                          background-color: rgba(\n                              ${theme['100-rgb']},\n                              ${theme.cardBackgroundOpacity}\n                          );\n                      }\n                  `\n                : null}\n        `};\n\n    ${({\n        $shouldEnableKeyboardHighlighting,\n        $shouldShowKeyboardHighlighting,\n        $shouldHideBackground,\n    }: StyledMotionAccordionProps) =>\n        $shouldEnableKeyboardHighlighting &&\n        $shouldShowKeyboardHighlighting &&\n        !$shouldHideBackground &&\n        css`\n            &:focus-visible {\n                transition: none;\n            }\n        `};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAiB/C,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAA6B;AACnF,MAAM,CAAC;EACCC,OAAO;EACPC,UAAU;EACVC,sBAAsB;EACtBC,qBAAqB;EACrBC;AACwB,CAAC,KACzB,CAACJ,OAAO,IAAIE,sBAAsB,KAClC,CAACD,UAAU,IACX,CAACE,qBAAqB,IACtBN,GAAG;AACX,qCAAqCO,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,6BAA6BD,KAAK,CAACE,gBAAgB;AACnD,oDAAoDF,KAAK,CAACG,UAAU;AACpE,SAAS;AACT;AACA,MAAM,CAAC;EAAEH;AAAkC,CAAC,KACpCA,KAAK,CAACI,cAAc,IACpBX,GAAG;AACX;AACA,SAAS;AACT;AACA,qBAAqB,CAAC;EAAEG,OAAO;EAAEC;AAAuC,CAAC,KACjED,OAAO,IAAI,CAACC,UAAU,GAAG,MAAM,GAAG,KAAK;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EACCD,OAAO;EACPC,UAAU;EACVC,sBAAsB;EACtBO,sBAAsB;EACtBC,gBAAgB;EAChBC,qBAAqB;EACrBP,KAAK;EACLQ;AACwB,CAAC,KAAK;EAC9B,IAAIH,sBAAsB,EAAE;IACxB,OAAOZ,GAAG;AACtB,uCAAuCe,kBAAkB,IACzC,QAAQR,KAAK,CAAC,cAAc,CAAC,IAAI,OAAO,MAAM;AAC9D,aAAa;EACL;EAEA,IAAIF,sBAAsB,IAAIS,qBAAqB,EAAE,OAAOE,SAAS;EACrE,MAAMC,sBAAsB,GACxBV,KAAK,CAACI,cAAc,IAAIE,gBAAgB,KAAKT,UAAU,IAAI,CAACD,OAAO,CAAC;EAExE,IAAIY,kBAAkB,IAAIE,sBAAsB,EAC5C,OAAOjB,GAAG;AACtB,uCAAuCe,kBAAkB;AACzD,aAAa;EAEL,IAAIE,sBAAsB,EAAE;IACxB,OAAOjB,GAAG;AACtB,4CAA4CO,KAAK,CAAC,cAAc,CAAC;AACjE,aAAa;EACL;EAEA,OAAOS,SAAS;AACpB,CAAC;AACL,MAAM,CAAC;EAAEE;AAA6C,CAAC,KAC/CA,gBAAgB,IAChBlB,GAAG;AACX;AACA,SAAS;AACT,MAAM,CAAC;EAAEI;AAAuC,CAAC,KACzC,CAACA,UAAU,GACLJ,GAAG;AACjB;AACA,eAAe,GACDA,GAAG;AACjB;AACA,eAAe;AACf,MAAM,CAAC;EACCI,UAAU;EACVE,qBAAqB;EACrBC,KAAK;EACLY;AACwB,CAAC,KACzB,CAACf,UAAU,IACX,CAACE,qBAAqB,IACtBN,GAAG;AACX;AACA,yCAAyCO,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,cAAc,CAACW,iCAAiC,GAC9BnB,GAAG;AACrB;AACA;AACA,gCAAgCO,KAAK,CAAC,SAAS,CAAC;AAChD,gCAAgCA,KAAK,CAACC,qBAAqB;AAC3D;AACA;AACA,mBAAmB,GACD,IAAI;AACtB,SAAS;AACT;AACA,MAAM,CAAC;EACCW,iCAAiC;EACjCC,+BAA+B;EAC/Bd;AACwB,CAAC,KACzBa,iCAAiC,IACjCC,+BAA+B,IAC/B,CAACd,qBAAqB,IACtBN,GAAG;AACX;AACA;AACA;AACA,SAAS;AACT,CAAC","ignoreList":[]}

package/lib/esm/components/amount-control/AmountControl.js

@@ -1,6 +1,7 @@
 import { AnimatePresence } from 'motion/react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { checkForValidAmount } from '../../utils/amountControl';
+import { useFocusRingPortal } from '../../hooks/useFocusRingPortal';
 import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import Icon from '../icon/Icon';
 import { StyledAmountControl, StyledAmountControlInput, StyledAmountControlPseudoInput, StyledInputWrapper, StyledMotionAmountControlButton } from './AmountControl.styles';
@@ -27,6 +28,8 @@ const AmountControl = ({
   const [isEditing, setIsEditing] = useState(false);
   const step = useMemo(() => Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1, [stepProp]);
   const inputRef = useRef(null);
+  const leftButtonRef = useRef(null);
+  const rightButtonRef = useRef(null);
 
   /**
    * This function controls the displayState
@@ -159,13 +162,22 @@ const AmountControl = ({
     inputLabel = label;
   }
   const shouldShowPseudoInput = !isEditing && (inputValue === '0' || shouldForceLabel && typeof label === 'string' || inputLabel === label);
+  useFocusRingPortal(inputRef, {
+    isEnabled: shouldShowKeyboardHighlighting && !shouldShowPseudoInput
+  });
+  useFocusRingPortal(leftButtonRef, {
+    isEnabled: shouldShowKeyboardHighlighting && displayState === 'normal'
+  });
+  useFocusRingPortal(rightButtonRef, {
+    isEnabled: shouldShowKeyboardHighlighting
+  });
   return useMemo(() => /*#__PURE__*/React.createElement(StyledAmountControl, {
     onClick: handleFirstAmount,
     $isDisabled: isDisabled
   }, /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, ['normal'].includes(displayState) && /*#__PURE__*/React.createElement(StyledMotionAmountControlButton, {
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    ref: leftButtonRef,
     key: "left_button",
     initial: {
       width: 0,
@@ -203,7 +215,6 @@ const AmountControl = ({
     $shouldShowIcon: shouldShowIcon,
     $shouldShowWideInput: shouldShowWideInput,
     $hasFocus: hasFocus,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     disabled: isDisabled,
     onFocus: () => setIsEditing(true),
     onBlur: handleInputBlur,
@@ -212,7 +223,7 @@ const AmountControl = ({
   })), /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, /*#__PURE__*/React.createElement(StyledMotionAmountControlButton, {
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    ref: rightButtonRef,
     key: "right_button",
     initial: {
       width: 0,

package/lib/esm/components/amount-control/AmountControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","checkForValidAmount","useKeyboardFocusHighlighting","Icon","StyledAmountControl","StyledAmountControlInput","StyledAmountControlPseudoInput","StyledInputWrapper","StyledMotionAmountControlButton","AmountControl","amount","icon","iconColor","isDisabled","label","maxAmount","minAmount","onChange","shouldEnableKeyboardHighlighting","shouldForceLabel","shouldShowAddIconOnMinAmount","shouldShowIcon","shouldShowWideInput","step","stepProp","shouldShowKeyboardHighlighting","amountValue","setAmountValue","inputValue","setInputValue","toString","displayState","setDisplayState","isEditing","setIsEditing","Number","isSafeInteger","inputRef","hasFocus","handleAmountAdd","prevState","newAmount","handleAmountRemove","handleFirstAmount","handlePseudoInputClick","window","requestAnimationFrame","current","focus","handleInputBlur","checkedValue","Math","round","handleInputChange","event","value","target","valueBefore","replace","inputLabel","shouldShowPseudoInput","createElement","onClick","$isDisabled","initial","includes","$shouldShowKeyboardHighlighting","key","width","opacity","padding","animate","exit","transition","duration","type","disabled","icons","size","color","$shouldShowWideInput","$shouldShowRightIcon","ref","$displayState","$shouldShowIcon","$hasFocus","onFocus","onBlur","$color","undefined","displayName"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport Icon from '../icon/Icon';\nimport {\n    StyledAmountControl,\n    StyledAmountControlInput,\n    StyledAmountControlPseudoInput,\n    StyledInputWrapper,\n    StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' | 'normal' | 'maxAmount' | 'minAmount';\n\nexport type AmountControlProps = {\n    /**\n     * The amount that should be displayed.\n     */\n    amount?: number;\n    /**\n     * The icon that should be displayed if no amount is selected.\n     */\n    icon?: string;\n    /**\n     * The color of the icon.\n     */\n    iconColor?: string;\n    /**\n     * Whether the control should be disabled\n     */\n    isDisabled?: boolean;\n    /**\n     * A Text that should be displayed if no amount is selected;\n     */\n    label?: string;\n    /**\n     * The maximum allowed amount. If the maxAmount is reached, a check icon is displayed on the left side.\n     */\n    maxAmount?: number;\n    /**\n     * The minimum allowed amount.\n     */\n    minAmount?: number;\n    /**\n     * A Function that is executed when the amount is changed\n     */\n    onChange?: (amount: number) => void;\n    /**\n     * Enables keyboard-only focus highlighting. The highlighting is only visible while the\n     * user navigates with the keyboard and is reset on mouse movement or click.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n    /**\n     * Whether the label should be displayed even if an amount is selected.\n     */\n    shouldForceLabel?: boolean;\n    /**\n     * Whether the \"add\"-icon should be displayed if the minAmount is reached.\n     */\n    shouldShowAddIconOnMinAmount?: boolean;\n    /**\n     * Whether the icon should be displayed if no amount is selected\n     */\n    shouldShowIcon?: boolean;\n    /**\n     * Whether the input should be wider\n     */\n    shouldShowWideInput?: boolean;\n    /**\n     * Defines the amount that will change when adjusted\n     */\n    step?: number;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    iconColor,\n    isDisabled = false,\n    label,\n    maxAmount,\n    minAmount = 0,\n    onChange,\n    shouldEnableKeyboardHighlighting,\n    shouldForceLabel = false,\n    shouldShowAddIconOnMinAmount = false,\n    shouldShowIcon = true,\n    shouldShowWideInput = false,\n    step: stepProp = 1,\n}) => {\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting && !isDisabled,\n    );\n\n    const [amountValue, setAmountValue] = useState(minAmount);\n    const [inputValue, setInputValue] = useState(minAmount.toString());\n    const [displayState, setDisplayState] = useState<DisplayState>('default');\n    const [isEditing, setIsEditing] = useState(false);\n\n    const step = useMemo(\n        () => (Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1),\n        [stepProp],\n    );\n\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    /**\n     * This function controls the displayState\n     */\n    useEffect(() => {\n        switch (true) {\n            case maxAmount && amountValue >= maxAmount:\n                setDisplayState('maxAmount');\n                return;\n            case amountValue > minAmount:\n                setDisplayState('normal');\n                return;\n            case amountValue === minAmount && amountValue >= 0 && shouldShowAddIconOnMinAmount:\n                setDisplayState('minAmount');\n                return;\n            default:\n                setDisplayState('default');\n        }\n    }, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);\n\n    const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n    /**\n     * Function that sets the amountValue to the amount\n     */\n    useEffect(() => {\n        if (typeof amount !== 'number') {\n            return;\n        }\n\n        setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n        setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n    }, [amount, maxAmount, minAmount]);\n\n    const handleAmountAdd = useCallback(() => {\n        setAmountValue((prevState) => {\n            const newAmount = checkForValidAmount({\n                amount: prevState + step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return typeof amount === 'number' ? prevState : newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) + step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [amount, maxAmount, minAmount, onChange, step]);\n\n    const handleAmountRemove = useCallback(() => {\n        if (displayState === 'default') {\n            return;\n        }\n\n        setAmountValue((prevState) => {\n            const newAmount = checkForValidAmount({\n                amount: prevState - step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) - step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [displayState, maxAmount, minAmount, onChange, step]);\n\n    const handleFirstAmount = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (amountValue !== minAmount) {\n            return;\n        }\n\n        if (typeof onChange === 'function') {\n            onChange(minAmount + step);\n        }\n\n        setAmountValue(minAmount + step);\n        setInputValue((minAmount + step).toString());\n    }, [amountValue, isDisabled, minAmount, onChange, step]);\n\n    const handlePseudoInputClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        setIsEditing(true);\n\n        window.requestAnimationFrame(() => {\n            inputRef.current?.focus();\n        });\n    }, [isDisabled]);\n\n    const handleInputBlur = useCallback(() => {\n        const checkedValue = checkForValidAmount({\n            minAmount,\n            maxAmount,\n            amount: Math.round(Number(inputValue) / step) * step,\n        });\n\n        setAmountValue(checkedValue);\n        setInputValue(checkedValue.toString());\n        setIsEditing(false);\n\n        if (typeof onChange === 'function') {\n            onChange(checkedValue);\n        }\n\n        if (inputValue === '') {\n            setInputValue(minAmount.toString());\n        }\n    }, [inputValue, maxAmount, minAmount, onChange, step]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const { value } = event.target;\n\n            const valueBefore = Number(value.replace(/\\D/g, ''));\n\n            if (valueBefore < minAmount && minAmount === 0) {\n                setInputValue('0');\n\n                return;\n            }\n\n            setInputValue(valueBefore === 0 ? '' : valueBefore.toString());\n        },\n        [minAmount],\n    );\n\n    let inputLabel = inputValue;\n\n    if (typeof label === 'string' && (displayState === 'default' || shouldForceLabel)) {\n        inputLabel = label;\n    }\n\n    const shouldShowPseudoInput =\n        !isEditing &&\n        (inputValue === '0' ||\n            (shouldForceLabel && typeof label === 'string') ||\n            inputLabel === label);\n\n    return useMemo(\n        () => (\n            <StyledAmountControl onClick={handleFirstAmount} $isDisabled={isDisabled}>\n                <AnimatePresence initial={false}>\n                    {['normal'].includes(displayState) && (\n                        <StyledMotionAmountControlButton\n                            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                            key=\"left_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{\n                                width: 40,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountRemove}\n                            disabled={isDisabled || (amountValue !== 0 && amountValue <= minAmount)}\n                            $isDisabled={\n                                isDisabled || (amountValue !== 0 && amountValue <= minAmount)\n                            }\n                        >\n                            <Icon icons={['fa fa-minus']} size={14} color=\"white\" />\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n                <StyledInputWrapper>\n                    {shouldShowPseudoInput ? (\n                        <StyledAmountControlPseudoInput\n                            onClick={handlePseudoInputClick}\n                            $shouldShowWideInput={shouldShowWideInput}\n                            $shouldShowRightIcon={!['maxAmount'].includes(displayState)}\n                        >\n                            {inputLabel}\n                        </StyledAmountControlPseudoInput>\n                    ) : (\n                        <StyledAmountControlInput\n                            ref={inputRef}\n                            $displayState={displayState}\n                            $shouldShowIcon={shouldShowIcon}\n                            $shouldShowWideInput={shouldShowWideInput}\n                            $hasFocus={hasFocus}\n                            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                            disabled={isDisabled}\n                            onFocus={() => setIsEditing(true)}\n                            onBlur={handleInputBlur}\n                            onChange={handleInputChange}\n                            value={inputLabel}\n                        />\n                    )}\n                </StyledInputWrapper>\n                <AnimatePresence initial={false}>\n                    <StyledMotionAmountControlButton\n                        $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                        key=\"right_button\"\n                        initial={{ width: 0, opacity: 0, padding: 0 }}\n                        animate={{\n                            width: 40,\n                            opacity: 1,\n                            padding: 0,\n                        }}\n                        exit={{ width: 0, opacity: 0, padding: 0 }}\n                        transition={{ duration: 0.2, type: 'tween' }}\n                        $color={displayState === 'maxAmount' ? 'rgb(32, 198, 90)' : undefined}\n                        onClick={\n                            displayState === 'maxAmount' ? handleAmountRemove : handleAmountAdd\n                        }\n                        disabled={isDisabled || (maxAmount ? amountValue >= maxAmount : false)}\n                        $isDisabled={isDisabled || (maxAmount ? amountValue >= maxAmount : false)}\n                    >\n                        <Icon\n                            icons={\n                                !['normal'].includes(displayState) && icon\n                                    ? [displayState === 'maxAmount' ? 'fa fa-check' : icon]\n                                    : [displayState === 'maxAmount' ? 'fa fa-check' : 'fa fa-plus']\n                            }\n                            size={14}\n                            color={iconColor ?? 'white'}\n                        />\n                    </StyledMotionAmountControlButton>\n                </AnimatePresence>\n            </StyledAmountControl>\n        ),\n        [\n            amountValue,\n            displayState,\n            handleAmountAdd,\n            handleAmountRemove,\n            handleFirstAmount,\n            handleInputBlur,\n            handleInputChange,\n            handlePseudoInputClick,\n            hasFocus,\n            icon,\n            iconColor,\n            inputLabel,\n            isDisabled,\n            maxAmount,\n            minAmount,\n            shouldShowIcon,\n            shouldShowKeyboardHighlighting,\n            shouldShowPseudoInput,\n            shouldShowWideInput,\n        ],\n    );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","checkForValidAmount","useFocusRingPortal","useKeyboardFocusHighlighting","Icon","StyledAmountControl","StyledAmountControlInput","StyledAmountControlPseudoInput","StyledInputWrapper","StyledMotionAmountControlButton","AmountControl","amount","icon","iconColor","isDisabled","label","maxAmount","minAmount","onChange","shouldEnableKeyboardHighlighting","shouldForceLabel","shouldShowAddIconOnMinAmount","shouldShowIcon","shouldShowWideInput","step","stepProp","shouldShowKeyboardHighlighting","amountValue","setAmountValue","inputValue","setInputValue","toString","displayState","setDisplayState","isEditing","setIsEditing","Number","isSafeInteger","inputRef","leftButtonRef","rightButtonRef","hasFocus","handleAmountAdd","prevState","newAmount","handleAmountRemove","handleFirstAmount","handlePseudoInputClick","window","requestAnimationFrame","current","focus","handleInputBlur","checkedValue","Math","round","handleInputChange","event","value","target","valueBefore","replace","inputLabel","shouldShowPseudoInput","isEnabled","createElement","onClick","$isDisabled","initial","includes","ref","key","width","opacity","padding","animate","exit","transition","duration","type","disabled","icons","size","color","$shouldShowWideInput","$shouldShowRightIcon","$displayState","$shouldShowIcon","$hasFocus","onFocus","onBlur","$color","undefined","displayName"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport Icon from '../icon/Icon';\nimport {\n    StyledAmountControl,\n    StyledAmountControlInput,\n    StyledAmountControlPseudoInput,\n    StyledInputWrapper,\n    StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' | 'normal' | 'maxAmount' | 'minAmount';\n\nexport type AmountControlProps = {\n    /**\n     * The amount that should be displayed.\n     */\n    amount?: number;\n    /**\n     * The icon that should be displayed if no amount is selected.\n     */\n    icon?: string;\n    /**\n     * The color of the icon.\n     */\n    iconColor?: string;\n    /**\n     * Whether the control should be disabled\n     */\n    isDisabled?: boolean;\n    /**\n     * A Text that should be displayed if no amount is selected;\n     */\n    label?: string;\n    /**\n     * The maximum allowed amount. If the maxAmount is reached, a check icon is displayed on the left side.\n     */\n    maxAmount?: number;\n    /**\n     * The minimum allowed amount.\n     */\n    minAmount?: number;\n    /**\n     * A Function that is executed when the amount is changed\n     */\n    onChange?: (amount: number) => void;\n    /**\n     * Enables keyboard-only focus highlighting. The highlighting is only visible while the\n     * user navigates with the keyboard and is reset on mouse movement or click.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n    /**\n     * Whether the label should be displayed even if an amount is selected.\n     */\n    shouldForceLabel?: boolean;\n    /**\n     * Whether the \"add\"-icon should be displayed if the minAmount is reached.\n     */\n    shouldShowAddIconOnMinAmount?: boolean;\n    /**\n     * Whether the icon should be displayed if no amount is selected\n     */\n    shouldShowIcon?: boolean;\n    /**\n     * Whether the input should be wider\n     */\n    shouldShowWideInput?: boolean;\n    /**\n     * Defines the amount that will change when adjusted\n     */\n    step?: number;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    iconColor,\n    isDisabled = false,\n    label,\n    maxAmount,\n    minAmount = 0,\n    onChange,\n    shouldEnableKeyboardHighlighting,\n    shouldForceLabel = false,\n    shouldShowAddIconOnMinAmount = false,\n    shouldShowIcon = true,\n    shouldShowWideInput = false,\n    step: stepProp = 1,\n}) => {\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting && !isDisabled,\n    );\n\n    const [amountValue, setAmountValue] = useState(minAmount);\n    const [inputValue, setInputValue] = useState(minAmount.toString());\n    const [displayState, setDisplayState] = useState<DisplayState>('default');\n    const [isEditing, setIsEditing] = useState(false);\n\n    const step = useMemo(\n        () => (Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1),\n        [stepProp],\n    );\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const leftButtonRef = useRef<HTMLButtonElement>(null);\n    const rightButtonRef = useRef<HTMLButtonElement>(null);\n\n    /**\n     * This function controls the displayState\n     */\n    useEffect(() => {\n        switch (true) {\n            case maxAmount && amountValue >= maxAmount:\n                setDisplayState('maxAmount');\n                return;\n            case amountValue > minAmount:\n                setDisplayState('normal');\n                return;\n            case amountValue === minAmount && amountValue >= 0 && shouldShowAddIconOnMinAmount:\n                setDisplayState('minAmount');\n                return;\n            default:\n                setDisplayState('default');\n        }\n    }, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);\n\n    const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n    /**\n     * Function that sets the amountValue to the amount\n     */\n    useEffect(() => {\n        if (typeof amount !== 'number') {\n            return;\n        }\n\n        setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n        setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n    }, [amount, maxAmount, minAmount]);\n\n    const handleAmountAdd = useCallback(() => {\n        setAmountValue((prevState) => {\n            const newAmount = checkForValidAmount({\n                amount: prevState + step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return typeof amount === 'number' ? prevState : newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) + step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [amount, maxAmount, minAmount, onChange, step]);\n\n    const handleAmountRemove = useCallback(() => {\n        if (displayState === 'default') {\n            return;\n        }\n\n        setAmountValue((prevState) => {\n            const newAmount = checkForValidAmount({\n                amount: prevState - step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) - step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [displayState, maxAmount, minAmount, onChange, step]);\n\n    const handleFirstAmount = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (amountValue !== minAmount) {\n            return;\n        }\n\n        if (typeof onChange === 'function') {\n            onChange(minAmount + step);\n        }\n\n        setAmountValue(minAmount + step);\n        setInputValue((minAmount + step).toString());\n    }, [amountValue, isDisabled, minAmount, onChange, step]);\n\n    const handlePseudoInputClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        setIsEditing(true);\n\n        window.requestAnimationFrame(() => {\n            inputRef.current?.focus();\n        });\n    }, [isDisabled]);\n\n    const handleInputBlur = useCallback(() => {\n        const checkedValue = checkForValidAmount({\n            minAmount,\n            maxAmount,\n            amount: Math.round(Number(inputValue) / step) * step,\n        });\n\n        setAmountValue(checkedValue);\n        setInputValue(checkedValue.toString());\n        setIsEditing(false);\n\n        if (typeof onChange === 'function') {\n            onChange(checkedValue);\n        }\n\n        if (inputValue === '') {\n            setInputValue(minAmount.toString());\n        }\n    }, [inputValue, maxAmount, minAmount, onChange, step]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const { value } = event.target;\n\n            const valueBefore = Number(value.replace(/\\D/g, ''));\n\n            if (valueBefore < minAmount && minAmount === 0) {\n                setInputValue('0');\n\n                return;\n            }\n\n            setInputValue(valueBefore === 0 ? '' : valueBefore.toString());\n        },\n        [minAmount],\n    );\n\n    let inputLabel = inputValue;\n\n    if (typeof label === 'string' && (displayState === 'default' || shouldForceLabel)) {\n        inputLabel = label;\n    }\n\n    const shouldShowPseudoInput =\n        !isEditing &&\n        (inputValue === '0' ||\n            (shouldForceLabel && typeof label === 'string') ||\n            inputLabel === label);\n\n    useFocusRingPortal(inputRef, {\n        isEnabled: shouldShowKeyboardHighlighting && !shouldShowPseudoInput,\n    });\n    useFocusRingPortal(leftButtonRef, {\n        isEnabled: shouldShowKeyboardHighlighting && displayState === 'normal',\n    });\n    useFocusRingPortal(rightButtonRef, { isEnabled: shouldShowKeyboardHighlighting });\n\n    return useMemo(\n        () => (\n            <StyledAmountControl onClick={handleFirstAmount} $isDisabled={isDisabled}>\n                <AnimatePresence initial={false}>\n                    {['normal'].includes(displayState) && (\n                        <StyledMotionAmountControlButton\n                            ref={leftButtonRef}\n                            key=\"left_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{\n                                width: 40,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountRemove}\n                            disabled={isDisabled || (amountValue !== 0 && amountValue <= minAmount)}\n                            $isDisabled={\n                                isDisabled || (amountValue !== 0 && amountValue <= minAmount)\n                            }\n                        >\n                            <Icon icons={['fa fa-minus']} size={14} color=\"white\" />\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n                <StyledInputWrapper>\n                    {shouldShowPseudoInput ? (\n                        <StyledAmountControlPseudoInput\n                            onClick={handlePseudoInputClick}\n                            $shouldShowWideInput={shouldShowWideInput}\n                            $shouldShowRightIcon={!['maxAmount'].includes(displayState)}\n                        >\n                            {inputLabel}\n                        </StyledAmountControlPseudoInput>\n                    ) : (\n                        <StyledAmountControlInput\n                            ref={inputRef}\n                            $displayState={displayState}\n                            $shouldShowIcon={shouldShowIcon}\n                            $shouldShowWideInput={shouldShowWideInput}\n                            $hasFocus={hasFocus}\n                            disabled={isDisabled}\n                            onFocus={() => setIsEditing(true)}\n                            onBlur={handleInputBlur}\n                            onChange={handleInputChange}\n                            value={inputLabel}\n                        />\n                    )}\n                </StyledInputWrapper>\n                <AnimatePresence initial={false}>\n                    <StyledMotionAmountControlButton\n                        ref={rightButtonRef}\n                        key=\"right_button\"\n                        initial={{ width: 0, opacity: 0, padding: 0 }}\n                        animate={{\n                            width: 40,\n                            opacity: 1,\n                            padding: 0,\n                        }}\n                        exit={{ width: 0, opacity: 0, padding: 0 }}\n                        transition={{ duration: 0.2, type: 'tween' }}\n                        $color={displayState === 'maxAmount' ? 'rgb(32, 198, 90)' : undefined}\n                        onClick={\n                            displayState === 'maxAmount' ? handleAmountRemove : handleAmountAdd\n                        }\n                        disabled={isDisabled || (maxAmount ? amountValue >= maxAmount : false)}\n                        $isDisabled={isDisabled || (maxAmount ? amountValue >= maxAmount : false)}\n                    >\n                        <Icon\n                            icons={\n                                !['normal'].includes(displayState) && icon\n                                    ? [displayState === 'maxAmount' ? 'fa fa-check' : icon]\n                                    : [displayState === 'maxAmount' ? 'fa fa-check' : 'fa fa-plus']\n                            }\n                            size={14}\n                            color={iconColor ?? 'white'}\n                        />\n                    </StyledMotionAmountControlButton>\n                </AnimatePresence>\n            </StyledAmountControl>\n        ),\n        [\n            amountValue,\n            displayState,\n            handleAmountAdd,\n            handleAmountRemove,\n            handleFirstAmount,\n            handleInputBlur,\n            handleInputChange,\n            handlePseudoInputClick,\n            hasFocus,\n            icon,\n            iconColor,\n            inputLabel,\n            isDisabled,\n            maxAmount,\n            minAmount,\n            shouldShowIcon,\n            shouldShowKeyboardHighlighting,\n            shouldShowPseudoInput,\n            shouldShowWideInput,\n        ],\n    );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/amount-control/AmountControl.styles.js

@@ -1,6 +1,5 @@
 import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
-import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledAmountControl = styled.div`
     background-color: ${({
   theme
@@ -36,14 +35,6 @@ export const StyledAmountControlInput = styled.input`
   $hasFocus
 }) => $hasFocus ? 'text' : 'pointer'};
 
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && css`
-            &:focus-visible {
-                ${keyboardFocusHighlightingRingCss}
-            }
-        `}
-
     ${({
   $displayState
 }) => $displayState === 'maxAmount' && css`
@@ -93,14 +84,6 @@ export const StyledMotionAmountControlButton = styled(motion.button)`
     //overflow: hidden;
     transition: background-color 0.2s ease-in-out;
 
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && css`
-            &:focus-visible {
-                ${keyboardFocusHighlightingRingCss}
-            }
-        `};
-
     ${({
   $isDisabled
 }) => $isDisabled && css`

package/lib/esm/components/amount-control/AmountControl.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AmountControl.styles.js","names":["motion","styled","css","keyboardFocusHighlightingRingCss","StyledAmountControl","div","theme","$isDisabled","StyledInputWrapper","StyledAmountControlInput","input","$shouldShowWideInput","$hasFocus","$shouldShowKeyboardHighlighting","$displayState","$shouldShowIcon","StyledAmountControlPseudoInput","$shouldShowRightIcon","StyledMotionAmountControlButton","button","$color"],"sources":["../../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<{\n    $isDisabled: boolean;\n}>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n    background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n    display: flex;\n    width: fit-content;\n    border-radius: 3px;\n    transition: opacity 0.2s ease;\n    height: 28px;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n            pointer-events: none;\n        `}\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n    $displayState: DisplayState;\n    $shouldShowIcon: boolean;\n    $hasFocus: boolean;\n    $shouldShowWideInput: boolean;\n    $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nexport const StyledInputWrapper = styled.div<WithTheme<unknown>>`\n    background-color: ${({ theme }) => theme['408']};\n`;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n    background-color: rgba(255, 255, 255, 0.2);\n    color: white;\n    border: none;\n    height: 28px;\n    width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    text-align: center;\n    cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                ${keyboardFocusHighlightingRingCss}\n            }\n        `}\n\n    ${({ $displayState }) =>\n        $displayState === 'maxAmount' &&\n        css`\n            border-bottom-right-radius: 3px;\n            border-top-right-radius: 3px;\n        `}\n    ${({ $displayState, $shouldShowIcon }) =>\n        $displayState === 'default' &&\n        !$shouldShowIcon &&\n        css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n        `};\n`;\n\ntype StyledAmountControlPseudoInputProps = WithTheme<{\n    $shouldShowWideInput: boolean;\n    $shouldShowRightIcon: boolean;\n}>;\n\nexport const StyledAmountControlPseudoInput = styled.div<StyledAmountControlPseudoInputProps>`\n    background-color: rgba(255, 255, 255, 0.2);\n    color: white;\n    border: none;\n    height: 28px;\n    min-width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    padding: 1px 8px;\n    text-align: center;\n    cursor: pointer;\n    user-select: none;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    border-bottom-left-radius: ${({ $shouldShowRightIcon }) =>\n        $shouldShowRightIcon ? '3px' : 'unset'};\n    border-top-left-radius: ${({ $shouldShowRightIcon }) =>\n        $shouldShowRightIcon ? '3px' : 'unset'};\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $color?: string;\n    $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n    motion.button,\n)<StyledAmountControlButtonProps>`\n    align-items: center;\n    background-color: ${({ theme, $color }: StyledAmountControlButtonProps) =>\n        $color ?? theme['408']};\n    display: flex;\n    justify-content: center;\n    //overflow: hidden;\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $shouldShowKeyboardHighlighting }: StyledAmountControlButtonProps) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                ${keyboardFocusHighlightingRingCss}\n            }\n        `};\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,gCAAgC,QAAQ,8CAA8C;AAO/F,OAAO,MAAMC,mBAAmB,GAAGH,MAAM,CAACI,GAA6B;AACvE,wBAAwB,CAAC;EAAEC;AAAgC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAY,CAAC,KACdA,WAAW,IACXL,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AAUD,OAAO,MAAMM,kBAAkB,GAAGP,MAAM,CAACI,GAAuB;AAChE,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AAED,OAAO,MAAMG,wBAAwB,GAAGR,MAAM,CAACS,KAAoC;AACnF;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,EAAE,GAAG,EAAG;AAC3E;AACA,cAAc,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,MAAM,GAAG,SAAU;AACjE;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCA,+BAA+B,IAC/BX,GAAG;AACX;AACA,kBAAkBC,gCAAgC;AAClD;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEW;AAAc,CAAC,KAChBA,aAAa,KAAK,WAAW,IAC7BZ,GAAG;AACX;AACA;AACA,SAAS;AACT,MAAM,CAAC;EAAEY,aAAa;EAAEC;AAAgB,CAAC,KACjCD,aAAa,KAAK,SAAS,IAC3B,CAACC,eAAe,IAChBb,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AAOD,OAAO,MAAMc,8BAA8B,GAAGf,MAAM,CAACI,GAAwC;AAC7F;AACA;AACA;AACA;AACA,iBAAiB,CAAC;EAAEM;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,EAAE,GAAG,EAAG;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,CAAC;EAAEM;AAAqB,CAAC,KAClDA,oBAAoB,GAAG,KAAK,GAAG,OAAO;AAC9C,8BAA8B,CAAC;EAAEA;AAAqB,CAAC,KAC/CA,oBAAoB,GAAG,KAAK,GAAG,OAAO;AAC9C,CAAC;AAQD,OAAO,MAAMC,+BAA+B,GAAGjB,MAAM,CACjDD,MAAM,CAACmB,MACX,CAAiC;AACjC;AACA,wBAAwB,CAAC;EAAEb,KAAK;EAAEc;AAAuC,CAAC,KAClEA,MAAM,IAAId,KAAK,CAAC,KAAK,CAAC;AAC9B;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEO;AAAgE,CAAC,KAClEA,+BAA+B,IAC/BX,GAAG;AACX;AACA,kBAAkBC,gCAAgC;AAClD;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEI;AAAY,CAAC,KACdA,WAAW,IACXL,GAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}
+{"version":3,"file":"AmountControl.styles.js","names":["motion","styled","css","StyledAmountControl","div","theme","$isDisabled","StyledInputWrapper","StyledAmountControlInput","input","$shouldShowWideInput","$hasFocus","$displayState","$shouldShowIcon","StyledAmountControlPseudoInput","$shouldShowRightIcon","StyledMotionAmountControlButton","button","$color"],"sources":["../../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<{\n    $isDisabled: boolean;\n}>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n    background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n    display: flex;\n    width: fit-content;\n    border-radius: 3px;\n    transition: opacity 0.2s ease;\n    height: 28px;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n            pointer-events: none;\n        `}\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n    $displayState: DisplayState;\n    $shouldShowIcon: boolean;\n    $hasFocus: boolean;\n    $shouldShowWideInput: boolean;\n}>;\n\nexport const StyledInputWrapper = styled.div<WithTheme<unknown>>`\n    background-color: ${({ theme }) => theme['408']};\n`;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n    background-color: rgba(255, 255, 255, 0.2);\n    color: white;\n    border: none;\n    height: 28px;\n    width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    text-align: center;\n    cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n    ${({ $displayState }) =>\n        $displayState === 'maxAmount' &&\n        css`\n            border-bottom-right-radius: 3px;\n            border-top-right-radius: 3px;\n        `}\n    ${({ $displayState, $shouldShowIcon }) =>\n        $displayState === 'default' &&\n        !$shouldShowIcon &&\n        css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n        `};\n`;\n\ntype StyledAmountControlPseudoInputProps = WithTheme<{\n    $shouldShowWideInput: boolean;\n    $shouldShowRightIcon: boolean;\n}>;\n\nexport const StyledAmountControlPseudoInput = styled.div<StyledAmountControlPseudoInputProps>`\n    background-color: rgba(255, 255, 255, 0.2);\n    color: white;\n    border: none;\n    height: 28px;\n    min-width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    padding: 1px 8px;\n    text-align: center;\n    cursor: pointer;\n    user-select: none;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    border-bottom-left-radius: ${({ $shouldShowRightIcon }) =>\n        $shouldShowRightIcon ? '3px' : 'unset'};\n    border-top-left-radius: ${({ $shouldShowRightIcon }) =>\n        $shouldShowRightIcon ? '3px' : 'unset'};\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $color?: string;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n    motion.button,\n)<StyledAmountControlButtonProps>`\n    align-items: center;\n    background-color: ${({ theme, $color }: StyledAmountControlButtonProps) =>\n        $color ?? theme['408']};\n    display: flex;\n    justify-content: center;\n    //overflow: hidden;\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA6B;AACvE,wBAAwB,CAAC;EAAEC;AAAgC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAY,CAAC,KACdA,WAAW,IACXJ,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AASD,OAAO,MAAMK,kBAAkB,GAAGN,MAAM,CAACG,GAAuB;AAChE,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AAED,OAAO,MAAMG,wBAAwB,GAAGP,MAAM,CAACQ,KAAoC;AACnF;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,EAAE,GAAG,EAAG;AAC3E;AACA,cAAc,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,MAAM,GAAG,SAAU;AACjE;AACA,MAAM,CAAC;EAAEC;AAAc,CAAC,KAChBA,aAAa,KAAK,WAAW,IAC7BV,GAAG;AACX;AACA;AACA,SAAS;AACT,MAAM,CAAC;EAAEU,aAAa;EAAEC;AAAgB,CAAC,KACjCD,aAAa,KAAK,SAAS,IAC3B,CAACC,eAAe,IAChBX,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AAOD,OAAO,MAAMY,8BAA8B,GAAGb,MAAM,CAACG,GAAwC;AAC7F;AACA;AACA;AACA;AACA,iBAAiB,CAAC;EAAEM;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,EAAE,GAAG,EAAG;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,CAAC;EAAEK;AAAqB,CAAC,KAClDA,oBAAoB,GAAG,KAAK,GAAG,OAAO;AAC9C,8BAA8B,CAAC;EAAEA;AAAqB,CAAC,KAC/CA,oBAAoB,GAAG,KAAK,GAAG,OAAO;AAC9C,CAAC;AAOD,OAAO,MAAMC,+BAA+B,GAAGf,MAAM,CACjDD,MAAM,CAACiB,MACX,CAAiC;AACjC;AACA,wBAAwB,CAAC;EAAEZ,KAAK;EAAEa;AAAuC,CAAC,KAClEA,MAAM,IAAIb,KAAK,CAAC,KAAK,CAAC;AAC9B;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAY,CAAC,KACdA,WAAW,IACXJ,GAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}

package/lib/esm/components/button/Button.js

@@ -1,7 +1,8 @@
 import clsx from 'clsx';
 import { AnimatePresence } from 'motion/react';
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { useTheme } from 'styled-components';
+import { useFocusRingPortal } from '../../hooks/useFocusRingPortal';
 import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import Icon from '../icon/Icon';
 import { StyledIconWrapper, StyledMotionButton, StyledMotionChildrenWrapper, StyledMotionWaitCursorWrapper } from './Button.styles';
@@ -21,6 +22,7 @@ const Button = ({
   tapDuration = 0.5,
   shouldEnableKeyboardHighlighting
 }) => {
+  const buttonRef = useRef(null);
   const handleClick = event => {
     if (shouldStopPropagation) {
       event.stopPropagation();
@@ -31,6 +33,9 @@ const Button = ({
   const theme = useTheme();
   const effectiveButtonDesign = buttonDesign ?? theme.buttonDesign;
   const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
+  useFocusRingPortal(buttonRef, {
+    isEnabled: shouldShowKeyboardHighlighting
+  });
   const iconColor = useMemo(() => {
     if (isSecondary) {
       return theme.text;
@@ -70,10 +75,10 @@ const Button = ({
     };
   }, [theme, effectiveButtonDesign]);
   return /*#__PURE__*/React.createElement(StyledMotionButton, {
+    ref: buttonRef,
     $shouldShowTextAsRobotoMedium: shouldShowTextAsRobotoMedium,
     $shouldShowAsSelectButton: shouldShowAsSelectButton,
     $shouldShowWaitCursor: shouldShowWaitCursor,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     className: buttonClasses,
     disabled: isDisabled,
     $isDisabled: isDisabled,

package/lib/esm/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["clsx","AnimatePresence","React","useMemo","useTheme","useKeyboardFocusHighlighting","Icon","StyledIconWrapper","StyledMotionButton","StyledMotionChildrenWrapper","StyledMotionWaitCursorWrapper","WaitCursor","Button","children","className","icon","isDisabled","isSecondary","onClick","shouldShowWaitCursor","shouldStopPropagation","shouldShowAsSelectButton","shouldShowTextAsRobotoMedium","buttonDesign","tapDuration","shouldEnableKeyboardHighlighting","handleClick","event","stopPropagation","buttonClasses","theme","effectiveButtonDesign","shouldShowKeyboardHighlighting","iconColor","text","buttonColor","buttonBackgroundColor","backgroundColor","color","tapStyles","opacity","hoverStyles","createElement","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","$shouldShowWaitCursor","$shouldShowKeyboardHighlighting","disabled","$isDisabled","$hasChildren","$hasIcon","$isSecondary","$effectiveButtonDesign","style","visibility","initial","animate","transition","duration","ease","type","whileTap","whileHover","icons","width","exit","key","overflow","shouldHideBackground","displayName"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEventHandler, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledIconWrapper,\n    StyledMotionButton,\n    StyledMotionChildrenWrapper,\n    StyledMotionWaitCursorWrapper,\n} from './Button.styles';\nimport type { ButtonProps } from './Button.types';\nimport WaitCursor from './wait-cursor/WaitCursor';\n\nconst Button: FC<ButtonProps> = ({\n    children,\n    className,\n    icon,\n    isDisabled,\n    isSecondary,\n    onClick,\n    shouldShowWaitCursor,\n    shouldStopPropagation,\n    shouldShowAsSelectButton = false,\n    shouldShowTextAsRobotoMedium = true,\n    buttonDesign,\n    tapDuration = 0.5,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        onClick(event);\n    };\n\n    const buttonClasses = clsx('beta-chayns-button ellipsis', className);\n\n    const theme = useTheme() as Theme;\n\n    const effectiveButtonDesign = (buttonDesign ?? theme.buttonDesign) as number;\n\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting && !isDisabled,\n    );\n\n    const iconColor = useMemo(() => {\n        if (isSecondary) {\n            return theme.text;\n        }\n\n        return effectiveButtonDesign === 2\n            ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n            : (theme.buttonColor ?? 'white');\n    }, [\n        isSecondary,\n        theme.buttonBackgroundColor,\n        theme.buttonColor,\n        effectiveButtonDesign,\n        theme.text,\n    ]);\n\n    const backgroundColor = useMemo(() => {\n        let color;\n\n        if (isSecondary || shouldShowAsSelectButton) {\n            color = theme['202'];\n        } else {\n            color = theme.buttonBackgroundColor ?? theme['408'];\n        }\n\n        if (effectiveButtonDesign === 2) {\n            color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n        }\n\n        return color;\n    }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n    const tapStyles = useMemo(() => {\n        if (effectiveButtonDesign === 2) {\n            return {\n                backgroundColor:\n                    isSecondary || shouldShowAsSelectButton\n                        ? `rgba(${theme['202-rgb'] ?? ''}, 0.7)`\n                        : `${theme.buttonBackgroundColor ?? ''}40`,\n            };\n        }\n\n        return { opacity: 0.6 };\n    }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n    const hoverStyles = useMemo(() => {\n        if (effectiveButtonDesign === 2) {\n            return { backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)` };\n        }\n\n        return { opacity: 1 };\n    }, [theme, effectiveButtonDesign]);\n\n    return (\n        <StyledMotionButton\n            $shouldShowTextAsRobotoMedium={shouldShowTextAsRobotoMedium}\n            $shouldShowAsSelectButton={shouldShowAsSelectButton}\n            $shouldShowWaitCursor={shouldShowWaitCursor}\n            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n            className={buttonClasses}\n            disabled={isDisabled}\n            $isDisabled={isDisabled}\n            $hasChildren={!!children}\n            $hasIcon={typeof icon === 'string' && icon !== ''}\n            $isSecondary={isSecondary}\n            $effectiveButtonDesign={effectiveButtonDesign}\n            onClick={handleClick}\n            style={{ visibility: !backgroundColor ? 'hidden' : 'visible', backgroundColor }}\n            initial={{ opacity: 0.5 }}\n            animate={{\n                opacity: isDisabled ? 0.5 : 1,\n            }}\n            transition={{\n                visibility: { duration: 0 },\n                duration: tapDuration,\n                ease: 'easeIn',\n                type: 'tween',\n            }}\n            whileTap={isDisabled ? {} : { ...tapStyles, transition: { duration: 0 } }}\n            whileHover={isDisabled ? {} : { ...hoverStyles }}\n        >\n            <AnimatePresence initial={false}>\n                {icon && (\n                    <StyledIconWrapper>\n                        <Icon color={iconColor} icons={[icon]} />\n                    </StyledIconWrapper>\n                )}\n                {shouldShowWaitCursor && (\n                    <StyledMotionWaitCursorWrapper\n                        animate={{ opacity: 1, width: 40 }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"wait-cursor\"\n                        style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        <WaitCursor color={iconColor ?? 'white'} shouldHideBackground />\n                    </StyledMotionWaitCursorWrapper>\n                )}\n                {!shouldShowWaitCursor && children && (\n                    <StyledMotionChildrenWrapper\n                        animate={{ opacity: 1, width: 'auto' }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"children\"\n                        // style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        {children}\n                    </StyledMotionChildrenWrapper>\n                )}\n            </AnimatePresence>\n        </StyledMotionButton>\n    );\n};\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Button.js","names":["clsx","AnimatePresence","React","useMemo","useRef","useTheme","useFocusRingPortal","useKeyboardFocusHighlighting","Icon","StyledIconWrapper","StyledMotionButton","StyledMotionChildrenWrapper","StyledMotionWaitCursorWrapper","WaitCursor","Button","children","className","icon","isDisabled","isSecondary","onClick","shouldShowWaitCursor","shouldStopPropagation","shouldShowAsSelectButton","shouldShowTextAsRobotoMedium","buttonDesign","tapDuration","shouldEnableKeyboardHighlighting","buttonRef","handleClick","event","stopPropagation","buttonClasses","theme","effectiveButtonDesign","shouldShowKeyboardHighlighting","isEnabled","iconColor","text","buttonColor","buttonBackgroundColor","backgroundColor","color","tapStyles","opacity","hoverStyles","createElement","ref","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","$shouldShowWaitCursor","disabled","$isDisabled","$hasChildren","$hasIcon","$isSecondary","$effectiveButtonDesign","style","visibility","initial","animate","transition","duration","ease","type","whileTap","whileHover","icons","width","exit","key","overflow","shouldHideBackground","displayName"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEventHandler, useMemo, useRef } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledIconWrapper,\n    StyledMotionButton,\n    StyledMotionChildrenWrapper,\n    StyledMotionWaitCursorWrapper,\n} from './Button.styles';\nimport type { ButtonProps } from './Button.types';\nimport WaitCursor from './wait-cursor/WaitCursor';\n\nconst Button: FC<ButtonProps> = ({\n    children,\n    className,\n    icon,\n    isDisabled,\n    isSecondary,\n    onClick,\n    shouldShowWaitCursor,\n    shouldStopPropagation,\n    shouldShowAsSelectButton = false,\n    shouldShowTextAsRobotoMedium = true,\n    buttonDesign,\n    tapDuration = 0.5,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const buttonRef = useRef<HTMLButtonElement>(null);\n\n    const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        onClick(event);\n    };\n\n    const buttonClasses = clsx('beta-chayns-button ellipsis', className);\n\n    const theme = useTheme() as Theme;\n\n    const effectiveButtonDesign = (buttonDesign ?? theme.buttonDesign) as number;\n\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting && !isDisabled,\n    );\n    useFocusRingPortal(buttonRef, { isEnabled: shouldShowKeyboardHighlighting });\n\n    const iconColor = useMemo(() => {\n        if (isSecondary) {\n            return theme.text;\n        }\n\n        return effectiveButtonDesign === 2\n            ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n            : (theme.buttonColor ?? 'white');\n    }, [\n        isSecondary,\n        theme.buttonBackgroundColor,\n        theme.buttonColor,\n        effectiveButtonDesign,\n        theme.text,\n    ]);\n\n    const backgroundColor = useMemo(() => {\n        let color;\n\n        if (isSecondary || shouldShowAsSelectButton) {\n            color = theme['202'];\n        } else {\n            color = theme.buttonBackgroundColor ?? theme['408'];\n        }\n\n        if (effectiveButtonDesign === 2) {\n            color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n        }\n\n        return color;\n    }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n    const tapStyles = useMemo(() => {\n        if (effectiveButtonDesign === 2) {\n            return {\n                backgroundColor:\n                    isSecondary || shouldShowAsSelectButton\n                        ? `rgba(${theme['202-rgb'] ?? ''}, 0.7)`\n                        : `${theme.buttonBackgroundColor ?? ''}40`,\n            };\n        }\n\n        return { opacity: 0.6 };\n    }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n    const hoverStyles = useMemo(() => {\n        if (effectiveButtonDesign === 2) {\n            return { backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)` };\n        }\n\n        return { opacity: 1 };\n    }, [theme, effectiveButtonDesign]);\n\n    return (\n        <StyledMotionButton\n            ref={buttonRef}\n            $shouldShowTextAsRobotoMedium={shouldShowTextAsRobotoMedium}\n            $shouldShowAsSelectButton={shouldShowAsSelectButton}\n            $shouldShowWaitCursor={shouldShowWaitCursor}\n            className={buttonClasses}\n            disabled={isDisabled}\n            $isDisabled={isDisabled}\n            $hasChildren={!!children}\n            $hasIcon={typeof icon === 'string' && icon !== ''}\n            $isSecondary={isSecondary}\n            $effectiveButtonDesign={effectiveButtonDesign}\n            onClick={handleClick}\n            style={{ visibility: !backgroundColor ? 'hidden' : 'visible', backgroundColor }}\n            initial={{ opacity: 0.5 }}\n            animate={{\n                opacity: isDisabled ? 0.5 : 1,\n            }}\n            transition={{\n                visibility: { duration: 0 },\n                duration: tapDuration,\n                ease: 'easeIn',\n                type: 'tween',\n            }}\n            whileTap={isDisabled ? {} : { ...tapStyles, transition: { duration: 0 } }}\n            whileHover={isDisabled ? {} : { ...hoverStyles }}\n        >\n            <AnimatePresence initial={false}>\n                {icon && (\n                    <StyledIconWrapper>\n                        <Icon color={iconColor} icons={[icon]} />\n                    </StyledIconWrapper>\n                )}\n                {shouldShowWaitCursor && (\n                    <StyledMotionWaitCursorWrapper\n                        animate={{ opacity: 1, width: 40 }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"wait-cursor\"\n                        style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        <WaitCursor color={iconColor ?? 'white'} shouldHideBackground />\n                    </StyledMotionWaitCursorWrapper>\n                )}\n                {!shouldShowWaitCursor && children && (\n                    <StyledMotionChildrenWrapper\n                        animate={{ opacity: 1, width: 'auto' }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"children\"\n                        // style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        {children}\n                    </StyledMotionChildrenWrapper>\n                )}\n            </AnimatePresence>\n        </StyledMotionButton>\n    );\n};\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/button/Button.styles.js

@@ -1,6 +1,5 @@
 import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
-import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledMotionButton = styled(motion.button)`
     ${({
   $shouldShowTextAsRobotoMedium,
@@ -58,15 +57,6 @@ export const StyledMotionButton = styled(motion.button)`
     user-select: none;
     width: fit-content;
 
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && css`
-            &:focus-visible {
-                transition: none;
-                ${keyboardFocusHighlightingRingCss}
-            }
-        `}
-
     ${({
   $hasIcon,
   $hasChildren,