Feat/textarea add clear button

.changeset/five-adults-protect.md

@@ -0,0 +1,7 @@
+---
+"@nextui-org/input": patch
+"@nextui-org/shared-icons": patch
+"@nextui-org/theme": patch
+---
+
+introduce `isClearable` to Textarea component (#2348, #2112)

apps/docs/content/components/textarea/clear-button.raw.jsx

@@ -0,0 +1,16 @@
+import {Textarea} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Textarea
+      isClearable
+      className="max-w-xs"
+      defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+      label="Description"
+      placeholder="Description"
+      variant="bordered"
+      // eslint-disable-next-line no-console
+      onClear={() => console.log("textarea cleared")}
+    />
+  );
+}

apps/docs/content/components/textarea/clear-button.ts

@@ -0,0 +1,9 @@
+import App from "./clear-button.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/textarea/index.ts

@@ -8,6 +8,7 @@ import errorMessage from "./error-message";
 import description from "./description";
 import controlled from "./controlled";
 import disableAutosize from "./disable-autosize";
+import clearButton from "./clear-button";
 
 export const textareaContent = {
   usage,
@@ -20,4 +21,5 @@ export const textareaContent = {
   description,
   controlled,
   disableAutosize,
+  clearButton,
 };

apps/docs/content/docs/components/textarea.mdx

@@ -56,6 +56,13 @@ the end of the label and the textarea will be required.
 
 <CodeDemo title="Required" files={textareaContent.required} />
 
+### Clear Button
+
+If you pass the `isClearable` property to the textarea, it will have a clear button at the
+end of the textarea, it will be visible when the textarea has a value.
+
+<CodeDemo title="Clear Button" files={textareaContent.clearButton} />
+
 ### Autosize
 
 Textarea grows automatically based on the content, but you can also set a min and max height to
@@ -92,6 +99,7 @@ You can use the `value` and `onValueChange` properties to control the input valu
 > **Note**: NextUI `Textarea` also supports native events like `onChange`, useful for form libraries
 > such as [Formik](https://formik.org/) and [React Hook Form](https://react-hook-form.com/).
 
+
 ## Slots
 
 - **base**: Input wrapper, it handles alignment, placement, and general appearance.
@@ -100,6 +108,7 @@ You can use the `value` and `onValueChange` properties to control the input valu
 - **input**: The textarea input element.
 - **description**: The description of the textarea.
 - **errorMessage**: The error message of the textarea.
+- **headerWrapper**: Wraps the `label` and the `clearButton`.
 
 <Spacer y={4} />
 
@@ -163,6 +172,7 @@ You can use the `value` and `onValueChange` properties to control the input valu
 | isRequired         | `boolean`                                                                                                          | Whether user input is required on the textarea before form submission.                                                                                                                                                                                  | `false`   |
 | isReadOnly         | `boolean`                                                                                                          | Whether the textarea can be selected but not changed by the user.                                                                                                                                                                                       |           |
 | isDisabled         | `boolean`                                                                                                          | Whether the textarea is disabled.                                                                                                                                                                                                                       | `false`   |
+| isClearable        | `boolean`                                                                                                          | Whether the textarea should have a clear button.                                                                                                                                                                                                        | `false`   |
 | isInvalid          | `boolean`                                                                                                          | Whether the textarea is invalid.                                                                                                                                                                                                                        | `false`   |
 | validationState    | `valid` \| `invalid`                                                                                               | Whether the textarea should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead.                                                                                                                                | -         |
 | disableAutosize    | `boolean`                                                                                                          | Whether the textarea auto vertically resize should be disabled.                                                                                                                                                                                         | `false`   |

packages/components/input/__tests__/textarea.test.tsx

@@ -0,0 +1,81 @@
+import * as React from "react";
+import {render} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import {Textarea} from "../src";
+
+describe("Textarea", () => {
+  it("should clear the value and onClear is triggered", async () => {
+    const onClear = jest.fn();
+
+    const ref = React.createRef<HTMLTextAreaElement>();
+
+    const {getByRole} = render(
+      <Textarea
+        ref={ref}
+        isClearable
+        defaultValue="junior@nextui.org"
+        label="test textarea"
+        onClear={onClear}
+      />,
+    );
+
+    const clearButton = getByRole("button");
+
+    expect(clearButton).not.toBeNull();
+
+    const user = userEvent.setup();
+
+    await user.click(clearButton);
+
+    expect(ref.current?.value)?.toBe("");
+
+    expect(onClear).toHaveBeenCalledTimes(1);
+  });
+
+  it("should disable clear button when isReadOnly is true", async () => {
+    const onClear = jest.fn();
+
+    const ref = React.createRef<HTMLTextAreaElement>();
+
+    const {getByRole} = render(
+      <Textarea
+        ref={ref}
+        isClearable
+        isReadOnly
+        defaultValue="readOnly test for clear button"
+        label="test textarea"
+        onClear={onClear}
+      />,
+    );
+
+    const clearButton = getByRole("button")!;
+
+    expect(clearButton).not.toBeNull();
+
+    const user = userEvent.setup();
+
+    await user.click(clearButton);
+
+    expect(onClear).toHaveBeenCalledTimes(0);
+  });
+
+  it("should appear clear button when just define onClear but not define isClearable", async () => {
+    const onClear = jest.fn();
+
+    const ref = React.createRef<HTMLTextAreaElement>();
+
+    const {getByRole} = render(
+      <Textarea
+        ref={ref}
+        defaultValue="junior@nextui.org"
+        label="test textarea"
+        onClear={onClear}
+      />,
+    );
+
+    const clearButton = getByRole("button");
+
+    expect(clearButton).not.toBeNull();
+  });
+});

packages/components/input/src/textarea.tsx

@@ -3,6 +3,7 @@ import {forwardRef} from "@nextui-org/system";
 import {mergeProps} from "@react-aria/utils";
 import {useMemo, useState} from "react";
 import TextareaAutosize from "react-textarea-autosize";
+import {CloseFilledIcon} from "@nextui-org/shared-icons";
 
 import {UseInputProps, useInput} from "./use-input";
 
@@ -14,11 +15,7 @@ type TextareaAutoSizeStyle = Omit<
   height?: number;
 };
 
-type OmittedInputProps =
-  | "isClearButtonFocusVisible"
-  | "isLabelPlaceholder"
-  | "isClearable"
-  | "isTextarea";
+type OmittedInputProps = "isClearButtonFocusVisible" | "isLabelPlaceholder" | "isTextarea";
 
 export type TextareaHeightChangeMeta = {
   rowHeight: number;
@@ -88,6 +85,8 @@ const Textarea = forwardRef<"textarea", TextAreaProps>(
       getHelperWrapperProps,
       getDescriptionProps,
       getErrorMessageProps,
+      isClearable,
+      getClearButtonProps,
     } = useInput<HTMLTextAreaElement>({...otherProps, ref, isMultiline: true});
 
     const [hasMultipleRows, setIsHasMultipleRows] = useState(minRows > 1);
@@ -122,6 +121,14 @@ const Textarea = forwardRef<"textarea", TextAreaProps>(
       />
     );
 
+    const clearButtonContent = useMemo(() => {
+      return isClearable ? (
+        <button {...getClearButtonProps()}>
+          <CloseFilledIcon />
+        </button>
+      ) : null;
+    }, [isClearable, getClearButtonProps]);
+
     const innerWrapper = useMemo(() => {
       if (startContent || endContent) {
         return (
@@ -145,6 +152,7 @@ const Textarea = forwardRef<"textarea", TextAreaProps>(
         <div {...getInputWrapperProps()} data-has-multiple-rows={dataAttr(hasMultipleRows)}>
           {shouldLabelBeInside ? labelContent : null}
           {innerWrapper}
+          {clearButtonContent}
         </div>
         {hasHelper && hasHelperContent ? (
           <div {...getHelperWrapperProps()}>

packages/components/input/src/use-input.ts

@@ -371,7 +371,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
         "data-has-start-content": dataAttr(hasStartContent),
         "data-has-end-content": dataAttr(!!endContent),
         className: slots.input({
-          class: clsx(classNames?.input, isFilled ? "is-filled" : ""),
+          class: clsx(classNames?.input, isFilled ? "is-filled" : "", isMultiline ? "pe-0" : ""),
         }),
         ...mergeProps(
           focusProps,
@@ -518,7 +518,9 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
         "aria-label": "clear input",
         "data-slot": "clear-button",
         "data-focus-visible": dataAttr(isClearButtonFocusVisible),
-        className: slots.clearButton({class: clsx(classNames?.clearButton, props?.className)}),
+        className: slots.clearButton({
+          class: clsx(classNames?.clearButton, props?.className),
+        }),
         ...mergeProps(clearPressProps, clearFocusProps),
       };
     },

packages/components/input/stories/textarea.stories.tsx

@@ -334,3 +334,15 @@ export const IsInvalid = {
     errorMessage: "Please enter a valid description",
   },
 };
+
+export const Clearable = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    placeholder: "Enter your description",
+    defaultValue: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    // eslint-disable-next-line no-console
+    onClear: () => console.log("textarea cleared"),
+  },
+};

packages/core/theme/src/components/input.ts

@@ -51,10 +51,10 @@ const input = tv({
       "p-2",
       "-m-2",
       "z-10",
-      "hidden",
       "absolute",
       "end-3",
       "start-auto",
+      "pointer-events-none",
       "appearance-none",
       "outline-none",
       "select-none",
@@ -192,7 +192,11 @@ const input = tv({
     isClearable: {
       true: {
         input: "peer pe-6 input-search-cancel-button-none",
-        clearButton: "peer-data-[filled=true]:opacity-70 peer-data-[filled=true]:block",
+        clearButton: [
+          "peer-data-[filled=true]:pointer-events-auto",
+          "peer-data-[filled=true]:opacity-70 peer-data-[filled=true]:block",
+          "peer-data-[filled=true]:scale-100",
+        ],
       },
     },
     isDisabled: {
@@ -219,6 +223,7 @@ const input = tv({
         inputWrapper: "!h-auto",
         innerWrapper: "items-start group-data-[has-label=true]:items-start",
         input: "resize-none data-[hide-scroll=true]:scrollbar-hide",
+        clearButton: "absolute top-2 right-2 rtl:right-auto rtl:left-2 z-10",
       },
     },
     disableAnimation: {
@@ -236,7 +241,14 @@ const input = tv({
           "motion-reduce:transition-none",
           "transition-[transform,color,left,opacity]",
         ],
-        clearButton: ["transition-opacity", "motion-reduce:transition-none"],
+        clearButton: [
+          "scale-90",
+          "ease-out",
+          "duration-150",
+          "transition-[opacity,transform]",
+          "motion-reduce:transition-none",
+          "motion-reduce:scale-100",
+        ],
       },
     },
   },
@@ -862,6 +874,18 @@ const input = tv({
         inputWrapper: "data-[has-multiple-rows=true]:rounded-large",
       },
     },
+    // isClearable & isMultiline
+    {
+      isClearable: true,
+      isMultiline: true,
+      class: {
+        clearButton: [
+          "group-data-[has-value=true]:opacity-70 group-data-[has-value=true]:block",
+          "group-data-[has-value=true]:scale-100",
+          "group-data-[has-value=true]:pointer-events-auto",
+        ],
+      },
+    },
   ],
 });
 

packages/utilities/shared-icons/src/index.ts

@@ -37,6 +37,7 @@ export * from "./info-circle";
 export * from "./warning";
 export * from "./danger";
 export * from "./success";
+
 // sets
 export * from "./bulk";
 export * from "./bold";