@lumx/react 3.6.0 → 3.6.1-alpha-chore-dependency-updates.0

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.6.0",
-        "@lumx/icons": "^3.6.0",
+        "@lumx/core": "^3.6.1-alpha-chore-dependency-updates.0",
+        "@lumx/icons": "^3.6.1-alpha-chore-dependency-updates.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -30,13 +30,12 @@
         "@babel/preset-typescript": "^7.18.6",
         "@rollup/plugin-commonjs": "^15.0.0",
         "@rollup/plugin-node-resolve": "9.0.0",
-        "@storybook/addon-a11y": "^7.0.20",
-        "@storybook/addon-essentials": "^7.0.20",
-        "@storybook/addon-interactions": "^7.0.20",
-        "@storybook/blocks": "^7.0.20",
-        "@storybook/react": "^7.0.20",
-        "@storybook/react-vite": "^7.0.20",
-        "@storybook/testing-library": "^0.0.14-next.2",
+        "@storybook/addon-a11y": "^7.6.3",
+        "@storybook/addon-essentials": "^7.6.3",
+        "@storybook/addon-interactions": "^7.6.3",
+        "@storybook/blocks": "^7.6.3",
+        "@storybook/react": "^7.6.3",
+        "@storybook/react-vite": "^7.6.3",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^14.4.3",
@@ -69,8 +68,7 @@
         "rollup-plugin-peer-deps-external": "^2.2.4",
         "rollup-plugin-ts-paths-resolve": "^1.3.0",
         "rollup-plugin-typescript-paths": "^1.2.2",
-        "storybook": "^7.0.20",
-        "tsconfig-paths-webpack-plugin": "^3.3.0",
+        "storybook": "^7.6.3",
         "typescript": "^4.1.2",
         "vite": "^4.2.1",
         "vite-tsconfig-paths": "^4.0.7",
@@ -115,5 +113,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.6.0"
+    "version": "3.6.1-alpha-chore-dependency-updates.0"
 }

package/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>
         </>

package/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',

package/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"

package/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(() => {

package/src/components/tooltip/useTooltipOpen.tsx

@@ -1,7 +1,7 @@
-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';
+import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 
 /**
  * Hook controlling tooltip visibility using mouse hover the anchor and delay.
@@ -10,9 +10,15 @@ 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>;
+
+    // Global close on escape
+    const [closeCallback, setCloseCallback] = useState<undefined | (() => void)>(undefined);
+    useCallbackOnEscape(closeCallback);
+
     useEffect(() => {
         if (!anchorElement) {
             return undefined;
@@ -45,44 +51,58 @@ 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);
+        setCloseCallback(() => closeImmediately);
 
         // 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(
@@ -90,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
@@ -109,5 +127,5 @@ export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLEle
         };
     }, [anchorElement, delay]);
 
-    return isOpen;
+    return { isOpen, onPopperMount: onPopperMount.current };
 }