@zag-js/auto-resize 1.34.0 → 1.35.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/autoresize-input.d.mts +3 -0
- package/dist/autoresize-input.d.ts +3 -0
- package/dist/autoresize-input.js +61 -0
- package/dist/autoresize-input.mjs +36 -0
- package/dist/autoresize-textarea.d.mts +3 -0
- package/dist/autoresize-textarea.d.ts +3 -0
- package/dist/autoresize-textarea.js +89 -0
- package/dist/autoresize-textarea.mjs +64 -0
- package/dist/index.d.mts +2 -5
- package/dist/index.d.ts +2 -5
- package/dist/index.js +23 -101
- package/dist/index.mjs +3 -101
- package/dist/visual-style.d.mts +4 -0
- package/dist/visual-style.d.ts +4 -0
- package/dist/visual-style.js +42 -0
- package/dist/visual-style.mjs +16 -0
- package/package.json +2 -2
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/autoresize-input.ts
|
|
21
|
+
var autoresize_input_exports = {};
|
|
22
|
+
__export(autoresize_input_exports, {
|
|
23
|
+
autoResizeInput: () => autoResizeInput
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(autoresize_input_exports);
|
|
26
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
27
|
+
var import_visual_style = require("./visual-style.cjs");
|
|
28
|
+
function createGhostElement(doc) {
|
|
29
|
+
const el = doc.createElement("div");
|
|
30
|
+
el.id = "ghost";
|
|
31
|
+
el.style.cssText = "display:inline-block;height:0;overflow:hidden;position:absolute;top:0;visibility:hidden;white-space:nowrap;";
|
|
32
|
+
doc.body.appendChild(el);
|
|
33
|
+
return el;
|
|
34
|
+
}
|
|
35
|
+
function autoResizeInput(input) {
|
|
36
|
+
if (!input) return;
|
|
37
|
+
const doc = (0, import_dom_query.getDocument)(input);
|
|
38
|
+
const win = (0, import_dom_query.getWindow)(input);
|
|
39
|
+
const ghost = createGhostElement(doc);
|
|
40
|
+
const cssText = (0, import_visual_style.getVisualStyles)(input);
|
|
41
|
+
if (cssText) ghost.style.cssText += cssText;
|
|
42
|
+
function resize() {
|
|
43
|
+
win.requestAnimationFrame(() => {
|
|
44
|
+
ghost.innerHTML = input.value;
|
|
45
|
+
const rect = win.getComputedStyle(ghost);
|
|
46
|
+
input?.style.setProperty("width", rect.width);
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
resize();
|
|
50
|
+
input?.addEventListener("input", resize);
|
|
51
|
+
input?.addEventListener("change", resize);
|
|
52
|
+
return () => {
|
|
53
|
+
doc.body.removeChild(ghost);
|
|
54
|
+
input?.removeEventListener("input", resize);
|
|
55
|
+
input?.removeEventListener("change", resize);
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
59
|
+
0 && (module.exports = {
|
|
60
|
+
autoResizeInput
|
|
61
|
+
});
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
// src/autoresize-input.ts
|
|
2
|
+
import { getDocument, getWindow } from "@zag-js/dom-query";
|
|
3
|
+
import { getVisualStyles } from "./visual-style.mjs";
|
|
4
|
+
function createGhostElement(doc) {
|
|
5
|
+
const el = doc.createElement("div");
|
|
6
|
+
el.id = "ghost";
|
|
7
|
+
el.style.cssText = "display:inline-block;height:0;overflow:hidden;position:absolute;top:0;visibility:hidden;white-space:nowrap;";
|
|
8
|
+
doc.body.appendChild(el);
|
|
9
|
+
return el;
|
|
10
|
+
}
|
|
11
|
+
function autoResizeInput(input) {
|
|
12
|
+
if (!input) return;
|
|
13
|
+
const doc = getDocument(input);
|
|
14
|
+
const win = getWindow(input);
|
|
15
|
+
const ghost = createGhostElement(doc);
|
|
16
|
+
const cssText = getVisualStyles(input);
|
|
17
|
+
if (cssText) ghost.style.cssText += cssText;
|
|
18
|
+
function resize() {
|
|
19
|
+
win.requestAnimationFrame(() => {
|
|
20
|
+
ghost.innerHTML = input.value;
|
|
21
|
+
const rect = win.getComputedStyle(ghost);
|
|
22
|
+
input?.style.setProperty("width", rect.width);
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
resize();
|
|
26
|
+
input?.addEventListener("input", resize);
|
|
27
|
+
input?.addEventListener("change", resize);
|
|
28
|
+
return () => {
|
|
29
|
+
doc.body.removeChild(ghost);
|
|
30
|
+
input?.removeEventListener("input", resize);
|
|
31
|
+
input?.removeEventListener("change", resize);
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
export {
|
|
35
|
+
autoResizeInput
|
|
36
|
+
};
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/autoresize-textarea.ts
|
|
21
|
+
var autoresize_textarea_exports = {};
|
|
22
|
+
__export(autoresize_textarea_exports, {
|
|
23
|
+
autoresizeTextarea: () => autoresizeTextarea
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(autoresize_textarea_exports);
|
|
26
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
27
|
+
var autoresizeTextarea = (el) => {
|
|
28
|
+
if (!el) return;
|
|
29
|
+
const style = (0, import_dom_query.getComputedStyle)(el);
|
|
30
|
+
const win = (0, import_dom_query.getWindow)(el);
|
|
31
|
+
const doc = (0, import_dom_query.getDocument)(el);
|
|
32
|
+
const resize = () => {
|
|
33
|
+
requestAnimationFrame(() => {
|
|
34
|
+
el.style.height = "auto";
|
|
35
|
+
let newHeight;
|
|
36
|
+
if (style.boxSizing === "content-box") {
|
|
37
|
+
newHeight = el.scrollHeight - (parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
|
|
38
|
+
} else {
|
|
39
|
+
newHeight = el.scrollHeight + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
|
|
40
|
+
}
|
|
41
|
+
if (style.maxHeight !== "none" && newHeight > parseFloat(style.maxHeight)) {
|
|
42
|
+
if (style.overflowY === "hidden") {
|
|
43
|
+
el.style.overflowY = "scroll";
|
|
44
|
+
}
|
|
45
|
+
newHeight = parseFloat(style.maxHeight);
|
|
46
|
+
} else if (style.overflowY !== "hidden") {
|
|
47
|
+
el.style.overflowY = "hidden";
|
|
48
|
+
}
|
|
49
|
+
el.style.height = `${newHeight}px`;
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
el.addEventListener("input", resize);
|
|
53
|
+
el.form?.addEventListener("reset", resize);
|
|
54
|
+
const elementPrototype = Object.getPrototypeOf(el);
|
|
55
|
+
const descriptor = Object.getOwnPropertyDescriptor(elementPrototype, "value");
|
|
56
|
+
if (descriptor) {
|
|
57
|
+
Object.defineProperty(el, "value", {
|
|
58
|
+
...descriptor,
|
|
59
|
+
set(newValue) {
|
|
60
|
+
const prevValue = descriptor.get?.call(this);
|
|
61
|
+
descriptor.set?.call(this, newValue);
|
|
62
|
+
resize();
|
|
63
|
+
if (prevValue !== newValue) {
|
|
64
|
+
queueMicrotask(() => {
|
|
65
|
+
el.dispatchEvent(new win.InputEvent("input", { bubbles: true }));
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
const resizeObserver = new win.ResizeObserver(() => {
|
|
72
|
+
requestAnimationFrame(() => resize());
|
|
73
|
+
});
|
|
74
|
+
resizeObserver.observe(el);
|
|
75
|
+
const attrObserver = new win.MutationObserver(() => resize());
|
|
76
|
+
attrObserver.observe(el, { attributes: true, attributeFilter: ["rows", "placeholder"] });
|
|
77
|
+
doc.fonts?.addEventListener("loadingdone", resize);
|
|
78
|
+
return () => {
|
|
79
|
+
el.removeEventListener("input", resize);
|
|
80
|
+
el.form?.removeEventListener("reset", resize);
|
|
81
|
+
doc.fonts?.removeEventListener("loadingdone", resize);
|
|
82
|
+
resizeObserver.disconnect();
|
|
83
|
+
attrObserver.disconnect();
|
|
84
|
+
};
|
|
85
|
+
};
|
|
86
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
87
|
+
0 && (module.exports = {
|
|
88
|
+
autoresizeTextarea
|
|
89
|
+
});
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
// src/autoresize-textarea.ts
|
|
2
|
+
import { getComputedStyle, getDocument, getWindow } from "@zag-js/dom-query";
|
|
3
|
+
var autoresizeTextarea = (el) => {
|
|
4
|
+
if (!el) return;
|
|
5
|
+
const style = getComputedStyle(el);
|
|
6
|
+
const win = getWindow(el);
|
|
7
|
+
const doc = getDocument(el);
|
|
8
|
+
const resize = () => {
|
|
9
|
+
requestAnimationFrame(() => {
|
|
10
|
+
el.style.height = "auto";
|
|
11
|
+
let newHeight;
|
|
12
|
+
if (style.boxSizing === "content-box") {
|
|
13
|
+
newHeight = el.scrollHeight - (parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
|
|
14
|
+
} else {
|
|
15
|
+
newHeight = el.scrollHeight + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
|
|
16
|
+
}
|
|
17
|
+
if (style.maxHeight !== "none" && newHeight > parseFloat(style.maxHeight)) {
|
|
18
|
+
if (style.overflowY === "hidden") {
|
|
19
|
+
el.style.overflowY = "scroll";
|
|
20
|
+
}
|
|
21
|
+
newHeight = parseFloat(style.maxHeight);
|
|
22
|
+
} else if (style.overflowY !== "hidden") {
|
|
23
|
+
el.style.overflowY = "hidden";
|
|
24
|
+
}
|
|
25
|
+
el.style.height = `${newHeight}px`;
|
|
26
|
+
});
|
|
27
|
+
};
|
|
28
|
+
el.addEventListener("input", resize);
|
|
29
|
+
el.form?.addEventListener("reset", resize);
|
|
30
|
+
const elementPrototype = Object.getPrototypeOf(el);
|
|
31
|
+
const descriptor = Object.getOwnPropertyDescriptor(elementPrototype, "value");
|
|
32
|
+
if (descriptor) {
|
|
33
|
+
Object.defineProperty(el, "value", {
|
|
34
|
+
...descriptor,
|
|
35
|
+
set(newValue) {
|
|
36
|
+
const prevValue = descriptor.get?.call(this);
|
|
37
|
+
descriptor.set?.call(this, newValue);
|
|
38
|
+
resize();
|
|
39
|
+
if (prevValue !== newValue) {
|
|
40
|
+
queueMicrotask(() => {
|
|
41
|
+
el.dispatchEvent(new win.InputEvent("input", { bubbles: true }));
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
const resizeObserver = new win.ResizeObserver(() => {
|
|
48
|
+
requestAnimationFrame(() => resize());
|
|
49
|
+
});
|
|
50
|
+
resizeObserver.observe(el);
|
|
51
|
+
const attrObserver = new win.MutationObserver(() => resize());
|
|
52
|
+
attrObserver.observe(el, { attributes: true, attributeFilter: ["rows", "placeholder"] });
|
|
53
|
+
doc.fonts?.addEventListener("loadingdone", resize);
|
|
54
|
+
return () => {
|
|
55
|
+
el.removeEventListener("input", resize);
|
|
56
|
+
el.form?.removeEventListener("reset", resize);
|
|
57
|
+
doc.fonts?.removeEventListener("loadingdone", resize);
|
|
58
|
+
resizeObserver.disconnect();
|
|
59
|
+
attrObserver.disconnect();
|
|
60
|
+
};
|
|
61
|
+
};
|
|
62
|
+
export {
|
|
63
|
+
autoresizeTextarea
|
|
64
|
+
};
|
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
declare const autoresizeTextarea: (el: HTMLTextAreaElement | null) => (() => void) | undefined;
|
|
4
|
-
|
|
5
|
-
export { autoResizeInput, autoresizeTextarea };
|
|
1
|
+
export { autoResizeInput } from './autoresize-input.mjs';
|
|
2
|
+
export { autoresizeTextarea } from './autoresize-textarea.mjs';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
declare const autoresizeTextarea: (el: HTMLTextAreaElement | null) => (() => void) | undefined;
|
|
4
|
-
|
|
5
|
-
export { autoResizeInput, autoresizeTextarea };
|
|
1
|
+
export { autoResizeInput } from './autoresize-input.js';
|
|
2
|
+
export { autoresizeTextarea } from './autoresize-textarea.js';
|
package/dist/index.js
CHANGED
|
@@ -1,104 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
if (
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
// src/autoresize-input.ts
|
|
13
|
-
function createGhostElement(doc) {
|
|
14
|
-
var el = doc.createElement("div");
|
|
15
|
-
el.id = "ghost";
|
|
16
|
-
el.style.cssText = "display:inline-block;height:0;overflow:hidden;position:absolute;top:0;visibility:hidden;white-space:nowrap;";
|
|
17
|
-
doc.body.appendChild(el);
|
|
18
|
-
return el;
|
|
19
|
-
}
|
|
20
|
-
function autoResizeInput(input) {
|
|
21
|
-
if (!input) return;
|
|
22
|
-
const doc = domQuery.getDocument(input);
|
|
23
|
-
const win = domQuery.getWindow(input);
|
|
24
|
-
const ghost = createGhostElement(doc);
|
|
25
|
-
const cssText = getVisualStyles(input);
|
|
26
|
-
if (cssText) ghost.style.cssText += cssText;
|
|
27
|
-
function resize() {
|
|
28
|
-
win.requestAnimationFrame(() => {
|
|
29
|
-
ghost.innerHTML = input.value;
|
|
30
|
-
const rect = win.getComputedStyle(ghost);
|
|
31
|
-
input?.style.setProperty("width", rect.width);
|
|
32
|
-
});
|
|
33
|
-
}
|
|
34
|
-
resize();
|
|
35
|
-
input?.addEventListener("input", resize);
|
|
36
|
-
input?.addEventListener("change", resize);
|
|
37
|
-
return () => {
|
|
38
|
-
doc.body.removeChild(ghost);
|
|
39
|
-
input?.removeEventListener("input", resize);
|
|
40
|
-
input?.removeEventListener("change", resize);
|
|
41
|
-
};
|
|
42
|
-
}
|
|
43
|
-
var autoresizeTextarea = (el) => {
|
|
44
|
-
if (!el) return;
|
|
45
|
-
const style = domQuery.getComputedStyle(el);
|
|
46
|
-
const win = domQuery.getWindow(el);
|
|
47
|
-
const doc = domQuery.getDocument(el);
|
|
48
|
-
const resize = () => {
|
|
49
|
-
requestAnimationFrame(() => {
|
|
50
|
-
el.style.height = "auto";
|
|
51
|
-
let newHeight;
|
|
52
|
-
if (style.boxSizing === "content-box") {
|
|
53
|
-
newHeight = el.scrollHeight - (parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
|
|
54
|
-
} else {
|
|
55
|
-
newHeight = el.scrollHeight + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
|
|
56
|
-
}
|
|
57
|
-
if (style.maxHeight !== "none" && newHeight > parseFloat(style.maxHeight)) {
|
|
58
|
-
if (style.overflowY === "hidden") {
|
|
59
|
-
el.style.overflowY = "scroll";
|
|
60
|
-
}
|
|
61
|
-
newHeight = parseFloat(style.maxHeight);
|
|
62
|
-
} else if (style.overflowY !== "hidden") {
|
|
63
|
-
el.style.overflowY = "hidden";
|
|
64
|
-
}
|
|
65
|
-
el.style.height = `${newHeight}px`;
|
|
66
|
-
});
|
|
67
|
-
};
|
|
68
|
-
el.addEventListener("input", resize);
|
|
69
|
-
el.form?.addEventListener("reset", resize);
|
|
70
|
-
const elementPrototype = Object.getPrototypeOf(el);
|
|
71
|
-
const descriptor = Object.getOwnPropertyDescriptor(elementPrototype, "value");
|
|
72
|
-
if (descriptor) {
|
|
73
|
-
Object.defineProperty(el, "value", {
|
|
74
|
-
...descriptor,
|
|
75
|
-
set(newValue) {
|
|
76
|
-
const prevValue = descriptor.get?.call(this);
|
|
77
|
-
descriptor.set?.call(this, newValue);
|
|
78
|
-
resize();
|
|
79
|
-
if (prevValue !== newValue) {
|
|
80
|
-
queueMicrotask(() => {
|
|
81
|
-
el.dispatchEvent(new win.InputEvent("input", { bubbles: true }));
|
|
82
|
-
});
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
});
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __copyProps = (to, from, except, desc) => {
|
|
7
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
+
for (let key of __getOwnPropNames(from))
|
|
9
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
86
11
|
}
|
|
87
|
-
|
|
88
|
-
requestAnimationFrame(() => resize());
|
|
89
|
-
});
|
|
90
|
-
resizeObserver.observe(el);
|
|
91
|
-
const attrObserver = new win.MutationObserver(() => resize());
|
|
92
|
-
attrObserver.observe(el, { attributes: true, attributeFilter: ["rows", "placeholder"] });
|
|
93
|
-
doc.fonts?.addEventListener("loadingdone", resize);
|
|
94
|
-
return () => {
|
|
95
|
-
el.removeEventListener("input", resize);
|
|
96
|
-
el.form?.removeEventListener("reset", resize);
|
|
97
|
-
doc.fonts?.removeEventListener("loadingdone", resize);
|
|
98
|
-
resizeObserver.disconnect();
|
|
99
|
-
attrObserver.disconnect();
|
|
100
|
-
};
|
|
12
|
+
return to;
|
|
101
13
|
};
|
|
14
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
15
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
102
16
|
|
|
103
|
-
|
|
104
|
-
|
|
17
|
+
// src/index.ts
|
|
18
|
+
var index_exports = {};
|
|
19
|
+
module.exports = __toCommonJS(index_exports);
|
|
20
|
+
__reExport(index_exports, require("./autoresize-input.cjs"), module.exports);
|
|
21
|
+
__reExport(index_exports, require("./autoresize-textarea.cjs"), module.exports);
|
|
22
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
23
|
+
0 && (module.exports = {
|
|
24
|
+
...require("./autoresize-input.cjs"),
|
|
25
|
+
...require("./autoresize-textarea.cjs")
|
|
26
|
+
});
|
package/dist/index.mjs
CHANGED
|
@@ -1,101 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
function getVisualStyles(node) {
|
|
5
|
-
if (!node) return;
|
|
6
|
-
const style = getComputedStyle(node);
|
|
7
|
-
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;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
// src/autoresize-input.ts
|
|
11
|
-
function createGhostElement(doc) {
|
|
12
|
-
var el = doc.createElement("div");
|
|
13
|
-
el.id = "ghost";
|
|
14
|
-
el.style.cssText = "display:inline-block;height:0;overflow:hidden;position:absolute;top:0;visibility:hidden;white-space:nowrap;";
|
|
15
|
-
doc.body.appendChild(el);
|
|
16
|
-
return el;
|
|
17
|
-
}
|
|
18
|
-
function autoResizeInput(input) {
|
|
19
|
-
if (!input) return;
|
|
20
|
-
const doc = getDocument(input);
|
|
21
|
-
const win = getWindow(input);
|
|
22
|
-
const ghost = createGhostElement(doc);
|
|
23
|
-
const cssText = getVisualStyles(input);
|
|
24
|
-
if (cssText) ghost.style.cssText += cssText;
|
|
25
|
-
function resize() {
|
|
26
|
-
win.requestAnimationFrame(() => {
|
|
27
|
-
ghost.innerHTML = input.value;
|
|
28
|
-
const rect = win.getComputedStyle(ghost);
|
|
29
|
-
input?.style.setProperty("width", rect.width);
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
resize();
|
|
33
|
-
input?.addEventListener("input", resize);
|
|
34
|
-
input?.addEventListener("change", resize);
|
|
35
|
-
return () => {
|
|
36
|
-
doc.body.removeChild(ghost);
|
|
37
|
-
input?.removeEventListener("input", resize);
|
|
38
|
-
input?.removeEventListener("change", resize);
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
var autoresizeTextarea = (el) => {
|
|
42
|
-
if (!el) return;
|
|
43
|
-
const style = getComputedStyle(el);
|
|
44
|
-
const win = getWindow(el);
|
|
45
|
-
const doc = getDocument(el);
|
|
46
|
-
const resize = () => {
|
|
47
|
-
requestAnimationFrame(() => {
|
|
48
|
-
el.style.height = "auto";
|
|
49
|
-
let newHeight;
|
|
50
|
-
if (style.boxSizing === "content-box") {
|
|
51
|
-
newHeight = el.scrollHeight - (parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
|
|
52
|
-
} else {
|
|
53
|
-
newHeight = el.scrollHeight + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
|
|
54
|
-
}
|
|
55
|
-
if (style.maxHeight !== "none" && newHeight > parseFloat(style.maxHeight)) {
|
|
56
|
-
if (style.overflowY === "hidden") {
|
|
57
|
-
el.style.overflowY = "scroll";
|
|
58
|
-
}
|
|
59
|
-
newHeight = parseFloat(style.maxHeight);
|
|
60
|
-
} else if (style.overflowY !== "hidden") {
|
|
61
|
-
el.style.overflowY = "hidden";
|
|
62
|
-
}
|
|
63
|
-
el.style.height = `${newHeight}px`;
|
|
64
|
-
});
|
|
65
|
-
};
|
|
66
|
-
el.addEventListener("input", resize);
|
|
67
|
-
el.form?.addEventListener("reset", resize);
|
|
68
|
-
const elementPrototype = Object.getPrototypeOf(el);
|
|
69
|
-
const descriptor = Object.getOwnPropertyDescriptor(elementPrototype, "value");
|
|
70
|
-
if (descriptor) {
|
|
71
|
-
Object.defineProperty(el, "value", {
|
|
72
|
-
...descriptor,
|
|
73
|
-
set(newValue) {
|
|
74
|
-
const prevValue = descriptor.get?.call(this);
|
|
75
|
-
descriptor.set?.call(this, newValue);
|
|
76
|
-
resize();
|
|
77
|
-
if (prevValue !== newValue) {
|
|
78
|
-
queueMicrotask(() => {
|
|
79
|
-
el.dispatchEvent(new win.InputEvent("input", { bubbles: true }));
|
|
80
|
-
});
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
const resizeObserver = new win.ResizeObserver(() => {
|
|
86
|
-
requestAnimationFrame(() => resize());
|
|
87
|
-
});
|
|
88
|
-
resizeObserver.observe(el);
|
|
89
|
-
const attrObserver = new win.MutationObserver(() => resize());
|
|
90
|
-
attrObserver.observe(el, { attributes: true, attributeFilter: ["rows", "placeholder"] });
|
|
91
|
-
doc.fonts?.addEventListener("loadingdone", resize);
|
|
92
|
-
return () => {
|
|
93
|
-
el.removeEventListener("input", resize);
|
|
94
|
-
el.form?.removeEventListener("reset", resize);
|
|
95
|
-
doc.fonts?.removeEventListener("loadingdone", resize);
|
|
96
|
-
resizeObserver.disconnect();
|
|
97
|
-
attrObserver.disconnect();
|
|
98
|
-
};
|
|
99
|
-
};
|
|
100
|
-
|
|
101
|
-
export { autoResizeInput, autoresizeTextarea };
|
|
1
|
+
// src/index.ts
|
|
2
|
+
export * from "./autoresize-input.mjs";
|
|
3
|
+
export * from "./autoresize-textarea.mjs";
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/visual-style.ts
|
|
21
|
+
var visual_style_exports = {};
|
|
22
|
+
__export(visual_style_exports, {
|
|
23
|
+
getLayoutStyles: () => getLayoutStyles,
|
|
24
|
+
getVisualStyles: () => getVisualStyles
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(visual_style_exports);
|
|
27
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
28
|
+
function getVisualStyles(node) {
|
|
29
|
+
if (!node) return;
|
|
30
|
+
const style = (0, import_dom_query.getComputedStyle)(node);
|
|
31
|
+
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;
|
|
32
|
+
}
|
|
33
|
+
function getLayoutStyles(node) {
|
|
34
|
+
if (!node) return;
|
|
35
|
+
const style = (0, import_dom_query.getComputedStyle)(node);
|
|
36
|
+
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;
|
|
37
|
+
}
|
|
38
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
39
|
+
0 && (module.exports = {
|
|
40
|
+
getLayoutStyles,
|
|
41
|
+
getVisualStyles
|
|
42
|
+
});
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
// src/visual-style.ts
|
|
2
|
+
import { getComputedStyle } from "@zag-js/dom-query";
|
|
3
|
+
function getVisualStyles(node) {
|
|
4
|
+
if (!node) return;
|
|
5
|
+
const style = getComputedStyle(node);
|
|
6
|
+
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;
|
|
7
|
+
}
|
|
8
|
+
function getLayoutStyles(node) {
|
|
9
|
+
if (!node) return;
|
|
10
|
+
const style = getComputedStyle(node);
|
|
11
|
+
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;
|
|
12
|
+
}
|
|
13
|
+
export {
|
|
14
|
+
getLayoutStyles,
|
|
15
|
+
getVisualStyles
|
|
16
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/auto-resize",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.35.0",
|
|
4
4
|
"description": "Autoresize utilities for the web",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@zag-js/dom-query": "1.
|
|
25
|
+
"@zag-js/dom-query": "1.35.0"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"clean-package": "2.2.0"
|