react-tray - npm Package Compare versions

Comparing version 0.3.0 to 1.0.0

lib/components/__tests__/Tray-test.js

		@@ -104,2 +104,47 @@ 'use strict';
		});

		describe('maintainFocus prop', function () {
		this.timeout(0);
		beforeEach(function (done) {
		var props = { isOpen: true, onBlur: function onBlur() {}, closeTimeoutMS: 0, maintainFocus: true };
		var children = _react2['default'].createElement(
		'div',
		null,
		_react2['default'].createElement(
		'a',
		{ href: '#', id: 'one' },
		'One'
		),
		_react2['default'].createElement(
		'a',
		{ href: '#', id: 'two' },
		'Two'
		),
		_react2['default'].createElement(
		'a',
		{ href: '#', id: 'three' },
		'Three'
		)
		);
		renderTray(props, children, function () {
		return done();
		});
		});

		it('sends focus to the first item if tabbing away from the last element', function () {
		var firstItem = document.querySelector('#one');
		var lastItem = document.querySelector('#three');
		lastItem.focus();
		_reactAddonsTestUtils2['default'].Simulate.keyDown(document.querySelector('.ReactTray__Content'), { keyCode: 9 });
		(0, _assert.equal)(document.activeElement, firstItem);
		});

		it('sends focus to the last item if shift + tabbing from the first item', function () {
		var firstItem = document.querySelector('#one');
		var lastItem = document.querySelector('#three');
		firstItem.focus();
		_reactAddonsTestUtils2['default'].Simulate.keyDown(document.querySelector('.ReactTray__Content'), { keyCode: 9, shiftKey: true });
		(0, _assert.equal)(document.activeElement, lastItem);
		});
		});
		});

lib/components/Tray.js

		@@ -30,3 +30,4 @@ 'use strict';
		closeTimeoutMS: _react2['default'].PropTypes.number,
		closeOnBlur: _react2['default'].PropTypes.bool
		closeOnBlur: _react2['default'].PropTypes.bool,
		maintainFocus: _react2['default'].PropTypes.bool
		},
		@@ -38,3 +39,4 @@
		closeTimeoutMS: 0,
		closeOnBlur: true
		closeOnBlur: true,
		maintainFocus: false
		};
		@@ -41,0 +43,0 @@ },

lib/components/TrayPortal.js

		@@ -25,2 +25,6 @@ 'use strict';

		var _helpersTabbable = require('../helpers/tabbable');

		var _helpersTabbable2 = _interopRequireDefault(_helpersTabbable);

		var styles = {
		@@ -78,3 +82,4 @@ overlay: {
		closeTimeoutMS: _react.PropTypes.number,
		children: _react.PropTypes.any
		children: _react.PropTypes.any,
		maintainFocus: _react.PropTypes.bool
		},
		@@ -132,2 +137,11 @@

		// Keep focus inside the tray if maintainFocus is true
		if (e.keyCode === 9 && this.props.maintainFocus && (0, _helpersIsLeavingNode2['default'])(this.refs.content, e)) {
		e.preventDefault();
		var tabbable = (0, _helpersTabbable2['default'])(this.refs.content);
		var target = tabbable[e.shiftKey ? tabbable.length - 1 : 0];
		target.focus();
		return;
		}

		// Treat tabbing away from content as blur/close if closeOnBlur
		@@ -134,0 +148,0 @@ if (e.keyCode === 9 && this.props.closeOnBlur && (0, _helpersIsLeavingNode2['default'])(this.refs.content, e)) {

package.json

		{
		"name": "react-tray",
		"version": "0.3.0",
		"version": "1.0.0",
		"description": "An accessible tray component useful for navigation menus",
		@@ -5,0 +5,0 @@ "main": "lib/main.js",

New alerts