@zag-js/auto-resize 0.0.0-dev-20220615060231

package/README.md

@@ -0,0 +1,22 @@
+# @zag-js/auto-resize
+
+Autoresize utilities for the web
+
+## Installation
+
+```sh
+yarn add  @zag-js/auto-resize
+# or
+npm i  @zag-js/auto-resize
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md)
+for details.
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE).

package/dist/index.d.ts

@@ -0,0 +1 @@
+export declare function autoResizeInput(input: HTMLInputElement | null): () => void;

package/dist/index.js

@@ -0,0 +1,79 @@
+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 isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getOwnerDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function getOwnerWindow(el) {
+  var _a;
+  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+}
+
+// src/index.ts
+function copyVisualStyles(fromEl, toEl) {
+  if (!fromEl)
+    return;
+  const win = getOwnerWindow(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 = getOwnerDocument(input);
+  const win = getOwnerWindow(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);
+  };
+}

package/dist/index.mjs

@@ -0,0 +1,57 @@
+// ../dom/dist/index.mjs
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getOwnerDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function getOwnerWindow(el) {
+  var _a;
+  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+}
+
+// src/index.ts
+function copyVisualStyles(fromEl, toEl) {
+  if (!fromEl)
+    return;
+  const win = getOwnerWindow(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 = getOwnerDocument(input);
+  const win = getOwnerWindow(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

@@ -0,0 +1,39 @@
+{
+  "name": "@zag-js/auto-resize",
+  "version": "0.0.0-dev-20220615060231",
+  "description": "Autoresize utilities for the web",
+  "keywords": [
+    "js",
+    "utils",
+    "auto-resize"
+  ],
+  "author": "Segun Adebayo <sage@adebayosegun.com>",
+  "homepage": "https://github.com/chakra-ui/zag#readme",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/utilities/auto-resize",
+  "sideEffects": false,
+  "files": [
+    "dist/**/*"
+  ],
+  "scripts": {
+    "build:fast": "yarn zag build",
+    "start": "yarn zag build --watch",
+    "build": "yarn zag build --prod",
+    "test": "jest --config ../../../jest.config.js --rootDir tests",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test:ci": "yarn test --ci --runInBand --updateSnapshot",
+    "test:watch": "yarn test --watchAll"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/zag/issues"
+  },
+  "devDependencies": {
+    "@zag-js/dom-utils": "0.0.0-dev-20220615060231"
+  }
+}