react-datetime-picker - npm Package Compare versions

Comparing version 5.0.3 to 5.1.0

dist/cjs/DateTimeInput.js

@@ -171,2 +171,3 @@ "use strict";
     var _m = (0, react_1.useState)(isWidgetOpenProps), isWidgetOpen = _m[0], setIsWidgetOpenOpen = _m[1];
+    var lastPressedKey = (0, react_1.useRef)();
     (0, react_1.useEffect)(function () {
@@ -304,2 +305,3 @@ setIsWidgetOpenOpen(isWidgetOpenProps);
     function onKeyDown(event) {
+        lastPressedKey.current = event.key;
         switch (event.key) {
@@ -322,2 +324,6 @@ case 'ArrowLeft':
         var key = event.key, input = event.target;
+        var isLastPressedKey = lastPressedKey.current === key;
+        if (!isLastPressedKey) {
+            return;
+        }
         var isNumberKey = !isNaN(Number(key));
@@ -324,0 +330,0 @@ if (!isNumberKey) {

dist/cjs/DateTimePicker.d.ts

 import React from 'react';
 import PropTypes from 'prop-types';
+import makeEventProps from 'make-event-props';
 import Calendar from 'react-calendar';
 import Clock from 'react-clock';
 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 ClockProps = Omit<React.ComponentPropsWithoutRef<typeof Clock>, 'value'>;
+type EventProps = ReturnType<typeof makeEventProps>;
 type DateTimePickerProps = {
@@ -53,2 +57,10 @@ amPmAriaLabel?: string;
     secondPlaceholder?: string;
+    shouldCloseWidgets?: (props: {
+        reason: CloseReason;
+        widget: 'calendar' | 'clock';
+    }) => boolean;
+    shouldOpenWidgets?: (props: {
+        reason: OpenReason;
+        widget: 'calendar' | 'clock';
+    }) => boolean;
     showLeadingZeros?: boolean;
@@ -58,3 +70,3 @@ value?: LooseValue;
     yearPlaceholder?: string;
-} & Omit<React.ComponentPropsWithoutRef<typeof Calendar>, 'className' | 'maxDetail' | 'onChange'> & Omit<React.ComponentPropsWithoutRef<typeof Clock>, 'value'>;
+} & CalendarProps & ClockProps & EventProps;
 declare function DateTimePicker(props: DateTimePickerProps): JSX.Element;
@@ -61,0 +73,0 @@ declare namespace DateTimePicker {

dist/cjs/DateTimePicker.js

@@ -80,3 +80,3 @@ "use strict";
 function DateTimePicker(props) {
-    var amPmAriaLabel = props.amPmAriaLabel, 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.closeWidgets, shouldCloseWidgetsProps = _c === void 0 ? true : _c, dataTestid = props["data-testid"], dayAriaLabel = props.dayAriaLabel, dayPlaceholder = props.dayPlaceholder, disableCalendar = props.disableCalendar, disableClock = props.disableClock, disabled = props.disabled, format = props.format, hourAriaLabel = props.hourAriaLabel, hourPlaceholder = props.hourPlaceholder, id = props.id, _d = props.isCalendarOpen, isCalendarOpenProps = _d === void 0 ? null : _d, _e = props.isClockOpen, isClockOpenProps = _e === void 0 ? null : _e, locale = props.locale, maxDate = props.maxDate, _f = props.maxDetail, maxDetail = _f === void 0 ? 'minute' : _f, minDate = props.minDate, minuteAriaLabel = props.minuteAriaLabel, minutePlaceholder = props.minutePlaceholder, monthAriaLabel = props.monthAriaLabel, monthPlaceholder = props.monthPlaceholder, _g = props.name, name = _g === void 0 ? 'datetime' : _g, nativeInputAriaLabel = props.nativeInputAriaLabel, onCalendarClose = props.onCalendarClose, onCalendarOpen = props.onCalendarOpen, onChangeProps = props.onChange, onClockClose = props.onClockClose, onClockOpen = props.onClockOpen, onFocusProps = props.onFocus, _h = props.openWidgetsOnFocus, openWidgetsOnFocus = _h === void 0 ? true : _h, required = props.required, secondAriaLabel = props.secondAriaLabel, secondPlaceholder = props.secondPlaceholder, showLeadingZeros = props.showLeadingZeros, value = props.value, yearAriaLabel = props.yearAriaLabel, yearPlaceholder = props.yearPlaceholder, otherProps = __rest(props, ["amPmAriaLabel", "autoFocus", "calendarAriaLabel", "calendarIcon", "className", "clearAriaLabel", "clearIcon", "closeWidgets", 'data-testid', "dayAriaLabel", "dayPlaceholder", "disableCalendar", "disableClock", "disabled", "format", "hourAriaLabel", "hourPlaceholder", "id", "isCalendarOpen", "isClockOpen", "locale", "maxDate", "maxDetail", "minDate", "minuteAriaLabel", "minutePlaceholder", "monthAriaLabel", "monthPlaceholder", "name", "nativeInputAriaLabel", "onCalendarClose", "onCalendarOpen", "onChange", "onClockClose", "onClockOpen", "onFocus", "openWidgetsOnFocus", "required", "secondAriaLabel", "secondPlaceholder", "showLeadingZeros", "value", "yearAriaLabel", "yearPlaceholder"]);
+    var amPmAriaLabel = props.amPmAriaLabel, 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.closeWidgets, shouldCloseWidgetsOnSelect = _c === void 0 ? true : _c, dataTestid = props["data-testid"], dayAriaLabel = props.dayAriaLabel, dayPlaceholder = props.dayPlaceholder, disableCalendar = props.disableCalendar, disableClock = props.disableClock, disabled = props.disabled, format = props.format, hourAriaLabel = props.hourAriaLabel, hourPlaceholder = props.hourPlaceholder, id = props.id, _d = props.isCalendarOpen, isCalendarOpenProps = _d === void 0 ? null : _d, _e = props.isClockOpen, isClockOpenProps = _e === void 0 ? null : _e, locale = props.locale, maxDate = props.maxDate, _f = props.maxDetail, maxDetail = _f === void 0 ? 'minute' : _f, minDate = props.minDate, minuteAriaLabel = props.minuteAriaLabel, minutePlaceholder = props.minutePlaceholder, monthAriaLabel = props.monthAriaLabel, monthPlaceholder = props.monthPlaceholder, _g = props.name, name = _g === void 0 ? 'datetime' : _g, nativeInputAriaLabel = props.nativeInputAriaLabel, onCalendarClose = props.onCalendarClose, onCalendarOpen = props.onCalendarOpen, onChangeProps = props.onChange, onClockClose = props.onClockClose, onClockOpen = props.onClockOpen, onFocusProps = props.onFocus, _h = props.openWidgetsOnFocus, openWidgetsOnFocus = _h === void 0 ? true : _h, required = props.required, secondAriaLabel = props.secondAriaLabel, secondPlaceholder = props.secondPlaceholder, shouldCloseWidgets = props.shouldCloseWidgets, shouldOpenWidgets = props.shouldOpenWidgets, showLeadingZeros = props.showLeadingZeros, value = props.value, yearAriaLabel = props.yearAriaLabel, yearPlaceholder = props.yearPlaceholder, otherProps = __rest(props, ["amPmAriaLabel", "autoFocus", "calendarAriaLabel", "calendarIcon", "className", "clearAriaLabel", "clearIcon", "closeWidgets", 'data-testid', "dayAriaLabel", "dayPlaceholder", "disableCalendar", "disableClock", "disabled", "format", "hourAriaLabel", "hourPlaceholder", "id", "isCalendarOpen", "isClockOpen", "locale", "maxDate", "maxDetail", "minDate", "minuteAriaLabel", "minutePlaceholder", "monthAriaLabel", "monthPlaceholder", "name", "nativeInputAriaLabel", "onCalendarClose", "onCalendarOpen", "onChange", "onClockClose", "onClockOpen", "onFocus", "openWidgetsOnFocus", "required", "secondAriaLabel", "secondPlaceholder", "shouldCloseWidgets", "shouldOpenWidgets", "showLeadingZeros", "value", "yearAriaLabel", "yearPlaceholder"]);
     var _j = (0, react_1.useState)(isCalendarOpenProps), isCalendarOpen = _j[0], setIsCalendarOpen = _j[1];
@@ -93,3 +93,9 @@ var _k = (0, react_1.useState)(isClockOpenProps), isClockOpen = _k[0], setIsClockOpen = _k[1];
     }, [isClockOpenProps]);
-    function openCalendar() {
+    function openCalendar(_a) {
+        var reason = _a.reason;
+        if (shouldOpenWidgets) {
+            if (!shouldOpenWidgets({ reason: reason, widget: 'calendar' })) {
+                return;
+            }
+        }
         setIsClockOpen(false);
@@ -101,3 +107,9 @@ setIsCalendarOpen(true);
     }
-    var closeCalendar = (0, react_1.useCallback)(function () {
+    var closeCalendar = (0, react_1.useCallback)(function (_a) {
+        var reason = _a.reason;
+        if (shouldCloseWidgets) {
+            if (!shouldCloseWidgets({ reason: reason, widget: 'calendar' })) {
+                return;
+            }
+        }
         setIsCalendarOpen(false);
@@ -107,12 +119,18 @@ if (onCalendarClose) {
         }
-    }, [onCalendarClose]);
+    }, [onCalendarClose, shouldCloseWidgets]);
     function toggleCalendar() {
         if (isCalendarOpen) {
-            closeCalendar();
+            closeCalendar({ reason: 'buttonClick' });
         }
         else {
-            openCalendar();
+            openCalendar({ reason: 'buttonClick' });
         }
     }
-    function openClock() {
+    function openClock(_a) {
+        var reason = _a.reason;
+        if (shouldOpenWidgets) {
+            if (!shouldOpenWidgets({ reason: reason, widget: 'clock' })) {
+                return;
+            }
+        }
         setIsCalendarOpen(false);
@@ -124,3 +142,9 @@ setIsClockOpen(true);
     }
-    var closeClock = (0, react_1.useCallback)(function () {
+    var closeClock = (0, react_1.useCallback)(function (_a) {
+        var reason = _a.reason;
+        if (shouldCloseWidgets) {
+            if (!shouldCloseWidgets({ reason: reason, widget: 'clock' })) {
+                return;
+            }
+        }
         setIsClockOpen(false);
@@ -130,11 +154,12 @@ if (onClockClose) {
         }
-    }, [onClockClose]);
-    var closeWidgets = (0, react_1.useCallback)(function () {
-        closeCalendar();
-        closeClock();
+    }, [onClockClose, shouldCloseWidgets]);
+    var closeWidgets = (0, react_1.useCallback)(function (_a) {
+        var reason = _a.reason;
+        closeCalendar({ reason: reason });
+        closeClock({ reason: reason });
     }, [closeCalendar, closeClock]);
     function onChange(value, shouldCloseWidgets) {
-        if (shouldCloseWidgets === void 0) { shouldCloseWidgets = shouldCloseWidgetsProps; }
+        if (shouldCloseWidgets === void 0) { shouldCloseWidgets = shouldCloseWidgetsOnSelect; }
         if (shouldCloseWidgets) {
-            closeWidgets();
+            closeWidgets({ reason: 'select' });
         }
@@ -176,3 +201,3 @@ if (onChangeProps) {
             case 'year':
-                openCalendar();
+                openCalendar({ reason: 'focus' });
                 break;
@@ -183,3 +208,3 @@ case 'hour12':
             case 'second':
-                openClock();
+                openClock({ reason: 'focus' });
                 break;
@@ -191,3 +216,3 @@ default:
         if (event.key === 'Escape') {
-            closeWidgets();
+            closeWidgets({ reason: 'escape' });
         }
@@ -212,3 +237,3 @@ }, [closeWidgets]);
             (!clockWrapperEl || !clockWrapperEl.contains(target))) {
-            closeWidgets();
+            closeWidgets({ reason: 'outsideAction' });
         }
@@ -215,0 +240,0 @@ }, [calendarWrapper, clockWrapper, closeWidgets, wrapper]);

dist/cjs/shared/types.d.ts

@@ -0,6 +1,10 @@
+type Range<T> = [T, T];
 export type AmPmType = 'am' | 'pm';
 export type ClassName = string | null | undefined | (string | null | undefined)[];
+export type CloseReason = 'buttonClick' | 'escape' | 'outsideAction' | 'select';
 export type Detail = 'hour' | 'minute' | 'second';
 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 Value = Date | null;
+export {};

dist/esm/DateTimeInput.js

@@ -143,2 +143,3 @@ var __assign = (this && this.__assign) || function () {
     var _m = useState(isWidgetOpenProps), isWidgetOpen = _m[0], setIsWidgetOpenOpen = _m[1];
+    var lastPressedKey = useRef();
     useEffect(function () {
@@ -276,2 +277,3 @@ setIsWidgetOpenOpen(isWidgetOpenProps);
     function onKeyDown(event) {
+        lastPressedKey.current = event.key;
         switch (event.key) {
@@ -294,2 +296,6 @@ case 'ArrowLeft':
         var key = event.key, input = event.target;
+        var isLastPressedKey = lastPressedKey.current === key;
+        if (!isLastPressedKey) {
+            return;
+        }
         var isNumberKey = !isNaN(Number(key));
@@ -296,0 +302,0 @@ if (!isNumberKey) {

dist/esm/DateTimePicker.d.ts

 import React from 'react';
 import PropTypes from 'prop-types';
+import makeEventProps from 'make-event-props';
 import Calendar from 'react-calendar';
 import Clock from 'react-clock';
 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 ClockProps = Omit<React.ComponentPropsWithoutRef<typeof Clock>, 'value'>;
+type EventProps = ReturnType<typeof makeEventProps>;
 type DateTimePickerProps = {
@@ -53,2 +57,10 @@ amPmAriaLabel?: string;
     secondPlaceholder?: string;
+    shouldCloseWidgets?: (props: {
+        reason: CloseReason;
+        widget: 'calendar' | 'clock';
+    }) => boolean;
+    shouldOpenWidgets?: (props: {
+        reason: OpenReason;
+        widget: 'calendar' | 'clock';
+    }) => boolean;
     showLeadingZeros?: boolean;
@@ -58,3 +70,3 @@ value?: LooseValue;
     yearPlaceholder?: string;
-} & Omit<React.ComponentPropsWithoutRef<typeof Calendar>, 'className' | 'maxDetail' | 'onChange'> & Omit<React.ComponentPropsWithoutRef<typeof Clock>, 'value'>;
+} & CalendarProps & ClockProps & EventProps;
 declare function DateTimePicker(props: DateTimePickerProps): JSX.Element;
@@ -61,0 +73,0 @@ declare namespace DateTimePicker {

dist/esm/DateTimePicker.js

@@ -52,3 +52,3 @@ var __assign = (this && this.__assign) || function () {
 export default function DateTimePicker(props) {
-    var amPmAriaLabel = props.amPmAriaLabel, 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.closeWidgets, shouldCloseWidgetsProps = _c === void 0 ? true : _c, dataTestid = props["data-testid"], dayAriaLabel = props.dayAriaLabel, dayPlaceholder = props.dayPlaceholder, disableCalendar = props.disableCalendar, disableClock = props.disableClock, disabled = props.disabled, format = props.format, hourAriaLabel = props.hourAriaLabel, hourPlaceholder = props.hourPlaceholder, id = props.id, _d = props.isCalendarOpen, isCalendarOpenProps = _d === void 0 ? null : _d, _e = props.isClockOpen, isClockOpenProps = _e === void 0 ? null : _e, locale = props.locale, maxDate = props.maxDate, _f = props.maxDetail, maxDetail = _f === void 0 ? 'minute' : _f, minDate = props.minDate, minuteAriaLabel = props.minuteAriaLabel, minutePlaceholder = props.minutePlaceholder, monthAriaLabel = props.monthAriaLabel, monthPlaceholder = props.monthPlaceholder, _g = props.name, name = _g === void 0 ? 'datetime' : _g, nativeInputAriaLabel = props.nativeInputAriaLabel, onCalendarClose = props.onCalendarClose, onCalendarOpen = props.onCalendarOpen, onChangeProps = props.onChange, onClockClose = props.onClockClose, onClockOpen = props.onClockOpen, onFocusProps = props.onFocus, _h = props.openWidgetsOnFocus, openWidgetsOnFocus = _h === void 0 ? true : _h, required = props.required, secondAriaLabel = props.secondAriaLabel, secondPlaceholder = props.secondPlaceholder, showLeadingZeros = props.showLeadingZeros, value = props.value, yearAriaLabel = props.yearAriaLabel, yearPlaceholder = props.yearPlaceholder, otherProps = __rest(props, ["amPmAriaLabel", "autoFocus", "calendarAriaLabel", "calendarIcon", "className", "clearAriaLabel", "clearIcon", "closeWidgets", 'data-testid', "dayAriaLabel", "dayPlaceholder", "disableCalendar", "disableClock", "disabled", "format", "hourAriaLabel", "hourPlaceholder", "id", "isCalendarOpen", "isClockOpen", "locale", "maxDate", "maxDetail", "minDate", "minuteAriaLabel", "minutePlaceholder", "monthAriaLabel", "monthPlaceholder", "name", "nativeInputAriaLabel", "onCalendarClose", "onCalendarOpen", "onChange", "onClockClose", "onClockOpen", "onFocus", "openWidgetsOnFocus", "required", "secondAriaLabel", "secondPlaceholder", "showLeadingZeros", "value", "yearAriaLabel", "yearPlaceholder"]);
+    var amPmAriaLabel = props.amPmAriaLabel, 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.closeWidgets, shouldCloseWidgetsOnSelect = _c === void 0 ? true : _c, dataTestid = props["data-testid"], dayAriaLabel = props.dayAriaLabel, dayPlaceholder = props.dayPlaceholder, disableCalendar = props.disableCalendar, disableClock = props.disableClock, disabled = props.disabled, format = props.format, hourAriaLabel = props.hourAriaLabel, hourPlaceholder = props.hourPlaceholder, id = props.id, _d = props.isCalendarOpen, isCalendarOpenProps = _d === void 0 ? null : _d, _e = props.isClockOpen, isClockOpenProps = _e === void 0 ? null : _e, locale = props.locale, maxDate = props.maxDate, _f = props.maxDetail, maxDetail = _f === void 0 ? 'minute' : _f, minDate = props.minDate, minuteAriaLabel = props.minuteAriaLabel, minutePlaceholder = props.minutePlaceholder, monthAriaLabel = props.monthAriaLabel, monthPlaceholder = props.monthPlaceholder, _g = props.name, name = _g === void 0 ? 'datetime' : _g, nativeInputAriaLabel = props.nativeInputAriaLabel, onCalendarClose = props.onCalendarClose, onCalendarOpen = props.onCalendarOpen, onChangeProps = props.onChange, onClockClose = props.onClockClose, onClockOpen = props.onClockOpen, onFocusProps = props.onFocus, _h = props.openWidgetsOnFocus, openWidgetsOnFocus = _h === void 0 ? true : _h, required = props.required, secondAriaLabel = props.secondAriaLabel, secondPlaceholder = props.secondPlaceholder, shouldCloseWidgets = props.shouldCloseWidgets, shouldOpenWidgets = props.shouldOpenWidgets, showLeadingZeros = props.showLeadingZeros, value = props.value, yearAriaLabel = props.yearAriaLabel, yearPlaceholder = props.yearPlaceholder, otherProps = __rest(props, ["amPmAriaLabel", "autoFocus", "calendarAriaLabel", "calendarIcon", "className", "clearAriaLabel", "clearIcon", "closeWidgets", 'data-testid', "dayAriaLabel", "dayPlaceholder", "disableCalendar", "disableClock", "disabled", "format", "hourAriaLabel", "hourPlaceholder", "id", "isCalendarOpen", "isClockOpen", "locale", "maxDate", "maxDetail", "minDate", "minuteAriaLabel", "minutePlaceholder", "monthAriaLabel", "monthPlaceholder", "name", "nativeInputAriaLabel", "onCalendarClose", "onCalendarOpen", "onChange", "onClockClose", "onClockOpen", "onFocus", "openWidgetsOnFocus", "required", "secondAriaLabel", "secondPlaceholder", "shouldCloseWidgets", "shouldOpenWidgets", "showLeadingZeros", "value", "yearAriaLabel", "yearPlaceholder"]);
     var _j = useState(isCalendarOpenProps), isCalendarOpen = _j[0], setIsCalendarOpen = _j[1];
@@ -65,3 +65,9 @@ var _k = useState(isClockOpenProps), isClockOpen = _k[0], setIsClockOpen = _k[1];
     }, [isClockOpenProps]);
-    function openCalendar() {
+    function openCalendar(_a) {
+        var reason = _a.reason;
+        if (shouldOpenWidgets) {
+            if (!shouldOpenWidgets({ reason: reason, widget: 'calendar' })) {
+                return;
+            }
+        }
         setIsClockOpen(false);
@@ -73,3 +79,9 @@ setIsCalendarOpen(true);
     }
-    var closeCalendar = useCallback(function () {
+    var closeCalendar = useCallback(function (_a) {
+        var reason = _a.reason;
+        if (shouldCloseWidgets) {
+            if (!shouldCloseWidgets({ reason: reason, widget: 'calendar' })) {
+                return;
+            }
+        }
         setIsCalendarOpen(false);
@@ -79,12 +91,18 @@ if (onCalendarClose) {
         }
-    }, [onCalendarClose]);
+    }, [onCalendarClose, shouldCloseWidgets]);
     function toggleCalendar() {
         if (isCalendarOpen) {
-            closeCalendar();
+            closeCalendar({ reason: 'buttonClick' });
         }
         else {
-            openCalendar();
+            openCalendar({ reason: 'buttonClick' });
         }
     }
-    function openClock() {
+    function openClock(_a) {
+        var reason = _a.reason;
+        if (shouldOpenWidgets) {
+            if (!shouldOpenWidgets({ reason: reason, widget: 'clock' })) {
+                return;
+            }
+        }
         setIsCalendarOpen(false);
@@ -96,3 +114,9 @@ setIsClockOpen(true);
     }
-    var closeClock = useCallback(function () {
+    var closeClock = useCallback(function (_a) {
+        var reason = _a.reason;
+        if (shouldCloseWidgets) {
+            if (!shouldCloseWidgets({ reason: reason, widget: 'clock' })) {
+                return;
+            }
+        }
         setIsClockOpen(false);
@@ -102,11 +126,12 @@ if (onClockClose) {
         }
-    }, [onClockClose]);
-    var closeWidgets = useCallback(function () {
-        closeCalendar();
-        closeClock();
+    }, [onClockClose, shouldCloseWidgets]);
+    var closeWidgets = useCallback(function (_a) {
+        var reason = _a.reason;
+        closeCalendar({ reason: reason });
+        closeClock({ reason: reason });
     }, [closeCalendar, closeClock]);
     function onChange(value, shouldCloseWidgets) {
-        if (shouldCloseWidgets === void 0) { shouldCloseWidgets = shouldCloseWidgetsProps; }
+        if (shouldCloseWidgets === void 0) { shouldCloseWidgets = shouldCloseWidgetsOnSelect; }
         if (shouldCloseWidgets) {
-            closeWidgets();
+            closeWidgets({ reason: 'select' });
         }
@@ -148,3 +173,3 @@ if (onChangeProps) {
             case 'year':
-                openCalendar();
+                openCalendar({ reason: 'focus' });
                 break;
@@ -155,3 +180,3 @@ case 'hour12':
             case 'second':
-                openClock();
+                openClock({ reason: 'focus' });
                 break;
@@ -163,3 +188,3 @@ default:
         if (event.key === 'Escape') {
-            closeWidgets();
+            closeWidgets({ reason: 'escape' });
         }
@@ -184,3 +209,3 @@ }, [closeWidgets]);
             (!clockWrapperEl || !clockWrapperEl.contains(target))) {
-            closeWidgets();
+            closeWidgets({ reason: 'outsideAction' });
         }
@@ -187,0 +212,0 @@ }, [calendarWrapper, clockWrapper, closeWidgets, wrapper]);

dist/esm/shared/types.d.ts

@@ -0,6 +1,10 @@
+type Range<T> = [T, T];
 export type AmPmType = 'am' | 'pm';
 export type ClassName = string | null | undefined | (string | null | undefined)[];
+export type CloseReason = 'buttonClick' | 'escape' | 'outsideAction' | 'select';
 export type Detail = 'hour' | 'minute' | 'second';
 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 Value = Date | null;
+export {};

package.json

 {
   "name": "react-datetime-picker",
-  "version": "5.0.3",
+  "version": "5.1.0",
   "description": "A date range picker for your React app.",
@@ -67,4 +67,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"
@@ -71,0 +71,0 @@ },

README.md

@@ -99,3 +99,3 @@ [![npm](https://img.shields.io/npm/v/react-datetime-picker.svg)](https://www.npmjs.com/package/react-datetime-picker) ![downloads](https://img.shields.io/npm/dt/react-datetime-picker.svg) [![CI](https://github.com/wojtekmaj/react-datetime-picker/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-datetime-picker/actions)
 | clockClassName       | Class name(s) that will be added along with `"react-clock"` to the main React-Calendar `<div>` element.                                                                                                                                                                                                                            | n/a                     | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>                                                                                                                                                                    |
-| closeWidgets         | Whether to close the widgets on value selection.                                                                                                                                                                                                                                                                                   | `true`                  | `false`                                                                                                                                                                                                                                                                |
+| closeWidgets         | Whether to close the widgets on value selection. Note: It's recommended to use shouldCloseWidgets function instead.                                                                                                                                                                                                                | `true`                  | `false`                                                                                                                                                                                                                                                                |
 | data-testid          | `data-testid` attribute for the main React-DateTime-Picker `<div>` element.                                                                                                                                                                                                                                                        | n/a                     | `"date-picker"`                                                                                                                                                                                                                                                        |
@@ -129,3 +129,3 @@ | 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)`                                                                                                                                                                                                               |
-| openWidgetsOnFocus   | Whether to open the widgets on input focus.                                                                                                                                                                                                                                                                                        | `true`                  | `false`                                                                                                                                                                                                                                                                |
+| openWidgetsOnFocus   | Whether to open the widgets on input focus. Note: It's recommended to use shouldOpenWidgets function instead.                                                                                                                                                                                                                      | `true`                  | `false`                                                                                                                                                                                                                                                                |
 | portalContainer      | Element to render the widgets in using portal.                                                                                                                                                                                                                                                                                     | n/a                     | `document.getElementById('my-div')`                                                                                                                                                                                                                                    |
@@ -136,2 +136,4 @@ | 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"`                                                                                                                                                                                                                                                              |
 | secondPlaceholder    | `placeholder` for the second input.                                                                                                                                                                                                                                                                                                | `"--"`                  | `"ss"`                                                                                                                                                                                                                                                                 |
+| shouldCloseWidgets   | Function called before the widgets close. `reason` can be `"buttonClick"`, `"escape"`, `"outsideAction"`, or `"select"`. `widget` can be `"calendar"` or `"clock"`. If it returns `false`, the widget will not close.                                                                                                              | n/a                     | `({ reason, widget }) => reason !== 'outsideAction' && widget === 'calendar'`                                                                                                                                                                                          |
+| shouldOpenWidgets    | Function called before the widgets open. `reason` can be `"buttonClick"` or `"focus"`. `widget` can be `"calendar"` or `"clock"`. If it returns `false`, the widget will not open.                                                                                                                                                 | n/a                     | `({ reason, widget }) => reason !== 'focus' && widget === 'calendar'`                                                                                                                                                                                                  |
 | showLeadingZeros     | Whether leading zeros should be rendered in datetime inputs.                                                                                                                                                                                                                                                                       | `false`                 | `true`                                                                                                                                                                                                                                                                 |
@@ -138,0 +140,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, 22, 15)`</li><li>String: `"2017-01-01T22:15:00"`</li><li>An array of dates: `[new Date(2017, 0, 1, 22, 15), new Date(2017, 0, 1, 23, 45)]`</li><li>An array of strings: `["2017-01-01T22:15:00", "2017-01-01T23:45:00"]`</li></ul> |

src/shared/types.ts

@@ -0,1 +1,3 @@
+type Range<T> = [T, T];
+
 export type AmPmType = 'am' | 'pm';
@@ -5,2 +7,4 @@
 
+export type CloseReason = 'buttonClick' | 'escape' | 'outsideAction' | 'select';
+
 export type Detail = 'hour' | 'minute' | 'second';
@@ -10,4 +14,6 @@
 
-export type LooseValue = LooseValuePiece | [LooseValuePiece, LooseValuePiece];
+export type LooseValue = LooseValuePiece | Range<LooseValuePiece>;
 
+export type OpenReason = 'buttonClick' | 'focus';
+
 export type Value = Date | null;

No alert changes

Improved metrics

Total package byte prevSize

301969

increased by3.62%

Lines of code

6142

increased by3.68%

Number of lines in readme file

167

increased by1.21%

No dependency changes