fix(TextArea): add new props for allowing submit on enter pressed

.changeset/perfect-balloons-tell.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+Add prop `onKeyDown` on component `<TextArea />`

.changeset/quiet-files-camp.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/form": minor
+---
+
+Add props `onKeyDown` and `submitOnEnter` on `<TextAreaField />`

packages/form/src/components/TextAreaField/__stories__/SubmitOnEnter.stories.tsx

@@ -0,0 +1,26 @@
+import type { StoryFn } from '@storybook/react'
+import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
+import { TextAreaField } from '..'
+import { Submit } from '../../Submit'
+import { Template } from './Template.stories'
+
+export const SubmitOnEnter: StoryFn<
+  ComponentProps<typeof TextAreaField>
+> = args => (
+  <Stack gap={1}>
+    <TextAreaField {...args} />
+    <Submit>Submit</Submit>
+  </Stack>
+)
+
+SubmitOnEnter.args = { ...Template.args, required: true, submitOnEnter: true }
+
+SubmitOnEnter.parameters = {
+  docs: {
+    description: {
+      story:
+        'Using `submitOnEnter` props, the form will be submitted when the user presses the `Enter` key. To add a carriage return, use `Shift + Enter`.',
+    },
+  },
+}

packages/form/src/components/TextAreaField/__stories__/index.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta } from '@storybook/react'
+import { Snippet, Stack, Text } from '@ultraviolet/ui'
 import { TextAreaField } from '..'
 import { Form } from '../..'
 import { useForm } from '../../..'
@@ -8,15 +9,58 @@ export default {
   component: TextAreaField,
   decorators: [
     ChildStory => {
-      const methods = useForm({
-        defaultValues: {
-          textarea: 'A long time ago in a galaxy far, far away',
-        },
-      })
+      const methods = useForm()
+      const {
+        errors,
+        isDirty,
+        isSubmitting,
+        touchedFields,
+        submitCount,
+        dirtyFields,
+        isValid,
+        isLoading,
+        isSubmitted,
+        isValidating,
+        isSubmitSuccessful,
+      } = methods.formState
 
       return (
         <Form onSubmit={() => {}} errors={mockErrors} methods={methods}>
-          <ChildStory />
+          <Stack gap={2}>
+            <ChildStory />
+            <Stack gap={1}>
+              <Text variant="bodyStrong" as="p">
+                Form input values:
+              </Text>
+              <Snippet prefix="lines" initiallyExpanded>
+                {JSON.stringify(methods.watch(), null, 1)}
+              </Snippet>
+            </Stack>
+            <Stack gap={1}>
+              <Text variant="bodyStrong" as="p">
+                Form values:
+              </Text>
+              <Snippet prefix="lines">
+                {JSON.stringify(
+                  {
+                    errors,
+                    isDirty,
+                    isSubmitting,
+                    touchedFields,
+                    submitCount,
+                    dirtyFields,
+                    isValid,
+                    isLoading,
+                    isSubmitted,
+                    isValidating,
+                    isSubmitSuccessful,
+                  },
+                  null,
+                  1,
+                )}
+              </Snippet>
+            </Stack>
+          </Stack>
         </Form>
       )
     },
@@ -25,4 +69,5 @@ export default {
 } as Meta
 
 export { Playground } from './Playground.stories'
+export { SubmitOnEnter } from './SubmitOnEnter.stories'
 export { Required } from './Required.stories'