focus-trap-react 3.1.0 → 3.1.4

package/index.js

@@ -1,95 +0,0 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const createFocusTrap = require('focus-trap');
-
-const checkedProps = {
-  active: PropTypes.bool.isRequired,
-  paused: PropTypes.bool.isRequired,
-  tag: PropTypes.string.isRequired,
-  focusTrapOptions: PropTypes.object.isRequired,
-};
-
-class FocusTrap extends React.Component {
-  componentWillMount() {
-    if (typeof document !== 'undefined') {
-      this.previouslyFocusedElement = document.activeElement;
-    }
-  }
-
-  componentDidMount() {
-    // We need to hijack the returnFocusOnDeactivate option,
-    // because React can move focus into the element before we arrived at
-    // this lifecycle hook (e.g. with autoFocus inputs). So the component
-    // captures the previouslyFocusedElement in componentWillMount,
-    // then (optionally) returns focus to it in componentWillUnmount.
-    const specifiedFocusTrapOptions = this.props.focusTrapOptions;
-    const tailoredFocusTrapOptions = {
-      returnFocusOnDeactivate: false,
-    };
-    for (const optionName in specifiedFocusTrapOptions) {
-      if (!specifiedFocusTrapOptions.hasOwnProperty(optionName)) continue;
-      if (optionName === 'returnFocusOnDeactivate') continue;
-      tailoredFocusTrapOptions[optionName] = specifiedFocusTrapOptions[optionName];
-    }
-
-    this.focusTrap = createFocusTrap(this.node, tailoredFocusTrapOptions);
-    if (this.props.active) {
-      this.focusTrap.activate();
-    }
-    if (this.props.paused) {
-      this.focusTrap.pause();
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.active && !this.props.active) {
-      this.focusTrap.deactivate();
-    } else if (!prevProps.active && this.props.active) {
-      this.focusTrap.activate();
-    }
-
-    if (prevProps.paused && !this.props.paused) {
-      this.focusTrap.unpause();
-    } else if (!prevProps.paused && this.props.paused) {
-      this.focusTrap.pause();
-    }
-  }
-
-  componentWillUnmount() {
-    this.focusTrap.deactivate();
-    if (this.props.focusTrapOptions.returnFocusOnDeactivate !== false && this.previouslyFocusedElement) {
-      this.previouslyFocusedElement.focus();
-    }
-  }
-
-  render() {
-    const props = this.props;
-
-    const elementProps = {
-      ref: function(el) {
-        this.node = el;
-      }.bind(this),
-    };
-
-    // This will get id, className, style, etc. -- arbitrary element props
-    for (const prop in props) {
-      if (!props.hasOwnProperty(prop)) continue;
-      if (checkedProps[prop]) continue;
-      elementProps[prop] = props[prop];
-    }
-
-    return React.createElement(this.props.tag, elementProps, this.props.children);
-  }
-
-}
-
-FocusTrap.propTypes = checkedProps;
-
-FocusTrap.defaultProps = {
-  active: true,
-  tag: 'div',
-  paused: false,
-  focusTrapOptions: {},
-};
-
-module.exports = FocusTrap;

package/test/activation.test.js

@@ -1,145 +0,0 @@
-const React = require('react');
-const ReactDOM = require('react-dom');
-const TestUtils = require('react-dom/test-utils');
-const FocusTrap = require('../dist/focus-trap-react');
-
-describe('activation', () => {
-  let domContainer;
-  const mockFocusTrap = {
-    activate: jest.fn(),
-    deactivate: jest.fn(),
-    pause: jest.fn()
-  };
-  let mockCreateFocusTrap;
-
-  beforeEach(() => {
-    mockCreateFocusTrap = jest.fn(() => mockFocusTrap);
-    domContainer = document.createElement('div');
-    document.body.appendChild(domContainer);
-  });
-
-  afterEach(() => {
-    ReactDOM.unmountComponentAtNode(domContainer);
-    document.body.removeChild(domContainer);
-  });
-
-  test('default activation', () => {
-    const trap = ReactDOM.render(
-      <FocusTrap
-        _createFocusTrap={mockCreateFocusTrap}
-        focusTrapOptions={{ onDeactivate: noop }}
-      >
-        <button>
-          something special
-        </button>
-      </FocusTrap>,
-      domContainer
-    );
-
-    expect(mockCreateFocusTrap).toHaveBeenCalledTimes(1);
-    expect(mockCreateFocusTrap).toHaveBeenCalledWith(
-      ReactDOM.findDOMNode(trap),
-      {
-        onDeactivate: noop,
-        returnFocusOnDeactivate: false
-      }
-    );
-  });
-
-  test('activation with initialFocus as selector', () => {
-    const trap = ReactDOM.render(
-      <FocusTrap
-        _createFocusTrap={mockCreateFocusTrap}
-        focusTrapOptions={{
-          onDeactivate: noop,
-          initialFocus: '#initial-focusee'
-        }}
-      >
-        <button>
-          something special
-        </button>
-        <button id="initial-focusee">
-          another thing
-        </button>
-      </FocusTrap>,
-      domContainer
-    );
-
-    expect(mockCreateFocusTrap).toHaveBeenCalledTimes(1);
-    expect(mockCreateFocusTrap).toHaveBeenCalledWith(
-      ReactDOM.findDOMNode(trap),
-      {
-        onDeactivate: noop,
-        initialFocus: '#initial-focusee',
-        returnFocusOnDeactivate: false
-      }
-    );
-  });
-
-  test('mounting without activation', () => {
-    ReactDOM.render(
-      <FocusTrap
-        _createFocusTrap={mockCreateFocusTrap}
-        focusTrapOptions={{ onDeactivate: noop }}
-        active={false}
-      >
-        <button>
-          something special
-        </button>
-      </FocusTrap>,
-      domContainer
-    );
-    expect(mockCreateFocusTrap).toHaveBeenCalledTimes(1);
-    expect(mockFocusTrap.activate).toHaveBeenCalledTimes(0);
-  });
-
-  test('mounting without activation then activating', () => {
-    class TestZone extends React.Component {
-      state = {
-        trapActive: false
-      };
-
-      activateTrap = () => {
-        this.setState({ trapActive: true });
-      };
-
-      render() {
-        return (
-          <div>
-            <button ref="trigger" onClick={this.activateTrap}>
-              activate
-            </button>
-            <FocusTrap
-              _createFocusTrap={mockCreateFocusTrap}
-              ref="trap"
-              focusTrapOptions={{ onDeactivate: noop }}
-              active={this.state.trapActive}
-            >
-              <button>
-                something special
-              </button>
-            </FocusTrap>
-          </div>
-        );
-      }
-    }
-
-    const zone = ReactDOM.render(<TestZone />, domContainer);
-
-    expect(mockCreateFocusTrap).toHaveBeenCalledTimes(1);
-    expect(mockCreateFocusTrap).toHaveBeenCalledWith(
-      ReactDOM.findDOMNode(zone.refs.trap),
-      {
-        onDeactivate: noop,
-        returnFocusOnDeactivate: false
-      }
-    );
-    expect(mockFocusTrap.activate).toHaveBeenCalledTimes(0);
-
-    TestUtils.Simulate.click(ReactDOM.findDOMNode(zone.refs.trigger));
-
-    expect(mockFocusTrap.activate).toHaveBeenCalledTimes(1);
-  });
-});
-
-function noop() {}

package/test/deactivation.test.js

@@ -1,103 +0,0 @@
-const React = require('react');
-const ReactDOM = require('react-dom');
-const TestUtils = require('react-dom/test-utils');
-const FocusTrap = require('../dist/focus-trap-react');
-
-describe('deactivation', () => {
-  let domContainer;
-  const mockFocusTrap = {
-    activate: jest.fn(),
-    deactivate: jest.fn(),
-    pause: jest.fn()
-  };
-  let mockCreateFocusTrap;
-
-  beforeEach(() => {
-    mockCreateFocusTrap = jest.fn(() => mockFocusTrap);
-    domContainer = document.createElement('div');
-    document.body.appendChild(domContainer);
-  });
-
-  afterEach(() => {
-    ReactDOM.unmountComponentAtNode(domContainer);
-    document.body.removeChild(domContainer);
-  });
-
-  test('deactivation', () => {
-    class TestZone extends React.Component {
-      state = {
-        trapActive: true
-      };
-
-      deactivateTrap = () => {
-        this.setState({ trapActive: false });
-      };
-
-      render() {
-        return (
-          <div>
-            <button ref="trigger" onClick={this.deactivateTrap}>
-              deactivate
-            </button>
-            <FocusTrap
-              ref="trap"
-              _createFocusTrap={mockCreateFocusTrap}
-              active={this.state.trapActive}
-            >
-              <button>
-                something special
-              </button>
-            </FocusTrap>
-          </div>
-        );
-      }
-    }
-
-    const zone = ReactDOM.render(<TestZone />, domContainer);
-
-    expect(mockFocusTrap.deactivate).toHaveBeenCalledTimes(0);
-
-    TestUtils.Simulate.click(ReactDOM.findDOMNode(zone.refs.trigger));
-
-    expect(mockFocusTrap.deactivate).toHaveBeenCalledTimes(1);
-  });
-
-  test('deactivation by dismount', () => {
-    class TestZone extends React.Component {
-      state = {
-        trapActive: true
-      };
-
-      deactivateTrap = () => {
-        this.setState({ trapActive: false });
-      };
-
-      render() {
-        const trap = this.state.trapActive
-          ? <FocusTrap _createFocusTrap={mockCreateFocusTrap} ref="trap">
-              <button>
-                something special
-              </button>
-            </FocusTrap>
-          : false;
-
-        return (
-          <div>
-            <button ref="trigger" onClick={this.deactivateTrap}>
-              deactivate
-            </button>
-            {trap}
-          </div>
-        );
-      }
-    }
-
-    const zone = ReactDOM.render(<TestZone />, domContainer);
-
-    expect(mockFocusTrap.deactivate).toHaveBeenCalledTimes(0);
-
-    TestUtils.Simulate.click(ReactDOM.findDOMNode(zone.refs.trigger));
-
-    expect(mockFocusTrap.deactivate).toHaveBeenCalledTimes(1);
-  });
-});

package/test/dom.test.js

@@ -1,67 +0,0 @@
-const React = require('react');
-const ReactDOM = require('react-dom');
-const TestUtils = require('react-dom/test-utils');
-const FocusTrap = require('../dist/focus-trap-react');
-
-describe('dom', () => {
-  let domContainer;
-  const mockFocusTrap = {
-    activate: jest.fn(),
-    deactivate: jest.fn(),
-    pause: jest.fn()
-  };
-  let mockCreateFocusTrap;
-
-  beforeEach(() => {
-    mockCreateFocusTrap = jest.fn(() => mockFocusTrap);
-    domContainer = document.createElement('div');
-    document.body.appendChild(domContainer);
-  });
-
-  afterEach(() => {
-    ReactDOM.unmountComponentAtNode(domContainer);
-    document.body.removeChild(domContainer);
-  });
-
-  test('DOM with only required props', () => {
-    const trap = TestUtils.renderIntoDocument(
-      <FocusTrap _createFocusTrap={mockCreateFocusTrap}>
-        <button>
-          something special
-        </button>
-      </FocusTrap>
-    );
-    const trapNode = ReactDOM.findDOMNode(trap);
-
-    expect(trapNode.tagName).toBe('DIV');
-    expect(trapNode.getAttribute('id')).toBe(null);
-    expect(trapNode.getAttribute('class')).toBe(null);
-    expect(trapNode.getAttribute('style')).toBe(null);
-    expect(trapNode.children.length).toBe(1);
-    expect(trapNode.firstChild.tagName).toBe('BUTTON');
-    expect(trapNode.firstChild.innerHTML).toBe('something special');
-  });
-
-  test('DOM with all possible DOM-related props', () => {
-    const trap = TestUtils.renderIntoDocument(
-      <FocusTrap
-        _createFocusTrap={mockCreateFocusTrap}
-        id="foo"
-        className="bar"
-        tag="figure"
-      >
-        <button>
-          something special
-        </button>
-      </FocusTrap>
-    );
-    const trapNode = ReactDOM.findDOMNode(trap);
-
-    expect(trapNode.tagName).toBe('FIGURE');
-    expect(trapNode.getAttribute('id')).toBe('foo');
-    expect(trapNode.getAttribute('class')).toBe('bar');
-    expect(trapNode.children.length).toBe(1);
-    expect(trapNode.firstChild.tagName).toBe('BUTTON');
-    expect(trapNode.firstChild.innerHTML).toBe('something special');
-  });
-});

package/test/jest-setup.js

@@ -1,3 +0,0 @@
-global.requestAnimationFrame = function(callback) {
-  setTimeout(callback, 0);
-};