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

Comparing version 5.1.0 to 5.2.0

dist/cjs/DateRangePicker.d.ts

@@ -11,3 +11,3 @@ import React from 'react';
 type EventProps = ReturnType<typeof makeEventProps>;
-type DateRangePickerProps = {
+export type DateRangePickerProps = {
     autoFocus?: boolean;
@@ -41,2 +41,3 @@ calendarAriaLabel?: string;
     onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+    onInvalidChange?: () => void;
     openCalendarOnFocus?: boolean;
@@ -56,3 +57,3 @@ portalContainer?: HTMLElement | null;
     yearPlaceholder?: string;
-} & CalendarProps & EventProps;
+} & CalendarProps & Omit<EventProps, 'onChange' | 'onFocus'>;
 declare function DateRangePicker(props: DateRangePickerProps): JSX.Element;
@@ -59,0 +60,0 @@ declare namespace DateRangePicker {

dist/cjs/DateRangePicker.js

@@ -79,3 +79,3 @@ "use strict";
 function DateRangePicker(props) {
-    var autoFocus = props.autoFocus, calendarAriaLabel = props.calendarAriaLabel, _a = props.calendarIcon, calendarIcon = _a === void 0 ? CalendarIcon : _a, className = props.className, clearAriaLabel = props.clearAriaLabel, _b = props.clearIcon, clearIcon = _b === void 0 ? ClearIcon : _b, _c = props.closeCalendar, shouldCloseCalendarOnSelect = _c === void 0 ? true : _c, dataTestid = props["data-testid"], dayAriaLabel = props.dayAriaLabel, dayPlaceholder = props.dayPlaceholder, disableCalendar = props.disableCalendar, disabled = props.disabled, format = props.format, id = props.id, _d = props.isOpen, isOpenProps = _d === void 0 ? null : _d, locale = props.locale, maxDate = props.maxDate, _e = props.maxDetail, maxDetail = _e === void 0 ? 'month' : _e, minDate = props.minDate, monthAriaLabel = props.monthAriaLabel, monthPlaceholder = props.monthPlaceholder, _f = props.name, name = _f === void 0 ? 'daterange' : _f, nativeInputAriaLabel = props.nativeInputAriaLabel, onCalendarClose = props.onCalendarClose, onCalendarOpen = props.onCalendarOpen, onChangeProps = props.onChange, onFocusProps = props.onFocus, _g = props.openCalendarOnFocus, openCalendarOnFocus = _g === void 0 ? true : _g, _h = props.rangeDivider, rangeDivider = _h === void 0 ? '–' : _h, required = props.required, shouldCloseCalendar = props.shouldCloseCalendar, shouldOpenCalendar = props.shouldOpenCalendar, showLeadingZeros = props.showLeadingZeros, value = props.value, yearAriaLabel = props.yearAriaLabel, yearPlaceholder = props.yearPlaceholder, otherProps = __rest(props, ["autoFocus", "calendarAriaLabel", "calendarIcon", "className", "clearAriaLabel", "clearIcon", "closeCalendar", 'data-testid', "dayAriaLabel", "dayPlaceholder", "disableCalendar", "disabled", "format", "id", "isOpen", "locale", "maxDate", "maxDetail", "minDate", "monthAriaLabel", "monthPlaceholder", "name", "nativeInputAriaLabel", "onCalendarClose", "onCalendarOpen", "onChange", "onFocus", "openCalendarOnFocus", "rangeDivider", "required", "shouldCloseCalendar", "shouldOpenCalendar", "showLeadingZeros", "value", "yearAriaLabel", "yearPlaceholder"]);
+    var autoFocus = props.autoFocus, calendarAriaLabel = props.calendarAriaLabel, _a = props.calendarIcon, calendarIcon = _a === void 0 ? CalendarIcon : _a, className = props.className, clearAriaLabel = props.clearAriaLabel, _b = props.clearIcon, clearIcon = _b === void 0 ? ClearIcon : _b, _c = props.closeCalendar, shouldCloseCalendarOnSelect = _c === void 0 ? true : _c, dataTestid = props["data-testid"], dayAriaLabel = props.dayAriaLabel, dayPlaceholder = props.dayPlaceholder, disableCalendar = props.disableCalendar, disabled = props.disabled, format = props.format, id = props.id, _d = props.isOpen, isOpenProps = _d === void 0 ? null : _d, locale = props.locale, maxDate = props.maxDate, _e = props.maxDetail, maxDetail = _e === void 0 ? 'month' : _e, minDate = props.minDate, monthAriaLabel = props.monthAriaLabel, monthPlaceholder = props.monthPlaceholder, _f = props.name, name = _f === void 0 ? 'daterange' : _f, nativeInputAriaLabel = props.nativeInputAriaLabel, onCalendarClose = props.onCalendarClose, onCalendarOpen = props.onCalendarOpen, onChangeProps = props.onChange, onFocusProps = props.onFocus, onInvalidChange = props.onInvalidChange, _g = props.openCalendarOnFocus, openCalendarOnFocus = _g === void 0 ? true : _g, _h = props.rangeDivider, rangeDivider = _h === void 0 ? '–' : _h, required = props.required, shouldCloseCalendar = props.shouldCloseCalendar, shouldOpenCalendar = props.shouldOpenCalendar, showLeadingZeros = props.showLeadingZeros, value = props.value, yearAriaLabel = props.yearAriaLabel, yearPlaceholder = props.yearPlaceholder, otherProps = __rest(props, ["autoFocus", "calendarAriaLabel", "calendarIcon", "className", "clearAriaLabel", "clearIcon", "closeCalendar", 'data-testid', "dayAriaLabel", "dayPlaceholder", "disableCalendar", "disabled", "format", "id", "isOpen", "locale", "maxDate", "maxDetail", "minDate", "monthAriaLabel", "monthPlaceholder", "name", "nativeInputAriaLabel", "onCalendarClose", "onCalendarOpen", "onChange", "onFocus", "onInvalidChange", "openCalendarOnFocus", "rangeDivider", "required", "shouldCloseCalendar", "shouldOpenCalendar", "showLeadingZeros", "value", "yearAriaLabel", "yearPlaceholder"]);
     var _j = (0, react_1.useState)(isOpenProps), isOpen = _j[0], setIsOpen = _j[1];
@@ -213,3 +213,3 @@ var wrapper = (0, react_1.useRef)(null);
         };
-        var commonProps = __assign(__assign(__assign({}, ariaLabelProps), placeholderProps), { className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isCalendarOpen: isOpen, locale: locale, maxDate: maxDate, maxDetail: maxDetail, minDate: minDate, required: required, showLeadingZeros: showLeadingZeros });
+        var commonProps = __assign(__assign(__assign({}, ariaLabelProps), placeholderProps), { className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isCalendarOpen: isOpen, locale: locale, maxDate: maxDate, maxDetail: maxDetail, minDate: minDate, onInvalidChange: onInvalidChange, required: required, showLeadingZeros: showLeadingZeros });
         return (react_1.default.createElement("div", { className: "".concat(baseClassName, "__wrapper") },
@@ -216,0 +216,0 @@ react_1.default.createElement(DateInput_1.default, __assign({}, commonProps, {

dist/cjs/index.d.ts

 import DateRangePicker from './DateRangePicker';
+import type { DateRangePickerProps } from './DateRangePicker';
 export { DateRangePicker };
+export type { DateRangePickerProps };
 export default DateRangePicker;

dist/esm/DateRangePicker.d.ts

@@ -11,3 +11,3 @@ import React from 'react';
 type EventProps = ReturnType<typeof makeEventProps>;
-type DateRangePickerProps = {
+export type DateRangePickerProps = {
     autoFocus?: boolean;
@@ -41,2 +41,3 @@ calendarAriaLabel?: string;
     onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+    onInvalidChange?: () => void;
     openCalendarOnFocus?: boolean;
@@ -56,3 +57,3 @@ portalContainer?: HTMLElement | null;
     yearPlaceholder?: string;
-} & CalendarProps & EventProps;
+} & CalendarProps & Omit<EventProps, 'onChange' | 'onFocus'>;
 declare function DateRangePicker(props: DateRangePickerProps): JSX.Element;
@@ -59,0 +60,0 @@ declare namespace DateRangePicker {

dist/esm/DateRangePicker.js

@@ -51,3 +51,3 @@ var __assign = (this && this.__assign) || function () {
 export default function DateRangePicker(props) {
-    var autoFocus = props.autoFocus, calendarAriaLabel = props.calendarAriaLabel, _a = props.calendarIcon, calendarIcon = _a === void 0 ? CalendarIcon : _a, className = props.className, clearAriaLabel = props.clearAriaLabel, _b = props.clearIcon, clearIcon = _b === void 0 ? ClearIcon : _b, _c = props.closeCalendar, shouldCloseCalendarOnSelect = _c === void 0 ? true : _c, dataTestid = props["data-testid"], dayAriaLabel = props.dayAriaLabel, dayPlaceholder = props.dayPlaceholder, disableCalendar = props.disableCalendar, disabled = props.disabled, format = props.format, id = props.id, _d = props.isOpen, isOpenProps = _d === void 0 ? null : _d, locale = props.locale, maxDate = props.maxDate, _e = props.maxDetail, maxDetail = _e === void 0 ? 'month' : _e, minDate = props.minDate, monthAriaLabel = props.monthAriaLabel, monthPlaceholder = props.monthPlaceholder, _f = props.name, name = _f === void 0 ? 'daterange' : _f, nativeInputAriaLabel = props.nativeInputAriaLabel, onCalendarClose = props.onCalendarClose, onCalendarOpen = props.onCalendarOpen, onChangeProps = props.onChange, onFocusProps = props.onFocus, _g = props.openCalendarOnFocus, openCalendarOnFocus = _g === void 0 ? true : _g, _h = props.rangeDivider, rangeDivider = _h === void 0 ? '–' : _h, required = props.required, shouldCloseCalendar = props.shouldCloseCalendar, shouldOpenCalendar = props.shouldOpenCalendar, showLeadingZeros = props.showLeadingZeros, value = props.value, yearAriaLabel = props.yearAriaLabel, yearPlaceholder = props.yearPlaceholder, otherProps = __rest(props, ["autoFocus", "calendarAriaLabel", "calendarIcon", "className", "clearAriaLabel", "clearIcon", "closeCalendar", 'data-testid', "dayAriaLabel", "dayPlaceholder", "disableCalendar", "disabled", "format", "id", "isOpen", "locale", "maxDate", "maxDetail", "minDate", "monthAriaLabel", "monthPlaceholder", "name", "nativeInputAriaLabel", "onCalendarClose", "onCalendarOpen", "onChange", "onFocus", "openCalendarOnFocus", "rangeDivider", "required", "shouldCloseCalendar", "shouldOpenCalendar", "showLeadingZeros", "value", "yearAriaLabel", "yearPlaceholder"]);
+    var autoFocus = props.autoFocus, calendarAriaLabel = props.calendarAriaLabel, _a = props.calendarIcon, calendarIcon = _a === void 0 ? CalendarIcon : _a, className = props.className, clearAriaLabel = props.clearAriaLabel, _b = props.clearIcon, clearIcon = _b === void 0 ? ClearIcon : _b, _c = props.closeCalendar, shouldCloseCalendarOnSelect = _c === void 0 ? true : _c, dataTestid = props["data-testid"], dayAriaLabel = props.dayAriaLabel, dayPlaceholder = props.dayPlaceholder, disableCalendar = props.disableCalendar, disabled = props.disabled, format = props.format, id = props.id, _d = props.isOpen, isOpenProps = _d === void 0 ? null : _d, locale = props.locale, maxDate = props.maxDate, _e = props.maxDetail, maxDetail = _e === void 0 ? 'month' : _e, minDate = props.minDate, monthAriaLabel = props.monthAriaLabel, monthPlaceholder = props.monthPlaceholder, _f = props.name, name = _f === void 0 ? 'daterange' : _f, nativeInputAriaLabel = props.nativeInputAriaLabel, onCalendarClose = props.onCalendarClose, onCalendarOpen = props.onCalendarOpen, onChangeProps = props.onChange, onFocusProps = props.onFocus, onInvalidChange = props.onInvalidChange, _g = props.openCalendarOnFocus, openCalendarOnFocus = _g === void 0 ? true : _g, _h = props.rangeDivider, rangeDivider = _h === void 0 ? '–' : _h, required = props.required, shouldCloseCalendar = props.shouldCloseCalendar, shouldOpenCalendar = props.shouldOpenCalendar, showLeadingZeros = props.showLeadingZeros, value = props.value, yearAriaLabel = props.yearAriaLabel, yearPlaceholder = props.yearPlaceholder, otherProps = __rest(props, ["autoFocus", "calendarAriaLabel", "calendarIcon", "className", "clearAriaLabel", "clearIcon", "closeCalendar", 'data-testid', "dayAriaLabel", "dayPlaceholder", "disableCalendar", "disabled", "format", "id", "isOpen", "locale", "maxDate", "maxDetail", "minDate", "monthAriaLabel", "monthPlaceholder", "name", "nativeInputAriaLabel", "onCalendarClose", "onCalendarOpen", "onChange", "onFocus", "onInvalidChange", "openCalendarOnFocus", "rangeDivider", "required", "shouldCloseCalendar", "shouldOpenCalendar", "showLeadingZeros", "value", "yearAriaLabel", "yearPlaceholder"]);
     var _j = useState(isOpenProps), isOpen = _j[0], setIsOpen = _j[1];
@@ -185,3 +185,3 @@ var wrapper = useRef(null);
         };
-        var commonProps = __assign(__assign(__assign({}, ariaLabelProps), placeholderProps), { className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isCalendarOpen: isOpen, locale: locale, maxDate: maxDate, maxDetail: maxDetail, minDate: minDate, required: required, showLeadingZeros: showLeadingZeros });
+        var commonProps = __assign(__assign(__assign({}, ariaLabelProps), placeholderProps), { className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isCalendarOpen: isOpen, locale: locale, maxDate: maxDate, maxDetail: maxDetail, minDate: minDate, onInvalidChange: onInvalidChange, required: required, showLeadingZeros: showLeadingZeros });
         return (React.createElement("div", { className: "".concat(baseClassName, "__wrapper") },
@@ -188,0 +188,0 @@ React.createElement(DateInput, __assign({}, commonProps, {

dist/esm/index.d.ts

 import DateRangePicker from './DateRangePicker';
+import type { DateRangePickerProps } from './DateRangePicker';
 export { DateRangePicker };
+export type { DateRangePickerProps };
 export default DateRangePicker;

package.json

 {
   "name": "@wojtekmaj/react-daterange-picker",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "A date range picker for your React app.",
@@ -45,3 +45,3 @@ "main": "dist/cjs/index.js",
     "react-calendar": "^4.2.1",
-    "react-date-picker": "^10.0.1",
+    "react-date-picker": "^10.2.0",
     "react-fit": "^1.5.1"
@@ -48,0 +48,0 @@ },

README.md

@@ -76,6 +76,2 @@ [![npm](https://img.shields.io/npm/v/@wojtekmaj/react-daterange-picker.svg)](https://www.npmjs.com/package/@wojtekmaj/react-daterange-picker) ![downloads](https://img.shields.io/npm/dt/@wojtekmaj/react-daterange-picker.svg) [![CI](https://github.com/wojtekmaj/react-daterange-picker/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-daterange-picker/actions)
 
-### 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
@@ -119,2 +115,3 @@
 | onFocus              | Function called when the focuses an input.                                                                                                                                                                                                   | n/a                     | `(event) => alert('Focused input: ', event.target.name)`                                                                                                                                                            |
+| onInvalidChange      | Function called when the user picks an invalid date.                                                                                                                                                                                         | n/a                     | `() => alert('Invalid date')`                                                                                                                                                                                       |
 | openCalendarOnFocus  | Whether to open the calendar on input focus. Note: It's recommended to use shouldOpenCalendar function instead.                                                                                                                              | `true`                  | `false`                                                                                                                                                                                                             |
@@ -121,0 +118,0 @@ | portalContainer      | Element to render the calendar in using portal.                                                                                                                                                                                              | n/a                     | `document.getElementById('my-div')`                                                                                                                                                                                 |

src/index.ts

 import DateRangePicker from './DateRangePicker';
 
+import type { DateRangePickerProps } from './DateRangePicker';
+
 export { DateRangePicker };
 
+export type { DateRangePickerProps };
+
 export default DateRangePicker;

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

123631

increased by1.29%

Lines of code

2148

increased by1.08%

Worsened metrics

Number of lines in readme file

148

decreased by-1.99%

Dependency changes

• Updatedreact-date-picker@^10.2.0