Add explicit crossFrame support for ReactFocusLock

README.md

@@ -56,6 +56,7 @@ import {FocusOn} from 'react-focus-on';
  - `[autoFocus=true]` - enables or disables `auto focus` management (see [react-focus-lock documentation](https://github.com/theKashey/react-focus-lock))
  - `[returnFocus=true]` - enables or disables `return focus` on lock deactivation (see [react-focus-lock documentation](https://github.com/theKashey/react-focus-lock))
  - `[whiteList=fn]` - you could whitelist locations FocusLock should carry about. Everything outside it will ignore. For example - any modals (see [react-focus-lock documentation](https://github.com/theKashey/react-focus-lock))
+ - `[crossFrame=true]` - enables or disables cross frame focus trapping. Setting this to false allows focus to move outside iframes (see [react-focus-lock issue](https://github.com/theKashey/react-focus-lock/issues/104))
 ---
  - `[gapMode]` - the way removed ScrollBar would be _compensated_ - margin(default), or padding. See [scroll-locky documentation](https://github.com/theKashey/react-scroll-locky#gap-modes) to find the one you need.
  - `[noIsolation]` - disables aria-hidden isolation

src/UI.tsx

@@ -15,6 +15,7 @@ export const FocusOn = React.forwardRef<HTMLElement, ReactFocusOnSideProps>(
       children,
       autoFocus,
       shards,
+      crossFrame,
       enabled = true,
       scrollLock = true,
       focusLock = true,
@@ -61,6 +62,7 @@ export const FocusOn = React.forwardRef<HTMLElement, ReactFocusOnSideProps>(
           returnFocus={returnFocus}
           autoFocus={autoFocus}
           shards={shards}
+          crossFrame={crossFrame}
           onActivation={onActivation}
           onDeactivation={onDeactivation}
           className={className}

src/types.ts

@@ -94,6 +94,11 @@ export interface ReactFocusOnProps extends CommonProps {
    * @default false
    */
   preventScrollOnFocus?: boolean | undefined;
+  /**
+   * [focus-lock] enables aggressive focus capturing within iframes
+   * @default true
+   */
+  crossFrame?: boolean | undefined;
   /**
    * [focus-lock] allows "ignoring" focus on some elements
    * @see {@link https://github.com/theKashey/react-focus-lock#api}