react-textarea-autosize - npm Package Compare versions

Comparing version 8.4.1 to 8.5.0

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

 import _extends from '@babel/runtime/helpers/esm/extends';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
-import { useLayoutEffect, forwardRef, useRef, createElement } from 'react';
+import * as React from 'react';
 import useLatest from 'use-latest';
@@ -23,2 +23,3 @@ import useComposedRef from 'use-composed-ref';
 };
+var forceHiddenStyles$1 = forceHiddenStyles;
 
@@ -51,3 +52,3 @@ // TODO: use labelled tuples once they are avaiable:
     hiddenTextarea.setAttribute('aria-hidden', 'true');
-    forceHiddenStyles(hiddenTextarea);
+    forceHiddenStyles$1(hiddenTextarea);
   }
@@ -65,3 +66,3 @@ if (hiddenTextarea.parentNode === null) {
   });
-  forceHiddenStyles(hiddenTextarea);
+  forceHiddenStyles$1(hiddenTextarea);
   hiddenTextarea.value = value;
@@ -129,9 +130,15 @@ var height = getHeight(hiddenTextarea, sizingData);
 };
+var getSizingData$1 = getSizingData;
 
 function useListener(target, type, listener) {
   var latestListener = useLatest(listener);
-  useLayoutEffect(function () {
+  React.useLayoutEffect(function () {
     var handler = function handler(ev) {
       return latestListener.current(ev);
     };
+
+    // might happen if document.fonts is not defined, for instance
+    if (!target) {
+      return;
+    }
     target.addEventListener(type, handler);
@@ -160,18 +167,10 @@ return function () {
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  if (process.env.NODE_ENV !== 'production' && props.style) {
-    if ('maxHeight' in props.style) {
-      throw new Error('Using `style.maxHeight` for <TextareaAutosize/> is not supported. Please use `maxRows`.');
-    }
-    if ('minHeight' in props.style) {
-      throw new Error('Using `style.minHeight` for <TextareaAutosize/> is not supported. Please use `minRows`.');
-    }
-  }
   var isControlled = props.value !== undefined;
-  var libRef = useRef(null);
+  var libRef = React.useRef(null);
   var ref = useComposedRef(libRef, userRef);
-  var heightRef = useRef(0);
-  var measurementsCacheRef = useRef();
+  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);
+    var nodeSizingData = cacheMeasurements && measurementsCacheRef.current ? measurementsCacheRef.current : getSizingData$1(node);
     if (!nodeSizingData) {
@@ -199,13 +198,13 @@ return;
   {
-    useLayoutEffect(resizeTextarea);
+    React.useLayoutEffect(resizeTextarea);
     useWindowResizeListener(resizeTextarea);
     useFontsLoadedListener(resizeTextarea);
+    return /*#__PURE__*/React.createElement("textarea", _extends({}, props, {
+      onChange: handleChange,
+      ref: ref
+    }));
   }
-  return /*#__PURE__*/createElement("textarea", _extends({}, props, {
-    onChange: handleChange,
-    ref: ref
-  }));
 };
-var index = /* #__PURE__ */forwardRef(TextareaAutosize);
+var index = /* #__PURE__ */React.forwardRef(TextareaAutosize);
 
-export default index;
+export { index as default };

dist/react-textarea-autosize.cjs.d.ts

 export * from "./declarations/src/index";
 export { default } from "./declarations/src/index";
+//# sourceMappingURL=react-textarea-autosize.cjs.d.ts.map

dist/react-textarea-autosize.cjs.js

 'use strict';
 
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./react-textarea-autosize.cjs.prod.js");
-} else {
-  module.exports = require("./react-textarea-autosize.cjs.dev.js");
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _extends = require('@babel/runtime/helpers/extends');
+var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
+var React = require('react');
+var useComposedRef = require('use-composed-ref');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
 }
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var useComposedRef__default = /*#__PURE__*/_interopDefault(useComposedRef);
+
+var _excluded = ["cacheMeasurements", "maxRows", "minRows", "onChange", "onHeightChange"];
+var TextareaAutosize = function TextareaAutosize(_ref, userRef) {
+  _ref.cacheMeasurements;
+    _ref.maxRows;
+    _ref.minRows;
+    _ref.onChange;
+    _ref.onHeightChange;
+    var props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  props.value !== undefined;
+  var libRef = React__namespace.useRef(null);
+  var ref = useComposedRef__default["default"](libRef, userRef);
+  React__namespace.useRef(0);
+  React__namespace.useRef();
+  return /*#__PURE__*/React__namespace.createElement("textarea", _extends({}, props, {
+    ref: ref
+  }));
+};
+var index = /* #__PURE__ */React__namespace.forwardRef(TextareaAutosize);
+
+exports["default"] = index;

dist/react-textarea-autosize.esm.js

 import _extends from '@babel/runtime/helpers/esm/extends';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
-import { useLayoutEffect, forwardRef, useRef, createElement } from 'react';
-import useLatest from 'use-latest';
+import * as React from 'react';
 import useComposedRef from 'use-composed-ref';
 
-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');
-  });
-};
-
-// TODO: use labelled tuples once they are avaiable:
-//   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;
-  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) {
-  if (minRows === void 0) {
-    minRows = 1;
-  }
-  if (maxRows === void 0) {
-    maxRows = Infinity;
-  }
-  if (!hiddenTextarea) {
-    hiddenTextarea = document.createElement('textarea');
-    hiddenTextarea.setAttribute('tabindex', '-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);
-  // Double set and calc due to Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1795904
-  hiddenTextarea.value = value;
-  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;
-  if (boxSizing === 'border-box') {
-    maxHeight = maxHeight + paddingSize + borderSize;
-  }
-  height = Math.min(maxHeight, height);
-  return [height, rowHeight];
-}
-
-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', 'wordBreak'];
-var isIE = typeof document !== 'undefined' ? !!document.documentElement.currentStyle : false;
-var getSizingData = function getSizingData(node) {
-  var style = window.getComputedStyle(node);
-  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: paddingSize,
-    borderSize: borderSize
-  };
-};
-
-function useListener(target, type, listener) {
-  var latestListener = useLatest(listener);
-  useLayoutEffect(function () {
-    var handler = function handler(ev) {
-      return latestListener.current(ev);
-    };
-    target.addEventListener(type, handler);
-    return function () {
-      return target.removeEventListener(type, handler);
-    };
-  }, []);
-}
-var useWindowResizeListener = function useWindowResizeListener(listener) {
-  useListener(window, 'resize', listener);
-};
-var useFontsLoadedListener = function useFontsLoadedListener(listener) {
-  useListener(document.fonts, 'loadingdone', listener);
-};
-
 var _excluded = ["cacheMeasurements", "maxRows", "minRows", "onChange", "onHeightChange"];
 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, _excluded);
-  if (process.env.NODE_ENV !== 'production' && props.style) {
-    if ('maxHeight' in props.style) {
-      throw new Error('Using `style.maxHeight` for <TextareaAutosize/> is not supported. Please use `maxRows`.');
-    }
-    if ('minHeight' in props.style) {
-      throw new Error('Using `style.minHeight` for <TextareaAutosize/> is not supported. Please use `minRows`.');
-    }
-  }
-  var isControlled = props.value !== undefined;
-  var libRef = useRef(null);
+  _ref.cacheMeasurements;
+    _ref.maxRows;
+    _ref.minRows;
+    _ref.onChange;
+    _ref.onHeightChange;
+    var props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  props.value !== undefined;
+  var libRef = React.useRef(null);
   var ref = useComposedRef(libRef, userRef);
-  var heightRef = useRef(0);
-  var measurementsCacheRef = 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
-      });
-    }
-  };
-  var handleChange = function handleChange(event) {
-    if (!isControlled) {
-      resizeTextarea();
-    }
-    onChange(event);
-  };
-  if (typeof document !== 'undefined') {
-    useLayoutEffect(resizeTextarea);
-    useWindowResizeListener(resizeTextarea);
-    useFontsLoadedListener(resizeTextarea);
-  }
-  return /*#__PURE__*/createElement("textarea", _extends({}, props, {
-    onChange: handleChange,
+  React.useRef(0);
+  React.useRef();
+  return /*#__PURE__*/React.createElement("textarea", _extends({}, props, {
     ref: ref
   }));
 };
-var index = /* #__PURE__ */forwardRef(TextareaAutosize);
+var index = /* #__PURE__ */React.forwardRef(TextareaAutosize);
 
-export default index;
+export { index as default };

package.json

 {
   "name": "react-textarea-autosize",
   "description": "textarea component for React which grows with content",
-  "version": "8.4.1",
+  "version": "8.5.0",
   "keywords": [
@@ -24,7 +24,33 @@ "autosize",
     ".": {
-      "module": {
-        "worker": "./dist/react-textarea-autosize.worker.esm.js",
-        "browser": "./dist/react-textarea-autosize.browser.esm.js",
-        "default": "./dist/react-textarea-autosize.esm.js"
+      "types": {
+        "import": "./dist/react-textarea-autosize.cjs.mjs",
+        "default": "./dist/react-textarea-autosize.cjs.js"
       },
+      "development": {
+        "worker": {
+          "module": "./dist/react-textarea-autosize.development.esm.js",
+          "import": "./dist/react-textarea-autosize.development.cjs.mjs",
+          "default": "./dist/react-textarea-autosize.development.cjs.js"
+        },
+        "browser": {
+          "module": "./dist/react-textarea-autosize.browser.development.esm.js",
+          "import": "./dist/react-textarea-autosize.browser.development.cjs.mjs",
+          "default": "./dist/react-textarea-autosize.browser.development.cjs.js"
+        },
+        "module": "./dist/react-textarea-autosize.development.esm.js",
+        "import": "./dist/react-textarea-autosize.development.cjs.mjs",
+        "default": "./dist/react-textarea-autosize.development.cjs.js"
+      },
+      "worker": {
+        "module": "./dist/react-textarea-autosize.esm.js",
+        "import": "./dist/react-textarea-autosize.cjs.mjs",
+        "default": "./dist/react-textarea-autosize.cjs.js"
+      },
+      "browser": {
+        "module": "./dist/react-textarea-autosize.browser.esm.js",
+        "import": "./dist/react-textarea-autosize.browser.cjs.mjs",
+        "default": "./dist/react-textarea-autosize.browser.cjs.js"
+      },
+      "module": "./dist/react-textarea-autosize.esm.js",
+      "import": "./dist/react-textarea-autosize.cjs.mjs",
       "default": "./dist/react-textarea-autosize.cjs.js"
@@ -34,2 +60,13 @@ },
   },
+  "imports": {
+    "#is-browser": {
+      "worker": "./src/resolved-conditions/false.ts",
+      "browser": "./src/resolved-conditions/true.ts",
+      "default": "./src/resolved-conditions/false.ts"
+    },
+    "#is-development": {
+      "development": "./src/resolved-conditions/true.ts",
+      "default": "./src/resolved-conditions/false.ts"
+    }
+  },
   "sideEffects": false,
@@ -75,3 +112,3 @@ "files": [
     "@changesets/cli": "^2.22.0",
-    "@preconstruct/cli": "^2.3.0",
+    "@preconstruct/cli": "^2.7.0",
     "@testing-library/jest-dom": "^5.16.5",
@@ -100,3 +137,3 @@ "@testing-library/react": "^10.4.9",
     "terser": "^4.7.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.1.3"
   },
@@ -109,8 +146,8 @@ "engines": {
     "exports": {
-      "envConditions": [
-        "browser",
-        "worker"
-      ]
+      "importConditionDefaultExport": "default"
+    },
+    "___experimentalFlags_WILL_CHANGE_IN_PATCH": {
+      "importsConditions": true
     }
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

49592

increased by3.64%

Number of package files

19

increased by18.75%

Lines of code

1002

increased by1.73%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes