react-textarea-autosize - npm Package Compare versions

Comparing version 8.3.1 to 8.3.2

CHANGELOG.md

 # react-textarea-autosize
 
+## 8.3.2
+
+### Patch Changes
+
+- [`3c71884`](https://github.com/Andarist/react-textarea-autosize/commit/3c7188444e66e0e199d90fbfec554f2b97695f38) [#311](https://github.com/Andarist/react-textarea-autosize/pull/311) Thanks [@Andarist](https://github.com/Andarist)! - Changed `TextareaAutosizeProps` to a TS interface which fixes the problem of "resolved" being type alias being inlined in the emitted types declaration which could cause incompatibilities with some versions of `@types/react`.
+
 ## 8.3.1
@@ -4,0 +10,0 @@

dist/declarations/src/index.d.ts

@@ -9,3 +9,3 @@ import * as React from 'react';
 };
-export declare type TextareaAutosizeProps = Omit<TextareaProps, 'style'> & {
+export interface TextareaAutosizeProps extends Omit<TextareaProps, 'style'> {
     maxRows?: number;
@@ -16,10 +16,4 @@ minRows?: number;
     style?: Style;
-};
-declare const _default: React.ForwardRefExoticComponent<Pick<TextareaProps, "color" | "translate" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "disabled" | "form" | "maxLength" | "minLength" | "name" | "placeholder" | "readOnly" | "required" | "rows" | "value" | "wrap" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
-    maxRows?: number;
-    minRows?: number;
-    onHeightChange?: (height: number, meta: TextareaHeightChangeMeta) => void;
-    cacheMeasurements?: boolean;
-    style?: Style;
-} & React.RefAttributes<HTMLTextAreaElement>>;
+}
+declare const _default: React.ForwardRefExoticComponent<TextareaAutosizeProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default _default;

dist/react-textarea-autosize.browser.cjs.js

@@ -5,10 +5,13 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
-var _objectWithoutPropertiesLoose = _interopDefault(require('@babel/runtime/helpers/objectWithoutPropertiesLoose'));
+var _extends = require('@babel/runtime/helpers/extends');
+var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
 var React = require('react');
-var useLatest = _interopDefault(require('use-latest'));
-var useComposedRef = _interopDefault(require('use-composed-ref'));
+var useLatest = require('use-latest');
+var useComposedRef = require('use-composed-ref');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var useLatest__default = /*#__PURE__*/_interopDefault(useLatest);
+var useComposedRef__default = /*#__PURE__*/_interopDefault(useComposedRef);
+
 var HIDDEN_TEXTAREA_STYLE = {
@@ -111,3 +114,3 @@ 'min-height': '0',
 'textRendering', 'textTransform', 'width'];
-var isIE =  !!document.documentElement.currentStyle ;
+var isIE = !!document.documentElement.currentStyle ;
 
@@ -144,3 +147,3 @@ var getSizingData = function getSizingData(node) {
 var useWindowResizeListener = function useWindowResizeListener(listener) {
-  var latestListener = useLatest(listener);
+  var latestListener = useLatest__default['default'](listener);
   React.useLayoutEffect(function () {
@@ -180,3 +183,3 @@ var handler = function handler(event) {
   var libRef = React.useRef(null);
-  var ref = useComposedRef(libRef, userRef);
+  var ref = useComposedRef__default['default'](libRef, userRef);
   var heightRef = React.useRef(0);
@@ -183,0 +186,0 @@ var measurementsCacheRef = React.useRef();

dist/react-textarea-autosize.browser.esm.js

@@ -104,3 +104,3 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 'textRendering', 'textTransform', 'width'];
-var isIE =  !!document.documentElement.currentStyle ;
+var isIE = !!document.documentElement.currentStyle ;
 
@@ -107,0 +107,0 @@ var getSizingData = function getSizingData(node) {

dist/react-textarea-autosize.cjs.dev.js

@@ -5,10 +5,13 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
-var _objectWithoutPropertiesLoose = _interopDefault(require('@babel/runtime/helpers/objectWithoutPropertiesLoose'));
+var _extends = require('@babel/runtime/helpers/extends');
+var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
 var React = require('react');
-var useLatest = _interopDefault(require('use-latest'));
-var useComposedRef = _interopDefault(require('use-composed-ref'));
+var useLatest = require('use-latest');
+var useComposedRef = require('use-composed-ref');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var useLatest__default = /*#__PURE__*/_interopDefault(useLatest);
+var useComposedRef__default = /*#__PURE__*/_interopDefault(useComposedRef);
+
 var HIDDEN_TEXTAREA_STYLE = {
@@ -143,3 +146,3 @@ 'min-height': '0',
 var useWindowResizeListener = function useWindowResizeListener(listener) {
-  var latestListener = useLatest(listener);
+  var latestListener = useLatest__default['default'](listener);
   React.useLayoutEffect(function () {
@@ -179,3 +182,3 @@ var handler = function handler(event) {
   var libRef = React.useRef(null);
-  var ref = useComposedRef(libRef, userRef);
+  var ref = useComposedRef__default['default'](libRef, userRef);
   var heightRef = React.useRef(0);
@@ -182,0 +185,0 @@ var measurementsCacheRef = React.useRef();

dist/react-textarea-autosize.cjs.prod.js

@@ -1,94 +0,218 @@
-"use strict";
+'use strict';
 
-function _interopDefault(ex) {
-  return ex && "object" == typeof ex && "default" in ex ? ex.default : ex;
-}
+Object.defineProperty(exports, '__esModule', { value: true });
 
-Object.defineProperty(exports, "__esModule", {
-  value: !0
-});
+var _extends = require('@babel/runtime/helpers/extends');
+var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
+var React = require('react');
+var useLatest = require('use-latest');
+var useComposedRef = require('use-composed-ref');
 
-var _extends = _interopDefault(require("@babel/runtime/helpers/extends")), _objectWithoutPropertiesLoose = _interopDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose")), React = require("react"), useLatest = _interopDefault(require("use-latest")), useComposedRef = _interopDefault(require("use-composed-ref")), HIDDEN_TEXTAREA_STYLE = {
-  "min-height": "0",
-  "max-height": "none",
-  height: "0",
-  visibility: "hidden",
-  overflow: "hidden",
-  position: "absolute",
-  "z-index": "-1000",
-  top: "0",
-  right: "0"
-}, forceHiddenStyles = function(node) {
-  Object.keys(HIDDEN_TEXTAREA_STYLE).forEach((function(key) {
-    node.style.setProperty(key, HIDDEN_TEXTAREA_STYLE[key], "important");
-  }));
-}, hiddenTextarea = null, getHeight = function(node, sizingData) {
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var useLatest__default = /*#__PURE__*/_interopDefault(useLatest);
+var useComposedRef__default = /*#__PURE__*/_interopDefault(useComposedRef);
+
+var HIDDEN_TEXTAREA_STYLE = {
+  'min-height': '0',
+  'max-height': 'none',
+  height: '0',
+  visibility: 'hidden',
+  overflow: 'hidden',
+  position: 'absolute',
+  'z-index': '-1000',
+  top: '0',
+  right: '0'
+};
+
+var forceHiddenStyles = function forceHiddenStyles(node) {
+  Object.keys(HIDDEN_TEXTAREA_STYLE).forEach(function (key) {
+    node.style.setProperty(key, HIDDEN_TEXTAREA_STYLE[key], 'important');
+  });
+};
+
+//   export type CalculatedNodeHeights = [height: number, rowHeight: number];
+// https://github.com/microsoft/TypeScript/issues/28259
+
+var hiddenTextarea = null;
+
+var getHeight = function getHeight(node, sizingData) {
   var height = node.scrollHeight;
-  return "border-box" === sizingData.sizingStyle.boxSizing ? height + sizingData.borderSize : height - sizingData.paddingSize;
+
+  if (sizingData.sizingStyle.boxSizing === 'border-box') {
+    // border-box: add border, since height = content + padding + border
+    return height + sizingData.borderSize;
+  } // remove padding, since height = content
+
+
+  return height - sizingData.paddingSize;
 };
 
 function calculateNodeHeight(sizingData, value, minRows, maxRows) {
-  void 0 === minRows && (minRows = 1), void 0 === maxRows && (maxRows = 1 / 0), hiddenTextarea || ((hiddenTextarea = document.createElement("textarea")).setAttribute("tab-index", "-1"), 
-  hiddenTextarea.setAttribute("aria-hidden", "true"), forceHiddenStyles(hiddenTextarea)), 
-  null === hiddenTextarea.parentNode && document.body.appendChild(hiddenTextarea);
-  var paddingSize = sizingData.paddingSize, borderSize = sizingData.borderSize, sizingStyle = sizingData.sizingStyle, boxSizing = sizingStyle.boxSizing;
-  Object.keys(sizingStyle).forEach((function(_key) {
+  if (minRows === void 0) {
+    minRows = 1;
+  }
+
+  if (maxRows === void 0) {
+    maxRows = Infinity;
+  }
+
+  if (!hiddenTextarea) {
+    hiddenTextarea = document.createElement('textarea');
+    hiddenTextarea.setAttribute('tab-index', '-1');
+    hiddenTextarea.setAttribute('aria-hidden', 'true');
+    forceHiddenStyles(hiddenTextarea);
+  }
+
+  if (hiddenTextarea.parentNode === null) {
+    document.body.appendChild(hiddenTextarea);
+  }
+
+  var paddingSize = sizingData.paddingSize,
+      borderSize = sizingData.borderSize,
+      sizingStyle = sizingData.sizingStyle;
+  var boxSizing = sizingStyle.boxSizing;
+  Object.keys(sizingStyle).forEach(function (_key) {
     var key = _key;
     hiddenTextarea.style[key] = sizingStyle[key];
-  })), forceHiddenStyles(hiddenTextarea), hiddenTextarea.value = value;
-  var height = getHeight(hiddenTextarea, sizingData);
-  hiddenTextarea.value = "x";
-  var rowHeight = hiddenTextarea.scrollHeight - paddingSize, minHeight = rowHeight * minRows;
-  "border-box" === boxSizing && (minHeight = minHeight + paddingSize + borderSize), 
+  });
+  forceHiddenStyles(hiddenTextarea);
+  hiddenTextarea.value = value;
+  var height = getHeight(hiddenTextarea, sizingData); // measure height of a textarea with a single row
+
+  hiddenTextarea.value = 'x';
+  var rowHeight = hiddenTextarea.scrollHeight - paddingSize;
+  var minHeight = rowHeight * minRows;
+
+  if (boxSizing === 'border-box') {
+    minHeight = minHeight + paddingSize + borderSize;
+  }
+
   height = Math.max(minHeight, height);
   var maxHeight = rowHeight * maxRows;
-  return "border-box" === boxSizing && (maxHeight = maxHeight + paddingSize + borderSize), 
-  [ height = Math.min(maxHeight, height), rowHeight ];
+
+  if (boxSizing === 'border-box') {
+    maxHeight = maxHeight + paddingSize + borderSize;
+  }
+
+  height = Math.min(maxHeight, height);
+  return [height, rowHeight];
 }
 
-var noop = function() {}, pick = function(props, obj) {
-  return props.reduce((function(acc, prop) {
-    return acc[prop] = obj[prop], acc;
-  }), {});
-}, SIZING_STYLE = [ "borderBottomWidth", "borderLeftWidth", "borderRightWidth", "borderTopWidth", "boxSizing", "fontFamily", "fontSize", "fontStyle", "fontWeight", "letterSpacing", "lineHeight", "paddingBottom", "paddingLeft", "paddingRight", "paddingTop", "tabSize", "textIndent", "textRendering", "textTransform", "width" ], isIE = "undefined" != typeof document && !!document.documentElement.currentStyle, getSizingData = function(node) {
+var noop = function noop() {};
+var pick = function pick(props, obj) {
+  return props.reduce(function (acc, prop) {
+    acc[prop] = obj[prop];
+    return acc;
+  }, {});
+};
+
+var SIZING_STYLE = ['borderBottomWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopWidth', 'boxSizing', 'fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'letterSpacing', 'lineHeight', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', // non-standard
+'tabSize', 'textIndent', // non-standard
+'textRendering', 'textTransform', 'width'];
+var isIE = typeof document !== 'undefined' ? !!document.documentElement.currentStyle : false;
+
+var getSizingData = function getSizingData(node) {
   var style = window.getComputedStyle(node);
-  if (null === style) return null;
-  var sizingStyle = pick(SIZING_STYLE, style), boxSizing = sizingStyle.boxSizing;
-  return "" === boxSizing ? null : (isIE && "border-box" === boxSizing && (sizingStyle.width = parseFloat(sizingStyle.width) + parseFloat(sizingStyle.borderRightWidth) + parseFloat(sizingStyle.borderLeftWidth) + parseFloat(sizingStyle.paddingRight) + parseFloat(sizingStyle.paddingLeft) + "px"), 
-  {
+
+  if (style === null) {
+    return null;
+  }
+
+  var sizingStyle = pick(SIZING_STYLE, style);
+  var boxSizing = sizingStyle.boxSizing; // probably node is detached from DOM, can't read computed dimensions
+
+  if (boxSizing === '') {
+    return null;
+  } // IE (Edge has already correct behaviour) returns content width as computed width
+  // so we need to add manually padding and border widths
+
+
+  if (isIE && boxSizing === 'border-box') {
+    sizingStyle.width = parseFloat(sizingStyle.width) + parseFloat(sizingStyle.borderRightWidth) + parseFloat(sizingStyle.borderLeftWidth) + parseFloat(sizingStyle.paddingRight) + parseFloat(sizingStyle.paddingLeft) + 'px';
+  }
+
+  var paddingSize = parseFloat(sizingStyle.paddingBottom) + parseFloat(sizingStyle.paddingTop);
+  var borderSize = parseFloat(sizingStyle.borderBottomWidth) + parseFloat(sizingStyle.borderTopWidth);
+  return {
     sizingStyle: sizingStyle,
-    paddingSize: parseFloat(sizingStyle.paddingBottom) + parseFloat(sizingStyle.paddingTop),
-    borderSize: parseFloat(sizingStyle.borderBottomWidth) + parseFloat(sizingStyle.borderTopWidth)
-  });
-}, useWindowResizeListener = function(listener) {
-  var latestListener = useLatest(listener);
-  React.useLayoutEffect((function() {
-    var handler = function(event) {
+    paddingSize: paddingSize,
+    borderSize: borderSize
+  };
+};
+
+var useWindowResizeListener = function useWindowResizeListener(listener) {
+  var latestListener = useLatest__default['default'](listener);
+  React.useLayoutEffect(function () {
+    var handler = function handler(event) {
       latestListener.current(event);
     };
-    return window.addEventListener("resize", handler), function() {
-      window.removeEventListener("resize", handler);
+
+    window.addEventListener('resize', handler);
+    return function () {
+      window.removeEventListener('resize', handler);
     };
-  }), []);
-}, TextareaAutosize = function(_ref, userRef) {
-  var cacheMeasurements = _ref.cacheMeasurements, maxRows = _ref.maxRows, minRows = _ref.minRows, _ref$onChange = _ref.onChange, onChange = void 0 === _ref$onChange ? noop : _ref$onChange, _ref$onHeightChange = _ref.onHeightChange, onHeightChange = void 0 === _ref$onHeightChange ? noop : _ref$onHeightChange, props = _objectWithoutPropertiesLoose(_ref, [ "cacheMeasurements", "maxRows", "minRows", "onChange", "onHeightChange" ]), isControlled = void 0 !== props.value, libRef = React.useRef(null), ref = useComposedRef(libRef, userRef), heightRef = React.useRef(0), measurementsCacheRef = React.useRef(), resizeTextarea = function() {
-    var node = libRef.current, nodeSizingData = cacheMeasurements && measurementsCacheRef.current ? measurementsCacheRef.current : getSizingData(node);
-    if (nodeSizingData) {
-      measurementsCacheRef.current = nodeSizingData;
-      var _calculateNodeHeight = calculateNodeHeight(nodeSizingData, node.value || node.placeholder || "x", minRows, maxRows), height = _calculateNodeHeight[0], rowHeight = _calculateNodeHeight[1];
-      heightRef.current !== height && (heightRef.current = height, node.style.setProperty("height", height + "px", "important"), 
+  }, []);
+};
+
+var TextareaAutosize = function TextareaAutosize(_ref, userRef) {
+  var cacheMeasurements = _ref.cacheMeasurements,
+      maxRows = _ref.maxRows,
+      minRows = _ref.minRows,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
+      _ref$onHeightChange = _ref.onHeightChange,
+      onHeightChange = _ref$onHeightChange === void 0 ? noop : _ref$onHeightChange,
+      props = _objectWithoutPropertiesLoose(_ref, ["cacheMeasurements", "maxRows", "minRows", "onChange", "onHeightChange"]);
+
+  var isControlled = props.value !== undefined;
+  var libRef = React.useRef(null);
+  var ref = useComposedRef__default['default'](libRef, userRef);
+  var heightRef = React.useRef(0);
+  var measurementsCacheRef = React.useRef();
+
+  var resizeTextarea = function resizeTextarea() {
+    var node = libRef.current;
+    var nodeSizingData = cacheMeasurements && measurementsCacheRef.current ? measurementsCacheRef.current : getSizingData(node);
+
+    if (!nodeSizingData) {
+      return;
+    }
+
+    measurementsCacheRef.current = nodeSizingData;
+
+    var _calculateNodeHeight = calculateNodeHeight(nodeSizingData, node.value || node.placeholder || 'x', minRows, maxRows),
+        height = _calculateNodeHeight[0],
+        rowHeight = _calculateNodeHeight[1];
+
+    if (heightRef.current !== height) {
+      heightRef.current = height;
+      node.style.setProperty('height', height + "px", 'important');
       onHeightChange(height, {
         rowHeight: rowHeight
-      }));
+      });
     }
   };
-  return "undefined" != typeof document && (React.useLayoutEffect(resizeTextarea), 
-  useWindowResizeListener(resizeTextarea)), React.createElement("textarea", _extends({}, props, {
-    onChange: function(event) {
-      isControlled || resizeTextarea(), onChange(event);
-    },
+
+  var handleChange = function handleChange(event) {
+    if (!isControlled) {
+      resizeTextarea();
+    }
+
+    onChange(event);
+  };
+
+  if (typeof document !== 'undefined') {
+    React.useLayoutEffect(resizeTextarea);
+    useWindowResizeListener(resizeTextarea);
+  }
+
+  return /*#__PURE__*/React.createElement("textarea", _extends({}, props, {
+    onChange: handleChange,
     ref: ref
   }));
-}, index = React.forwardRef(TextareaAutosize);
+};
 
+var index = /* #__PURE__ */React.forwardRef(TextareaAutosize);
+
 exports.default = index;

package.json

 {
   "name": "react-textarea-autosize",
   "description": "textarea component for React which grows with content",
-  "version": "8.3.1",
+  "version": "8.3.2",
   "keywords": [
@@ -61,3 +61,3 @@ "autosize",
     "@changesets/cli": "^2.8.0",
-    "@preconstruct/cli": "^1.1.14",
+    "@preconstruct/cli": "^2.0.5",
     "@testing-library/jest-dom": "^5.9.0",
@@ -64,0 +64,0 @@ "@testing-library/react": "^10.1.0",

No alert changes

Improved metrics

Lines of code

929

increased by7.03%

Worsened metrics

Total package byte prevSize

52565

decreased by-5.28%

No dependency changes