@availity/mui-datepicker 0.4.43 → 0.4.44

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.4.44](https://github.com/Availity/element/compare/@availity/mui-datepicker@0.4.43...@availity/mui-datepicker@0.4.44) (2024-10-18)
+
+### Dependency Updates
+
+* `theme-provider` updated to version `0.4.43`
+
+### Bug Fixes
+
+* **mui-datepicker:** accessible dialog name and other updates ([6c530fe](https://github.com/Availity/element/commit/6c530fecf1051f32d72d4c113f29c86619299119))
+
 ## [0.4.43](https://github.com/Availity/element/compare/@availity/mui-datepicker@0.4.42...@availity/mui-datepicker@0.4.43) (2024-10-18)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -10,7 +10,7 @@ type DatepickerProps = {
      * @default bottom-start
      */
     placement?: 'bottom-start' | 'bottom' | 'bottom-end';
-} & Omit<DatePickerProps<Dayjs, false>, 'components' | 'componentsProps' | 'desktopModeMediaQuery' | 'DialogProps' | 'OpenPickerButtonProps' | 'openTo' | 'orientation' | 'PaperProps' | 'PopperProps' | 'reduceAnimations' | 'renderInput' | 'rifmFormatter' | 'showToolbar' | 'ToolbarComponent' | 'toolbarFormat' | 'toolbarPlaceholder' | 'toolbarTitle' | 'TransitionComponent' | 'value'>;
+} & Omit<DatePickerProps<Dayjs, false>, 'components' | 'componentsProps' | 'desktopModeMediaQuery' | 'DialogProps' | 'OpenPickerButtonProps' | 'openTo' | 'orientation' | 'PaperProps' | 'PopperProps' | 'reduceAnimations' | 'renderInput' | 'rifmFormatter' | 'showToolbar' | 'slots' | 'slotProps' | 'ToolbarComponent' | 'toolbarFormat' | 'toolbarPlaceholder' | 'toolbarTitle' | 'TransitionComponent' | 'value'>;
 declare const Datepicker: ({ FieldProps, placement, ...props }: DatepickerProps) => JSX.Element;
 
 export { Datepicker, type DatepickerProps };

package/dist/index.d.ts

@@ -10,7 +10,7 @@ type DatepickerProps = {
      * @default bottom-start
      */
     placement?: 'bottom-start' | 'bottom' | 'bottom-end';
-} & Omit<DatePickerProps<Dayjs, false>, 'components' | 'componentsProps' | 'desktopModeMediaQuery' | 'DialogProps' | 'OpenPickerButtonProps' | 'openTo' | 'orientation' | 'PaperProps' | 'PopperProps' | 'reduceAnimations' | 'renderInput' | 'rifmFormatter' | 'showToolbar' | 'ToolbarComponent' | 'toolbarFormat' | 'toolbarPlaceholder' | 'toolbarTitle' | 'TransitionComponent' | 'value'>;
+} & Omit<DatePickerProps<Dayjs, false>, 'components' | 'componentsProps' | 'desktopModeMediaQuery' | 'DialogProps' | 'OpenPickerButtonProps' | 'openTo' | 'orientation' | 'PaperProps' | 'PopperProps' | 'reduceAnimations' | 'renderInput' | 'rifmFormatter' | 'showToolbar' | 'slots' | 'slotProps' | 'ToolbarComponent' | 'toolbarFormat' | 'toolbarPlaceholder' | 'toolbarTitle' | 'TransitionComponent' | 'value'>;
 declare const Datepicker: ({ FieldProps, placement, ...props }: DatepickerProps) => JSX.Element;
 
 export { Datepicker, type DatepickerProps };

package/dist/index.js

@@ -55,30 +55,36 @@ module.exports = __toCommonJS(src_exports);
 
 // src/lib/Datepicker.tsx
 var import_mui_textfield = require("@availity/mui-textfield");
+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) => {
-  if (params.inputProps) {
-    params.inputProps.placeholder = "MM/DD/YYYY";
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_textfield.TextField, __spreadValues({}, params));
-};
 var Datepicker = (_a) => {
   var _b = _a, { FieldProps, placement = "bottom-start" } = _b, props = __objRest(_b, ["FieldProps", "placement"]);
+  var _a2, _b2, _c, _d, _e, _f;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_DatePicker.DatePicker,
     __spreadProps(__spreadValues({}, props), {
+      dayOfWeekFormatter: (weekday) => weekday.format("dd"),
       slotProps: {
         desktopPaper: paperProps,
-        mobilePaper: paperProps,
-        textField: FieldProps,
+        mobilePaper: __spreadProps(__spreadValues({}, paperProps), {
+          "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
+        }),
         popper: {
-          placement
-        }
+          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",
+          "aria-labelledby": ((_f = FieldProps == null ? void 0 : FieldProps.inputProps) == null ? void 0 : _f["aria-labelledby"]) || void 0
+        },
+        openPickerIcon: {
+          fontSize: "xsmall"
+        },
+        textField: FieldProps
       },
       slots: {
-        textField: PickerTextField
+        openPickerIcon: import_mui_icon.CalendarDaysIcon,
+        textField: import_mui_textfield.TextField
       }
     })
   );

package/dist/index.mjs

@@ -32,30 +32,36 @@ var __objRest = (source, exclude) => {
 
 // src/lib/Datepicker.tsx
 import { TextField } from "@availity/mui-textfield";
+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) => {
-  if (params.inputProps) {
-    params.inputProps.placeholder = "MM/DD/YYYY";
-  }
-  return /* @__PURE__ */ jsx(TextField, __spreadValues({}, params));
-};
 var Datepicker = (_a) => {
   var _b = _a, { FieldProps, placement = "bottom-start" } = _b, props = __objRest(_b, ["FieldProps", "placement"]);
+  var _a2, _b2, _c, _d, _e, _f;
   return /* @__PURE__ */ jsx(
     MuiDatePicker,
     __spreadProps(__spreadValues({}, props), {
+      dayOfWeekFormatter: (weekday) => weekday.format("dd"),
       slotProps: {
         desktopPaper: paperProps,
-        mobilePaper: paperProps,
-        textField: FieldProps,
+        mobilePaper: __spreadProps(__spreadValues({}, paperProps), {
+          "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
+        }),
         popper: {
-          placement
-        }
+          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",
+          "aria-labelledby": ((_f = FieldProps == null ? void 0 : FieldProps.inputProps) == null ? void 0 : _f["aria-labelledby"]) || void 0
+        },
+        openPickerIcon: {
+          fontSize: "xsmall"
+        },
+        textField: FieldProps
       },
       slots: {
-        textField: PickerTextField
+        openPickerIcon: CalendarDaysIcon,
+        textField: TextField
       }
     })
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-datepicker",
-  "version": "0.4.43",
+  "version": "0.4.44",
   "description": "Availity MUI Datepicker Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -32,6 +32,7 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
+    "@availity/mui-icon": "0.10.1",
     "@availity/mui-textfield": "0.6.9",
     "@mui/x-date-pickers": "^7.2.0",
     "dayjs": "^1.11.10"

package/src/lib/DateCalendar.tsx

@@ -0,0 +1,25 @@
+import { DateCalendar as MuiDateCalendar, DateCalendarProps as MuiDateCalendarProps } from '@mui/x-date-pickers/DateCalendar';
+import type { Dayjs } from 'dayjs';
+import type {} from '@mui/x-date-pickers/AdapterDayjs';
+
+export type DateCalendarProps = Omit<MuiDateCalendarProps<Dayjs>,
+  | 'components'
+  | 'componentsProps'
+  | 'slots'
+  | 'slotProps'
+  | 'ToolbarComponent'
+  | 'toolbarFormat'
+  | 'toolbarPlaceholder'
+  | 'toolbarTitle'
+  | 'TransitionComponent'
+>;
+
+// just being used for stories atm, if ux finds a use for it we can add it to index.
+export const DateCalendar = (props: DateCalendarProps): JSX.Element => {
+  return (
+    <MuiDateCalendar
+      {...props}
+      dayOfWeekFormatter = {(weekday: Dayjs) => weekday.format('dd')}
+    />
+  );
+};

package/src/lib/Datepicker.stories.tsx

@@ -1,14 +1,14 @@
 // Each exported component in the package should have its own stories file
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
+import Grid from '@mui/material/Unstable_Grid2';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
 import { MonthCalendar } from '@mui/x-date-pickers/MonthCalendar';
 import { YearCalendar } from '@mui/x-date-pickers/YearCalendar';
-import { useState } from 'react';
 import dayjs, { Dayjs } from 'dayjs';
 import { Datepicker, DatepickerProps } from './Datepicker';
-import Grid from '@mui/material/Unstable_Grid2';
-import Paper from '@mui/material/Paper';
-import Typography from '@mui/material/Typography';
+import { DateCalendar } from './DateCalendar';
 
 const meta: Meta<typeof Datepicker> = {
   title: 'Form Components/Datepicker/Datepicker',
@@ -42,7 +42,7 @@ export const _Datepicker: StoryObj<typeof Datepicker> = {
   },
 };
 
-export const _PickerViews: StoryObj<typeof Datepicker> = {
+export const _PickerViews: StoryObj<typeof DateCalendar> = {
   render: () => {
     const minDate = dayjs('2020-01-01T00:00:00.000');
     const maxDate = dayjs('2034-01-01T00:00:00.000');
@@ -52,7 +52,7 @@ export const _PickerViews: StoryObj<typeof Datepicker> = {
       <Grid container spacing={3}>
         <Grid xs="auto">
           <Typography variant="h3" component="span">
-            Day View
+            Default View
           </Typography>
           <Paper sx={{ width: 'min-content' }}>
             <DateCalendar value={date} onChange={(newDate) => setDate(newDate)} />

package/src/lib/Datepicker.tsx

@@ -1,4 +1,5 @@
 import { TextField, TextFieldProps } from '@availity/mui-textfield';
+import { CalendarDaysIcon } from '@availity/mui-icon';
 import { DatePicker as MuiDatePicker, DatePickerProps as MuiDatePickerProps } from '@mui/x-date-pickers/DatePicker';
 import type { Dayjs } from 'dayjs';
 import type {} from '@mui/x-date-pickers/AdapterDayjs';
@@ -26,6 +27,8 @@ export type DatepickerProps = {
   | 'renderInput'
   | 'rifmFormatter'
   | 'showToolbar'
+  | 'slots'
+  | 'slotProps'
   | 'ToolbarComponent'
   | 'toolbarFormat'
   | 'toolbarPlaceholder'
@@ -36,29 +39,33 @@ export type DatepickerProps = {
 
 const paperProps = { elevation: 8, variant: 'elevation', sx: { marginTop: '4px' } } as const;
 
-const PickerTextField = (params: TextFieldProps) => {
-  if (params.inputProps) {
-    params.inputProps.placeholder = 'MM/DD/YYYY';
-  }
-
-  return <TextField {...params} />;
-};
-
 export const Datepicker = ({ FieldProps, placement = 'bottom-start', ...props }: DatepickerProps): JSX.Element => {
   return (
     <MuiDatePicker
       {...props}
+      dayOfWeekFormatter = {(weekday: Dayjs) => weekday.format('dd')}
       slotProps={{
         desktopPaper: paperProps,
-        mobilePaper: paperProps,
-        textField: FieldProps,
+        mobilePaper: {
+          ...paperProps,
+          'aria-label': FieldProps?.label?.toString() || FieldProps?.inputProps?.['aria-label'] || "Date picker",
+          'aria-labelledby': FieldProps?.inputProps?.['aria-labelledby'] || undefined
+        },
         popper: {
           placement,
+          'aria-label': FieldProps?.label?.toString() || FieldProps?.inputProps?.['aria-label'] || "Date picker",
+          'aria-labelledby': FieldProps?.inputProps?.['aria-labelledby'] || undefined
+        },
+        openPickerIcon: {
+          fontSize: 'xsmall'
         },
+        textField: FieldProps,
       }}
       slots={{
-        textField: PickerTextField,
+        openPickerIcon: CalendarDaysIcon,
+        textField: TextField,
       }}
+
     />
   );
 };