@lumx/react 2.2.12-alpha.2 → 2.2.12

package/src/components/popover/Popover.tsx

@@ -12,6 +12,7 @@ import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 
 import { Comp, GenericProps, getRootClassName, handleBasicClasses, ValueOf } from '@lumx/react/utils';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
 
 /**
  * Different possible placements for the popover.
@@ -81,6 +82,8 @@ export interface PopoverProps extends GenericProps {
     fitWithinViewportHeight?: boolean;
     /** Element to focus when opening the popover. */
     focusElement?: RefObject<HTMLElement>;
+    /** Whether the focus should go back on the anchor when popover closes and focus is within. */
+    focusAnchorOnClose?: boolean;
     /** Whether we put an arrow or not. */
     hasArrow?: boolean;
     /** Whether the popover is open or not. */
@@ -213,6 +216,7 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
         style,
         usePortal,
         zIndex,
+        focusAnchorOnClose = true,
         ...forwardedProps
     } = props;
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -222,6 +226,42 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const clickAwayRef = useRef<HTMLDivElement>(null);
 
+    /**
+     * Track whether the focus is currently set in the
+     * popover.
+     * */
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const isFocusedWithin = useRef(false);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useFocusWithin({
+        element: popperElement || null,
+        onFocusIn: () => {
+            isFocusedWithin.current = true;
+        },
+        onFocusOut: () => {
+            isFocusedWithin.current = false;
+        },
+    });
+
+    /** Action on close */
+    const handleClose = () => {
+        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) {
+            anchorRef.current?.focus();
+        }
+
+        onClose();
+    };
+
     const modifiers: any = [];
     const actualOffset: [number, number] = [offset?.along ?? 0, (offset?.away ?? 0) + (hasArrow ? ARROW_SIZE : 0)];
     modifiers.push({
@@ -267,7 +307,7 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
     }, [style, styles.popper, zIndex, fitWithinViewportHeight]);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useCallbackOnEscape(onClose, isOpen && closeOnEscape);
+    useCallbackOnEscape(handleClose, isOpen && closeOnEscape);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useFocus(focusElement?.current, isOpen && (state?.rects?.popper?.y ?? -1) >= 0);
 
@@ -286,7 +326,7 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
                   style={popoverStyle}
                   {...attributes.popper}
               >
-                  <ClickAwayProvider callback={closeOnClickAway && onClose} refs={clickAwayRefs}>
+                  <ClickAwayProvider callback={closeOnClickAway && handleClose} refs={clickAwayRefs}>
                       {hasArrow && <div ref={setArrowElement} className={`${CLASSNAME}__arrow`} style={styles.arrow} />}
                       {children}
                   </ClickAwayProvider>

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

@@ -29,6 +29,7 @@ exports[`<Select> Snapshots and structure should render correctly 1`] = `
     closeOnEscape={true}
     fitToAnchorWidth={true}
     fitWithinViewportHeight={true}
+    focusAnchorOnClose={true}
     isOpen={false}
     onClose={[Function]}
     placement="bottom-start"

package/src/components/select/__snapshots__/SelectMultiple.test.tsx.snap

@@ -30,6 +30,7 @@ exports[`<SelectMultiple> Snapshots and structure should render chips 1`] = `
     closeOnEscape={true}
     fitToAnchorWidth={true}
     fitWithinViewportHeight={true}
+    focusAnchorOnClose={true}
     isOpen={false}
     onClose={[Function]}
     placement="bottom-start"
@@ -72,6 +73,7 @@ exports[`<SelectMultiple> Snapshots and structure should render defaults 1`] = `
     closeOnEscape={true}
     fitToAnchorWidth={true}
     fitWithinViewportHeight={true}
+    focusAnchorOnClose={true}
     isOpen={false}
     onClose={[Function]}
     placement="bottom-start"

package/src/components/tooltip/useTooltipOpen.tsx

@@ -103,7 +103,6 @@ export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLEle
             for (const [node, eventType, evenHandler] of events) {
                 node.removeEventListener(eventType, evenHandler);
             }
-            closeImmediately();
         };
     }, [anchorElement, delay]);
 

package/types.d.ts

@@ -938,6 +938,8 @@ export interface PopoverProps extends GenericProps {
 	fitWithinViewportHeight?: boolean;
 	/** Element to focus when opening the popover. */
 	focusElement?: RefObject<HTMLElement>;
+	/** Whether the focus should go back on the anchor when popover closes and focus is within. */
+	focusAnchorOnClose?: boolean;
 	/** Whether we put an arrow or not. */
 	hasArrow?: boolean;
 	/** Whether the popover is open or not. */
@@ -1012,6 +1014,8 @@ export interface DropdownProps extends GenericProps {
 	placement?: Placement;
 	/** Whether the focus should be set on the list when the dropdown is open or not. */
 	shouldFocusOnOpen?: boolean;
+	/** Whether the focus should go back on the anchor when dropdown closes and focus is within. */
+	focusAnchorOnClose?: boolean;
 	/**
 	 * Z-axis position.
 	 * @see {@link PopoverProps#zIndex}
@@ -1474,6 +1478,8 @@ export interface ListProps extends GenericProps {
 	isClickable?: boolean;
 	/** Item padding size. */
 	itemPadding?: Extract<Size, "big" | "huge">;
+	/** Tab index of the list. Default to -1 */
+	tabIndex?: number;
 	/**
 	 * On list item selected callback.
 	 *