@uxf/core 11.52.0 → 11.52.2

package/README.md

@@ -88,6 +88,26 @@ cookie.delete("cookie-name", /* options (optional) */);
 
 ## Utils
 
+### adjustTextareaHeight
+
+Dynamically adjusts the height of a `<textarea>` based on its content and an optional number of rows.
+
+#### Parameters
+- **`element`**: The `<textarea>` to adjust.
+- **`rows`** (optional): Minimum visible rows. Default is `4`.
+
+#### Behavior
+- Resets height to `"auto"` to measure content height.
+- Adjusts height to fit content or the minimum height based on the `rows` parameter, calculated using `line-height` and `font-size`.
+
+#### Usage
+```typescript
+adjustTextareaHeight(textarea); // Adjusts height (min 4 rows)
+adjustTextareaHeight(textarea, 6); // With 6-row minimum
+``` 
+
+> **Note**: Requires valid `line-height` and `font-size` styles for accurate sizing.
+
 ### cx, cxa
 It is our fork of `clsx` library https://github.com/lukeed/clsx
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/core",
-    "version": "11.52.0",
+    "version": "11.52.2",
     "description": "UXF Core",
     "author": "Petr Vejvoda <vejvoda@uxf.cz>",
     "homepage": "https://gitlab.com/uxf-npm/core#readme",

package/utils/adjust-textarea-height.d.ts

@@ -0,0 +1 @@
+export declare function adjustTextareaHeight(element: HTMLTextAreaElement, rows?: number): void;

package/utils/adjust-textarea-height.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.adjustTextareaHeight = adjustTextareaHeight;
+function adjustTextareaHeight(element, rows = 4) {
+    element.style.height = "auto";
+    if (rows >= 1) {
+        const contentHeight = element.scrollHeight;
+        const lineHeight = parseFloat(window.getComputedStyle(element).getPropertyValue("line-height"));
+        const fontSize = parseFloat(window.getComputedStyle(element).getPropertyValue("font-size"));
+        const targetHeight = parseInt((rows * fontSize * (lineHeight / fontSize)).toFixed(3), 10);
+        element.style.height = Math.max(targetHeight, contentHeight) + "px";
+    }
+}

package/utils/adjust-textarea-height.test.d.ts

@@ -0,0 +1 @@
+export {};

package/utils/adjust-textarea-height.test.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// adjustTextareaHeight.spec.ts
+const adjust_textarea_height_1 = require("./adjust-textarea-height");
+describe("adjustTextareaHeight", () => {
+    let textarea;
+    beforeEach(() => {
+        textarea = document.createElement("textarea");
+        document.body.appendChild(textarea);
+    });
+    afterEach(() => {
+        document.body.removeChild(textarea);
+        jest.restoreAllMocks();
+    });
+    it('should reset the height of the textarea to "auto" before adjustment', () => {
+        textarea.style.height = "100px";
+        (0, adjust_textarea_height_1.adjustTextareaHeight)(textarea);
+        expect(textarea.style.height).toBe("auto");
+    });
+    it("should correctly adjust the height based on content height when rows are provided", () => {
+        jest.spyOn(window, "getComputedStyle").mockImplementation(() => ({
+            getPropertyValue: (property) => {
+                if (property === "line-height") {
+                    return "20px";
+                }
+                if (property === "font-size") {
+                    return "16px";
+                }
+                return "";
+            },
+        }));
+        textarea.style.height = "auto";
+        textarea.style.fontSize = "16px";
+        // Simulate some content with scrollHeight of 150px
+        Object.defineProperty(textarea, "scrollHeight", { value: 150, configurable: true });
+        (0, adjust_textarea_height_1.adjustTextareaHeight)(textarea, 4);
+        // Calculate expected target height
+        const fontSize = 16;
+        const lineHeight = 20;
+        const targetHeight = 4 * fontSize * (lineHeight / fontSize);
+        expect(textarea.style.height).toBe(`${Math.max(targetHeight, 150)}px`);
+    });
+    it("should handle a case when rows is not provided and default to 4", () => {
+        jest.spyOn(window, "getComputedStyle").mockImplementation(() => ({
+            getPropertyValue: (property) => {
+                if (property === "line-height") {
+                    return "24px";
+                }
+                if (property === "font-size") {
+                    return "16px";
+                }
+                return "";
+            },
+        }));
+        // Simulate some content with scrollHeight of 100px
+        Object.defineProperty(textarea, "scrollHeight", { value: 100, configurable: true });
+        (0, adjust_textarea_height_1.adjustTextareaHeight)(textarea);
+        // Default rows = 4
+        const fontSize = 16;
+        const lineHeight = 24;
+        const targetHeight = 4 * fontSize * (lineHeight / fontSize);
+        expect(textarea.style.height).toBe(`${Math.max(targetHeight, 100)}px`);
+    });
+    it("should not fail if rows is less than 1", () => {
+        jest.spyOn(window, "getComputedStyle").mockImplementation(() => ({
+            getPropertyValue: (property) => {
+                if (property === "line-height") {
+                    return "18px";
+                }
+                if (property === "font-size") {
+                    return "14px";
+                }
+                return "";
+            },
+        }));
+        // Simulate some content with scrollHeight of 80px
+        Object.defineProperty(textarea, "scrollHeight", { value: 80, configurable: true });
+        (0, adjust_textarea_height_1.adjustTextareaHeight)(textarea, 0);
+        // Target height should not be calculated when rows < 1,
+        // so only scrollHeight should matter
+        expect(textarea.style.height).toBe("auto");
+    });
+});