@stackshift-ui/textarea 6.0.12 → 7.0.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/textarea",
   "description": "",
-  "version": "6.0.12",
+  "version": "7.0.0-beta.0",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -34,15 +34,15 @@
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "@stackshift-ui/system": "6.0.11",
-    "@stackshift-ui/scripts": "6.0.10"
+    "@stackshift-ui/system": "6.1.0-beta.0",
+    "@stackshift-ui/scripts": "6.1.0-beta.0"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",
     "react-dom": "16.8 - 19",
-    "@stackshift-ui/system": ">=6.0.11"
+    "@stackshift-ui/system": ">=6.1.0-beta.0"
   },
   "peerDependenciesMeta": {
     "next": {

package/src/textarea.test.tsx

@@ -3,11 +3,31 @@ import { afterEach, describe, test } from "vitest";
 import { Textarea } from "./textarea";
 
 describe.concurrent("textarea", () => {
-  afterEach(cleanup);
+  afterEach(() => {
+    cleanup();
+  });
 
   test("Common: Textarea - test if renders without errors", ({ expect }) => {
     const clx = "textarea-class";
-    render(<Textarea className={clx} name="stackshift-textarea" ariaLabel="text area" />);
-    expect(screen.getByTestId("textarea").classList).toContain(clx);
+    const { unmount } = render(<Textarea className={clx} placeholder="Enter text here" />);
+    const textarea = screen.getByPlaceholderText("Enter text here");
+    expect(textarea.classList).toContain(clx);
+    expect(textarea.tagName.toLowerCase()).toBe("textarea");
+    unmount();
+  });
+
+  test("Common: Textarea - test with aria-label", ({ expect }) => {
+    const { unmount } = render(<Textarea aria-label="Text area input" />);
+    const textarea = screen.getByLabelText("Text area input");
+    expect(textarea.tagName.toLowerCase()).toBe("textarea");
+    unmount();
+  });
+
+  test("Common: Textarea - test with rows prop", ({ expect }) => {
+    const { unmount } = render(<Textarea placeholder="Test rows" rows={3} />);
+    const textarea = screen.getByPlaceholderText("Test rows");
+    screen.debug(textarea);
+    expect(textarea.getAttribute("rows")).toBe("3");
+    unmount();
   });
 });

package/src/textarea.tsx

@@ -1,80 +1,26 @@
-import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
-import cn from "classnames";
-import type { ElementType, HTMLProps, ReactNode } from "react";
+import * as React from "react";
 
-type StyleVariants<T extends string> = Record<T, string>;
-type Variant = "primary" | "outline" | "secondary";
-
-export interface TextareaProps extends Omit<HTMLProps<HTMLTextAreaElement>, "as"> {
-  required?: boolean;
-  name: string;
-  ariaLabel: string;
-  placeholder?: string;
-  onChange?: (...args: any) => any;
-  labelClass?: string;
-  variant?: Variant;
-  label?: string;
-  noLabel?: boolean;
-  [key: string]: any;
-  children?: ReactNode;
-  className?: string;
-  as?: ElementType;
-}
+import { cn, DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
 
 const displayName = "Textarea";
 
-export const Textarea: React.FC<TextareaProps> = ({
-  required = false,
-  name,
-  ariaLabel,
-  placeholder,
-  onChange,
-  labelClass,
-  variant = "primary",
-  label,
-  noLabel,
-  children,
-  className,
-  as = "textarea",
-  ...props
-}) => {
-  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
-
-  const commonStyle = "h-24 w-full resize rounded-global p-4 text-xs leading-none";
-  const primary = `${commonStyle}`;
-  const secondary = `${commonStyle} p-4 outline-none`;
-  const outline = `${commonStyle}  py-3 border border-slate-300`;
-
-  const variants: StyleVariants<Variant> = {
-    primary,
-    outline,
-    secondary,
-  };
-
-  const variantClass = variants[variant] ?? primary;
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
+  ({ className, ...props }, ref) => {
+    const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
 
-  return (
-    <>
-      {!noLabel && (
-        <label htmlFor={name} className={labelClass}>
-          {label || name}
-        </label>
-      )}
+    return (
       <Component
-        as={as}
-        {...props}
-        data-testid={displayName}
-        onChange={onChange}
-        aria-label={ariaLabel || name}
-        className={cn(variantClass, className)}
-        placeholder={placeholder}
-        name={name}
-        required={required}
-        id={name}
+        as="textarea"
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className,
+        )}
+        ref={ref}
         {...props}
       />
-    </>
-  );
-};
-
+    );
+  },
+);
 Textarea.displayName = displayName;
+
+export { Textarea };