react-date-picker - npm Package Compare versions

Comparing version 10.0.3 to 10.1.0

dist/cjs/DateInput.js

@@ -174,2 +174,3 @@ "use strict";
     var _k = (0, react_1.useState)(isCalendarOpenProps), isCalendarOpen = _k[0], setIsCalendarOpen = _k[1];
+    var lastPressedKey = (0, react_1.useRef)();
     (0, react_1.useEffect)(function () {
@@ -289,2 +290,3 @@ setIsCalendarOpen(isCalendarOpenProps);
     function onKeyDown(event) {
+        lastPressedKey.current = event.key;
         switch (event.key) {
@@ -306,2 +308,6 @@ case 'ArrowLeft':
         var key = event.key, input = event.target;
+        var isLastPressedKey = lastPressedKey.current === key;
+        if (!isLastPressedKey) {
+            return;
+        }
         var isNumberKey = !isNaN(Number(key));
@@ -308,0 +314,0 @@ if (!isNumberKey) {

dist/cjs/DateInput/DayInput.d.ts

@@ -17,5 +17,5 @@ import React from 'react';
         disabled: PropTypes.Requireable<boolean>;
-        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | Required<PropTypes.InferProps<{
             current: PropTypes.Requireable<any>;
-        }> | null | undefined>>;
+        }>> | null | undefined>>;
         maxDate: typeof isMaxDate;
@@ -22,0 +22,0 @@ minDate: typeof isMinDate;

dist/cjs/DateInput/Input.d.ts

@@ -35,5 +35,5 @@ import React from 'react';
         disabled: PropTypes.Requireable<boolean>;
-        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | Required<PropTypes.InferProps<{
             current: PropTypes.Requireable<any>;
-        }> | null | undefined>>;
+        }>> | null | undefined>>;
         max: PropTypes.Requireable<number>;
@@ -40,0 +40,0 @@ min: PropTypes.Requireable<number>;

dist/cjs/DateInput/MonthInput.d.ts

@@ -16,5 +16,5 @@ import React from 'react';
         disabled: PropTypes.Requireable<boolean>;
-        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | Required<PropTypes.InferProps<{
             current: PropTypes.Requireable<any>;
-        }> | null | undefined>>;
+        }>> | null | undefined>>;
         maxDate: typeof isMaxDate;
@@ -21,0 +21,0 @@ minDate: typeof isMinDate;

dist/cjs/DateInput/MonthSelect.d.ts

@@ -32,5 +32,5 @@ import React from 'react';
         disabled: PropTypes.Requireable<boolean>;
-        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | Required<PropTypes.InferProps<{
             current: PropTypes.Requireable<any>;
-        }> | null | undefined>>;
+        }>> | null | undefined>>;
         locale: PropTypes.Requireable<string>;
@@ -37,0 +37,0 @@ maxDate: typeof isMaxDate;

dist/cjs/DateInput/YearInput.d.ts

@@ -17,5 +17,5 @@ import React from 'react';
         disabled: PropTypes.Requireable<boolean>;
-        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | Required<PropTypes.InferProps<{
             current: PropTypes.Requireable<any>;
-        }> | null | undefined>>;
+        }>> | null | undefined>>;
         maxDate: typeof isMaxDate;
@@ -22,0 +22,0 @@ minDate: typeof isMinDate;

dist/cjs/DatePicker.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 DatePickerProps = {
@@ -41,2 +44,8 @@ autoFocus?: boolean;
     returnValue?: 'start' | 'end' | 'range';
+    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 DatePicker(props: DatePickerProps): JSX.Element;
@@ -49,0 +58,0 @@ declare namespace DatePicker {

dist/cjs/DatePicker.js

@@ -79,3 +79,3 @@ "use strict";
 function DatePicker(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 ? 'date' : _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, required = props.required, _h = props.returnValue, returnValue = _h === void 0 ? 'start' : _h, 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", "required", "returnValue", "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 ? 'date' : _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, required = props.required, _h = props.returnValue, returnValue = _h === void 0 ? 'start' : _h, 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", "required", "returnValue", "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' });
         }
@@ -131,7 +143,7 @@ if (onChangeProps) {
         }
-        openCalendar();
+        openCalendar({ reason: 'focus' });
     }
     var onKeyDown = (0, react_1.useCallback)(function (event) {
         if (event.key === 'Escape') {
-            closeCalendar();
+            closeCalendar({ reason: 'escape' });
         }
@@ -154,3 +166,3 @@ }, [closeCalendar]);
             (!calendarWrapperEl || !calendarWrapperEl.contains(target))) {
-            closeCalendar();
+            closeCalendar({ reason: 'outsideAction' });
         }
@@ -157,0 +169,0 @@ }, [calendarWrapper, closeCalendar, wrapper]);

dist/cjs/shared/propTypes.d.ts

@@ -5,4 +5,4 @@ import PropTypes from 'prop-types';
 export declare function isMaxDate(props: Record<string, unknown>, propName: string, componentName: string): Error | null;
-export declare const isRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+export declare const isRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | Required<PropTypes.InferProps<{
     current: PropTypes.Requireable<any>;
-}> | null | undefined>>;
+}>> | null | undefined>>;

dist/cjs/shared/propTypes.js

@@ -52,5 +52,5 @@ "use strict";
     prop_types_1.default.func,
-    prop_types_1.default.shape({
+    prop_types_1.default.exact({
         current: prop_types_1.default.any,
     }),
 ]);

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';
 export 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/DateInput.js

@@ -146,2 +146,3 @@ var __assign = (this && this.__assign) || function () {
     var _k = useState(isCalendarOpenProps), isCalendarOpen = _k[0], setIsCalendarOpen = _k[1];
+    var lastPressedKey = useRef();
     useEffect(function () {
@@ -261,2 +262,3 @@ setIsCalendarOpen(isCalendarOpenProps);
     function onKeyDown(event) {
+        lastPressedKey.current = event.key;
         switch (event.key) {
@@ -278,2 +280,6 @@ case 'ArrowLeft':
         var key = event.key, input = event.target;
+        var isLastPressedKey = lastPressedKey.current === key;
+        if (!isLastPressedKey) {
+            return;
+        }
         var isNumberKey = !isNaN(Number(key));
@@ -280,0 +286,0 @@ if (!isNumberKey) {

dist/esm/DateInput/DayInput.d.ts

@@ -17,5 +17,5 @@ import React from 'react';
         disabled: PropTypes.Requireable<boolean>;
-        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | Required<PropTypes.InferProps<{
             current: PropTypes.Requireable<any>;
-        }> | null | undefined>>;
+        }>> | null | undefined>>;
         maxDate: typeof isMaxDate;
@@ -22,0 +22,0 @@ minDate: typeof isMinDate;

dist/esm/DateInput/Input.d.ts

@@ -35,5 +35,5 @@ import React from 'react';
         disabled: PropTypes.Requireable<boolean>;
-        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | Required<PropTypes.InferProps<{
             current: PropTypes.Requireable<any>;
-        }> | null | undefined>>;
+        }>> | null | undefined>>;
         max: PropTypes.Requireable<number>;
@@ -40,0 +40,0 @@ min: PropTypes.Requireable<number>;

dist/esm/DateInput/MonthInput.d.ts

@@ -16,5 +16,5 @@ import React from 'react';
         disabled: PropTypes.Requireable<boolean>;
-        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | Required<PropTypes.InferProps<{
             current: PropTypes.Requireable<any>;
-        }> | null | undefined>>;
+        }>> | null | undefined>>;
         maxDate: typeof isMaxDate;
@@ -21,0 +21,0 @@ minDate: typeof isMinDate;

dist/esm/DateInput/MonthSelect.d.ts

@@ -32,5 +32,5 @@ import React from 'react';
         disabled: PropTypes.Requireable<boolean>;
-        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | Required<PropTypes.InferProps<{
             current: PropTypes.Requireable<any>;
-        }> | null | undefined>>;
+        }>> | null | undefined>>;
         locale: PropTypes.Requireable<string>;
@@ -37,0 +37,0 @@ maxDate: typeof isMaxDate;

dist/esm/DateInput/YearInput.d.ts

@@ -17,5 +17,5 @@ import React from 'react';
         disabled: PropTypes.Requireable<boolean>;
-        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | Required<PropTypes.InferProps<{
             current: PropTypes.Requireable<any>;
-        }> | null | undefined>>;
+        }>> | null | undefined>>;
         maxDate: typeof isMaxDate;
@@ -22,0 +22,0 @@ minDate: typeof isMinDate;

dist/esm/DatePicker.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 DatePickerProps = {
@@ -41,2 +44,8 @@ autoFocus?: boolean;
     returnValue?: 'start' | 'end' | 'range';
+    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 DatePicker(props: DatePickerProps): JSX.Element;
@@ -49,0 +58,0 @@ declare namespace DatePicker {

dist/esm/DatePicker.js

@@ -51,3 +51,3 @@ var __assign = (this && this.__assign) || function () {
 export default function DatePicker(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 ? 'date' : _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, required = props.required, _h = props.returnValue, returnValue = _h === void 0 ? 'start' : _h, 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", "required", "returnValue", "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 ? 'date' : _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, required = props.required, _h = props.returnValue, returnValue = _h === void 0 ? 'start' : _h, 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", "required", "returnValue", "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' });
         }
@@ -103,7 +115,7 @@ if (onChangeProps) {
         }
-        openCalendar();
+        openCalendar({ reason: 'focus' });
     }
     var onKeyDown = useCallback(function (event) {
         if (event.key === 'Escape') {
-            closeCalendar();
+            closeCalendar({ reason: 'escape' });
         }
@@ -126,3 +138,3 @@ }, [closeCalendar]);
             (!calendarWrapperEl || !calendarWrapperEl.contains(target))) {
-            closeCalendar();
+            closeCalendar({ reason: 'outsideAction' });
         }
@@ -129,0 +141,0 @@ }, [calendarWrapper, closeCalendar, wrapper]);

dist/esm/shared/propTypes.d.ts

@@ -5,4 +5,4 @@ import PropTypes from 'prop-types';
 export declare function isMaxDate(props: Record<string, unknown>, propName: string, componentName: string): Error | null;
-export declare const isRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+export declare const isRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | Required<PropTypes.InferProps<{
     current: PropTypes.Requireable<any>;
-}> | null | undefined>>;
+}>> | null | undefined>>;

dist/esm/shared/propTypes.js

@@ -44,5 +44,5 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     PropTypes.func,
-    PropTypes.shape({
+    PropTypes.exact({
         current: PropTypes.any,
     }),
 ]);

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';
 export 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": "react-date-picker",
-  "version": "10.0.3",
+  "version": "10.1.0",
   "description": "A date 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/react-date-picker.svg)](https://www.npmjs.com/package/react-date-picker) ![downloads](https://img.shields.io/npm/dt/react-date-picker.svg) [![CI](https://github.com/wojtekmaj/react-date-picker/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-date-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-Date-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')`                                                                                                                                                                                 |
 | required             | Whether date input should be required.                                                                                                                                                                                                       | `false`                 | `true`                                                                                                                                                                                                              |
 | returnValue          | Which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be `"start"`, `"end"` or `"range"`. The latter will cause an array with start and end values to be passed.                           | `"start"`               | `"range"`                                                                                                                                                                                                           |
+| 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. Note that if you pass an array of values, only first value will be fully utilized.                                                                                                                                              | 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/propTypes.ts

@@ -58,5 +58,5 @@ import PropTypes from 'prop-types';
   PropTypes.func,
-  PropTypes.shape({
+  PropTypes.exact({
     current: PropTypes.any,
   }),
 ]);

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

317587

increased by2.54%

Lines of code

7064

increased by2.21%

Number of lines in readme file

171

increased by1.18%

No dependency changes