react-datetime-picker - npm Package Compare versions

Comparing version 3.3.0 to 3.4.0

dist/DateTimeInput.js

@@ -239,2 +239,18 @@ "use strict";
 
+    _defineProperty(_assertThisInitialized(_this), "dayInput", /*#__PURE__*/(0, _react.createRef)());
+
+    _defineProperty(_assertThisInitialized(_this), "monthInput", /*#__PURE__*/(0, _react.createRef)());
+
+    _defineProperty(_assertThisInitialized(_this), "yearInput", /*#__PURE__*/(0, _react.createRef)());
+
+    _defineProperty(_assertThisInitialized(_this), "amPmInput", /*#__PURE__*/(0, _react.createRef)());
+
+    _defineProperty(_assertThisInitialized(_this), "hour12Input", /*#__PURE__*/(0, _react.createRef)());
+
+    _defineProperty(_assertThisInitialized(_this), "hour24Input", /*#__PURE__*/(0, _react.createRef)());
+
+    _defineProperty(_assertThisInitialized(_this), "minuteInput", /*#__PURE__*/(0, _react.createRef)());
+
+    _defineProperty(_assertThisInitialized(_this), "secondInput", /*#__PURE__*/(0, _react.createRef)());
+
     _defineProperty(_assertThisInitialized(_this), "onClick", function (event) {
@@ -386,4 +402,4 @@ if (event.target === event.currentTarget) {
 
-      var formElements = [_this.dayInput, _this.monthInput, _this.yearInput, _this.hour12Input, _this.hour24Input, _this.minuteInput, _this.secondInput, _this.amPmInput].filter(Boolean);
-      var formElementsWithoutSelect = formElements.slice(0, -1);
+      var formElements = [_this.amPmInput.current, _this.dayInput.current, _this.monthInput.current, _this.yearInput.current, _this.hour12Input.current, _this.hour24Input.current, _this.minuteInput.current, _this.secondInput.current].filter(Boolean);
+      var formElementsWithoutSelect = formElements.slice(1);
       var values = {};
@@ -436,2 +452,3 @@ formElements.forEach(function (formElement) {
         autoFocus: index === 0 && autoFocus,
+        inputRef: _this.dayInput,
         month: month,
@@ -466,2 +483,3 @@ placeholder: dayPlaceholder,
           autoFocus: index === 0 && autoFocus,
+          inputRef: _this.monthInput,
           locale: locale,
@@ -481,2 +499,3 @@ placeholder: monthPlaceholder,
         autoFocus: index === 0 && autoFocus,
+        inputRef: _this.monthInput,
         placeholder: monthPlaceholder,
@@ -500,2 +519,3 @@ showLeadingZeros: showLeadingZerosFromFormat || showLeadingZeros,
         autoFocus: index === 0 && autoFocus,
+        inputRef: _this.yearInput,
         placeholder: yearPlaceholder,
@@ -535,2 +555,3 @@ value: year,
         autoFocus: index === 0 && autoFocus,
+        inputRef: _this.hour12Input,
         placeholder: hourPlaceholder,
@@ -559,2 +580,3 @@ showLeadingZeros: showLeadingZeros,
         autoFocus: index === 0 && autoFocus,
+        inputRef: _this.hour24Input,
         placeholder: hourPlaceholder,
@@ -586,2 +608,3 @@ showLeadingZeros: showLeadingZeros,
         hour: hour,
+        inputRef: _this.minuteInput,
         placeholder: minutePlaceholder,
@@ -614,2 +637,3 @@ showLeadingZeros: showLeadingZeros,
         hour: hour,
+        inputRef: _this.secondInput,
         minute: minute,
@@ -633,2 +657,3 @@ placeholder: secondPlaceholder,
         autoFocus: index === 0 && autoFocus,
+        inputRef: _this.amPmInput,
         locale: locale,
@@ -827,4 +852,2 @@ onChange: _this.onChangeAmPm,
     get: function get() {
-      var _this2 = this;
-
       var _this$props10 = this.props,
@@ -847,7 +870,3 @@ className = _this$props10.className,
         // This is only for showing validity when editing
-        required: required || isWidgetOpen,
-        itemRef: function itemRef(ref, name) {
-          // Save a reference to each input field
-          _this2["".concat(name, "Input")] = ref;
-        }
+        required: required || isWidgetOpen
       };
@@ -854,0 +873,0 @@ }

dist/DateTimePicker.js

@@ -97,3 +97,6 @@ "use strict";
     _defineProperty(_assertThisInitialized(_this), "onOutsideAction", function (event) {
-      if (_this.wrapper && !_this.wrapper.contains(event.target)) {
+      // Try event.composedPath first to handle clicks inside a Shadow DOM.
+      var target = 'composedPath' in event ? event.composedPath()[0] : event.target;
+
+      if (_this.wrapper && !_this.wrapper.contains(target)) {
         _this.closeWidgets();
@@ -100,0 +103,0 @@ }

package.json

 {
   "name": "react-datetime-picker",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "A date range picker for your React app.",
@@ -55,5 +55,5 @@ "main": "dist/entry.js",
     "react-clock": "^3.0.0",
-    "react-date-picker": "^8.1.0",
+    "react-date-picker": "^8.3.2",
     "react-fit": "^1.0.3",
-    "react-time-picker": "^4.2.0"
+    "react-time-picker": "^4.4.1"
   },
@@ -69,3 +69,3 @@ "devDependencies": {
     "enzyme": "^3.10.0",
-    "eslint": "^7.12.0",
+    "eslint": "~7.19.0",
     "eslint-config-wojtekmaj": "^0.5.0",
@@ -83,3 +83,2 @@ "jest": "^26.6.0",
   "resolutions": {
-    "rimraf@2.6.3": "^2.6.3",
     "semver@7.0.0": "^7.0.0"
@@ -86,0 +85,0 @@ },

src/DateTimeInput.jsx

@@ -1,2 +0,2 @@
-import React, { PureComponent } from 'react';
+import React, { createRef, PureComponent } from 'react';
 import PropTypes from 'prop-types';
@@ -219,2 +219,18 @@ import {
 
+  dayInput = createRef();
+
+  monthInput = createRef();
+
+  yearInput = createRef();
+
+  amPmInput = createRef();
+
+  hour12Input = createRef();
+
+  hour24Input = createRef();
+
+  minuteInput = createRef();
+
+  secondInput= createRef();
+
   get formatTime() {
@@ -359,6 +375,2 @@ const { maxDetail } = this.props;
       required: required || isWidgetOpen,
-      itemRef: (ref, name) => {
-        // Save a reference to each input field
-        this[`${name}Input`] = ref;
-      },
     };
@@ -527,13 +539,13 @@ }
     const formElements = [
-      this.dayInput,
-      this.monthInput,
-      this.yearInput,
-      this.hour12Input,
-      this.hour24Input,
-      this.minuteInput,
-      this.secondInput,
-      this.amPmInput,
+      this.amPmInput.current,
+      this.dayInput.current,
+      this.monthInput.current,
+      this.yearInput.current,
+      this.hour12Input.current,
+      this.hour24Input.current,
+      this.minuteInput.current,
+      this.secondInput.current,
     ].filter(Boolean);
 
-    const formElementsWithoutSelect = formElements.slice(0, -1);
+    const formElementsWithoutSelect = formElements.slice(1);
 
@@ -586,2 +598,3 @@ const values = {};
         autoFocus={index === 0 && autoFocus}
+        inputRef={this.dayInput}
         month={month}
@@ -617,2 +630,3 @@ placeholder={dayPlaceholder}
           autoFocus={index === 0 && autoFocus}
+          inputRef={this.monthInput}
           locale={locale}
@@ -635,2 +649,3 @@ placeholder={monthPlaceholder}
         autoFocus={index === 0 && autoFocus}
+        inputRef={this.monthInput}
         placeholder={monthPlaceholder}
@@ -654,2 +669,3 @@ showLeadingZeros={showLeadingZerosFromFormat || showLeadingZeros}
         autoFocus={index === 0 && autoFocus}
+        inputRef={this.yearInput}
         placeholder={yearPlaceholder}
@@ -687,2 +703,3 @@ value={year}
         autoFocus={index === 0 && autoFocus}
+        inputRef={this.hour12Input}
         placeholder={hourPlaceholder}
@@ -711,2 +728,3 @@ showLeadingZeros={showLeadingZeros}
         autoFocus={index === 0 && autoFocus}
+        inputRef={this.hour24Input}
         placeholder={hourPlaceholder}
@@ -736,2 +754,3 @@ showLeadingZeros={showLeadingZeros}
         hour={hour}
+        inputRef={this.minuteInput}
         placeholder={minutePlaceholder}
@@ -761,2 +780,3 @@ showLeadingZeros={showLeadingZeros}
         hour={hour}
+        inputRef={this.secondInput}
         minute={minute}
@@ -780,2 +800,3 @@ placeholder={secondPlaceholder}
         autoFocus={index === 0 && autoFocus}
+        inputRef={this.amPmInput}
         locale={locale}
@@ -782,0 +803,0 @@ onChange={this.onChangeAmPm}

src/DateTimePicker.jsx

@@ -77,3 +77,5 @@ import React, { PureComponent } from 'react';
   onOutsideAction = (event) => {
-    if (this.wrapper && !this.wrapper.contains(event.target)) {
+    // Try event.composedPath first to handle clicks inside a Shadow DOM.
+    const target = 'composedPath' in event ? event.composedPath()[0] : event.target;
+    if (this.wrapper && !this.wrapper.contains(target)) {
       this.closeWidgets();
@@ -80,0 +82,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

197981

increased by0.93%

Lines of code

4737

increased by0.62%

Dependency changes

• Updatedreact-date-picker@^8.3.2

• Updatedreact-time-picker@^4.4.1