From 4e4b82e065be81eeb86e6a74a9aef47ad9ebe3cc Mon Sep 17 00:00:00 2001
From: gcornut <guillaume.cornut@lumapps.com>
Date: Mon, 11 Dec 2023 18:27:16 +0100
Subject: [PATCH 1/2] fix(tooltip): fixed closing when mouse is hovering the
 tooltip text

DSW-47
---
 CHANGELOG.md                                  |  4 +
 packages/lumx-core/src/js/constants/index.ts  |  2 +-
 .../src/components/tooltip/Tooltip.test.tsx   | 32 +++++++
 .../src/components/tooltip/Tooltip.tsx        |  7 +-
 .../tooltip/useInjectTooltipRef.tsx           |  2 +-
 .../src/components/tooltip/useTooltipOpen.tsx | 85 +++++++++++--------
 6 files changed, 92 insertions(+), 40 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 536c3912b..13b819c8b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+-   Tooltip: fixed tooltip closing when mouse is hovering the tooltip text.
+
 ## [3.6.0][] - 2023-12-05
 
 ### Changed
diff --git a/packages/lumx-core/src/js/constants/index.ts b/packages/lumx-core/src/js/constants/index.ts
index a8d2658da..7b46d4d6f 100644
--- a/packages/lumx-core/src/js/constants/index.ts
+++ b/packages/lumx-core/src/js/constants/index.ts
@@ -22,7 +22,7 @@ export const SLIDESHOW_TRANSITION_DURATION = 5000;
  */
 export const TOOLTIP_HOVER_DELAY = {
     open: 500,
-    close: 0,
+    close: 500,
 };
 
 /**
diff --git a/packages/lumx-react/src/components/tooltip/Tooltip.test.tsx b/packages/lumx-react/src/components/tooltip/Tooltip.test.tsx
index 89f42a130..1d93fd3bb 100644
--- a/packages/lumx-react/src/components/tooltip/Tooltip.test.tsx
+++ b/packages/lumx-react/src/components/tooltip/Tooltip.test.tsx
@@ -125,6 +125,38 @@ describe(`<${Tooltip.displayName}>`, () => {
             });
         });
 
+        it('should activate on hover anchor and then tooltip', async () => {
+            let { tooltip } = await setup({
+                label: 'Tooltip label',
+                children: <Button>Anchor</Button>,
+                forceOpen: false,
+            });
+
+            expect(tooltip).not.toBeInTheDocument();
+
+            // Hover anchor button
+            const button = getByClassName(document.body, Button.className as string);
+            await userEvent.hover(button);
+
+            // Tooltip opened
+            tooltip = await findByClassName(document.body, CLASSNAME);
+            expect(tooltip).toBeInTheDocument();
+            expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
+
+            // Hover tooltip
+            await userEvent.hover(tooltip);
+            expect(tooltip).toBeInTheDocument();
+            expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
+
+            // Un-hover tooltip
+            userEvent.unhover(tooltip);
+            await waitFor(() => {
+                expect(button).not.toHaveFocus();
+                // Tooltip closed
+                expect(tooltip).not.toBeInTheDocument();
+            });
+        });
+
         it('should activate on anchor focus', async () => {
             let { tooltip } = await setup({
                 label: 'Tooltip label',
diff --git a/packages/lumx-react/src/components/tooltip/Tooltip.tsx b/packages/lumx-react/src/components/tooltip/Tooltip.tsx
index 34df77df5..1aadcf087 100644
--- a/packages/lumx-react/src/components/tooltip/Tooltip.tsx
+++ b/packages/lumx-react/src/components/tooltip/Tooltip.tsx
@@ -85,8 +85,9 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
     });
 
     const position = attributes?.popper?.['data-popper-placement'] ?? placement;
-    const isOpen = useTooltipOpen(delay, anchorElement) || forceOpen;
-    const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen as boolean, id);
+    const { isOpen: isActivated, onPopperMount } = useTooltipOpen(delay, anchorElement);
+    const isOpen = isActivated || forceOpen;
+    const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen, id);
 
     return (
         <>
@@ -94,7 +95,7 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
             {isOpen &&
                 createPortal(
                     <div
-                        ref={mergeRefs(ref, setPopperElement)}
+                        ref={mergeRefs(ref, setPopperElement, onPopperMount)}
                         {...forwardedProps}
                         id={id}
                         role="tooltip"
diff --git a/packages/lumx-react/src/components/tooltip/useInjectTooltipRef.tsx b/packages/lumx-react/src/components/tooltip/useInjectTooltipRef.tsx
index a93e852b0..4d599752d 100644
--- a/packages/lumx-react/src/components/tooltip/useInjectTooltipRef.tsx
+++ b/packages/lumx-react/src/components/tooltip/useInjectTooltipRef.tsx
@@ -18,7 +18,7 @@ import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 export const useInjectTooltipRef = (
     children: ReactNode,
     setAnchorElement: (e: HTMLDivElement) => void,
-    isOpen: boolean,
+    isOpen: boolean | undefined,
     id: string,
 ): ReactNode => {
     return useMemo(() => {
diff --git a/packages/lumx-react/src/components/tooltip/useTooltipOpen.tsx b/packages/lumx-react/src/components/tooltip/useTooltipOpen.tsx
index a541d7b35..1e7a9485c 100644
--- a/packages/lumx-react/src/components/tooltip/useTooltipOpen.tsx
+++ b/packages/lumx-react/src/components/tooltip/useTooltipOpen.tsx
@@ -1,5 +1,5 @@
 import { onEscapePressed } from '@lumx/react/utils/event';
-import { useEffect, useState } from 'react';
+import { MutableRefObject, useEffect, useRef, useState } from 'react';
 import { browserDoesNotSupportHover } from '@lumx/react/utils/browserDoesNotSupportHover';
 import { TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from '@lumx/react/constants';
 
@@ -10,9 +10,11 @@ import { TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from '@lumx/react/const
  * @param  anchorElement Tooltip anchor element.
  * @return whether or not to show the tooltip.
  */
-export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLElement | null): boolean {
+export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLElement | null) {
     const [isOpen, setIsOpen] = useState(false);
 
+    const onPopperMount = useRef<any>(null) as MutableRefObject<(elem: HTMLElement | null) => void>;
+
     useEffect(() => {
         if (!anchorElement) {
             return undefined;
@@ -45,44 +47,57 @@ export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLEle
         };
 
         // Close or cancel opening of tooltip
-        const close = (overrideDelay = closeDelay) => {
+        const getClose = (overrideDelay = closeDelay) => {
             if (!shouldOpen && !timer) return;
             shouldOpen = false;
             deferUpdate(overrideDelay);
         };
-        const closeImmediately = () => close(0);
-
-        /**
-         * Handle touchend event
-         * If `touchend` comes before the open delay => cancel tooltip (close immediate).
-         * Else if `touchend` comes after the open delay => tooltip takes priority, the anchor's default touch end event is prevented.
-         */
-        const touchEnd = (evt: Event) => {
-            if (!openStartTime) return;
-            if (Date.now() - openStartTime >= openDelay) {
-                // Tooltip take priority, event prevented.
-                evt.stopPropagation();
-                evt.preventDefault();
-                anchorElement.focus();
-                // Close with delay.
-                close();
-            } else {
-                // Close immediately.
-                closeImmediately();
-            }
-        };
+        const close = () => getClose(closeDelay);
+        const closeImmediately = () => getClose(0);
 
         // Adapt event to browsers with or without `hover` support.
-        const events: Array<[Node, Event['type'], any]> = hoverNotSupported
-            ? [
-                  [anchorElement, hasTouch ? 'touchstart' : 'mousedown', open],
-                  [anchorElement, hasTouch ? 'touchend' : 'mouseup', touchEnd],
-              ]
-            : [
-                  [anchorElement, 'mouseenter', open],
-                  [anchorElement, 'mouseleave', close],
-                  [anchorElement, 'mouseup', closeImmediately],
-              ];
+        const events: Array<[Node, Event['type'], any]> = [];
+        if (hoverNotSupported) {
+            /**
+             * Handle touchend event
+             * If end comes before the open delay => cancel tooltip (close immediate).
+             * Else if end comes after the open delay => tooltip takes priority, the anchor's default touch end event is prevented.
+             */
+            const longPressEnd = (evt: Event) => {
+                if (!openStartTime) return;
+                if (Date.now() - openStartTime >= openDelay) {
+                    // Tooltip take priority, event prevented.
+                    evt.stopPropagation();
+                    evt.preventDefault();
+                    anchorElement.focus();
+                    // Close with delay.
+                    close();
+                } else {
+                    // Close immediately.
+                    closeImmediately();
+                }
+            };
+
+            events.push(
+                [anchorElement, hasTouch ? 'touchstart' : 'mousedown', open],
+                [anchorElement, hasTouch ? 'touchend' : 'mouseup', longPressEnd],
+            );
+        } else {
+            events.push(
+                [anchorElement, 'mouseenter', open],
+                [anchorElement, 'mouseleave', close],
+                [anchorElement, 'mouseup', closeImmediately],
+            );
+
+            onPopperMount.current = (popperElement: HTMLElement | null) => {
+                if (!popperElement) return;
+                // Popper element hover
+                popperElement.addEventListener('mouseenter', open);
+                popperElement.addEventListener('mouseleave', close);
+                // Add to event list to remove on unmount
+                events.push([popperElement, 'mouseenter', open], [popperElement, 'mouseleave', close]);
+            };
+        }
 
         // Events always applied no matter the browser:.
         events.push(
@@ -109,5 +124,5 @@ export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLEle
         };
     }, [anchorElement, delay]);
 
-    return isOpen;
+    return { isOpen, onPopperMount: onPopperMount.current };
 }

From 0993434d72ffa4ab21bd1029f7e7ddce3fd8f538 Mon Sep 17 00:00:00 2001
From: gcornut <guillaume.cornut@lumapps.com>
Date: Thu, 14 Dec 2023 17:13:09 +0100
Subject: [PATCH 2/2] fix(tooltip): fixed closing on escape

---
 CHANGELOG.md                                             | 9 ++++-----
 .../src/components/tooltip/Tooltip.stories.tsx           | 5 +++--
 .../lumx-react/src/components/tooltip/useTooltipOpen.tsx | 9 ++++++---
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 13b819c8b..72d5c548a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 -   Tooltip: fixed tooltip closing when mouse is hovering the tooltip text.
+-   Tooltip: fixed close on Escape key pressed (not only when anchor is focused).
 
 ## [3.6.0][] - 2023-12-05
 
@@ -28,7 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
--    Table row: selected states color update + documentation update
+-   Table row: selected states color update + documentation update
 -   `@lumx/core`: remove default line-height on custom title typography.
 
 ## [3.5.4][] - 2023-10-17
@@ -1844,9 +1845,7 @@ _Failed released_
 [unreleased]: https://github.com/lumapps/design-system/compare/v3.5.3...HEAD
 [3.5.3]: https://github.com/lumapps/design-system/compare/v3.5.2...v3.5.3
 [3.5.2]: https://github.com/lumapps/design-system/tree/v3.5.2
-
-
-[Unreleased]: https://github.com/lumapps/design-system/compare/v3.6.0...HEAD
+[unreleased]: https://github.com/lumapps/design-system/compare/v3.6.0...HEAD
 [3.6.0]: https://github.com/lumapps/design-system/compare/v3.5.5...v3.6.0
 [3.5.5]: https://github.com/lumapps/design-system/compare/v3.5.4...v3.5.5
-[3.5.4]: https://github.com/lumapps/design-system/tree/v3.5.4
\ No newline at end of file
+[3.5.4]: https://github.com/lumapps/design-system/tree/v3.5.4
diff --git a/packages/lumx-react/src/components/tooltip/Tooltip.stories.tsx b/packages/lumx-react/src/components/tooltip/Tooltip.stories.tsx
index 120b5b707..912cb3dfa 100644
--- a/packages/lumx-react/src/components/tooltip/Tooltip.stories.tsx
+++ b/packages/lumx-react/src/components/tooltip/Tooltip.stories.tsx
@@ -56,12 +56,13 @@ export const TooltipWithDropdown = (props: any) => {
     const [isOpen, setOpen] = useState(false);
     return (
         <>
-            <Tooltip label={!isOpen && 'Tooltip'} {...props}>
+            <br />
+            <Tooltip label={!isOpen && 'Tooltip'} {...props} placement="top">
                 <Button ref={setButton} onClick={() => setOpen((o) => !o)}>
                     Anchor
                 </Button>
             </Tooltip>
-            <Dropdown anchorRef={{ current: button }} isOpen={isOpen}>
+            <Dropdown anchorRef={{ current: button }} isOpen={isOpen} onClose={() => setOpen(false)}>
                 Dropdown
             </Dropdown>
         </>
diff --git a/packages/lumx-react/src/components/tooltip/useTooltipOpen.tsx b/packages/lumx-react/src/components/tooltip/useTooltipOpen.tsx
index 1e7a9485c..2748f6f11 100644
--- a/packages/lumx-react/src/components/tooltip/useTooltipOpen.tsx
+++ b/packages/lumx-react/src/components/tooltip/useTooltipOpen.tsx
@@ -1,7 +1,7 @@
-import { onEscapePressed } from '@lumx/react/utils/event';
 import { MutableRefObject, useEffect, useRef, useState } from 'react';
 import { browserDoesNotSupportHover } from '@lumx/react/utils/browserDoesNotSupportHover';
 import { TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from '@lumx/react/constants';
+import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 
 /**
  * Hook controlling tooltip visibility using mouse hover the anchor and delay.
@@ -15,6 +15,10 @@ export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLEle
 
     const onPopperMount = useRef<any>(null) as MutableRefObject<(elem: HTMLElement | null) => void>;
 
+    // Global close on escape
+    const [closeCallback, setCloseCallback] = useState<undefined | (() => void)>(undefined);
+    useCallbackOnEscape(closeCallback);
+
     useEffect(() => {
         if (!anchorElement) {
             return undefined;
@@ -54,6 +58,7 @@ export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLEle
         };
         const close = () => getClose(closeDelay);
         const closeImmediately = () => getClose(0);
+        setCloseCallback(() => closeImmediately);
 
         // Adapt event to browsers with or without `hover` support.
         const events: Array<[Node, Event['type'], any]> = [];
@@ -105,8 +110,6 @@ export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLEle
             [anchorElement, 'focusin', open],
             // Close on lost focus.
             [anchorElement, 'focusout', closeImmediately],
-            // Close on ESC keydown
-            [anchorElement, 'keydown', onEscapePressed(closeImmediately)],
         );
 
         // Attach events