@lumx/react 3.6.3 → 3.6.5-alpha.0

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.6.3",
-        "@lumx/icons": "^3.6.3",
+        "@lumx/core": "^3.6.5-alpha.0",
+        "@lumx/icons": "^3.6.5-alpha.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -112,5 +112,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.6.3"
+    "version": "3.6.5-alpha.0"
 }

package/src/components/button/IconButton.tsx

@@ -61,14 +61,7 @@ export const IconButton: Comp<IconButtonProps, HTMLButtonElement> = forwardRef((
 
     return (
         <Tooltip label={hideTooltip ? '' : label} {...tooltipProps}>
-            <ButtonRoot
-                ref={ref}
-                {...{ emphasis, size, theme, ...forwardedProps }}
-                aria-label={label}
-                variant="icon"
-                // Remove the aria-describedby added by the tooltip when it is the same text as the aria-label
-                aria-describedby={tooltipProps?.label && tooltipProps?.label === label && undefined}
-            >
+            <ButtonRoot ref={ref} {...{ emphasis, size, theme, ...forwardedProps }} aria-label={label} variant="icon">
                 {image ? (
                     <img
                         // no need to set alt as an aria-label is already set on the button

package/src/components/expansion-panel/ExpansionPanel.test.tsx

@@ -4,11 +4,14 @@ import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { queryByRole, render } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import userEvent from '@testing-library/user-event';
+import { isFocusVisible } from '@lumx/react/utils/isFocusVisible';
 
 import { ExpansionPanel, ExpansionPanelProps } from '.';
 
 const CLASSNAME = ExpansionPanel.className as string;
 
+jest.mock('@lumx/react/utils/isFocusVisible');
+
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
@@ -32,6 +35,8 @@ const setup = (propsOverride: Partial<ExpansionPanelProps> = {}) => {
 };
 
 describe(`<${ExpansionPanel.displayName}>`, () => {
+    (isFocusVisible as jest.Mock).mockReturnValue(false);
+
     describe('Render', () => {
         it('should render default', () => {
             const { element, query } = setup();

package/src/components/input-helper/InputHelper.tsx

@@ -41,18 +41,18 @@ const DEFAULT_PROPS: Partial<InputHelperProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const InputHelper: Comp<InputHelperProps, HTMLSpanElement> = forwardRef((props, ref) => {
+export const InputHelper: Comp<InputHelperProps, HTMLParagraphElement> = forwardRef((props, ref) => {
     const { children, className, kind, theme, ...forwardedProps } = props;
     const { color } = INPUT_HELPER_CONFIGURATION[kind as any] || {};
 
     return (
-        <span
+        <p
             ref={ref}
             {...forwardedProps}
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, theme }))}
         >
             {children}
-        </span>
+        </p>
     );
 });
 

package/src/components/popover/Popover.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactNode, RefObject, useCallback, useRef } from 'react';
+import React, { forwardRef, ReactNode, RefObject, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
@@ -9,14 +9,13 @@ import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { DOCUMENT } from '@lumx/react/constants';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
-import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';
+import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { skipRender } from '@lumx/react/utils/skipRender';
 
+import { useRestoreFocusOnClose } from './useRestoreFocusOnClose';
 import { usePopoverStyle } from './usePopoverStyle';
-import { FitAnchorWidth, Elevation, Offset, Placement } from './constants';
+import { Elevation, FitAnchorWidth, Offset, Placement } from './constants';
 
 /**
  * Defines the props of the component.
@@ -85,6 +84,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 const DEFAULT_PROPS: Partial<PopoverProps> = {
     elevation: 3,
     placement: Placement.AUTO,
+    focusAnchorOnClose: true,
     usePortal: true,
     zIndex: 9999,
 };
@@ -110,7 +110,7 @@ const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref
         onClose,
         parentElement,
         usePortal,
-        focusAnchorOnClose = true,
+        focusAnchorOnClose,
         withFocusTrap,
         boundaryRef,
         fitToAnchorWidth,
@@ -122,8 +122,7 @@ const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref
         zIndex,
         ...forwardedProps
     } = props;
-    const clickAwayRef = useRef<HTMLDivElement>(null);
-    const contentRef = useRef<HTMLDivElement>(null);
+    const popoverRef = useRef<HTMLDivElement>(null);
 
     const {
         styles,
@@ -146,62 +145,22 @@ const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref
         zIndex,
     });
 
-    /**
-     * Track whether the focus is currently set in the
-     * popover.
-     * */
-    const isFocusedWithin = useRef(false);
-
-    useFocusWithin({
-        element: popperElement || null,
-        onFocusIn: () => {
-            isFocusedWithin.current = true;
-        },
-        onFocusOut: () => {
-            isFocusedWithin.current = false;
-        },
-    });
+    const unmountSentinel = useRestoreFocusOnClose({ focusAnchorOnClose, anchorRef, parentElement }, popperElement);
 
-    /** Action on close */
-    const handleClose = useCallback(() => {
-        if (!onClose) {
-            return;
-        }
-
-        /**
-         * If the focus is currently within the popover
-         * when the popover closes, reset the focus back to the anchor element
-         * unless specifically requested not to.
-         */
-        if (isFocusedWithin.current && focusAnchorOnClose) {
-            let elementToFocus = parentElement?.current;
-            if (!elementToFocus && anchorRef?.current) {
-                // Focus the first focusable element in anchor.
-                elementToFocus = getFirstAndLastFocusable(anchorRef.current).first;
-            }
-            if (!elementToFocus) {
-                // Fallback on the anchor element.
-                elementToFocus = anchorRef?.current;
-            }
-            elementToFocus?.focus({ preventScroll: true });
-        }
-
-        onClose();
-    }, [anchorRef, focusAnchorOnClose, onClose, parentElement]);
-
-    useCallbackOnEscape(handleClose, isOpen && closeOnEscape);
+    useCallbackOnEscape(onClose, isOpen && closeOnEscape);
 
     /** Only set focus within if the focus trap is disabled as they interfere with one another. */
     useFocus(focusElement?.current, !withFocusTrap && isOpen && isPositioned);
-    useFocusTrap(withFocusTrap && isOpen && contentRef?.current, focusElement?.current);
+    useFocusTrap(withFocusTrap && isOpen && popoverRef?.current, focusElement?.current);
 
-    const clickAwayRefs = useRef([clickAwayRef, anchorRef]);
+    const clickAwayRefs = useRef([popoverRef, anchorRef]);
+    const mergedRefs = useMergeRefs<HTMLDivElement>(setPopperElement, ref, popoverRef);
 
     return isOpen
         ? renderPopover(
               <Component
                   {...forwardedProps}
-                  ref={mergeRefs<HTMLDivElement>(setPopperElement, ref, clickAwayRef, contentRef)}
+                  ref={mergedRefs}
                   className={classNames(
                       className,
                       handleBasicClasses({
@@ -214,7 +173,8 @@ const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref
                   style={styles.popover}
                   {...attributes.popper}
               >
-                  <ClickAwayProvider callback={closeOnClickAway && handleClose} childrenRefs={clickAwayRefs}>
+                  {unmountSentinel}
+                  <ClickAwayProvider callback={closeOnClickAway && onClose} childrenRefs={clickAwayRefs}>
                       {hasArrow && (
                           <div ref={setArrowElement} className={`${CLASSNAME}__arrow`} style={styles.arrow}>
                               <svg viewBox="0 0 14 14" aria-hidden>

package/src/components/popover/useRestoreFocusOnClose.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';
+import { useBeforeUnmountSentinel } from '@lumx/react/utils/useBeforeUnmountSentinel';
+import type { PopoverProps } from './Popover';
+
+/**
+ * Provides an unmount sentinel to inject in the popover to detect when it closes and restore the focus to the
+ * anchor if needed.
+ */
+export function useRestoreFocusOnClose(
+    props: Pick<PopoverProps, 'focusAnchorOnClose' | 'anchorRef' | 'parentElement'>,
+    popoverElement?: HTMLElement | null,
+) {
+    const onBeforeUnmount = React.useMemo(() => {
+        if (!popoverElement || !props.focusAnchorOnClose) return undefined;
+        return () => {
+            const isFocusWithin = popoverElement?.contains(document.activeElement);
+            if (!isFocusWithin) return;
+
+            const anchor = props.anchorRef.current;
+            const elementToFocus =
+                // Provided parent element
+                props.parentElement?.current ||
+                // Or first focusable element in anchor
+                (anchor ? getFirstAndLastFocusable(anchor).first : undefined) ||
+                // Fallback to anchor
+                anchor;
+
+            elementToFocus?.focus({ preventScroll: true });
+        };
+    }, [popoverElement, props.anchorRef, props.focusAnchorOnClose, props.parentElement]);
+    return useBeforeUnmountSentinel(onBeforeUnmount);
+}

package/src/components/popover-dialog/PopoverDialog.stories.tsx

@@ -1,11 +1,38 @@
 import React from 'react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
+import { mdiMenuDown } from '@lumx/icons';
 import { PopoverDialog } from '.';
-import { Button } from '../button';
+import { Button, IconButton } from '../button';
 
 export default {
     title: 'LumX components/popover-dialog/PopoverDialog',
     component: PopoverDialog,
+    parameters: { chromatic: { disableSnapshot: true } },
+};
+
+/**
+ * Example PopoverDialog using an IconButton as a trigger
+ */
+export const WithIconButtonTrigger = () => {
+    const anchorRef = React.useRef(null);
+    const [isOpen, close, open] = useBooleanState(false);
+
+    return (
+        <>
+            <IconButton id="trigger-button-1" label="Open popover" ref={anchorRef} onClick={open} icon={mdiMenuDown} />
+            <PopoverDialog
+                aria-labelledby="trigger-button-1"
+                anchorRef={anchorRef}
+                isOpen={isOpen}
+                onClose={close}
+                placement="bottom"
+            >
+                <Button className="lumx-spacing-margin-huge" onClick={close}>
+                    Close
+                </Button>
+            </PopoverDialog>
+        </>
+    );
 };
 
 /**

package/src/components/popover-dialog/PopoverDialog.test.tsx

@@ -1,9 +1,13 @@
 import React, { useRef, useState } from 'react';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { isFocusVisible } from '@lumx/react/utils/isFocusVisible';
 
+import { WithIconButtonTrigger } from './PopoverDialog.stories';
 import { PopoverDialog } from './PopoverDialog';
 
+jest.mock('@lumx/react/utils/isFocusVisible');
+
 const DialogWithButton = (forwardedProps: any) => {
     const anchorRef = useRef(null);
     const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -25,6 +29,8 @@ const DialogWithButton = (forwardedProps: any) => {
 };
 
 describe(`<${PopoverDialog.displayName}>`, () => {
+    (isFocusVisible as jest.Mock).mockReturnValue(false);
+
     it('should behave like a dialog', async () => {
         const label = 'Test Label';
 
@@ -62,4 +68,29 @@ describe(`<${PopoverDialog.displayName}>`, () => {
         /** Anchor should retrieve the focus */
         expect(triggerElement).toHaveFocus();
     });
+
+    it('should work on icon button', async () => {
+        const label = 'Open popover';
+        render(<WithIconButtonTrigger />);
+
+        /** Open the popover */
+        const triggerElement = screen.getByRole('button', { name: label });
+        await userEvent.click(triggerElement);
+
+        const dialog = await screen.findByRole('dialog', { name: label });
+        const withinDialog = within(dialog);
+
+        /** Get buttons within dialog */
+        const dialogButtons = withinDialog.getAllByRole('button');
+
+        // First button should have focus by default on opening
+        expect(dialogButtons[0]).toHaveFocus();
+
+        // Close the popover
+        await userEvent.keyboard('{escape}');
+
+        expect(screen.queryByRole('dialog', { name: label })).not.toBeInTheDocument();
+        /** Anchor should retrieve the focus */
+        expect(triggerElement).toHaveFocus();
+    });
 });

package/src/components/select/Select.test.tsx

@@ -7,11 +7,13 @@ import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/rea
 import { render, within } from '@testing-library/react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import userEvent from '@testing-library/user-event';
+import { isFocusVisible } from '@lumx/react/utils/isFocusVisible';
 
 import { Select, SelectProps, SelectVariant } from './Select';
 
 const CLASSNAME = Select.className as string;
 
+jest.mock('@lumx/react/utils/isFocusVisible');
 jest.mock('uid', () => ({ uid: () => 'uid' }));
 
 /**
@@ -33,6 +35,8 @@ const setup = (propsOverride: Partial<SelectProps> = {}) => {
 };
 
 describe(`<${Select.displayName}>`, () => {
+    (isFocusVisible as jest.Mock).mockReturnValue(false);
+
     describe('Props', () => {
         it('should have default classNames', () => {
             const { select, getDropdown } = setup();

package/src/components/text-field/TextField.test.tsx

@@ -15,10 +15,13 @@ import {
 import partition from 'lodash/partition';
 import userEvent from '@testing-library/user-event';
 
+import { isFocusVisible } from '@lumx/react/utils/isFocusVisible';
 import { TextField, TextFieldProps } from './TextField';
 
 const CLASSNAME = TextField.className as string;
 
+jest.mock('@lumx/react/utils/isFocusVisible');
+
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
@@ -46,6 +49,8 @@ const setup = (propsOverride: Partial<TextFieldProps> = {}) => {
 };
 
 describe(`<${TextField.displayName}>`, () => {
+    (isFocusVisible as jest.Mock).mockReturnValue(false);
+
     describe('Render', () => {
         it('should render defaults', () => {
             const { element, inputNative } = setup({ id: 'fixedId' });

package/src/components/tooltip/Tooltip.stories.tsx

@@ -86,3 +86,19 @@ export const HideTooltipOnHiddenAnchor = () => {
         </>
     );
 };
+HideTooltipOnHiddenAnchor.parameters = { chromatic: { disableSnapshot: true } };
+
+/** Test focusing a tooltip anchor programmatically */
+export const TestProgrammaticFocus = () => {
+    const anchorRef = React.useRef<HTMLButtonElement>(null);
+    return (
+        <>
+            <p>The tooltip should open on keyboard focus but not on programmatic focus (ex: after a click)</p>
+            <Tooltip label="label">
+                <Button ref={anchorRef}>button with label</Button>
+            </Tooltip>
+            <Button onClick={() => anchorRef.current?.focus()}>focus the button</Button>
+        </>
+    );
+};
+TestProgrammaticFocus.parameters = { chromatic: { disableSnapshot: true } };

package/src/components/tooltip/Tooltip.test.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
 
-import { Button } from '@lumx/react';
+import { Button, IconButton } from '@lumx/react';
 import { screen, render, waitFor } from '@testing-library/react';
 import { queryAllByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import userEvent from '@testing-library/user-event';
 
+import { isFocusVisible } from '@lumx/react/utils/isFocusVisible';
 import { Tooltip, TooltipProps } from './Tooltip';
 
 const CLASSNAME = Tooltip.className as string;
 
+jest.mock('@lumx/react/utils/isFocusVisible');
 jest.mock('uid', () => ({ uid: () => 'uid' }));
 // Skip delays
 jest.mock('@lumx/react/constants', () => ({
@@ -62,6 +64,35 @@ describe(`<${Tooltip.displayName}>`, () => {
             expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
         });
 
+        it('should not add aria-describedby if button label is the same as tooltip label', async () => {
+            const label = 'Tooltip label';
+            render(<IconButton label={label} tooltipProps={{ forceOpen: true }} />);
+            const tooltip = screen.queryByRole('tooltip', { name: label });
+            expect(tooltip).toBeInTheDocument();
+            const button = screen.queryByRole('button', { name: label });
+            expect(button).not.toHaveAttribute('aria-describedby');
+        });
+
+        it('should keep anchor aria-describedby if button label is the same as tooltip label', async () => {
+            const label = 'Tooltip label';
+            render(<IconButton label={label} aria-describedby=":header-1:" tooltipProps={{ forceOpen: true }} />);
+            const tooltip = screen.queryByRole('tooltip', { name: label });
+            expect(tooltip).toBeInTheDocument();
+            const button = screen.queryByRole('button', { name: label });
+            expect(button).toHaveAttribute('aria-describedby', ':header-1:');
+        });
+
+        it('should concat aria-describedby if already exists', async () => {
+            const { tooltip } = await setup({
+                label: 'Tooltip label',
+                children: <Button aria-describedby=":header-1:">Anchor</Button>,
+                forceOpen: true,
+            });
+            expect(tooltip).toBeInTheDocument();
+            const button = screen.queryByRole('button', { name: 'Anchor' });
+            expect(button).toHaveAttribute('aria-describedby', `:header-1: ${tooltip?.id}`);
+        });
+
         it('should wrap disabled Button', async () => {
             const { tooltip, anchorWrapper } = await setup({
                 label: 'Tooltip label',
@@ -148,7 +179,8 @@ describe(`<${Tooltip.displayName}>`, () => {
             });
         });
 
-        it('should activate on anchor focus and close on escape', async () => {
+        it('should activate on anchor focus visible and close on escape', async () => {
+            (isFocusVisible as jest.Mock).mockReturnValue(true);
             let { tooltip } = await setup({
                 label: 'Tooltip label',
                 children: <Button>Anchor</Button>,
@@ -181,6 +213,26 @@ describe(`<${Tooltip.displayName}>`, () => {
             await userEvent.keyboard('{Escape}');
             expect(tooltip).not.toBeInTheDocument();
         });
+
+        it('should not activate on anchor focus if not visible', async () => {
+            (isFocusVisible as jest.Mock).mockReturnValue(false);
+            let { tooltip } = await setup({
+                label: 'Tooltip label',
+                children: <Button>Anchor</Button>,
+                forceOpen: false,
+            });
+
+            expect(tooltip).not.toBeInTheDocument();
+
+            // Focus anchor button
+            await userEvent.tab();
+            const button = screen.getByRole('button', { name: 'Anchor' });
+            expect(button).toHaveFocus();
+
+            // Tooltip not opening
+            tooltip = screen.queryByRole('tooltip', { name: 'Tooltip label' });
+            expect(tooltip).not.toBeInTheDocument();
+        });
     });
 
     // Common tests suite.

package/src/components/tooltip/Tooltip.tsx

@@ -87,7 +87,7 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
     const position = attributes?.popper?.['data-popper-placement'] ?? placement;
     const { isOpen: isActivated, onPopperMount } = useTooltipOpen(delay, anchorElement);
     const isOpen = isActivated || forceOpen;
-    const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen, id);
+    const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen, id, label);
 
     return (
         <>

package/src/components/tooltip/useInjectTooltipRef.tsx

@@ -1,8 +1,6 @@
-import get from 'lodash/get';
-import isUndefined from 'lodash/isUndefined';
 import React, { cloneElement, ReactNode, useMemo } from 'react';
 
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 
 /**
  * Add ref and ARIA attribute(s) in tooltip children or wrapped children.
@@ -13,6 +11,7 @@ import { mergeRefs } from '@lumx/react/utils/mergeRefs';
  * @param  setAnchorElement Set tooltip anchor element.
  * @param  isOpen           Whether the tooltip is open or not.
  * @param  id               Tooltip id.
+ * @param  label            Tooltip label.
  * @return tooltip anchor.
  */
 export const useInjectTooltipRef = (
@@ -20,32 +19,29 @@ export const useInjectTooltipRef = (
     setAnchorElement: (e: HTMLDivElement) => void,
     isOpen: boolean | undefined,
     id: string,
+    label: string,
 ): ReactNode => {
+    const element = React.isValidElement(children) ? (children as any) : null;
+    const ref = useMergeRefs(element?.ref, setAnchorElement);
+
     return useMemo(() => {
-        // Let the children remove the aria-describedby attribute by setting it to undefined
-        const childrenHasAriaProp = get(children, 'props')
-            ? 'aria-describedby' in get(children, 'props') && isUndefined(get(children, 'props.aria-describedby'))
-            : false;
-        const ariaProps = { 'aria-describedby': isOpen && !childrenHasAriaProp ? id : undefined };
+        // Non-disabled element
+        if (element && element.props?.disabled !== true && element.props?.isDisabled !== true) {
+            const props = { ...element.props, ref };
 
-        if (
-            children &&
-            get(children, '$$typeof') &&
-            get(children, 'props.disabled') !== true &&
-            get(children, 'props.isDisabled') !== true
-        ) {
-            const element = children as any;
+            // Add current tooltip to the aria-describedby if the label is not already present
+            if (label !== props['aria-label']) {
+                props['aria-describedby'] = [props['aria-describedby'], id].filter(Boolean).join(' ');
+            }
 
-            return cloneElement(element, {
-                ...element.props,
-                ...ariaProps,
-                ref: mergeRefs(element.ref, setAnchorElement),
-            });
+            return cloneElement(element, props);
         }
+
+        // Else add a wrapper around the children
         return (
-            <div className="lumx-tooltip-anchor-wrapper" ref={setAnchorElement} {...ariaProps}>
+            <div className="lumx-tooltip-anchor-wrapper" ref={ref} aria-describedby={isOpen ? id : undefined}>
                 {children}
             </div>
         );
-    }, [isOpen, id, children, setAnchorElement]);
+    }, [element, children, setAnchorElement, isOpen, id, ref, label]);
 };

package/src/components/tooltip/useTooltipOpen.tsx

@@ -2,6 +2,7 @@ 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';
+import { isFocusVisible } from '@lumx/react/utils/isFocusVisible';
 
 /**
  * Hook controlling tooltip visibility using mouse hover the anchor and delay.
@@ -106,8 +107,16 @@ export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLEle
 
         // Events always applied no matter the browser:.
         events.push(
-            // Open on focus.
-            [anchorElement, 'focusin', open],
+            // Open on focus (only if focus is visible).
+            [
+                anchorElement,
+                'focusin',
+                (e: Event) => {
+                    // Skip if focus is not visible
+                    if (!isFocusVisible(e.target as HTMLElement)) return;
+                    open();
+                },
+            ],
             // Close on lost focus.
             [anchorElement, 'focusout', closeImmediately],
         );

package/src/utils/isFocusVisible.ts

@@ -0,0 +1,3 @@
+/** Check if the focus is visible on the given element */
+export const isFocusVisible = (element?: HTMLElement) =>
+    element?.matches?.(':focus-visible, [data-focus-visible-added]');

package/src/utils/mergeRefs.ts

@@ -1,5 +1,5 @@
 import { Falsy } from '@lumx/react/utils/type';
-import { MutableRefObject } from 'react';
+import { MutableRefObject, useMemo } from 'react';
 
 type FnRef<T> = (value: T) => void;
 
@@ -20,3 +20,14 @@ export function mergeRefs<T>(...refs: Array<MutableRefObject<T | null> | FnRef<T
             }
         });
 }
+
+/**
+ * Same as `mergeRefs` but memoized
+ */
+export const useMergeRefs = <T>(...refs: Array<MutableRefObject<T | null> | FnRef<T> | Falsy>) => {
+    return useMemo(
+        () => mergeRefs(...refs),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        refs,
+    );
+};

package/src/utils/useBeforeUnmountSentinel.tsx

@@ -0,0 +1,17 @@
+import React, { useLayoutEffect } from 'react';
+
+/** Small helper component using useLayoutEffect to trigger a callback on before unmount. */
+const OnUnmount = ({ onBeforeUnmount }: { onBeforeUnmount: () => void }) => {
+    useLayoutEffect(() => onBeforeUnmount, [onBeforeUnmount]);
+    return null;
+};
+
+/**
+ * Provides a sentinel to inject the React tree that triggers the callback on before unmount.
+ */
+export function useBeforeUnmountSentinel(onBeforeUnmount?: () => void) {
+    return React.useMemo(() => {
+        if (!onBeforeUnmount) return undefined;
+        return <OnUnmount onBeforeUnmount={onBeforeUnmount} />;
+    }, [onBeforeUnmount]);
+}