react-date-picker - npm Package Compare versions

Comparing version 8.0.7 to 8.1.0-beta

dist/DateInput.js

@@ -183,2 +183,24 @@ "use strict";
 
+function isInputValid(input) {
+  if (!input.validity.valid) {
+    return false;
+  }
+
+  var value = input.value;
+
+  if (!value) {
+    return false;
+  }
+
+  var rawValue = Number(value);
+  var min = Number(input.getAttribute('min'));
+  var max = Number(input.getAttribute('max'));
+
+  if (rawValue < min || rawValue > max) {
+    return false;
+  }
+
+  return true;
+}
+
 function focus(element) {
@@ -281,3 +303,4 @@ if (element) {
 
-      var value = input.value;
+      var maxLength = input.maxLength,
+          value = input.value;
       var max = input.getAttribute('max');
@@ -291,3 +314,3 @@ /**
 
-      if (value * 10 > max || value.length >= max.length) {
+      if (value * 10 > max || value.length >= maxLength) {
         var property = 'nextElementSibling';
@@ -304,3 +327,3 @@ var nextInput = findInput(input, property);
 
-      _this.setState(_defineProperty({}, name, value ? parseInt(value, 10) : null), _this.onChangeExternal);
+      _this.setState(_defineProperty({}, name, value), _this.onChangeExternal);
     });
@@ -327,5 +350,5 @@
 
-        var year = parseInt(yearString, 10);
-        var monthIndex = parseInt(monthString, 10) - 1 || 0;
-        var day = parseInt(dayString, 10) || 1;
+        var year = Number(yearString);
+        var monthIndex = Number(monthString) - 1 || 0;
+        var day = Number(dayString) || 1;
         var proposedValue = new Date();
@@ -357,8 +380,6 @@ proposedValue.setFullYear(year, monthIndex, day);
         onChange(null, false);
-      } else if (formElements.every(function (formElement) {
-        return formElement.value && formElement.validity.valid;
-      })) {
-        var year = parseInt(values.year, 10);
-        var monthIndex = parseInt(values.month, 10) - 1 || 0;
-        var day = parseInt(values.day || 1, 10);
+      } else if (formElements.every(isInputValid)) {
+        var year = Number(values.year);
+        var monthIndex = Number(values.month) - 1 || 0;
+        var day = Number(values.day || 1);
         var proposedValue = new Date();
@@ -691,5 +712,5 @@ proposedValue.setFullYear(year, monthIndex, day);
         if (nextValue) {
-          nextState.year = (0, _dateUtils.getYear)(nextValue);
-          nextState.month = (0, _dateUtils.getMonthHuman)(nextValue);
-          nextState.day = (0, _dateUtils.getDate)(nextValue);
+          nextState.year = (0, _dateUtils.getYear)(nextValue).toString();
+          nextState.month = (0, _dateUtils.getMonthHuman)(nextValue).toString();
+          nextState.day = (0, _dateUtils.getDate)(nextValue).toString();
         } else {
@@ -696,0 +717,0 @@ nextState.year = null;

dist/DateInput/DayInput.js

@@ -44,3 +44,3 @@ "use strict";
   function isSameMonth(date) {
-    return date && year === (0, _dateUtils.getYear)(date) && month === (0, _dateUtils.getMonthHuman)(date);
+    return date && Number(year) === (0, _dateUtils.getYear)(date) && Number(month) === (0, _dateUtils.getMonthHuman)(date);
   }
@@ -57,2 +57,4 @@
 
+var isValue = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]);
+
 DayInput.propTypes = {
@@ -65,3 +67,3 @@ ariaLabel: _propTypes["default"].string,
   minDate: _propTypes2.isMinDate,
-  month: _propTypes["default"].number,
+  month: isValue,
   onChange: _propTypes["default"].func,
@@ -73,4 +75,4 @@ onKeyDown: _propTypes["default"].func,
   showLeadingZeros: _propTypes["default"].bool,
-  value: _propTypes["default"].number,
-  year: _propTypes["default"].number
+  value: isValue,
+  year: isValue
 };

dist/DateInput/Input.js

@@ -18,2 +18,4 @@ "use strict";
 
+var _predictInputValue = _interopRequireDefault(require("@wojtekmaj/predict-input-value"));
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -64,19 +66,41 @@
 
-function getSelectionString() {
-  if (typeof window === 'undefined') {
-    return null;
-  }
+function addLeadingZero(value, max) {
+  return "0".concat(value).slice(-"".concat(max).length);
+}
 
-  return window.getSelection().toString();
+function makeOnKeyDown(_ref) {
+  var max = _ref.max,
+      min = _ref.min,
+      onChange = _ref.onChange,
+      showLeadingZeros = _ref.showLeadingZeros;
+  return function onKeyDown(event) {
+    switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowDown':
+        {
+          event.preventDefault();
+          var input = event.target;
+          var value = input.value;
+          var numericValue = Number(value);
+          var rawNextValue = numericValue + (event.key === 'ArrowUp' ? 1 : -1);
+          var limitedRawNextValue = Math.min(max, Math.max(min, rawNextValue));
+          var hasLeadingZero = showLeadingZeros && limitedRawNextValue < 10;
+          var nextValue = hasLeadingZero ? addLeadingZero(limitedRawNextValue, max) : limitedRawNextValue;
+          input.value = nextValue;
+          onChange(event);
+          break;
+        }
+
+      default:
+    }
+  };
 }
 
-function makeOnKeyPress(maxLength) {
+function makeOnKeyPress(max) {
   return function onKeyPress(event) {
-    var key = event.key,
-        input = event.target;
-    var value = input.value;
+    var key = event.key;
     var isNumberKey = !isNaN(parseInt(key, 10));
-    var selection = getSelectionString();
+    var nextValue = (0, _predictInputValue["default"])(event);
 
-    if (isNumberKey && (selection || value.length < maxLength)) {
+    if (isNumberKey && nextValue <= max) {
       return;
@@ -89,23 +113,29 @@ }
 
-function Input(_ref) {
-  var ariaLabel = _ref.ariaLabel,
-      autoFocus = _ref.autoFocus,
-      className = _ref.className,
-      disabled = _ref.disabled,
-      itemRef = _ref.itemRef,
-      max = _ref.max,
-      min = _ref.min,
-      name = _ref.name,
-      nameForClass = _ref.nameForClass,
-      onChange = _ref.onChange,
-      onKeyDown = _ref.onKeyDown,
-      _onKeyUp = _ref.onKeyUp,
-      _ref$placeholder = _ref.placeholder,
-      placeholder = _ref$placeholder === void 0 ? '--' : _ref$placeholder,
-      required = _ref.required,
-      showLeadingZeros = _ref.showLeadingZeros,
-      step = _ref.step,
-      value = _ref.value;
-  var hasLeadingZero = showLeadingZeros && value !== null && value < 10;
-  var maxLength = max.toString().length;
+function Input(_ref2) {
+  var ariaLabel = _ref2.ariaLabel,
+      autoFocus = _ref2.autoFocus,
+      className = _ref2.className,
+      disabled = _ref2.disabled,
+      itemRef = _ref2.itemRef,
+      max = _ref2.max,
+      min = _ref2.min,
+      name = _ref2.name,
+      nameForClass = _ref2.nameForClass,
+      onChange = _ref2.onChange,
+      _onKeyDown = _ref2.onKeyDown,
+      _onKeyUp = _ref2.onKeyUp,
+      _ref2$placeholder = _ref2.placeholder,
+      placeholder = _ref2$placeholder === void 0 ? '--' : _ref2$placeholder,
+      required = _ref2.required,
+      showLeadingZeros = _ref2.showLeadingZeros,
+      step = _ref2.step,
+      value = _ref2.value;
+  var hasLeadingZero = showLeadingZeros && value !== null && value !== undefined && value.toString().length < 2;
+  var onKeyDownInternal = makeOnKeyDown({
+    max: max,
+    min: min,
+    onChange: onChange,
+    showLeadingZeros: showLeadingZeros
+  });
+  var onKeyPressInternal = makeOnKeyPress(max);
   return [hasLeadingZero && /*#__PURE__*/_react["default"].createElement("span", {
@@ -124,2 +154,3 @@ key: "leadingZero",
     max: max,
+    maxLength: "".concat(max).length,
     min: min,
@@ -129,4 +160,10 @@ name: name,
     onFocus: onFocus,
-    onKeyDown: onKeyDown,
-    onKeyPress: makeOnKeyPress(maxLength),
+    onKeyDown: function onKeyDown(event) {
+      onKeyDownInternal(event);
+
+      if (_onKeyDown) {
+        _onKeyDown(event);
+      }
+    },
+    onKeyPress: onKeyPressInternal,
     onKeyUp: function onKeyUp(event) {
@@ -140,10 +177,10 @@ (0, _updateInputWidth["default"])(event.target);
     placeholder: placeholder,
-    ref: function ref(_ref2) {
-      if (_ref2) {
-        (0, _updateInputWidth["default"])(_ref2);
-        updateInputWidthOnFontLoad(_ref2);
+    ref: function ref(_ref3) {
+      if (_ref3) {
+        (0, _updateInputWidth["default"])(_ref3);
+        updateInputWidthOnFontLoad(_ref3);
       }
 
       if (itemRef) {
-        itemRef(_ref2, name);
+        itemRef(_ref3, name);
       }
@@ -153,3 +190,3 @@ },
     step: step,
-    type: "number",
+    type: "text",
     value: value !== null ? value : ''
@@ -159,2 +196,4 @@ })];
 
+var isValue = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]);
+
 Input.propTypes = {
@@ -177,3 +216,3 @@ ariaLabel: _propTypes["default"].string,
   step: _propTypes["default"].number,
-  value: _propTypes["default"].number
+  value: isValue
 };

dist/DateInput/MonthInput.js

@@ -35,3 +35,3 @@ "use strict";
   function isSameYear(date) {
-    return date && year === (0, _dateUtils.getYear)(date);
+    return date && Number(year) === (0, _dateUtils.getYear)(date);
   }
@@ -48,2 +48,4 @@
 
+var isValue = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]);
+
 MonthInput.propTypes = {
@@ -62,4 +64,4 @@ ariaLabel: _propTypes["default"].string,
   showLeadingZeros: _propTypes["default"].bool,
-  value: _propTypes["default"].number,
-  year: _propTypes["default"].number
+  value: isValue,
+  year: isValue
 };

dist/DateInput/MonthSelect.js

@@ -57,3 +57,3 @@ "use strict";
   function isSameYear(date) {
-    return date && year === (0, _dateUtils.getYear)(date);
+    return date && Number(year) === (0, _dateUtils.getYear)(date);
   }
@@ -94,2 +94,4 @@
 
+var isValue = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]);
+
 MonthSelect.propTypes = {
@@ -109,4 +111,4 @@ ariaLabel: _propTypes["default"].string,
   "short": _propTypes["default"].bool,
-  value: _propTypes["default"].number,
-  year: _propTypes["default"].number
+  value: isValue,
+  year: isValue
 };

dist/DateInput/YearInput.js

@@ -56,2 +56,4 @@ "use strict";
 
+var isValue = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]);
+
 YearInput.propTypes = {
@@ -69,4 +71,4 @@ ariaLabel: _propTypes["default"].string,
   required: _propTypes["default"].bool,
-  value: _propTypes["default"].number,
+  value: isValue,
   valueType: _propTypes2.isValueType
 };

dist/shared/dates.js

@@ -14,3 +14,3 @@ "use strict";
  *
- * @param {String} rangeType Range type (e.g. 'day')
+ * @param {string} rangeType Range type (e.g. 'day')
  * @param {Date} date Date.
@@ -42,3 +42,3 @@ */
  *
- * @param {String} rangeType Range type (e.g. 'day')
+ * @param {string} rangeType Range type (e.g. 'day')
  * @param {Date} date Date.
@@ -45,0 +45,0 @@ */

index.d.ts

@@ -7,6 +7,9 @@ import { CalendarProps } from "react-calendar";
   export interface DatePickerProps extends CalendarProps {
+    calendarAriaLabel?: string;
     calendarClassName?: string | string[];
     calendarIcon?: JSX.Element | null;
     className?: string | string[];
+    clearAriaLabel?: string;
     clearIcon?: JSX.Element | null;
+    dayAriaLabel?: string;
     dayPlaceholder?: string;
@@ -16,10 +19,13 @@ disabled?: boolean;
     isOpen?: boolean;
+    monthAriaLabel?: string;
     monthPlaceholder?: string;
     name?: string;
+    nativeInputAriaLabel?: string;
+    onCalendarClose?: () => void;
     onCalendarOpen?: () => void;
-    onCalendarClose?: () => void;
     required?: boolean;
     showLeadingZeros?: boolean;
+    yearAriaLabel?: string
     yearPlaceholder?: string;
   }
 }

package.json

 {
   "name": "react-date-picker",
-  "version": "8.0.7",
+  "version": "8.1.0-beta",
   "description": "A date picker for your React app.",
@@ -77,2 +77,3 @@ "main": "dist/entry.js",
     "@wojtekmaj/date-utils": "^1.0.3",
+    "@wojtekmaj/predict-input-value": "^1.0.0",
     "get-user-locale": "^1.2.0",
@@ -79,0 +80,0 @@ "make-event-props": "^1.1.0",

src/DateInput.jsx

@@ -111,2 +111,24 @@ import React, { PureComponent } from 'react';
 
+function isInputValid(input) {
+  if (!input.validity.valid) {
+    return false;
+  }
+
+  const { value } = input;
+
+  if (!value) {
+    return false;
+  }
+
+  const rawValue = Number(value);
+  const min = Number(input.getAttribute('min'));
+  const max = Number(input.getAttribute('max'));
+
+  if (rawValue < min || rawValue > max) {
+    return false;
+  }
+
+  return true;
+}
+
 function focus(element) {
@@ -196,5 +218,5 @@ if (element) {
       if (nextValue) {
-        nextState.year = getYear(nextValue);
-        nextState.month = getMonthHuman(nextValue);
-        nextState.day = getDate(nextValue);
+        nextState.year = getYear(nextValue).toString();
+        nextState.month = getMonthHuman(nextValue).toString();
+        nextState.day = getDate(nextValue).toString();
       } else {
@@ -357,3 +379,3 @@ nextState.year = null;
 
-    const { value } = input;
+    const { maxLength, value } = input;
     const max = input.getAttribute('max');
@@ -367,3 +389,3 @@
      */
-    if ((value * 10 > max) || (value.length >= max.length)) {
+    if ((value * 10 > max) || (value.length >= maxLength)) {
       const property = 'nextElementSibling';
@@ -382,3 +404,3 @@ const nextInput = findInput(input, property);
     this.setState(
-      { [name]: value ? parseInt(value, 10) : null },
+      { [name]: value },
       this.onChangeExternal,
@@ -405,5 +427,5 @@ );
       const [yearString, monthString, dayString] = value.split('-');
-      const year = parseInt(yearString, 10);
-      const monthIndex = parseInt(monthString, 10) - 1 || 0;
-      const day = parseInt(dayString, 10) || 1;
+      const year = Number(yearString);
+      const monthIndex = Number(monthString) - 1 || 0;
+      const day = Number(dayString) || 1;
 
@@ -440,8 +462,6 @@ const proposedValue = new Date();
       onChange(null, false);
-    } else if (
-      formElements.every((formElement) => formElement.value && formElement.validity.valid)
-    ) {
-      const year = parseInt(values.year, 10);
-      const monthIndex = parseInt(values.month, 10) - 1 || 0;
-      const day = parseInt(values.day || 1, 10);
+    } else if (formElements.every(isInputValid)) {
+      const year = Number(values.year);
+      const monthIndex = Number(values.month) - 1 || 0;
+      const day = Number(values.day || 1);
 
@@ -448,0 +468,0 @@ const proposedValue = new Date();

src/DateInput.spec.jsx

@@ -118,5 +118,5 @@ import React from 'react';
     expect(nativeInput.prop('value')).toBe('2017-09-30');
-    expect(customInputs.at(0).prop('value')).toBe(9);
-    expect(customInputs.at(1).prop('value')).toBe(30);
-    expect(customInputs.at(2).prop('value')).toBe(2017);
+    expect(customInputs.at(0).prop('value')).toBe('9');
+    expect(customInputs.at(1).prop('value')).toBe('30');
+    expect(customInputs.at(2).prop('value')).toBe('2017');
   });
@@ -138,5 +138,5 @@
     expect(nativeInput.prop('value')).toBe('2017-09-30');
-    expect(customInputs.at(0).prop('value')).toBe(9);
-    expect(customInputs.at(1).prop('value')).toBe(30);
-    expect(customInputs.at(2).prop('value')).toBe(2017);
+    expect(customInputs.at(0).prop('value')).toBe('9');
+    expect(customInputs.at(1).prop('value')).toBe('30');
+    expect(customInputs.at(2).prop('value')).toBe('2017');
   });
@@ -158,5 +158,5 @@
     expect(nativeInput.prop('value')).toBe('2017-09-30');
-    expect(customInputs.at(0).prop('value')).toBe(9);
-    expect(customInputs.at(1).prop('value')).toBe(30);
-    expect(customInputs.at(2).prop('value')).toBe(2017);
+    expect(customInputs.at(0).prop('value')).toBe('9');
+    expect(customInputs.at(1).prop('value')).toBe('30');
+    expect(customInputs.at(2).prop('value')).toBe('2017');
   });
@@ -179,5 +179,5 @@
     expect(nativeInput.prop('value')).toBe('2017-09-30');
-    expect(customInputs.at(0).prop('value')).toBe(2017);
-    expect(customInputs.at(1).prop('value')).toBe(9);
-    expect(customInputs.at(2).prop('value')).toBe(30);
+    expect(customInputs.at(0).prop('value')).toBe('2017');
+    expect(customInputs.at(1).prop('value')).toBe('9');
+    expect(customInputs.at(2).prop('value')).toBe('30');
   });
@@ -200,5 +200,5 @@
     expect(nativeInput.prop('value')).toBe('2017-09-30');
-    expect(customInputs.at(0).prop('value')).toBe(2017);
-    expect(customInputs.at(1).prop('value')).toBe(9);
-    expect(customInputs.at(2).prop('value')).toBe(30);
+    expect(customInputs.at(0).prop('value')).toBe('2017');
+    expect(customInputs.at(1).prop('value')).toBe('9');
+    expect(customInputs.at(2).prop('value')).toBe('30');
   });
@@ -221,5 +221,5 @@
     expect(nativeInput.prop('value')).toBe('2017-09-30');
-    expect(customInputs.at(0).prop('value')).toBe(2017);
-    expect(customInputs.at(1).prop('value')).toBe(9);
-    expect(customInputs.at(2).prop('value')).toBe(30);
+    expect(customInputs.at(0).prop('value')).toBe('2017');
+    expect(customInputs.at(1).prop('value')).toBe('9');
+    expect(customInputs.at(2).prop('value')).toBe('30');
   });
@@ -226,0 +226,0 @@

src/DateInput/DayInput.jsx

@@ -31,3 +31,3 @@ import React from 'react';
   function isSameMonth(date) {
-    return date && year === getYear(date) && month === getMonthHuman(date);
+    return date && Number(year) === getYear(date) && Number(month) === getMonthHuman(date);
   }
@@ -48,2 +48,4 @@
 
+const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
+
 DayInput.propTypes = {
@@ -56,3 +58,3 @@ ariaLabel: PropTypes.string,
   minDate: isMinDate,
-  month: PropTypes.number,
+  month: isValue,
   onChange: PropTypes.func,
@@ -64,4 +66,4 @@ onKeyDown: PropTypes.func,
   showLeadingZeros: PropTypes.bool,
-  value: PropTypes.number,
-  year: PropTypes.number,
+  value: isValue,
+  year: isValue,
 };

src/DateInput/DayInput.spec.jsx

@@ -123,3 +123,3 @@ import React from 'react';
   it('displays given value properly', () => {
-    const value = 11;
+    const value = '11';
 
@@ -126,0 +126,0 @@ const component = mount(

src/DateInput/Input.jsx

@@ -5,2 +5,3 @@ import React from 'react';
 import updateInputWidth, { getFontShorthand } from 'update-input-width';
+import predictInputValue from '@wojtekmaj/predict-input-value';
 
@@ -49,19 +50,47 @@ /* eslint-disable jsx-a11y/no-autofocus */
 
-function getSelectionString() {
-  if (typeof window === 'undefined') {
-    return null;
-  }
+function addLeadingZero(value, max) {
+  return `0${value}`.slice(-(`${max}`.length));
+}
 
-  return window.getSelection().toString();
+function makeOnKeyDown({
+  max, min, onChange, showLeadingZeros,
+}) {
+  return function onKeyDown(event) {
+    switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowDown': {
+        event.preventDefault();
+
+        const { target: input } = event;
+        const { value } = input;
+
+        const numericValue = Number(value);
+        const rawNextValue = numericValue + (event.key === 'ArrowUp' ? 1 : -1);
+
+        const limitedRawNextValue = Math.min(max, Math.max(min, rawNextValue));
+
+        const hasLeadingZero = showLeadingZeros && limitedRawNextValue < 10;
+        const nextValue = (hasLeadingZero
+          ? addLeadingZero(limitedRawNextValue, max)
+          : limitedRawNextValue
+        );
+
+        input.value = nextValue;
+        onChange(event);
+
+        break;
+      }
+      default:
+    }
+  };
 }
 
-function makeOnKeyPress(maxLength) {
+function makeOnKeyPress(max) {
   return function onKeyPress(event) {
-    const { key, target: input } = event;
-    const { value } = input;
+    const { key } = event;
 
     const isNumberKey = !isNaN(parseInt(key, 10));
-    const selection = getSelectionString();
+    const nextValue = predictInputValue(event);
 
-    if (isNumberKey && (selection || value.length < maxLength)) {
+    if (isNumberKey && (nextValue <= max)) {
       return;
@@ -93,5 +122,13 @@ }
 }) {
-  const hasLeadingZero = showLeadingZeros && value !== null && value < 10;
-  const maxLength = max.toString().length;
+  const hasLeadingZero = (
+    showLeadingZeros
+    && (value !== null && value !== undefined)
+    && value.toString().length < 2
+  );
 
+  const onKeyDownInternal = makeOnKeyDown({
+    max, min, onChange, showLeadingZeros,
+  });
+  const onKeyPressInternal = makeOnKeyPress(max);
+
   return [
@@ -113,2 +150,3 @@ (hasLeadingZero && <span key="leadingZero" className={`${className}__leadingZero`}>0</span>),
       max={max}
+      maxLength={`${max}`.length}
       min={min}
@@ -118,4 +156,10 @@ name={name}
       onFocus={onFocus}
-      onKeyDown={onKeyDown}
-      onKeyPress={makeOnKeyPress(maxLength)}
+      onKeyDown={(event) => {
+        onKeyDownInternal(event);
+
+        if (onKeyDown) {
+          onKeyDown(event);
+        }
+      }}
+      onKeyPress={onKeyPressInternal}
       onKeyUp={(event) => {
@@ -141,3 +185,3 @@ updateInputWidth(event.target);
       step={step}
-      type="number"
+      type="text"
       value={value !== null ? value : ''}
@@ -148,2 +192,4 @@ />,
 
+const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
+
 Input.propTypes = {
@@ -166,3 +212,3 @@ ariaLabel: PropTypes.string,
   step: PropTypes.number,
-  value: PropTypes.number,
+  value: isValue,
 };

src/DateInput/MonthInput.jsx

@@ -17,3 +17,3 @@ import React from 'react';
   function isSameYear(date) {
-    return date && year === getYear(date);
+    return date && Number(year) === getYear(date);
   }
@@ -34,2 +34,4 @@
 
+const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
+
 MonthInput.propTypes = {
@@ -48,4 +50,4 @@ ariaLabel: PropTypes.string,
   showLeadingZeros: PropTypes.bool,
-  value: PropTypes.number,
-  year: PropTypes.number,
+  value: isValue,
+  year: isValue,
 };

src/DateInput/MonthInput.spec.jsx

@@ -123,3 +123,3 @@ import React from 'react';
   it('displays given value properly', () => {
-    const value = 11;
+    const value = '11';
 
@@ -126,0 +126,0 @@ const component = mount(

src/DateInput/MonthSelect.jsx

@@ -24,3 +24,3 @@ import React from 'react';
   function isSameYear(date) {
-    return date && year === getYear(date);
+    return date && Number(year) === getYear(date);
   }
@@ -74,2 +74,4 @@
 
+const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
+
 MonthSelect.propTypes = {
@@ -89,4 +91,4 @@ ariaLabel: PropTypes.string,
   short: PropTypes.bool,
-  value: PropTypes.number,
-  year: PropTypes.number,
+  value: isValue,
+  year: isValue,
 };

src/DateInput/MonthSelect.spec.jsx

@@ -93,3 +93,3 @@ import React from 'react';
   it('displays given value properly', () => {
-    const value = 11;
+    const value = '11';
 
@@ -96,0 +96,0 @@ const component = mount(

src/DateInput/YearInput.jsx

@@ -40,2 +40,4 @@ import React from 'react';
 
+const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
+
 YearInput.propTypes = {
@@ -53,4 +55,4 @@ ariaLabel: PropTypes.string,
   required: PropTypes.bool,
-  value: PropTypes.number,
+  value: isValue,
   valueType: isValueType,
 };

src/DateInput/YearInput.spec.jsx

@@ -79,3 +79,3 @@ import React from 'react';
   it('displays given value properly', () => {
-    const value = 2018;
+    const value = '2018';
 
@@ -82,0 +82,0 @@ const component = mount(

src/shared/dates.js

@@ -21,3 +21,3 @@ import {
  *
- * @param {String} rangeType Range type (e.g. 'day')
+ * @param {string} rangeType Range type (e.g. 'day')
  * @param {Date} date Date.
@@ -39,3 +39,3 @@ */
  *
- * @param {String} rangeType Range type (e.g. 'day')
+ * @param {string} rangeType Range type (e.g. 'day')
  * @param {Date} date Date.
@@ -42,0 +42,0 @@ */

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

212590

increased by1.85%

Lines of code

5363

increased by2.19%

Worsened metrics

Dependency count

12

increased by9.09%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Added@wojtekmaj/predict-input-value@^1.0.0

• + Added@wojtekmaj/predict-input-value@1.3.2(transitive)