@frontify/fondue 12.0.0-beta.128 → 12.0.0-beta.129

package/dist/components/Tooltip/Tooltip.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useLink } from '@react-aria/link';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, {\n    FocusEvent,\n    HTMLAttributes,\n    PropsWithChildren,\n    ReactChild,\n    ReactElement,\n    ReactNode,\n    cloneElement,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { BrightHeader, BrightHeaderStyle, brightHeaderArrowBackgroundColors } from './BrightHeader';\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\n\nexport type TooltipButton = {\n    label: string;\n    action: () => void;\n};\n\nexport type TooltipProps = PropsWithChildren<{\n    triggerElement?: ReactElement;\n    content: ReactNode;\n    tooltipIcon?: ReactElement;\n    heading?: ReactNode;\n    headingIcon?: ReactElement;\n    linkUrl?: string;\n    linkLabel?: string;\n    brightHeader?: BrightHeaderStyle;\n    buttons?: [TooltipButton, TooltipButton] | [TooltipButton];\n    children?: ReactChild;\n    position?: TooltipPosition;\n    alignment?: TooltipAlignment;\n    flip?: boolean;\n    withArrow?: boolean;\n    hoverDelay?: number;\n    enterDelay?: number;\n    open?: boolean;\n    disabled?: boolean;\n    /** @deprecated use disabled since the tooltip is always present in the DOM now so hidden has no effect anymore */\n    hidden?: boolean;\n}>;\n\n/**\n * This is a temporary workaround because for some yet unknown reasons `tailwindcss` in clarify purges the `tw-pb-3.5` and `tw-pt-3.5` class.\n */\nconst paddingsTop = {\n    small: 'tw-pt-3.5',\n    large: 'tw-pt-4',\n};\n\nconst paddingsBottom = {\n    small: 'tw-pb-3.5',\n    large: 'tw-pb-4',\n};\n\nexport enum TooltipPosition {\n    Top = 'Top',\n    Right = 'Right',\n    Bottom = 'Bottom',\n    Left = 'Left',\n}\n\nexport enum TooltipAlignment {\n    Start = 'Start',\n    Middle = 'Middle',\n    End = 'End',\n}\n\nconst placementMap: Record<`${TooltipPosition}-${TooltipAlignment}`, Placement> = {\n    ['Top-Start']: 'top-start',\n    ['Top-End']: 'top-end',\n    ['Bottom-Start']: 'bottom-start',\n    ['Bottom-End']: 'bottom-end',\n    ['Left-Start']: 'left-start',\n    ['Left-End']: 'left-end',\n    ['Right-Start']: 'right-start',\n    ['Right-End']: 'right-end',\n    ['Top-Middle']: 'top',\n    ['Right-Middle']: 'right',\n    ['Bottom-Middle']: 'bottom',\n    ['Left-Middle']: 'left',\n};\n\nconst getArrowClasses = (currentPlacement: string, brightHeader: BrightHeaderStyle | undefined, alignment: string) => {\n    switch (true) {\n        case currentPlacement.toString().includes(TooltipPosition.Top.toLowerCase()):\n            return 'before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-dark before:tw-bg-base';\n        case currentPlacement.toString().includes(TooltipPosition.Right.toLowerCase()):\n            return merge([\n                'before:tw-border-t-0 before:tw-border-r-0 tw-left-[-5px]',\n                brightHeader &&\n                alignment === TooltipAlignment.Start &&\n                currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-dark before:tw-bg-base',\n            ]);\n        case currentPlacement.toString().includes(TooltipPosition.Bottom.toLowerCase()):\n            return merge([\n                'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]',\n                brightHeader ? brightHeaderArrowBackgroundColors[brightHeader] : 'before:tw-dark before:tw-bg-base',\n            ]);\n        case currentPlacement.toString().includes(TooltipPosition.Left.toLowerCase()):\n            return merge([\n                'before:tw-border-b-0 before:tw-border-l-0 tw-right-[-5px]',\n                brightHeader &&\n                alignment === TooltipAlignment.Start &&\n                currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-dark before:tw-bg-base',\n            ]);\n        default:\n            return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-dark before:tw-bg-base';\n    }\n};\n\nexport const Tooltip = ({\n    content,\n    tooltipIcon,\n    heading,\n    headingIcon,\n    linkUrl,\n    linkLabel,\n    brightHeader,\n    buttons,\n    children,\n    position = TooltipPosition.Bottom,\n    alignment = TooltipAlignment.Middle,\n    withArrow,\n    flip = true,\n    triggerElement,\n    hoverDelay = 200,\n    enterDelay = 0,\n    open = false,\n    disabled = false,\n    hidden = false,\n}: TooltipProps) => {\n    const [triggerElementRef, setTriggerElementRef] = useState<HTMLElement | HTMLDivElement | HTMLButtonElement | null>(\n        null,\n    );\n    const linkRef = useRef<HTMLAnchorElement | null>(null);\n\n    const shouldPreventTooltipOpening = hidden || disabled;\n    const { linkProps } = useLink({ isDisabled: shouldPreventTooltipOpening }, linkRef);\n    const hasLargePaddingTop = useMemo(\n        () => linkUrl || brightHeader || buttons || heading || headingIcon,\n        [linkUrl, brightHeader, buttons, heading, headingIcon],\n    );\n\n    const placement = placementMap[`${position}-${alignment}`];\n    const [tooltipContainerRef, setTooltipContainerRef] = useState<HTMLDivElement | null>(null);\n    const [triggerElementContainerRef, setTriggerElementContainerRef] = useState<HTMLDivElement | null>(null);\n    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n    const id = useMemoizedId();\n\n    const tooltipOffset = withArrow ? 10 : 5;\n    const popperInstance = usePopper(triggerElementRef, tooltipContainerRef, {\n        placement,\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'arrow',\n                options: {\n                    element: arrowElement,\n                },\n            },\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, tooltipOffset],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n    });\n\n    const currentPlacement = popperInstance.state?.placement ?? position;\n    const arrowStyling = getArrowClasses(currentPlacement, brightHeader, alignment);\n    const [isOpen, setIsOpen] = useState(false);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const handleHideTooltipOnHover = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n        timeoutRef.current = setTimeout(() => setIsOpen(false), hoverDelay);\n    }, [hoverDelay]);\n\n    const handleShowTooltipOnHover = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n\n        if (enterDelay) {\n            timeoutRef.current = setTimeout(() => setIsOpen(true), enterDelay);\n            return;\n        }\n\n        setIsOpen(true);\n    }, [enterDelay]);\n\n    const checkIfHovered = useCallback(\n        (event) => {\n            const hoveredElement = event.path ?? event.composedPath?.();\n            const hoverSources = [triggerElementRef, triggerElementContainerRef, tooltipContainerRef];\n\n            if (hoveredElement && hoverSources.some((el) => hoveredElement.includes(el))) {\n                handleShowTooltipOnHover();\n            }\n        },\n        [handleShowTooltipOnHover, triggerElementRef, triggerElementContainerRef, tooltipContainerRef],\n    );\n\n    const handleCloseIfFocusedOutside = useCallback(\n        (event: FocusEvent<HTMLElement>) => {\n            const { relatedTarget } = event;\n            const elements = [tooltipContainerRef, triggerElementContainerRef];\n\n            if (!relatedTarget || !elements.some((element) => element?.contains(relatedTarget))) {\n                setIsOpen(false);\n            }\n        },\n        [tooltipContainerRef, triggerElementContainerRef],\n    );\n\n    const openingEvents: HTMLAttributes<HTMLElement> = shouldPreventTooltipOpening\n        ? {}\n        : {\n              onMouseOver: (event) => checkIfHovered(event.nativeEvent),\n              onMouseLeave: handleHideTooltipOnHover,\n              onFocus: () => setIsOpen(true),\n              onBlur: handleCloseIfFocusedOutside,\n          };\n\n    useEffect(() => {\n        setIsOpen(shouldPreventTooltipOpening ? false : open);\n    }, [open, shouldPreventTooltipOpening]);\n\n    const listenForEsc = useCallback(\n        (event: KeyboardEvent) => {\n            if (isOpen && event.key === 'Escape') {\n                setIsOpen(false);\n            }\n        },\n        [isOpen],\n    );\n\n    useLayoutEffect(() => {\n        if (typeof popperInstance.update === 'function' && isOpen) {\n            popperInstance.update();\n        }\n\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (isOpen) {\n            window.addEventListener('keydown', listenForEsc);\n        } else {\n            window.removeEventListener('keydown', listenForEsc);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', listenForEsc);\n        };\n    }, [listenForEsc, isOpen]);\n\n    return (\n        <>\n            <div {...openingEvents} ref={setTriggerElementContainerRef}>\n                {triggerElement &&\n                    cloneElement(triggerElement, {\n                        ref: setTriggerElementRef,\n                        'aria-describedby': id,\n                        'aria-disabled': shouldPreventTooltipOpening,\n                    })}\n            </div>\n            <div\n                ref={setTooltipContainerRef}\n                aria-hidden={shouldPreventTooltipOpening}\n                className={merge([\n                    'tw-popper-container tw-inline-block tw-max-w-[200px] tw-dark tw-bg-base tw-rounded-md tw-shadow-mid tw-text-text tw-z-[120000]',\n                    !isOpen && 'tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden',\n                ])}\n                data-test-id=\"tooltip\"\n                role=\"tooltip\"\n                id={id}\n                style={popperInstance.styles.popper}\n                {...popperInstance.attributes.popper}\n                {...openingEvents}\n            >\n                {brightHeader && <BrightHeader headerStyle={brightHeader} />}\n                <div\n                    className={merge([\n                        'tw-px-4 tw-dark tw-bg-base tw-rounded-md tw-relative tw-z-[120000]',\n                        hasLargePaddingTop ? paddingsTop.small : paddingsTop.large,\n                        linkUrl ? paddingsBottom.small : paddingsBottom.large,\n                    ])}\n                >\n                    {heading && (\n                        <h4 className=\"tw-flex tw-text-m tw-font-bold tw-mb-1\">\n                            {headingIcon && (\n                                <span className=\"tw-mr-1.5\">\n                                    {cloneElement(headingIcon, { size: IconSize.Size20 })}\n                                </span>\n                            )}\n                            {heading}\n                        </h4>\n                    )}\n                    <div className=\"tw-flex\">\n                        {tooltipIcon && (\n                            <span className=\"tw-shrink-0 tw-mr-1 tw-leading-4\">\n                                {cloneElement(tooltipIcon, { size: IconSize.Size16 })}\n                            </span>\n                        )}\n                        <span className=\"tw-text-s tw-min-w-0 tw-break-words\">{content}</span>\n                    </div>\n                    {linkUrl && (\n                        <a\n                            {...linkProps}\n                            data-test-id=\"tooltip-link\"\n                            ref={linkRef}\n                            href={linkUrl}\n                            target=\"_blank\"\n                            rel=\"noopener noreferrer\"\n                            className={merge(['tw-text-xs tw-text-black-40 tw-underline tw-mt-1', FOCUS_VISIBLE_STYLE])}\n                        >\n                            {linkLabel ?? 'Click here to learn more.'}\n                        </a>\n                    )}\n                    {buttons && (\n                        <div className=\"tw-flex tw-flex-row-reverse tw-gap-x-1 tw-mt-4\">\n                            {buttons.length > 0 && (\n                                <Button\n                                    style={ButtonStyle.Default}\n                                    emphasis={ButtonEmphasis.Strong}\n                                    size={ButtonSize.Small}\n                                    onClick={buttons[0].action}\n                                    disabled={shouldPreventTooltipOpening}\n                                >\n                                    {buttons[0].label}\n                                </Button>\n                            )}\n                            {buttons.length === 2 && (\n                                <Button\n                                    style={ButtonStyle.Default}\n                                    emphasis={ButtonEmphasis.Default}\n                                    size={ButtonSize.Small}\n                                    onClick={buttons[1].action}\n                                    disabled={shouldPreventTooltipOpening}\n                                >\n                                    {buttons[1].label}\n                                </Button>\n                            )}\n                        </div>\n                    )}\n                </div>\n                {/**\n                 * This container is needed for the arrow element to not be styled by popperJS\n                 * selectors for its immediate children .tw-popper-container > .tw-popper-arrow\n                 * */}\n                <div aria-hidden=\"true\">\n                    <div\n                        data-test-id=\"popover-arrow\"\n                        data-popper-arrow={withArrow}\n                        ref={setArrowElement}\n                        style={popperInstance.styles.arrow}\n                        className={merge([\n                            withArrow &&\n                                'tw-popper-arrow tw-z-[110000] tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border before:tw-border-line',\n                            withArrow && arrowStyling,\n                        ])}\n                    />\n                </div>\n                {children}\n            </div>\n        </>\n    );\n};\nTooltip.displayName = 'FondueTooltip';\n"],"names":["paddingsTop","paddingsBottom","TooltipPosition","TooltipAlignment","placementMap","getArrowClasses","currentPlacement","brightHeader","alignment","merge","brightHeaderArrowBackgroundColors","Tooltip","content","tooltipIcon","heading","headingIcon","linkUrl","linkLabel","buttons","children","position","withArrow","flip","triggerElement","hoverDelay","enterDelay","open","disabled","hidden","triggerElementRef","setTriggerElementRef","useState","linkRef","useRef","shouldPreventTooltipOpening","linkProps","useLink","hasLargePaddingTop","useMemo","placement","tooltipContainerRef","setTooltipContainerRef","triggerElementContainerRef","setTriggerElementContainerRef","arrowElement","setArrowElement","id","useMemoizedId","popperInstance","usePopper","_a","arrowStyling","isOpen","setIsOpen","timeoutRef","handleHideTooltipOnHover","useCallback","handleShowTooltipOnHover","checkIfHovered","event","hoveredElement","el","handleCloseIfFocusedOutside","relatedTarget","element","openingEvents","useEffect","listenForEsc","useLayoutEffect","React","cloneElement","BrightHeader","IconSize","FOCUS_VISIBLE_STYLE","Button","ButtonStyle","ButtonEmphasis","ButtonSize"],"mappings":"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"}
+{"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useLink } from '@react-aria/link';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, {\n    FocusEvent,\n    HTMLAttributes,\n    PropsWithChildren,\n    ReactChild,\n    ReactElement,\n    ReactNode,\n    cloneElement,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { BrightHeader, BrightHeaderStyle, brightHeaderArrowBackgroundColors } from './BrightHeader';\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\n\nexport type TooltipButton = {\n    label: string;\n    action: () => void;\n};\n\nexport type TooltipProps = PropsWithChildren<{\n    triggerElement?: ReactElement;\n    content: ReactNode;\n    tooltipIcon?: ReactElement;\n    heading?: ReactNode;\n    headingIcon?: ReactElement;\n    linkUrl?: string;\n    linkLabel?: string;\n    brightHeader?: BrightHeaderStyle;\n    buttons?: [TooltipButton, TooltipButton] | [TooltipButton];\n    children?: ReactChild;\n    position?: TooltipPosition;\n    alignment?: TooltipAlignment;\n    flip?: boolean;\n    withArrow?: boolean;\n    hoverDelay?: number;\n    enterDelay?: number;\n    open?: boolean;\n    disabled?: boolean;\n    /** @deprecated use disabled since the tooltip is always present in the DOM now so hidden has no effect anymore */\n    hidden?: boolean;\n}>;\n\n/**\n * This is a temporary workaround because for some yet unknown reasons `tailwindcss` in clarify purges the `tw-pb-3.5` and `tw-pt-3.5` class.\n */\nconst paddingsTop = {\n    small: 'tw-pt-3.5',\n    large: 'tw-pt-4',\n};\n\nconst paddingsBottom = {\n    small: 'tw-pb-3.5',\n    large: 'tw-pb-4',\n};\n\nexport enum TooltipPosition {\n    Top = 'Top',\n    Right = 'Right',\n    Bottom = 'Bottom',\n    Left = 'Left',\n}\n\nexport enum TooltipAlignment {\n    Start = 'Start',\n    Middle = 'Middle',\n    End = 'End',\n}\n\nconst placementMap: Record<`${TooltipPosition}-${TooltipAlignment}`, Placement> = {\n    ['Top-Start']: 'top-start',\n    ['Top-End']: 'top-end',\n    ['Bottom-Start']: 'bottom-start',\n    ['Bottom-End']: 'bottom-end',\n    ['Left-Start']: 'left-start',\n    ['Left-End']: 'left-end',\n    ['Right-Start']: 'right-start',\n    ['Right-End']: 'right-end',\n    ['Top-Middle']: 'top',\n    ['Right-Middle']: 'right',\n    ['Bottom-Middle']: 'bottom',\n    ['Left-Middle']: 'left',\n};\n\nconst getArrowClasses = (currentPlacement: string, brightHeader: BrightHeaderStyle | undefined, alignment: string) => {\n    switch (true) {\n        case currentPlacement.toString().includes(TooltipPosition.Top.toLowerCase()):\n            return 'before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-dark before:tw-bg-base';\n        case currentPlacement.toString().includes(TooltipPosition.Right.toLowerCase()):\n            return merge([\n                'before:tw-border-t-0 before:tw-border-r-0 tw-left-[-5px]',\n                brightHeader &&\n                alignment === TooltipAlignment.Start &&\n                currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-dark before:tw-bg-base',\n            ]);\n        case currentPlacement.toString().includes(TooltipPosition.Bottom.toLowerCase()):\n            return merge([\n                'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]',\n                brightHeader ? brightHeaderArrowBackgroundColors[brightHeader] : 'before:tw-dark before:tw-bg-base',\n            ]);\n        case currentPlacement.toString().includes(TooltipPosition.Left.toLowerCase()):\n            return merge([\n                'before:tw-border-b-0 before:tw-border-l-0 tw-right-[-5px]',\n                brightHeader &&\n                alignment === TooltipAlignment.Start &&\n                currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-dark before:tw-bg-base',\n            ]);\n        default:\n            return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-dark before:tw-bg-base';\n    }\n};\n\nexport const Tooltip = ({\n    content,\n    tooltipIcon,\n    heading,\n    headingIcon,\n    linkUrl,\n    linkLabel,\n    brightHeader,\n    buttons,\n    children,\n    position = TooltipPosition.Bottom,\n    alignment = TooltipAlignment.Middle,\n    withArrow,\n    flip = true,\n    triggerElement,\n    hoverDelay = 200,\n    enterDelay = 0,\n    open = false,\n    disabled = false,\n    hidden = false,\n}: TooltipProps) => {\n    const [triggerElementRef, setTriggerElementRef] = useState<HTMLElement | HTMLDivElement | HTMLButtonElement | null>(\n        null,\n    );\n    const linkRef = useRef<HTMLAnchorElement | null>(null);\n\n    const shouldPreventTooltipOpening = hidden || disabled;\n    const { linkProps } = useLink({ isDisabled: shouldPreventTooltipOpening }, linkRef);\n    const hasLargePaddingTop = useMemo(\n        () => linkUrl || brightHeader || buttons || heading || headingIcon,\n        [linkUrl, brightHeader, buttons, heading, headingIcon],\n    );\n\n    const placement = placementMap[`${position}-${alignment}`];\n    const [tooltipContainerRef, setTooltipContainerRef] = useState<HTMLDivElement | null>(null);\n    const [triggerElementContainerRef, setTriggerElementContainerRef] = useState<HTMLDivElement | null>(null);\n    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n    const id = useMemoizedId();\n\n    const tooltipOffset = withArrow ? 10 : 5;\n    const popperInstance = usePopper(triggerElementRef, tooltipContainerRef, {\n        placement,\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'arrow',\n                options: {\n                    element: arrowElement,\n                },\n            },\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, tooltipOffset],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n    });\n\n    const currentPlacement = popperInstance.state?.placement ?? position;\n    const arrowStyling = getArrowClasses(currentPlacement, brightHeader, alignment);\n    const [isOpen, setIsOpen] = useState(false);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const handleHideTooltipOnHover = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n        timeoutRef.current = setTimeout(() => setIsOpen(false), hoverDelay);\n    }, [hoverDelay]);\n\n    const handleShowTooltipOnHover = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n\n        if (enterDelay) {\n            timeoutRef.current = setTimeout(() => setIsOpen(true), enterDelay);\n            return;\n        }\n\n        setIsOpen(true);\n    }, [enterDelay]);\n\n    const checkIfHovered = useCallback(\n        (event) => {\n            const hoveredElement = event.path ?? event.composedPath?.();\n            const hoverSources = [triggerElementRef, triggerElementContainerRef, tooltipContainerRef];\n\n            if (hoveredElement && hoverSources.some((el) => hoveredElement.includes(el))) {\n                handleShowTooltipOnHover();\n            }\n        },\n        [handleShowTooltipOnHover, triggerElementRef, triggerElementContainerRef, tooltipContainerRef],\n    );\n\n    const handleCloseIfFocusedOutside = useCallback(\n        (event: FocusEvent<HTMLElement>) => {\n            const { relatedTarget } = event;\n            const elements = [tooltipContainerRef, triggerElementContainerRef];\n\n            if (!relatedTarget || !elements.some((element) => element?.contains(relatedTarget))) {\n                setIsOpen(false);\n            }\n        },\n        [tooltipContainerRef, triggerElementContainerRef],\n    );\n\n    const openingEvents: HTMLAttributes<HTMLElement> = shouldPreventTooltipOpening\n        ? {}\n        : {\n              onMouseOver: (event) => checkIfHovered(event.nativeEvent),\n              onMouseLeave: handleHideTooltipOnHover,\n              onFocus: () => setIsOpen(true),\n              onBlur: handleCloseIfFocusedOutside,\n          };\n\n    useEffect(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n        setIsOpen(shouldPreventTooltipOpening ? false : open);\n    }, [open, shouldPreventTooltipOpening]);\n\n    const listenForEsc = useCallback(\n        (event: KeyboardEvent) => {\n            if (isOpen && event.key === 'Escape') {\n                setIsOpen(false);\n            }\n        },\n        [isOpen],\n    );\n\n    useLayoutEffect(() => {\n        if (typeof popperInstance.update === 'function' && isOpen) {\n            popperInstance.update();\n        }\n\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (isOpen) {\n            window.addEventListener('keydown', listenForEsc);\n        } else {\n            window.removeEventListener('keydown', listenForEsc);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', listenForEsc);\n        };\n    }, [listenForEsc, isOpen]);\n\n    return (\n        <>\n            <div {...openingEvents} ref={setTriggerElementContainerRef}>\n                {triggerElement &&\n                    cloneElement(triggerElement, {\n                        ref: setTriggerElementRef,\n                        'aria-describedby': id,\n                        'aria-disabled': shouldPreventTooltipOpening,\n                    })}\n            </div>\n            <div\n                ref={setTooltipContainerRef}\n                aria-hidden={shouldPreventTooltipOpening}\n                className={merge([\n                    'tw-popper-container tw-inline-block tw-max-w-[200px] tw-dark tw-bg-base tw-rounded-md tw-shadow-mid tw-text-text tw-z-[120000]',\n                    !isOpen && 'tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden',\n                ])}\n                data-test-id=\"tooltip\"\n                role=\"tooltip\"\n                id={id}\n                style={popperInstance.styles.popper}\n                {...popperInstance.attributes.popper}\n                {...openingEvents}\n            >\n                {brightHeader && <BrightHeader headerStyle={brightHeader} />}\n                <div\n                    className={merge([\n                        'tw-px-4 tw-dark tw-bg-base tw-rounded-md tw-relative tw-z-[120000]',\n                        hasLargePaddingTop ? paddingsTop.small : paddingsTop.large,\n                        linkUrl ? paddingsBottom.small : paddingsBottom.large,\n                    ])}\n                >\n                    {heading && (\n                        <h4 className=\"tw-flex tw-text-m tw-font-bold tw-mb-1\">\n                            {headingIcon && (\n                                <span className=\"tw-mr-1.5\">\n                                    {cloneElement(headingIcon, { size: IconSize.Size20 })}\n                                </span>\n                            )}\n                            {heading}\n                        </h4>\n                    )}\n                    <div className=\"tw-flex\">\n                        {tooltipIcon && (\n                            <span className=\"tw-shrink-0 tw-mr-1 tw-leading-4\">\n                                {cloneElement(tooltipIcon, { size: IconSize.Size16 })}\n                            </span>\n                        )}\n                        <span className=\"tw-text-s tw-min-w-0 tw-break-words\">{content}</span>\n                    </div>\n                    {linkUrl && (\n                        <a\n                            {...linkProps}\n                            data-test-id=\"tooltip-link\"\n                            ref={linkRef}\n                            href={linkUrl}\n                            target=\"_blank\"\n                            rel=\"noopener noreferrer\"\n                            className={merge(['tw-text-xs tw-text-black-40 tw-underline tw-mt-1', FOCUS_VISIBLE_STYLE])}\n                        >\n                            {linkLabel ?? 'Click here to learn more.'}\n                        </a>\n                    )}\n                    {buttons && (\n                        <div className=\"tw-flex tw-flex-row-reverse tw-gap-x-1 tw-mt-4\">\n                            {buttons.length > 0 && (\n                                <Button\n                                    style={ButtonStyle.Default}\n                                    emphasis={ButtonEmphasis.Strong}\n                                    size={ButtonSize.Small}\n                                    onClick={buttons[0].action}\n                                    disabled={shouldPreventTooltipOpening}\n                                >\n                                    {buttons[0].label}\n                                </Button>\n                            )}\n                            {buttons.length === 2 && (\n                                <Button\n                                    style={ButtonStyle.Default}\n                                    emphasis={ButtonEmphasis.Default}\n                                    size={ButtonSize.Small}\n                                    onClick={buttons[1].action}\n                                    disabled={shouldPreventTooltipOpening}\n                                >\n                                    {buttons[1].label}\n                                </Button>\n                            )}\n                        </div>\n                    )}\n                </div>\n                {/**\n                 * This container is needed for the arrow element to not be styled by popperJS\n                 * selectors for its immediate children .tw-popper-container > .tw-popper-arrow\n                 * */}\n                <div aria-hidden=\"true\">\n                    <div\n                        data-test-id=\"popover-arrow\"\n                        data-popper-arrow={withArrow}\n                        ref={setArrowElement}\n                        style={popperInstance.styles.arrow}\n                        className={merge([\n                            withArrow &&\n                                'tw-popper-arrow tw-z-[110000] tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border before:tw-border-line',\n                            withArrow && arrowStyling,\n                        ])}\n                    />\n                </div>\n                {children}\n            </div>\n        </>\n    );\n};\nTooltip.displayName = 'FondueTooltip';\n"],"names":["paddingsTop","paddingsBottom","TooltipPosition","TooltipAlignment","placementMap","getArrowClasses","currentPlacement","brightHeader","alignment","merge","brightHeaderArrowBackgroundColors","Tooltip","content","tooltipIcon","heading","headingIcon","linkUrl","linkLabel","buttons","children","position","withArrow","flip","triggerElement","hoverDelay","enterDelay","open","disabled","hidden","triggerElementRef","setTriggerElementRef","useState","linkRef","useRef","shouldPreventTooltipOpening","linkProps","useLink","hasLargePaddingTop","useMemo","placement","tooltipContainerRef","setTooltipContainerRef","triggerElementContainerRef","setTriggerElementContainerRef","arrowElement","setArrowElement","id","useMemoizedId","popperInstance","usePopper","_a","arrowStyling","isOpen","setIsOpen","timeoutRef","handleHideTooltipOnHover","useCallback","handleShowTooltipOnHover","checkIfHovered","event","hoveredElement","el","handleCloseIfFocusedOutside","relatedTarget","element","openingEvents","useEffect","listenForEsc","useLayoutEffect","React","cloneElement","BrightHeader","IconSize","FOCUS_VISIBLE_STYLE","Button","ButtonStyle","ButtonEmphasis","ButtonSize"],"mappings":"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"}

package/dist/components/Tree/TreeItem.es.js

@@ -19,7 +19,7 @@ const fe = 0.4, we = 1, ge = ({
   label: I,
   draggable: j,
   contentComponent: v,
-  onDrop: u,
+  onDrop: h,
   type: p,
   accepts: D,
   children: f,
@@ -63,10 +63,10 @@ const fe = 0.4, we = 1, ge = ({
     type: p ?? E,
     canDrag: j ?? W
   }), T = i(
-    (r, d, h) => {
-      L(r, d, h), u == null || u(r, d, h);
+    (r, d, u) => {
+      L(r, d, u), h == null || h(r, d, u);
     },
-    [u, L]
+    [h, L]
   ), J = i(
     (r) => {
       l.current && de(r.target, l.current) && (r.stopPropagation(), w(e));
@@ -84,7 +84,7 @@ const fe = 0.4, we = 1, ge = ({
     [e, a, n.expandedIds]
   ), $ = i(
     (r) => {
-      var d, h, F, G, K;
+      var d, u, F, G, K;
       if (document.activeElement === l.current)
         switch (r.code) {
           case "Enter":
@@ -98,7 +98,7 @@ const fe = 0.4, we = 1, ge = ({
               a(e, !0);
             else if ((d = t == null ? void 0 : t.childrenIds) != null && d[0]) {
               const s = t.childrenIds[0], c = n.items.get(s);
-              (h = c == null ? void 0 : c.domElement) == null || h.focus();
+              (u = c == null ? void 0 : c.domElement) == null || u.focus();
             }
             break;
           case "ArrowLeft":
@@ -162,7 +162,7 @@ const fe = 0.4, we = 1, ge = ({
       "div",
       {
         className: Y([
-          n.selectedIds.has(e) ? "tw-font-medium tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover" : "tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover",
+          n.selectedIds.has(e) ? "tw-font-medium tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover hover:tw-text-box-neutral-strong-inverse-hover" : "tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover",
           se,
           "tw-leading-5 tw-no-underline tw-flex"
         ]),

package/dist/components/Tree/TreeItem.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeItem.es.js","sources":["../../../src/components/Tree/TreeItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { Children, KeyboardEvent, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useDrag } from 'react-dnd';\n\nimport { merge } from '@utilities/merge';\nimport { DraggableItem, DropZonePosition } from '@utilities/dnd';\n\nimport { DropZone } from '@components/DropZone';\nimport type { TreeItemProps } from '@components/Tree/types';\nimport { useTreeContext } from '@components/Tree/TreeContext';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\n\nimport { getAcceptTypes, getItemPositionInParent, getNextItemToFocus, getPreviousItemToFocus } from './helpers';\nimport { cloneThroughFragments, flattenChildren, isDescendant } from './utils';\nimport { DEFAULT_TREE_ITEM_PADDING } from './utils/defaultValues';\n\nconst DRAGGING_OPACITY = 0.4;\nconst DEFAULT_OPACITY = 1;\n\nexport const TreeItem = ({\n    id,\n    parentId,\n    label,\n    draggable: propsDraggable,\n    contentComponent,\n    onDrop,\n    type,\n    accepts,\n    children,\n    level,\n}: TreeItemProps) => {\n    const {\n        treeId,\n        draggable,\n        onSelect,\n        onExpand,\n        onDrop: onTreeDrop,\n        registerTreeItem,\n        registerTreeItemChildren,\n        unregisterTreeItem,\n        treeState,\n        baseItemPadding,\n    } = useTreeContext();\n\n    const treeItemState = treeState.items.get(id);\n    const itemRef = useRef<HTMLDivElement>(null);\n\n    const [hovered, setHovered] = useState<boolean>(false);\n    const handleMouseEnter = useCallback(() => setHovered(true), []);\n    const handleMouseLeave = useCallback(() => setHovered(false), []);\n\n    const sort = useMemo(\n        () => (treeItemState?.parentId ? getItemPositionInParent(id, treeItemState.parentId, treeState) : -1),\n        [id, treeItemState?.parentId, treeState],\n    );\n\n    useEffect(() => {\n        if (itemRef.current) {\n            registerTreeItem({\n                id,\n                parentId,\n                level: level ?? 0,\n                domElement: itemRef.current,\n            });\n\n            return () => {\n                unregisterTreeItem(id);\n            };\n        }\n    }, [id, level, parentId, registerTreeItem, unregisterTreeItem, itemRef]);\n\n    useEffect(() => {\n        const childrenIds = flattenChildren(children).map((child) => child.props.id);\n        registerTreeItemChildren({ id, childrenIds: childrenIds.length > 0 ? childrenIds : undefined });\n    }, [children, id, registerTreeItemChildren]);\n\n    const [{ opacity }, drag] = useDrag({\n        item: { id, type, sort },\n        collect: (monitor) => ({\n            opacity: monitor.isDragging() ? DRAGGING_OPACITY : DEFAULT_OPACITY,\n            isDragging: monitor.isDragging(),\n        }),\n        type: type ?? treeId,\n        canDrag: propsDraggable ?? draggable,\n    });\n\n    const handleDrop = useCallback(\n        (\n            targetItem: DraggableItem<{ id: string; sort: number }>,\n            sourceItem: DraggableItem<{ id: string; sort: number }>,\n            position: DropZonePosition,\n        ) => {\n            onTreeDrop(targetItem, sourceItem, position);\n            onDrop?.(targetItem, sourceItem, position);\n        },\n        [onDrop, onTreeDrop],\n    );\n\n    const handleSelect = useCallback(\n        (event: MouseEvent<HTMLDivElement>) => {\n            if (itemRef.current && isDescendant(event.target as HTMLElement, itemRef.current)) {\n                event.stopPropagation();\n                onSelect(id);\n            }\n        },\n        [id, onSelect],\n    );\n\n    const handleExpandClick = useCallback(\n        (event: MouseEvent) => {\n            event.stopPropagation();\n            onExpand(id, !treeState.expandedIds.has(id));\n        },\n        [id, onExpand, treeState.expandedIds],\n    );\n\n    const handleExpandKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (document.activeElement === itemRef.current && (event.key === 'Space' || event.key === 'Enter')) {\n                event.stopPropagation();\n                onExpand(id, !treeState.expandedIds.has(id));\n            }\n        },\n        [id, onExpand, treeState.expandedIds],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (document.activeElement === itemRef.current) {\n                switch (event.code) {\n                    case 'Enter':\n                        event.preventDefault();\n                        onSelect(id);\n                        break;\n\n                    case 'Space':\n                        event.preventDefault();\n                        if (treeItemState?.childrenIds) {\n                            onExpand(id, !treeState.expandedIds.has(id));\n                        } else {\n                            onSelect(id);\n                        }\n                        break;\n\n                    case 'ArrowRight':\n                        event.preventDefault();\n                        if (treeItemState?.childrenIds && !treeState.expandedIds.has(id)) {\n                            onExpand(id, true);\n                        } else if (treeItemState?.childrenIds?.[0]) {\n                            const firstChildId = treeItemState.childrenIds[0];\n                            const firstChildState = treeState.items.get(firstChildId);\n                            firstChildState?.domElement?.focus();\n                        }\n                        break;\n\n                    case 'ArrowLeft':\n                        event.preventDefault();\n                        if (treeItemState?.childrenIds && treeState.expandedIds.has(id)) {\n                            onExpand(id, false);\n                        } else if (treeItemState?.parentId) {\n                            const parentId = treeItemState.parentId;\n                            const parentState = treeState.items.get(parentId);\n                            parentState?.domElement?.focus();\n                        }\n                        break;\n\n                    case 'ArrowUp':\n                        event.preventDefault();\n                        if (treeItemState) {\n                            const previousItemToFocus = getPreviousItemToFocus(id, treeItemState, treeState);\n                            previousItemToFocus?.domElement?.focus();\n                        }\n                        break;\n\n                    case 'ArrowDown':\n                        event.preventDefault();\n                        if (treeItemState) {\n                            const nextItemToFocus = getNextItemToFocus(id, treeItemState, treeState);\n                            nextItemToFocus?.domElement?.focus();\n                        }\n                        break;\n                }\n            }\n        },\n        [id, onExpand, onSelect, treeItemState, treeState],\n    );\n\n    const enhancedChildren = useMemo(\n        () => (children ? cloneThroughFragments(children, { parentId: id, level: (level || 0) + 1 }) : []),\n        [children, id, level],\n    );\n\n    const hasChildren = Children.count(enhancedChildren) > 0;\n\n    const paddingLeftByLevel = (treeItemState?.level ?? 0) * 16 + baseItemPadding.left;\n    // Dropzone positioning is matched with existing styles from before https://github.com/Frontify/fondue/pull/1270\n    const dropzonePadding = paddingLeftByLevel - DEFAULT_TREE_ITEM_PADDING.left;\n\n    return (\n        <li data-test-id=\"tree-item\" ref={drag} style={{ opacity, transform: 'translate3d(0, 0, 0)' }}>\n            {sort === 0 ? (\n                <div\n                    style={{\n                        paddingLeft: dropzonePadding,\n                    }}\n                >\n                    <DropZone\n                        data-position={DropZonePosition.Before}\n                        data={{\n                            targetItem: { id, sort: sort ?? 0, type },\n                            position: DropZonePosition.Before,\n                        }}\n                        onDrop={handleDrop}\n                        accept={getAcceptTypes(accepts ?? treeId, 'before')}\n                    />\n                </div>\n            ) : null}\n\n            <DropZone\n                data-position={DropZonePosition.Within}\n                data={{\n                    targetItem: { id, sort: sort ?? 0, type },\n                    position: DropZonePosition.Within,\n                }}\n                onDrop={handleDrop}\n                accept={getAcceptTypes(accepts ?? treeId, 'within')}\n            >\n                <div\n                    className={merge([\n                        treeState.selectedIds.has(id)\n                            ? 'tw-font-medium tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover'\n                            : 'tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n                        FOCUS_VISIBLE_STYLE,\n                        'tw-leading-5 tw-no-underline tw-flex',\n                    ])}\n                    data-test-id=\"tree-item-content\"\n                    style={{\n                        paddingLeft: paddingLeftByLevel,\n                        paddingRight: baseItemPadding.right,\n                        paddingTop: baseItemPadding.top,\n                        paddingBottom: baseItemPadding.bottom,\n                    }}\n                    ref={itemRef}\n                    role=\"treeitem\"\n                    aria-label={label}\n                    aria-level={treeItemState?.level}\n                    aria-selected={treeState.selectedIds.has(id)}\n                    aria-expanded={treeState.expandedIds.has(id)}\n                    tabIndex={0}\n                    onClick={handleSelect}\n                    onKeyDown={handleKeyDown}\n                    onMouseEnter={handleMouseEnter}\n                    onMouseLeave={handleMouseLeave}\n                >\n                    <div className=\"tw-flex tw-flex-1 tw-space-x-1 tw-items-center tw-h-6 tw-min-w-0\">\n                        <div className=\"tw-w-2 tw-h-3 tw-flex tw-items-center tw-justify-center\">\n                            {hasChildren && (\n                                <button\n                                    data-test-id=\"tree-item-toggle\"\n                                    className=\"tw-flex tw-items-center tw-justify-center tw-p-1.5 tw-cursor-pointer\"\n                                    onClick={handleExpandClick}\n                                    onKeyDown={handleExpandKeyDown}\n                                    tabIndex={0}\n                                >\n                                    <div\n                                        className={merge([\n                                            'tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n                                            treeState.selectedIds.has(id) && 'tw-text-box-selected-strong-inverse',\n                                            treeState.expandedIds.has(id) && 'tw-rotate-90',\n                                        ])}\n                                    />\n                                </button>\n                            )}\n                        </div>\n\n                        {label ? <span>{label}</span> : null}\n\n                        {contentComponent?.({ selected: treeState.selectedIds.has(id) ?? false, hovered })}\n                    </div>\n                </div>\n            </DropZone>\n\n            {treeState.expandedIds.has(id) ? (\n                <ul\n                    className=\"tw-p-0 tw-m-0 tw-list-none tw-font-sans tw-font-normal tw-text-left\"\n                    data-test-id=\"sub-tree-items\"\n                >\n                    {enhancedChildren}\n                </ul>\n            ) : null}\n\n            <div\n                style={{\n                    paddingLeft: dropzonePadding,\n                }}\n            >\n                <DropZone\n                    data-position={DropZonePosition.After}\n                    data={{\n                        targetItem: { id, sort: sort ?? 0, type },\n                        position: DropZonePosition.After,\n                    }}\n                    onDrop={handleDrop}\n                    accept={getAcceptTypes(accepts ?? treeId, 'after')}\n                />\n            </div>\n        </li>\n    );\n};\nTreeItem.displayName = 'FondueTreeItem';\n"],"names":["DRAGGING_OPACITY","DEFAULT_OPACITY","TreeItem","id","parentId","label","propsDraggable","contentComponent","onDrop","type","accepts","children","level","treeId","draggable","onSelect","onExpand","onTreeDrop","registerTreeItem","registerTreeItemChildren","unregisterTreeItem","treeState","baseItemPadding","useTreeContext","treeItemState","itemRef","useRef","hovered","setHovered","useState","handleMouseEnter","useCallback","handleMouseLeave","sort","useMemo","getItemPositionInParent","useEffect","childrenIds","flattenChildren","child","opacity","drag","useDrag","monitor","handleDrop","targetItem","sourceItem","position","handleSelect","event","isDescendant","handleExpandClick","handleExpandKeyDown","handleKeyDown","_a","firstChildId","firstChildState","_b","parentState","_c","previousItemToFocus","getPreviousItemToFocus","_d","nextItemToFocus","getNextItemToFocus","_e","enhancedChildren","cloneThroughFragments","hasChildren","Children","paddingLeftByLevel","dropzonePadding","DEFAULT_TREE_ITEM_PADDING","React","DropZone","DropZonePosition","getAcceptTypes","merge","FOCUS_VISIBLE_STYLE"],"mappings":"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"}
+{"version":3,"file":"TreeItem.es.js","sources":["../../../src/components/Tree/TreeItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { Children, KeyboardEvent, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useDrag } from 'react-dnd';\n\nimport { merge } from '@utilities/merge';\nimport { DraggableItem, DropZonePosition } from '@utilities/dnd';\n\nimport { DropZone } from '@components/DropZone';\nimport type { TreeItemProps } from '@components/Tree/types';\nimport { useTreeContext } from '@components/Tree/TreeContext';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\n\nimport { getAcceptTypes, getItemPositionInParent, getNextItemToFocus, getPreviousItemToFocus } from './helpers';\nimport { cloneThroughFragments, flattenChildren, isDescendant } from './utils';\nimport { DEFAULT_TREE_ITEM_PADDING } from './utils/defaultValues';\n\nconst DRAGGING_OPACITY = 0.4;\nconst DEFAULT_OPACITY = 1;\n\nexport const TreeItem = ({\n    id,\n    parentId,\n    label,\n    draggable: propsDraggable,\n    contentComponent,\n    onDrop,\n    type,\n    accepts,\n    children,\n    level,\n}: TreeItemProps) => {\n    const {\n        treeId,\n        draggable,\n        onSelect,\n        onExpand,\n        onDrop: onTreeDrop,\n        registerTreeItem,\n        registerTreeItemChildren,\n        unregisterTreeItem,\n        treeState,\n        baseItemPadding,\n    } = useTreeContext();\n\n    const treeItemState = treeState.items.get(id);\n    const itemRef = useRef<HTMLDivElement>(null);\n\n    const [hovered, setHovered] = useState<boolean>(false);\n    const handleMouseEnter = useCallback(() => setHovered(true), []);\n    const handleMouseLeave = useCallback(() => setHovered(false), []);\n\n    const sort = useMemo(\n        () => (treeItemState?.parentId ? getItemPositionInParent(id, treeItemState.parentId, treeState) : -1),\n        [id, treeItemState?.parentId, treeState],\n    );\n\n    useEffect(() => {\n        if (itemRef.current) {\n            registerTreeItem({\n                id,\n                parentId,\n                level: level ?? 0,\n                domElement: itemRef.current,\n            });\n\n            return () => {\n                unregisterTreeItem(id);\n            };\n        }\n    }, [id, level, parentId, registerTreeItem, unregisterTreeItem, itemRef]);\n\n    useEffect(() => {\n        const childrenIds = flattenChildren(children).map((child) => child.props.id);\n        registerTreeItemChildren({ id, childrenIds: childrenIds.length > 0 ? childrenIds : undefined });\n    }, [children, id, registerTreeItemChildren]);\n\n    const [{ opacity }, drag] = useDrag({\n        item: { id, type, sort },\n        collect: (monitor) => ({\n            opacity: monitor.isDragging() ? DRAGGING_OPACITY : DEFAULT_OPACITY,\n            isDragging: monitor.isDragging(),\n        }),\n        type: type ?? treeId,\n        canDrag: propsDraggable ?? draggable,\n    });\n\n    const handleDrop = useCallback(\n        (\n            targetItem: DraggableItem<{ id: string; sort: number }>,\n            sourceItem: DraggableItem<{ id: string; sort: number }>,\n            position: DropZonePosition,\n        ) => {\n            onTreeDrop(targetItem, sourceItem, position);\n            onDrop?.(targetItem, sourceItem, position);\n        },\n        [onDrop, onTreeDrop],\n    );\n\n    const handleSelect = useCallback(\n        (event: MouseEvent<HTMLDivElement>) => {\n            if (itemRef.current && isDescendant(event.target as HTMLElement, itemRef.current)) {\n                event.stopPropagation();\n                onSelect(id);\n            }\n        },\n        [id, onSelect],\n    );\n\n    const handleExpandClick = useCallback(\n        (event: MouseEvent) => {\n            event.stopPropagation();\n            onExpand(id, !treeState.expandedIds.has(id));\n        },\n        [id, onExpand, treeState.expandedIds],\n    );\n\n    const handleExpandKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (document.activeElement === itemRef.current && (event.key === 'Space' || event.key === 'Enter')) {\n                event.stopPropagation();\n                onExpand(id, !treeState.expandedIds.has(id));\n            }\n        },\n        [id, onExpand, treeState.expandedIds],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (document.activeElement === itemRef.current) {\n                switch (event.code) {\n                    case 'Enter':\n                        event.preventDefault();\n                        onSelect(id);\n                        break;\n\n                    case 'Space':\n                        event.preventDefault();\n                        if (treeItemState?.childrenIds) {\n                            onExpand(id, !treeState.expandedIds.has(id));\n                        } else {\n                            onSelect(id);\n                        }\n                        break;\n\n                    case 'ArrowRight':\n                        event.preventDefault();\n                        if (treeItemState?.childrenIds && !treeState.expandedIds.has(id)) {\n                            onExpand(id, true);\n                        } else if (treeItemState?.childrenIds?.[0]) {\n                            const firstChildId = treeItemState.childrenIds[0];\n                            const firstChildState = treeState.items.get(firstChildId);\n                            firstChildState?.domElement?.focus();\n                        }\n                        break;\n\n                    case 'ArrowLeft':\n                        event.preventDefault();\n                        if (treeItemState?.childrenIds && treeState.expandedIds.has(id)) {\n                            onExpand(id, false);\n                        } else if (treeItemState?.parentId) {\n                            const parentId = treeItemState.parentId;\n                            const parentState = treeState.items.get(parentId);\n                            parentState?.domElement?.focus();\n                        }\n                        break;\n\n                    case 'ArrowUp':\n                        event.preventDefault();\n                        if (treeItemState) {\n                            const previousItemToFocus = getPreviousItemToFocus(id, treeItemState, treeState);\n                            previousItemToFocus?.domElement?.focus();\n                        }\n                        break;\n\n                    case 'ArrowDown':\n                        event.preventDefault();\n                        if (treeItemState) {\n                            const nextItemToFocus = getNextItemToFocus(id, treeItemState, treeState);\n                            nextItemToFocus?.domElement?.focus();\n                        }\n                        break;\n                }\n            }\n        },\n        [id, onExpand, onSelect, treeItemState, treeState],\n    );\n\n    const enhancedChildren = useMemo(\n        () => (children ? cloneThroughFragments(children, { parentId: id, level: (level || 0) + 1 }) : []),\n        [children, id, level],\n    );\n\n    const hasChildren = Children.count(enhancedChildren) > 0;\n\n    const paddingLeftByLevel = (treeItemState?.level ?? 0) * 16 + baseItemPadding.left;\n    // Dropzone positioning is matched with existing styles from before https://github.com/Frontify/fondue/pull/1270\n    const dropzonePadding = paddingLeftByLevel - DEFAULT_TREE_ITEM_PADDING.left;\n\n    return (\n        <li data-test-id=\"tree-item\" ref={drag} style={{ opacity, transform: 'translate3d(0, 0, 0)' }}>\n            {sort === 0 ? (\n                <div\n                    style={{\n                        paddingLeft: dropzonePadding,\n                    }}\n                >\n                    <DropZone\n                        data-position={DropZonePosition.Before}\n                        data={{\n                            targetItem: { id, sort: sort ?? 0, type },\n                            position: DropZonePosition.Before,\n                        }}\n                        onDrop={handleDrop}\n                        accept={getAcceptTypes(accepts ?? treeId, 'before')}\n                    />\n                </div>\n            ) : null}\n\n            <DropZone\n                data-position={DropZonePosition.Within}\n                data={{\n                    targetItem: { id, sort: sort ?? 0, type },\n                    position: DropZonePosition.Within,\n                }}\n                onDrop={handleDrop}\n                accept={getAcceptTypes(accepts ?? treeId, 'within')}\n            >\n                <div\n                    className={merge([\n                        treeState.selectedIds.has(id)\n                            ? 'tw-font-medium tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover hover:tw-text-box-neutral-strong-inverse-hover'\n                            : 'tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n                        FOCUS_VISIBLE_STYLE,\n                        'tw-leading-5 tw-no-underline tw-flex',\n                    ])}\n                    data-test-id=\"tree-item-content\"\n                    style={{\n                        paddingLeft: paddingLeftByLevel,\n                        paddingRight: baseItemPadding.right,\n                        paddingTop: baseItemPadding.top,\n                        paddingBottom: baseItemPadding.bottom,\n                    }}\n                    ref={itemRef}\n                    role=\"treeitem\"\n                    aria-label={label}\n                    aria-level={treeItemState?.level}\n                    aria-selected={treeState.selectedIds.has(id)}\n                    aria-expanded={treeState.expandedIds.has(id)}\n                    tabIndex={0}\n                    onClick={handleSelect}\n                    onKeyDown={handleKeyDown}\n                    onMouseEnter={handleMouseEnter}\n                    onMouseLeave={handleMouseLeave}\n                >\n                    <div className=\"tw-flex tw-flex-1 tw-space-x-1 tw-items-center tw-h-6 tw-min-w-0\">\n                        <div className=\"tw-w-2 tw-h-3 tw-flex tw-items-center tw-justify-center\">\n                            {hasChildren && (\n                                <button\n                                    data-test-id=\"tree-item-toggle\"\n                                    className=\"tw-flex tw-items-center tw-justify-center tw-p-1.5 tw-cursor-pointer\"\n                                    onClick={handleExpandClick}\n                                    onKeyDown={handleExpandKeyDown}\n                                    tabIndex={0}\n                                >\n                                    <div\n                                        className={merge([\n                                            'tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n                                            treeState.selectedIds.has(id) && 'tw-text-box-selected-strong-inverse',\n                                            treeState.expandedIds.has(id) && 'tw-rotate-90',\n                                        ])}\n                                    />\n                                </button>\n                            )}\n                        </div>\n\n                        {label ? <span>{label}</span> : null}\n\n                        {contentComponent?.({ selected: treeState.selectedIds.has(id) ?? false, hovered })}\n                    </div>\n                </div>\n            </DropZone>\n\n            {treeState.expandedIds.has(id) ? (\n                <ul\n                    className=\"tw-p-0 tw-m-0 tw-list-none tw-font-sans tw-font-normal tw-text-left\"\n                    data-test-id=\"sub-tree-items\"\n                >\n                    {enhancedChildren}\n                </ul>\n            ) : null}\n\n            <div\n                style={{\n                    paddingLeft: dropzonePadding,\n                }}\n            >\n                <DropZone\n                    data-position={DropZonePosition.After}\n                    data={{\n                        targetItem: { id, sort: sort ?? 0, type },\n                        position: DropZonePosition.After,\n                    }}\n                    onDrop={handleDrop}\n                    accept={getAcceptTypes(accepts ?? treeId, 'after')}\n                />\n            </div>\n        </li>\n    );\n};\nTreeItem.displayName = 'FondueTreeItem';\n"],"names":["DRAGGING_OPACITY","DEFAULT_OPACITY","TreeItem","id","parentId","label","propsDraggable","contentComponent","onDrop","type","accepts","children","level","treeId","draggable","onSelect","onExpand","onTreeDrop","registerTreeItem","registerTreeItemChildren","unregisterTreeItem","treeState","baseItemPadding","useTreeContext","treeItemState","itemRef","useRef","hovered","setHovered","useState","handleMouseEnter","useCallback","handleMouseLeave","sort","useMemo","getItemPositionInParent","useEffect","childrenIds","flattenChildren","child","opacity","drag","useDrag","monitor","handleDrop","targetItem","sourceItem","position","handleSelect","event","isDescendant","handleExpandClick","handleExpandKeyDown","handleKeyDown","_a","firstChildId","firstChildState","_b","parentState","_c","previousItemToFocus","getPreviousItemToFocus","_d","nextItemToFocus","getNextItemToFocus","_e","enhancedChildren","cloneThroughFragments","hasChildren","Children","paddingLeftByLevel","dropzonePadding","DEFAULT_TREE_ITEM_PADDING","React","DropZone","DropZonePosition","getAcceptTypes","merge","FOCUS_VISIBLE_STYLE"],"mappings":"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"}

package/dist/extractedThirdPartyStyles.css

@@ -84,14 +84,18 @@
     font-weight: normal;
 }
 
+
 .react-datepicker-wrap .react-datepicker__day--keyboard-selected,
 .react-datepicker .react-datepicker__day--selected,
 .react-datepicker .react-datepicker__day--selected:hover,
+.react-datepicker__day.react-datepicker__day--in-range.react-datepicker__day--range-start.range-day:focus-visible,
+.react-datepicker__day.react-datepicker__day--in-range.react-datepicker__day--range-end.range-day:focus-visible,
+.react-datepicker__day--keyboard-selected.react-datepicker__day.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-start.range-day,
 .react-datepicker .react-datepicker__day:focus-visible {
     background-color: var(--box-selected-strong-color);
     border-radius: 0;
     border: none;
-    outline-color: var(--base-color);
+    outline-color: #5e9ed6;
     color: var(--base-color);
 }