@zag-js/auto-resize 0.1.3 → 0.1.4

package/dist/index.js

@@ -1,4 +1,30 @@
-// ../dom/dist/index.js
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  autoResizeInput: () => autoResizeInput
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../dom/dist/index.mjs
 function isDocument(el) {
   return el.nodeType === Node.DOCUMENT_NODE;
 }
@@ -55,6 +81,7 @@ function autoResizeInput(input) {
     input == null ? void 0 : input.removeEventListener("change", resize);
   };
 }
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   autoResizeInput
-};
+});

package/dist/index.mjs

@@ -0,0 +1,60 @@
+// ../dom/dist/index.mjs
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (el == null ? void 0 : el.ownerDocument) ?? document;
+}
+function getWindow(el) {
+  return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
+}
+
+// src/index.ts
+function copyVisualStyles(fromEl, toEl) {
+  if (!fromEl)
+    return;
+  const win = 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;
+}
+function createGhostElement(doc) {
+  var el = doc.createElement("div");
+  el.id = "ghost";
+  el.style.cssText = "display:inline-block;height:0;overflow:hidden;position:absolute;top:0;visibility:hidden;white-space:nowrap;";
+  doc.body.appendChild(el);
+  return el;
+}
+function autoResizeInput(input) {
+  if (!input)
+    return;
+  const doc = getDocument(input);
+  const win = getWindow(input);
+  const ghost = createGhostElement(doc);
+  copyVisualStyles(input, ghost);
+  function resize() {
+    win.requestAnimationFrame(() => {
+      ghost.innerHTML = input.value;
+      const rect = win.getComputedStyle(ghost);
+      input == null ? void 0 : input.style.setProperty("width", rect.width);
+    });
+  }
+  resize();
+  input == null ? void 0 : input.addEventListener("input", resize);
+  input == null ? void 0 : input.addEventListener("change", resize);
+  return () => {
+    doc.body.removeChild(ghost);
+    input == null ? void 0 : input.removeEventListener("input", resize);
+    input == null ? void 0 : input.removeEventListener("change", resize);
+  };
+}
+export {
+  autoResizeInput
+};

package/package.json

@@ -1,8 +1,10 @@
 {
-  "type": "module",
   "name": "@zag-js/auto-resize",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Autoresize utilities for the web",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "keywords": [
     "js",
     "utils",
@@ -11,8 +13,6 @@
   "author": "Segun Adebayo <sage@adebayosegun.com>",
   "homepage": "https://github.com/chakra-ui/zag#readme",
   "license": "MIT",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "repository": "https://github.com/chakra-ui/zag/tree/main/packages/utilities/auto-resize",
   "sideEffects": false,
   "files": [
@@ -25,12 +25,12 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "devDependencies": {
-    "@zag-js/dom-utils": "0.1.12"
+    "@zag-js/dom-utils": "0.1.13"
   },
   "scripts": {
-    "build-fast": "tsup src/index.ts --format=esm",
+    "build-fast": "tsup src/index.ts --format=esm,cjs",
     "start": "pnpm build --watch",
-    "build": "tsup src/index.ts --format=esm --dts",
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
     "test": "jest --config ../../../jest.config.js --rootDir tests",
     "lint": "eslint src --ext .ts,.tsx",
     "test-ci": "pnpm test --ci --runInBand -u",