@zag-js/auto-resize - npm Package Compare versions

Comparing version 0.74.2 to 0.75.0

dist/index.d.ts

 declare function autoResizeInput(input: HTMLInputElement | null): (() => void) | undefined;
 
-export { autoResizeInput };
+declare const autoresizeTextarea: (el: HTMLTextAreaElement | null) => (() => void) | undefined;
+
+export { autoResizeInput, autoresizeTextarea };

dist/index.js

@@ -5,10 +5,10 @@ 'use strict';
 
-// src/index.ts
-function copyVisualStyles(fromEl, toEl) {
-  if (!fromEl) return;
-  const win = domQuery.getWindow(fromEl);
-  const el = win.getComputedStyle(fromEl);
-  const cssText = "box-sizing:" + el.boxSizing + ";border-left:" + el.borderLeftWidth + " solid red;border-right:" + el.borderRightWidth + " solid red;font-family:" + el.fontFamily + ";font-feature-settings:" + el.fontFeatureSettings + ";font-kerning:" + el.fontKerning + ";font-size:" + el.fontSize + ";font-stretch:" + el.fontStretch + ";font-style:" + el.fontStyle + ";font-variant:" + el.fontVariant + ";font-variant-caps:" + el.fontVariantCaps + ";font-variant-ligatures:" + el.fontVariantLigatures + ";font-variant-numeric:" + el.fontVariantNumeric + ";font-weight:" + el.fontWeight + ";letter-spacing:" + el.letterSpacing + ";margin-left:" + el.marginLeft + ";margin-right:" + el.marginRight + ";padding-left:" + el.paddingLeft + ";padding-right:" + el.paddingRight + ";text-indent:" + el.textIndent + ";text-transform:" + el.textTransform;
-  toEl.style.cssText += cssText;
+// src/autoresize-input.ts
+function getVisualStyles(node) {
+  if (!node) return;
+  const style = domQuery.getComputedStyle(node);
+  return "box-sizing:" + style.boxSizing + ";border-left:" + style.borderLeftWidth + " solid red;border-right:" + style.borderRightWidth + " solid red;font-family:" + style.fontFamily + ";font-feature-settings:" + style.fontFeatureSettings + ";font-kerning:" + style.fontKerning + ";font-size:" + style.fontSize + ";font-stretch:" + style.fontStretch + ";font-style:" + style.fontStyle + ";font-variant:" + style.fontVariant + ";font-variant-caps:" + style.fontVariantCaps + ";font-variant-ligatures:" + style.fontVariantLigatures + ";font-variant-numeric:" + style.fontVariantNumeric + ";font-weight:" + style.fontWeight + ";letter-spacing:" + style.letterSpacing + ";margin-left:" + style.marginLeft + ";margin-right:" + style.marginRight + ";padding-left:" + style.paddingLeft + ";padding-right:" + style.paddingRight + ";text-indent:" + style.textIndent + ";text-transform:" + style.textTransform;
 }
+
+// src/autoresize-input.ts
 function createGhostElement(doc) {
@@ -26,3 +26,4 @@ var el = doc.createElement("div");
   const ghost = createGhostElement(doc);
-  copyVisualStyles(input, ghost);
+  const cssText = getVisualStyles(input);
+  if (cssText) ghost.style.cssText += cssText;
   function resize() {
@@ -44,3 +45,30 @@ win.requestAnimationFrame(() => {
 }
+var autoresizeTextarea = (el) => {
+  if (!el) return;
+  const style = domQuery.getComputedStyle(el);
+  const win = el.ownerDocument.defaultView || window;
+  const onInput = () => {
+    el.style.height = "auto";
+    const borderTopWidth = parseInt(style.borderTopWidth, 10);
+    const borderBottomWidth = parseInt(style.borderBottomWidth, 10);
+    el.style.height = `${el.scrollHeight + borderTopWidth + borderBottomWidth}px`;
+  };
+  el.addEventListener("input", onInput);
+  const elementPrototype = Object.getPrototypeOf(el);
+  const descriptor = Object.getOwnPropertyDescriptor(elementPrototype, "value");
+  Object.defineProperty(el, "value", {
+    ...descriptor,
+    set() {
+      descriptor?.set?.apply(this, arguments);
+      onInput();
+    }
+  });
+  const resizeObserver = new win.ResizeObserver(() => onInput());
+  resizeObserver.observe(el);
+  return () => {
+    el.removeEventListener("input", onInput);
+  };
+};
 
 exports.autoResizeInput = autoResizeInput;
+exports.autoresizeTextarea = autoresizeTextarea;

package.json

 {
   "name": "@zag-js/auto-resize",
-  "version": "0.74.2",
+  "version": "0.75.0",
   "description": "Autoresize utilities for the web",
@@ -25,3 +25,3 @@ "keywords": [
   "dependencies": {
-    "@zag-js/dom-query": "0.74.2"
+    "@zag-js/dom-query": "0.75.0"
   },
@@ -28,0 +28,0 @@ "devDependencies": {

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

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

Improved metrics

Total package byte prevSize

9357

increased by32.37%

Lines of code

141

increased by65.88%

Dependency changes

• + Added@zag-js/dom-query@0.75.0(transitive)

• - Removed@zag-js/dom-query@0.74.2(transitive)

• Updated@zag-js/dom-query@0.75.0