feat: add controller.closeOnEscape setting

Allow users to disable the lightbox's Escape-to-close behavior with
`controller={{ closeOnEscape: false }}`. Useful when a custom slide
contains an interactive element with its own Escape handling — without
this, the bubbled Escape would also dismiss the lightbox.

Defaults to `true` to preserve existing behavior.

Author: igordanchenko

docs/documentation.md

@@ -182,6 +182,7 @@ import "yet-another-react-lightbox/styles.css";
         &nbsp;&nbsp;closeOnPullUp?: boolean;<br />
         &nbsp;&nbsp;closeOnPullDown?: boolean;<br />
         &nbsp;&nbsp;closeOnBackdropClick?: boolean;<br />
+        &nbsp;&nbsp;closeOnEscape?: boolean;<br />
         &nbsp;&nbsp;disableSwipeNavigation?: boolean;<br />
         &#125;
       </td>
@@ -195,10 +196,16 @@ import "yet-another-react-lightbox/styles.css";
           <li>`closeOnPullUp` - if `true`, close the lightbox on pull-up gesture</li>
           <li>`closeOnPullDown` - if `true`, close the lightbox on pull-down gesture</li>
           <li>`closeOnBackdropClick` - if `true`, close the lightbox when the backdrop is clicked</li>
+          <li>`closeOnEscape` - if `true`, close the lightbox on Escape key press (default: `true`)</li>
           <li>`disableSwipeNavigation` - if `true`, disable slide change on pointer swipe / drag</li>
         </ul>
         <p>
-          Default value: <span class="font-mono">&#123; ref: null, focus: true, aria: false, touchAction: "none" &#125;</span>
+          Default value:
+          <span class="font-mono">
+            &#123; ref: null, focus: true, aria: false, touchAction: "none", closeOnPullUp: false,
+            closeOnPullDown: false, closeOnBackdropClick: false, closeOnEscape: true,
+            disableSwipeNavigation: false &#125;
+          </span>
         </p>
       </td>
     </tr>

src/modules/Navigation/useKeyboardNavigation.ts

@@ -16,7 +16,7 @@ import { useNavigationState } from "./useNavigationState.js";
 export function useKeyboardNavigation<T extends Element>(subscribeSensors: UseSensors<T>["subscribeSensors"]) {
   const isRTL = useRTL();
   const { publish } = useEvents();
-  const { animation } = useLightboxProps();
+  const { animation, controller } = useLightboxProps();
   const { prevDisabled, nextDisabled } = useNavigationState();
 
   const throttle = (animation.navigation ?? animation.swipe) / 2;
@@ -27,6 +27,7 @@ export function useKeyboardNavigation<T extends Element>(subscribeSensors: UseSe
   const handleKeyDown = useEventCallback((event: React.KeyboardEvent) => {
     switch (event.key) {
       case VK_ESCAPE:
+        if (!controller.closeOnEscape) return;
         publish(ACTION_CLOSE);
         break;
       case VK_ARROW_LEFT:

src/props.ts

@@ -35,6 +35,7 @@ export const LightboxDefaultProps: LightboxProps = {
     closeOnPullUp: false,
     closeOnPullDown: false,
     closeOnBackdropClick: false,
+    closeOnEscape: true,
     preventDefaultWheelX: true,
     preventDefaultWheelY: false,
     disableSwipeNavigation: false,

src/types.ts

@@ -228,6 +228,8 @@ export interface ControllerSettings {
   closeOnPullDown: boolean;
   /** if `true`, close the lightbox when the backdrop is clicked */
   closeOnBackdropClick: boolean;
+  /** if `true`, close the lightbox on Escape key press (default: `true`) */
+  closeOnEscape: boolean;
   /** if `true`, prevent default for horizontal wheel scroll events (for internal use only) */
   preventDefaultWheelX: boolean;
   /** if `true`, prevent default for vertical wheel scroll events (for internal use only) */