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

Comparing version 3.5.0 to 4.0.0

dist/DateTimeRangePicker.js

@@ -12,2 +12,4 @@ "use strict";
 
+var _reactDom = require("react-dom");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -29,4 +31,4 @@
 
-var _excluded = ["calendarClassName", "className", "maxDetail", "onChange", "value"],
-    _excluded2 = ["clockClassName", "className", "maxDetail", "onChange", "value"],
+var _excluded = ["calendarClassName", "className", "maxDetail", "onChange", "portalContainer", "value"],
+    _excluded2 = ["clockClassName", "className", "maxDetail", "onChange", "portalContainer", "value"],
     _excluded3 = ["onChange"];
@@ -44,3 +46,3 @@
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -71,3 +73,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
@@ -82,3 +84,3 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
@@ -109,7 +111,15 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+    _defineProperty(_assertThisInitialized(_this), "wrapper", /*#__PURE__*/(0, _react.createRef)());
+
+    _defineProperty(_assertThisInitialized(_this), "widgetWrapper", /*#__PURE__*/(0, _react.createRef)());
+
     _defineProperty(_assertThisInitialized(_this), "onOutsideAction", function (event) {
-      // Try event.composedPath first to handle clicks inside a Shadow DOM.
+      var _assertThisInitialize = _assertThisInitialized(_this),
+          wrapper = _assertThisInitialize.wrapper,
+          widgetWrapper = _assertThisInitialize.widgetWrapper; // 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)) {
+      if (wrapper.current && !wrapper.current.contains(target) && (!widgetWrapper.current || !widgetWrapper.current.contains(target))) {
         _this.closeWidgets();
@@ -204,3 +214,3 @@ }
       if (openWidgetsOnFocus) {
-        if (event.target.getAttribute('data-select') === 'true') {
+        if (event.target.dataset.select === 'true') {
           return;
@@ -455,2 +465,4 @@ }
     value: function renderCalendar() {
+      var _this3 = this;
+
       var disableCalendar = this.props.disableCalendar;
@@ -468,2 +480,3 @@ var isCalendarOpen = this.state.isCalendarOpen;
           onChange = _this$props4.onChange,
+          portalContainer = _this$props4.portalContainer,
           value = _this$props4.value,
@@ -473,3 +486,17 @@ calendarProps = _objectWithoutProperties(_this$props4, _excluded);
       var className = "".concat(baseClassName, "__calendar");
-      return /*#__PURE__*/_react["default"].createElement(_reactFit["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
+      var classNames = (0, _mergeClassNames["default"])(className, "".concat(className, "--").concat(isCalendarOpen ? 'open' : 'closed'));
+
+      var calendar = /*#__PURE__*/_react["default"].createElement(_reactCalendar["default"], _extends({
+        className: calendarClassName,
+        onChange: function onChange(value) {
+          return _this3.onDateChange(value);
+        },
+        selectRange: true,
+        value: value || null
+      }, calendarProps));
+
+      return portalContainer ? /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react["default"].createElement("div", {
+        ref: this.widgetWrapper,
+        className: classNames
+      }, calendar), portalContainer) : /*#__PURE__*/_react["default"].createElement(_reactFit["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
         ref: function ref(_ref3) {
@@ -480,9 +507,4 @@ if (_ref3 && !isCalendarOpen) {
         },
-        className: (0, _mergeClassNames["default"])(className, "".concat(className, "--").concat(isCalendarOpen ? 'open' : 'closed'))
-      }, /*#__PURE__*/_react["default"].createElement(_reactCalendar["default"], _extends({
-        className: calendarClassName,
-        onChange: this.onDateChange,
-        selectRange: true,
-        value: value || null
-      }, calendarProps))));
+        className: classNames
+      }, calendar));
     }
@@ -504,2 +526,3 @@ }, {
           onChange = _this$props5.onChange,
+          portalContainer = _this$props5.portalContainer,
           value = _this$props5.value,
@@ -509,2 +532,3 @@ clockProps = _objectWithoutProperties(_this$props5, _excluded2);
       var className = "".concat(baseClassName, "__clock");
+      var classNames = (0, _mergeClassNames["default"])(className, "".concat(className, "--").concat(isClockOpen ? 'open' : 'closed'));
 
@@ -516,3 +540,14 @@ var _concat9 = [].concat(value),
       var maxDetailIndex = allViews.indexOf(maxDetail);
-      return /*#__PURE__*/_react["default"].createElement(_reactFit["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
+
+      var clock = /*#__PURE__*/_react["default"].createElement(_reactClock["default"], _extends({
+        className: clockClassName,
+        renderMinuteHand: maxDetailIndex > 0,
+        renderSecondHand: maxDetailIndex > 1,
+        value: valueFrom
+      }, clockProps));
+
+      return portalContainer ? /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react["default"].createElement("div", {
+        ref: this.widgetWrapper,
+        className: classNames
+      }, clock), portalContainer) : /*#__PURE__*/_react["default"].createElement(_reactFit["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
         ref: function ref(_ref4) {
@@ -523,9 +558,4 @@ if (_ref4 && !isClockOpen) {
         },
-        className: (0, _mergeClassNames["default"])(className, "".concat(className, "--").concat(isClockOpen ? 'open' : 'closed'))
-      }, /*#__PURE__*/_react["default"].createElement(_reactClock["default"], _extends({
-        className: clockClassName,
-        renderMinuteHand: maxDetailIndex > 0,
-        renderSecondHand: maxDetailIndex > 1,
-        value: valueFrom
-      }, clockProps))));
+        className: classNames
+      }, clock));
     }
@@ -535,4 +565,2 @@ }, {
     value: function render() {
-      var _this3 = this;
-
       var eventProps = this.eventProps;
@@ -551,9 +579,3 @@ var _this$props6 = this.props,
         onFocus: this.onFocus,
-        ref: function ref(_ref5) {
-          if (!_ref5) {
-            return;
-          }
-
-          _this3.wrapper = _ref5;
-        }
+        ref: this.wrapper
       }), this.renderInputs(), this.renderCalendar(), this.renderClock());
@@ -679,2 +701,3 @@ }
   openWidgetsOnFocus: _propTypes["default"].bool,
+  portalContainer: _propTypes["default"].object,
   rangeDivider: _propTypes["default"].node,
@@ -681,0 +704,0 @@ required: _propTypes["default"].bool,

package.json

 {
   "name": "@wojtekmaj/react-datetimerange-picker",
-  "version": "3.5.0",
+  "version": "4.0.0",
   "description": "A datetime range picker for your React app.",
@@ -41,5 +41,5 @@ "main": "dist/entry.js",
     "prop-types": "^15.6.0",
-    "react-calendar": "^3.3.1",
-    "react-clock": "^3.0.0",
-    "react-datetime-picker": "^3.5.0",
+    "react-calendar": "^3.7.0",
+    "react-clock": "^3.1.0",
+    "react-datetime-picker": "^4.0.0",
     "react-fit": "^1.4.0"
@@ -52,8 +52,9 @@ },
     "@babel/preset-react": "^7.14.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
-    "enzyme": "^3.10.0",
+    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/react": "^12.1.0",
     "eslint": "^8.5.0",
     "eslint-config-wojtekmaj": "^0.6.5",
-    "husky": "^7.0.0",
-    "jest": "^27.0.0",
+    "husky": "^8.0.0",
+    "jest": "^29.0.0",
+    "jest-environment-jsdom": "^29.0.0",
     "less": "^4.0.0",
@@ -67,4 +68,4 @@ "prettier": "^2.5.0",
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.3.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"
   },
@@ -71,0 +72,0 @@ "resolutions": {

README.md

@@ -73,2 +73,6 @@ [![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) ![dependencies](https://img.shields.io/david/wojtekmaj/react-datetimerange-picker.svg) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-datetimerange-picker.svg) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 
+### Next.js and Vite
+
+Next.js and Vite do not allow components from `node_modules` to import styles. You'll need to follow instructions from [Custom styling](#custom-styling) to get going.
+
 ## User guide
@@ -117,2 +121,3 @@
 | openWidgetsOnFocus   | Whether to open the widgets on input focus.                                                                                                                                                                                                                                                                                                  | `true`                  | `false`                                                                                                        |
+| portalContainer      | Element to render the widgets in using portal.                                                                                                                                                                                                                                                                                               | n/a                     | `document.getElementById('my-div')`                                                                            |
 | rangeDivider         | Divider between datetime inputs.                                                                                                                                                                                                                                                                                                             | `"–"`                   | `" to "`                                                                                                       |
@@ -119,0 +124,0 @@ | required             | Whether datetime input should be required.                                                                                                                                                                                                                                                                                                   | `false`                 | `true`                                                                                                         |

src/DateTimeRangePicker.jsx

@@ -1,2 +0,3 @@
-import React, { PureComponent } from 'react';
+import React, { createRef, PureComponent } from 'react';
+import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
@@ -36,2 +37,6 @@ import makeEventProps from 'make-event-props';
 
+  wrapper = createRef();
+
+  widgetWrapper = createRef();
+
   componentDidMount() {
@@ -72,5 +77,12 @@ this.handleOutsideActionListeners();
   onOutsideAction = (event) => {
+    const { wrapper, widgetWrapper } = this;
+
     // 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)) {
+
+    if (
+      wrapper.current &&
+      !wrapper.current.contains(target) &&
+      (!widgetWrapper.current || !widgetWrapper.current.contains(target))
+    ) {
       this.closeWidgets();
@@ -156,3 +168,3 @@ }
     if (openWidgetsOnFocus) {
-      if (event.target.getAttribute('data-select') === 'true') {
+      if (event.target.dataset.select === 'true') {
         return;
@@ -368,2 +380,3 @@ }
       onChange,
+      portalContainer,
       value,
@@ -374,4 +387,25 @@ ...calendarProps
     const className = `${baseClassName}__calendar`;
+    const classNames = mergeClassNames(
+      className,
+      `${className}--${isCalendarOpen ? 'open' : 'closed'}`,
+    );
 
-    return (
+    const calendar = (
+      <Calendar
+        className={calendarClassName}
+        onChange={(value) => this.onDateChange(value)}
+        selectRange
+        value={value || null}
+        {...calendarProps}
+      />
+    );
+
+    return portalContainer ? (
+      createPortal(
+        <div ref={this.widgetWrapper} className={classNames}>
+          {calendar}
+        </div>,
+        portalContainer,
+      )
+    ) : (
       <Fit>
@@ -384,14 +418,5 @@ <div
           }}
-          className={mergeClassNames(
-            className,
-            `${className}--${isCalendarOpen ? 'open' : 'closed'}`,
-          )}
+          className={classNames}
         >
-          <Calendar
-            className={calendarClassName}
-            onChange={this.onDateChange}
-            selectRange
-            value={value || null}
-            {...calendarProps}
-          />
+          {calendar}
         </div>
@@ -415,2 +440,3 @@ </Fit>
       onChange,
+      portalContainer,
       value,
@@ -421,2 +447,7 @@ ...clockProps
     const className = `${baseClassName}__clock`;
+    const classNames = mergeClassNames(
+      className,
+      `${className}--${isClockOpen ? 'open' : 'closed'}`,
+    );
+
     const [valueFrom] = [].concat(value);
@@ -426,3 +457,20 @@
 
-    return (
+    const clock = (
+      <Clock
+        className={clockClassName}
+        renderMinuteHand={maxDetailIndex > 0}
+        renderSecondHand={maxDetailIndex > 1}
+        value={valueFrom}
+        {...clockProps}
+      />
+    );
+
+    return portalContainer ? (
+      createPortal(
+        <div ref={this.widgetWrapper} className={classNames}>
+          {clock}
+        </div>,
+        portalContainer,
+      )
+    ) : (
       <Fit>
@@ -435,11 +483,5 @@ <div
           }}
-          className={mergeClassNames(className, `${className}--${isClockOpen ? 'open' : 'closed'}`)}
+          className={classNames}
         >
-          <Clock
-            className={clockClassName}
-            renderMinuteHand={maxDetailIndex > 0}
-            renderSecondHand={maxDetailIndex > 1}
-            value={valueFrom}
-            {...clockProps}
-          />
+          {clock}
         </div>
@@ -467,9 +509,3 @@ </Fit>
         onFocus={this.onFocus}
-        ref={(ref) => {
-          if (!ref) {
-            return;
-          }
-
-          this.wrapper = ref;
-        }}
+        ref={this.wrapper}
       >
@@ -566,2 +602,3 @@ {this.renderInputs()}
   openWidgetsOnFocus: PropTypes.bool,
+  portalContainer: PropTypes.object,
   rangeDivider: PropTypes.node,
@@ -568,0 +605,0 @@ required: PropTypes.bool,

src/DateTimeRangePicker.spec.jsx

@@ -1,3 +0,3 @@
-import React from 'react';
-import { mount } from 'enzyme';
+import React, { createRef } from 'react';
+import { fireEvent, render, waitForElementToBeRemoved } from '@testing-library/react';
 
@@ -8,8 +8,8 @@ import DateTimeRangePicker from './DateTimeRangePicker';
   it('passes default name to DateTimeInput components', () => {
-    const component = mount(<DateTimeRangePicker />);
+    const { container } = render(<DateTimeRangePicker />);
 
-    const dateTimeInput = component.find('DateTimeInput');
+    const nativeInputs = container.querySelectorAll('input[type="datetime-local"]');
 
-    expect(dateTimeInput.at(0).prop('name')).toBe('datetimerange_from');
-    expect(dateTimeInput.at(1).prop('name')).toBe('datetimerange_to');
+    expect(nativeInputs[0]).toHaveAttribute('name', 'datetimerange_from');
+    expect(nativeInputs[1]).toHaveAttribute('name', 'datetimerange_to');
   });
@@ -20,38 +20,37 @@
 
-    const component = mount(<DateTimeRangePicker name={name} />);
+    const { container } = render(<DateTimeRangePicker name={name} />);
 
-    const dateTimeInput = component.find('DateTimeInput');
+    const nativeInputs = container.querySelectorAll('input[type="datetime-local"]');
 
-    expect(dateTimeInput.at(0).prop('name')).toBe(`${name}_from`);
-    expect(dateTimeInput.at(1).prop('name')).toBe(`${name}_to`);
+    expect(nativeInputs[0]).toHaveAttribute('name', `${name}_from`);
+    expect(nativeInputs[1]).toHaveAttribute('name', `${name}_to`);
   });
 
-  it('passes autoFocus flag to first DateTimeInput component', () => {
+  // See https://github.com/jsdom/jsdom/issues/3041
+  it.skip('passes autoFocus flag to first DateTimeInput component', () => {
     // eslint-disable-next-line jsx-a11y/no-autofocus
-    const component = mount(<DateTimeRangePicker autoFocus />);
+    const { container } = render(<DateTimeRangePicker autoFocus />);
 
-    const dateTimeInput = component.find('DateTimeInput');
+    const customInputs = container.querySelectorAll('input[data-input]');
 
-    expect(dateTimeInput.at(0).prop('autoFocus')).toBeTruthy();
-    expect(dateTimeInput.at(1).prop('autoFocus')).toBe(undefined);
+    expect(customInputs[0]).toHaveAttribute('autofocus');
   });
 
   it('passes disabled flag to DateTimeInput components', () => {
-    const component = mount(<DateTimeRangePicker disabled />);
+    const { container } = render(<DateTimeRangePicker disabled />);
 
-    const dateTimeInput = component.find('DateTimeInput');
+    const nativeInputs = container.querySelectorAll('input[type="datetime-local"]');
 
-    expect(dateTimeInput.at(0).prop('disabled')).toBeTruthy();
-    expect(dateTimeInput.at(1).prop('disabled')).toBeTruthy();
+    expect(nativeInputs[0]).toBeDisabled();
+    expect(nativeInputs[1]).toBeDisabled();
   });
 
   it('passes format to DateTimeInput components', () => {
-    const format = 'y-MM-dd h:mm:ss a';
+    const { container } = render(<DateTimeRangePicker format="ss" />);
 
-    const component = mount(<DateTimeRangePicker format={format} />);
+    const customInputs = container.querySelectorAll('input[data-input]');
 
-    const dateTimeInput = component.find('DateTimeInput');
-
-    expect(dateTimeInput.at(0).prop('format')).toBe(format);
-    expect(dateTimeInput.at(1).prop('format')).toBe(format);
+    expect(customInputs).toHaveLength(2);
+    expect(customInputs[0]).toHaveAttribute('name', 'second');
+    expect(customInputs[1]).toHaveAttribute('name', 'second');
   });
@@ -73,27 +72,49 @@
 
-    const component = mount(<DateTimeRangePicker {...ariaLabelProps} />);
+    const { container } = render(<DateTimeRangePicker {...ariaLabelProps} maxDetail="second" />);
 
-    const calendarButton = component.find('button.react-datetimerange-picker__calendar-button');
-    const clearButton = component.find('button.react-datetimerange-picker__clear-button');
-    const dateTimeInput = component.find('DateTimeInput');
+    const calendarButton = container.querySelector(
+      'button.react-datetimerange-picker__calendar-button',
+    );
+    const clearButton = container.querySelector('button.react-datetimerange-picker__clear-button');
+    const dateTimeInputs = container.querySelectorAll('.react-datetimerange-picker__inputGroup');
 
-    expect(calendarButton.prop('aria-label')).toBe(ariaLabelProps.calendarAriaLabel);
-    expect(clearButton.prop('aria-label')).toBe(ariaLabelProps.clearAriaLabel);
-    expect(dateTimeInput.at(0).prop('amPmAriaLabel')).toBe(ariaLabelProps.amPmAriaLabel);
-    expect(dateTimeInput.at(0).prop('dayAriaLabel')).toBe(ariaLabelProps.dayAriaLabel);
-    expect(dateTimeInput.at(0).prop('hourAriaLabel')).toBe(ariaLabelProps.hourAriaLabel);
-    expect(dateTimeInput.at(0).prop('minuteAriaLabel')).toBe(ariaLabelProps.minuteAriaLabel);
-    expect(dateTimeInput.at(0).prop('monthAriaLabel')).toBe(ariaLabelProps.monthAriaLabel);
-    expect(dateTimeInput.at(0).prop('secondAriaLabel')).toBe(ariaLabelProps.secondAriaLabel);
-    expect(dateTimeInput.at(0).prop('yearAriaLabel')).toBe(ariaLabelProps.yearAriaLabel);
-    expect(dateTimeInput.at(1).prop('amPmAriaLabel')).toBe(ariaLabelProps.amPmAriaLabel);
-    expect(dateTimeInput.at(1).prop('dayAriaLabel')).toBe(ariaLabelProps.dayAriaLabel);
-    expect(dateTimeInput.at(1).prop('hourAriaLabel')).toBe(ariaLabelProps.hourAriaLabel);
-    expect(dateTimeInput.at(1).prop('minuteAriaLabel')).toBe(ariaLabelProps.minuteAriaLabel);
-    expect(dateTimeInput.at(1).prop('monthAriaLabel')).toBe(ariaLabelProps.monthAriaLabel);
-    expect(dateTimeInput.at(1).prop('secondAriaLabel')).toBe(ariaLabelProps.secondAriaLabel);
-    expect(dateTimeInput.at(1).prop('yearAriaLabel')).toBe(ariaLabelProps.yearAriaLabel);
+    const [dateTimeFromInput, dateTimeToInput] = dateTimeInputs;
+
+    const nativeFromInput = dateTimeFromInput.querySelector('input[type="datetime-local"]');
+    const dayFromInput = dateTimeFromInput.querySelector('input[name="day"]');
+    const monthFromInput = dateTimeFromInput.querySelector('input[name="month"]');
+    const yearFromInput = dateTimeFromInput.querySelector('input[name="year"]');
+    const hourFromInput = dateTimeFromInput.querySelector('input[name="hour12"]');
+    const minuteFromInput = dateTimeFromInput.querySelector('input[name="minute"]');
+    const secondFromInput = dateTimeFromInput.querySelector('input[name="second"]');
+
+    const nativeToInput = dateTimeToInput.querySelector('input[type="datetime-local"]');
+    const dayToInput = dateTimeToInput.querySelector('input[name="day"]');
+    const monthToInput = dateTimeToInput.querySelector('input[name="month"]');
+    const yearToInput = dateTimeToInput.querySelector('input[name="year"]');
+    const hourToInput = dateTimeToInput.querySelector('input[name="hour12"]');
+    const minuteToInput = dateTimeToInput.querySelector('input[name="minute"]');
+    const secondToInput = dateTimeToInput.querySelector('input[name="second"]');
+
+    expect(calendarButton).toHaveAttribute('aria-label', ariaLabelProps.calendarAriaLabel);
+    expect(clearButton).toHaveAttribute('aria-label', ariaLabelProps.clearAriaLabel);
+
+    expect(nativeFromInput).toHaveAttribute('aria-label', ariaLabelProps.nativeInputAriaLabel);
+    expect(dayFromInput).toHaveAttribute('aria-label', ariaLabelProps.dayAriaLabel);
+    expect(monthFromInput).toHaveAttribute('aria-label', ariaLabelProps.monthAriaLabel);
+    expect(yearFromInput).toHaveAttribute('aria-label', ariaLabelProps.yearAriaLabel);
+    expect(hourFromInput).toHaveAttribute('aria-label', ariaLabelProps.hourAriaLabel);
+    expect(minuteFromInput).toHaveAttribute('aria-label', ariaLabelProps.minuteAriaLabel);
+    expect(secondFromInput).toHaveAttribute('aria-label', ariaLabelProps.secondAriaLabel);
+
+    expect(nativeToInput).toHaveAttribute('aria-label', ariaLabelProps.nativeInputAriaLabel);
+    expect(dayToInput).toHaveAttribute('aria-label', ariaLabelProps.dayAriaLabel);
+    expect(monthToInput).toHaveAttribute('aria-label', ariaLabelProps.monthAriaLabel);
+    expect(yearToInput).toHaveAttribute('aria-label', ariaLabelProps.yearAriaLabel);
+    expect(hourToInput).toHaveAttribute('aria-label', ariaLabelProps.hourAriaLabel);
+    expect(minuteToInput).toHaveAttribute('aria-label', ariaLabelProps.minuteAriaLabel);
+    expect(secondToInput).toHaveAttribute('aria-label', ariaLabelProps.secondAriaLabel);
   });
 
-  it('passes aria-label props to DateTimeInput components', () => {
+  it('passes placeholder props to DateTimeInput components', () => {
     const placeholderProps = {
@@ -108,18 +129,35 @@ dayPlaceholder: 'dd',
 
-    const component = mount(<DateTimeRangePicker {...placeholderProps} />);
+    const { container } = render(<DateTimeRangePicker {...placeholderProps} maxDetail="second" />);
 
-    const dateTimeInput = component.find('DateTimeInput');
+    const dateTimeInputs = container.querySelectorAll('.react-datetimerange-picker__inputGroup');
 
-    expect(dateTimeInput.at(0).prop('dayPlaceholder')).toBe(placeholderProps.dayPlaceholder);
-    expect(dateTimeInput.at(0).prop('hourPlaceholder')).toBe(placeholderProps.hourPlaceholder);
-    expect(dateTimeInput.at(0).prop('minutePlaceholder')).toBe(placeholderProps.minutePlaceholder);
-    expect(dateTimeInput.at(0).prop('monthPlaceholder')).toBe(placeholderProps.monthPlaceholder);
-    expect(dateTimeInput.at(0).prop('secondPlaceholder')).toBe(placeholderProps.secondPlaceholder);
-    expect(dateTimeInput.at(0).prop('yearPlaceholder')).toBe(placeholderProps.yearPlaceholder);
-    expect(dateTimeInput.at(1).prop('dayPlaceholder')).toBe(placeholderProps.dayPlaceholder);
-    expect(dateTimeInput.at(1).prop('hourPlaceholder')).toBe(placeholderProps.hourPlaceholder);
-    expect(dateTimeInput.at(1).prop('minutePlaceholder')).toBe(placeholderProps.minutePlaceholder);
-    expect(dateTimeInput.at(1).prop('monthPlaceholder')).toBe(placeholderProps.monthPlaceholder);
-    expect(dateTimeInput.at(1).prop('secondPlaceholder')).toBe(placeholderProps.secondPlaceholder);
-    expect(dateTimeInput.at(1).prop('yearPlaceholder')).toBe(placeholderProps.yearPlaceholder);
+    const [dateTimeFromInput, dateTimeToInput] = dateTimeInputs;
+
+    const dayFromInput = dateTimeFromInput.querySelector('input[name="day"]');
+    const monthFromInput = dateTimeFromInput.querySelector('input[name="month"]');
+    const yearFromInput = dateTimeFromInput.querySelector('input[name="year"]');
+    const hourFromInput = dateTimeFromInput.querySelector('input[name="hour12"]');
+    const minuteFromInput = dateTimeFromInput.querySelector('input[name="minute"]');
+    const secondFromInput = dateTimeFromInput.querySelector('input[name="second"]');
+
+    const dayToInput = dateTimeToInput.querySelector('input[name="day"]');
+    const monthToInput = dateTimeToInput.querySelector('input[name="month"]');
+    const yearToInput = dateTimeToInput.querySelector('input[name="year"]');
+    const hourToInput = dateTimeToInput.querySelector('input[name="hour12"]');
+    const minuteToInput = dateTimeToInput.querySelector('input[name="minute"]');
+    const secondToInput = dateTimeToInput.querySelector('input[name="second"]');
+
+    expect(dayFromInput).toHaveAttribute('placeholder', placeholderProps.dayPlaceholder);
+    expect(monthFromInput).toHaveAttribute('placeholder', placeholderProps.monthPlaceholder);
+    expect(yearFromInput).toHaveAttribute('placeholder', placeholderProps.yearPlaceholder);
+    expect(hourFromInput).toHaveAttribute('placeholder', placeholderProps.hourPlaceholder);
+    expect(minuteFromInput).toHaveAttribute('placeholder', placeholderProps.minutePlaceholder);
+    expect(secondFromInput).toHaveAttribute('placeholder', placeholderProps.secondPlaceholder);
+
+    expect(dayToInput).toHaveAttribute('placeholder', placeholderProps.dayPlaceholder);
+    expect(monthToInput).toHaveAttribute('placeholder', placeholderProps.monthPlaceholder);
+    expect(yearToInput).toHaveAttribute('placeholder', placeholderProps.yearPlaceholder);
+    expect(hourToInput).toHaveAttribute('placeholder', placeholderProps.hourPlaceholder);
+    expect(minuteToInput).toHaveAttribute('placeholder', placeholderProps.minutePlaceholder);
+    expect(secondToInput).toHaveAttribute('placeholder', placeholderProps.secondPlaceholder);
   });
@@ -131,8 +169,8 @@
 
-      const component = mount(<DateTimeRangePicker value={value} />);
+      const { container } = render(<DateTimeRangePicker value={value} />);
 
-      const dateTimeInput = component.find('DateTimeInput');
+      const nativeInputs = container.querySelectorAll('input[type="datetime-local"]');
 
-      expect(dateTimeInput.at(0).prop('value')).toBe(value);
-      expect(dateTimeInput.at(1).prop('value')).toBe(undefined);
+      expect(nativeInputs[0]).toHaveValue('2019-01-01T00:00');
+      expect(nativeInputs[1]).toHaveValue('');
     });
@@ -142,10 +180,10 @@
       const value1 = new Date(2019, 0, 1);
-      const value2 = new Date(2019, 6, 1);
+      const value2 = new Date(2019, 6, 1, 12, 30);
 
-      const component = mount(<DateTimeRangePicker value={[value1, value2]} />);
+      const { container } = render(<DateTimeRangePicker value={[value1, value2]} />);
 
-      const dateTimeInput = component.find('DateTimeInput');
+      const nativeInputs = container.querySelectorAll('input[type="datetime-local"]');
 
-      expect(dateTimeInput.at(0).prop('value')).toBe(value1);
-      expect(dateTimeInput.at(1).prop('value')).toBe(value2);
+      expect(nativeInputs[0]).toHaveValue('2019-01-01T00:00');
+      expect(nativeInputs[1]).toHaveValue('2019-07-01T12:30');
     });
@@ -157,7 +195,7 @@ });
 
-    const component = mount(<DateTimeRangePicker className={className} />);
+    const { container } = render(<DateTimeRangePicker className={className} />);
 
-    const wrapperClassName = component.prop('className');
+    const wrapper = container.firstChild;
 
-    expect(wrapperClassName.includes(className)).toBe(true);
+    expect(wrapper).toHaveClass(className);
   });
@@ -168,10 +206,9 @@
 
-    const component = mount(
+    const { container } = render(
       <DateTimeRangePicker calendarClassName={calendarClassName} isCalendarOpen />,
     );
 
-    const calendar = component.find('Calendar');
-    const calendarWrapperClassName = calendar.prop('className');
+    const calendar = container.querySelector('.react-calendar');
 
-    expect(calendarWrapperClassName.includes(calendarClassName)).toBe(true);
+    expect(calendar).toHaveClass(calendarClassName);
   });
@@ -182,136 +219,128 @@
 
-    const component = mount(<DateTimeRangePicker clockClassName={clockClassName} isClockOpen />);
+    const { container } = render(
+      <DateTimeRangePicker clockClassName={clockClassName} isClockOpen />,
+    );
 
-    const clock = component.find('Clock');
-    const calendarWrapperClassName = clock.prop('className');
+    const clock = container.querySelector('.react-clock');
 
-    expect(calendarWrapperClassName.includes(clockClassName)).toBe(true);
+    expect(clock).toHaveClass(clockClassName);
   });
 
   it('renders DateTimeInput components', () => {
-    const component = mount(<DateTimeRangePicker />);
+    const { container } = render(<DateTimeRangePicker />);
 
-    const dateTimeInput = component.find('DateTimeInput');
+    const nativeInputs = container.querySelectorAll('input[type="datetime-local"]');
 
-    expect(dateTimeInput).toHaveLength(2);
+    expect(nativeInputs.length).toBe(2);
   });
 
   it('renders range divider with default divider', () => {
-    const component = mount(<DateTimeRangePicker />);
+    const { container } = render(<DateTimeRangePicker />);
 
-    const rangeDivider = component.find('.react-datetimerange-picker__range-divider');
+    const rangeDivider = container.querySelector('.react-datetimerange-picker__range-divider');
 
-    expect(rangeDivider).toHaveLength(1);
-    expect(rangeDivider.text()).toBe('–');
+    expect(rangeDivider).toBeInTheDocument();
+    expect(rangeDivider).toHaveTextContent('–');
   });
 
   it('renders range divider with custom divider', () => {
-    const component = mount(<DateTimeRangePicker rangeDivider="to" />);
+    const { container } = render(<DateTimeRangePicker rangeDivider="to" />);
 
-    const rangeDivider = component.find('.react-datetimerange-picker__range-divider');
+    const rangeDivider = container.querySelector('.react-datetimerange-picker__range-divider');
 
-    expect(rangeDivider).toHaveLength(1);
-    expect(rangeDivider.text()).toBe('to');
+    expect(rangeDivider).toBeInTheDocument();
+    expect(rangeDivider).toHaveTextContent('to');
   });
 
   it('renders clear button', () => {
-    const component = mount(<DateTimeRangePicker />);
+    const { container } = render(<DateTimeRangePicker />);
 
-    const clearButton = component.find('button.react-datetimerange-picker__clear-button');
+    const clearButton = container.querySelector('button.react-datetimerange-picker__clear-button');
 
-    expect(clearButton).toHaveLength(1);
+    expect(clearButton).toBeInTheDocument();
   });
 
   it('renders calendar button', () => {
-    const component = mount(<DateTimeRangePicker />);
+    const { container } = render(<DateTimeRangePicker />);
 
-    const calendarButton = component.find('button.react-datetimerange-picker__calendar-button');
+    const calendarButton = container.querySelector(
+      'button.react-datetimerange-picker__calendar-button',
+    );
 
-    expect(calendarButton).toHaveLength(1);
+    expect(calendarButton).toBeInTheDocument();
   });
 
   it('renders DateTimeInput and Calendar components when given isCalendarOpen flag', () => {
-    const component = mount(<DateTimeRangePicker isCalendarOpen />);
+    const { container } = render(<DateTimeRangePicker isCalendarOpen />);
 
-    const dateTimeInput = component.find('DateTimeInput');
-    const calendar = component.find('Calendar');
+    const calendar = container.querySelector('.react-calendar');
 
-    expect(dateTimeInput).toHaveLength(2);
-    expect(calendar).toHaveLength(1);
+    expect(calendar).toBeInTheDocument();
   });
 
-  it('renders DateTimeInput and Clock components when given isClockOpen flag', () => {
-    const component = mount(<DateTimeRangePicker isClockOpen />);
+  it('renders Clock component when given isClockOpen flag', () => {
+    const { container } = render(<DateTimeRangePicker isClockOpen />);
 
-    const dateTimeInput = component.find('DateTimeInput');
-    const calendar = component.find('Clock');
+    const clock = container.querySelector('.react-clock');
 
-    expect(dateTimeInput).toHaveLength(2);
-    expect(calendar).toHaveLength(1);
+    expect(clock).toBeInTheDocument();
   });
 
   it('does not render Calendar component when given disableCalendar & isCalendarOpen flags', () => {
-    const component = mount(<DateTimeRangePicker disableCalendar isCalendarOpen />);
+    const { container } = render(<DateTimeRangePicker disableCalendar isCalendarOpen />);
 
-    const dateTimeInput = component.find('DateTimeInput');
-    const calendar = component.find('Calendar');
+    const calendar = container.querySelector('.react-calendar');
 
-    expect(dateTimeInput).toHaveLength(2);
-    expect(calendar).toHaveLength(0);
+    expect(calendar).toBeFalsy();
   });
 
   it('does not render Clock component when given disableClock & isClockOpen flags', () => {
-    const component = mount(<DateTimeRangePicker disableClock isClockOpen />);
+    const { container } = render(<DateTimeRangePicker disableClock isClockOpen />);
 
-    const dateTimeInput = component.find('DateTimeInput');
-    const clock = component.find('Clock');
+    const clock = container.querySelector('.react-clock');
 
-    expect(dateTimeInput).toHaveLength(2);
-    expect(clock).toHaveLength(0);
+    expect(clock).toBeFalsy();
   });
 
   it('opens Calendar component when given isCalendarOpen flag by changing props', () => {
-    const component = mount(<DateTimeRangePicker />);
+    const { container, rerender } = render(<DateTimeRangePicker />);
 
-    const calendar = component.find('Calendar');
+    const calendar = container.querySelector('.react-calendar');
 
-    expect(calendar).toHaveLength(0);
+    expect(calendar).toBeFalsy();
 
-    component.setProps({ isCalendarOpen: true });
-    component.update();
+    rerender(<DateTimeRangePicker isCalendarOpen />);
 
-    const calendar2 = component.find('Calendar');
+    const calendar2 = container.querySelector('.react-calendar');
 
-    expect(calendar2).toHaveLength(1);
+    expect(calendar2).toBeInTheDocument();
   });
 
   it('opens Clock component when given isClockOpen flag by changing props', () => {
-    const component = mount(<DateTimeRangePicker />);
+    const { container, rerender } = render(<DateTimeRangePicker />);
 
-    const calendar = component.find('Clock');
+    const clock = container.querySelector('.react-clock');
 
-    expect(calendar).toHaveLength(0);
+    expect(clock).toBeFalsy();
 
-    component.setProps({ isClockOpen: true });
-    component.update();
+    rerender(<DateTimeRangePicker isClockOpen />);
 
-    const calendar2 = component.find('Clock');
+    const clock2 = container.querySelector('.react-clock');
 
-    expect(calendar2).toHaveLength(1);
+    expect(clock2).toBeInTheDocument();
   });
 
   it('opens Calendar component when clicking on a button', () => {
-    const component = mount(<DateTimeRangePicker />);
+    const { container } = render(<DateTimeRangePicker />);
 
-    const calendar = component.find('Calendar');
-    const button = component.find('button.react-datetimerange-picker__calendar-button');
+    const calendar = container.querySelector('.react-calendar');
+    const button = container.querySelector('button.react-datetimerange-picker__calendar-button');
 
-    expect(calendar).toHaveLength(0);
+    expect(calendar).toBeFalsy();
 
-    button.simulate('click');
-    component.update();
+    fireEvent.click(button);
 
-    const calendar2 = component.find('Calendar');
+    const calendar2 = container.querySelector('.react-calendar');
 
-    expect(calendar2).toHaveLength(1);
+    expect(calendar2).toBeInTheDocument();
   });
@@ -321,63 +350,59 @@
     it('opens Calendar component when focusing on an input inside by default', () => {
-      const component = mount(<DateTimeRangePicker />);
+      const { container } = render(<DateTimeRangePicker />);
 
-      const calendar = component.find('Calendar');
-      const input = component.find('input[name="day"]').first();
+      const calendar = container.querySelector('.react-calendar');
+      const input = container.querySelector('input[name="day"]');
 
-      expect(calendar).toHaveLength(0);
+      expect(calendar).toBeFalsy();
 
-      input.simulate('focus');
-      component.update();
+      fireEvent.focus(input);
 
-      const calendar2 = component.find('Calendar');
+      const calendar2 = container.querySelector('.react-calendar');
 
-      expect(calendar2).toHaveLength(1);
+      expect(calendar2).toBeInTheDocument();
     });
 
     it('opens Calendar component when focusing on an input inside given openWidgetsOnFocus = true', () => {
-      const component = mount(<DateTimeRangePicker openWidgetsOnFocus />);
+      const { container } = render(<DateTimeRangePicker openWidgetsOnFocus />);
 
-      const calendar = component.find('Calendar');
-      const input = component.find('input[name="day"]').first();
+      const calendar = container.querySelector('.react-calendar');
+      const input = container.querySelector('input[name="day"]');
 
-      expect(calendar).toHaveLength(0);
+      expect(calendar).toBeFalsy();
 
-      input.simulate('focus');
-      component.update();
+      fireEvent.focus(input);
 
-      const calendar2 = component.find('Calendar');
+      const calendar2 = container.querySelector('.react-calendar');
 
-      expect(calendar2).toHaveLength(1);
+      expect(calendar2).toBeInTheDocument();
     });
 
     it('does not open Calendar component when focusing on an input inside given openWidgetsOnFocus = false', () => {
-      const component = mount(<DateTimeRangePicker openWidgetsOnFocus={false} />);
+      const { container } = render(<DateTimeRangePicker openWidgetsOnFocus={false} />);
 
-      const calendar = component.find('Calendar');
-      const input = component.find('input[name="day"]').first();
+      const calendar = container.querySelector('.react-calendar');
+      const input = container.querySelector('input[name="day"]');
 
-      expect(calendar).toHaveLength(0);
+      expect(calendar).toBeFalsy();
 
-      input.simulate('focus');
-      component.update();
+      fireEvent.focus(input);
 
-      const calendar2 = component.find('Calendar');
+      const calendar2 = container.querySelector('.react-calendar');
 
-      expect(calendar2).toHaveLength(0);
+      expect(calendar2).toBeFalsy();
     });
 
     it('does not open Calendar component when focusing on a select element', () => {
-      const component = mount(<DateTimeRangePicker format="dd.MMMM.yyyy hh:mm:ss a" />);
+      const { container } = render(<DateTimeRangePicker format="dd.MMMM.yyyy hh:mm:ss a" />);
 
-      const calendar = component.find('Calendar');
-      const select = component.find('select[name="month"]').first();
+      const calendar = container.querySelector('.react-calendar');
+      const select = container.querySelector('select[name="month"]');
 
-      expect(calendar).toHaveLength(0);
+      expect(calendar).toBeFalsy();
 
-      select.simulate('focus');
-      component.update();
+      fireEvent.focus(select);
 
-      const calendar2 = component.find('Calendar');
+      const calendar2 = container.querySelector('.react-calendar');
 
-      expect(calendar2).toHaveLength(0);
+      expect(calendar2).toBeFalsy();
     });
@@ -388,63 +413,59 @@ });
     it('opens Clock component when focusing on an input inside by default', () => {
-      const component = mount(<DateTimeRangePicker />);
+      const { container } = render(<DateTimeRangePicker />);
 
-      const clock = component.find('Clock');
-      const input = component.find('input[name^="hour"]').first();
+      const clock = container.querySelector('.react-clock');
+      const input = container.querySelector('input[name^="hour"]');
 
-      expect(clock).toHaveLength(0);
+      expect(clock).toBeFalsy();
 
-      input.simulate('focus');
-      component.update();
+      fireEvent.focus(input);
 
-      const clock2 = component.find('Clock');
+      const clock2 = container.querySelector('.react-clock');
 
-      expect(clock2).toHaveLength(1);
+      expect(clock2).toBeInTheDocument();
     });
 
     it('opens Clock component when focusing on an input inside given openWidgetsOnFocus = true', () => {
-      const component = mount(<DateTimeRangePicker openWidgetsOnFocus />);
+      const { container } = render(<DateTimeRangePicker openWidgetsOnFocus />);
 
-      const clock = component.find('Clock');
-      const input = component.find('input[name^="hour"]').first();
+      const clock = container.querySelector('.react-clock');
+      const input = container.querySelector('input[name^="hour"]');
 
-      expect(clock).toHaveLength(0);
+      expect(clock).toBeFalsy();
 
-      input.simulate('focus');
-      component.update();
+      fireEvent.focus(input);
 
-      const clock2 = component.find('Clock');
+      const clock2 = container.querySelector('.react-clock');
 
-      expect(clock2).toHaveLength(1);
+      expect(clock2).toBeInTheDocument();
     });
 
     it('does not open Clock component when focusing on an input inside given openWidgetsOnFocus = false', () => {
-      const component = mount(<DateTimeRangePicker openWidgetsOnFocus={false} />);
+      const { container } = render(<DateTimeRangePicker openWidgetsOnFocus={false} />);
 
-      const clock = component.find('Clock');
-      const input = component.find('input[name^="hour"]').first();
+      const clock = container.querySelector('.react-clock');
+      const input = container.querySelector('input[name^="hour"]');
 
-      expect(clock).toHaveLength(0);
+      expect(clock).toBeFalsy();
 
-      input.simulate('focus');
-      component.update();
+      fireEvent.focus(input);
 
-      const clock2 = component.find('Clock');
+      const clock2 = container.querySelector('.react-clock');
 
-      expect(clock2).toHaveLength(0);
+      expect(clock2).toBeFalsy();
     });
 
     it('does not open Clock component when focusing on a select element', () => {
-      const component = mount(<DateTimeRangePicker format="dd.MMMM.yyyy hh:mm:ss a" />);
+      const { container } = render(<DateTimeRangePicker format="dd.MMMM.yyyy hh:mm:ss a" />);
 
-      const clock = component.find('Clock');
-      const select = component.find('select[name="amPm"]').first();
+      const clock = container.querySelector('.react-clock');
+      const select = container.querySelector('select[name="amPm"]');
 
-      expect(clock).toHaveLength(0);
+      expect(clock).toBeFalsy();
 
-      select.simulate('focus');
-      component.update();
+      fireEvent.focus(select);
 
-      const clock2 = component.find('Clock');
+      const clock2 = container.querySelector('.react-clock');
 
-      expect(clock2).toHaveLength(0);
+      expect(clock2).toBeFalsy();
     });
@@ -457,10 +478,7 @@ });
 
-    const component = mount(<DateTimeRangePicker isCalendarOpen />, { attachTo: root });
+    const { container } = render(<DateTimeRangePicker isCalendarOpen />, { attachTo: root });
 
-    const event = document.createEvent('MouseEvent');
-    event.initEvent('mousedown', true, true);
-    document.body.dispatchEvent(event);
-    component.update();
+    fireEvent.mouseDown(document.body);
 
-    expect(component.state('isCalendarOpen')).toBe(false);
+    waitForElementToBeRemoved(() => container.querySelector('.react-calendar'));
   });
@@ -472,10 +490,7 @@
 
-    const component = mount(<DateTimeRangePicker isCalendarOpen />, { attachTo: root });
+    const { container } = render(<DateTimeRangePicker isCalendarOpen />, { attachTo: root });
 
-    const event = document.createEvent('FocusEvent');
-    event.initEvent('focusin', true, true);
-    document.body.dispatchEvent(event);
-    component.update();
+    fireEvent.focusIn(document.body);
 
-    expect(component.state('isCalendarOpen')).toBe(false);
+    waitForElementToBeRemoved(() => container.querySelector('.react-calendar'));
   });
@@ -487,10 +502,7 @@
 
-    const component = mount(<DateTimeRangePicker isCalendarOpen />, { attachTo: root });
+    const { container } = render(<DateTimeRangePicker isCalendarOpen />, { attachTo: root });
 
-    const event = document.createEvent('TouchEvent');
-    event.initEvent('touchstart', true, true);
-    document.body.dispatchEvent(event);
-    component.update();
+    fireEvent.touchStart(document.body);
 
-    expect(component.state('isCalendarOpen')).toBe(false);
+    waitForElementToBeRemoved(() => container.querySelector('.react-calendar'));
   });
@@ -502,10 +514,7 @@
 
-    const component = mount(<DateTimeRangePicker isClockOpen />, { attachTo: root });
+    const { container } = render(<DateTimeRangePicker isClockOpen />, { attachTo: root });
 
-    const event = document.createEvent('MouseEvent');
-    event.initEvent('mousedown', true, true);
-    document.body.dispatchEvent(event);
-    component.update();
+    fireEvent.mouseDown(document.body);
 
-    expect(component.state('isClockOpen')).toBe(false);
+    waitForElementToBeRemoved(() => container.querySelector('.react-clock'));
   });
@@ -517,10 +526,7 @@
 
-    const component = mount(<DateTimeRangePicker isClockOpen />, { attachTo: root });
+    const { container } = render(<DateTimeRangePicker isClockOpen />, { attachTo: root });
 
-    const event = document.createEvent('FocusEvent');
-    event.initEvent('focusin', true, true);
-    document.body.dispatchEvent(event);
-    component.update();
+    fireEvent.focusIn(document.body);
 
-    expect(component.state('isClockOpen')).toBe(false);
+    waitForElementToBeRemoved(() => container.querySelector('.react-clock'));
   });
@@ -532,125 +538,146 @@
 
-    const component = mount(<DateTimeRangePicker isClockOpen />, { attachTo: root });
+    const { container } = render(<DateTimeRangePicker isClockOpen />, { attachTo: root });
 
-    const event = document.createEvent('TouchEvent');
-    event.initEvent('touchstart', true, true);
-    document.body.dispatchEvent(event);
-    component.update();
+    fireEvent.touchStart(document.body);
 
-    expect(component.state('isClockOpen')).toBe(false);
+    waitForElementToBeRemoved(() => container.querySelector('.react-clock'));
   });
 
   it('does not close Calendar component when focused within date inputs', () => {
-    const component = mount(<DateTimeRangePicker isCalendarOpen />);
+    const { container } = render(<DateTimeRangePicker isCalendarOpen />);
 
-    const customInputs = component.find('input[type="number"]');
-    const dayInput = customInputs.at(0);
-    const monthInput = customInputs.at(1);
+    const customInputs = container.querySelectorAll('input[data-input]');
+    const dayInput = customInputs[0];
+    const monthInput = customInputs[1];
 
-    dayInput.simulate('blur');
-    monthInput.simulate('focus');
-    component.update();
+    fireEvent.blur(dayInput);
+    fireEvent.focus(monthInput);
 
-    expect(component.state('isCalendarOpen')).toBe(true);
-    expect(component.state('isClockOpen')).toBe(false);
+    const calendar = container.querySelector('.react-calendar');
+
+    expect(calendar).toBeInTheDocument();
   });
 
   it('does not close Clock component when focused within time inputs', () => {
-    const component = mount(<DateTimeRangePicker isClockOpen />);
+    const { container } = render(<DateTimeRangePicker isClockOpen />);
 
-    const customInputs = component.find('input[type="number"]');
-    const hourInput = customInputs.at(3);
-    const minuteInput = customInputs.at(4);
+    const customInputs = container.querySelectorAll('input[data-input]');
+    const hourInput = customInputs[3];
+    const minuteInput = customInputs[4];
 
-    hourInput.simulate('blur');
-    minuteInput.simulate('focus');
-    component.update();
+    fireEvent.blur(hourInput);
+    fireEvent.focus(minuteInput);
 
-    expect(component.state('isCalendarOpen')).toBe(false);
-    expect(component.state('isClockOpen')).toBe(true);
+    waitForElementToBeRemoved(() => container.querySelector('.react-calendar'));
+
+    const clock = container.querySelector('.react-clock');
+
+    expect(clock).toBeInTheDocument();
   });
 
   it('closes Clock when Calendar is opened by a click on the calendar icon', () => {
-    const component = mount(<DateTimeRangePicker isClockOpen />);
+    const { container } = render(<DateTimeRangePicker isClockOpen />);
 
-    const clock = component.find('Clock');
-    const button = component.find('button.react-datetimerange-picker__calendar-button');
+    const clock = container.querySelector('.react-clock');
+    const button = container.querySelector('button.react-datetimerange-picker__calendar-button');
 
-    expect(clock).toHaveLength(1);
+    expect(clock).toBeInTheDocument();
 
-    button.simulate('click');
-    component.update();
+    fireEvent.click(button);
 
-    const clock2 = component.find('Clock');
-
-    expect(clock2).toHaveLength(1);
+    waitForElementToBeRemoved(() => container.querySelector('.react-clock'));
   });
 
   it('closes Calendar when calling internal onChange by default', () => {
-    const component = mount(<DateTimeRangePicker isCalendarOpen />);
+    const instance = createRef();
 
-    const { onChange } = component.instance();
+    const { container } = render(<DateTimeRangePicker isCalendarOpen ref={instance} />);
 
+    const { onChange } = instance.current;
+
     onChange(new Date());
 
-    expect(component.state('isCalendarOpen')).toBe(false);
+    waitForElementToBeRemoved(() => container.querySelector('.react-calendar'));
   });
 
   it('does not close Calendar when calling internal onChange with prop closeWidgets = false', () => {
-    const component = mount(<DateTimeRangePicker closeWidgets={false} isCalendarOpen />);
+    const instance = createRef();
 
-    const { onChange } = component.instance();
+    const { container } = render(
+      <DateTimeRangePicker closeWidgets={false} isCalendarOpen ref={instance} />,
+    );
 
+    const { onChange } = instance.current;
+
     onChange(new Date());
 
-    expect(component.state('isCalendarOpen')).toBe(true);
+    const calendar = container.querySelector('.react-calendar');
+
+    expect(calendar).toBeInTheDocument();
   });
 
   it('does not close Calendar when calling internal onChange with closeWidgets = false', () => {
-    const component = mount(<DateTimeRangePicker isCalendarOpen />);
+    const instance = createRef();
 
-    const { onChange } = component.instance();
+    const { container } = render(<DateTimeRangePicker isCalendarOpen ref={instance} />);
 
+    const { onChange } = instance.current;
+
     onChange(new Date(), false);
 
-    expect(component.state('isCalendarOpen')).toBe(true);
+    const calendar = container.querySelector('.react-calendar');
+
+    expect(calendar).toBeInTheDocument();
   });
 
   it('closes Clock when calling internal onChange by default', () => {
-    const component = mount(<DateTimeRangePicker isClockOpen />);
+    const instance = createRef();
 
-    const { onChange } = component.instance();
+    const { container } = render(<DateTimeRangePicker isClockOpen ref={instance} />);
 
+    const { onChange } = instance.current;
+
     onChange(new Date());
 
-    expect(component.state('isClockOpen')).toBe(false);
+    waitForElementToBeRemoved(() => container.querySelector('.react-clock'));
   });
 
   it('does not close Clock when calling internal onChange with prop closeWidgets = false', () => {
-    const component = mount(<DateTimeRangePicker closeWidgets={false} isClockOpen />);
+    const instance = createRef();
 
-    const { onChange } = component.instance();
+    const { container } = render(
+      <DateTimeRangePicker closeWidgets={false} isClockOpen ref={instance} />,
+    );
 
+    const { onChange } = instance.current;
+
     onChange(new Date());
 
-    expect(component.state('isClockOpen')).toBe(true);
+    const clock = container.querySelector('.react-clock');
+
+    expect(clock).toBeInTheDocument();
   });
 
   it('does not close Clock when calling internal onChange with closeWidgets = false', () => {
-    const component = mount(<DateTimeRangePicker isClockOpen />);
+    const instance = createRef();
 
-    const { onChange } = component.instance();
+    const { container } = render(<DateTimeRangePicker isClockOpen ref={instance} />);
 
+    const { onChange } = instance.current;
+
     onChange(new Date(), false);
 
-    expect(component.state('isClockOpen')).toBe(true);
+    const clock = container.querySelector('.react-clock');
+
+    expect(clock).toBeInTheDocument();
   });
 
   it('calls onChange callback when calling internal onChange', () => {
+    const instance = createRef();
     const nextValue = new Date(2019, 0, 1);
     const onChange = jest.fn();
 
-    const component = mount(<DateTimeRangePicker onChange={onChange} />);
+    render(<DateTimeRangePicker onChange={onChange} ref={instance} />);
 
-    const { onChange: onChangeInternal } = component.instance();
+    const { onChange: onChangeInternal } = instance.current;
 
@@ -663,2 +690,3 @@ onChangeInternal(nextValue);
   it('calls onChange callback with merged new date & old time when calling internal onDateChange', () => {
+    const instance = createRef();
     const hours = 21;
@@ -674,7 +702,5 @@ const minutes = 40;
 
-    const component = mount(
-      <DateTimeRangePicker onChange={onChange} value={[valueFrom, valueTo]} />,
-    );
+    render(<DateTimeRangePicker onChange={onChange} value={[valueFrom, valueTo]} ref={instance} />);
 
-    const { onDateChange } = component.instance();
+    const { onDateChange } = instance.current;
 
@@ -690,2 +716,3 @@ onDateChange([nextValueFrom, valueTo]);
   it('calls onChange callback with merged new date & old time when calling internal onDateChange', () => {
+    const instance = createRef();
     const hours = 21;
@@ -701,7 +728,5 @@ const minutes = 40;
 
-    const component = mount(
-      <DateTimeRangePicker onChange={onChange} value={[valueFrom, valueTo]} />,
-    );
+    render(<DateTimeRangePicker onChange={onChange} value={[valueFrom, valueTo]} ref={instance} />);
 
-    const { onDateChange } = component.instance();
+    const { onDateChange } = instance.current;
 
@@ -717,10 +742,11 @@ onDateChange([valueFrom, nextValueTo]);
   it('calls onChange callback when calling internal onChange', () => {
+    const instance = createRef();
     const nextValue = new Date(2019, 0, 1, 21, 40, 11, 458);
     const onChange = jest.fn();
 
-    const component = mount(
-      <DateTimeRangePicker onChange={onChange} value={new Date(2018, 6, 17)} />,
+    render(
+      <DateTimeRangePicker onChange={onChange} value={new Date(2018, 6, 17)} ref={instance} />,
     );
 
-    const { onChange: onChangeInternal } = component.instance();
+    const { onChange: onChangeInternal } = instance.current;
 
@@ -735,11 +761,10 @@ onChangeInternal(nextValue);
 
-    const component = mount(<DateTimeRangePicker onChange={onChange} />);
+    const { container } = render(<DateTimeRangePicker onChange={onChange} />);
 
-    const calendar = component.find('Calendar');
-    const button = component.find('button.react-datetimerange-picker__clear-button');
+    const calendar = container.querySelector('.react-calendar');
+    const button = container.querySelector('button.react-datetimerange-picker__clear-button');
 
-    expect(calendar).toHaveLength(0);
+    expect(calendar).toBeFalsy();
 
-    button.simulate('click');
-    component.update();
+    fireEvent.click(button);
 
@@ -751,6 +776,8 @@ expect(onChange).toHaveBeenCalledWith(null);
     it('calls onChange properly given no initial value', () => {
-      const component = mount(<DateTimeRangePicker />);
+      const instance = createRef();
 
-      const componentInstance = component.instance();
+      render(<DateTimeRangePicker ref={instance} />);
 
+      const componentInstance = instance.current;
+
       const onChangeSpy = jest.spyOn(componentInstance, 'onChange');
@@ -766,7 +793,8 @@
     it('calls onChange properly given single initial value', () => {
+      const instance = createRef();
       const value = new Date(2018, 0, 1);
 
-      const component = mount(<DateTimeRangePicker value={value} />);
+      render(<DateTimeRangePicker value={value} ref={instance} />);
 
-      const componentInstance = component.instance();
+      const componentInstance = instance.current;
 
@@ -783,2 +811,3 @@ const onChangeSpy = jest.spyOn(componentInstance, 'onChange');
     it('calls onChange properly given initial value as an array', () => {
+      const instance = createRef();
       const valueFrom = new Date(2018, 0, 1);
@@ -788,5 +817,5 @@ const valueTo = new Date(2018, 6, 1);
 
-      const component = mount(<DateTimeRangePicker value={value} />);
+      render(<DateTimeRangePicker value={value} ref={instance} />);
 
-      const componentInstance = component.instance();
+      const componentInstance = instance.current;
 
@@ -805,6 +834,8 @@ const onChangeSpy = jest.spyOn(componentInstance, 'onChange');
     it('calls onChange properly given no initial value', () => {
-      const component = mount(<DateTimeRangePicker />);
+      const instance = createRef();
 
-      const componentInstance = component.instance();
+      render(<DateTimeRangePicker ref={instance} />);
 
+      const componentInstance = instance.current;
+
       const onChangeSpy = jest.spyOn(componentInstance, 'onChange');
@@ -820,7 +851,8 @@
     it('calls onChange properly given single initial value', () => {
+      const instance = createRef();
       const value = new Date(2018, 0, 1);
 
-      const component = mount(<DateTimeRangePicker value={value} />);
+      render(<DateTimeRangePicker value={value} ref={instance} />);
 
-      const componentInstance = component.instance();
+      const componentInstance = instance.current;
 
@@ -837,2 +869,3 @@ const onChangeSpy = jest.spyOn(componentInstance, 'onChange');
     it('calls onChange properly given initial value as an array', () => {
+      const instance = createRef();
       const valueFrom = new Date(2018, 0, 1);
@@ -842,5 +875,5 @@ const valueTo = new Date(2018, 6, 1);
 
-      const component = mount(<DateTimeRangePicker value={value} />);
+      render(<DateTimeRangePicker value={value} ref={instance} />);
 
-      const componentInstance = component.instance();
+      const componentInstance = instance.current;
 
@@ -847,0 +880,0 @@ const onChangeSpy = jest.spyOn(componentInstance, 'onChange');

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

118288

increased by4.55%

Lines of code

1881

increased by2.96%

Number of lines in readme file

150

increased by3.45%

Worsened metrics

Dev dependency count

17

increased by6.25%

Dependency changes

• + Addedclsx@2.1.1(transitive)

• + Addedget-user-locale@2.3.2(transitive)

• + Addedmap-age-cleaner@0.1.3(transitive)

• + Addedmem@8.1.1(transitive)

• + Addedmimic-fn@3.1.0(transitive)

• + Addedp-defer@1.0.0(transitive)

• + Addedreact-calendar@4.0.04.8.0(transitive)

• + Addedreact-clock@4.6.0(transitive)

• + Addedreact-date-picker@9.3.0(transitive)

• + Addedreact-datetime-picker@4.2.1(transitive)

• + Addedreact-time-picker@5.2.0(transitive)

• + Addedwarning@4.0.3(transitive)

• - Removed@types/prop-types@15.7.13(transitive)

• - Removed@types/react@18.3.12(transitive)

• - Removed@types/react-calendar@3.9.0(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removedmerge-refs@1.3.0(transitive)

• - Removedreact-date-picker@8.4.0(transitive)

• - Removedreact-datetime-picker@3.5.0(transitive)

• - Removedreact-time-picker@4.5.0(transitive)

• Updatedreact-calendar@^3.7.0

• Updatedreact-clock@^3.1.0

• Updatedreact-datetime-picker@^4.0.0