From a5bfd96821ebd4f27442968a575d4edf83df5559 Mon Sep 17 00:00:00 2001
From: Evan Sharp <evan.sharp@availity.com>
Date: Mon, 10 Feb 2025 10:15:21 -0500
Subject: [PATCH] docs(mui-controlled-form): add select examples to
 ControlledTextField

---
 .../src/lib/TextField.stories.tsx             | 114 ++++++++++++++++++
 1 file changed, 114 insertions(+)

diff --git a/packages/controlled-form/src/lib/TextField.stories.tsx b/packages/controlled-form/src/lib/TextField.stories.tsx
index 48be80d6b9..0273b57d03 100644
--- a/packages/controlled-form/src/lib/TextField.stories.tsx
+++ b/packages/controlled-form/src/lib/TextField.stories.tsx
@@ -6,6 +6,7 @@ import { useFormContext } from 'react-hook-form';
 import { Paper } from '@availity/mui-paper';
 import { Typography } from '@availity/mui-typography';
 import { Grid } from '@availity/mui-layout';
+import { MenuItem } from '@availity/mui-menu';
 
 const meta: Meta<typeof ControlledTextField> = {
   title: 'Form Components/Controlled Form/ControlledTextField',
@@ -70,3 +71,116 @@ export const _ControlledTextField: StoryObj<typeof ControlledTextField> = {
     label: 'TextField Label',
   },
 };
+
+export const _ControlledTextFieldSelect: StoryObj<typeof ControlledTextField> = {
+  render: (args: ControlledTextFieldProps) => {
+    const SubmittedValues = () => {
+      const {
+        getValues,
+        formState: { isSubmitSuccessful },
+      } = useFormContext();
+
+      return isSubmitSuccessful ? (
+        <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
+          <Typography variant="h2">Submitted Values</Typography>
+          <pre>{JSON.stringify(getValues(), null, 2)}</pre>
+        </Paper>
+      ) : null;
+    };
+
+    const Actions = () => {
+      const {
+        reset,
+        formState: { isSubmitSuccessful },
+      } = useFormContext();
+      return (
+        <Grid container direction="row" justifyContent="space-between" marginTop={1}>
+          <Button
+            disabled={!isSubmitSuccessful}
+            children="Reset"
+            color="secondary"
+            onClick={() => reset({ [args.name]: '' })}
+          />
+          <Button type="submit" disabled={isSubmitSuccessful} children="Submit" />
+        </Grid>
+      );
+    };
+    return (
+      <ControlledForm values={{ [args.name]: '' }} onSubmit={(data) => data}>
+        <ControlledTextField {...args}>
+          <MenuItem value={10}>10</MenuItem>
+          <MenuItem value={20}>20</MenuItem>
+          <MenuItem value={30}>30</MenuItem>
+        </ControlledTextField>
+        <Actions />
+        <SubmittedValues />
+      </ControlledForm>
+    );
+  },
+  args: {
+    name: 'controlledTextFieldSelect',
+    helperText: 'This is some helper text',
+    placeholder: 'Name',
+    required: 'This field is required.',
+    label: 'Select TextField Label',
+    select: true,
+  },
+};
+
+export const _ControlledTextFieldMultiSelect: StoryObj<typeof ControlledTextField> = {
+  render: (args: ControlledTextFieldProps) => {
+    const SubmittedValues = () => {
+      const {
+        getValues,
+        formState: { isSubmitSuccessful },
+      } = useFormContext();
+
+      return isSubmitSuccessful ? (
+        <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
+          <Typography variant="h2">Submitted Values</Typography>
+          <pre>{JSON.stringify(getValues(), null, 2)}</pre>
+        </Paper>
+      ) : null;
+    };
+
+    const Actions = () => {
+      const {
+        reset,
+        formState: { isSubmitSuccessful },
+      } = useFormContext();
+      return (
+        <Grid container direction="row" justifyContent="space-between" marginTop={1}>
+          <Button
+            disabled={!isSubmitSuccessful}
+            children="Reset"
+            color="secondary"
+            onClick={() => reset({ [args.name]: [] })}
+          />
+          <Button type="submit" disabled={isSubmitSuccessful} children="Submit" />
+        </Grid>
+      );
+    };
+    return (
+      <ControlledForm values={{ [args.name]: [] }} onSubmit={(data) => data}>
+        <ControlledTextField {...args}>
+          <MenuItem value={10}>10</MenuItem>
+          <MenuItem value={20}>20</MenuItem>
+          <MenuItem value={30}>30</MenuItem>
+        </ControlledTextField>
+        <Actions />
+        <SubmittedValues />
+      </ControlledForm>
+    );
+  },
+  args: {
+    name: 'controlledTextFieldMultiSelect',
+    helperText: 'This is some helper text',
+    placeholder: 'Name',
+    required: 'This field is required.',
+    label: 'Multiselect TextField Label',
+    select: true,
+    SelectProps: {
+      multiple: true,
+    },
+  },
+};