UNPKG

@zag-js/auto-resize

Version:

Autoresize utilities for the web

62 lines (60 loc) 2.27 kB
"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/autoresize-input.ts var autoresize_input_exports = {}; __export(autoresize_input_exports, { autoResizeInput: () => autoResizeInput }); module.exports = __toCommonJS(autoresize_input_exports); var import_dom_query = require("@zag-js/dom-query"); var import_visual_style = require("./visual-style.js"); function createGhostElement(doc) { const 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 = (0, import_dom_query.getDocument)(input); const win = (0, import_dom_query.getWindow)(input); const ghost = createGhostElement(doc); const cssText = (0, import_visual_style.getVisualStyles)(input); if (cssText) ghost.style.cssText += cssText; function resize() { win.requestAnimationFrame(() => { ghost.innerHTML = input.value; const rect = win.getComputedStyle(ghost); input?.style.setProperty("width", rect.width); }); } resize(); input?.addEventListener("input", resize); input?.addEventListener("change", resize); return () => { doc.body.removeChild(ghost); input?.removeEventListener("input", resize); input?.removeEventListener("change", resize); }; } // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { autoResizeInput });