@availity/mui-controlled-form 1.0.7 → 1.1.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.1.0](https://github.com/Availity/element/compare/@availity/mui-controlled-form@1.0.7...@availity/mui-controlled-form@1.1.0) (2025-03-21)
+
+### Dependency Updates
+
+* `mui-autocomplete` updated to version `1.0.7`
+* `mui-datepicker` updated to version `1.0.7`
+* `mui-form-utils` updated to version `1.0.7`
+* `mui-textfield` updated to version `1.0.7`
+* `theme-provider` updated to version `1.0.7`
+
+### Features
+
+* **mui-textfield, mui-form-utils:** add placeholder support to select ([3a6b1ef](https://github.com/Availity/element/commit/3a6b1ef2e5ceedca632bd1916734e56402371ffb))
+* **mui-textfield:** add optional character count to textfield ([1c3f0dc](https://github.com/Availity/element/commit/1c3f0dc886e153c79afc81c98b3326ed8990b305))
+
 ## [1.0.7](https://github.com/Availity/element/compare/@availity/mui-controlled-form@1.0.6...@availity/mui-controlled-form@1.0.7) (2025-03-13)
 
 ### Dependency Updates

package/dist/index.js

@@ -693,11 +693,17 @@ var ControlledTextField = (_a) => {
       shouldUnregister,
       render: (_a2) => {
         var _b2 = _a2, { field: _c } = _b2, _d = _c, { ref } = _d, field = __objRest(_d, ["ref"]), { fieldState: { error } } = _b2;
+        var _a3;
         return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           import_mui_textfield.TextField,
           __spreadProps(__spreadValues(__spreadValues({
             required: typeof rules.required === "object" ? rules.required.value : !!rules.required
           }, field), rest), {
+            slotProps: __spreadProps(__spreadValues({}, rest.slotProps), {
+              htmlInput: __spreadValues({
+                maxLength: rules.maxLength
+              }, (_a3 = rest.slotProps) == null ? void 0 : _a3.htmlInput)
+            }),
             inputRef: ref,
             error: !!error,
             helperText: (error == null ? void 0 : error.message) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [

package/dist/index.mjs

@@ -657,11 +657,17 @@ var ControlledTextField = (_a) => {
       shouldUnregister,
       render: (_a2) => {
         var _b2 = _a2, { field: _c } = _b2, _d = _c, { ref } = _d, field = __objRest(_d, ["ref"]), { fieldState: { error } } = _b2;
+        var _a3;
         return /* @__PURE__ */ jsx11(
           TextField,
           __spreadProps(__spreadValues(__spreadValues({
             required: typeof rules.required === "object" ? rules.required.value : !!rules.required
           }, field), rest), {
+            slotProps: __spreadProps(__spreadValues({}, rest.slotProps), {
+              htmlInput: __spreadValues({
+                maxLength: rules.maxLength
+              }, (_a3 = rest.slotProps) == null ? void 0 : _a3.htmlInput)
+            }),
             inputRef: ref,
             error: !!error,
             helperText: (error == null ? void 0 : error.message) ? /* @__PURE__ */ jsxs8(Fragment8, { children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-controlled-form",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "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.6",
+    "@availity/mui-autocomplete": "^1.0.7",
     "@availity/mui-checkbox": "^1.0.1",
-    "@availity/mui-datepicker": "^1.0.2",
-    "@availity/mui-form-utils": "^1.0.1",
-    "@availity/mui-textfield": "^1.0.1",
+    "@availity/mui-datepicker": "^1.0.3",
+    "@availity/mui-form-utils": "^1.1.0",
+    "@availity/mui-textfield": "^1.1.0",
     "react-hook-form": "^7.54.2"
   },
   "devDependencies": {

package/src/lib/TextField.test.tsx

@@ -7,15 +7,14 @@ const onSubmit = jest.fn();
 describe('ControlledTextField', () => {
   test('should render the error styling if an error is returned', async () => {
     const screen = render(
-      <TestForm UseFormOptions={{values: { controlledTextField: undefined }}} onSubmit={onSubmit}>
+      <TestForm UseFormOptions={{ values: { controlledTextField: undefined } }} onSubmit={onSubmit}>
         <ControlledTextField
           name="controlledTextField"
           helperText="This is some helper text"
           placeholder="Name"
-          rules= {{
-            required:"This field is required.",
-            maxLength:{ value: 10, message: 'Too long' }
-
+          rules={{
+            required: 'This field is required.',
+            maxLength: { value: 10, message: 'Too long' },
           }}
           inputProps={{
             'data-testid': 'testTextField',
@@ -37,15 +36,14 @@ describe('ControlledTextField', () => {
 
   test('should not render the error styling if no error is returned', async () => {
     const screen = render(
-      <TestForm UseFormOptions={{values: { controlledTextField: undefined }}} onSubmit={onSubmit}>
+      <TestForm UseFormOptions={{ values: { controlledTextField: undefined } }} onSubmit={onSubmit}>
         <ControlledTextField
           name="controlledTextField"
           helperText="This is some helper text"
           placeholder="Name"
-          rules= {{
-            required:"This field is required.",
-            maxLength:{ value: 10, message: 'Too long' }
-
+          rules={{
+            required: 'This field is required.',
+            maxLength: { value: 10, message: 'Too long' },
           }}
           inputProps={{
             'data-testid': 'testTextField',
@@ -68,4 +66,53 @@ describe('ControlledTextField', () => {
       expect(formValues).toBe('Some Text');
     });
   });
+
+  describe('TextField character counter', () => {
+    test('should render character counter successfully via inputProps', () => {
+      const { getByText, getByTestId, getByTitle } = render(
+        <TestForm UseFormOptions={{ values: { controlledTextField: undefined } }} onSubmit={onSubmit}>
+          <ControlledTextField
+            name="controlledTextField"
+            label="Test"
+            showCharacterCount
+            inputProps={{ 'data-testid': 'testTextField', maxLength: 20 }}
+          />
+        </TestForm>
+      );
+
+      expect(getByText('0/20')).toBeTruthy();
+
+      const input = getByTestId('testTextField');
+      fireEvent.change(input, { target: { value: 'Some Text' } });
+
+      expect(getByText('9/20')).toBeTruthy();
+
+      fireEvent.change(input, { target: { value: "Some More Text that doesn't fit" } });
+
+      expect(getByTitle('Error')).toBeTruthy();
+    });
+
+    test('should render character counter successfully via slotProps', () => {
+      const { getByText, getByTestId, getByTitle } = render(
+        <TestForm UseFormOptions={{ values: { controlledTextField: undefined } }} onSubmit={onSubmit}>
+          <ControlledTextField
+            name="controlledTextField"
+            label="Test"
+            showCharacterCount
+            slotProps={{ htmlInput: { 'data-testid': 'testTextField', maxLength: 20 } }}
+          />
+        </TestForm>
+      );
+      expect(getByText('0/20')).toBeTruthy();
+
+      const input = getByTestId('testTextField');
+      fireEvent.change(input, { target: { value: 'Some Text' } });
+
+      expect(getByText('9/20')).toBeTruthy();
+
+      fireEvent.change(input, { target: { value: "Some More Text that doesn't fit" } });
+
+      expect(getByTitle('Error')).toBeTruthy();
+    });
+  });
 });

package/src/lib/TextField.tsx

@@ -36,6 +36,13 @@ export const ControlledTextField = ({
           required={typeof rules.required === 'object' ? rules.required.value : !!rules.required}
           {...field}
           {...rest}
+          slotProps={{
+            ...rest.slotProps,
+            htmlInput: {
+              maxLength: rules.maxLength,
+              ...rest.slotProps?.htmlInput,
+            },
+          }}
           inputRef={ref}
           error={!!error}
           helperText={