@wojtekmaj/react-datetimerange-picker - npm Package Compare versions

Comparing version 5.2.2 to 5.3.0

dist/cjs/DateTimeRangePicker.js

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

dist/esm/DateTimeRangePicker.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": "@wojtekmaj/react-datetimerange-picker",
-  "version": "5.2.2",
+  "version": "5.3.0",
   "description": "A datetime range picker for your React app.",
@@ -49,6 +49,6 @@ "main": "dist/cjs/index.js",
     "prop-types": "^15.6.0",
-    "react-calendar": "^4.4.0",
+    "react-calendar": "^4.5.0",
     "react-clock": "^4.3.0",
     "react-datetime-picker": "^5.2.2",
-    "react-fit": "^1.5.1"
+    "react-fit": "^1.6.0"
   },
@@ -61,2 +61,3 @@ "devDependencies": {
     "@types/node": "*",
+    "@types/react": "*",
     "eslint": "^8.26.0",
@@ -77,5 +78,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": {
@@ -82,0 +89,0 @@ "access": "public",

README.md

@@ -52,8 +52,12 @@ [![npm](https://img.shields.io/npm/v/@wojtekmaj/react-datetimerange-picker.svg)](https://www.npmjs.com/package/@wojtekmaj/react-datetimerange-picker) ![downloads](https://img.shields.io/npm/dt/@wojtekmaj/react-datetimerange-picker.svg) [![CI](https://github.com/wojtekmaj/react-datetimerange-picker/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-datetimerange-picker/actions)
 
-```js
-import React, { useState } from 'react';
+```tsx
+import { useState } from 'react';
 import DateTimeRangePicker from '@wojtekmaj/react-datetimerange-picker';
 
+type ValuePiece = Date | null;
+
+type Value = ValuePiece | [ValuePiece, ValuePiece];
+
 function MyApp() {
-  const [value, onChange] = useState([new Date(), new Date()]);
+  const [value, onChange] = useState<Value>([new Date(), new Date()]);
 
@@ -72,3 +76,3 @@ return (
 
-```js
+```ts
 import '@wojtekmaj/react-datetimerange-picker/dist/DateTimeRangePicker.css';
@@ -98,3 +102,3 @@ import 'react-calendar/dist/Calendar.css';
 | clockClassName       | Class name(s) that will be added along with `"react-clock"` to the main React-Calendar `<div>` element.                                                                                                                                                                                                                                      | n/a                     | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>                                                                                                                                                                    |
-| closeWidgets         | Whether to close the widgets on value selection. Note: It's recommended to use shouldCloseWidgets function instead.                                                                                                                                                                                                                          | `true`                  | `false`                                                                                                                                                                                                                                                                |
+| closeWidgets         | Whether to close the widgets on value selection. **Note**: It's recommended to use shouldCloseWidgets function instead.                                                                                                                                                                                                                      | `true`                  | `false`                                                                                                                                                                                                                                                                |
 | data-testid          | `data-testid` attribute for the main React-DateTimeRange-Picker `<div>` element.                                                                                                                                                                                                                                                             | n/a                     | `"date-picker"`                                                                                                                                                                                                                                                        |
@@ -125,3 +129,3 @@ | dayAriaLabel         | `aria-label` for the day input.                                                                                                                                                                                                                                                                                                              | n/a                     | `"Day"`                                                                                                                                                                                                                                                                |
 | onInvalidChange      | Function called when the user picks an invalid datetime.                                                                                                                                                                                                                                                                                     | n/a                     | `() => alert('Invalid datetime')`                                                                                                                                                                                                                                      |
-| openWidgetsOnFocus   | Whether to open the widgets on input focus. Note: It's recommended to use shouldOpenWidgets function instead.                                                                                                                                                                                                                                | `true`                  | `false`                                                                                                                                                                                                                                                                |
+| openWidgetsOnFocus   | Whether to open the widgets on input focus. **Note**: It's recommended to use shouldOpenWidgets function instead.                                                                                                                                                                                                                            | `true`                  | `false`                                                                                                                                                                                                                                                                |
 | portalContainer      | Element to render the widgets in using portal.                                                                                                                                                                                                                                                                                               | n/a                     | `document.getElementById('my-div')`                                                                                                                                                                                                                                    |
@@ -128,0 +132,0 @@ | rangeDivider         | Divider between datetime inputs.                                                                                                                                                                                                                                                                                                             | `"–"`                   | `" to "`                                                                                                                                                                                                                                                               |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

178445

increased by0.16%

Lines of code

3128

increased by0.1%

Number of lines in readme file

159

increased by2.58%

Worsened metrics

Dependency count

10

increased by11.11%

Dev dependency count

19

increased by5.56%

Dependency changes

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

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

• + Addedcsstype@3.1.3(transitive)

• Updatedreact-calendar@^4.5.0

• Updatedreact-fit@^1.6.0