@zag-js/auto-resize
Advanced tools
| declare function autoResizeInput(input: HTMLInputElement | null): (() => void) | undefined; | ||
| export { autoResizeInput }; |
| declare function autoResizeInput(input: HTMLInputElement | null): (() => void) | undefined; | ||
| export { autoResizeInput }; |
| "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.cjs"); | ||
| 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 | ||
| }); |
| // src/autoresize-input.ts | ||
| import { getDocument, getWindow } from "@zag-js/dom-query"; | ||
| import { getVisualStyles } from "./visual-style.mjs"; | ||
| 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 = getDocument(input); | ||
| const win = getWindow(input); | ||
| const ghost = createGhostElement(doc); | ||
| const cssText = 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); | ||
| }; | ||
| } | ||
| export { | ||
| autoResizeInput | ||
| }; |
| declare const autoresizeTextarea: (el: HTMLTextAreaElement | null) => (() => void) | undefined; | ||
| export { autoresizeTextarea }; |
| declare const autoresizeTextarea: (el: HTMLTextAreaElement | null) => (() => void) | undefined; | ||
| export { autoresizeTextarea }; |
| "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-textarea.ts | ||
| var autoresize_textarea_exports = {}; | ||
| __export(autoresize_textarea_exports, { | ||
| autoresizeTextarea: () => autoresizeTextarea | ||
| }); | ||
| module.exports = __toCommonJS(autoresize_textarea_exports); | ||
| var import_dom_query = require("@zag-js/dom-query"); | ||
| var autoresizeTextarea = (el) => { | ||
| if (!el) return; | ||
| const style = (0, import_dom_query.getComputedStyle)(el); | ||
| const win = (0, import_dom_query.getWindow)(el); | ||
| const doc = (0, import_dom_query.getDocument)(el); | ||
| const resize = () => { | ||
| requestAnimationFrame(() => { | ||
| el.style.height = "auto"; | ||
| let newHeight; | ||
| if (style.boxSizing === "content-box") { | ||
| newHeight = el.scrollHeight - (parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)); | ||
| } else { | ||
| newHeight = el.scrollHeight + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth); | ||
| } | ||
| if (style.maxHeight !== "none" && newHeight > parseFloat(style.maxHeight)) { | ||
| if (style.overflowY === "hidden") { | ||
| el.style.overflowY = "scroll"; | ||
| } | ||
| newHeight = parseFloat(style.maxHeight); | ||
| } else if (style.overflowY !== "hidden") { | ||
| el.style.overflowY = "hidden"; | ||
| } | ||
| el.style.height = `${newHeight}px`; | ||
| }); | ||
| }; | ||
| el.addEventListener("input", resize); | ||
| el.form?.addEventListener("reset", resize); | ||
| const elementPrototype = Object.getPrototypeOf(el); | ||
| const descriptor = Object.getOwnPropertyDescriptor(elementPrototype, "value"); | ||
| if (descriptor) { | ||
| Object.defineProperty(el, "value", { | ||
| ...descriptor, | ||
| set(newValue) { | ||
| const prevValue = descriptor.get?.call(this); | ||
| descriptor.set?.call(this, newValue); | ||
| resize(); | ||
| if (prevValue !== newValue) { | ||
| queueMicrotask(() => { | ||
| el.dispatchEvent(new win.InputEvent("input", { bubbles: true })); | ||
| }); | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| const resizeObserver = new win.ResizeObserver(() => { | ||
| requestAnimationFrame(() => resize()); | ||
| }); | ||
| resizeObserver.observe(el); | ||
| const attrObserver = new win.MutationObserver(() => resize()); | ||
| attrObserver.observe(el, { attributes: true, attributeFilter: ["rows", "placeholder"] }); | ||
| doc.fonts?.addEventListener("loadingdone", resize); | ||
| return () => { | ||
| el.removeEventListener("input", resize); | ||
| el.form?.removeEventListener("reset", resize); | ||
| doc.fonts?.removeEventListener("loadingdone", resize); | ||
| resizeObserver.disconnect(); | ||
| attrObserver.disconnect(); | ||
| }; | ||
| }; | ||
| // Annotate the CommonJS export names for ESM import in node: | ||
| 0 && (module.exports = { | ||
| autoresizeTextarea | ||
| }); |
| // src/autoresize-textarea.ts | ||
| import { getComputedStyle, getDocument, getWindow } from "@zag-js/dom-query"; | ||
| var autoresizeTextarea = (el) => { | ||
| if (!el) return; | ||
| const style = getComputedStyle(el); | ||
| const win = getWindow(el); | ||
| const doc = getDocument(el); | ||
| const resize = () => { | ||
| requestAnimationFrame(() => { | ||
| el.style.height = "auto"; | ||
| let newHeight; | ||
| if (style.boxSizing === "content-box") { | ||
| newHeight = el.scrollHeight - (parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)); | ||
| } else { | ||
| newHeight = el.scrollHeight + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth); | ||
| } | ||
| if (style.maxHeight !== "none" && newHeight > parseFloat(style.maxHeight)) { | ||
| if (style.overflowY === "hidden") { | ||
| el.style.overflowY = "scroll"; | ||
| } | ||
| newHeight = parseFloat(style.maxHeight); | ||
| } else if (style.overflowY !== "hidden") { | ||
| el.style.overflowY = "hidden"; | ||
| } | ||
| el.style.height = `${newHeight}px`; | ||
| }); | ||
| }; | ||
| el.addEventListener("input", resize); | ||
| el.form?.addEventListener("reset", resize); | ||
| const elementPrototype = Object.getPrototypeOf(el); | ||
| const descriptor = Object.getOwnPropertyDescriptor(elementPrototype, "value"); | ||
| if (descriptor) { | ||
| Object.defineProperty(el, "value", { | ||
| ...descriptor, | ||
| set(newValue) { | ||
| const prevValue = descriptor.get?.call(this); | ||
| descriptor.set?.call(this, newValue); | ||
| resize(); | ||
| if (prevValue !== newValue) { | ||
| queueMicrotask(() => { | ||
| el.dispatchEvent(new win.InputEvent("input", { bubbles: true })); | ||
| }); | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| const resizeObserver = new win.ResizeObserver(() => { | ||
| requestAnimationFrame(() => resize()); | ||
| }); | ||
| resizeObserver.observe(el); | ||
| const attrObserver = new win.MutationObserver(() => resize()); | ||
| attrObserver.observe(el, { attributes: true, attributeFilter: ["rows", "placeholder"] }); | ||
| doc.fonts?.addEventListener("loadingdone", resize); | ||
| return () => { | ||
| el.removeEventListener("input", resize); | ||
| el.form?.removeEventListener("reset", resize); | ||
| doc.fonts?.removeEventListener("loadingdone", resize); | ||
| resizeObserver.disconnect(); | ||
| attrObserver.disconnect(); | ||
| }; | ||
| }; | ||
| export { | ||
| autoresizeTextarea | ||
| }; |
| declare function getVisualStyles(node: HTMLElement | null): string | undefined; | ||
| declare function getLayoutStyles(node: HTMLElement | null): string | undefined; | ||
| export { getLayoutStyles, getVisualStyles }; |
| declare function getVisualStyles(node: HTMLElement | null): string | undefined; | ||
| declare function getLayoutStyles(node: HTMLElement | null): string | undefined; | ||
| export { getLayoutStyles, getVisualStyles }; |
| "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/visual-style.ts | ||
| var visual_style_exports = {}; | ||
| __export(visual_style_exports, { | ||
| getLayoutStyles: () => getLayoutStyles, | ||
| getVisualStyles: () => getVisualStyles | ||
| }); | ||
| module.exports = __toCommonJS(visual_style_exports); | ||
| var import_dom_query = require("@zag-js/dom-query"); | ||
| function getVisualStyles(node) { | ||
| if (!node) return; | ||
| const style = (0, import_dom_query.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; | ||
| } | ||
| function getLayoutStyles(node) { | ||
| if (!node) return; | ||
| const style = (0, import_dom_query.getComputedStyle)(node); | ||
| return "width:" + style.width + ";max-width:" + style.maxWidth + ";min-width:" + style.minWidth + ";height:" + style.height + ";max-height:" + style.maxHeight + ";min-height:" + style.minHeight + ";box-sizing:" + style.boxSizing; | ||
| } | ||
| // Annotate the CommonJS export names for ESM import in node: | ||
| 0 && (module.exports = { | ||
| getLayoutStyles, | ||
| getVisualStyles | ||
| }); |
| // src/visual-style.ts | ||
| import { getComputedStyle } from "@zag-js/dom-query"; | ||
| function getVisualStyles(node) { | ||
| if (!node) return; | ||
| const style = 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; | ||
| } | ||
| function getLayoutStyles(node) { | ||
| if (!node) return; | ||
| const style = getComputedStyle(node); | ||
| return "width:" + style.width + ";max-width:" + style.maxWidth + ";min-width:" + style.minWidth + ";height:" + style.height + ";max-height:" + style.maxHeight + ";min-height:" + style.minHeight + ";box-sizing:" + style.boxSizing; | ||
| } | ||
| export { | ||
| getLayoutStyles, | ||
| getVisualStyles | ||
| }; |
+2
-5
@@ -1,5 +0,2 @@ | ||
| declare function autoResizeInput(input: HTMLInputElement | null): (() => void) | undefined; | ||
| declare const autoresizeTextarea: (el: HTMLTextAreaElement | null) => (() => void) | undefined; | ||
| export { autoResizeInput, autoresizeTextarea }; | ||
| export { autoResizeInput } from './autoresize-input.mjs'; | ||
| export { autoresizeTextarea } from './autoresize-textarea.mjs'; |
+2
-5
@@ -1,5 +0,2 @@ | ||
| declare function autoResizeInput(input: HTMLInputElement | null): (() => void) | undefined; | ||
| declare const autoresizeTextarea: (el: HTMLTextAreaElement | null) => (() => void) | undefined; | ||
| export { autoResizeInput, autoresizeTextarea }; | ||
| export { autoResizeInput } from './autoresize-input.js'; | ||
| export { autoresizeTextarea } from './autoresize-textarea.js'; |
+23
-101
@@ -1,104 +0,26 @@ | ||
| 'use strict'; | ||
| var domQuery = require('@zag-js/dom-query'); | ||
| // 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) { | ||
| 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 = domQuery.getDocument(input); | ||
| const win = domQuery.getWindow(input); | ||
| const ghost = createGhostElement(doc); | ||
| const cssText = 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); | ||
| }); | ||
| "use strict"; | ||
| var __defProp = Object.defineProperty; | ||
| var __getOwnPropDesc = Object.getOwnPropertyDescriptor; | ||
| var __getOwnPropNames = Object.getOwnPropertyNames; | ||
| var __hasOwnProp = Object.prototype.hasOwnProperty; | ||
| 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 }); | ||
| } | ||
| resize(); | ||
| input?.addEventListener("input", resize); | ||
| input?.addEventListener("change", resize); | ||
| return () => { | ||
| doc.body.removeChild(ghost); | ||
| input?.removeEventListener("input", resize); | ||
| input?.removeEventListener("change", resize); | ||
| }; | ||
| } | ||
| var autoresizeTextarea = (el) => { | ||
| if (!el) return; | ||
| const style = domQuery.getComputedStyle(el); | ||
| const win = domQuery.getWindow(el); | ||
| const doc = domQuery.getDocument(el); | ||
| const resize = () => { | ||
| requestAnimationFrame(() => { | ||
| el.style.height = "auto"; | ||
| let newHeight; | ||
| if (style.boxSizing === "content-box") { | ||
| newHeight = el.scrollHeight - (parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)); | ||
| } else { | ||
| newHeight = el.scrollHeight + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth); | ||
| } | ||
| if (style.maxHeight !== "none" && newHeight > parseFloat(style.maxHeight)) { | ||
| if (style.overflowY === "hidden") { | ||
| el.style.overflowY = "scroll"; | ||
| } | ||
| newHeight = parseFloat(style.maxHeight); | ||
| } else if (style.overflowY !== "hidden") { | ||
| el.style.overflowY = "hidden"; | ||
| } | ||
| el.style.height = `${newHeight}px`; | ||
| }); | ||
| }; | ||
| el.addEventListener("input", resize); | ||
| el.form?.addEventListener("reset", resize); | ||
| const elementPrototype = Object.getPrototypeOf(el); | ||
| const descriptor = Object.getOwnPropertyDescriptor(elementPrototype, "value"); | ||
| if (descriptor) { | ||
| Object.defineProperty(el, "value", { | ||
| ...descriptor, | ||
| set(newValue) { | ||
| const prevValue = descriptor.get?.call(this); | ||
| descriptor.set?.call(this, newValue); | ||
| resize(); | ||
| if (prevValue !== newValue) { | ||
| queueMicrotask(() => { | ||
| el.dispatchEvent(new win.InputEvent("input", { bubbles: true })); | ||
| }); | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| const resizeObserver = new win.ResizeObserver(() => { | ||
| requestAnimationFrame(() => resize()); | ||
| }); | ||
| resizeObserver.observe(el); | ||
| const attrObserver = new win.MutationObserver(() => resize()); | ||
| attrObserver.observe(el, { attributes: true, attributeFilter: ["rows", "placeholder"] }); | ||
| doc.fonts?.addEventListener("loadingdone", resize); | ||
| return () => { | ||
| el.removeEventListener("input", resize); | ||
| el.form?.removeEventListener("reset", resize); | ||
| doc.fonts?.removeEventListener("loadingdone", resize); | ||
| resizeObserver.disconnect(); | ||
| attrObserver.disconnect(); | ||
| }; | ||
| return to; | ||
| }; | ||
| var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default")); | ||
| var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); | ||
| exports.autoResizeInput = autoResizeInput; | ||
| exports.autoresizeTextarea = autoresizeTextarea; | ||
| // src/index.ts | ||
| var index_exports = {}; | ||
| module.exports = __toCommonJS(index_exports); | ||
| __reExport(index_exports, require("./autoresize-input.cjs"), module.exports); | ||
| __reExport(index_exports, require("./autoresize-textarea.cjs"), module.exports); | ||
| // Annotate the CommonJS export names for ESM import in node: | ||
| 0 && (module.exports = { | ||
| ...require("./autoresize-input.cjs"), | ||
| ...require("./autoresize-textarea.cjs") | ||
| }); |
+3
-101
@@ -1,101 +0,3 @@ | ||
| import { getDocument, getWindow, getComputedStyle } from '@zag-js/dom-query'; | ||
| // src/autoresize-input.ts | ||
| function getVisualStyles(node) { | ||
| if (!node) return; | ||
| const style = 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) { | ||
| 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); | ||
| const cssText = 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); | ||
| }; | ||
| } | ||
| var autoresizeTextarea = (el) => { | ||
| if (!el) return; | ||
| const style = getComputedStyle(el); | ||
| const win = getWindow(el); | ||
| const doc = getDocument(el); | ||
| const resize = () => { | ||
| requestAnimationFrame(() => { | ||
| el.style.height = "auto"; | ||
| let newHeight; | ||
| if (style.boxSizing === "content-box") { | ||
| newHeight = el.scrollHeight - (parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)); | ||
| } else { | ||
| newHeight = el.scrollHeight + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth); | ||
| } | ||
| if (style.maxHeight !== "none" && newHeight > parseFloat(style.maxHeight)) { | ||
| if (style.overflowY === "hidden") { | ||
| el.style.overflowY = "scroll"; | ||
| } | ||
| newHeight = parseFloat(style.maxHeight); | ||
| } else if (style.overflowY !== "hidden") { | ||
| el.style.overflowY = "hidden"; | ||
| } | ||
| el.style.height = `${newHeight}px`; | ||
| }); | ||
| }; | ||
| el.addEventListener("input", resize); | ||
| el.form?.addEventListener("reset", resize); | ||
| const elementPrototype = Object.getPrototypeOf(el); | ||
| const descriptor = Object.getOwnPropertyDescriptor(elementPrototype, "value"); | ||
| if (descriptor) { | ||
| Object.defineProperty(el, "value", { | ||
| ...descriptor, | ||
| set(newValue) { | ||
| const prevValue = descriptor.get?.call(this); | ||
| descriptor.set?.call(this, newValue); | ||
| resize(); | ||
| if (prevValue !== newValue) { | ||
| queueMicrotask(() => { | ||
| el.dispatchEvent(new win.InputEvent("input", { bubbles: true })); | ||
| }); | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| const resizeObserver = new win.ResizeObserver(() => { | ||
| requestAnimationFrame(() => resize()); | ||
| }); | ||
| resizeObserver.observe(el); | ||
| const attrObserver = new win.MutationObserver(() => resize()); | ||
| attrObserver.observe(el, { attributes: true, attributeFilter: ["rows", "placeholder"] }); | ||
| doc.fonts?.addEventListener("loadingdone", resize); | ||
| return () => { | ||
| el.removeEventListener("input", resize); | ||
| el.form?.removeEventListener("reset", resize); | ||
| doc.fonts?.removeEventListener("loadingdone", resize); | ||
| resizeObserver.disconnect(); | ||
| attrObserver.disconnect(); | ||
| }; | ||
| }; | ||
| export { autoResizeInput, autoresizeTextarea }; | ||
| // src/index.ts | ||
| export * from "./autoresize-input.mjs"; | ||
| export * from "./autoresize-textarea.mjs"; |
+2
-2
| { | ||
| "name": "@zag-js/auto-resize", | ||
| "version": "1.34.1", | ||
| "version": "1.35.0", | ||
| "description": "Autoresize utilities for the web", | ||
@@ -25,3 +25,3 @@ "keywords": [ | ||
| "dependencies": { | ||
| "@zag-js/dom-query": "1.34.1" | ||
| "@zag-js/dom-query": "1.35.0" | ||
| }, | ||
@@ -28,0 +28,0 @@ "devDependencies": { |
Major refactor
Supply chain riskPackage 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
18410
53.98%19
171.43%348
68.12%1
Infinity%+ Added
+ Added
- Removed
- Removed
Updated