feat: allow textarea vertical resize, create @twilio-paste/react-text…

…area-autosize (#2454)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

.changeset/late-rings-poke.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/textarea': major
+'@twilio-paste/core': major
+---
+
+[Textarea] Update textarea to use @twilio-paste/react-autosize-textarea library and add the resize prop which allows users to resize the textarea height.

.changeset/slow-buttons-film.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/core': major
+'@twilio-paste/react-textarea-autosize-library': major
+---
+
+[react-textarea-autosize-library] add react-textarea-autosize library

.codesandbox/ci.json

@@ -51,6 +51,7 @@
     "/packages/paste-core/components/paragraph",
     "/packages/paste-core/components/popover",
     "/packages/paste-core/components/radio-group",
+    "/packages/paste-libraries/react-textarea-autosize",
     "/packages/paste-libraries/reakit",
     "/packages/paste-core/components/screen-reader-only",
     "/packages/paste-core/components/select",

packages/paste-core/components/textarea/__tests__/textarea.test.tsx

@@ -6,7 +6,7 @@ import {HelpText} from '@twilio-paste/help-text';
 // @ts-ignore typescript doesn't like js imports
 import axe from '../../../../../.jest/axe-helper';
 import {TextArea} from '../src';
-import {CustomizedTextarea} from '../stories/textarea.stories';
+import {CustomizedTextarea, MultipleTextareas} from '../stories/textarea.stories';
 
 const NOOP = (): void => {};
 
@@ -23,6 +23,11 @@ describe('TextArea render', () => {
     expect(getByRole('textbox')).not.toBeNull();
   });
 
+  it('should render a hidden textarea', () => {
+    render(<TextArea {...initialProps} />);
+    expect(screen.getAllByRole('textbox', {hidden: true})).toHaveLength(2);
+  });
+
   it('should render as readOnly', () => {
     const {getByRole} = render(<TextArea {...initialProps} readOnly />);
     expect(getByRole('textbox').getAttribute('aria-readOnly')).toBeTruthy();
@@ -73,6 +78,27 @@ describe('TextArea render', () => {
   });
 });
 
+describe('Multiple textareas', () => {
+  it('handles adding and removing multiple textareas', () => {
+    render(<MultipleTextareas />);
+    const pushButton = screen.getByRole('button', {name: 'Push textarea'});
+    const popButton = screen.getByRole('button', {name: 'Pop textarea'});
+    const toggleButton = screen.getByRole('button', {name: 'Toggle textarea visibility'});
+
+    expect(screen.getAllByRole('textbox', {hidden: true})).toHaveLength(2);
+
+    fireEvent.click(pushButton);
+    fireEvent.click(pushButton);
+    expect(screen.getAllByRole('textbox', {hidden: true})).toHaveLength(6);
+
+    fireEvent.click(popButton);
+    expect(screen.getAllByRole('textbox', {hidden: true})).toHaveLength(4);
+
+    fireEvent.click(toggleButton);
+    expect(screen.queryAllByRole('textbox', {hidden: true})).toHaveLength(0);
+  });
+});
+
 describe('Textarea event handlers', () => {
   it('Should call the appropriate event handlers', () => {
     const onChangeMock: jest.Mock = jest.fn();

packages/paste-core/components/textarea/package.json

@@ -24,13 +24,11 @@
     "clean": "rm -rf ./dist",
     "tsc": "tsc"
   },
-  "dependencies": {
-    "react-autosize-textarea": "7.1.0"
-  },
   "peerDependencies": {
     "@twilio-paste/box": "^6.0.0",
     "@twilio-paste/design-tokens": "^7.0.0",
     "@twilio-paste/input-box": "^6.0.0",
+    "@twilio-paste/react-textarea-autosize-library": "^0.0.1",
     "@twilio-paste/style-props": "^5.0.0",
     "@twilio-paste/styling-library": "^1.0.0",
     "@twilio-paste/theme": "^7.0.0",
@@ -44,6 +42,7 @@
     "@twilio-paste/box": "^6.0.0",
     "@twilio-paste/design-tokens": "^7.1.1",
     "@twilio-paste/input-box": "^6.0.0",
+    "@twilio-paste/react-textarea-autosize-library": "^0.0.1",
     "@twilio-paste/style-props": "^5.0.0",
     "@twilio-paste/styling-library": "^1.0.0",
     "@twilio-paste/theme": "^7.0.0",

packages/paste-core/components/textarea/src/TextArea.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import TextareaAutosize from 'react-autosize-textarea';
+import TextareaAutosize from '@twilio-paste/react-textarea-autosize-library';
 import {styled, css} from '@twilio-paste/styling-library';
 import {safelySpreadBoxProps, getCustomElementStyles} from '@twilio-paste/box';
 import type {BoxProps} from '@twilio-paste/box';
@@ -20,11 +20,13 @@ export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextArea
   placeholder?: string;
   readOnly?: boolean;
   required?: boolean;
+  resize?: 'none' | 'vertical';
   size?: never;
   style?: never;
   variant?: TextAreaVariants;
   width?: never;
 }
+
 // @ts-expect-error can't work out how to stop the styled div color prop from emotion clashing with our color style prop in BoxProps
 const TextAreaElement = styled(TextareaAutosize)<TextAreaProps>(
   (props) =>
@@ -40,13 +42,13 @@ const TextAreaElement = styled(TextareaAutosize)<TextAreaProps>(
       fontSize: 'fontSize30',
       fontWeight: 'fontWeightMedium',
       lineHeight: 'lineHeight20',
-      maxHeight: 'size30',
+      maxHeight: props.resize === 'vertical' ? 'none' : 'size30',
       outline: 'none',
       paddingBottom: 'space30',
       paddingLeft: 'space40',
       paddingRight: 'space40',
       paddingTop: 'space30',
-      resize: 'vertical',
+      resize: props.resize,
       width: '100%',
 
       '&::placeholder': {
@@ -80,6 +82,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
       insertAfter,
       readOnly,
       variant,
+      resize = 'none',
       // size, height and width should not be passed down
       size,
       height,
@@ -100,15 +103,16 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
       >
         <TextAreaElement
           {...safelySpreadBoxProps(props)}
-          async
           aria-invalid={hasError}
           aria-readonly={readOnly}
           disabled={disabled}
           data-paste-element={`${element}_ELEMENT`}
           readOnly={readOnly}
           ref={ref}
           rows={3}
+          minRows={3}
           spellCheck
+          resize={resize}
           variant={variant}
         >
           {children}