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

Comparing version 2.2.0 to 2.3.0

dist/DateRangePicker.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -25,10 +25,10 @@ var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes2 = require("./shared/propTypes");
+
 var _utils = require("./shared/utils");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
-
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -42,2 +42,4 @@
 
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
@@ -61,2 +63,4 @@
 
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
@@ -66,7 +70,7 @@
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 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; }
 
 var baseClassName = 'react-daterange-picker';
+var outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];
+var allViews = ['century', 'decade', 'year', 'month'];
 
@@ -91,5 +95,5 @@ var DateRangePicker =
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {});
+    _defineProperty(_assertThisInitialized(_this), "state", {});
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onOutsideAction", function (event) {
+    _defineProperty(_assertThisInitialized(_this), "onOutsideAction", function (event) {
       if (_this.wrapper && !_this.wrapper.contains(event.target)) {
@@ -100,3 +104,3 @@ _this.closeCalendar();
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "openCalendar", function () {
+    _defineProperty(_assertThisInitialized(_this), "openCalendar", function () {
       _this.setState({
@@ -107,3 +111,3 @@ isOpen: true
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "closeCalendar", function () {
+    _defineProperty(_assertThisInitialized(_this), "closeCalendar", function () {
       _this.setState(function (prevState) {
@@ -120,3 +124,3 @@ if (!prevState.isOpen) {
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "toggleCalendar", function () {
+    _defineProperty(_assertThisInitialized(_this), "toggleCalendar", function () {
       _this.setState(function (prevState) {
@@ -129,3 +133,3 @@ return {
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChange", function (value) {
+    _defineProperty(_assertThisInitialized(_this), "onChange", function (value) {
       var closeCalendar = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
@@ -144,3 +148,3 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChangeFrom", function (valueFrom) {
+    _defineProperty(_assertThisInitialized(_this), "onChangeFrom", function (valueFrom) {
       var closeCalendar = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
@@ -156,3 +160,3 @@ var value = _this.props.value;
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChangeTo", function (valueTo) {
+    _defineProperty(_assertThisInitialized(_this), "onChangeTo", function (valueTo) {
       var closeCalendar = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
@@ -168,3 +172,3 @@ var value = _this.props.value;
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onFocus", function (event) {
+    _defineProperty(_assertThisInitialized(_this), "onFocus", function (event) {
       var _this$props = _this.props,
@@ -186,7 +190,7 @@ disabled = _this$props.disabled,
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "stopPropagation", function (event) {
+    _defineProperty(_assertThisInitialized(_this), "stopPropagation", function (event) {
       return event.stopPropagation();
     });
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "clear", function () {
+    _defineProperty(_assertThisInitialized(_this), "clear", function () {
       return _this.onChange(null);
@@ -201,4 +205,3 @@ });
     value: function componentDidMount() {
-      document.addEventListener('mousedown', this.onOutsideAction);
-      document.addEventListener('focusin', this.onOutsideAction);
+      this.handleOutsideActionListeners();
     }
@@ -214,2 +217,3 @@ }, {
       if (isOpen !== prevState.isOpen) {
+        this.handleOutsideActionListeners();
         (0, _utils.callIfDefined)(isOpen ? onCalendarOpen : onCalendarClose);
@@ -221,21 +225,39 @@ }
     value: function componentWillUnmount() {
-      document.removeEventListener('mousedown', this.onOutsideAction);
-      document.removeEventListener('focusin', this.onOutsideAction);
+      this.handleOutsideActionListeners(false);
     }
   }, {
+    key: "handleOutsideActionListeners",
+    value: function handleOutsideActionListeners(shouldListen) {
+      var _this2 = this;
+
+      var isOpen = this.state.isOpen;
+      var shouldListenWithFallback = typeof shouldListen !== 'undefined' ? shouldListen : isOpen;
+      var fnName = shouldListenWithFallback ? 'addEventListener' : 'removeEventListener';
+      outsideActionEvents.forEach(function (eventName) {
+        return document[fnName](eventName, _this2.onOutsideAction);
+      });
+    }
+  }, {
     key: "renderInputs",
     value: function renderInputs() {
       var _this$props3 = this.props,
+          calendarAriaLabel = _this$props3.calendarAriaLabel,
           calendarIcon = _this$props3.calendarIcon,
+          clearAriaLabel = _this$props3.clearAriaLabel,
           clearIcon = _this$props3.clearIcon,
+          dayAriaLabel = _this$props3.dayAriaLabel,
+          disableCalendar = _this$props3.disableCalendar,
           disabled = _this$props3.disabled,
           format = _this$props3.format,
           locale = _this$props3.locale,
+          maxDate = _this$props3.maxDate,
           maxDetail = _this$props3.maxDetail,
-          maxDate = _this$props3.maxDate,
           minDate = _this$props3.minDate,
+          monthAriaLabel = _this$props3.monthAriaLabel,
           name = _this$props3.name,
+          nativeInputAriaLabel = _this$props3.nativeInputAriaLabel,
           required = _this$props3.required,
           showLeadingZeros = _this$props3.showLeadingZeros,
-          value = _this$props3.value;
+          value = _this$props3.value,
+          yearAriaLabel = _this$props3.yearAriaLabel;
       var isOpen = this.state.isOpen;
@@ -248,3 +270,10 @@
 
-      var commonProps = {
+      var ariaLabelProps = {
+        dayAriaLabel: dayAriaLabel,
+        monthAriaLabel: monthAriaLabel,
+        nativeInputAriaLabel: nativeInputAriaLabel,
+        yearAriaLabel: yearAriaLabel
+      };
+
+      var commonProps = _objectSpread({}, ariaLabelProps, {
         className: "".concat(baseClassName, "__inputGroup"),
@@ -260,6 +289,7 @@ disabled: disabled,
         showLeadingZeros: showLeadingZeros
-      };
-      return _react.default.createElement("div", {
+      });
+
+      return _react["default"].createElement("div", {
         className: "".concat(baseClassName, "__wrapper")
-      }, _react.default.createElement(_DateInput.default, _extends({}, commonProps, {
+      }, _react["default"].createElement(_DateInput["default"], _extends({}, commonProps, {
         name: "".concat(name, "_from"),
@@ -269,3 +299,5 @@ onChange: this.onChangeFrom,
         value: valueFrom
-      })), "\u2013", _react.default.createElement(_DateInput.default, _extends({}, commonProps, {
+      })), _react["default"].createElement("span", {
+        className: "".concat(baseClassName, "__range-divider")
+      }, "\u2013"), _react["default"].createElement(_DateInput["default"], _extends({}, commonProps, {
         name: "".concat(name, "_to"),
@@ -275,3 +307,4 @@ onChange: this.onChangeTo,
         value: valueTo
-      })), clearIcon !== null && _react.default.createElement("button", {
+      })), clearIcon !== null && _react["default"].createElement("button", {
+        "aria-label": clearAriaLabel,
         className: "".concat(baseClassName, "__clear-button ").concat(baseClassName, "__button"),
@@ -282,3 +315,4 @@ disabled: disabled,
         type: "button"
-      }, clearIcon), calendarIcon !== null && _react.default.createElement("button", {
+      }, clearIcon), calendarIcon !== null && !disableCalendar && _react["default"].createElement("button", {
+        "aria-label": calendarAriaLabel,
         className: "".concat(baseClassName, "__calendar-button ").concat(baseClassName, "__button"),
@@ -295,5 +329,6 @@ disabled: disabled,
     value: function renderCalendar() {
+      var disableCalendar = this.props.disableCalendar;
       var isOpen = this.state.isOpen;
 
-      if (isOpen === null) {
+      if (isOpen === null || disableCalendar) {
         return null;
@@ -310,5 +345,5 @@ }
       var className = "".concat(baseClassName, "__calendar");
-      return _react.default.createElement(_reactFit.default, null, _react.default.createElement("div", {
-        className: (0, _mergeClassNames.default)(className, "".concat(className, "--").concat(isOpen ? 'open' : 'closed'))
-      }, _react.default.createElement(_entry.default, _extends({
+      return _react["default"].createElement(_reactFit["default"], null, _react["default"].createElement("div", {
+        className: (0, _mergeClassNames["default"])(className, "".concat(className, "--").concat(isOpen ? 'open' : 'closed'))
+      }, _react["default"].createElement(_entry["default"], _extends({
         className: calendarClassName,
@@ -323,3 +358,3 @@ onChange: this.onChange,
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
@@ -330,4 +365,4 @@ var _this$props5 = this.props,
       var isOpen = this.state.isOpen;
-      return _react.default.createElement("div", _extends({
-        className: (0, _mergeClassNames.default)(baseClassName, "".concat(baseClassName, "--").concat(isOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className)
+      return _react["default"].createElement("div", _extends({
+        className: (0, _mergeClassNames["default"])(baseClassName, "".concat(baseClassName, "--").concat(isOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className)
       }, this.eventProps, {
@@ -340,3 +375,3 @@ onFocus: this.onFocus,
 
-          _this2.wrapper = _ref;
+          _this3.wrapper = _ref;
         }
@@ -348,3 +383,3 @@ }), this.renderInputs(), this.renderCalendar());
     get: function get() {
-      return (0, _makeEventProps.default)(this.props);
+      return (0, _makeEventProps["default"])(this.props);
     }
@@ -368,13 +403,15 @@ }], [{
 
-exports.default = DateRangePicker;
+exports["default"] = DateRangePicker;
+var iconProps = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: 19,
+  height: 19,
+  viewBox: '0 0 19 19',
+  stroke: 'black',
+  strokeWidth: 2
+};
 
-var CalendarIcon = _react.default.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "19",
-  height: "19",
-  viewBox: "0 0 19 19"
-}, _react.default.createElement("g", {
-  stroke: "black",
-  strokeWidth: "2"
-}, _react.default.createElement("rect", {
+var CalendarIcon = _react["default"].createElement("svg", _extends({}, iconProps, {
+  className: "".concat(baseClassName, "__calendar-button__icon ").concat(baseClassName, "__button__icon")
+}), _react["default"].createElement("rect", {
   width: "15",
@@ -385,3 +422,3 @@ height: "15",
   fill: "none"
-}), _react.default.createElement("line", {
+}), _react["default"].createElement("line", {
   x1: "6",
@@ -391,3 +428,3 @@ y1: "0",
   y2: "4"
-}), _react.default.createElement("line", {
+}), _react["default"].createElement("line", {
   x1: "13",
@@ -397,13 +434,7 @@ y1: "0",
   y2: "4"
-})));
+}));
 
-var ClearIcon = _react.default.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "19",
-  height: "19",
-  viewBox: "0 0 19 19"
-}, _react.default.createElement("g", {
-  stroke: "black",
-  strokeWidth: "2"
-}, _react.default.createElement("line", {
+var ClearIcon = _react["default"].createElement("svg", _extends({}, iconProps, {
+  className: "".concat(baseClassName, "__clear-button__icon ").concat(baseClassName, "__button__icon")
+}), _react["default"].createElement("line", {
   x1: "4",
@@ -413,3 +444,3 @@ y1: "4",
   y2: "15"
-}), _react.default.createElement("line", {
+}), _react["default"].createElement("line", {
   x1: "15",
@@ -419,3 +450,3 @@ y1: "4",
   y2: "15"
-})));
+}));
 
@@ -428,16 +459,34 @@ DateRangePicker.defaultProps = {
 };
-DateRangePicker.propTypes = _objectSpread({}, _entry.default.propTypes, {
-  calendarClassName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-  calendarIcon: _propTypes.default.node,
-  className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-  clearIcon: _propTypes.default.node,
-  disabled: _propTypes.default.bool,
-  format: _propTypes.default.string,
-  isOpen: _propTypes.default.bool,
-  name: _propTypes.default.string,
-  onCalendarClose: _propTypes.default.func,
-  onCalendarOpen: _propTypes.default.func,
-  required: _propTypes.default.bool,
-  showLeadingZeros: _propTypes.default.bool
-});
+
+var isValue = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].instanceOf(Date)]);
+
+DateRangePicker.propTypes = {
+  calendarAriaLabel: _propTypes["default"].string,
+  calendarClassName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
+  calendarIcon: _propTypes["default"].node,
+  className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
+  clearAriaLabel: _propTypes["default"].string,
+  clearIcon: _propTypes["default"].node,
+  dayAriaLabel: _propTypes["default"].string,
+  disableCalendar: _propTypes["default"].bool,
+  disabled: _propTypes["default"].bool,
+  format: _propTypes["default"].string,
+  isOpen: _propTypes["default"].bool,
+  locale: _propTypes["default"].string,
+  maxDate: _propTypes2.isMaxDate,
+  maxDetail: _propTypes["default"].oneOf(allViews),
+  minDate: _propTypes2.isMinDate,
+  monthAriaLabel: _propTypes["default"].string,
+  name: _propTypes["default"].string,
+  nativeInputAriaLabel: _propTypes["default"].string,
+  onCalendarClose: _propTypes["default"].func,
+  onCalendarOpen: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
+  onFocus: _propTypes["default"].func,
+  required: _propTypes["default"].bool,
+  returnValue: _propTypes["default"].oneOf(['start', 'end', 'range']),
+  showLeadingZeros: _propTypes["default"].bool,
+  value: _propTypes["default"].oneOfType([isValue, _propTypes["default"].arrayOf(isValue)]),
+  yearAriaLabel: _propTypes["default"].string
+};
 (0, _reactLifecyclesCompat.polyfill)(DateRangePicker);

dist/entry.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -15,7 +15,7 @@ require("react-calendar/dist/Calendar.css");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 // File is created during build phase and placed in dist directory
 // eslint-disable-next-line import/no-unresolved
-var _default = _DateRangePicker.default;
-exports.default = _default;
+var _default = _DateRangePicker["default"];
+exports["default"] = _default;

dist/entry.nostyle.js

@@ -6,9 +6,9 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
 var _DateRangePicker = _interopRequireDefault(require("./DateRangePicker"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = _DateRangePicker.default;
-exports.default = _default;
+var _default = _DateRangePicker["default"];
+exports["default"] = _default;

package.json

 {
   "name": "@wojtekmaj/react-daterange-picker",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "A date range picker for your React app.",
@@ -8,3 +8,3 @@ "main": "dist/entry.js",
   "scripts": {
-    "build": "yarn run build-js && yarn run copy-styles && yarn run build-styles",
+    "build": "yarn build-js && yarn copy-styles && yarn build-styles",
     "build-js": "babel src -d dist --ignore **/__tests__",
@@ -14,7 +14,7 @@ "build-styles": "lessc ./dist/DateRangePicker.less ./dist/DateRangePicker.css",
     "copy-styles": "node ./copy-styles.js",
-    "prepublishOnly": "yarn run clean && yarn run build",
-    "test": "yarn run test-eslint && yarn run test-jest",
-    "test-eslint": "eslint sample/ src/ test/ --ext .jsx,.js",
-    "test-jest": "jest",
-    "test-jest-coverage": "jest --coverage"
+    "jest": "jest",
+    "jest-coverage": "jest --coverage",
+    "lint": "eslint sample/ src/ test/ --ext .jsx,.js",
+    "prepublishOnly": "yarn clean && yarn build",
+    "test": "yarn lint && yarn jest"
   },
@@ -50,3 +50,3 @@ "jest": {
     "react-calendar": "^2.18.0",
-    "react-date-picker": "^7.5.0",
+    "react-date-picker": "^7.7.0",
     "react-fit": "^1.0.3",
@@ -56,17 +56,17 @@ "react-lifecycles-compat": "^3.0.4"
   "devDependencies": {
-    "@babel/cli": "^7.1.0",
-    "@babel/core": "^7.1.0",
-    "@babel/plugin-proposal-class-properties": "^7.1.0",
-    "@babel/preset-env": "^7.1.0",
+    "@babel/cli": "^7.5.0",
+    "@babel/core": "^7.5.0",
+    "@babel/plugin-proposal-class-properties": "^7.5.0",
+    "@babel/preset-env": "^7.5.0",
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^10.0.0",
     "babel-jest": "^24.0.0",
-    "enzyme": "^3.8.0",
-    "enzyme-adapter-react-16": "^1.7.1",
-    "eslint": "^5.11.0",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
+    "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-react": "^7.11.1",
-    "jest": "^24.0.0",
+    "eslint-plugin-import": "^2.18.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-react": "^7.14.2",
+    "jest": "^24.8.0",
     "less": "^3.8.1",
@@ -73,0 +73,0 @@ "react": "^16.7.0",

README.md

@@ -84,23 +84,30 @@ ![downloads](https://img.shields.io/npm/dt/@wojtekmaj/react-daterange-picker.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-daterange-picker/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-daterange-picker.svg
 
-|Prop name|Description|Example values|
-|----|----|----|
-|calendarClassName|Defines class name(s) that will be added along with "react-calendar" to the main React-Calendar `<div>` element.|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
-|calendarIcon|Defines the content of the calendar button. Setting the value explicitly to `null` will hide the icon.|<ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li></ul>|
-|className|Defines class name(s) that will be added along with "react-daterange-picker" to the main React-DateRange-Picker `<div>` element.|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
-|clearIcon|Defines the content of the clear button. Setting the value explicitly to `null` will hide the icon.|<ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li></ul>|
-|disabled|Defines whether the date range picker should be disabled. Defaults to false.|`true`|
-|format|Defines input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `y`, `M`, `MM`, `d`, `DD`|`"y-MM-DD"`|
-|isOpen|Defines whether the calendar should be opened. Defaults to false.|`true`|
-|locale|Defines which locale should be used by the date range picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). Defaults to user's browser settings.|`"hu-HU"`|
-|maxDate|Defines maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-DateRange-Picker will ensure that no later date is selected.|Date: `new Date()`|
-|maxDetail|Defines the most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be "month", "year", "decade" or "century". Defaults to "month".|`"month"`|
-|minDate|Defines minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateRange-Picker will ensure that no earlier date is selected.|Date: `new Date()`|
-|minDetail|Defines the least detailed calendar view that the user shall see. Can be "month", "year", "decade" or "century". Defaults to "century".|`"century"`|
-|name|Defines input name prefix. Date from/Date to fields will be named "yourprefix_from" and "yourprefix_to" respectively. Defaults to "daterange".|`"myCustomName"`|
-|onCalendarClose|Function called when the calendar closes.|`() => alert('Calendar closed')`|
-|onCalendarOpen|Function called when the calendar opens.|`() => alert('Calendar opened')`|
-|onChange|Function called when the user clicks an item on the most detailed view available.|`(value) => alert('New date is: ', value)`|
-|required|Defines whether date input should be required. Defaults to false.|`true`|
-|showLeadingZeros|Defines whether leading zeros should be rendered in date inputs. Defaults to false.|`true`|
-|value|Defines the value of the input.|<ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li></ul>|
+|Prop name|Description|Default value|Example values|
+|----|----|----|----|
+|calendarAriaLabel|`aria-label` for the calendar button.|n/a|`"Toggle calendar"`|
+|calendarClassName|Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
+|calendarIcon|Content of the calendar button. Setting the value explicitly to `null` will hide the icon.|(default icon)|<ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li></ul>|
+|className|Class name(s) that will be added along with `"react-daterange-picker"` to the main React-DateRange-Picker `<div>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
+|clearAriaLabel|`aria-label` for the clear button.|n/a|`"Clear value"`|
+|clearIcon|Content of the clear button. Setting the value explicitly to `null` will hide the icon.|(default icon)|<ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li></ul>|
+|dayAriaLabel|`aria-label` for the day input.|n/a|`"Day"`|
+|disabled|Whether the date range picker should be disabled.|`false`|`true`|
+|disableCalendar|When set to `true`, will remove the calendar and the button toggling its visibility.|`false`|`true`|
+|format|Input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `y`, `M`, `MM`, `MMM`, `MMMM`, `d`, `dd`.|n/a|`"y-MM-dd"`|
+|isOpen|Whether the calendar should be opened.|`false`|`true`|
+|locale|Locale that should be used by the date range picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag).|User's browser settings|`"hu-HU"`|
+|maxDate|Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-DateRange-Picker will ensure that no later date is selected.|n/a|Date: `new Date()`|
+|maxDetail|The most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be `"month"`, `"year"`, `"decade"` or `"century"`.|`"month"`|`"year"`|
+|minDate|Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateRange-Picker will ensure that no earlier date is selected.|n/a|Date: `new Date()`|
+|minDetail|The least detailed calendar view that the user shall see. Can be `"month"`, `"year"`, `"decade"` or `"century"`.|`"century"`|`"decade"`|
+|monthAriaLabel|`aria-label` for the month input.|n/a|`"Month"`|
+|name|Input name prefix. Date from/Date to fields will be named `"yourprefix_from"` and `"yourprefix_to"` respectively.|`"daterange"`|`"myCustomName"`|
+|nativeInputAriaLabel|`aria-label` for the native date input.|n/a|`"Date"`|
+|onCalendarClose|Function called when the calendar closes.|n/a|`() => alert('Calendar closed')`|
+|onCalendarOpen|Function called when the calendar opens.|n/a|`() => alert('Calendar opened')`|
+|onChange|Function called when the user clicks an item on the most detailed view available.|n/a|`(value) => alert('New date is: ', value)`|
+|required|Whether date input should be required.|`false`|`true`|
+|showLeadingZeros|Whether leading zeros should be rendered in date inputs.|`false`|`true`|
+|value|Input value.|n/a|<ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li></ul>|
+|yearAriaLabel|`aria-label` for the year input.|n/a|`"Year"`|
 
@@ -107,0 +114,0 @@ ### Calendar

src/__tests__/DateRangePicker.jsx

@@ -9,3 +9,3 @@ import React from 'react';
 describe('DateRangePicker', () => {
-  it('passes default name to DateInput', () => {
+  it('passes default name to DateInput components', () => {
     const component = mount(
@@ -21,3 +21,3 @@ <DateRangePicker />
 
-  it('passes custom name to DateInput', () => {
+  it('passes custom name to DateInput components', () => {
     const name = 'testName';
@@ -35,3 +35,3 @@
 
-  it('passes format to DateInput', () => {
+  it('passes format to DateInput components', () => {
     const format = 'y-MM-dd';
@@ -49,2 +49,61 @@
 
+  it('passes aria-label props to DateInput components', () => {
+    const ariaLabelProps = {
+      calendarAriaLabel: 'Toggle calendar',
+      clearAriaLabel: 'Clear value',
+      dayAriaLabel: 'Day',
+      monthAriaLabel: 'Month',
+      nativeInputAriaLabel: 'Date',
+      yearAriaLabel: 'Year',
+    };
+
+    const component = mount(
+      <DateRangePicker {...ariaLabelProps} />
+    );
+
+    const calendarButton = component.find('button.react-daterange-picker__calendar-button');
+    const clearButton = component.find('button.react-daterange-picker__clear-button');
+    const dateInput = component.find('DateInput');
+
+    expect(calendarButton.prop('aria-label')).toBe(ariaLabelProps.calendarAriaLabel);
+    expect(clearButton.prop('aria-label')).toBe(ariaLabelProps.clearAriaLabel);
+    expect(dateInput.at(0).prop('dayAriaLabel')).toBe(ariaLabelProps.dayAriaLabel);
+    expect(dateInput.at(0).prop('monthAriaLabel')).toBe(ariaLabelProps.monthAriaLabel);
+    expect(dateInput.at(0).prop('nativeInputAriaLabel')).toBe(ariaLabelProps.nativeInputAriaLabel);
+    expect(dateInput.at(0).prop('yearAriaLabel')).toBe(ariaLabelProps.yearAriaLabel);
+    expect(dateInput.at(1).prop('dayAriaLabel')).toBe(ariaLabelProps.dayAriaLabel);
+    expect(dateInput.at(1).prop('monthAriaLabel')).toBe(ariaLabelProps.monthAriaLabel);
+    expect(dateInput.at(1).prop('nativeInputAriaLabel')).toBe(ariaLabelProps.nativeInputAriaLabel);
+    expect(dateInput.at(1).prop('yearAriaLabel')).toBe(ariaLabelProps.yearAriaLabel);
+  });
+
+  describe('passes value to DateInput components', () => {
+    it('passes single value to DateInput components', () => {
+      const value = new Date(2019, 0, 1);
+
+      const component = mount(
+        <DateRangePicker value={value} />
+      );
+
+      const dateInput = component.find('DateInput');
+
+      expect(dateInput.at(0).prop('value')).toBe(value);
+      expect(dateInput.at(1).prop('value')).toBe(undefined);
+    });
+
+    it('passes the first item of an array of values to DateInput components', () => {
+      const value1 = new Date(2019, 0, 1);
+      const value2 = new Date(2019, 6, 1);
+
+      const component = mount(
+        <DateRangePicker value={[value1, value2]} />
+      );
+
+      const dateInput = component.find('DateInput');
+
+      expect(dateInput.at(0).prop('value')).toBe(value1);
+      expect(dateInput.at(1).prop('value')).toBe(value2);
+    });
+  });
+
   it('applies className to its wrapper when given a string', () => {
@@ -88,2 +147,12 @@ const className = 'testClassName';
 
+  it('renders range divider', () => {
+    const component = mount(
+      <DateRangePicker />
+    );
+
+    const rangeDivider = component.find('.react-daterange-picker__range-divider');
+
+    expect(rangeDivider).toHaveLength(1);
+  });
+
   it('renders clear button', () => {
@@ -121,2 +190,14 @@ const component = mount(
 
+  it('does not render Calendar component when given disableCalendar & isOpen flags', () => {
+    const component = mount(
+      <DateRangePicker disableCalendar isOpen />
+    );
+
+    const dateInput = component.find('DateInput');
+    const calendar = component.find('Calendar');
+
+    expect(dateInput).toHaveLength(2);
+    expect(calendar).toHaveLength(0);
+  });
+
   it('opens Calendar component when given isOpen flag by changing props', () => {
@@ -175,3 +256,2 @@ const component = mount(
 
-
   it('closes Calendar component when clicked outside', () => {
@@ -211,2 +291,19 @@ const root = document.createElement('div');
 
+  it('closes Calendar component when tapped outside', () => {
+    const root = document.createElement('div');
+    document.body.appendChild(root);
+
+    const component = mount(
+      <DateRangePicker isOpen />,
+      { attachTo: root }
+    );
+
+    const event = document.createEvent('TouchEvent');
+    event.initEvent('touchstart', true, true);
+    document.body.dispatchEvent(event);
+    component.update();
+
+    expect(component.state('isOpen')).toBe(false);
+  });
+
   it('does not close Calendar component when focused inside', () => {
@@ -213,0 +310,0 @@ const component = mount(

src/DateRangePicker.jsx

@@ -11,5 +11,8 @@ import React, { PureComponent } from 'react';
 
+import { isMaxDate, isMinDate } from './shared/propTypes';
 import { callIfDefined } from './shared/utils';
 
 const baseClassName = 'react-daterange-picker';
+const outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];
+const allViews = ['century', 'decade', 'year', 'month'];
 
@@ -35,4 +38,3 @@ export default class DateRangePicker extends PureComponent {
   componentDidMount() {
-    document.addEventListener('mousedown', this.onOutsideAction);
-    document.addEventListener('focusin', this.onOutsideAction);
+    this.handleOutsideActionListeners();
   }
@@ -45,2 +47,3 @@
     if (isOpen !== prevState.isOpen) {
+      this.handleOutsideActionListeners();
       callIfDefined(isOpen ? onCalendarOpen : onCalendarClose);
@@ -51,6 +54,13 @@ }
   componentWillUnmount() {
-    document.removeEventListener('mousedown', this.onOutsideAction);
-    document.removeEventListener('focusin', this.onOutsideAction);
+    this.handleOutsideActionListeners(false);
   }
 
+  handleOutsideActionListeners(shouldListen) {
+    const { isOpen } = this.state;
+
+    const shouldListenWithFallback = typeof shouldListen !== 'undefined' ? shouldListen : isOpen;
+    const fnName = shouldListenWithFallback ? 'addEventListener' : 'removeEventListener';
+    outsideActionEvents.forEach(eventName => document[fnName](eventName, this.onOutsideAction));
+  }
+
   onOutsideAction = (event) => {
@@ -124,14 +134,21 @@ if (this.wrapper && !this.wrapper.contains(event.target)) {
     const {
+      calendarAriaLabel,
       calendarIcon,
+      clearAriaLabel,
       clearIcon,
+      dayAriaLabel,
+      disableCalendar,
       disabled,
       format,
       locale,
+      maxDate,
       maxDetail,
-      maxDate,
       minDate,
+      monthAriaLabel,
       name,
+      nativeInputAriaLabel,
       required,
       showLeadingZeros,
       value,
+      yearAriaLabel,
     } = this.props;
@@ -142,3 +159,11 @@ const { isOpen } = this.state;
 
+    const ariaLabelProps = {
+      dayAriaLabel,
+      monthAriaLabel,
+      nativeInputAriaLabel,
+      yearAriaLabel,
+    };
+
     const commonProps = {
+      ...ariaLabelProps,
       className: `${baseClassName}__inputGroup`,
@@ -165,3 +190,5 @@ disabled,
         />
-        –
+        <span className={`${baseClassName}__range-divider`}>
+          –
+        </span>
         <DateInput
@@ -176,2 +203,3 @@ {...commonProps}
           <button
+            aria-label={clearAriaLabel}
             className={`${baseClassName}__clear-button ${baseClassName}__button`}
@@ -186,4 +214,5 @@ disabled={disabled}
         )}
-        {calendarIcon !== null && (
+        {calendarIcon !== null && !disableCalendar && (
           <button
+            aria-label={calendarAriaLabel}
             className={`${baseClassName}__calendar-button ${baseClassName}__button`}
@@ -204,5 +233,6 @@ disabled={disabled}
   renderCalendar() {
+    const { disableCalendar } = this.props;
     const { isOpen } = this.state;
 
-    if (isOpen === null) {
+    if (isOpen === null || disableCalendar) {
       return null;
@@ -265,9 +295,19 @@ }
 
+const iconProps = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: 19,
+  height: 19,
+  viewBox: '0 0 19 19',
+  stroke: 'black',
+  strokeWidth: 2,
+};
+
 const CalendarIcon = (
-  <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
-    <g stroke="black" strokeWidth="2">
-      <rect width="15" height="15" x="2" y="2" fill="none" />
-      <line x1="6" y1="0" x2="6" y2="4" />
-      <line x1="13" y1="0" x2="13" y2="4" />
-    </g>
+  <svg
+    {...iconProps}
+    className={`${baseClassName}__calendar-button__icon ${baseClassName}__button__icon`}
+  >
+    <rect width="15" height="15" x="2" y="2" fill="none" />
+    <line x1="6" y1="0" x2="6" y2="4" />
+    <line x1="13" y1="0" x2="13" y2="4" />
   </svg>
@@ -277,7 +317,8 @@ );
 const ClearIcon = (
-  <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
-    <g stroke="black" strokeWidth="2">
-      <line x1="4" y1="4" x2="15" y2="15" />
-      <line x1="15" y1="4" x2="4" y2="15" />
-    </g>
+  <svg
+    {...iconProps}
+    className={`${baseClassName}__clear-button__icon ${baseClassName}__button__icon`}
+  >
+    <line x1="4" y1="4" x2="15" y2="15" />
+    <line x1="15" y1="4" x2="4" y2="15" />
   </svg>
@@ -293,4 +334,9 @@ );
 
+const isValue = PropTypes.oneOfType([
+  PropTypes.string,
+  PropTypes.instanceOf(Date),
+]);
+
 DateRangePicker.propTypes = {
-  ...Calendar.propTypes,
+  calendarAriaLabel: PropTypes.string,
   calendarClassName: PropTypes.oneOfType([
@@ -305,13 +351,30 @@ PropTypes.string,
   ]),
+  clearAriaLabel: PropTypes.string,
   clearIcon: PropTypes.node,
+  dayAriaLabel: PropTypes.string,
+  disableCalendar: PropTypes.bool,
   disabled: PropTypes.bool,
   format: PropTypes.string,
   isOpen: PropTypes.bool,
+  locale: PropTypes.string,
+  maxDate: isMaxDate,
+  maxDetail: PropTypes.oneOf(allViews),
+  minDate: isMinDate,
+  monthAriaLabel: PropTypes.string,
   name: PropTypes.string,
+  nativeInputAriaLabel: PropTypes.string,
   onCalendarClose: PropTypes.func,
   onCalendarOpen: PropTypes.func,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
   required: PropTypes.bool,
+  returnValue: PropTypes.oneOf(['start', 'end', 'range']),
   showLeadingZeros: PropTypes.bool,
+  value: PropTypes.oneOfType([
+    isValue,
+    PropTypes.arrayOf(isValue),
+  ]),
+  yearAriaLabel: PropTypes.string,
 };
 
 polyfill(DateRangePicker);

No alert changes

Improved metrics

Total package byte prevSize

60390

increased by15.36%

Lines of code

1170

increased by17.94%

Number of lines in readme file

135

increased by5.47%

Dependency changes

• Updatedreact-date-picker@^7.7.0