react-date-picker - npm Package Compare versions

Comparing version 10.2.1 to 10.3.0

dist/cjs/DateInput.js

 "use strict";
+'use client';
 var __assign = (this && this.__assign) || function () {
@@ -3,0 +4,0 @@ __assign = Object.assign || function(t) {

dist/cjs/DatePicker.js

 "use strict";
+'use client';
 var __assign = (this && this.__assign) || function () {
@@ -3,0 +4,0 @@ __assign = Object.assign || function(t) {

dist/esm/DateInput.js

@@ -0,1 +1,2 @@
+'use client';
 var __assign = (this && this.__assign) || function () {
@@ -2,0 +3,0 @@ __assign = Object.assign || function(t) {

dist/esm/DatePicker.js

@@ -0,1 +1,2 @@
+'use client';
 var __assign = (this && this.__assign) || function () {
@@ -2,0 +3,0 @@ __assign = Object.assign || function(t) {

package.json

 {
   "name": "react-date-picker",
-  "version": "10.2.1",
+  "version": "10.3.0",
   "description": "A date picker for your React app.",
@@ -44,4 +44,4 @@ "main": "dist/cjs/index.js",
     "prop-types": "^15.6.0",
-    "react-calendar": "^4.4.0",
-    "react-fit": "^1.5.1",
+    "react-calendar": "^4.5.0",
+    "react-fit": "^1.6.0",
     "update-input-width": "^1.3.1"
@@ -55,2 +55,3 @@ },
     "@types/node": "*",
+    "@types/react": "*",
     "eslint": "^8.26.0",
@@ -71,5 +72,11 @@ "eslint-config-wojtekmaj": "^0.9.0",
   "peerDependencies": {
+    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
   "publishConfig": {
@@ -76,0 +83,0 @@ "access": "public",

README.md

@@ -52,8 +52,12 @@ [![npm](https://img.shields.io/npm/v/react-date-picker.svg)](https://www.npmjs.com/package/react-date-picker) ![downloads](https://img.shields.io/npm/dt/react-date-picker.svg) [![CI](https://github.com/wojtekmaj/react-date-picker/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-date-picker/actions)
 
-```js
-import React, { useState } from 'react';
+```tsx
+import { useState } from 'react';
 import DatePicker from 'react-date-picker';
 
+type ValuePiece = Date | null;
+
+type Value = ValuePiece | [ValuePiece, ValuePiece];
+
 function MyApp() {
-  const [value, onChange] = useState(new Date());
+  const [value, onChange] = useState<Value>(new Date());
 
@@ -72,3 +76,3 @@ return (
 
-```js
+```ts
 import 'react-date-picker/dist/DatePicker.css';
@@ -95,3 +99,3 @@ import 'react-calendar/dist/Calendar.css';
 | clearIcon            | Content of the clear button. Setting the value explicitly to `null` will hide the icon.                                                                                                                                                      | (default icon)          | <ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li><li>React function: `ClearIcon`</li></ul>                                                                                                      |
-| closeCalendar        | Whether to close the calendar on value selection. Note: It's recommended to use shouldCloseCalendar function instead.                                                                                                                        | `true`                  | `false`                                                                                                                                                                                                             |
+| closeCalendar        | Whether to close the calendar on value selection. **Note**: It's recommended to use shouldCloseCalendar function instead.                                                                                                                    | `true`                  | `false`                                                                                                                                                                                                             |
 | data-testid          | `data-testid` attribute for the main React-Date-Picker `<div>` element.                                                                                                                                                                      | n/a                     | `"date-picker"`                                                                                                                                                                                                     |
@@ -118,3 +122,3 @@ | dayAriaLabel         | `aria-label` for the day input.                                                                                                                                                                                                              | n/a                     | `"Day"`                                                                                                                                                                                                             |
 | onInvalidChange      | Function called when the user picks an invalid date.                                                                                                                                                                                         | n/a                     | `() => alert('Invalid date')`                                                                                                                                                                                       |
-| openCalendarOnFocus  | Whether to open the calendar on input focus. Note: It's recommended to use shouldOpenCalendar function instead.                                                                                                                              | `true`                  | `false`                                                                                                                                                                                                             |
+| openCalendarOnFocus  | Whether to open the calendar on input focus. **Note**: It's recommended to use shouldOpenCalendar function instead.                                                                                                                          | `true`                  | `false`                                                                                                                                                                                                             |
 | portalContainer      | Element to render the calendar in using portal.                                                                                                                                                                                              | n/a                     | `document.getElementById('my-div')`                                                                                                                                                                                 |
@@ -121,0 +125,0 @@ | required             | Whether date input should be required.                                                                                                                                                                                                       | `false`                 | `true`                                                                                                                                                                                                              |

No alert changes

Improved metrics

Total package byte prevSize

321383

increased by0.1%

Lines of code

7130

increased by0.08%

Number of lines in readme file

172

increased by2.38%

Worsened metrics

Dependency count

11

increased by10%

Dev dependency count

19

increased by5.56%

Dependency changes

• + Added@types/prop-types@15.7.12(transitive)

• + Added@types/react@18.3.1(transitive)

• + Addedcsstype@3.1.3(transitive)

• Updatedreact-calendar@^4.5.0

• Updatedreact-fit@^1.6.0