react-date-picker - npm Package Compare versions

Comparing version 8.0.3 to 8.0.4

dist/DateInput/Input.js

@@ -25,7 +25,14 @@ "use strict";
 /* eslint-disable jsx-a11y/no-autofocus */
+var isEdgeLegacy = navigator.userAgent.match(/ Edge\/1/);
+
 function onFocus(event) {
   var target = event.target;
-  requestAnimationFrame(function () {
-    return target.select();
-  });
+
+  if (isEdgeLegacy) {
+    requestAnimationFrame(function () {
+      return target.select();
+    });
+  } else {
+    target.select();
+  }
 }
@@ -113,2 +120,3 @@
     disabled: disabled,
+    inputMode: "numeric",
     max: max,
@@ -148,2 +156,3 @@ min: min,
   ariaLabel: _propTypes["default"].string,
+  autoFocus: _propTypes["default"].bool,
   className: _propTypes["default"].string.isRequired,
@@ -154,5 +163,8 @@ disabled: _propTypes["default"].bool,
   min: _propTypes["default"].number,
+  name: _propTypes["default"].string,
+  nameForClass: _propTypes["default"].string,
   onChange: _propTypes["default"].func,
   onKeyDown: _propTypes["default"].func,
   onKeyUp: _propTypes["default"].func,
+  placeholder: _propTypes["default"].string,
   required: _propTypes["default"].bool,
@@ -159,0 +171,0 @@ showLeadingZeros: _propTypes["default"].bool,

dist/DateInput/NativeInput.js

@@ -80,4 +80,3 @@ "use strict";
       position: 'absolute',
-      top: '-9999px',
-      left: '-9999px'
+      zIndex: '-999'
     },
@@ -84,0 +83,0 @@ type: nativeInputType,

package.json

 {
   "name": "react-date-picker",
-  "version": "8.0.3",
+  "version": "8.0.4",
   "description": "A date picker for your React app.",
@@ -18,3 +18,3 @@ "main": "dist/entry.js",
     "lint": "eslint sample/ src/ test/ --ext .jsx,.js",
-    "prepublishOnly": "yarn clean && yarn build",
+    "prepack": "yarn clean && yarn build",
     "test": "yarn lint && yarn jest"
@@ -92,15 +92,11 @@ },
     "@babel/preset-react": "^7.9.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.3.1",
     "babel-eslint": "^10.0.0",
     "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "eslint": "~7.2.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-plugin-import": "^2.21.2",
-    "eslint-plugin-jsx-a11y": "^6.3.0",
-    "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^4.0.0",
+    "eslint": "^7.12.0",
+    "eslint-config-wojtekmaj": "^0.5.0",
     "jest": "^26.0.0",
     "less": "^3.8.1",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-test-renderer": "^16.7.0",
@@ -110,4 +106,4 @@ "rimraf": "^3.0.0"
   "peerDependencies": {
-    "react": ">=16.3",
-    "react-dom": ">=16.3"
+    "react": "^16.3.0 || ^17.0.0-0",
+    "react-dom": "^16.3.0 || ^17.0.0-0"
   },
@@ -126,2 +122,2 @@ "files": [
   "funding": "https://github.com/wojtekmaj/react-date-picker?sponsor=1"
-}
+}

README.md

@@ -1,2 +0,2 @@
-[![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) [![build](https://travis-ci.com/wojtekmaj/react-date-picker.svg?branch=master)](https://travis-ci.com/wojtekmaj/react-date-picker) ![dependencies](https://img.shields.io/david/wojtekmaj/react-date-picker.svg) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-date-picker.svg) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
+[![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) ![dependencies](https://img.shields.io/david/wojtekmaj/react-date-picker.svg) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-date-picker.svg) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 
@@ -30,8 +30,8 @@ # React-Date-Picker
 
-Your project needs to use React 16 or later. If you use an older version of React, please refer to the table below to find a suitable React-Date-Picker version.
+Your project needs to use React 16.3 or later. If you use an older version of React, please refer to the table below to find a suitable React-Date-Picker version.
 
-|React version|Newest available React-Date-Picker|
-|----|----|
-|>16.0|latest|
-|>15.5|6.7.0|
+| React version | Newest compatible React-Date-Picker version |
+|-------|--------|
+| ≥16.3 | latest |
+| ≥16.0 | 7.x    |
 
@@ -72,4 +72,6 @@ [React-Calendar](https://github.com/wojtekmaj/react-calendar), on which React-Date-Picker relies heavily, uses modern web technologies. That's why it's so fast, lightweight and easy to style. This, however, comes at a cost of [supporting only modern browsers](https://caniuse.com/#feat=internationalization).
 
-If you don't want to use default React-Date-Picker styling to build upon it, you can import React-Date-Picker by using `import DatePicker from 'react-date-picker/dist/entry.nostyle';` instead.
+If you don't want to use default React-Date-Picker and React-Calendar styles, you can import React-Date-Picker without them by using `import DatePicker from 'react-date-picker/dist/entry.nostyle';` instead.
 
+Styles loaded by the default entry file are `react-date-picker/dist/DatePicker.css` and `react-calendar/dist/Calendar.css`. You can copy them to your project to build your own upon them.
+
 ## User guide
@@ -76,0 +78,0 @@

src/DateInput.jsx

@@ -75,5 +75,5 @@ import React, { PureComponent } from 'react';
 
-const getDetailValueFrom = args => getDetailValue(args, 0);
+const getDetailValueFrom = (args) => getDetailValue(args, 0);
 
-const getDetailValueTo = args => getDetailValue(args, 1);
+const getDetailValueTo = (args) => getDetailValue(args, 1);
 
@@ -87,3 +87,3 @@ const getDetailValueArray = (args) => {
 
-  return [getDetailValueFrom, getDetailValueTo].map(fn => fn(args));
+  return [getDetailValueFrom, getDetailValueTo].map((fn) => fn(args));
 };
@@ -112,3 +112,3 @@
   const pattern = new RegExp(
-    Object.keys(elementFunctions).map(el => `${el}+`).join('|'), 'g',
+    Object.keys(elementFunctions).map((el) => `${el}+`).join('|'), 'g',
   );
@@ -133,3 +133,3 @@ const matches = placeholder.match(pattern);
             Object.keys(elementFunctions)
-              .find(elementFunction => currentMatch.match(elementFunction))
+              .find((elementFunction) => currentMatch.match(elementFunction))
           ]
@@ -178,3 +178,3 @@ );
       || datesAreDifferent(
-        ...values.map(value => getDetailValueFrom({
+        ...values.map((value) => getDetailValueFrom({
           value, minDate, maxDate, maxDetail,
@@ -184,3 +184,3 @@ })),
       || datesAreDifferent(
-        ...values.map(value => getDetailValueTo({
+        ...values.map((value) => getDetailValueTo({
           value, minDate, maxDate, maxDetail,
@@ -427,6 +427,6 @@ })),
 
-    if (formElements.every(formElement => !formElement.value)) {
+    if (formElements.every((formElement) => !formElement.value)) {
       onChange(null, false);
     } else if (
-      formElements.every(formElement => formElement.value && formElement.validity.valid)
+      formElements.every((formElement) => formElement.value && formElement.validity.valid)
     ) {
@@ -433,0 +433,0 @@ const year = parseInt(values.year, 10);

src/DateInput.spec.jsx

@@ -32,3 +32,3 @@ import React from 'react';
 
-const getKey = key => ({
+const getKey = (key) => ({
   keyCode: keyCodes[key],
@@ -35,0 +35,0 @@ which: keyCodes[key],

src/DateInput/Input.jsx

@@ -8,6 +8,12 @@ import React from 'react';
 
+const isEdgeLegacy = navigator.userAgent.match(/ Edge\/1/);
+
 function onFocus(event) {
   const { target } = event;
 
-  requestAnimationFrame(() => target.select());
+  if (isEdgeLegacy) {
+    requestAnimationFrame(() => target.select());
+  } else {
+    target.select();
+  }
 }
@@ -99,2 +105,3 @@
       disabled={disabled}
+      inputMode="numeric"
       max={max}
@@ -135,2 +142,3 @@ min={min}
   ariaLabel: PropTypes.string,
+  autoFocus: PropTypes.bool,
   className: PropTypes.string.isRequired,
@@ -141,5 +149,8 @@ disabled: PropTypes.bool,
   min: PropTypes.number,
+  name: PropTypes.string,
+  nameForClass: PropTypes.string,
   onChange: PropTypes.func,
   onKeyDown: PropTypes.func,
   onKeyUp: PropTypes.func,
+  placeholder: PropTypes.string,
   required: PropTypes.bool,
@@ -146,0 +157,0 @@ showLeadingZeros: PropTypes.bool,

src/DateInput/NativeInput.jsx

@@ -68,4 +68,3 @@ import React from 'react';
         position: 'absolute',
-        top: '-9999px',
-        left: '-9999px',
+        zIndex: '-999',
       }}
@@ -72,0 +71,0 @@ type={nativeInputType}

src/DatePicker.jsx

@@ -102,6 +102,6 @@ import React, { PureComponent } from 'react';
   toggleCalendar = () => {
-    this.setState(prevState => ({ isOpen: !prevState.isOpen }));
+    this.setState((prevState) => ({ isOpen: !prevState.isOpen }));
   }
 
-  stopPropagation = event => event.stopPropagation();
+  stopPropagation = (event) => event.stopPropagation();
 
@@ -115,3 +115,3 @@ clear = () => this.onChange(null);
     const fnName = shouldListenWithFallback ? 'addEventListener' : 'removeEventListener';
-    outsideActionEvents.forEach(eventName => document[fnName](eventName, this.onOutsideAction));
+    outsideActionEvents.forEach((eventName) => document[fnName](eventName, this.onOutsideAction));
   }
@@ -118,0 +118,0 @@

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

208314

increased by0.33%

Dev dependency count

16

decreased by-20%

Lines of code

5233

increased by0.35%

Number of lines in readme file

160

increased by1.27%

No dependency changes