@availity/mui-datepicker 0.6.2 → 1.0.0-alpha.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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-datepicker@0.6.2...@availity/mui-datepicker@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))
+
 ## [0.6.2](https://github.com/Availity/element/compare/@availity/mui-datepicker@0.6.1...@availity/mui-datepicker@0.6.2) (2025-02-18)
 
 ### Dependency Updates

package/DateRangePickerDocs.md

@@ -46,7 +46,7 @@ const DateRangePicker = ({
   return (
     <>
       <Grid container spacing={2}>
-        <Grid xs={12} sm={6}>
+        <Grid size={{xs: 12, sm: 6}}>
           <Datepicker
             value={startDate}
             onChange={onStartDateChange}
@@ -55,7 +55,7 @@ const DateRangePicker = ({
             views={['day', 'month', 'year']}
           />
         </Grid>
-        <Grid xs={12} sm={6}>
+        <Grid size={{xs: 12, sm: 6}}>
           <Datepicker
             value={endDate}
             onChange={onEndDateChange}

package/dist/index.js

@@ -47,11 +47,11 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Datepicker: () => Datepicker
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/lib/Datepicker.tsx
 var import_mui_textfield = require("@availity/mui-textfield");
@@ -59,6 +59,7 @@ var import_mui_icon = require("@availity/mui-icon");
 var import_DatePicker = require("@mui/x-date-pickers/DatePicker");
 var import_jsx_runtime = require("react/jsx-runtime");
 var paperProps = { elevation: 8, variant: "elevation", sx: { marginTop: "4px" } };
+var PickerTextField = (params) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_textfield.TextField, __spreadProps(__spreadValues({}, params), { placeholder: "MM/DD/YYYY" }));
 var Datepicker = (_a) => {
   var _b = _a, { FieldProps, placement = "bottom-start" } = _b, props = __objRest(_b, ["FieldProps", "placement"]);
   var _a2, _b2, _c, _d, _e, _f;
@@ -72,6 +73,7 @@ var Datepicker = (_a) => {
           "aria-label": ((_a2 = FieldProps == null ? void 0 : FieldProps.label) == null ? void 0 : _a2.toString()) || ((_b2 = FieldProps == null ? void 0 : FieldProps.inputProps) == null ? void 0 : _b2["aria-label"]) || "Date picker",
           "aria-labelledby": ((_c = FieldProps == null ? void 0 : FieldProps.inputProps) == null ? void 0 : _c["aria-labelledby"]) || void 0
         }),
+        textField: FieldProps,
         popper: {
           placement,
           "aria-label": ((_d = FieldProps == null ? void 0 : FieldProps.label) == null ? void 0 : _d.toString()) || ((_e = FieldProps == null ? void 0 : FieldProps.inputProps) == null ? void 0 : _e["aria-label"]) || "Date picker",
@@ -79,12 +81,11 @@ var Datepicker = (_a) => {
         },
         openPickerIcon: {
           fontSize: "xsmall"
-        },
-        textField: FieldProps
+        }
       },
       slots: {
         openPickerIcon: import_mui_icon.CalendarDaysIcon,
-        textField: import_mui_textfield.TextField
+        textField: PickerTextField
       }
     })
   );

package/dist/index.mjs

@@ -36,6 +36,7 @@ import { CalendarDaysIcon } from "@availity/mui-icon";
 import { DatePicker as MuiDatePicker } from "@mui/x-date-pickers/DatePicker";
 import { jsx } from "react/jsx-runtime";
 var paperProps = { elevation: 8, variant: "elevation", sx: { marginTop: "4px" } };
+var PickerTextField = (params) => /* @__PURE__ */ jsx(TextField, __spreadProps(__spreadValues({}, params), { placeholder: "MM/DD/YYYY" }));
 var Datepicker = (_a) => {
   var _b = _a, { FieldProps, placement = "bottom-start" } = _b, props = __objRest(_b, ["FieldProps", "placement"]);
   var _a2, _b2, _c, _d, _e, _f;
@@ -49,6 +50,7 @@ var Datepicker = (_a) => {
           "aria-label": ((_a2 = FieldProps == null ? void 0 : FieldProps.label) == null ? void 0 : _a2.toString()) || ((_b2 = FieldProps == null ? void 0 : FieldProps.inputProps) == null ? void 0 : _b2["aria-label"]) || "Date picker",
           "aria-labelledby": ((_c = FieldProps == null ? void 0 : FieldProps.inputProps) == null ? void 0 : _c["aria-labelledby"]) || void 0
         }),
+        textField: FieldProps,
         popper: {
           placement,
           "aria-label": ((_d = FieldProps == null ? void 0 : FieldProps.label) == null ? void 0 : _d.toString()) || ((_e = FieldProps == null ? void 0 : FieldProps.inputProps) == null ? void 0 : _e["aria-label"]) || "Date picker",
@@ -56,12 +58,11 @@ var Datepicker = (_a) => {
         },
         openPickerIcon: {
           fontSize: "xsmall"
-        },
-        textField: FieldProps
+        }
       },
       slots: {
         openPickerIcon: CalendarDaysIcon,
-        textField: TextField
+        textField: PickerTextField
       }
     })
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-datepicker",
-  "version": "0.6.2",
+  "version": "1.0.0-alpha.0",
   "description": "Availity MUI Datepicker Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -40,20 +40,20 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-icon": "0.14.0",
-    "@availity/mui-textfield": "0.7.1",
-    "@mui/x-date-pickers": "^7.2.0",
+    "@availity/mui-icon": "1.0.0-alpha.0",
+    "@availity/mui-textfield": "1.0.0-alpha.0",
+    "@mui/x-date-pickers": "^7.26.0",
     "dayjs": "^1.11.13"
   },
   "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/Datepicker.stories.tsx

@@ -109,7 +109,7 @@ export const _PickerViews: StoryObj<typeof DateCalendar> = {
 
     return (
       <Grid container spacing={3}>
-        <Grid xs="auto">
+        <Grid size={{ xs: 'auto' }}>
           <Typography variant="h3" component="span">
             Default View
           </Typography>
@@ -117,7 +117,7 @@ export const _PickerViews: StoryObj<typeof DateCalendar> = {
             <DateCalendar value={date} onChange={(newDate) => setDate(newDate)} />
           </Paper>
         </Grid>
-        <Grid xs="auto">
+        <Grid size={{ xs: 'auto' }}>
           <Typography variant="h3" component="span">
             Month View
           </Typography>
@@ -125,7 +125,7 @@ export const _PickerViews: StoryObj<typeof DateCalendar> = {
             <MonthCalendar value={date} minDate={minDate} maxDate={maxDate} onChange={(newDate) => setDate(newDate)} />
           </Paper>
         </Grid>
-        <Grid xs="auto">
+        <Grid size={{ xs: 'auto' }}>
           <Typography variant="h3" component="span">
             Year View
           </Typography>

package/src/lib/Datepicker.test.tsx

@@ -11,4 +11,13 @@ describe('Datepicker', () => {
     );
     expect(getAllByText('Test')).toBeTruthy();
   });
+
+  test('should render placeholder successfully', () => {
+    const { container } = render(
+      <ThemeProvider>
+        <Datepicker FieldProps={{ InputProps: { placeholder: 'InputProps' } }} onChange={jest.fn()} value={null} />
+      </ThemeProvider>
+    );
+    expect(container.getElementsByClassName('MuiInputBase-input')[0].getAttribute('placeholder')).toBe('InputProps');
+  });
 });

package/src/lib/Datepicker.tsx

@@ -39,6 +39,8 @@ export type DatepickerProps = {
 
 const paperProps = { elevation: 8, variant: 'elevation', sx: { marginTop: '4px' } } as const;
 
+const PickerTextField = (params: TextFieldProps) => <TextField {...params} placeholder="MM/DD/YYYY" />;
+
 export const Datepicker = ({ FieldProps, placement = 'bottom-start', ...props }: DatepickerProps): JSX.Element => {
   return (
     <MuiDatePicker
@@ -51,6 +53,7 @@ export const Datepicker = ({ FieldProps, placement = 'bottom-start', ...props }:
           'aria-label': FieldProps?.label?.toString() || FieldProps?.inputProps?.['aria-label'] || 'Date picker',
           'aria-labelledby': FieldProps?.inputProps?.['aria-labelledby'] || undefined,
         },
+        textField: FieldProps,
         popper: {
           placement,
           'aria-label': FieldProps?.label?.toString() || FieldProps?.inputProps?.['aria-label'] || 'Date picker',
@@ -59,11 +62,10 @@ export const Datepicker = ({ FieldProps, placement = 'bottom-start', ...props }:
         openPickerIcon: {
           fontSize: 'xsmall',
         },
-        textField: FieldProps,
       }}
       slots={{
         openPickerIcon: CalendarDaysIcon,
-        textField: TextField,
+        textField: PickerTextField,
       }}
     />
   );