@availity/mui-textfield 1.1.2 → 1.1.4

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.1.4](https://github.com/Availity/element/compare/@availity/mui-textfield@1.1.3...@availity/mui-textfield@1.1.4) (2025-04-09)
+
+### Dependency Updates
+
+* `mui-form-utils` updated to version `1.1.3`
+## [1.1.3](https://github.com/Availity/element/compare/@availity/mui-textfield@1.1.2...@availity/mui-textfield@1.1.3) (2025-04-08)
+
+### Dependency Updates
+
+* `mui-form-utils` updated to version `1.1.2`
+* `mui-button` updated to version `1.1.2`
+* `mui-menu` updated to version `1.1.2`
 ## [1.1.2](https://github.com/Availity/element/compare/@availity/mui-textfield@1.1.1...@availity/mui-textfield@1.1.2) (2025-04-04)
 
 

package/dist/index.js

@@ -103,13 +103,7 @@ var Typography = (0, import_react2.forwardRef)(
 );
 
 // src/lib/TextField.tsx
-var import_styles = require("@mui/material/styles");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var SelectPlaceholder = (0, import_styles.styled)("span", {
-  name: "MuiTextField",
-  slot: "SelectPlaceholder",
-  overridesResolver: (props, styles) => styles.avFilled
-})(({ theme }) => ({ opacity: 1, color: theme.palette.grey[400] }));
 var TextFieldFormHelperText = (_a) => {
   var _b = _a, {
     charCount,
@@ -179,10 +173,7 @@ var TextField = (0, import_react3.forwardRef)((props, ref) => {
         }, inputProps), (_e = rest.slotProps) == null ? void 0 : _e.htmlInput), {
           maxLength: !displayOverflowMaxLength ? maxLength : void 0
         })),
-        select: resolvedProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
-          displayEmpty: !!rest.placeholder,
-          renderValue: (value) => rest.placeholder && (!value || Array.isArray(value) && value.length === 0) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectPlaceholder, { className: "MuiSelect-placeholder", children: rest.placeholder }) : value
-        }, 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)), (_f = rest.slotProps) == null ? void 0 : _f.select)),
         inputLabel: resolvedProps(__spreadValues(__spreadValues({
           component: import_mui_form_utils.FormLabel,
           helpTopicId,

package/dist/index.mjs

@@ -76,13 +76,7 @@ var Typography = forwardRef2(
 );
 
 // src/lib/TextField.tsx
-import { styled } from "@mui/material/styles";
 import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
-var SelectPlaceholder = styled("span", {
-  name: "MuiTextField",
-  slot: "SelectPlaceholder",
-  overridesResolver: (props, styles) => styles.avFilled
-})(({ theme }) => ({ opacity: 1, color: theme.palette.grey[400] }));
 var TextFieldFormHelperText = (_a) => {
   var _b = _a, {
     charCount,
@@ -152,10 +146,7 @@ var TextField = forwardRef3((props, ref) => {
         }, inputProps), (_e = rest.slotProps) == null ? void 0 : _e.htmlInput), {
           maxLength: !displayOverflowMaxLength ? maxLength : void 0
         })),
-        select: resolvedProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
-          displayEmpty: !!rest.placeholder,
-          renderValue: (value) => rest.placeholder && (!value || Array.isArray(value) && value.length === 0) ? /* @__PURE__ */ jsx6(SelectPlaceholder, { className: "MuiSelect-placeholder", children: rest.placeholder }) : value
-        }, 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)), (_f = rest.slotProps) == null ? void 0 : _f.select)),
         inputLabel: resolvedProps(__spreadValues(__spreadValues({
           component: FormLabel,
           helpTopicId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-textfield",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Availity MUI Textfield Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -40,10 +40,11 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-form-utils": "1.1.0",
+    "@availity/mui-form-utils": "1.1.2",
     "@availity/mui-icon": "1.0.1"
   },
   "devDependencies": {
+    "@availity/mui-typography": "1.0.1",
     "@mui/material": "^6.4.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",

package/src/lib/TextField.stories.tsx

@@ -10,6 +10,7 @@ import { FormControl, FormLabel, Input, InputAdornment, SelectChangeEvent } from
 import { EyeIcon, EyeSlashIcon, SearchIcon } from '@availity/mui-icon';
 import { Box, Grid, Stack } from '@availity/mui-layout';
 import { MenuItem } from '@availity/mui-menu';
+import { Typography } from '@availity/mui-typography';
 
 import { TextField, TextFieldProps } from './TextField';
 
@@ -320,7 +321,21 @@ export const _SelectPlaceholder: StoryObj<typeof TextField> = {
       </TextField>
     );
   },
-  args: { label: 'Select', placeholder: 'Select...' },
+  args: {
+    label: 'Select',
+    slotProps: {
+      select: {
+        displayEmpty: true,
+        renderValue: (selected: string) => {
+          if (!selected) {
+            return <Typography color="text.placeholder">Placeholder</Typography>;
+          }
+
+          return selected;
+        },
+      },
+    },
+  },
 };
 
 export const _MultiSelect: StoryObj<typeof TextField> = {

package/src/lib/TextField.test.tsx

@@ -1,5 +1,4 @@
 import { render, fireEvent } from '@testing-library/react';
-import { MenuItem } from '@availity/mui-menu';
 import { TextField } from './TextField';
 
 describe('TextField', () => {
@@ -50,16 +49,4 @@ describe('TextField', () => {
       expect(getByTitle('Error')).toBeTruthy();
     });
   });
-  describe('TextField select placeholder', () => {
-    test('should render select placeholder successfully', () => {
-      const { getByText } = render(
-        <TextField label="Test" select placeholder="Select...">
-          <MenuItem value={10}>10</MenuItem>
-          <MenuItem value={20}>20</MenuItem>
-          <MenuItem value={30}>30</MenuItem>
-        </TextField>
-      );
-      expect(getByText('Select...')).toBeTruthy();
-    });
-  });
 });

package/src/lib/TextField.tsx

@@ -13,7 +13,6 @@ import {
 } from '@availity/mui-form-utils';
 import { Grid } from '@availity/mui-layout';
 import { Typography } from '@availity/mui-typography';
-import { styled } from '@mui/material/styles';
 
 export type TextFieldProps = {
   FormHelperTextProps?: FormHelperTextProps;
@@ -29,12 +28,6 @@ export type TextFieldProps = {
 } & Pick<FormLabelProps, 'helpTopicId'> &
   Omit<MuiTextFieldProps, 'fullWidth' | 'variant'>;
 
-const SelectPlaceholder = styled('span', {
-  name: 'MuiTextField',
-  slot: 'SelectPlaceholder',
-  overridesResolver: (props, styles) => styles.avFilled,
-})(({ theme }) => ({ opacity: 1, color: theme.palette.grey[400] }));
-
 export type TextFieldFormHelperTextProps = {
   charCount: string;
   helperText: string;
@@ -109,13 +102,6 @@ export const TextField = forwardRef<HTMLDivElement | HTMLInputElement, TextField
           maxLength: !displayOverflowMaxLength ? maxLength : undefined,
         }),
         select: resolvedProps({
-          displayEmpty: !!rest.placeholder,
-          renderValue: (value: unknown) =>
-            rest.placeholder && (!value || (Array.isArray(value) && value.length === 0)) ? (
-              <SelectPlaceholder className="MuiSelect-placeholder">{rest.placeholder}</SelectPlaceholder>
-            ) : (
-              value
-            ),
           ...SelectProps,
           ...SelectPropOverrides,
           ...SelectAccessibilityOverrides(openDetected, setOpenDetected, SelectProps?.open),