bright-components 10.2.5 → 10.2.7

package/dist/components/Modal/index.js

@@ -19,6 +19,8 @@ var _vars = _interopRequireDefault(require("../../constants/vars"));
 
 var _colors = _interopRequireDefault(require("../../constants/colors"));
 
+var _reactAutobind = _interopRequireDefault(require("react-autobind"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -77,6 +79,14 @@ ModalContainer.displayName = 'ModalContainer';
 Background.displayName = 'Background';
 
 class Modal extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      createdElement: null
+    };
+    (0, _reactAutobind.default)(this);
+  }
+
   componentDidMount() {
     /* istanbul ignore next */
     if (this.props.version === '1') {
@@ -85,10 +95,18 @@ class Modal extends _react.default.Component {
     }
 
     document.body.style.overflow = 'hidden';
+    const randomId = Math.random().toString();
+    const wrapperElement = document.createElement('div');
+    wrapperElement.setAttribute('id', `modal${randomId}`);
+    document.body.appendChild(wrapperElement);
+    this.setState({
+      createdElement: wrapperElement
+    });
   }
 
   componentWillUnmount() {
     document.body.style.overflow = 'auto';
+    this.state.createdElement.parentNode.removeChild(this.state.createdElement);
   }
 
   render() {
@@ -111,6 +129,10 @@ class Modal extends _react.default.Component {
       }
     };
 
+    if (!this.state.createdElement) {
+      return null;
+    }
+
     return (0, _reactDom.createPortal)(_react.default.createElement(Background, _extends({
       onClick: dismiss,
       version: version
@@ -132,7 +154,7 @@ class Modal extends _react.default.Component {
       return _react.default.cloneElement(child, {
         close
       });
-    }))), document.body);
+    }))), this.state.createdElement);
   }
 
 }

package/dist/components/Snackbar/index.js

@@ -124,6 +124,9 @@ const delays = {
 class Snackbar extends _react.default.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      createdElement: null
+    };
     (0, _reactAutobind.default)(this);
     this.timer = null;
   }
@@ -132,6 +135,14 @@ class Snackbar extends _react.default.Component {
     if (this.props.visible) {
       this.hideAfterDelay();
     }
+
+    const randomId = Math.random().toString();
+    const wrapperElement = document.createElement('div');
+    wrapperElement.setAttribute('id', `modal${randomId}`);
+    document.body.appendChild(wrapperElement);
+    this.setState({
+      createdElement: wrapperElement
+    });
   }
 
   componentDidUpdate(prevProps) {
@@ -141,6 +152,7 @@ class Snackbar extends _react.default.Component {
   }
 
   componentWillUnmount() {
+    this.state.createdElement.parentNode.removeChild(this.state.createdElement);
     window.clearTimeout(this.timer);
   }
 
@@ -172,6 +184,10 @@ class Snackbar extends _react.default.Component {
     } = _this$props,
           rest = _objectWithoutProperties(_this$props, ["visible", "children", "onClose", "hideClose", "action", "onAction", "displayTime", "type"]);
 
+    if (!this.state.createdElement) {
+      return null;
+    }
+
     return (0, _reactDom.createPortal)(_react.default.createElement(SlideUpLeft, _extends({
       visible: visible
     }, rest), _react.default.createElement(SnackWrapper, {
@@ -188,7 +204,7 @@ class Snackbar extends _react.default.Component {
     }, action), displayTime === 'persistent' && _react.default.createElement(ToastOutlineButton, {
       type: type,
       onClick: onClose
-    }, "Dismiss")))))), document.body);
+    }, "Dismiss")))))), this.state.createdElement);
   }
 
 }

package/dist/components/Typeahead/index.js

@@ -171,7 +171,7 @@ class Typeahead extends _react.default.Component {
     let nextIndex = highlightIndex;
     const isActionKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape', 'Tab'].includes(e.key);
 
-    if (!isActionKey) {
+    if (!isActionKey || !this.options[highlightIndex]) {
       return;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bright-components",
-	"version": "10.2.5",
+	"version": "10.2.7",
 	"private": false,
 	"main": "./dist",
 	"repository": {

package/src/components/Modal/index.js

@@ -6,6 +6,7 @@ import get from 'lodash.get';
 import spacing from 'constants/spacing';
 import vars from 'constants/vars';
 import colors from 'constants/colors';
+import autobind from 'react-autobind';
 
 const MODAL_WIDTHS = vars.modalWidths;
 
@@ -59,6 +60,12 @@ ModalContainer.displayName = 'ModalContainer';
 Background.displayName = 'Background';
 
 class Modal extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = { createdElement: null };
+		autobind(this);
+	}
+
 	componentDidMount() {
 		/* istanbul ignore next */
 		if (this.props.version === '1') {
@@ -67,10 +74,20 @@ class Modal extends React.Component {
 		}
 
 		document.body.style.overflow = 'hidden';
+
+		const randomId = Math.random().toString();
+		const wrapperElement = document.createElement('div');
+		wrapperElement.setAttribute('id', `modal${randomId}`);
+		document.body.appendChild(wrapperElement);
+		this.setState({ createdElement: wrapperElement });
 	}
 
 	componentWillUnmount() {
 		document.body.style.overflow = 'auto';
+
+		this.state.createdElement.parentNode.removeChild(
+			this.state.createdElement
+		);
 	}
 
 	render() {
@@ -91,6 +108,10 @@ class Modal extends React.Component {
 			}
 		};
 
+		if (!this.state.createdElement) {
+			return null;
+		}
+
 		return createPortal(
 			<Background
 				onClick={dismiss}
@@ -117,7 +138,7 @@ class Modal extends React.Component {
 					})}
 				</ModalContainer>
 			</Background>,
-			document.body
+			this.state.createdElement
 		);
 	}
 }

package/src/components/Snackbar/index.js

@@ -114,6 +114,7 @@ const delays = {
 class Snackbar extends React.Component {
 	constructor(props) {
 		super(props);
+		this.state = { createdElement: null };
 		autobind(this);
 
 		this.timer = null;
@@ -123,6 +124,12 @@ class Snackbar extends React.Component {
 		if (this.props.visible) {
 			this.hideAfterDelay();
 		}
+
+		const randomId = Math.random().toString();
+		const wrapperElement = document.createElement('div');
+		wrapperElement.setAttribute('id', `modal${randomId}`);
+		document.body.appendChild(wrapperElement);
+		this.setState({ createdElement: wrapperElement });
 	}
 
 	componentDidUpdate(prevProps) {
@@ -132,6 +139,10 @@ class Snackbar extends React.Component {
 	}
 
 	componentWillUnmount() {
+		this.state.createdElement.parentNode.removeChild(
+			this.state.createdElement
+		);
+
 		window.clearTimeout(this.timer);
 	}
 
@@ -159,6 +170,10 @@ class Snackbar extends React.Component {
 			...rest
 		} = this.props;
 
+		if (!this.state.createdElement) {
+			return null;
+		}
+
 		return createPortal(
 			<SlideUpLeft visible={visible} {...rest}>
 				<SnackWrapper type={type} data-testid="snackwrapper">
@@ -190,7 +205,7 @@ class Snackbar extends React.Component {
 					</ContentWrapper>
 				</SnackWrapper>
 			</SlideUpLeft>,
-			document.body
+			this.state.createdElement
 		);
 	}
 }

package/src/components/Typeahead/index.js

@@ -144,7 +144,7 @@ class Typeahead extends React.Component {
 			'Tab'
 		].includes(e.key);
 
-		if (!isActionKey) {
+		if (!isActionKey || !this.options[highlightIndex]) {
 			return;
 		}
 

package/src/components/Typeahead/test.js

@@ -228,6 +228,13 @@ describe('<Typeahead />', () => {
 			[firstOption, secondOption] = wrapper.getAllByRole('listitem');
 			expect(firstOption).not.toHaveStyleRule('background', '#D0EBFD');
 			expect(secondOption).toHaveStyleRule('background', '#D0EBFD');
+
+			fireEvent.keyDown(input, { key: 'ArrowUp' });
+			fireEvent.keyDown(input, { key: 'ArrowUp' });
+			fireEvent.keyDown(input, { key: 'ArrowUp' });
+
+			expect(firstOption).toHaveStyleRule('background', '#D0EBFD');
+			expect(secondOption).not.toHaveStyleRule('background', '#D0EBFD');
 		});
 
 		it('should highlight a new option on the up arrow key', () => {
@@ -284,5 +291,16 @@ describe('<Typeahead />', () => {
 
 			expect(scrollIntoView).not.toHaveBeenCalled();
 		});
+
+		it('should handle live updates to the list changing the length of the list', () => {
+			const input = wrapper.getByPlaceholderText('Search or select');
+
+			fireEvent.focus(input);
+
+			wrapper.rerender(<Typeahead {...props} options={[]} />);
+			fireEvent.keyDown(input, { key: 'Enter' });
+
+			expect(setSelected).toHaveBeenCalledTimes(0);
+		});
 	});
 });