react-time-picker - npm Package Compare versions

Comparing version 4.3.0 to 4.4.0

dist/shared/propTypes.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.isValueType = exports.isTime = void 0;
+exports.isRef = exports.isValueType = exports.isTime = void 0;
 
@@ -36,2 +36,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
-exports.isValueType = isValueType;
+exports.isValueType = isValueType;
+
+var isRef = _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].shape({
+  // eslint-disable-next-line react/forbid-prop-types
+  current: _propTypes["default"].any
+})]);
+
+exports.isRef = isRef;

dist/TimeInput.js

@@ -172,2 +172,12 @@ "use strict";
 
+    _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) {
@@ -291,4 +301,4 @@ if (event.target === event.currentTarget) {
 
-      var formElements = [_this.hour12Input, _this.hour24Input, _this.minuteInput, _this.secondInput, _this.amPmInput].filter(Boolean);
-      var formElementsWithoutSelect = formElements.slice(0, -1);
+      var formElements = [_this.amPmInput.current, _this.hour12Input.current, _this.hour24Input.current, _this.minuteInput.current, _this.secondInput.current].filter(Boolean);
+      var formElementsWithoutSelect = formElements.slice(1);
       var values = {};
@@ -350,2 +360,3 @@ formElements.forEach(function (formElement) {
         autoFocus: index === 0 && autoFocus,
+        inputRef: _this.hour12Input,
         placeholder: hourPlaceholder,
@@ -374,2 +385,3 @@ showLeadingZeros: showLeadingZeros,
         autoFocus: index === 0 && autoFocus,
+        inputRef: _this.hour24Input,
         placeholder: hourPlaceholder,
@@ -401,2 +413,3 @@ showLeadingZeros: showLeadingZeros,
         hour: hour,
+        inputRef: _this.minuteInput,
         placeholder: minutePlaceholder,
@@ -429,2 +442,3 @@ showLeadingZeros: showLeadingZeros,
         hour: hour,
+        inputRef: _this.secondInput,
         minute: minute,
@@ -448,2 +462,3 @@ placeholder: secondPlaceholder,
         autoFocus: index === 0 && autoFocus,
+        inputRef: _this.amPmInput,
         locale: locale,
@@ -600,4 +615,2 @@ onChange: _this.onChangeAmPm,
     get: function get() {
-      var _this3 = this;
-
       var _this$props8 = this.props,
@@ -613,6 +626,2 @@ className = _this$props8.className,
         disabled: disabled,
-        itemRef: function itemRef(ref, name) {
-          // Save a reference to each input field
-          _this3["".concat(name, "Input")] = ref;
-        },
         maxTime: maxTime,
@@ -619,0 +628,0 @@ minTime: minTime,

dist/TimeInput/AmPm.js

@@ -40,3 +40,3 @@ "use strict";
       disabled = _ref.disabled,
-      itemRef = _ref.itemRef,
+      inputRef = _ref.inputRef,
       locale = _ref.locale,
@@ -63,7 +63,3 @@ maxTime = _ref.maxTime,
     onChange: onChange,
-    ref: function ref(_ref2) {
-      if (itemRef) {
-        itemRef(_ref2, name);
-      }
-    },
+    ref: inputRef,
     required: required,
@@ -86,3 +82,3 @@ value: value !== null ? value : ''
   disabled: _propTypes["default"].bool,
-  itemRef: _propTypes["default"].func,
+  inputRef: _propTypes["default"].func,
   locale: _propTypes["default"].string,
@@ -89,0 +85,0 @@ maxTime: _propTypes2.isTime,

dist/TimeInput/Hour12Input.js

@@ -93,3 +93,3 @@ "use strict";
   hour: _propTypes["default"].string,
-  itemRef: _propTypes["default"].func,
+  inputRef: _propTypes2.isRef,
   maxTime: _propTypes2.isTime,
@@ -96,0 +96,0 @@ minTime: _propTypes2.isTime,

dist/TimeInput/Hour24Input.js

@@ -49,3 +49,3 @@ "use strict";
   hour: _propTypes["default"].string,
-  itemRef: _propTypes["default"].func,
+  inputRef: _propTypes2.isRef,
   maxTime: _propTypes2.isTime,
@@ -52,0 +52,0 @@ minTime: _propTypes2.isTime,

dist/TimeInput/Input.js

@@ -16,2 +16,4 @@ "use strict";
 
+var _mergeRefs = _interopRequireDefault(require("merge-refs"));
+
 var _updateInputWidth = _interopRequireWildcard(require("update-input-width"));
@@ -97,3 +99,3 @@
       disabled = _ref.disabled,
-      itemRef = _ref.itemRef,
+      inputRef = _ref.inputRef,
       max = _ref.max,
@@ -141,12 +143,3 @@ min = _ref.min,
     placeholder: placeholder,
-    ref: function ref(_ref2) {
-      if (_ref2) {
-        (0, _updateInputWidth["default"])(_ref2);
-        updateInputWidthOnFontLoad(_ref2);
-      }
-
-      if (itemRef) {
-        itemRef(_ref2, name);
-      }
-    },
+    ref: (0, _mergeRefs["default"])(_updateInputWidth["default"], updateInputWidthOnFontLoad, inputRef),
     required: required,
@@ -164,3 +157,3 @@ step: step,
   disabled: _propTypes["default"].bool,
-  itemRef: _propTypes["default"].func,
+  inputRef: _propTypes["default"].func,
   max: _propTypes["default"].number,
@@ -167,0 +160,0 @@ min: _propTypes["default"].number,

dist/TimeInput/MinuteInput.js

@@ -55,3 +55,3 @@ "use strict";
   hour: _propTypes["default"].string,
-  itemRef: _propTypes["default"].func,
+  inputRef: _propTypes2.isRef,
   maxTime: _propTypes2.isTime,
@@ -58,0 +58,0 @@ minTime: _propTypes2.isTime,

dist/TimeInput/SecondInput.js

@@ -56,3 +56,3 @@ "use strict";
   hour: _propTypes["default"].string,
-  itemRef: _propTypes["default"].func,
+  inputRef: _propTypes2.isRef,
   maxTime: _propTypes2.isTime,
@@ -59,0 +59,0 @@ minTime: _propTypes2.isTime,

dist/TimePicker.js

@@ -95,3 +95,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.closeClock();
@@ -98,0 +101,0 @@ }

package.json

 {
   "name": "react-time-picker",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "A time picker for your React app.",
@@ -47,6 +47,7 @@ "main": "dist/entry.js",
     "merge-class-names": "^1.1.1",
+    "merge-refs": "^1.0.0",
     "prop-types": "^15.6.0",
     "react-clock": "^3.0.0",
     "react-fit": "^1.0.3",
-    "update-input-width": "^1.1.1"
+    "update-input-width": "^1.2.2"
   },
@@ -62,3 +63,3 @@ "devDependencies": {
     "enzyme": "^3.10.0",
-    "eslint": "^7.12.0",
+    "eslint": "~7.19.0",
     "eslint-config-wojtekmaj": "^0.5.0",
@@ -76,3 +77,2 @@ "jest": "^26.6.0",
   "resolutions": {
-    "rimraf@2.6.3": "^2.6.3",
     "semver@7.0.0": "^7.0.0"
@@ -79,0 +79,0 @@ },

src/shared/propTypes.js

@@ -22,1 +22,9 @@ import PropTypes from 'prop-types';
 export const isValueType = PropTypes.oneOf(allValueTypes);
+
+export const isRef = PropTypes.oneOfType([
+  PropTypes.func,
+  PropTypes.shape({
+    // eslint-disable-next-line react/forbid-prop-types
+    current: PropTypes.any,
+  }),
+]);

src/TimeInput.jsx

@@ -1,2 +0,2 @@
-import React, { PureComponent } from 'react';
+import React, { createRef, PureComponent } from 'react';
 import PropTypes from 'prop-types';
@@ -137,2 +137,12 @@ import {
 
+  amPmInput = createRef();
+
+  hour12Input = createRef();
+
+  hour24Input = createRef();
+
+  minuteInput = createRef();
+
+  secondInput= createRef();
+
   get formatTime() {
@@ -226,6 +236,2 @@ const { maxDetail } = this.props;
       disabled,
-      itemRef: (ref, name) => {
-        // Save a reference to each input field
-        this[`${name}Input`] = ref;
-      },
       maxTime,
@@ -367,10 +373,10 @@ minTime,
     const formElements = [
-      this.hour12Input,
-      this.hour24Input,
-      this.minuteInput,
-      this.secondInput,
-      this.amPmInput,
+      this.amPmInput.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);
 
@@ -423,2 +429,3 @@ const values = {};
         autoFocus={index === 0 && autoFocus}
+        inputRef={this.hour12Input}
         placeholder={hourPlaceholder}
@@ -447,2 +454,3 @@ showLeadingZeros={showLeadingZeros}
         autoFocus={index === 0 && autoFocus}
+        inputRef={this.hour24Input}
         placeholder={hourPlaceholder}
@@ -472,2 +480,3 @@ showLeadingZeros={showLeadingZeros}
         hour={hour}
+        inputRef={this.minuteInput}
         placeholder={minutePlaceholder}
@@ -497,2 +506,3 @@ showLeadingZeros={showLeadingZeros}
         hour={hour}
+        inputRef={this.secondInput}
         minute={minute}
@@ -516,2 +526,3 @@ placeholder={secondPlaceholder}
         autoFocus={index === 0 && autoFocus}
+        inputRef={this.amPmInput}
         locale={locale}
@@ -518,0 +529,0 @@ onChange={this.onChangeAmPm}

src/TimeInput/AmPm.jsx

@@ -14,3 +14,3 @@ import React from 'react';
   disabled,
-  itemRef,
+  inputRef,
   locale,
@@ -39,7 +39,3 @@ maxTime,
       onChange={onChange}
-      ref={(ref) => {
-        if (itemRef) {
-          itemRef(ref, name);
-        }
-      }}
+      ref={inputRef}
       required={required}
@@ -67,3 +63,3 @@ value={value !== null ? value : ''}
   disabled: PropTypes.bool,
-  itemRef: PropTypes.func,
+  inputRef: PropTypes.func,
   locale: PropTypes.string,
@@ -70,0 +66,0 @@ maxTime: isTime,

src/TimeInput/Hour12Input.jsx

@@ -10,3 +10,3 @@ import React from 'react';
 } from '../shared/dates';
-import { isTime } from '../shared/propTypes';
+import { isRef, isTime } from '../shared/propTypes';
 import { safeMin, safeMax } from '../shared/utils';
@@ -68,3 +68,3 @@
   hour: PropTypes.string,
-  itemRef: PropTypes.func,
+  inputRef: isRef,
   maxTime: isTime,
@@ -71,0 +71,0 @@ minTime: isTime,

src/TimeInput/Hour12Input.spec.jsx

@@ -199,4 +199,4 @@ import React from 'react';
 
-  it('calls itemRef properly', () => {
-    const itemRef = jest.fn();
+  it('calls inputRef properly', () => {
+    const inputRef = jest.fn();
 
@@ -206,8 +206,8 @@ mount(
         {...defaultProps}
-        itemRef={itemRef}
+        inputRef={inputRef}
       />,
     );
 
-    expect(itemRef).toHaveBeenCalled();
-    expect(itemRef).toHaveBeenCalledWith(expect.any(HTMLInputElement), 'hour12');
+    expect(inputRef).toHaveBeenCalled();
+    expect(inputRef).toHaveBeenCalledWith(expect.any(HTMLInputElement));
   });
@@ -214,0 +214,0 @@

src/TimeInput/Hour24Input.jsx

@@ -7,3 +7,3 @@ import React from 'react';
 
-import { isTime } from '../shared/propTypes';
+import { isRef, isTime } from '../shared/propTypes';
 import { safeMin, safeMax } from '../shared/utils';
@@ -36,3 +36,3 @@
   hour: PropTypes.string,
-  itemRef: PropTypes.func,
+  inputRef: isRef,
   maxTime: isTime,
@@ -39,0 +39,0 @@ minTime: isTime,

src/TimeInput/Hour24Input.spec.jsx

@@ -213,4 +213,4 @@ import React from 'react';
 
-  it('calls itemRef properly', () => {
-    const itemRef = jest.fn();
+  it('calls inputRef properly', () => {
+    const inputRef = jest.fn();
 
@@ -220,8 +220,8 @@ mount(
         {...defaultProps}
-        itemRef={itemRef}
+        inputRef={inputRef}
       />,
     );
 
-    expect(itemRef).toHaveBeenCalled();
-    expect(itemRef).toHaveBeenCalledWith(expect.any(HTMLInputElement), 'hour24');
+    expect(inputRef).toHaveBeenCalled();
+    expect(inputRef).toHaveBeenCalledWith(expect.any(HTMLInputElement));
   });
@@ -228,0 +228,0 @@

src/TimeInput/Input.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
 import mergeClassNames from 'merge-class-names';
+import mergeRefs from 'merge-refs';
 import updateInputWidth, { getFontShorthand } from 'update-input-width';
@@ -81,3 +82,3 @@
   disabled,
-  itemRef,
+  inputRef,
   max,
@@ -134,12 +135,3 @@ min,
       placeholder={placeholder}
-      ref={(ref) => {
-        if (ref) {
-          updateInputWidth(ref);
-          updateInputWidthOnFontLoad(ref);
-        }
-
-        if (itemRef) {
-          itemRef(ref, name);
-        }
-      }}
+      ref={mergeRefs(updateInputWidth, updateInputWidthOnFontLoad, inputRef)}
       required={required}
@@ -158,3 +150,3 @@ step={step}
   disabled: PropTypes.bool,
-  itemRef: PropTypes.func,
+  inputRef: PropTypes.func,
   max: PropTypes.number,
@@ -161,0 +153,0 @@ min: PropTypes.number,

src/TimeInput/MinuteInput.jsx

@@ -7,3 +7,3 @@ import React from 'react';
 
-import { isTime } from '../shared/propTypes';
+import { isRef, isTime } from '../shared/propTypes';
 import { safeMin, safeMax } from '../shared/utils';
@@ -41,3 +41,3 @@
   hour: PropTypes.string,
-  itemRef: PropTypes.func,
+  inputRef: isRef,
   maxTime: isTime,
@@ -44,0 +44,0 @@ minTime: isTime,

src/TimeInput/MinuteInput.spec.jsx

@@ -197,4 +197,4 @@ import React from 'react';
 
-  it('calls itemRef properly', () => {
-    const itemRef = jest.fn();
+  it('calls inputRef properly', () => {
+    const inputRef = jest.fn();
 
@@ -204,8 +204,8 @@ mount(
         {...defaultProps}
-        itemRef={itemRef}
+        inputRef={inputRef}
       />,
     );
 
-    expect(itemRef).toHaveBeenCalled();
-    expect(itemRef).toHaveBeenCalledWith(expect.any(HTMLInputElement), 'minute');
+    expect(inputRef).toHaveBeenCalled();
+    expect(inputRef).toHaveBeenCalledWith(expect.any(HTMLInputElement));
   });
@@ -212,0 +212,0 @@

src/TimeInput/SecondInput.jsx

@@ -7,3 +7,3 @@ import React from 'react';
 
-import { isTime } from '../shared/propTypes';
+import { isRef, isTime } from '../shared/propTypes';
 import { safeMin, safeMax } from '../shared/utils';
@@ -42,3 +42,3 @@
   hour: PropTypes.string,
-  itemRef: PropTypes.func,
+  inputRef: isRef,
   maxTime: isTime,
@@ -45,0 +45,0 @@ minTime: isTime,

src/TimeInput/SecondInput.spec.jsx

@@ -197,4 +197,4 @@ import React from 'react';
 
-  it('calls itemRef properly', () => {
-    const itemRef = jest.fn();
+  it('calls inputRef properly', () => {
+    const inputRef = jest.fn();
 
@@ -204,8 +204,8 @@ mount(
         {...defaultProps}
-        itemRef={itemRef}
+        inputRef={inputRef}
       />,
     );
 
-    expect(itemRef).toHaveBeenCalled();
-    expect(itemRef).toHaveBeenCalledWith(expect.any(HTMLInputElement), 'second');
+    expect(inputRef).toHaveBeenCalled();
+    expect(inputRef).toHaveBeenCalledWith(expect.any(HTMLInputElement));
   });
@@ -212,0 +212,0 @@

src/TimePicker.jsx

@@ -55,3 +55,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.closeClock();
@@ -58,0 +60,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

211383

increased by0.57%

Lines of code

5419

increased by0.09%

Worsened metrics

Dependency count

11

increased by10%

Dependency changes

• + Addedmerge-refs@^1.0.0

• + Addedmerge-refs@1.3.0(transitive)

• Updatedupdate-input-width@^1.2.2