update examples

CHANGELOG.md

@@ -1,3 +1,12 @@
+# [2.12.0](https://github.com/theKashey/react-focus-lock/compare/v2.11.3...v2.12.0) (2024-04-20)
+
+
+### Bug Fixes
+
+* remove conflicting type ([7245bde](https://github.com/theKashey/react-focus-lock/commit/7245bde25148562462986feb15ab106a2f9f0202))
+
+
+
 ## [2.11.3](https://github.com/theKashey/react-focus-lock/compare/v2.11.2...v2.11.3) (2024-04-13)
 
 

_tests/keep-focus.spec.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import {
+  render, screen,
+} from '@testing-library/react';
+import { expect } from 'chai';
+import FocusLock from '../src';
+
+describe('Focus restoration', () => {
+  it('maintains focus on element removal', async () => {
+    render(
+      <FocusLock>
+        <button type="button">test</button>
+      </FocusLock>,
+    );
+    //
+    expect(document.activeElement).to.be.equal(screen.getByRole('button'));
+  });
+
+  it.todo('selects closes element to restore focus');
+});

stories/Iframe.js

@@ -1,74 +1,117 @@
-import * as React from "react";
-import { Component } from "react";
-import FocusLock from "../src/index";
+import * as React from 'react';
+import { Component } from 'react';
+import FocusLock from '../src/index';
 
 const styles = {
-  fontFamily: "sans-serif",
-  textAlign: "center",
-  fontSize: "16px"
+  fontFamily: 'sans-serif',
+  textAlign: 'center',
+  fontSize: '16px',
 };
 
 const bg = {
-  backgroundColor: '#FEE'
+  backgroundColor: '#FEE',
 };
 
 class Trap extends Component {
   state = {
-    disabled: true
+    disabled: true,
   }
 
-  toggle = () => this.setState({disabled: !this.state.disabled});
+  toggle = () => this.setState({ disabled: !this.state.disabled });
 
   render() {
-    const {disabled} = this.state;
+    const { disabled } = this.state;
     return (
-      <FocusLock disabled={this.state.disabled}>
-        {disabled && <div>
-          ! this is a <b>real trap</b>.<br/>
-          We will steal your focus ! <br /><br />
+      <FocusLock disabled={this.state.disabled} crossFrame={false}>
+        {disabled && (
+        <div>
+          ! this is a
+          {' '}
+          <b>real trap</b>
+          .
+          <br />
+          We will steal your focus !
+          {' '}
+          <br />
+          <br />
           <button onClick={this.toggle}>!ACTIVATE THE TRAP!</button>
           <br />
           <br />
         </div>
+        )
         }
-        You will cycle over this. Never leaving <br/>
-        <input placeholder="input1"/>
-          {this.props.children}
-        <input placeholder="input2"/>
+        You will cycle over this. Never leaving
+        {' '}
+        <br />
+        <input placeholder="input1" />
+        {this.props.children}
+        <input placeholder="input2" />
 
-        { !disabled && <div>
-          <br /><br />PRESS this to end the trial.<br/><br/>
+        { !disabled && (
+        <div>
+          <br />
+          <br />
+          PRESS this to end the trial.
+          <br />
+          <br />
           <button onClick={this.toggle}>ESCAPE!!!</button>
-          <br/>
+          <br />
           All your focus belongs to us!
-        </div>}
+        </div>
+        )}
       </FocusLock>
-    )
+    );
   }
 }
 
-export const IFrame = (props) =>
+export const IFrame = props => (
   <div style={styles}>
-    <input placeholder="input1"/>
-    <div style={bg}> Inaccessible <a href='#'>Link</a> outside</div>
+    <input placeholder="input1" />
+    <div style={bg}>
+      {' '}
+      Inaccessible
+      <a href="#">Link</a>
+      {' '}
+      outside
+    </div>
     <Trap {...props}>
-        <iframe src={`/iframe.html?id=focus-lock--codesandbox-example&crossFrame=${props.crossFrame}`} style={{width:'100%', height: '400px'}}/>
+      <iframe src={`/iframe.html?id=focus-lock--codesandbox-example&crossFrame=${props.crossFrame}`} style={{ width: '100%', height: '400px' }} />
     </Trap>
-    <div style={bg}> Inaccessible <a href='#'>Link</a> outside</div>
-    <input placeholder="input1"/>
-  </div>;
+    <div style={bg}>
+      {' '}
+      Inaccessible
+      <a href="#">Link</a>
+      {' '}
+      outside
+    </div>
+    <input placeholder="input1" />
+  </div>
+);
 
-export const SandboxedIFrame = (props) =>
-    <div style={styles}>
-        <input placeholder="input1"/>
-        <div style={bg}> Inaccessible <a href='#'>Link</a> outside</div>
-        <Trap {...props} >
-            <iframe
-                title="test-iframe"
-                src="https://chekrd.github.io/custom-element/index.html"
-                sandbox="allow-forms allow-modals allow-popups allow-same-origin allow-scripts allow-downloads allow-storage-access-by-user-activation"
-            />
-        </Trap>
-        <div style={bg}> Inaccessible <a href='#'>Link</a> outside</div>
-        <input placeholder="input1"/>
-    </div>;
+export const SandboxedIFrame = props => (
+  <div style={styles}>
+    <input placeholder="input1" />
+    <div style={bg}>
+      {' '}
+      Inaccessible
+      <a href="#">Link</a>
+      {' '}
+      outside
+    </div>
+    <Trap {...props}>
+      <iframe
+        title="test-iframe"
+        src="https://chekrd.github.io/custom-element/index.html"
+        sandbox="allow-forms allow-modals allow-popups allow-same-origin allow-scripts allow-downloads allow-storage-access-by-user-activation"
+      />
+    </Trap>
+    <div style={bg}>
+      {' '}
+      Inaccessible
+      <a href="#">Link</a>
+      {' '}
+      outside
+    </div>
+    <input placeholder="input1" />
+  </div>
+);