@lumx/react 3.6.3 → 3.6.4

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.4",
+        "@lumx/icons": "^3.6.4",
         "@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.4"
 }

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

@@ -6,10 +6,12 @@ import { queryAllByTagName, queryByClassName } from '@lumx/react/testing/utils/q
 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', () => ({
@@ -148,7 +150,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 +184,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/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]);
+}