@availity/mui-datepicker 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -2,19 +2,24 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
-## 0.1.0 (2023-11-08)
+## [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:** add datepicker component ([2efdbf5](https://github.com/Availity/element/commit/2efdbf5112583c4322d588823f0ce0b7227fde6f))
-* **mui-datepicker:** update styles for datepicker ([b250d38](https://github.com/Availity/element/commit/b250d382691a83bfc12c066a2d4eeb9af147689f))
+* **mui-datepicker:** make props match autocomplete pattern ([93696f3](https://github.com/Availity/element/commit/93696f3a24828ed2ea3a313a3531b8c7bf195599))
+
+## 0.1.0 (2023-11-08)
+
+### Features
 
+- **mui-datepicker:** add datepicker component ([2efdbf5](https://github.com/Availity/element/commit/2efdbf5112583c4322d588823f0ce0b7227fde6f))
+- **mui-datepicker:** update styles for datepicker ([b250d38](https://github.com/Availity/element/commit/b250d382691a83bfc12c066a2d4eeb9af147689f))
 
 ### Bug Fixes
 
-* **mui-datepicker:** add label to story ([c2b8fd2](https://github.com/Availity/element/commit/c2b8fd27904c0713e98d1af51354e7059065ddae))
-* **mui-datepicker:** remove bundlesize ([1e02c57](https://github.com/Availity/element/commit/1e02c5714dea965c54b783a38d195f17b9be43c7))
-* **mui-datepicker:** update padding and add help topic ([efd3487](https://github.com/Availity/element/commit/efd3487fbc6c01b9fe48187da238b8137fde1c2e))
-* **mui-datepicker:** update styles ([1c0aa8a](https://github.com/Availity/element/commit/1c0aa8a3a2ce13df6655561236ebfaacdaceb28e))
-* **mui-datepicker:** use updated TextField ([23caa3a](https://github.com/Availity/element/commit/23caa3a0852f0249afb9ca0ef411db106c7049df))
+- **mui-datepicker:** add label to story ([c2b8fd2](https://github.com/Availity/element/commit/c2b8fd27904c0713e98d1af51354e7059065ddae))
+- **mui-datepicker:** remove bundlesize ([1e02c57](https://github.com/Availity/element/commit/1e02c5714dea965c54b783a38d195f17b9be43c7))
+- **mui-datepicker:** update padding and add help topic ([efd3487](https://github.com/Availity/element/commit/efd3487fbc6c01b9fe48187da238b8137fde1c2e))
+- **mui-datepicker:** update styles ([1c0aa8a](https://github.com/Availity/element/commit/1c0aa8a3a2ce13df6655561236ebfaacdaceb28e))
+- **mui-datepicker:** use updated TextField ([23caa3a](https://github.com/Availity/element/commit/23caa3a0852f0249afb9ca0ef411db106c7049df))

package/dist/index.d.ts

@@ -3,12 +3,9 @@ import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
 import { Dayjs } from 'dayjs';
 
 type DatepickerProps = {
-    label?: React.ReactNode;
-    size?: 'small' | 'medium';
-    helperText?: string;
-    helpTopicId?: string;
-    InputProps?: TextFieldProps;
+    /** 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: ({ size, helperText, helpTopicId, ...props }: DatepickerProps) => JSX.Element;
+declare const Datepicker: ({ FieldProps, ...props }: DatepickerProps) => JSX.Element;
 
 export { Datepicker, DatepickerProps };

package/dist/index.js

@@ -28,7 +28,7 @@ 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 = ({ size, helperText, helpTopicId, ...props }) => {
+var Datepicker = ({ FieldProps, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DatePicker.DatePicker, {
     ...props,
     renderInput: (params) => {
@@ -36,10 +36,8 @@ var Datepicker = ({ size, helperText, helpTopicId, ...props }) => {
         params.inputProps.placeholder = "MM/DD/YYYY";
       }
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_textfield.TextField, {
-        helperText,
-        helpTopicId,
         ...params,
-        size
+        ...FieldProps
       });
     }
   });

package/dist/index.mjs

@@ -2,7 +2,7 @@
 import { TextField } from "@availity/mui-textfield";
 import { DatePicker as MuiDatePicker } from "@mui/x-date-pickers/DatePicker";
 import { jsx } from "react/jsx-runtime";
-var Datepicker = ({ size, helperText, helpTopicId, ...props }) => {
+var Datepicker = ({ FieldProps, ...props }) => {
   return /* @__PURE__ */ jsx(MuiDatePicker, {
     ...props,
     renderInput: (params) => {
@@ -10,10 +10,8 @@ var Datepicker = ({ size, helperText, helpTopicId, ...props }) => {
         params.inputProps.placeholder = "MM/DD/YYYY";
       }
       return /* @__PURE__ */ jsx(TextField, {
-        helperText,
-        helpTopicId,
         ...params,
-        size
+        ...FieldProps
       });
     }
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-datepicker",
-  "version": "0.1.0",
+  "version": "0.2.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.3.0",
+    "@availity/mui-textfield": "0.4.2",
     "@mui/x-date-pickers": "^5.0.15",
     "dayjs": "^1.11.9"
   },

package/src/lib/Datepicker.stories.tsx

@@ -19,7 +19,6 @@ export const _Datepicker: StoryObj<typeof Datepicker> = {
     return (
       <Datepicker
         {...args}
-        label="Date"
         value={value}
         onChange={(value) => {
           setValue(value);
@@ -28,7 +27,11 @@ export const _Datepicker: StoryObj<typeof Datepicker> = {
     );
   },
   args: {
-    helperText: 'Help text for the field',
-    helpTopicId: '1234',
+    FieldProps: {
+      fullWidth: false,
+      helperText: 'Help text for the field',
+      helpTopicId: '1234',
+      label: 'Date',
+    },
   },
 };

package/src/lib/Datepicker.test.tsx

@@ -6,7 +6,7 @@ describe('Datepicker', () => {
   test('should render successfully', () => {
     const { getAllByText } = render(
       <ThemeProvider>
-        <Datepicker label="Test" onChange={jest.fn()} value={null} />
+        <Datepicker FieldProps={{ label: 'Test' }} onChange={jest.fn()} value={null} />
       </ThemeProvider>
     );
     expect(getAllByText('Test')).toBeTruthy();

package/src/lib/Datepicker.tsx

@@ -3,11 +3,8 @@ import { DatePicker as MuiDatePicker, DatePickerProps as MuiDatePickerProps } fr
 import type { Dayjs } from 'dayjs';
 
 export type DatepickerProps = {
-  label?: React.ReactNode;
-  size?: 'small' | 'medium';
-  helperText?: string;
-  helpTopicId?: string;
-  InputProps?: TextFieldProps;
+  /** Props applied to the `TextField` component */
+  FieldProps?: TextFieldProps;
 } & Omit<
   MuiDatePickerProps<Dayjs, Dayjs>,
   | 'components'
@@ -30,7 +27,7 @@ export type DatepickerProps = {
   | 'TransitionComponent'
 >;
 
-export const Datepicker = ({ size, helperText, helpTopicId, ...props }: DatepickerProps): JSX.Element => {
+export const Datepicker = ({ FieldProps, ...props }: DatepickerProps): JSX.Element => {
   return (
     <MuiDatePicker
       {...props}
@@ -39,7 +36,7 @@ export const Datepicker = ({ size, helperText, helpTopicId, ...props }: Datepick
           params.inputProps.placeholder = 'MM/DD/YYYY';
         }
 
-        return <TextField helperText={helperText} helpTopicId={helpTopicId} {...params} size={size} />;
+        return <TextField {...params} {...FieldProps} />;
       }}
     />
   );