.babelrc

@@ -1,8 +1,15 @@
 {
-  "ignore": ["node-modules/**", "src/__tests__"],
   "presets": [
     ["es2015"],
     "stage-2",
     "react",
   ],
+	"env": {
+		"production": {
+			"ignore": ["node-modules/**", "src/__tests__/**"],
+		},
+		"test": {
+			"ignore": ["node-modules/**"],
+		}
+	}
 }

.eslintignore

@@ -1,4 +1,4 @@
 lib/*
 dist/*
-example/dist/*
+examples/dist/*
 node_modules/*

.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
-  extends: 'keystone-react',
-  parser: 'babel-eslint',
+	extends: 'keystone-react',
+	parser: 'babel-eslint',
 };

HISTORY.md

@@ -1,4 +1,31 @@
 # react-input-autosize
+## v2.2.2 / 2019-01-10
+* added UNSAFE prefix to out of date react lifecycle hooks. thanks [RanneyD](https://github.com/ranneyd)
+
+## v2.2.1 / 2018-01-10
+
+* fixed; invalid logic in SSR support check, thanks [Rakha Kanz Kautsar](https://github.com/rkkautsar)
+
+## v2.2.0 / 2018-01-09
+
+* added; `extraWidth` prop allows you to customise how much width is added to the detected width
+* fixed; SSR support is more robust, thanks [Ivo Bathke](https://github.com/ivoba)
+
+## v2.1.2 / 2017-11-27
+
+* fixed; `window` reference is now guarded for SSR support, thanks [Wout Mertens](https://github.com/wmertens)
+
+## v2.1.1 / 2017-11-26
+
+* fixed; `props.id` was overriding the internal `inputId` on the input element, but not being used in the stylesheet
+* fixed; IE stylesheet is now only injected when IE is detected in navigator.userAgent
+
+## v2.1.0 / 2017-11-23
+
+* fixed; inputId wasn't being applied correctly, thanks [Jacco Flenter](https://github.com/flenter)
+* added; new `injectStyles` prop controls whether the IE stylesheet it injected
+* improved; allow override of `boxSizing` and `width` styles via `inputStyles`, thanks [Mike Fanger](https://github.com/mvf4z7)
+* improved; propTypes are now stripped from the production build, thanks [jochenberger](https://github.com/jochenberger)
 
 ## v2.0.1 / 2017-09-13
 

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2017 Jed Watson
+Copyright (c) 2018 Jed Watson
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -48,6 +48,20 @@ import AutosizeInput from 'react-input-autosize';
 
 ## Gotchas
 
+### Changing the styles at runtime
+The styles applied to the input are only copied when the component mounts. Because of this, subsequent changes to the stylesheet may cause size to be detected incorrectly.
+
+To work around this, either re-mount the input (e.g. by providing a different `key` prop) or call the `copyInputStyles()` method after the styles change.
+
+### CSP and the IE "clear" indicator
+The input will automatically inject a stylesheet that hides IE/Edge's "clear" indicator, which otherwise breaks the UI. This has the downside of being incompatible with some CSP policies.
+
+To work around this, you can pass the `injectStyles={false}` prop, but if you do this I *strongly* recommend targeting the `input` element in your own stylesheet with the following rule:
+
+```css
+input::-ms-clear {display: none;}
+```
+
 ### Custom font sizes
 If your input uses custom font sizes, you will need to provide the custom size to `AutosizeInput`.
 
@@ -67,4 +81,4 @@ If your input uses custom font sizes, you will need to provide the custom size t
 
 ## License
 
-Copyright (c) 2017 Jed Watson. [MIT](LICENSE) License.
+Copyright (c) 2018 Jed Watson. [MIT](LICENSE) License.

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "react-input-autosize",
   "main": "dist/react-input-autosize.js",
-  "version": "2.0.1",
+  "version": "2.2.1",
   "homepage": "https://github.com/JedWatson/react-input-autosize",
   "authors": [
     "Jed Watson"

dist/react-input-autosize.es.js

@@ -218,6 +218,32 @@ var sizerStyle = {
 	whiteSpace: 'pre'
 };
 
+var INPUT_PROPS_BLACKLIST = ['extraWidth', 'injectStyles', 'inputClassName', 'inputRef', 'inputStyle', 'minWidth', 'onAutosize', 'placeholderIsMinWidth'];
+
+var cleanInputProps = function cleanInputProps(inputProps) {
+	INPUT_PROPS_BLACKLIST.forEach(function (field) {
+		return delete inputProps[field];
+	});
+	return inputProps;
+};
+
+var copyStyles = function copyStyles(styles, node) {
+	node.style.fontSize = styles.fontSize;
+	node.style.fontFamily = styles.fontFamily;
+	node.style.fontWeight = styles.fontWeight;
+	node.style.fontStyle = styles.fontStyle;
+	node.style.letterSpacing = styles.letterSpacing;
+	node.style.textTransform = styles.textTransform;
+};
+
+var isIE = typeof window !== 'undefined' && window.navigator ? /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent) : false;
+
+var generateId = function generateId() {
+	// we only need an auto-generated ID for stylesheet injection, which is only
+	// used for IE. so if the browser is not IE, this should return undefined.
+	return isIE ? '_' + Math.random().toString(36).substr(2, 12) : undefined;
+};
+
 var AutosizeInput = function (_Component) {
 	inherits(AutosizeInput, _Component);
 
@@ -243,7 +269,7 @@ var AutosizeInput = function (_Component) {
 
 		_this.state = {
 			inputWidth: props.minWidth,
-			inputId: '_' + Math.random().toString(36).substr(2, 12)
+			inputId: props.id || generateId()
 		};
 		return _this;
 	}
@@ -255,6 +281,15 @@ var AutosizeInput = function (_Component) {
 			this.copyInputStyles();
 			this.updateInputWidth();
 		}
+	}, {
+		key: 'UNSAFE_componentWillReceiveProps',
+		value: function UNSAFE_componentWillReceiveProps(nextProps) {
+			var id = nextProps.id;
+
+			if (id !== this.props.id) {
+				this.setState({ inputId: id || generateId() });
+			}
+		}
 	}, {
 		key: 'componentDidUpdate',
 		value: function componentDidUpdate(prevProps, prevState) {
@@ -276,25 +311,13 @@ var AutosizeInput = function (_Component) {
 			if (!this.mounted || !window.getComputedStyle) {
 				return;
 			}
-			var inputStyle = this.input && window.getComputedStyle(this.input);
-			if (!inputStyle) {
+			var inputStyles = this.input && window.getComputedStyle(this.input);
+			if (!inputStyles) {
 				return;
 			}
-			var widthNode = this.sizer;
-			widthNode.style.fontSize = inputStyle.fontSize;
-			widthNode.style.fontFamily = inputStyle.fontFamily;
-			widthNode.style.fontWeight = inputStyle.fontWeight;
-			widthNode.style.fontStyle = inputStyle.fontStyle;
-			widthNode.style.letterSpacing = inputStyle.letterSpacing;
-			widthNode.style.textTransform = inputStyle.textTransform;
-			if (this.props.placeholder) {
-				var placeholderNode = this.placeHolderSizer;
-				placeholderNode.style.fontSize = inputStyle.fontSize;
-				placeholderNode.style.fontFamily = inputStyle.fontFamily;
-				placeholderNode.style.fontWeight = inputStyle.fontWeight;
-				placeholderNode.style.fontStyle = inputStyle.fontStyle;
-				placeholderNode.style.letterSpacing = inputStyle.letterSpacing;
-				placeholderNode.style.textTransform = inputStyle.textTransform;
+			copyStyles(inputStyles, this.sizer);
+			if (this.placeHolderSizer) {
+				copyStyles(inputStyles, this.placeHolderSizer);
 			}
 		}
 	}, {
@@ -309,6 +332,9 @@ var AutosizeInput = function (_Component) {
 			} else {
 				newInputWidth = this.sizer.scrollWidth + 2;
 			}
+			// add extraWidth to the detected width. for number types, this defaults to 16 to allow for the stepper UI
+			var extraWidth = this.props.type === 'number' && this.props.extraWidth === undefined ? 16 : parseInt(this.props.extraWidth) || 0;
+			newInputWidth += extraWidth;
 			if (newInputWidth < this.props.minWidth) {
 				newInputWidth = this.props.minWidth;
 			}
@@ -338,6 +364,18 @@ var AutosizeInput = function (_Component) {
 		value: function select() {
 			this.input.select();
 		}
+	}, {
+		key: 'renderStyles',
+		value: function renderStyles() {
+			// this method injects styles to hide IE's clear indicator, which messes
+			// with input size detection. the stylesheet is only injected when the
+			// browser is IE, and can also be disabled by the `injectStyles` prop.
+			var injectStyles = this.props.injectStyles;
+
+			return isIE && injectStyles ? React.createElement('style', { dangerouslySetInnerHTML: {
+					__html: 'input#' + this.state.inputId + '::-ms-clear {display: none;}'
+				} }) : null;
+		}
 	}, {
 		key: 'render',
 		value: function render() {
@@ -350,27 +388,24 @@ var AutosizeInput = function (_Component) {
 
 			var wrapperStyle = _extends({}, this.props.style);
 			if (!wrapperStyle.display) wrapperStyle.display = 'inline-block';
-			var inputStyle = _extends({}, this.props.inputStyle);
-			inputStyle.width = this.state.inputWidth + 'px';
-			inputStyle.boxSizing = 'content-box';
+
+			var inputStyle = _extends({
+				boxSizing: 'content-box',
+				width: this.state.inputWidth + 'px'
+			}, this.props.inputStyle);
+
 			var inputProps = objectWithoutProperties(this.props, []);
 
+			cleanInputProps(inputProps);
 			inputProps.className = this.props.inputClassName;
+			inputProps.id = this.state.inputId;
 			inputProps.style = inputStyle;
-			// ensure props meant for `AutosizeInput` don't end up on the `input`
-			delete inputProps.inputClassName;
-			delete inputProps.inputStyle;
-			delete inputProps.minWidth;
-			delete inputProps.onAutosize;
-			delete inputProps.placeholderIsMinWidth;
-			delete inputProps.inputRef;
+
 			return React.createElement(
 				'div',
 				{ className: this.props.className, style: wrapperStyle },
-				React.createElement('style', { dangerouslySetInnerHTML: {
-						__html: ['input#' + this.state.id + '::-ms-clear {display: none;}'].join('\n')
-					} }),
-				React.createElement('input', _extends({ id: this.state.id }, inputProps, { ref: this.inputRef })),
+				this.renderStyles(),
+				React.createElement('input', _extends({}, inputProps, { ref: this.inputRef })),
 				React.createElement(
 					'div',
 					{ ref: this.sizerRef, style: sizerStyle },
@@ -387,25 +422,28 @@ var AutosizeInput = function (_Component) {
 	return AutosizeInput;
 }(Component);
 
-
-
 AutosizeInput.propTypes = {
 	className: PropTypes.string, // className for the outer element
 	defaultValue: PropTypes.any, // default field value
+	extraWidth: PropTypes.oneOfType([// additional width for input element
+	PropTypes.number, PropTypes.string]),
+	id: PropTypes.string, // id to use for the input, can be set for consistent snapshots
+	injectStyles: PropTypes.bool, // inject the custom stylesheet to hide clear UI, defaults to true
 	inputClassName: PropTypes.string, // className for the input element
 	inputRef: PropTypes.func, // ref callback for the input element
 	inputStyle: PropTypes.object, // css styles for the input element
 	minWidth: PropTypes.oneOfType([// minimum width for input element
 	PropTypes.number, PropTypes.string]),
 	onAutosize: PropTypes.func, // onAutosize handler: function(newWidth) {}
-	onChange: PropTypes.func, // onChange handler: function(newValue) {}
+	onChange: PropTypes.func, // onChange handler: function(event) {}
 	placeholder: PropTypes.string, // placeholder text
 	placeholderIsMinWidth: PropTypes.bool, // don't collapse size to less than the placeholder
 	style: PropTypes.object, // css styles for the outer element
 	value: PropTypes.any // field value
 };
 AutosizeInput.defaultProps = {
-	minWidth: 1
+	minWidth: 1,
+	injectStyles: true
 };
 
 export default AutosizeInput;