@availity/mui-datepicker 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.4.0](https://github.com/Availity/element/compare/@availity/mui-datepicker@0.3.1...@availity/mui-datepicker@0.4.0) (2024-02-08)
+
+
+### Features
+
+* **theme:** legacy datepicker ([44c334d](https://github.com/Availity/element/commit/44c334db86701314dbbcc34adb5ed8b863056a01))
+
+## [0.3.1](https://github.com/Availity/element/compare/@availity/mui-datepicker@0.3.0...@availity/mui-datepicker@0.3.1) (2024-01-12)
+
+
+### Bug Fixes
+
+* update datepicker styles ([43eae9a](https://github.com/Availity/element/commit/43eae9a4ab1b70d6a3a295bf8e54a3423ef6638a))
+
 ## [0.3.0](https://github.com/Availity/element/compare/@availity/mui-datepicker@0.2.0...@availity/mui-datepicker@0.3.0) (2023-12-14)
 
 

package/dist/index.d.ts

@@ -6,7 +6,11 @@ type DatepickerProps = {
     value: Dayjs | string | null;
     /** Props applied to the `TextField` component */
     FieldProps?: TextFieldProps;
+    /** Determines where the Calendar will be placed when opened.
+     * @default bottom-start
+     */
+    placement?: 'bottom-start' | 'bottom' | 'bottom-end';
 } & Omit<DatePickerProps<Dayjs, Dayjs>, 'components' | 'componentsProps' | 'desktopModeMediaQuery' | 'DialogProps' | 'OpenPickerButtonProps' | 'openTo' | 'orientation' | 'PaperProps' | 'PopperProps' | 'reduceAnimations' | 'renderInput' | 'rifmFormatter' | 'showToolbar' | 'ToolbarComponent' | 'toolbarFormat' | 'toolbarPlaceholder' | 'toolbarTitle' | 'TransitionComponent' | 'value'>;
-declare const Datepicker: ({ FieldProps, ...props }: DatepickerProps) => JSX.Element;
+declare const Datepicker: ({ FieldProps, placement, ...props }: DatepickerProps) => JSX.Element;
 
 export { Datepicker, DatepickerProps };

package/dist/index.js

@@ -28,9 +28,12 @@ module.exports = __toCommonJS(src_exports);
 var import_mui_textfield = require("@availity/mui-textfield");
 var import_DatePicker = require("@mui/x-date-pickers/DatePicker");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Datepicker = ({ FieldProps, ...props }) => {
+var paperProps = { elevation: 8, variant: "elevation", sx: { marginTop: "4px" } };
+var Datepicker = ({ FieldProps, placement = "bottom-start", ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DatePicker.DatePicker, {
     ...props,
+    PaperProps: paperProps,
+    PopperProps: { placement },
     renderInput: (params) => {
       if (params.inputProps) {
         params.inputProps.placeholder = "MM/DD/YYYY";

package/dist/index.mjs

@@ -2,9 +2,12 @@
 import { TextField } from "@availity/mui-textfield";
 import { DatePicker as MuiDatePicker } from "@mui/x-date-pickers/DatePicker";
 import { jsx } from "react/jsx-runtime";
-var Datepicker = ({ FieldProps, ...props }) => {
+var paperProps = { elevation: 8, variant: "elevation", sx: { marginTop: "4px" } };
+var Datepicker = ({ FieldProps, placement = "bottom-start", ...props }) => {
   return /* @__PURE__ */ jsx(MuiDatePicker, {
     ...props,
+    PaperProps: paperProps,
+    PopperProps: { placement },
     renderInput: (params) => {
       if (params.inputProps) {
         params.inputProps.placeholder = "MM/DD/YYYY";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-datepicker",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Availity MUI Datepicker Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -32,7 +32,7 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-textfield": "0.5.0",
+    "@availity/mui-textfield": "0.5.10",
     "@mui/x-date-pickers": "^5.0.15",
     "dayjs": "^1.11.9"
   },

package/src/lib/Datepicker.stories.tsx

@@ -1,8 +1,12 @@
 // Each exported component in the package should have its own stories file
 import type { Meta, StoryObj } from '@storybook/react';
+import { CalendarPicker } from '@mui/x-date-pickers/CalendarPicker';
+import { MonthPicker } from '@mui/x-date-pickers/MonthPicker';
+import { YearPicker } from '@mui/x-date-pickers/YearPicker';
 import { useState } from 'react';
-import { Dayjs } from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 import { Datepicker, DatepickerProps } from './Datepicker';
+import { Unstable_Grid2 as Grid, Paper, Typography } from '@mui/material';
 
 const meta: Meta<typeof Datepicker> = {
   title: 'Components/Datepicker/Datepicker',
@@ -35,3 +39,40 @@ export const _Datepicker: StoryObj<typeof Datepicker> = {
     },
   },
 };
+
+export const _PickerViews: StoryObj<typeof Datepicker> = {
+  render: () => {
+    const minDate = dayjs('2020-01-01T00:00:00.000');
+    const maxDate = dayjs('2034-01-01T00:00:00.000');
+    const [date, setDate] = useState<Dayjs | null>(null);
+
+    return (
+      <Grid container spacing={3}>
+        <Grid xs="auto">
+          <Typography variant="h3" component="span">
+            Day View
+          </Typography>
+          <Paper sx={{ width: 'min-content' }}>
+            <CalendarPicker date={date} onChange={(newDate) => setDate(newDate)} />
+          </Paper>
+        </Grid>
+        <Grid xs="auto">
+          <Typography variant="h3" component="span">
+            Month View
+          </Typography>
+          <Paper sx={{ width: 'min-content' }}>
+            <MonthPicker date={date} minDate={minDate} maxDate={maxDate} onChange={(newDate) => setDate(newDate)} />
+          </Paper>
+        </Grid>
+        <Grid xs="auto">
+          <Typography variant="h3" component="span">
+            Year View
+          </Typography>
+          <Paper sx={{ width: '320px' }}>
+            <YearPicker date={date} minDate={minDate} maxDate={maxDate} onChange={(newDate) => setDate(newDate)} />
+          </Paper>
+        </Grid>
+      </Grid>
+    );
+  },
+};

package/src/lib/Datepicker.tsx

@@ -6,6 +6,10 @@ export type DatepickerProps = {
   value: Dayjs | string | null;
   /** Props applied to the `TextField` component */
   FieldProps?: TextFieldProps;
+  /** Determines where the Calendar will be placed when opened.
+   * @default bottom-start
+   */
+  placement?: 'bottom-start' | 'bottom' | 'bottom-end';
 } & Omit<
   MuiDatePickerProps<Dayjs, Dayjs>,
   | 'components'
@@ -29,10 +33,14 @@ export type DatepickerProps = {
   | 'value'
 >;
 
-export const Datepicker = ({ FieldProps, ...props }: DatepickerProps): JSX.Element => {
+const paperProps = { elevation: 8, variant: 'elevation', sx: { marginTop: '4px' } } as const;
+
+export const Datepicker = ({ FieldProps, placement = 'bottom-start', ...props }: DatepickerProps): JSX.Element => {
   return (
     <MuiDatePicker
       {...props}
+      PaperProps={paperProps}
+      PopperProps={{ placement }}
       renderInput={(params) => {
         if (params.inputProps) {
           params.inputProps.placeholder = 'MM/DD/YYYY';