@availity/mui-datepicker 0.4.2 → 0.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/index.d.mts +16 -0
  3. package/dist/index.d.ts +3 -3
  4. package/dist/index.js +50 -14
  5. package/dist/index.mjs +53 -14
  6. package/jest.config.js +10 -0
  7. package/package.json +7 -7
  8. package/project.json +15 -10
  9. package/src/lib/Datepicker.stories.tsx +6 -6
  10. package/src/lib/Datepicker.tsx +17 -9
package/CHANGELOG.md CHANGED
@@ -2,6 +2,17 @@
2
2
 
3
3
  This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
4
4
 
5
+ ## [0.4.3](https://github.com/Availity/element/compare/@availity/mui-datepicker@0.4.2...@availity/mui-datepicker@0.4.3) (2024-04-19)
6
+
7
+ ### Dependency Updates
8
+
9
+ * `mui-textfield` updated to version `0.4.2`
10
+ * `theme-provider` updated to version `0.4.2`
11
+
12
+ ### Bug Fixes
13
+
14
+ * **mui-datepicker:** render textField correctly ([7f9c894](https://github.com/Availity/element/commit/7f9c89475fc76294de0edfaf7d954674335f7091))
15
+
5
16
  ## [0.4.2](https://github.com/Availity/element/compare/@availity/mui-datepicker@0.4.1...@availity/mui-datepicker@0.4.2) (2024-04-04)
6
17
 
7
18
 
package/dist/index.d.mts ADDED
@@ -0,0 +1,16 @@
1
+ import { TextFieldProps } from '@availity/mui-textfield';
2
+ import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
3
+ import { Dayjs } from 'dayjs';
4
+
5
+ type DatepickerProps = {
6
+ value: Dayjs | null | undefined;
7
+ /** Props applied to the `TextField` component */
8
+ FieldProps?: TextFieldProps;
9
+ /** Determines where the Calendar will be placed when opened.
10
+ * @default bottom-start
11
+ */
12
+ placement?: 'bottom-start' | 'bottom' | 'bottom-end';
13
+ } & Omit<DatePickerProps<Dayjs, false>, 'components' | 'componentsProps' | 'desktopModeMediaQuery' | 'DialogProps' | 'OpenPickerButtonProps' | 'openTo' | 'orientation' | 'PaperProps' | 'PopperProps' | 'reduceAnimations' | 'renderInput' | 'rifmFormatter' | 'showToolbar' | 'ToolbarComponent' | 'toolbarFormat' | 'toolbarPlaceholder' | 'toolbarTitle' | 'TransitionComponent' | 'value'>;
14
+ declare const Datepicker: ({ FieldProps, placement, ...props }: DatepickerProps) => JSX.Element;
15
+
16
+ export { Datepicker, type DatepickerProps };
package/dist/index.d.ts CHANGED
@@ -3,14 +3,14 @@ import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
3
3
  import { Dayjs } from 'dayjs';
4
4
 
5
5
  type DatepickerProps = {
6
- value: Dayjs | string | null;
6
+ value: Dayjs | null | undefined;
7
7
  /** Props applied to the `TextField` component */
8
8
  FieldProps?: TextFieldProps;
9
9
  /** Determines where the Calendar will be placed when opened.
10
10
  * @default bottom-start
11
11
  */
12
12
  placement?: 'bottom-start' | 'bottom' | 'bottom-end';
13
- } & Omit<DatePickerProps<Dayjs, Dayjs>, 'components' | 'componentsProps' | 'desktopModeMediaQuery' | 'DialogProps' | 'OpenPickerButtonProps' | 'openTo' | 'orientation' | 'PaperProps' | 'PopperProps' | 'reduceAnimations' | 'renderInput' | 'rifmFormatter' | 'showToolbar' | 'ToolbarComponent' | 'toolbarFormat' | 'toolbarPlaceholder' | 'toolbarTitle' | 'TransitionComponent' | 'value'>;
13
+ } & Omit<DatePickerProps<Dayjs, false>, 'components' | 'componentsProps' | 'desktopModeMediaQuery' | 'DialogProps' | 'OpenPickerButtonProps' | 'openTo' | 'orientation' | 'PaperProps' | 'PopperProps' | 'reduceAnimations' | 'renderInput' | 'rifmFormatter' | 'showToolbar' | 'ToolbarComponent' | 'toolbarFormat' | 'toolbarPlaceholder' | 'toolbarTitle' | 'TransitionComponent' | 'value'>;
14
14
  declare const Datepicker: ({ FieldProps, placement, ...props }: DatepickerProps) => JSX.Element;
15
15
 
16
- export { Datepicker, DatepickerProps };
16
+ export { Datepicker, type DatepickerProps };
package/dist/index.js CHANGED
@@ -1,8 +1,37 @@
1
1
  "use strict";
2
2
  var __defProp = Object.defineProperty;
3
+ var __defProps = Object.defineProperties;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
6
  var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
8
  var __hasOwnProp = Object.prototype.hasOwnProperty;
9
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
10
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
11
+ var __spreadValues = (a, b) => {
12
+ for (var prop in b || (b = {}))
13
+ if (__hasOwnProp.call(b, prop))
14
+ __defNormalProp(a, prop, b[prop]);
15
+ if (__getOwnPropSymbols)
16
+ for (var prop of __getOwnPropSymbols(b)) {
17
+ if (__propIsEnum.call(b, prop))
18
+ __defNormalProp(a, prop, b[prop]);
19
+ }
20
+ return a;
21
+ };
22
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
23
+ var __objRest = (source, exclude) => {
24
+ var target = {};
25
+ for (var prop in source)
26
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
27
+ target[prop] = source[prop];
28
+ if (source != null && __getOwnPropSymbols)
29
+ for (var prop of __getOwnPropSymbols(source)) {
30
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
31
+ target[prop] = source[prop];
32
+ }
33
+ return target;
34
+ };
6
35
  var __export = (target, all) => {
7
36
  for (var name in all)
8
37
  __defProp(target, name, { get: all[name], enumerable: true });
@@ -29,21 +58,28 @@ var import_mui_textfield = require("@availity/mui-textfield");
29
58
  var import_DatePicker = require("@mui/x-date-pickers/DatePicker");
30
59
  var import_jsx_runtime = require("react/jsx-runtime");
31
60
  var paperProps = { elevation: 8, variant: "elevation", sx: { marginTop: "4px" } };
32
- var Datepicker = ({ FieldProps, placement = "bottom-start", ...props }) => {
33
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DatePicker.DatePicker, {
34
- ...props,
35
- PaperProps: paperProps,
36
- PopperProps: { placement },
37
- renderInput: (params) => {
38
- if (params.inputProps) {
39
- params.inputProps.placeholder = "MM/DD/YYYY";
61
+ var Datepicker = (_a) => {
62
+ var _b = _a, { FieldProps, placement = "bottom-start" } = _b, props = __objRest(_b, ["FieldProps", "placement"]);
63
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
64
+ import_DatePicker.DatePicker,
65
+ __spreadProps(__spreadValues({}, props), {
66
+ slotProps: {
67
+ desktopPaper: paperProps,
68
+ mobilePaper: paperProps,
69
+ popper: {
70
+ placement
71
+ }
72
+ },
73
+ slots: {
74
+ textField: (params) => {
75
+ if (params.inputProps) {
76
+ params.inputProps.placeholder = "MM/DD/YYYY";
77
+ }
78
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_textfield.TextField, __spreadValues(__spreadValues({}, params), FieldProps));
79
+ }
40
80
  }
41
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_textfield.TextField, {
42
- ...params,
43
- ...FieldProps
44
- });
45
- }
46
- });
81
+ })
82
+ );
47
83
  };
48
84
  // Annotate the CommonJS export names for ESM import in node:
49
85
  0 && (module.exports = {
package/dist/index.mjs CHANGED
@@ -1,23 +1,62 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ var __objRest = (source, exclude) => {
21
+ var target = {};
22
+ for (var prop in source)
23
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
+ target[prop] = source[prop];
25
+ if (source != null && __getOwnPropSymbols)
26
+ for (var prop of __getOwnPropSymbols(source)) {
27
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
+ target[prop] = source[prop];
29
+ }
30
+ return target;
31
+ };
32
+
1
33
  // src/lib/Datepicker.tsx
2
34
  import { TextField } from "@availity/mui-textfield";
3
35
  import { DatePicker as MuiDatePicker } from "@mui/x-date-pickers/DatePicker";
4
36
  import { jsx } from "react/jsx-runtime";
5
37
  var paperProps = { elevation: 8, variant: "elevation", sx: { marginTop: "4px" } };
6
- var Datepicker = ({ FieldProps, placement = "bottom-start", ...props }) => {
7
- return /* @__PURE__ */ jsx(MuiDatePicker, {
8
- ...props,
9
- PaperProps: paperProps,
10
- PopperProps: { placement },
11
- renderInput: (params) => {
12
- if (params.inputProps) {
13
- params.inputProps.placeholder = "MM/DD/YYYY";
38
+ var Datepicker = (_a) => {
39
+ var _b = _a, { FieldProps, placement = "bottom-start" } = _b, props = __objRest(_b, ["FieldProps", "placement"]);
40
+ return /* @__PURE__ */ jsx(
41
+ MuiDatePicker,
42
+ __spreadProps(__spreadValues({}, props), {
43
+ slotProps: {
44
+ desktopPaper: paperProps,
45
+ mobilePaper: paperProps,
46
+ popper: {
47
+ placement
48
+ }
49
+ },
50
+ slots: {
51
+ textField: (params) => {
52
+ if (params.inputProps) {
53
+ params.inputProps.placeholder = "MM/DD/YYYY";
54
+ }
55
+ return /* @__PURE__ */ jsx(TextField, __spreadValues(__spreadValues({}, params), FieldProps));
56
+ }
14
57
  }
15
- return /* @__PURE__ */ jsx(TextField, {
16
- ...params,
17
- ...FieldProps
18
- });
19
- }
20
- });
58
+ })
59
+ );
21
60
  };
22
61
  export {
23
62
  Datepicker
package/jest.config.js CHANGED
@@ -4,4 +4,14 @@ module.exports = {
4
4
  ...global,
5
5
  displayName: 'datepicker',
6
6
  coverageDirectory: '../../coverage/datepicker',
7
+ /* TODO: Update to latest Jest snapshotFormat
8
+ * By default Nx has kept the older style of Jest Snapshot formats
9
+ * to prevent breaking of any existing tests with snapshots.
10
+ * It's recommend you update to the latest format.
11
+ * You can do this by removing snapshotFormat property
12
+ * and running tests with --update-snapshot flag.
13
+ * Example: From within the project directory, run "nx test --update-snapshot"
14
+ * More info: https://jestjs.io/docs/upgrading-to-jest29#snapshot-format
15
+ */
16
+ snapshotFormat: { escapeString: true, printBasicPrototype: true },
7
17
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@availity/mui-datepicker",
3
- "version": "0.4.2",
3
+ "version": "0.4.3",
4
4
  "description": "Availity MUI Datepicker Component - part of the @availity/element design system",
5
5
  "keywords": [
6
6
  "react",
@@ -32,16 +32,16 @@
32
32
  "publish:canary": "yarn npm publish --access public --tag canary"
33
33
  },
34
34
  "dependencies": {
35
- "@availity/mui-textfield": "0.5.15",
36
- "@mui/x-date-pickers": "^5.0.15",
37
- "dayjs": "^1.11.9"
35
+ "@availity/mui-textfield": "0.5.17",
36
+ "@mui/x-date-pickers": "^7.2.0",
37
+ "dayjs": "^1.11.10"
38
38
  },
39
39
  "devDependencies": {
40
- "@mui/material": "^5.11.9",
40
+ "@mui/material": "^5.15.15",
41
41
  "react": "18.2.0",
42
42
  "react-dom": "18.2.0",
43
- "tsup": "^5.12.7",
44
- "typescript": "^4.6.4"
43
+ "tsup": "^8.0.2",
44
+ "typescript": "^5.4.5"
45
45
  },
46
46
  "peerDependencies": {
47
47
  "@mui/material": "^5.11.9",
package/project.json CHANGED
@@ -3,13 +3,18 @@
3
3
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
4
4
  "sourceRoot": "packages/datepicker/src",
5
5
  "projectType": "library",
6
+ "trackDeps": true,
6
7
  "tags": [],
8
+ "build": {
9
+ "options": {
10
+ "cache": false
11
+ }
12
+ },
7
13
  "targets": {
8
14
  "lint": {
9
- "executor": "@nrwl/linter:eslint",
15
+ "executor": "@nx/eslint:lint",
10
16
  "options": {
11
17
  "eslintConfig": ".eslintrc.json",
12
- "lintFilePatterns": ["packages/datepicker/**/*.{js,ts}"],
13
18
  "silent": false,
14
19
  "fix": false,
15
20
  "cache": true,
@@ -22,21 +27,21 @@
22
27
  }
23
28
  },
24
29
  "test": {
25
- "executor": "@nrwl/jest:jest",
26
- "outputs": ["coverage/datepicker"],
30
+ "executor": "@nx/jest:jest",
31
+ "outputs": ["{workspaceRoot}/coverage/datepicker"],
27
32
  "options": {
28
- "jestConfig": "packages/datepicker/jest.config.js",
29
- "passWithNoTests": true
33
+ "jestConfig": "packages/datepicker/jest.config.js"
30
34
  }
31
35
  },
32
36
  "version": {
33
37
  "executor": "@jscutlery/semver:version",
34
38
  "options": {
35
39
  "preset": "conventional",
36
- "commitMessageFormat": "chore(${projectName}): release version ${version} [skip ci]",
37
- "tagPrefix": "@availity/${projectName}@"
40
+ "commitMessageFormat": "chore({projectName}): release version ${version} [skip ci]",
41
+ "tagPrefix": "@availity/{projectName}@",
42
+ "trackDeps": true,
43
+ "skipCommitTypes": ["docs"]
38
44
  }
39
45
  }
40
- },
41
- "trackDeps": true
46
+ }
42
47
  }
package/src/lib/Datepicker.stories.tsx CHANGED
@@ -1,8 +1,8 @@
1
1
  // Each exported component in the package should have its own stories file
2
2
  import type { Meta, StoryObj } from '@storybook/react';
3
- import { CalendarPicker } from '@mui/x-date-pickers/CalendarPicker';
4
- import { MonthPicker } from '@mui/x-date-pickers/MonthPicker';
5
- import { YearPicker } from '@mui/x-date-pickers/YearPicker';
3
+ import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
4
+ import { MonthCalendar } from '@mui/x-date-pickers/MonthCalendar';
5
+ import { YearCalendar } from '@mui/x-date-pickers/YearCalendar';
6
6
  import { useState } from 'react';
7
7
  import dayjs, { Dayjs } from 'dayjs';
8
8
  import { Datepicker, DatepickerProps } from './Datepicker';
@@ -55,7 +55,7 @@ export const _PickerViews: StoryObj<typeof Datepicker> = {
55
55
  Day View
56
56
  </Typography>
57
57
  <Paper sx={{ width: 'min-content' }}>
58
- <CalendarPicker date={date} onChange={(newDate) => setDate(newDate)} />
58
+ <DateCalendar value={date} onChange={(newDate) => setDate(newDate)} />
59
59
  </Paper>
60
60
  </Grid>
61
61
  <Grid xs="auto">
@@ -63,7 +63,7 @@ export const _PickerViews: StoryObj<typeof Datepicker> = {
63
63
  Month View
64
64
  </Typography>
65
65
  <Paper sx={{ width: 'min-content' }}>
66
- <MonthPicker date={date} minDate={minDate} maxDate={maxDate} onChange={(newDate) => setDate(newDate)} />
66
+ <MonthCalendar value={date} minDate={minDate} maxDate={maxDate} onChange={(newDate) => setDate(newDate)} />
67
67
  </Paper>
68
68
  </Grid>
69
69
  <Grid xs="auto">
@@ -71,7 +71,7 @@ export const _PickerViews: StoryObj<typeof Datepicker> = {
71
71
  Year View
72
72
  </Typography>
73
73
  <Paper sx={{ width: '320px' }}>
74
- <YearPicker date={date} minDate={minDate} maxDate={maxDate} onChange={(newDate) => setDate(newDate)} />
74
+ <YearCalendar value={date} minDate={minDate} maxDate={maxDate} onChange={(newDate) => setDate(newDate)} />
75
75
  </Paper>
76
76
  </Grid>
77
77
  </Grid>
package/src/lib/Datepicker.tsx CHANGED
@@ -1,9 +1,10 @@
1
1
  import { TextField, TextFieldProps } from '@availity/mui-textfield';
2
2
  import { DatePicker as MuiDatePicker, DatePickerProps as MuiDatePickerProps } from '@mui/x-date-pickers/DatePicker';
3
3
  import type { Dayjs } from 'dayjs';
4
+ import type {} from '@mui/x-date-pickers/AdapterDayjs';
4
5
 
5
6
  export type DatepickerProps = {
6
- value: Dayjs | string | null;
7
+ value: Dayjs | null | undefined;
7
8
  /** Props applied to the `TextField` component */
8
9
  FieldProps?: TextFieldProps;
9
10
  /** Determines where the Calendar will be placed when opened.
@@ -11,7 +12,7 @@ export type DatepickerProps = {
11
12
  */
12
13
  placement?: 'bottom-start' | 'bottom' | 'bottom-end';
13
14
  } & Omit<
14
- MuiDatePickerProps<Dayjs, Dayjs>,
15
+ MuiDatePickerProps<Dayjs, false>,
15
16
  | 'components'
16
17
  | 'componentsProps'
17
18
  | 'desktopModeMediaQuery'
@@ -39,14 +40,21 @@ export const Datepicker = ({ FieldProps, placement = 'bottom-start', ...props }:
39
40
  return (
40
41
  <MuiDatePicker
41
42
  {...props}
42
- PaperProps={paperProps}
43
- PopperProps={{ placement }}
44
- renderInput={(params) => {
45
- if (params.inputProps) {
46
- params.inputProps.placeholder = 'MM/DD/YYYY';
47
- }
43
+ slotProps={{
44
+ desktopPaper: paperProps,
45
+ mobilePaper: paperProps,
46
+ popper: {
47
+ placement,
48
+ },
49
+ }}
50
+ slots={{
51
+ textField: (params) => {
52
+ if (params.inputProps) {
53
+ params.inputProps.placeholder = 'MM/DD/YYYY';
54
+ }
48
55
 
49
- return <TextField {...params} {...FieldProps} />;
56
+ return <TextField {...params} {...FieldProps} />;
57
+ },
50
58
  }}
51
59
  />
52
60
  );