@availity/mui-textfield 1.2.3 → 1.3.0

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.3.0](https://github.com/Availity/element/compare/@availity/mui-textfield@1.2.4...@availity/mui-textfield@1.3.0) (2025-05-12)
+
+
+### Features
+
+* **mui-textfield:** new readonly and updated disabled styles ([093844f](https://github.com/Availity/element/commit/093844ff8811656acb701a95a280076a9f0cb030))
+
+
+### Bug Fixes
+
+* **mui-textfield:** resolve displayoverflowmaxlength not recognized prop error ([8324691](https://github.com/Availity/element/commit/83246910cfe8339a40eecba6224ce611cfa7ceaf))
+
+## [1.2.4](https://github.com/Availity/element/compare/@availity/mui-textfield@1.2.3...@availity/mui-textfield@1.2.4) (2025-04-30)
+
+### Dependency Updates
+
+* `mui-form-utils` updated to version `1.2.3`
+* `mui-icon` updated to version `1.2.3`
+* `mui-button` updated to version `1.2.3`
+* `mui-chip` updated to version `1.2.3`
+* `mui-menu` updated to version `1.2.3`
 ## [1.2.3](https://github.com/Availity/element/compare/@availity/mui-textfield@1.2.2...@availity/mui-textfield@1.2.3) (2025-04-28)
 
 ### Dependency Updates

package/dist/index.js

@@ -129,7 +129,7 @@ var TextFieldFormHelperText = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_mui_form_utils.FormHelperText, __spreadProps(__spreadValues({}, FormHelperTextProps2), { children: helperText }));
 };
 var TextField = (0, import_react3.forwardRef)((props, ref) => {
-  var _b, _c, _d, _e, _f, _g, _h;
+  var _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   const _a = props, {
     InputProps: InputProps2,
     helpTopicId,
@@ -156,6 +156,7 @@ var TextField = (0, import_react3.forwardRef)((props, ref) => {
   const [openDetected, setOpenDetected] = (0, import_react3.useState)(false);
   const [charCount, setCharCount] = (0, import_react3.useState)(0);
   const maxLength = (inputProps == null ? void 0 : inputProps.maxLength) || ((_c = (_b = rest.slotProps) == null ? void 0 : _b.htmlInput) == null ? void 0 : _c.maxLength);
+  const allReadOnly = (InputProps2 == null ? void 0 : InputProps2.readOnly) || (inputProps == null ? void 0 : inputProps.readOnly) || ((_e = (_d = rest.slotProps) == null ? void 0 : _d.htmlInput) == null ? void 0 : _e.readOnly) || ((_g = (_f = rest.slotProps) == null ? void 0 : _f.input) == null ? void 0 : _g.readOnly);
   const resolvedProps = (props2) => !props2 || Object.keys(props2).length === 0 ? void 0 : props2;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_TextField.default,
@@ -167,26 +168,27 @@ var TextField = (0, import_react3.forwardRef)((props, ref) => {
       helperText: helperText || /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, {}),
       slots: { formHelperText: TextFieldFormHelperText },
       slotProps: {
-        input: resolvedProps(__spreadValues(__spreadValues(__spreadValues({}, InputProps2), import_mui_form_utils.InputPropOverrides), (_d = rest.slotProps) == null ? void 0 : _d.input)),
+        input: resolvedProps(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, InputProps2), import_mui_form_utils.InputPropOverrides), (_h = rest.slotProps) == null ? void 0 : _h.input), {
+          readOnly: allReadOnly
+        })),
         htmlInput: resolvedProps(__spreadProps(__spreadValues(__spreadValues({
           "aria-required": required
-        }, inputProps), (_e = rest.slotProps) == null ? void 0 : _e.htmlInput), {
+        }, inputProps), (_i = rest.slotProps) == null ? void 0 : _i.htmlInput), {
           maxLength: !displayOverflowMaxLength ? maxLength : void 0
         })),
-        select: resolvedProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, SelectProps2), import_mui_form_utils.SelectPropOverrides), (0, import_mui_form_utils.SelectAccessibilityOverrides)(openDetected, setOpenDetected, SelectProps2 == null ? void 0 : SelectProps2.open)), (_f = rest.slotProps) == null ? void 0 : _f.select)),
+        select: resolvedProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, SelectProps2), import_mui_form_utils.SelectPropOverrides), (0, import_mui_form_utils.SelectAccessibilityOverrides)(openDetected, setOpenDetected, SelectProps2 == null ? void 0 : SelectProps2.open)), (_j = rest.slotProps) == null ? void 0 : _j.select)),
         inputLabel: resolvedProps(__spreadValues(__spreadValues({
           component: import_mui_form_utils.FormLabel,
           helpTopicId,
           required,
           shrink: true
-        }, InputLabelProps), (_g = rest.slotProps) == null ? void 0 : _g.inputLabel)),
+        }, InputLabelProps), (_k = rest.slotProps) == null ? void 0 : _k.inputLabel)),
         formHelperText: resolvedProps(__spreadProps(__spreadValues(__spreadValues({
           component: "div"
-        }, FormHelperTextProps2), (_h = rest.slotProps) == null ? void 0 : _h.formHelperText), {
+        }, FormHelperTextProps2), (_l = rest.slotProps) == null ? void 0 : _l.formHelperText), {
           charCount,
           helperText,
           maxLength,
-          displayOverflowMaxLength,
           showCharacterCount
         }))
       },

package/dist/index.mjs

@@ -102,7 +102,7 @@ var TextFieldFormHelperText = (_a) => {
   return /* @__PURE__ */ jsx6(FormHelperText, __spreadProps(__spreadValues({}, FormHelperTextProps2), { children: helperText }));
 };
 var TextField = forwardRef3((props, ref) => {
-  var _b, _c, _d, _e, _f, _g, _h;
+  var _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   const _a = props, {
     InputProps: InputProps2,
     helpTopicId,
@@ -129,6 +129,7 @@ var TextField = forwardRef3((props, ref) => {
   const [openDetected, setOpenDetected] = useState(false);
   const [charCount, setCharCount] = useState(0);
   const maxLength = (inputProps == null ? void 0 : inputProps.maxLength) || ((_c = (_b = rest.slotProps) == null ? void 0 : _b.htmlInput) == null ? void 0 : _c.maxLength);
+  const allReadOnly = (InputProps2 == null ? void 0 : InputProps2.readOnly) || (inputProps == null ? void 0 : inputProps.readOnly) || ((_e = (_d = rest.slotProps) == null ? void 0 : _d.htmlInput) == null ? void 0 : _e.readOnly) || ((_g = (_f = rest.slotProps) == null ? void 0 : _f.input) == null ? void 0 : _g.readOnly);
   const resolvedProps = (props2) => !props2 || Object.keys(props2).length === 0 ? void 0 : props2;
   return /* @__PURE__ */ jsx6(
     MuiTextField,
@@ -140,26 +141,27 @@ var TextField = forwardRef3((props, ref) => {
       helperText: helperText || /* @__PURE__ */ jsx6(Fragment, {}),
       slots: { formHelperText: TextFieldFormHelperText },
       slotProps: {
-        input: resolvedProps(__spreadValues(__spreadValues(__spreadValues({}, InputProps2), InputPropOverrides), (_d = rest.slotProps) == null ? void 0 : _d.input)),
+        input: resolvedProps(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, InputProps2), InputPropOverrides), (_h = rest.slotProps) == null ? void 0 : _h.input), {
+          readOnly: allReadOnly
+        })),
         htmlInput: resolvedProps(__spreadProps(__spreadValues(__spreadValues({
           "aria-required": required
-        }, inputProps), (_e = rest.slotProps) == null ? void 0 : _e.htmlInput), {
+        }, inputProps), (_i = rest.slotProps) == null ? void 0 : _i.htmlInput), {
           maxLength: !displayOverflowMaxLength ? maxLength : void 0
         })),
-        select: resolvedProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, SelectProps2), SelectPropOverrides), SelectAccessibilityOverrides(openDetected, setOpenDetected, SelectProps2 == null ? void 0 : SelectProps2.open)), (_f = rest.slotProps) == null ? void 0 : _f.select)),
+        select: resolvedProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, SelectProps2), SelectPropOverrides), SelectAccessibilityOverrides(openDetected, setOpenDetected, SelectProps2 == null ? void 0 : SelectProps2.open)), (_j = rest.slotProps) == null ? void 0 : _j.select)),
         inputLabel: resolvedProps(__spreadValues(__spreadValues({
           component: FormLabel,
           helpTopicId,
           required,
           shrink: true
-        }, InputLabelProps), (_g = rest.slotProps) == null ? void 0 : _g.inputLabel)),
+        }, InputLabelProps), (_k = rest.slotProps) == null ? void 0 : _k.inputLabel)),
         formHelperText: resolvedProps(__spreadProps(__spreadValues(__spreadValues({
           component: "div"
-        }, FormHelperTextProps2), (_h = rest.slotProps) == null ? void 0 : _h.formHelperText), {
+        }, FormHelperTextProps2), (_l = rest.slotProps) == null ? void 0 : _l.formHelperText), {
           charCount,
           helperText,
           maxLength,
-          displayOverflowMaxLength,
           showCharacterCount
         }))
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-textfield",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "Availity MUI Textfield Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -40,8 +40,8 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-form-utils": "1.3.0",
-    "@availity/mui-icon": "1.0.2"
+    "@availity/mui-form-utils": "1.3.1",
+    "@availity/mui-icon": "1.1.0"
   },
   "devDependencies": {
     "@availity/mui-typography": "1.0.2",

package/src/lib/TextField.stories.tsx

@@ -63,12 +63,13 @@ export const _States: StoryObj<typeof TextField> = {
   render: (args: TextFieldProps) => (
     <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap' }}>
       <TextField label="Default" id="default" {...args} />
-      <TextField label="Focused" id="Focused" focused {...args} />
+      <TextField label="Focused" id="focused" focused {...args} />
       <TextField label="Error" id="error" error {...args} />
+      <TextField label="Read Only" id="read-only" {...args} slotProps={{input: {readOnly: true}}}/>
       <TextField label="Disabled" id="disabled" disabled {...args} />
     </Stack>
   ),
-  args: { margin: 'normal' },
+  args: { margin: 'normal', value: 'value' },
 };
 
 export const _Sizes: StoryObj<typeof TextField> = {

package/src/lib/TextField.tsx

@@ -81,6 +81,10 @@ export const TextField = forwardRef<HTMLDivElement | HTMLInputElement, TextField
   // @ts-expect-error I'm not sure why maxLength is undefined in htmlInput, but it works. There's something weird with the type.
   const maxLength = inputProps?.maxLength || rest.slotProps?.htmlInput?.maxLength;
 
+  // @ts-expect-error More htmlInput type issues.
+  // slotProps.input is correct place to pass readOnly for class to be applied, but Autocomplete passes it through deprecated inputProps.
+  const allReadOnly = InputProps?.readOnly || inputProps?.readOnly || rest.slotProps?.htmlInput?.readOnly || rest.slotProps?.input?.readOnly
+
   const resolvedProps = (props: Record<string, unknown>) =>
     !props || Object.keys(props).length === 0 ? undefined : props;
 
@@ -94,7 +98,12 @@ export const TextField = forwardRef<HTMLDivElement | HTMLInputElement, TextField
       helperText={helperText || <></>}
       slots={{ formHelperText: TextFieldFormHelperText }}
       slotProps={{
-        input: resolvedProps({ ...InputProps, ...InputPropOverrides, ...rest.slotProps?.input }),
+        input: resolvedProps({
+          ...InputProps,
+          ...InputPropOverrides,
+          ...rest.slotProps?.input,
+          readOnly: allReadOnly
+        }),
         htmlInput: resolvedProps({
           'aria-required': required,
           ...inputProps,
@@ -122,7 +131,6 @@ export const TextField = forwardRef<HTMLDivElement | HTMLInputElement, TextField
           charCount,
           helperText,
           maxLength,
-          displayOverflowMaxLength,
           showCharacterCount,
         }),
       }}