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

Comparing version 5.0.2 to 5.1.0

dist/cjs/DateRangePicker.d.ts

 import React from 'react';
 import PropTypes from 'prop-types';
+import makeEventProps from 'make-event-props';
 import Calendar from 'react-calendar';
 import { isMaxDate, isMinDate } from './shared/propTypes';
-import type { ClassName, Detail, LooseValue, Value } from './shared/types';
+import type { ClassName, CloseReason, Detail, LooseValue, OpenReason, Value } from './shared/types';
 type Icon = React.ReactElement | string;
 type IconOrRenderFunction = Icon | React.ComponentType | React.ReactElement;
+type CalendarProps = Omit<React.ComponentPropsWithoutRef<typeof Calendar>, 'className' | 'maxDetail' | 'onChange'>;
+type EventProps = ReturnType<typeof makeEventProps>;
 type DateRangePickerProps = {
@@ -41,2 +44,8 @@ autoFocus?: boolean;
     required?: boolean;
+    shouldCloseCalendar?: (props: {
+        reason: CloseReason;
+    }) => boolean;
+    shouldOpenCalendar?: (props: {
+        reason: OpenReason;
+    }) => boolean;
     showLeadingZeros?: boolean;
@@ -46,3 +55,3 @@ value?: LooseValue;
     yearPlaceholder?: string;
-} & Omit<React.ComponentPropsWithoutRef<typeof Calendar>, 'className' | 'maxDetail' | 'onChange'>;
+} & CalendarProps & EventProps;
 declare function DateRangePicker(props: DateRangePickerProps): JSX.Element;
@@ -49,0 +58,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, shouldCloseCalendarProps = _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, 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", "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, _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 _j = (0, react_1.useState)(isOpenProps), isOpen = _j[0], setIsOpen = _j[1];
@@ -87,3 +87,9 @@ var wrapper = (0, react_1.useRef)(null);
     }, [isOpenProps]);
-    function openCalendar() {
+    function openCalendar(_a) {
+        var reason = _a.reason;
+        if (shouldOpenCalendar) {
+            if (!shouldOpenCalendar({ reason: reason })) {
+                return;
+            }
+        }
         setIsOpen(true);
@@ -94,3 +100,9 @@ if (onCalendarOpen) {
     }
-    var closeCalendar = (0, react_1.useCallback)(function () {
+    var closeCalendar = (0, react_1.useCallback)(function (_a) {
+        var reason = _a.reason;
+        if (shouldCloseCalendar) {
+            if (!shouldCloseCalendar({ reason: reason })) {
+                return;
+            }
+        }
         setIsOpen(false);
@@ -100,15 +112,15 @@ if (onCalendarClose) {
         }
-    }, [onCalendarClose]);
+    }, [onCalendarClose, shouldCloseCalendar]);
     function toggleCalendar() {
         if (isOpen) {
-            closeCalendar();
+            closeCalendar({ reason: 'buttonClick' });
         }
         else {
-            openCalendar();
+            openCalendar({ reason: 'buttonClick' });
         }
     }
     function onChange(value, shouldCloseCalendar) {
-        if (shouldCloseCalendar === void 0) { shouldCloseCalendar = shouldCloseCalendarProps; }
+        if (shouldCloseCalendar === void 0) { shouldCloseCalendar = shouldCloseCalendarOnSelect; }
         if (shouldCloseCalendar) {
-            closeCalendar();
+            closeCalendar({ reason: 'select' });
         }
@@ -143,7 +155,7 @@ if (onChangeProps) {
         }
-        openCalendar();
+        openCalendar({ reason: 'focus' });
     }
     var onKeyDown = (0, react_1.useCallback)(function (event) {
         if (event.key === 'Escape') {
-            closeCalendar();
+            closeCalendar({ reason: 'escape' });
         }
@@ -166,3 +178,3 @@ }, [closeCalendar]);
             (!calendarWrapperEl || !calendarWrapperEl.contains(target))) {
-            closeCalendar();
+            closeCalendar({ reason: 'outsideAction' });
         }
@@ -169,0 +181,0 @@ }, [calendarWrapper, closeCalendar, wrapper]);

dist/cjs/shared/types.d.ts

@@ -0,8 +1,11 @@
+type Range<T> = [T, T];
 export type ClassName = string | null | undefined | (string | null | undefined)[];
+export type CloseReason = 'buttonClick' | 'escape' | 'outsideAction' | 'select';
 export type Detail = 'century' | 'decade' | 'year' | 'month';
 type LooseValuePiece = string | Date | null;
-export type LooseValue = LooseValuePiece | [LooseValuePiece, LooseValuePiece];
+export type LooseValue = LooseValuePiece | Range<LooseValuePiece>;
+export type OpenReason = 'buttonClick' | 'focus';
 export type RangeType = 'century' | 'decade' | 'year' | 'month' | 'day';
 type ValuePiece = Date | null;
-export type Value = ValuePiece | [ValuePiece, ValuePiece];
+export type Value = ValuePiece | Range<ValuePiece>;
 export {};

dist/esm/DateRangePicker.d.ts

 import React from 'react';
 import PropTypes from 'prop-types';
+import makeEventProps from 'make-event-props';
 import Calendar from 'react-calendar';
 import { isMaxDate, isMinDate } from './shared/propTypes';
-import type { ClassName, Detail, LooseValue, Value } from './shared/types';
+import type { ClassName, CloseReason, Detail, LooseValue, OpenReason, Value } from './shared/types';
 type Icon = React.ReactElement | string;
 type IconOrRenderFunction = Icon | React.ComponentType | React.ReactElement;
+type CalendarProps = Omit<React.ComponentPropsWithoutRef<typeof Calendar>, 'className' | 'maxDetail' | 'onChange'>;
+type EventProps = ReturnType<typeof makeEventProps>;
 type DateRangePickerProps = {
@@ -41,2 +44,8 @@ autoFocus?: boolean;
     required?: boolean;
+    shouldCloseCalendar?: (props: {
+        reason: CloseReason;
+    }) => boolean;
+    shouldOpenCalendar?: (props: {
+        reason: OpenReason;
+    }) => boolean;
     showLeadingZeros?: boolean;
@@ -46,3 +55,3 @@ value?: LooseValue;
     yearPlaceholder?: string;
-} & Omit<React.ComponentPropsWithoutRef<typeof Calendar>, 'className' | 'maxDetail' | 'onChange'>;
+} & CalendarProps & EventProps;
 declare function DateRangePicker(props: DateRangePickerProps): JSX.Element;
@@ -49,0 +58,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, shouldCloseCalendarProps = _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, 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", "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, _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 _j = useState(isOpenProps), isOpen = _j[0], setIsOpen = _j[1];
@@ -59,3 +59,9 @@ var wrapper = useRef(null);
     }, [isOpenProps]);
-    function openCalendar() {
+    function openCalendar(_a) {
+        var reason = _a.reason;
+        if (shouldOpenCalendar) {
+            if (!shouldOpenCalendar({ reason: reason })) {
+                return;
+            }
+        }
         setIsOpen(true);
@@ -66,3 +72,9 @@ if (onCalendarOpen) {
     }
-    var closeCalendar = useCallback(function () {
+    var closeCalendar = useCallback(function (_a) {
+        var reason = _a.reason;
+        if (shouldCloseCalendar) {
+            if (!shouldCloseCalendar({ reason: reason })) {
+                return;
+            }
+        }
         setIsOpen(false);
@@ -72,15 +84,15 @@ if (onCalendarClose) {
         }
-    }, [onCalendarClose]);
+    }, [onCalendarClose, shouldCloseCalendar]);
     function toggleCalendar() {
         if (isOpen) {
-            closeCalendar();
+            closeCalendar({ reason: 'buttonClick' });
         }
         else {
-            openCalendar();
+            openCalendar({ reason: 'buttonClick' });
         }
     }
     function onChange(value, shouldCloseCalendar) {
-        if (shouldCloseCalendar === void 0) { shouldCloseCalendar = shouldCloseCalendarProps; }
+        if (shouldCloseCalendar === void 0) { shouldCloseCalendar = shouldCloseCalendarOnSelect; }
         if (shouldCloseCalendar) {
-            closeCalendar();
+            closeCalendar({ reason: 'select' });
         }
@@ -115,7 +127,7 @@ if (onChangeProps) {
         }
-        openCalendar();
+        openCalendar({ reason: 'focus' });
     }
     var onKeyDown = useCallback(function (event) {
         if (event.key === 'Escape') {
-            closeCalendar();
+            closeCalendar({ reason: 'escape' });
         }
@@ -138,3 +150,3 @@ }, [closeCalendar]);
             (!calendarWrapperEl || !calendarWrapperEl.contains(target))) {
-            closeCalendar();
+            closeCalendar({ reason: 'outsideAction' });
         }
@@ -141,0 +153,0 @@ }, [calendarWrapper, closeCalendar, wrapper]);

dist/esm/shared/types.d.ts

@@ -0,8 +1,11 @@
+type Range<T> = [T, T];
 export type ClassName = string | null | undefined | (string | null | undefined)[];
+export type CloseReason = 'buttonClick' | 'escape' | 'outsideAction' | 'select';
 export type Detail = 'century' | 'decade' | 'year' | 'month';
 type LooseValuePiece = string | Date | null;
-export type LooseValue = LooseValuePiece | [LooseValuePiece, LooseValuePiece];
+export type LooseValue = LooseValuePiece | Range<LooseValuePiece>;
+export type OpenReason = 'buttonClick' | 'focus';
 export type RangeType = 'century' | 'decade' | 'year' | 'month' | 'day';
 type ValuePiece = Date | null;
-export type Value = ValuePiece | [ValuePiece, ValuePiece];
+export type Value = ValuePiece | Range<ValuePiece>;
 export {};

package.json

 {
   "name": "@wojtekmaj/react-daterange-picker",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "description": "A date range picker for your React app.",
@@ -62,4 +62,4 @@ "main": "dist/cjs/index.js",
     "rimraf": "^3.0.0",
-    "typescript": "^5.0.2",
-    "vitest": "^0.29.2",
+    "typescript": "^5.0.0",
+    "vitest": "^0.30.1",
     "vitest-canvas-mock": "^0.2.2"
@@ -66,0 +66,0 @@ },

README.md

@@ -97,3 +97,3 @@ [![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)
 | 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><li>React function: `ClearIcon`</li></ul>                                                                                                      |
-| closeCalendar        | Whether to close the calendar on value selection.                                                                                                                                                                                            | `true`                  | `false`                                                                                                                                                                                                             |
+| closeCalendar        | Whether to close the calendar on value selection. Note: It's recommended to use shouldCloseCalendar function instead.                                                                                                                        | `true`                  | `false`                                                                                                                                                                                                             |
 | data-testid          | `data-testid` attribute for the main React-DateRange-Picker `<div>` element.                                                                                                                                                                 | n/a                     | `"date-picker"`                                                                                                                                                                                                     |
@@ -119,6 +119,8 @@ | dayAriaLabel         | `aria-label` for the day input.                                                                                                                                                                                                              | n/a                     | `"Day"`                                                                                                                                                                                                             |
 | onFocus              | Function called when the focuses an input.                                                                                                                                                                                                   | n/a                     | `(event) => alert('Focused input: ', event.target.name)`                                                                                                                                                            |
-| openCalendarOnFocus  | Whether to open the calendar on input focus.                                                                                                                                                                                                 | `true`                  | `false`                                                                                                                                                                                                             |
+| openCalendarOnFocus  | Whether to open the calendar on input focus. Note: It's recommended to use shouldOpenCalendar function instead.                                                                                                                              | `true`                  | `false`                                                                                                                                                                                                             |
 | portalContainer      | Element to render the calendar in using portal.                                                                                                                                                                                              | n/a                     | `document.getElementById('my-div')`                                                                                                                                                                                 |
 | rangeDivider         | Divider between date inputs.                                                                                                                                                                                                                 | `"–"`                   | `" to "`                                                                                                                                                                                                            |
 | required             | Whether date input should be required.                                                                                                                                                                                                       | `false`                 | `true`                                                                                                                                                                                                              |
+| shouldCloseCalendar  | Function called before the calendar closes. `reason` can be `"buttonClick"`, `"escape"`, `"outsideAction"`, or `"select"`. If it returns `false`, the calendar will not close.                                                               | n/a                     | `({ reason }) => reason !== 'outsideAction'`                                                                                                                                                                        |
+| shouldOpenCalendar   | Function called before the calendar opens. `reason` can be `"buttonClick"` or `"focus"`. If it returns `false`, the calendar will not open.                                                                                                  | n/a                     | `({ reason }) => reason !== 'focus'`                                                                                                                                                                                |
 | showLeadingZeros     | Whether leading zeros should be rendered in date inputs.                                                                                                                                                                                     | `false`                 | `true`                                                                                                                                                                                                              |
@@ -125,0 +127,0 @@ | value                | Input value.                                                                                                                                                                                                                                 | n/a                     | <ul><li>Date: `new Date(2017, 0, 1)`</li><li>String: `"2017-01-01"`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li><li>An array of strings: `["2017-01-01", "2017-08-01"]`</li></ul> |

src/shared/types.ts

@@ -0,3 +1,7 @@
+type Range<T> = [T, T];
+
 export type ClassName = string | null | undefined | (string | null | undefined)[];
 
+export type CloseReason = 'buttonClick' | 'escape' | 'outsideAction' | 'select';
+
 export type Detail = 'century' | 'decade' | 'year' | 'month';
@@ -7,4 +11,6 @@
 
-export type LooseValue = LooseValuePiece | [LooseValuePiece, LooseValuePiece];
+export type LooseValue = LooseValuePiece | Range<LooseValuePiece>;
 
+export type OpenReason = 'buttonClick' | 'focus';
+
 export type RangeType = 'century' | 'decade' | 'year' | 'month' | 'day';
@@ -14,2 +20,2 @@
 
-export type Value = ValuePiece | [ValuePiece, ValuePiece];
+export type Value = ValuePiece | Range<ValuePiece>;

No alert changes

Improved metrics

Total package byte prevSize

122057

increased by5.24%

Lines of code

2125

increased by5.56%

Number of lines in readme file

151

increased by1.34%

No dependency changes