@uxf/core 11.52.0 → 11.53.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/README.md +34 -0
- package/package.json +1 -1
- package/utils/adjust-textarea-height.d.ts +1 -0
- package/utils/adjust-textarea-height.js +13 -0
- package/utils/adjust-textarea-height.test.d.ts +1 -0
- package/utils/adjust-textarea-height.test.js +83 -0
- package/utils/assert-never.d.ts +1 -0
- package/utils/assert-never.js +7 -0
- package/utils/assert-never.test.d.ts +1 -0
- package/utils/assert-never.test.js +9 -0
package/README.md
CHANGED
|
@@ -88,6 +88,26 @@ cookie.delete("cookie-name", /* options (optional) */);
|
|
|
88
88
|
|
|
89
89
|
## Utils
|
|
90
90
|
|
|
91
|
+
### adjustTextareaHeight
|
|
92
|
+
|
|
93
|
+
Dynamically adjusts the height of a `<textarea>` based on its content and an optional number of rows.
|
|
94
|
+
|
|
95
|
+
#### Parameters
|
|
96
|
+
- **`element`**: The `<textarea>` to adjust.
|
|
97
|
+
- **`rows`** (optional): Minimum visible rows. Default is `4`.
|
|
98
|
+
|
|
99
|
+
#### Behavior
|
|
100
|
+
- Resets height to `"auto"` to measure content height.
|
|
101
|
+
- Adjusts height to fit content or the minimum height based on the `rows` parameter, calculated using `line-height` and `font-size`.
|
|
102
|
+
|
|
103
|
+
#### Usage
|
|
104
|
+
```typescript
|
|
105
|
+
adjustTextareaHeight(textarea); // Adjusts height (min 4 rows)
|
|
106
|
+
adjustTextareaHeight(textarea, 6); // With 6-row minimum
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
> **Note**: Requires valid `line-height` and `font-size` styles for accurate sizing.
|
|
110
|
+
|
|
91
111
|
### cx, cxa
|
|
92
112
|
It is our fork of `clsx` library https://github.com/lukeed/clsx
|
|
93
113
|
|
|
@@ -159,6 +179,20 @@ formatBytes(17.5 * 1024);
|
|
|
159
179
|
//=> "17.5 kB"
|
|
160
180
|
```
|
|
161
181
|
|
|
182
|
+
### assertNever
|
|
183
|
+
|
|
184
|
+
Checks that value is always type "never".
|
|
185
|
+
```ts
|
|
186
|
+
switch(value) {
|
|
187
|
+
case "a":
|
|
188
|
+
return "A";
|
|
189
|
+
case "b":
|
|
190
|
+
return "B";
|
|
191
|
+
default:
|
|
192
|
+
return assertNever(value);
|
|
193
|
+
}
|
|
194
|
+
```
|
|
195
|
+
|
|
162
196
|
## Validators
|
|
163
197
|
```tsx
|
|
164
198
|
import { Validator } from "@uxf/core";
|
package/package.json
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function adjustTextareaHeight(element: HTMLTextAreaElement, rows?: number): void;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.adjustTextareaHeight = adjustTextareaHeight;
|
|
4
|
+
function adjustTextareaHeight(element, rows = 4) {
|
|
5
|
+
element.style.height = "auto";
|
|
6
|
+
if (rows >= 1) {
|
|
7
|
+
const contentHeight = element.scrollHeight;
|
|
8
|
+
const lineHeight = parseFloat(window.getComputedStyle(element).getPropertyValue("line-height"));
|
|
9
|
+
const fontSize = parseFloat(window.getComputedStyle(element).getPropertyValue("font-size"));
|
|
10
|
+
const targetHeight = parseInt((rows * fontSize * (lineHeight / fontSize)).toFixed(3), 10);
|
|
11
|
+
element.style.height = Math.max(targetHeight, contentHeight) + "px";
|
|
12
|
+
}
|
|
13
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
// adjustTextareaHeight.spec.ts
|
|
4
|
+
const adjust_textarea_height_1 = require("./adjust-textarea-height");
|
|
5
|
+
describe("adjustTextareaHeight", () => {
|
|
6
|
+
let textarea;
|
|
7
|
+
beforeEach(() => {
|
|
8
|
+
textarea = document.createElement("textarea");
|
|
9
|
+
document.body.appendChild(textarea);
|
|
10
|
+
});
|
|
11
|
+
afterEach(() => {
|
|
12
|
+
document.body.removeChild(textarea);
|
|
13
|
+
jest.restoreAllMocks();
|
|
14
|
+
});
|
|
15
|
+
it('should reset the height of the textarea to "auto" before adjustment', () => {
|
|
16
|
+
textarea.style.height = "100px";
|
|
17
|
+
(0, adjust_textarea_height_1.adjustTextareaHeight)(textarea);
|
|
18
|
+
expect(textarea.style.height).toBe("auto");
|
|
19
|
+
});
|
|
20
|
+
it("should correctly adjust the height based on content height when rows are provided", () => {
|
|
21
|
+
jest.spyOn(window, "getComputedStyle").mockImplementation(() => ({
|
|
22
|
+
getPropertyValue: (property) => {
|
|
23
|
+
if (property === "line-height") {
|
|
24
|
+
return "20px";
|
|
25
|
+
}
|
|
26
|
+
if (property === "font-size") {
|
|
27
|
+
return "16px";
|
|
28
|
+
}
|
|
29
|
+
return "";
|
|
30
|
+
},
|
|
31
|
+
}));
|
|
32
|
+
textarea.style.height = "auto";
|
|
33
|
+
textarea.style.fontSize = "16px";
|
|
34
|
+
// Simulate some content with scrollHeight of 150px
|
|
35
|
+
Object.defineProperty(textarea, "scrollHeight", { value: 150, configurable: true });
|
|
36
|
+
(0, adjust_textarea_height_1.adjustTextareaHeight)(textarea, 4);
|
|
37
|
+
// Calculate expected target height
|
|
38
|
+
const fontSize = 16;
|
|
39
|
+
const lineHeight = 20;
|
|
40
|
+
const targetHeight = 4 * fontSize * (lineHeight / fontSize);
|
|
41
|
+
expect(textarea.style.height).toBe(`${Math.max(targetHeight, 150)}px`);
|
|
42
|
+
});
|
|
43
|
+
it("should handle a case when rows is not provided and default to 4", () => {
|
|
44
|
+
jest.spyOn(window, "getComputedStyle").mockImplementation(() => ({
|
|
45
|
+
getPropertyValue: (property) => {
|
|
46
|
+
if (property === "line-height") {
|
|
47
|
+
return "24px";
|
|
48
|
+
}
|
|
49
|
+
if (property === "font-size") {
|
|
50
|
+
return "16px";
|
|
51
|
+
}
|
|
52
|
+
return "";
|
|
53
|
+
},
|
|
54
|
+
}));
|
|
55
|
+
// Simulate some content with scrollHeight of 100px
|
|
56
|
+
Object.defineProperty(textarea, "scrollHeight", { value: 100, configurable: true });
|
|
57
|
+
(0, adjust_textarea_height_1.adjustTextareaHeight)(textarea);
|
|
58
|
+
// Default rows = 4
|
|
59
|
+
const fontSize = 16;
|
|
60
|
+
const lineHeight = 24;
|
|
61
|
+
const targetHeight = 4 * fontSize * (lineHeight / fontSize);
|
|
62
|
+
expect(textarea.style.height).toBe(`${Math.max(targetHeight, 100)}px`);
|
|
63
|
+
});
|
|
64
|
+
it("should not fail if rows is less than 1", () => {
|
|
65
|
+
jest.spyOn(window, "getComputedStyle").mockImplementation(() => ({
|
|
66
|
+
getPropertyValue: (property) => {
|
|
67
|
+
if (property === "line-height") {
|
|
68
|
+
return "18px";
|
|
69
|
+
}
|
|
70
|
+
if (property === "font-size") {
|
|
71
|
+
return "14px";
|
|
72
|
+
}
|
|
73
|
+
return "";
|
|
74
|
+
},
|
|
75
|
+
}));
|
|
76
|
+
// Simulate some content with scrollHeight of 80px
|
|
77
|
+
Object.defineProperty(textarea, "scrollHeight", { value: 80, configurable: true });
|
|
78
|
+
(0, adjust_textarea_height_1.adjustTextareaHeight)(textarea, 0);
|
|
79
|
+
// Target height should not be calculated when rows < 1,
|
|
80
|
+
// so only scrollHeight should matter
|
|
81
|
+
expect(textarea.style.height).toBe("auto");
|
|
82
|
+
});
|
|
83
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function assertNever(value: never): undefined;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const assert_never_1 = require("./assert-never");
|
|
4
|
+
test("assert-never", () => {
|
|
5
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
6
|
+
// @ts-expect-error
|
|
7
|
+
expect(() => (0, assert_never_1.assertNever)("test")).not.toThrow();
|
|
8
|
+
expect(() => (0, assert_never_1.assertNever)(undefined)).not.toThrow();
|
|
9
|
+
});
|