@uxf/core 11.53.1 → 11.54.0

package/README.md

@@ -97,7 +97,7 @@ Dynamically adjusts the height of a `<textarea>` based on its content and an opt
 - **`rows`** (optional): Minimum visible rows. Default is `4`.
 
 #### Behavior
-- Resets height to `"auto"` to measure content height.
+- Leverages MutationObserver API 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
@@ -105,6 +105,23 @@ Dynamically adjusts the height of a `<textarea>` based on its content and an opt
 adjustTextareaHeight(textarea); // Adjusts height (min 4 rows)
 adjustTextareaHeight(textarea, 6); // With 6-row minimum
 ``` 
+In React component:
+```tsx
+import { useIsomorphicLayoutEffect } from "@uxf/core-react/hooks/use-isomorphic-layout-effect";
+import { isNotNil } from "@uxf/core/utils/is-not-nil";
+
+useIsomorphicLayoutEffect(() => {
+  const textarea = textareaRef.current;
+
+  if (isNotNil(textarea)) {
+      return;
+  }
+  
+  const cleanup = adjustTextareaHeight(textarea);
+  
+  return () => cleanup();
+}, []);
+``` 
 
 > **Note**: Requires valid `line-height` and `font-size` styles for accurate sizing.
 
@@ -171,6 +188,17 @@ const submitHandler: FormEventHandler<HTMLFormElement> = () => {
 };
 ```
 
+### escapeQuotes
+
+Escapes all double quotes (`"`) in a string by replacing them with `\"`.
+
+```ts
+import { escapeQuotes } from "@uxf/core/utils/escape-quotes";
+
+escapeQuotes('The "quick" fox'); 
+// Output: The \"quick\" fox
+```
+
 ### formatBytes
 
 Appends suitable unit to the byte value of data size.

package/package.json

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

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

@@ -1 +1,2 @@
-export declare function adjustTextareaHeight(element: HTMLTextAreaElement, rows?: number): void;
+import { Noop } from "../types";
+export declare function adjustTextareaHeight(node: HTMLTextAreaElement, rows?: number): Noop;

package/utils/adjust-textarea-height.js

@@ -1,13 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.adjustTextareaHeight = adjustTextareaHeight;
-function adjustTextareaHeight(element, rows = 4) {
-    element.style.height = "auto";
+function setHeightByContent(element, shouldShrink, rows = 4) {
     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";
+        if (shouldShrink) {
+            while (element.scrollHeight <= element.clientHeight) {
+                element.style.height = Math.max(targetHeight, element.scrollHeight - lineHeight) + "px";
+                if (element.clientHeight - lineHeight <= targetHeight) {
+                    break;
+                }
+            }
+        }
+        element.style.height = Math.max(targetHeight, element.scrollHeight) + "px";
     }
+    else {
+        element.style.height = "auto";
+    }
+}
+function adjustTextareaHeight(node, rows = 4) {
+    setHeightByContent(node, false, rows);
+    const observer = new MutationObserver((mutations) => {
+        var _a, _b, _c, _d, _e, _f;
+        for (const mutation of mutations) {
+            if (mutation.type === "childList") {
+                const removedLength = (_c = (_b = (_a = mutation.removedNodes.item(0)) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
+                const addedLength = (_f = (_e = (_d = mutation.addedNodes.item(0)) === null || _d === void 0 ? void 0 : _d.textContent) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0;
+                setHeightByContent(node, removedLength > addedLength, rows);
+            }
+        }
+    });
+    observer.observe(node, {
+        childList: true,
+    });
+    return () => observer.disconnect();
 }

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

@@ -15,7 +15,7 @@ describe("adjustTextareaHeight", () => {
     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");
+        expect(textarea.style.height).toBe("100px");
     });
     it("should correctly adjust the height based on content height when rows are provided", () => {
         jest.spyOn(window, "getComputedStyle").mockImplementation(() => ({

package/utils/escape-quotes.d.ts

@@ -0,0 +1 @@
+export declare function escapeQuotes(value: string): string;

package/utils/escape-quotes.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.escapeQuotes = escapeQuotes;
+function escapeQuotes(value) {
+    return value.replace(/\x22/g, "\\\x22");
+}

package/utils/escape-quotes.test.d.ts

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

package/utils/escape-quotes.test.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const escape_quotes_1 = require("./escape-quotes");
+test("escapeQuotes", () => {
+    expect((0, escape_quotes_1.escapeQuotes)('"Název něčeho"')).toBe('\\"Název něčeho\\"');
+});