@lumx/react 3.6.5-alpha.4 → 3.6.5

package/package.json

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

package/src/components/popover/useRestoreFocusOnClose.tsx

@@ -15,31 +15,33 @@ export function useRestoreFocusOnClose(
     }: Pick<PopoverProps, 'focusAnchorOnClose' | 'anchorRef' | 'parentElement'>,
     popoverElement?: HTMLElement | null,
 ) {
-    // 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;
+    const onBeforeUnmountRef = React.useRef<(() => void) | undefined>();
 
     React.useEffect(() => {
-        if (!popoverElement || !focusAnchorOnClose || !elementToFocus) return;
+        if (!popoverElement || !focusAnchorOnClose) {
+            onBeforeUnmountRef.current = undefined;
+            return;
+        }
 
         onBeforeUnmountRef.current = () => {
             const isFocusWithin = popoverElement?.contains(document.activeElement);
             if (!isFocusWithin) return;
 
-            // Focus on next render
+            // On next render
             setTimeout(() => {
-                elementToFocus.focus({ preventScroll: true });
+                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;
+
+                elementToFocus?.focus({ preventScroll: true });
             }, 0);
         };
-    }, [anchor, elementToFocus, focusAnchorOnClose, popoverElement]);
+    }, [anchorRef, focusAnchorOnClose, parentElement, popoverElement]);
 
-    return <OnBeforeUnmount callback={onBeforeUnmountRef} />;
+    return <OnBeforeUnmount callbackRef={onBeforeUnmountRef} />;
 }

package/src/utils/OnBeforeUnmount.tsx

@@ -5,13 +5,13 @@ import React, { useLayoutEffect } from 'react';
  *
  * 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> }) => {
+export const OnBeforeUnmount = ({ callbackRef }: { callbackRef: React.RefObject<(() => void) | undefined> }) => {
     useLayoutEffect(
         () => {
             return () => {
                 // On unmount
                 // eslint-disable-next-line react-hooks/exhaustive-deps
-                callback.current?.();
+                callbackRef.current?.();
             };
         }, // eslint-disable-next-line react-hooks/exhaustive-deps
         [],