Add TextArea component to RAC (#4779)

Author: devongovett

packages/react-aria-components/docs/TextField.mdx

@@ -66,7 +66,8 @@ import {TextField, Label, Input} from 'react-aria-components';
   flex-direction: column;
   width: fit-content;
 
-  .react-aria-Input {
+  .react-aria-Input,
+  .react-aria-TextArea {
     padding: 0.286rem;
     margin: 0;
     border: 1px solid var(--field-border);
@@ -231,6 +232,10 @@ An `Input` can be targeted with the `.react-aria-Input` CSS selector, or by over
 
 <StateTable properties={docs.exports.InputRenderProps.properties} />
 
+### TextArea
+
+An `TextArea` can be targeted with the `.react-aria-TextArea` CSS selector, or by overriding with a custom `className`. It supports the same states as `Input` described above.
+
 ### Text
 
 The help text elements within a `TextField` can be targeted with the `[slot=description]` and `[slot=errorMessage]` CSS selectors, or by adding a custom `className`.
@@ -351,6 +356,19 @@ TextField supports the `name` prop for integration with HTML forms. In addition,
 <MyTextField label="Email" name="email" type="email" />
 ```
 
+### Multi-line
+
+TextField supports using the `TextArea` component in place of `Input` for multi-line text input.
+
+```tsx example
+import {TextField, Label, TextArea} from 'react-aria-components';
+
+<TextField>
+  <Label>Comment</Label>
+  <TextArea />
+</TextField>
+```
+
 ## Advanced customization
 
 ### Composition

packages/react-aria-components/src/TextArea.tsx

@@ -0,0 +1,38 @@
+import {ContextValue, StyleRenderProps, useContextProps, useRenderProps} from './utils';
+import {InputRenderProps} from './Input';
+import {mergeProps, useFocusRing, useHover} from 'react-aria';
+import React, {createContext, ForwardedRef, forwardRef, TextareaHTMLAttributes} from 'react';
+
+export interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'style'>, StyleRenderProps<InputRenderProps> {}
+
+export const TextAreaContext = createContext<ContextValue<TextAreaProps, HTMLTextAreaElement>>({});
+
+function TextArea(props: TextAreaProps, ref: ForwardedRef<HTMLTextAreaElement>) {
+  [props, ref] = useContextProps(props, ref, TextAreaContext);
+
+  let {hoverProps, isHovered} = useHover({});
+  let {isFocused, isFocusVisible, focusProps} = useFocusRing({
+    isTextInput: true,
+    autoFocus: props.autoFocus
+  });
+
+  let renderProps = useRenderProps({
+    ...props,
+    values: {isHovered, isFocused, isFocusVisible, isDisabled: props.disabled || false},
+    defaultClassName: 'react-aria-TextArea'
+  });
+
+  return (
+    <textarea
+      {...mergeProps(props, focusProps, hoverProps)}
+      {...renderProps}
+      ref={ref}
+      data-hovered={isHovered || undefined}
+      data-focus-visible={isFocusVisible || undefined} />
+  );
+}
+/**
+ * A textarea allows a user to input mult-line text.
+ */
+const _TextArea = forwardRef(TextArea);
+export {_TextArea as TextArea};

packages/react-aria-components/src/TextField.tsx

@@ -15,7 +15,8 @@ import {ContextValue, DOMProps, forwardRefType, Provider, RenderProps, SlotProps
 import {filterDOMProps} from '@react-aria/utils';
 import {InputContext} from './Input';
 import {LabelContext} from './Label';
-import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, useCallback, useRef, useState} from 'react';
+import {TextAreaContext} from './TextArea';
 import {TextContext} from './Text';
 import {ValidationState} from '@react-types/shared';
 
@@ -38,13 +39,24 @@ export const TextFieldContext = createContext<ContextValue<TextFieldProps, HTMLD
 
 function TextField(props: TextFieldProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, TextFieldContext);
-  let inputRef = useRef<HTMLInputElement>(null);
+  let inputRef = useRef(null);
   let [labelRef, label] = useSlot();
-  let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField({
+  let [inputElementType, setInputElementType] = useState('input');
+  let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField<any>({
     ...props,
+    inputElementType,
     label
   }, inputRef);
 
+  // Intercept setting the input ref so we can determine what kind of element we have.
+  // useTextField uses this to determine what props to include.
+  let inputOrTextAreaRef = useCallback((el) => {
+    inputRef.current = el;
+    if (el) {
+      setInputElementType(el instanceof HTMLTextAreaElement ? 'textarea' : 'input');
+    }
+  }, []);
+
   let renderProps = useRenderProps({
     ...props,
     values: {
@@ -65,7 +77,8 @@ function TextField(props: TextFieldProps, ref: ForwardedRef<HTMLDivElement>) {
       <Provider
         values={[
           [LabelContext, {...labelProps, ref: labelRef}],
-          [InputContext, {...inputProps, ref: inputRef}],
+          [InputContext, {...inputProps, ref: inputOrTextAreaRef}],
+          [TextAreaContext, {...inputProps, ref: inputOrTextAreaRef}],
           [TextContext, {
             slots: {
               description: descriptionProps,

packages/react-aria-components/src/index.ts

@@ -48,6 +48,7 @@ export {Table, Row, Cell, Column, TableHeader, TableBody, TableContext, useTable
 export {Tabs, TabList, TabPanel, Tab, TabsContext} from './Tabs';
 export {TagGroup, TagGroupContext, TagList, Tag} from './TagGroup';
 export {Text, TextContext} from './Text';
+export {TextArea, TextAreaContext} from './TextArea';
 export {TextField, TextFieldContext} from './TextField';
 export {ToggleButton, ToggleButtonContext} from './ToggleButton';
 export {TooltipTrigger, Tooltip} from './Tooltip';
@@ -89,6 +90,7 @@ export type {SwitchProps, SwitchRenderProps} from './Switch';
 export type {TableProps, TableRenderProps, TableHeaderProps, TableBodyProps, TableBodyRenderProps, ColumnProps, ColumnRenderProps, RowProps, RowRenderProps, CellProps, CellRenderProps} from './Table';
 export type {TabListProps, TabListRenderProps, TabPanelProps, TabPanelRenderProps, TabProps, TabsProps, TabRenderProps, TabsRenderProps} from './Tabs';
 export type {TagGroupProps, TagListProps, TagListRenderProps, TagProps, TagRenderProps} from './TagGroup';
+export type {TextAreaProps} from './TextArea';
 export type {TextFieldProps, TextFieldRenderProps} from './TextField';
 export type {TextProps} from './Text';
 export type {ToggleButtonProps, ToggleButtonRenderProps} from './ToggleButton';

packages/react-aria-components/test/TextField.test.js

@@ -10,81 +10,91 @@
  * governing permissions and limitations under the License.
  */
 
-import {Input, Label, Text, TextField, TextFieldContext} from '../';
+import {Input, Label, Text, TextArea, TextField, TextFieldContext} from '../';
 import React from 'react';
 import {render} from '@react-spectrum/test-utils';
 import userEvent from '@testing-library/user-event';
 
 let TestTextField = (props) => (
   <TextField defaultValue="test" data-foo="bar" {...props}>
     <Label>Test</Label>
-    <Input {...props.inputProps} />
+    <props.input {...props.inputProps} />
     <Text slot="description">Description</Text>
     <Text slot="errorMessage">Error</Text>
   </TextField>
 );
 
 describe('TextField', () => {
-  it('provides slots', () => {
-    let {getByRole} = render(<TestTextField />);
-
-    let input = getByRole('textbox');
-    expect(input).toHaveValue('test');
-    expect(input).toHaveAttribute('class', 'react-aria-Input');
-
-    expect(input.closest('.react-aria-TextField')).toHaveAttribute('data-foo', 'bar');
-
-    expect(input).toHaveAttribute('aria-labelledby');
-    let label = document.getElementById(input.getAttribute('aria-labelledby'));
-    expect(label).toHaveAttribute('class', 'react-aria-Label');
-    expect(label).toHaveTextContent('Test');
-
-    expect(input).toHaveAttribute('aria-describedby');
-    expect(input.getAttribute('aria-describedby').split(' ').map(id => document.getElementById(id).textContent).join(' ')).toBe('Description Error');
-  });
-
-  it('should support slot', () => {
-    let {getByRole} = render(
-      <TextFieldContext.Provider value={{slots: {test: {'aria-label': 'test'}}}}>
-        <TestTextField slot="test" />
-      </TextFieldContext.Provider>
-    );
-
-    let textbox = getByRole('textbox');
-    expect(textbox.closest('.react-aria-TextField')).toHaveAttribute('slot', 'test');
-    expect(textbox).toHaveAttribute('aria-label', 'test');
-  });
-
-  it('should support hover state', () => {
-    let {getByRole} = render(<TestTextField inputProps={{className: ({isHovered}) => isHovered ? 'hover' : ''}} />);
-    let input = getByRole('textbox');
-
-    expect(input).not.toHaveAttribute('data-hovered');
-    expect(input).not.toHaveClass('hover');
-
-    userEvent.hover(input);
-    expect(input).toHaveAttribute('data-hovered', 'true');
-    expect(input).toHaveClass('hover');
-
-    userEvent.unhover(input);
-    expect(input).not.toHaveAttribute('data-hovered');
-    expect(input).not.toHaveClass('hover');
-  });
-
-  it('should support focus visible state', () => {
-    let {getByRole} = render(<TestTextField inputProps={{className: ({isFocusVisible}) => isFocusVisible ? 'focus' : ''}} />);
-    let input = getByRole('textbox');
-
-    expect(input).not.toHaveAttribute('data-focus-visible');
-    expect(input).not.toHaveClass('focus');
-
-    userEvent.tab();
-    expect(document.activeElement).toBe(input);
-    expect(input).toHaveAttribute('data-focus-visible', 'true');
-    expect(input).toHaveClass('focus');
-
-    userEvent.tab();
-    expect(input).not.toHaveAttribute('data-focus-visible');
-    expect(input).not.toHaveClass('focus');
+  describe.each([
+    {name: 'Input', component: Input},
+    {name: 'TextArea', component: TextArea}]
+  )('$name', ({name, component}) => {
+    it('provides slots', () => {
+      let {getByRole} = render(<TestTextField input={component} />);
+
+      let input = getByRole('textbox');
+      expect(input).toHaveValue('test');
+      expect(input).toHaveAttribute('class', `react-aria-${name}`);
+      if (name === 'Input') {
+        expect(input).toHaveAttribute('type', 'text');
+      } else {
+        expect(input).not.toHaveAttribute('type');
+      }
+
+      expect(input.closest('.react-aria-TextField')).toHaveAttribute('data-foo', 'bar');
+
+      expect(input).toHaveAttribute('aria-labelledby');
+      let label = document.getElementById(input.getAttribute('aria-labelledby'));
+      expect(label).toHaveAttribute('class', 'react-aria-Label');
+      expect(label).toHaveTextContent('Test');
+
+      expect(input).toHaveAttribute('aria-describedby');
+      expect(input.getAttribute('aria-describedby').split(' ').map(id => document.getElementById(id).textContent).join(' ')).toBe('Description Error');
+    });
+
+    it('should support slot', () => {
+      let {getByRole} = render(
+        <TextFieldContext.Provider value={{slots: {test: {'aria-label': 'test'}}}}>
+          <TestTextField slot="test" input={component} />
+        </TextFieldContext.Provider>
+      );
+
+      let textbox = getByRole('textbox');
+      expect(textbox.closest('.react-aria-TextField')).toHaveAttribute('slot', 'test');
+      expect(textbox).toHaveAttribute('aria-label', 'test');
+    });
+
+    it('should support hover state', () => {
+      let {getByRole} = render(<TestTextField input={component} inputProps={{className: ({isHovered}) => isHovered ? 'hover' : ''}} />);
+      let input = getByRole('textbox');
+
+      expect(input).not.toHaveAttribute('data-hovered');
+      expect(input).not.toHaveClass('hover');
+
+      userEvent.hover(input);
+      expect(input).toHaveAttribute('data-hovered', 'true');
+      expect(input).toHaveClass('hover');
+
+      userEvent.unhover(input);
+      expect(input).not.toHaveAttribute('data-hovered');
+      expect(input).not.toHaveClass('hover');
+    });
+
+    it('should support focus visible state', () => {
+      let {getByRole} = render(<TestTextField input={component} inputProps={{className: ({isFocusVisible}) => isFocusVisible ? 'focus' : ''}} />);
+      let input = getByRole('textbox');
+
+      expect(input).not.toHaveAttribute('data-focus-visible');
+      expect(input).not.toHaveClass('focus');
+
+      userEvent.tab();
+      expect(document.activeElement).toBe(input);
+      expect(input).toHaveAttribute('data-focus-visible', 'true');
+      expect(input).toHaveClass('focus');
+
+      userEvent.tab();
+      expect(input).not.toHaveAttribute('data-focus-visible');
+      expect(input).not.toHaveClass('focus');
+    });
   });
 });