feat(web-components/text-area): add auto-resize feature

.changeset/tidy-toys-pull.md

@@ -0,0 +1,6 @@
+---
+"@tapsioss/web-components": minor
+---
+
+Add auto-resize feature to text-area component
+

packages/web-components/src/base-text-input/base-text-input.ts

@@ -305,7 +305,7 @@ export abstract class BaseTextInput extends BaseInput {
     >("#input");
   }
 
-  protected handleInput(event: InputEvent): void {
+  protected handleInput(event: Event): void {
     this._dirty = true;
     this.value = (event.target as HTMLInputElement).value;
   }

packages/web-components/src/text-area/constants.ts

@@ -0,0 +1,6 @@
+export const ErrorMessages = {
+  SET_VALID_MIN_ROWS: [
+    "Expected a valid `min-rows`.",
+    "The `min-rows` property should be less than `rows` which has a default value of 2.",
+  ].join(" "),
+} as const;

packages/web-components/src/text-area/text-area.style.ts

@@ -2,14 +2,40 @@ import { css, type CSSResult } from "lit";
 
 const styles: CSSResult = css`
   .control {
-    height: 6.5rem;
+    height: auto;
     padding: var(--tapsi-spacing-5) var(--tapsi-spacing-6);
 
     align-items: flex-start;
   }
 
-  .input {
+  .input,
+  .shadow {
     resize: none;
+    padding: 0;
+    border: none;
+    /* For Internet Explorer and older Edge */
+    -ms-overflow-style: none;
+    /* For Firefox and newer browsers */
+    scrollbar-width: none;
+  }
+
+  .input::-webkit-scrollbar,
+  .shadow::-webkit-scrollbar {
+    /* Also works for WebKit */
+    display: none;
+  }
+
+  .shadow {
+    pointer-events: none;
+    /* Remove from the content flow */
+    position: absolute;
+    visibility: hidden;
+    /* Ignore the scrollbar width */
+    overflow: hidden;
+    top: 0;
+    height: 0;
+    /* Create a new layer, increase the isolation of the computed values */
+    isolation: isolate;
   }
 `;
 

packages/web-components/src/text-area/text-area.test.ts

@@ -1,14 +1,18 @@
 import {
   afterEach,
+  createPromiseResolvers,
   describe,
   disposeMocks,
   expect,
   render,
   test,
 } from "@internals/test-helpers";
-import { ErrorMessages } from "../base-text-input/constants.ts";
+import { ErrorMessages as BaseErrorMessages } from "../base-text-input/constants.ts";
+import { ErrorMessages } from "./constants.ts";
 
 describe("🧩 text-area", () => {
+  const scope = "text-area";
+
   afterEach(async ({ page }) => {
     await disposeMocks(page);
   });
@@ -49,11 +53,17 @@ describe("🧩 text-area", () => {
   test("🧪 should throw error if no valid label was set for the input", async ({
     page,
   }) => {
-    const errors: string[] = [];
+    const msgResolver = createPromiseResolvers<string>();
 
     page.on("console", msg => {
-      if (msg.type() === "error") {
-        errors.push(msg.text());
+      if (
+        msg.type() === "error" &&
+        msg.text().includes(scope) &&
+        msg
+          .text()
+          .includes(BaseErrorMessages.SET_VALID_LABEL_OR_LABELLEDBY_ATTRIBUTE)
+      ) {
+        msgResolver.resolve(msg.text());
       }
     });
 
@@ -62,9 +72,9 @@ describe("🧩 text-area", () => {
       `<tapsi-text-area data-testid="test-text-area"></tapsi-text-area>`,
     );
 
-    expect(errors[0]).toContain(
-      ErrorMessages.SET_VALID_LABEL_OR_LABELLEDBY_ATTRIBUTE,
-    );
+    const msg = await msgResolver.promise;
+
+    expect(msg).toBeDefined();
   });
 
   test("🧪 should render slots", async ({ page }) => {
@@ -147,4 +157,61 @@ describe("🧩 text-area", () => {
     await label.click();
     await expect(input).toBeFocused();
   });
+
+  test("🧪 should be auto-resizable when `min-rows` exists", async ({
+    page,
+  }) => {
+    const maxRows = 5;
+
+    await render(
+      page,
+      `
+        <tapsi-text-area label="label" id="test-text-area" min-rows="1" rows="${maxRows}" data-testid="test-text-area">
+      `,
+    );
+
+    const input = page.locator('#test-text-area [part="input"]');
+
+    const getHeight = () =>
+      input.evaluate((el: HTMLTextAreaElement) => el.offsetHeight);
+
+    const singleRowHeight = await getHeight();
+
+    expect(singleRowHeight).toBeTruthy();
+
+    await input.focus();
+
+    for (let rows = 1; rows < maxRows; rows++) {
+      await page.keyboard.press("Enter");
+
+      expect(await getHeight()).toBe(singleRowHeight * (rows + 1));
+    }
+
+    await page.keyboard.press("Enter");
+
+    expect(await getHeight()).toBe(singleRowHeight * 5);
+
+    const msgResolver = createPromiseResolvers<string>();
+
+    page.on("console", msg => {
+      if (
+        msg.type() === "warning" &&
+        msg.text().includes(scope) &&
+        msg.text().includes(ErrorMessages.SET_VALID_MIN_ROWS)
+      ) {
+        msgResolver.resolve(msg.text());
+      }
+    });
+
+    await render(
+      page,
+      `
+        <tapsi-text-area label="label" id="test-text-area" min-rows="${maxRows}" rows="${maxRows}" data-testid="test-text-area">
+      `,
+    );
+
+    const msg = await msgResolver.promise;
+
+    expect(msg).toBeDefined();
+  });
 });