@availity/mui-textfield 0.7.1 → 1.0.0-alpha.0

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.0.0-alpha.0](https://github.com/Availity/element/compare/@availity/mui-textfield@0.7.1...@availity/mui-textfield@1.0.0-alpha.0) (2025-02-24)
+
+
+### ⚠ BREAKING CHANGES
+
+* upgraded to @mui/material v6
+* **element:** upgraded to @mui/material v6
+
+### Features
+
+* **element:** upgrade to @mui/material v6 ([cb958bb](https://github.com/Availity/element/commit/cb958bba99a4f1ee6dab323f0ff54b69e6fd3493))
+* upgrade @mui/material ([571453a](https://github.com/Availity/element/commit/571453a34b21c344594ab4c03bc497d19aba942b))
+* upgrade to MUI v6 ([7febd6f](https://github.com/Availity/element/commit/7febd6fd4fd58e87e1c97a832cea3b4595a35d58))
+
+
+### Bug Fixes
+
+* **mui-textfield:** remove slotProps and use custom props to ease prop merging ([4543505](https://github.com/Availity/element/commit/45435056abcca6de9538f0f6fd29f58a5b5f26d3))
+
 ## [0.7.1](https://github.com/Availity/element/compare/@availity/mui-textfield@0.7.0...@availity/mui-textfield@0.7.1) (2025-02-18)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -9,7 +9,7 @@ type TextFieldProps = {
     SelectProps?: SelectProps;
     /** If `true`, the input will take up the full width of its container. @default true */
     fullWidth?: boolean;
-} & Pick<FormLabelProps, 'helpTopicId'> & Omit<TextFieldProps$1, 'fullWidth' | 'variant'>;
+} & Pick<FormLabelProps, 'helpTopicId'> & Omit<TextFieldProps$1, 'fullWidth' | 'variant' | 'slotProps'>;
 declare const TextField: react.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & react.RefAttributes<HTMLDivElement | HTMLInputElement>>;
 
 export { TextField, type TextFieldProps };

package/dist/index.d.ts

@@ -9,7 +9,7 @@ type TextFieldProps = {
     SelectProps?: SelectProps;
     /** If `true`, the input will take up the full width of its container. @default true */
     fullWidth?: boolean;
-} & Pick<FormLabelProps, 'helpTopicId'> & Omit<TextFieldProps$1, 'fullWidth' | 'variant'>;
+} & Pick<FormLabelProps, 'helpTopicId'> & Omit<TextFieldProps$1, 'fullWidth' | 'variant' | 'slotProps'>;
 declare const TextField: react.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & react.RefAttributes<HTMLDivElement | HTMLInputElement>>;
 
 export { TextField, type TextFieldProps };

package/dist/index.js

@@ -57,11 +57,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   TextField: () => TextField
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/lib/TextField.tsx
 var import_react = require("react");
@@ -74,11 +74,18 @@ var TextField = (0, import_react.forwardRef)((props, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_TextField.default,
     __spreadProps(__spreadValues({}, rest), {
-      inputProps: __spreadValues({ "aria-required": required }, inputProps),
-      InputProps: __spreadValues(__spreadValues({}, InputProps2), import_mui_form_utils.InputPropOverrides),
-      InputLabelProps: __spreadValues({ component: import_mui_form_utils.FormLabel, helpTopicId, required, shrink: true }, InputLabelProps),
-      FormHelperTextProps: __spreadValues({ component: import_mui_form_utils.FormHelperText }, FormHelperTextProps2),
-      SelectProps: __spreadValues(__spreadValues(__spreadValues({}, SelectProps2), import_mui_form_utils.SelectPropOverrides), (0, import_mui_form_utils.SelectAccessibilityOverrides)(openDetected, setOpenDetected, SelectProps2 == null ? void 0 : SelectProps2.open)),
+      slotProps: {
+        input: __spreadValues(__spreadValues({}, InputProps2), import_mui_form_utils.InputPropOverrides),
+        htmlInput: __spreadValues({ "aria-required": required }, inputProps),
+        select: __spreadValues(__spreadValues(__spreadValues({}, SelectProps2), import_mui_form_utils.SelectPropOverrides), (0, import_mui_form_utils.SelectAccessibilityOverrides)(openDetected, setOpenDetected, SelectProps2 == null ? void 0 : SelectProps2.open)),
+        inputLabel: __spreadValues({
+          component: import_mui_form_utils.FormLabel,
+          helpTopicId,
+          required,
+          shrink: true
+        }, InputLabelProps),
+        formHelperText: __spreadValues({ component: import_mui_form_utils.FormHelperText }, FormHelperTextProps2)
+      },
       ref
     })
   );

package/dist/index.mjs

@@ -47,11 +47,18 @@ var TextField = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     MuiTextField,
     __spreadProps(__spreadValues({}, rest), {
-      inputProps: __spreadValues({ "aria-required": required }, inputProps),
-      InputProps: __spreadValues(__spreadValues({}, InputProps2), InputPropOverrides),
-      InputLabelProps: __spreadValues({ component: FormLabel, helpTopicId, required, shrink: true }, InputLabelProps),
-      FormHelperTextProps: __spreadValues({ component: FormHelperText }, FormHelperTextProps2),
-      SelectProps: __spreadValues(__spreadValues(__spreadValues({}, SelectProps2), SelectPropOverrides), SelectAccessibilityOverrides(openDetected, setOpenDetected, SelectProps2 == null ? void 0 : SelectProps2.open)),
+      slotProps: {
+        input: __spreadValues(__spreadValues({}, InputProps2), InputPropOverrides),
+        htmlInput: __spreadValues({ "aria-required": required }, inputProps),
+        select: __spreadValues(__spreadValues(__spreadValues({}, SelectProps2), SelectPropOverrides), SelectAccessibilityOverrides(openDetected, setOpenDetected, SelectProps2 == null ? void 0 : SelectProps2.open)),
+        inputLabel: __spreadValues({
+          component: FormLabel,
+          helpTopicId,
+          required,
+          shrink: true
+        }, InputLabelProps),
+        formHelperText: __spreadValues({ component: FormHelperText }, FormHelperTextProps2)
+      },
       ref
     })
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-textfield",
-  "version": "0.7.1",
+  "version": "1.0.0-alpha.0",
   "description": "Availity MUI Textfield Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -40,18 +40,18 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-form-utils": "0.17.1",
-    "@availity/mui-icon": "0.14.0"
+    "@availity/mui-form-utils": "1.0.0-alpha.0",
+    "@availity/mui-icon": "1.0.0-alpha.0"
   },
   "devDependencies": {
-    "@mui/material": "^5.15.15",
+    "@mui/material": "^6.4.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tsup": "^8.0.2",
+    "tsup": "^8.3.6",
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
-    "@mui/material": "^5.11.9",
+    "@mui/material": "^6.4.5",
     "react": ">=16.3.0"
   },
   "publishConfig": {

package/src/lib/TextField.stories.tsx

@@ -41,7 +41,7 @@ export const _TextField: StoryObj<typeof TextField> = {
 
 export const _States: StoryObj<typeof TextField> = {
   render: (args: TextFieldProps) => (
-    <Stack direction="row" spacing={1} flexWrap="wrap">
+    <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap' }}>
       <TextField label="Default" id="default" {...args} />
       <TextField label="Focused" id="Focused" focused {...args} />
       <TextField label="Error" id="error" error {...args} />
@@ -109,7 +109,7 @@ export const _PasswordField: StoryObj<typeof TextField> = {
 /** Formatted value using `libphonenumber-js`. _Formatting occurs `onBlur` for accessibility._ */
 export const _PhoneWithExt: StoryObj<typeof TextField> = {
   render: () => {
-    const [phone, setPhone] = useState('')
+    const [phone, setPhone] = useState('');
 
     const asYouFormat = (phoneString: string) => {
       // partial parsePhoneNumber always return country code :(
@@ -127,10 +127,10 @@ export const _PhoneWithExt: StoryObj<typeof TextField> = {
     };
 
     return (
-      <Grid container rowSpacing={3} columnSpacing={2} maxWidth='360px'>
-        <Grid xs>
+      <Grid container rowSpacing={3} columnSpacing={2} sx={{ maxWidth: '360px' }}>
+        <Grid size="grow">
           <TextField
-            type='tel'
+            type="tel"
             label="Phone"
             id="phone"
             value={phone}
@@ -139,13 +139,8 @@ export const _PhoneWithExt: StoryObj<typeof TextField> = {
             fullWidth={true}
           />
         </Grid>
-        <Grid xs={2} minWidth='5rem'>
-          <TextField
-            type='tel'
-            label="Ext"
-            id="phoneextension"
-            fullWidth={true}
-          />
+        <Grid size={{ xs: 2 }} sx={{ minWidth: '5rem' }}>
+          <TextField type="tel" label="Ext" id="phoneextension" fullWidth={true} />
         </Grid>
       </Grid>
     );
@@ -157,47 +152,43 @@ interface CustomProps {
   name: string;
 }
 
-const TextMaskCustom = forwardRef<HTMLInputElement, CustomProps>(
-  function TextMaskCustom(props, ref) {
-    const { onChange, ...other } = props;
-    return (
-      <IMaskInput
-        {...other}
-        mask="(#00) 000-0000"
-        definitions={{
-          '#': /[1-9]/,
-        }}
-        inputRef={ref}
-        onAccept={(value: any) => onChange({ target: { name: props.name, value } })}
-        overwrite
-      />
-    );
-  },
-);
-
-const NumericFormatCustom = forwardRef<NumericFormatProps, CustomProps>(
-  function NumericFormatCustom(props, ref) {
-    const { onChange, ...other } = props;
-
-    return (
-      <NumericFormat
-        {...other}
-        getInputRef={ref}
-        onValueChange={(values) => {
-          onChange({
-            target: {
-              name: props.name,
-              value: values.value,
-            },
-          });
-        }}
-        thousandSeparator
-        valueIsNumericString
-        prefix="$"
-      />
-    );
-  },
-);
+const TextMaskCustom = forwardRef<HTMLInputElement, CustomProps>(function TextMaskCustom(props, ref) {
+  const { onChange, ...other } = props;
+  return (
+    <IMaskInput
+      {...other}
+      mask="(#00) 000-0000"
+      definitions={{
+        '#': /[1-9]/,
+      }}
+      inputRef={ref}
+      onAccept={(value: any) => onChange({ target: { name: props.name, value } })}
+      overwrite
+    />
+  );
+});
+
+const NumericFormatCustom = forwardRef<NumericFormatProps, CustomProps>(function NumericFormatCustom(props, ref) {
+  const { onChange, ...other } = props;
+
+  return (
+    <NumericFormat
+      {...other}
+      getInputRef={ref}
+      onValueChange={(values) => {
+        onChange({
+          target: {
+            name: props.name,
+            value: values.value,
+          },
+        });
+      }}
+      thousandSeparator
+      valueIsNumericString
+      prefix="$"
+    />
+  );
+});
 
 /** _There are accessibility concerns with masking to consider as it is making live changes to values that may not be communicated via assistive technologies._
  *
@@ -206,7 +197,7 @@ const NumericFormatCustom = forwardRef<NumericFormatProps, CustomProps>(
  * > The following demo uses the `react-imask` and `react-number-format` libraries. The same concept could be applied to, for example `react-stripe-element`.
  * >
  * > -- <cite>[Integration with 3rd party input libraries](https://mui.com/material-ui/react-text-field/#integration-with-3rd-party-input-libraries)</cite>
-*/
+ */
 export const _InputMasking: StoryObj<typeof TextField> = {
   render: () => {
     // COMMENTED CODE IS OUTSIDE OF FUNCTION
@@ -290,15 +281,13 @@ export const _InputMasking: StoryObj<typeof TextField> = {
           onChange={handleChange}
           name="numberformat"
           id="formatted-numberformat-input"
-          InputProps={{
-            inputComponent: NumericFormatCustom as any,
-          }}
+          InputProps={{ inputComponent: NumericFormatCustom as any }}
           fullWidth={false}
           margin="normal"
         />
       </>
     );
-  }
+  },
 };
 
 export const _Select: StoryObj<typeof TextField> = {

package/src/lib/TextField.tsx

@@ -20,21 +20,33 @@ export type TextFieldProps = {
   /** If `true`, the input will take up the full width of its container. @default true */
   fullWidth?: boolean;
 } & Pick<FormLabelProps, 'helpTopicId'> &
-  Omit<MuiTextFieldProps, 'fullWidth' | 'variant'>;
+  Omit<MuiTextFieldProps, 'fullWidth' | 'variant' | 'slotProps'>;
 
 export const TextField = forwardRef<HTMLDivElement | HTMLInputElement, TextFieldProps>((props, ref) => {
   const { InputProps, helpTopicId, InputLabelProps, FormHelperTextProps, required, SelectProps, inputProps, ...rest } =
     props;
-  const [ openDetected, setOpenDetected ] = useState(false);
+  const [openDetected, setOpenDetected] = useState(false);
 
   return (
     <MuiTextField
       {...rest}
-      inputProps={{ 'aria-required': required, ...inputProps }}
-      InputProps={{ ...InputProps, ...InputPropOverrides }}
-      InputLabelProps={{ component: FormLabel, helpTopicId: helpTopicId, required, shrink: true, ...InputLabelProps }}
-      FormHelperTextProps={{ component: FormHelperText, ...FormHelperTextProps }}
-      SelectProps={{ ...SelectProps, ...SelectPropOverrides, ...SelectAccessibilityOverrides(openDetected, setOpenDetected, SelectProps?.open) }}
+      slotProps={{
+        input: { ...InputProps, ...InputPropOverrides },
+        htmlInput: { 'aria-required': required, ...inputProps },
+        select: {
+          ...SelectProps,
+          ...SelectPropOverrides,
+          ...SelectAccessibilityOverrides(openDetected, setOpenDetected, SelectProps?.open),
+        },
+        inputLabel: {
+          component: FormLabel,
+          helpTopicId: helpTopicId,
+          required,
+          shrink: true,
+          ...InputLabelProps,
+        },
+        formHelperText: { component: FormHelperText, ...FormHelperTextProps },
+      }}
       ref={ref}
     />
   );