@availity/mui-controlled-form 1.1.1 → 1.1.3

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.1.3](https://github.com/Availity/element/compare/@availity/mui-controlled-form@1.1.2...@availity/mui-controlled-form@1.1.3) (2025-03-27)
+
+### Dependency Updates
+
+* `mui-autocomplete` updated to version `1.1.2`
+* `mui-datepicker` updated to version `1.1.2`
+* `mui-textfield` updated to version `1.1.2`
+## [1.1.2](https://github.com/Availity/element/compare/@availity/mui-controlled-form@1.1.1...@availity/mui-controlled-form@1.1.2) (2025-03-25)
+
+### Dependency Updates
+
+* `mui-datepicker` updated to version `1.1.1`
+* `theme-provider` updated to version `1.1.1`
 ## [1.1.1](https://github.com/Availity/element/compare/@availity/mui-controlled-form@1.1.0...@availity/mui-controlled-form@1.1.1) (2025-03-24)
 
 ### Dependency Updates

package/dist/index.js

@@ -701,7 +701,7 @@ var ControlledTextField = (_a) => {
           }, field), rest), {
             slotProps: __spreadProps(__spreadValues({}, rest.slotProps), {
               htmlInput: __spreadValues({
-                maxLength: rules.maxLength
+                maxLength: typeof rules.maxLength === "object" ? rules.maxLength.value : rules.maxLength
               }, (_a3 = rest.slotProps) == null ? void 0 : _a3.htmlInput)
             }),
             inputRef: ref,

package/dist/index.mjs

@@ -665,7 +665,7 @@ var ControlledTextField = (_a) => {
           }, field), rest), {
             slotProps: __spreadProps(__spreadValues({}, rest.slotProps), {
               htmlInput: __spreadValues({
-                maxLength: rules.maxLength
+                maxLength: typeof rules.maxLength === "object" ? rules.maxLength.value : rules.maxLength
               }, (_a3 = rest.slotProps) == null ? void 0 : _a3.htmlInput)
             }),
             inputRef: ref,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-controlled-form",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Availity MUI/react-hook-form controlled form components - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -40,11 +40,11 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-autocomplete": "^1.0.7",
+    "@availity/mui-autocomplete": "^1.0.8",
     "@availity/mui-checkbox": "^1.0.1",
-    "@availity/mui-datepicker": "^1.0.4",
+    "@availity/mui-datepicker": "^1.0.6",
     "@availity/mui-form-utils": "^1.1.0",
-    "@availity/mui-textfield": "^1.1.0",
+    "@availity/mui-textfield": "^1.1.1",
     "react-hook-form": "^7.54.2"
   },
   "devDependencies": {

package/src/lib/TextField.stories.tsx

@@ -16,7 +16,7 @@ const meta: Meta<typeof ControlledTextField> = {
     ...TextFieldPropsCategorized,
     helperText: {
       type: 'string',
-      table: { category: 'Input Props' }
+      table: { category: 'Input Props' },
     },
   },
 };
@@ -25,22 +25,67 @@ export default meta;
 
 export const _ControlledTextField: StoryObj<typeof ControlledTextField> = {
   render: (args: ControlledTextFieldProps) => {
-    const methods = useForm({values:{ [args.name]: '' }});
+    const methods = useForm({ values: { [args.name]: '' } });
 
     return (
       <FormProvider {...methods}>
         <form onSubmit={methods.handleSubmit((data) => data)}>
           <ControlledTextField {...args} />
           <Grid container direction="row" justifyContent="space-between" marginTop={1}>
-            <Button disabled={!methods?.formState?.isSubmitSuccessful} children="Reset" color="secondary" onClick={() => methods.reset()} />
+            <Button
+              disabled={!methods?.formState?.isSubmitSuccessful}
+              children="Reset"
+              color="secondary"
+              onClick={() => methods.reset()}
+            />
             <Button type="submit" disabled={methods?.formState?.isSubmitSuccessful} children="Submit" />
           </Grid>
-          { methods?.formState?.isSubmitSuccessful ? (
+          {methods?.formState?.isSubmitSuccessful ? (
             <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
               <Typography variant="h2">Submitted Values</Typography>
               <pre data-testid="result">{JSON.stringify(methods.getValues(), null, 2)}</pre>
             </Paper>
-          ) : null }
+          ) : null}
+        </form>
+      </FormProvider>
+    );
+  },
+  args: {
+    name: 'controlledTextField',
+    placeholder: 'Name',
+    required: true,
+    rules: {
+      required: 'This field is required.',
+      maxLength: { value: 10, message: 'Too long' },
+    },
+    label: 'TextField Label',
+    showCharacterCount: true,
+  },
+};
+
+export const _ControlledTextFieldDisplayOverflow: StoryObj<typeof ControlledTextField> = {
+  render: (args: ControlledTextFieldProps) => {
+    const methods = useForm({ values: { [args.name]: '' } });
+
+    return (
+      <FormProvider {...methods}>
+        <form onSubmit={methods.handleSubmit((data) => data)}>
+          <ControlledTextField {...args} />
+          <Grid container direction="row" justifyContent="space-between" marginTop={1}>
+            <Button
+              disabled={!methods?.formState?.isSubmitSuccessful}
+              children="Reset"
+              color="secondary"
+              onClick={() => methods.reset()}
+            />
+            <Button type="submit" disabled={methods?.formState?.isSubmitSuccessful} children="Submit" />
+          </Grid>
+          {methods?.formState?.isSubmitSuccessful ? (
+            <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
+              <Typography variant="h2">Submitted Values</Typography>
+              <pre data-testid="result">{JSON.stringify(methods.getValues(), null, 2)}</pre>
+            </Paper>
+          ) : null}
         </form>
       </FormProvider>
     );
@@ -52,8 +97,10 @@ export const _ControlledTextField: StoryObj<typeof ControlledTextField> = {
     required: true,
     rules: {
       required: 'This field is required.',
-      maxLength: { value: 10, message: 'Too long' }
+      maxLength: { value: 10, message: 'Too long' },
     },
     label: 'TextField Label',
+    displayOverflowMaxLength: true,
+    showCharacterCount: true,
   },
 };

package/src/lib/TextField.test.tsx

@@ -80,12 +80,14 @@ describe('ControlledTextField', () => {
         </TestForm>
       );
 
-      expect(getByText('0/20')).toBeTruthy();
+      expect(getByText('0')).toBeTruthy();
+      expect(getByText('/20')).toBeTruthy();
 
       const input = getByTestId('testTextField');
       fireEvent.change(input, { target: { value: 'Some Text' } });
 
-      expect(getByText('9/20')).toBeTruthy();
+      expect(getByText('9')).toBeTruthy();
+      expect(getByText('/20')).toBeTruthy();
 
       fireEvent.change(input, { target: { value: "Some More Text that doesn't fit" } });
 
@@ -103,12 +105,14 @@ describe('ControlledTextField', () => {
           />
         </TestForm>
       );
-      expect(getByText('0/20')).toBeTruthy();
+      expect(getByText('0')).toBeTruthy();
+      expect(getByText('/20')).toBeTruthy();
 
       const input = getByTestId('testTextField');
       fireEvent.change(input, { target: { value: 'Some Text' } });
 
-      expect(getByText('9/20')).toBeTruthy();
+      expect(getByText('9')).toBeTruthy();
+      expect(getByText('/20')).toBeTruthy();
 
       fireEvent.change(input, { target: { value: "Some More Text that doesn't fit" } });
 

package/src/lib/TextField.tsx

@@ -39,7 +39,7 @@ export const ControlledTextField = ({
           slotProps={{
             ...rest.slotProps,
             htmlInput: {
-              maxLength: rules.maxLength,
+              maxLength: typeof rules.maxLength === 'object' ? rules.maxLength.value : rules.maxLength,
               ...rest.slotProps?.htmlInput,
             },
           }}

package/src/lib/Types.tsx

@@ -188,6 +188,7 @@ export const AllControllerPropertiesCategorized: CategorizedControllerPropsObjec
 };
 
 export const TextFieldPropsCategorized: TextFieldPropsObject = {
+  displayOverflowMaxLength: { table: { category: 'Input Props' } },
   slotProps: { table: { category: 'Input Props' } },
   className: { table: { category: 'Input Props' } },
   style: { table: { category: 'Input Props' } },