Merge branch 'main' into changeset-release/main

.changeset/chilled-seahorses-pay.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/text-area': patch
+---
+
+Allow defaultValue to be used in TextArea

packages/text-area/src/TextArea/TextArea.spec.tsx

@@ -62,6 +62,19 @@ describe('packages/text-area', () => {
     expect(onChange).toHaveBeenCalledTimes(1);
   });
 
+  test('setting a defaultValue sets a default initial value and can be changed after', () => {
+    const { textArea } = renderTextArea({
+      defaultValue: 'a fun default value',
+    });
+    expect((textArea as HTMLTextAreaElement).value).toBe('a fun default value');
+
+    fireEvent.change(textArea, {
+      target: { value: 'a' },
+    });
+
+    expect((textArea as HTMLTextAreaElement).value).toBe('a');
+  });
+
   describe('when the "state" prop is set to error, and an "errorMessage" is set', () => {
     test('the error message appears in the DOM', () => {
       const { container } = renderTextArea({

packages/text-area/src/TextArea/TextArea.tsx

@@ -47,6 +47,7 @@ import { State, TextAreaProps } from './TextArea.types';
  * @param props.darkMode Determines whether or not the component appears in dark theme.
  * @param props.handleValidation Validation callback used to validate input.
  * @param props.baseFontSize Override the global `baseFontSize` set in LeafygreenProvider. This will only change the font size of the input text, not the label or description.
+ * @param props.defaultValue The default value of the input field. Unlike value, component will not be controlled if defaultValue is passed.
  */
 
 type TextArea = React.ForwardRefExoticComponent<TextAreaProps>;
@@ -69,6 +70,7 @@ export const TextArea: TextArea = forwardRef<
     handleValidation,
     'aria-labelledby': ariaLabelledby,
     baseFontSize: baseFontSizeProp,
+    defaultValue = '',
     ...rest
   }: TextAreaProps,
   forwardedRef: React.Ref<HTMLTextAreaElement>,
@@ -78,7 +80,7 @@ export const TextArea: TextArea = forwardRef<
   const { darkMode, theme } = useDarkMode(darkModeProp);
 
   const isControlled = typeof controlledValue === 'string';
-  const [uncontrolledValue, setValue] = useState('');
+  const [uncontrolledValue, setValue] = useState(defaultValue);
   const value = isControlled ? controlledValue : uncontrolledValue;
 
   // Validation