npm package diff

Package: @chakra-ui/react

Versions: 2.10.1 - 2.10.2

File: package/dist/esm/popover/use-popover.mjs

Index: package/dist/esm/popover/use-popover.mjs
===================================================================
--- package/dist/esm/popover/use-popover.mjs
+++ package/dist/esm/popover/use-popover.mjs
@@ -1,8 +1,8 @@
 'use client';
-import { useDisclosure, useAnimationState, useFocusOnPointerDown, useFocusOnHide, useFocusOnShow, mergeRefs } from '@chakra-ui/hooks';
-import { lazyDisclosure, callAllHandlers } from '@chakra-ui/utils';
-import { useRef, useState, useId, useCallback, useEffect } from 'react';
+import { useDisclosure, useAnimationState, useFocusOnPointerDown, useFocusOnHide, useFocusOnShow, useOutsideClick, mergeRefs } from '@chakra-ui/hooks';
+import { isFocusable, lazyDisclosure, callAllHandlers } from '@chakra-ui/utils';
+import { useState, useEffect, useRef, useId, useCallback } from 'react';
 import { usePopper } from '../popper/use-popper.mjs';
 import { cssVars } from '../popper/utils.mjs';
 
 const TRIGGER = {
@@ -27,8 +27,10 @@
     computePositionOnMount,
     ...popperProps
   } = props;
   const { isOpen, onClose, onOpen, onToggle } = useDisclosure(props);
+  const [restoreFocus, setRestoreFocus] = useState(returnFocusOnClose);
+  useEffect(() => setRestoreFocus(returnFocusOnClose), [returnFocusOnClose]);
   const anchorRef = useRef(null);
   const triggerRef = useRef(null);
   const popoverRef = useRef(null);
   const isHoveringRef = useRef(false);
@@ -63,15 +65,30 @@
   });
   useFocusOnHide(popoverRef, {
     focusRef: triggerRef,
     visible: isOpen,
-    shouldFocus: returnFocusOnClose && trigger === TRIGGER.click
+    shouldFocus: restoreFocus && trigger === TRIGGER.click
   });
   useFocusOnShow(popoverRef, {
     focusRef: initialFocusRef,
     visible: isOpen,
     shouldFocus: autoFocus && trigger === TRIGGER.click
   });
+  useOutsideClick({
+    enabled: isOpen && closeOnBlur,
+    ref: popoverRef,
+    handler(event) {
+      const relatedTarget = event.composedPath?.()[0] ?? [
+        event.target
+      ];
+      if (contains(triggerRef.current, relatedTarget))
+        return;
+      if (relatedTarget) {
+        setRestoreFocus(!isFocusable(relatedTarget));
+      }
+      onClose();
+    }
+  });
   const shouldRenderChildren = lazyDisclosure({
     wasSelected: hasBeenOpened.current,
     enabled: isLazy,
     mode: lazyBehavior,
@@ -92,8 +109,10 @@
         id: popoverId,
         tabIndex: -1,
         role: "dialog",
         onKeyDown: callAllHandlers(props2.onKeyDown, (event) => {
+          if (event.nativeEvent.isComposing)
+            return;
           if (closeOnEsc && event.key === "Escape") {
             event.preventDefault();
             event.stopPropagation();
             onClose();
@@ -103,8 +122,11 @@
           const relatedTarget = getRelatedTarget(event);
           const targetIsPopover = contains(popoverRef.current, relatedTarget);
           const targetIsTrigger = contains(triggerRef.current, relatedTarget);
           const isValidBlur = !targetIsPopover && !targetIsTrigger;
+          if (relatedTarget) {
+            setRestoreFocus(!isFocusable(relatedTarget));
+          }
           if (isOpen && closeOnBlur && isValidBlur) {
             onClose();
           }
         }),