@availity/mui-controlled-form 2.2.7 → 2.2.8

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [2.2.8](https://github.com/Availity/element/compare/@availity/mui-controlled-form@2.2.7...@availity/mui-controlled-form@2.2.8) (2026-04-17)
+
+### Dependency Updates
+
+* `mui-datepicker` updated to version `2.2.7`
+* `theme-provider` updated to version `2.2.7`
 ## [2.2.7](https://github.com/Availity/element/compare/@availity/mui-controlled-form@2.2.6...@availity/mui-controlled-form@2.2.7) (2026-03-16)
 
 ### Dependency Updates

package/README.md

@@ -10,7 +10,7 @@
 
 This package extends the Element's Form components with [react-hook-form](https://react-hook-form.com/). The goal of this package is to decrease the amount of setup involved with building a form using Element components and react-hook-form. If you would like to use another form library, the raw Element form components are also available.
 
-Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/form-components-controlled-form-introduction--docs)
+Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/form-components-controlled-form-readme--docs)
 
 Availity standards for design and usage can be found in the [Availity Design Guide](https://design.availity.com/2e36e50c7)
 

package/introduction.mdx

@@ -2,7 +2,7 @@ import { Markdown, Meta } from '@storybook/addon-docs/blocks';
 import ReadMe from './README.md?raw';
 import CHANGELOG from './CHANGELOG.md?raw';
 
-<Meta title="Form Components/Controlled Form/Introduction" />
+<Meta title="Form Components/Controlled Form/README" />
 
 <Markdown>{ReadMe}</Markdown>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-controlled-form",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "description": "Availity MUI/react-hook-form controlled form components - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -8,7 +8,7 @@
     "availity",
     "mui"
   ],
-  "homepage": "https://availity.github.io/element/?path=/docs/components-controlled-form-introduction--docs",
+  "homepage": "https://availity.github.io/element/?path=/docs/components-controlled-form-readme--docs",
   "bugs": {
     "url": "https://github.com/Availity/element/issues"
   },
@@ -42,7 +42,7 @@
   "dependencies": {
     "@availity/mui-autocomplete": "^2.2.6",
     "@availity/mui-checkbox": "^2.0.2",
-    "@availity/mui-datepicker": "^2.0.6",
+    "@availity/mui-datepicker": "^2.1.0",
     "@availity/mui-form-utils": "^2.0.5",
     "@availity/mui-textfield": "^2.0.5",
     "react-hook-form": "^7.55.0"

package/src/lib/RHF.stories.tsx

@@ -0,0 +1,185 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import dayjs from 'dayjs';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Button, LoadingButton } from '@availity/mui-button';
+import { FormControl, FormControlLabel, FormLabel, Radio, RequiredKey } from '@availity/mui-form-utils';
+import { ControlledAutocomplete, ControlledDatepicker, ControlledRadioGroup, ControlledSelect, ControlledTextField, FormProvider, SubmitHandler, useForm } from '..';
+
+  /**
+   * All of our controlled form components have `react-hook-form` controllers baked in.
+   * For a simpler experience, `@availity/element` exports the necessary `react-hook-form` hooks.
+   *
+   * - [`FormProvider` component](https://react-hook-form.com/docs/formprovider) - host context object and allow consuming component to subscribe to context and use useForm props and methods.
+   * - [`useForm` hook](https://react-hook-form.com/docs/useform) - primary hook that drives `react-hook-form`.
+   * - [`useFormContext` hook](https://react-hook-form.com/docs/useformcontext) - allows you to access the form context. Intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop.
+   * - `SubmitHandler` type
+   * - `UseFormProps` type
+   * - `UseFormReturn` type
+   *
+   * For complex forms, you may need to get additional resources directly from `react-hook-form`, i.e. `useWatch`, `useFieldArray`.
+   *
+   * [Schema-based validation resolvers](https://react-hook-form.com/get-started#SchemaValidation) are available from `@hookform/resolvers`. We've included an example using `yup` but more are supported.
+   *
+   * For more information, hooks, or components see the [react-hook-form documentation](https://react-hook-form.com/)
+   */
+  const meta: Meta = {
+    title: 'Form Components/Controlled Form',
+    tags: ['autodocs'],
+    parameters: { docs: {
+      // description: { component: `${FormMigration}`},
+      source: { state: true }
+    }}
+
+  };
+
+  export default meta;
+
+  const dropdownOptions = ['Bulbasaur', 'Squirtle', 'Charmander'];
+
+  /** Form with controlled form components, `yup`, and `@hookform/resolvers/yup` */
+  export const _YupValidation: StoryObj = {
+    render: () => {
+      const schema = yup.object({
+        textField: yup
+          .string()
+          .max(200, 'Text Field cannot exceed 200 characters.')
+          .required('This field is required.'),
+        selectField: yup
+          .string()
+          .required('This Field is required.')
+          .nullable(),
+        datePicker: yup
+          .mixed<dayjs.Dayjs>()
+          .required('This Field is required.')
+          .nullable(),
+        radio: yup
+          .string()
+          .required('A selection is required'),
+      });
+
+      const isRequired = (name: string) => {
+        return(!(schema.describe().fields[name] as yup.SchemaDescription)?.optional || undefined)
+      }
+
+      type FormInputsType = yup.InferType<typeof schema>;
+
+      const onSubmit: SubmitHandler<FormInputsType> = (data) => console.log(data)
+
+      const methods = useForm({
+        defaultValues: {
+          textField: "",
+          selectField: undefined,
+          datePicker: undefined,
+          radio: "",
+        },
+        mode: 'onBlur',
+        resolver: yupResolver(schema)
+      });
+
+      return (
+        <FormProvider {...methods}>
+          <form onSubmit={methods.handleSubmit(onSubmit)}>
+            <RequiredKey />
+            <ControlledTextField
+              name="textField"
+              label="Textfield"
+              margin="normal"
+              fullWidth
+              helperText='Max 200 characters'
+              required={isRequired('textField')}
+            />
+            <ControlledAutocomplete
+              name="selectField"
+              FieldProps={{
+                margin:"normal",
+                label: 'Select Field',
+                placeholder: 'Value',
+                required: isRequired('selectField'),
+              }}
+              options={dropdownOptions}
+            />
+            <ControlledDatepicker
+              name="datePicker"
+              FieldProps={{
+                label: "Date",
+                margin: "normal",
+                required: isRequired('datePicker')
+              }}
+            />
+            <ControlledRadioGroup name="radio" label="Radio Group" row aria-required required={isRequired('radio')}>
+              <FormControlLabel control={<Radio />} value="1" label="Option 1" />
+              <FormControlLabel control={<Radio />} value="2" label="Option 2" />
+            </ControlledRadioGroup>
+            <LoadingButton loading={methods?.formState?.isSubmitting} type="submit" sx={{mt: 2}}>
+              Submit
+            </LoadingButton>
+          </form>
+        </FormProvider>
+      )
+    }
+  }
+
+  /** Form with controlled form components using internal rules for validation.
+   *
+   * Useful for smaller forms where writing a full schema could be cumbersome.
+   */
+  export const _RHFRules: StoryObj = {
+    render: () => {
+      const methods = useForm({defaultValues: {textField: '', selectField: null, datePicker: null, radio: ''}});
+      const onSubmit = (data: any) => console.log(data)
+      return (
+        <FormProvider {...methods}>
+          <form onSubmit={methods.handleSubmit(onSubmit)}>
+            <RequiredKey />
+            <ControlledTextField
+              name="textField"
+              label="Textfield"
+              margin="normal"
+              fullWidth
+              required
+              rules={{
+                required: 'This field is required',
+                maxLength: { value: 200, message: 'This field must not exceed 200 characters'}
+              }}
+              helperText='Max 200 characters'
+            />
+            <ControlledAutocomplete
+              name="selectField"
+              rules={{ required: 'This field is required'}}
+              FieldProps={{
+                margin:"normal",
+                label: 'Select Field',
+                placeholder: 'Value',
+                required: true,
+              }}
+              options={dropdownOptions}
+            />
+            <ControlledDatepicker
+              name="datePicker"
+              rules={{ required: 'This field is required' }}
+              FieldProps={{
+                label: "Date",
+                margin: "normal",
+                required: true,
+              }}
+            />
+            <ControlledRadioGroup
+              name="radio"
+              label="Radio Group"
+              row
+              aria-required
+              required
+              rules={{ required: 'This field is required' }}
+            >
+              <FormControlLabel control={<Radio />} value="1" label="Option 1" />
+              <FormControlLabel control={<Radio />} value="2" label="Option 2" />
+            </ControlledRadioGroup>
+            <LoadingButton loading={methods?.formState?.isSubmitting} type="submit" sx={{mt: 2}}>
+              Submit
+            </LoadingButton>
+          </form>
+        </FormProvider>
+      )
+    }
+  }