@lumx/react 3.6.5-alpha.2 → 3.6.5-alpha.4

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.6.5-alpha.2",
-        "@lumx/icons": "^3.6.5-alpha.2",
+        "@lumx/core": "^3.6.5-alpha.4",
+        "@lumx/icons": "^3.6.5-alpha.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.5-alpha.2"
+    "version": "3.6.5-alpha.4"
 }

package/src/components/autocomplete/Autocomplete.tsx

@@ -133,6 +133,11 @@ export interface AutocompleteProps extends GenericProps, HasTheme {
      * @see {@link DropdownProps#closeOnEscape}
      */
     closeOnEscape?: boolean;
+    /**
+     * Whether the focus should go back on the anchor when dropdown closes and focus is within.
+     * @see {@link DropdownProps#focusAnchorOnClose}
+     */
+    focusAnchorOnClose?: DropdownProps['focusAnchorOnClose'];
     /**
      * The function called on blur.
      * @see {@link TextFieldProps#onBlur}
@@ -229,6 +234,7 @@ export const Autocomplete: Comp<AutocompleteProps, HTMLDivElement> = forwardRef(
         theme,
         value,
         textFieldProps = {},
+        focusAnchorOnClose,
         ...forwardedProps
     } = props;
     const inputAnchorRef = useRef<HTMLElement>(null);
@@ -273,6 +279,7 @@ export const Autocomplete: Comp<AutocompleteProps, HTMLDivElement> = forwardRef(
                 closeOnClick={closeOnClick}
                 closeOnClickAway={closeOnClickAway}
                 closeOnEscape={closeOnEscape}
+                focusAnchorOnClose={focusAnchorOnClose}
                 fitToAnchorWidth={fitToAnchorWidth}
                 isOpen={isOpen}
                 offset={offset}

package/src/components/popover/useRestoreFocusOnClose.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';
-import { useBeforeUnmountSentinel } from '@lumx/react/utils/useBeforeUnmountSentinel';
+import { OnBeforeUnmount } from '@lumx/react/utils/OnBeforeUnmount';
 import type { PopoverProps } from './Popover';
 
 /**
@@ -8,26 +8,38 @@ import type { PopoverProps } from './Popover';
  * anchor if needed.
  */
 export function useRestoreFocusOnClose(
-    props: Pick<PopoverProps, 'focusAnchorOnClose' | 'anchorRef' | 'parentElement'>,
+    {
+        focusAnchorOnClose,
+        anchorRef,
+        parentElement,
+    }: Pick<PopoverProps, 'focusAnchorOnClose' | 'anchorRef' | 'parentElement'>,
     popoverElement?: HTMLElement | null,
 ) {
-    const onBeforeUnmount = React.useMemo(() => {
-        if (!popoverElement || !props.focusAnchorOnClose) return undefined;
-        return () => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const onBeforeUnmountRef = React.useRef<() => void>(() => {});
+
+    const anchor = anchorRef.current;
+    const elementToFocus =
+        // Provided parent element
+        parentElement?.current ||
+        // Or first focusable element in anchor
+        (anchor ? getFirstAndLastFocusable(anchor).first : undefined) ||
+        // Fallback to anchor
+        anchor;
+
+    React.useEffect(() => {
+        if (!popoverElement || !focusAnchorOnClose || !elementToFocus) return;
+
+        onBeforeUnmountRef.current = () => {
             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 });
+            // Focus on next render
+            setTimeout(() => {
+                elementToFocus.focus({ preventScroll: true });
+            }, 0);
         };
-    }, [popoverElement, props.anchorRef, props.focusAnchorOnClose, props.parentElement]);
-    return useBeforeUnmountSentinel(onBeforeUnmount);
+    }, [anchor, elementToFocus, focusAnchorOnClose, popoverElement]);
+
+    return <OnBeforeUnmount callback={onBeforeUnmountRef} />;
 }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
-import { mdiMenuDown } from '@lumx/icons';
+import { mdiMenuDown } from '@lumx/icons/';
 import { PopoverDialog } from '.';
 import { Button, IconButton } from '../button';
 
@@ -11,52 +11,52 @@ export default {
 };
 
 /**
- * Example PopoverDialog using an IconButton as a trigger
+ * Example PopoverDialog using a button as a trigger
  */
-export const WithIconButtonTrigger = () => {
+export const WithButtonTrigger = (props: any) => {
     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} />
+            <Button ref={anchorRef} onClick={open}>
+                Open popover
+            </Button>
             <PopoverDialog
-                aria-labelledby="trigger-button-1"
                 anchorRef={anchorRef}
                 isOpen={isOpen}
                 onClose={close}
                 placement="bottom"
+                className="lumx-spacing-padding-huge"
+                {...props}
             >
-                <Button className="lumx-spacing-margin-huge" onClick={close}>
-                    Close
-                </Button>
+                <Button onClick={close}>Close</Button>
+                <Button emphasis="medium">Other button</Button>
             </PopoverDialog>
         </>
     );
 };
 
 /**
- * Example PopoverDialog using a button as a trigger
+ * Example PopoverDialog using an icon button as a trigger
  */
-export const WithButtonTrigger = () => {
+export const WithIconButtonTrigger = (props: any) => {
     const anchorRef = React.useRef(null);
-    const [isOpen, close, open] = useBooleanState(true);
+    const [isOpen, close, open] = useBooleanState(false);
 
     return (
         <>
-            <Button id="trigger-button-1" ref={anchorRef} onClick={open}>
-                Open popover
-            </Button>
+            <IconButton label="Open popover" ref={anchorRef} onClick={open} icon={mdiMenuDown} />
             <PopoverDialog
-                aria-labelledby="trigger-button-1"
                 anchorRef={anchorRef}
                 isOpen={isOpen}
                 onClose={close}
                 placement="bottom"
+                className="lumx-spacing-padding-huge"
+                label="Example popover"
+                {...props}
             >
-                <Button className="lumx-spacing-margin-huge" onClick={close}>
-                    Close
-                </Button>
+                <Button onClick={close}>Close</Button>
             </PopoverDialog>
         </>
     );

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

@@ -1,50 +1,38 @@
-import React, { useRef, useState } from 'react';
+import React 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';
+import { WithButtonTrigger, WithIconButtonTrigger } from './PopoverDialog.stories';
 
 jest.mock('@lumx/react/utils/isFocusVisible');
 
-const DialogWithButton = (forwardedProps: any) => {
-    const anchorRef = useRef(null);
-    const [isOpen, setIsOpen] = useState<boolean>(false);
-
-    return (
-        <>
-            <button type="button" ref={anchorRef} onClick={() => setIsOpen((current) => !current)}>
-                Open popover
-            </button>
-
-            <PopoverDialog {...forwardedProps} anchorRef={anchorRef} isOpen={isOpen} onClose={() => setIsOpen(false)}>
-                <button type="button">Button 1</button>
-                <button type="button">Button 2</button>
-            </PopoverDialog>
-            {/* This should never have focus while popover is opened */}
-            <button type="button">External button</button>
-        </>
-    );
-};
-
 describe(`<${PopoverDialog.displayName}>`, () => {
-    (isFocusVisible as jest.Mock).mockReturnValue(false);
-
-    it('should behave like a dialog', async () => {
+    it('should open and init focus', async () => {
         const label = 'Test Label';
+        render(<WithButtonTrigger label={label} />);
+
+        // Open popover
+        const triggerElement = screen.getByRole('button', { name: 'Open popover' });
+        await userEvent.click(triggerElement);
+
+        const dialog = await screen.findByRole('dialog', { name: label });
+
+        // Focused the first button
+        expect(within(dialog).getAllByRole('button')[0]).toHaveFocus();
+    });
 
-        render(<DialogWithButton label={label} />);
+    it('should trap focus', async () => {
+        const label = 'Test Label';
+        render(<WithButtonTrigger label={label} />);
 
-        /** Open the popover */
+        // Open popover
         const triggerElement = screen.getByRole('button', { name: 'Open popover' });
         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');
+        const dialogButtons = within(dialog).getAllByRole('button');
 
         // First button should have focus by default on opening
         expect(dialogButtons[0]).toHaveFocus();
@@ -60,37 +48,62 @@ describe(`<${PopoverDialog.displayName}>`, () => {
 
         // As there is no more button, focus should loop back to first button.
         expect(dialogButtons[0]).toHaveFocus();
+    });
+
+    it('should close on escape and restore focus to trigger', async () => {
+        const label = 'Test Label';
+        render(<WithButtonTrigger label={label} />);
+
+        // Open popover
+        const triggerElement = screen.getByRole('button', { name: 'Open popover' });
+        await userEvent.click(triggerElement);
+
+        const dialog = await screen.findByRole('dialog', { name: label });
 
         // Close the popover
         await userEvent.keyboard('{escape}');
 
-        expect(screen.queryByRole('dialog', { name: label })).not.toBeInTheDocument();
-        /** Anchor should retrieve the focus */
+        expect(dialog).not.toBeInTheDocument();
+
+        // Focus restored to the trigger element
         expect(triggerElement).toHaveFocus();
     });
 
-    it('should work on icon button', async () => {
-        const label = 'Open popover';
-        render(<WithIconButtonTrigger />);
+    it('should close externally and restore focus to trigger', async () => {
+        const label = 'Test Label';
+        render(<WithButtonTrigger label={label} />);
 
-        /** Open the popover */
-        const triggerElement = screen.getByRole('button', { name: label });
+        // Open popover
+        const triggerElement = screen.getByRole('button', { name: 'Open popover' });
         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');
+        // Close the popover
+        await userEvent.click(screen.getByRole('button', { name: 'Close' }));
 
-        // First button should have focus by default on opening
-        expect(dialogButtons[0]).toHaveFocus();
+        expect(dialog).not.toBeInTheDocument();
+
+        // Focus restored to the trigger element
+        expect(triggerElement).toHaveFocus();
+    });
+
+    it('should close on escape and restore focus to trigger having a tooltip', async () => {
+        const label = 'Test Label';
+        render(<WithIconButtonTrigger label={label} />);
+
+        // Open popover
+        const triggerElement = screen.getByRole('button', { name: 'Open popover' });
+        await userEvent.click(triggerElement);
+
+        const dialog = await screen.findByRole('dialog', { name: label });
 
         // Close the popover
         await userEvent.keyboard('{escape}');
 
-        expect(screen.queryByRole('dialog', { name: label })).not.toBeInTheDocument();
-        /** Anchor should retrieve the focus */
+        expect(dialog).not.toBeInTheDocument();
+
+        // Focus restored to the trigger element
         expect(triggerElement).toHaveFocus();
     });
 });

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

@@ -52,6 +52,25 @@ describe(`<${Tooltip.displayName}>`, () => {
             expect(anchorWrapper).toHaveAttribute('aria-describedby', tooltip?.id);
         });
 
+        it('should wrap unknown children and not add aria-describedby when closed', async () => {
+            const { anchorWrapper } = await setup({
+                label: 'Tooltip label',
+                children: 'Anchor',
+                forceOpen: false,
+            });
+            expect(anchorWrapper).not.toHaveAttribute('aria-describedby');
+        });
+
+        it('should not wrap Button and not add aria-describedby when closed', async () => {
+            await setup({
+                label: 'Tooltip label',
+                children: <Button>Anchor</Button>,
+                forceOpen: false,
+            });
+            const button = screen.queryByRole('button', { name: 'Anchor' });
+            expect(button).not.toHaveAttribute('aria-describedby');
+        });
+
         it('should not wrap Button', async () => {
             const { tooltip, anchorWrapper } = await setup({
                 label: 'Tooltip label',

package/src/components/tooltip/useInjectTooltipRef.tsx

@@ -1,6 +1,6 @@
 import React, { cloneElement, ReactNode, useMemo } from 'react';
 
-import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
+import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 /**
  * Add ref and ARIA attribute(s) in tooltip children or wrapped children.
@@ -21,27 +21,27 @@ export const useInjectTooltipRef = (
     id: string,
     label: string,
 ): ReactNode => {
-    const element = React.isValidElement(children) ? (children as any) : null;
-    const ref = useMergeRefs(element?.ref, setAnchorElement);
+    // Only add description when open
+    const describedBy = isOpen ? id : undefined;
 
     return useMemo(() => {
         // Non-disabled element
-        if (element && element.props?.disabled !== true && element.props?.isDisabled !== true) {
-            const props = { ...element.props, ref };
+        if (React.isValidElement(children) && children.props.disabled !== true && children.props.isDisabled !== true) {
+            const ref = mergeRefs((children as any).ref, setAnchorElement);
+            const props = { ...children.props, ref };
 
             // 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(' ');
+            if (label !== props['aria-label'] && describedBy) {
+                props['aria-describedby'] = [props['aria-describedby'], describedBy].filter(Boolean).join(' ');
             }
 
-            return cloneElement(element, props);
+            return cloneElement(children, props);
         }
 
-        // Else add a wrapper around the children
         return (
-            <div className="lumx-tooltip-anchor-wrapper" ref={ref} aria-describedby={isOpen ? id : undefined}>
+            <div className="lumx-tooltip-anchor-wrapper" ref={setAnchorElement} aria-describedby={describedBy}>
                 {children}
             </div>
         );
-    }, [element, children, setAnchorElement, isOpen, id, ref, label]);
+    }, [children, setAnchorElement, describedBy, label]);
 };

package/src/utils/OnBeforeUnmount.tsx

@@ -0,0 +1,20 @@
+import React, { useLayoutEffect } from 'react';
+
+/**
+ * Helper component using useLayoutEffect to trigger a callback on before unmount.
+ *
+ * The callback must be wrapped in a React ref to avoid updating the `useLayoutEffect` before the un-mount
+ */
+export const OnBeforeUnmount = ({ callback }: { callback: React.RefObject<() => void> }) => {
+    useLayoutEffect(
+        () => {
+            return () => {
+                // On unmount
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+                callback.current?.();
+            };
+        }, // eslint-disable-next-line react-hooks/exhaustive-deps
+        [],
+    );
+    return null;
+};

package/src/utils/isFocusVisible.ts

@@ -1,3 +1,9 @@
 /** Check if the focus is visible on the given element */
-export const isFocusVisible = (element?: HTMLElement) =>
-    element?.matches?.(':focus-visible, [data-focus-visible-added]');
+export const isFocusVisible = (element?: HTMLElement) => {
+    try {
+        return element?.matches?.(':focus-visible, [data-focus-visible-added]');
+    } catch (_ignored) {
+        // Can fail on non browser env
+        return true;
+    }
+};

package/src/utils/useBeforeUnmountSentinel.tsx

@@ -1,17 +0,0 @@
-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]);
-}