@availity/mui-datepicker 0.2.0 → 0.3.1

package/CHANGELOG.md

@@ -2,12 +2,25 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
-## [0.2.0](https://github.com/Availity/element/compare/@availity/mui-datepicker@0.1.0...@availity/mui-datepicker@0.2.0) (2023-11-28)
+## [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)
 
 
 ### Features
 
-* **mui-datepicker:** make props match autocomplete pattern ([93696f3](https://github.com/Availity/element/commit/93696f3a24828ed2ea3a313a3531b8c7bf195599))
+* add form story ([11d1f6c](https://github.com/Availity/element/commit/11d1f6c6191540bf02ff42d4056ac553eecc8c73))
+
+## [0.2.0](https://github.com/Availity/element/compare/@availity/mui-datepicker@0.1.0...@availity/mui-datepicker@0.2.0) (2023-11-28)
+
+### Features
+
+- **mui-datepicker:** make props match autocomplete pattern ([93696f3](https://github.com/Availity/element/commit/93696f3a24828ed2ea3a313a3531b8c7bf195599))
 
 ## 0.1.0 (2023-11-08)
 

package/dist/index.d.ts

@@ -3,9 +3,14 @@ import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
 import { Dayjs } from 'dayjs';
 
 type DatepickerProps = {
+    value: Dayjs | string | null;
     /** Props applied to the `TextField` component */
     FieldProps?: TextFieldProps;
-} & Omit<DatePickerProps<Dayjs, Dayjs>, 'components' | 'componentsProps' | 'desktopModeMediaQuery' | 'DialogProps' | 'OpenPickerButtonProps' | 'openTo' | 'orientation' | 'PaperProps' | 'PopperProps' | 'reduceAnimations' | 'renderInput' | 'rifmFormatter' | 'showToolbar' | 'ToolbarComponent' | 'toolbarFormat' | 'toolbarPlaceholder' | 'toolbarTitle' | 'TransitionComponent'>;
-declare const Datepicker: ({ FieldProps, ...props }: DatepickerProps) => JSX.Element;
+    /** 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, 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.2.0",
+  "version": "0.3.1",
   "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.4.2",
+    "@availity/mui-textfield": "0.5.7",
     "@mui/x-date-pickers": "^5.0.15",
     "dayjs": "^1.11.9"
   },

package/src/lib/Datepicker.tsx

@@ -3,8 +3,13 @@ import { DatePicker as MuiDatePicker, DatePickerProps as MuiDatePickerProps } fr
 import type { Dayjs } from 'dayjs';
 
 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'
@@ -25,12 +30,17 @@ export type DatepickerProps = {
   | 'toolbarPlaceholder'
   | 'toolbarTitle'
   | 'TransitionComponent'
+  | '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';