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

Comparing version 5.0.2 to 5.1.0

dist/cjs/DateTimeRangePicker.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 DateTimeRangePickerProps = {
@@ -54,2 +58,10 @@ amPmAriaLabel?: string;
     secondPlaceholder?: string;
+    shouldCloseWidgets?: (props: {
+        reason: CloseReason;
+        widget: 'calendar' | 'clock';
+    }) => boolean;
+    shouldOpenWidgets?: (props: {
+        reason: OpenReason;
+        widget: 'calendar' | 'clock';
+    }) => boolean;
     showLeadingZeros?: boolean;
@@ -59,3 +71,3 @@ value?: LooseValue;
     yearPlaceholder?: string;
-} & Omit<React.ComponentPropsWithoutRef<typeof Calendar>, 'className' | 'maxDetail' | 'onChange'> & Omit<React.ComponentPropsWithoutRef<typeof Clock>, 'value'>;
+} & CalendarProps & ClockProps & EventProps;
 declare function DateTimeRangePicker(props: DateTimeRangePickerProps): JSX.Element;
@@ -62,0 +74,0 @@ declare namespace DateTimeRangePicker {

dist/cjs/DateTimeRangePicker.js

@@ -80,3 +80,3 @@ "use strict";
 function DateTimeRangePicker(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 ? 'datetimerange' : _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, _j = props.rangeDivider, rangeDivider = _j === void 0 ? '–' : _j, 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", "rangeDivider", "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 ? 'datetimerange' : _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, _j = props.rangeDivider, rangeDivider = _j === void 0 ? '–' : _j, 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", "rangeDivider", "required", "secondAriaLabel", "secondPlaceholder", "shouldCloseWidgets", "shouldOpenWidgets", "showLeadingZeros", "value", "yearAriaLabel", "yearPlaceholder"]);
     var _k = (0, react_1.useState)(isCalendarOpenProps), isCalendarOpen = _k[0], setIsCalendarOpen = _k[1];
@@ -93,3 +93,9 @@ var _l = (0, react_1.useState)(isClockOpenProps), isClockOpen = _l[0], setIsClockOpen = _l[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' });
         }
@@ -196,3 +221,3 @@ if (onChangeProps) {
             case 'year':
-                openCalendar();
+                openCalendar({ reason: 'focus' });
                 break;
@@ -203,3 +228,3 @@ case 'hour12':
             case 'second':
-                openClock();
+                openClock({ reason: 'focus' });
                 break;
@@ -211,3 +236,3 @@ default:
         if (event.key === 'Escape') {
-            closeWidgets();
+            closeWidgets({ reason: 'escape' });
         }
@@ -232,3 +257,3 @@ }, [closeWidgets]);
             (!clockWrapperEl || !clockWrapperEl.contains(target))) {
-            closeWidgets();
+            closeWidgets({ reason: 'outsideAction' });
         }
@@ -235,0 +260,0 @@ }, [calendarWrapper, clockWrapper, closeWidgets, wrapper]);

dist/cjs/shared/types.d.ts

@@ -0,8 +1,11 @@
+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';
 type LooseValuePiece = string | Date | null;
-export type LooseValue = LooseValuePiece | [LooseValuePiece, LooseValuePiece];
+export type LooseValue = LooseValuePiece | Range<LooseValuePiece>;
+export type OpenReason = 'buttonClick' | 'focus';
 type ValuePiece = Date | null;
-export type Value = ValuePiece | [ValuePiece, ValuePiece];
+export type Value = ValuePiece | Range<ValuePiece>;
 export {};

dist/esm/DateTimeRangePicker.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 DateTimeRangePickerProps = {
@@ -54,2 +58,10 @@ amPmAriaLabel?: string;
     secondPlaceholder?: string;
+    shouldCloseWidgets?: (props: {
+        reason: CloseReason;
+        widget: 'calendar' | 'clock';
+    }) => boolean;
+    shouldOpenWidgets?: (props: {
+        reason: OpenReason;
+        widget: 'calendar' | 'clock';
+    }) => boolean;
     showLeadingZeros?: boolean;
@@ -59,3 +71,3 @@ value?: LooseValue;
     yearPlaceholder?: string;
-} & Omit<React.ComponentPropsWithoutRef<typeof Calendar>, 'className' | 'maxDetail' | 'onChange'> & Omit<React.ComponentPropsWithoutRef<typeof Clock>, 'value'>;
+} & CalendarProps & ClockProps & EventProps;
 declare function DateTimeRangePicker(props: DateTimeRangePickerProps): JSX.Element;
@@ -62,0 +74,0 @@ declare namespace DateTimeRangePicker {

dist/esm/DateTimeRangePicker.js

@@ -52,3 +52,3 @@ var __assign = (this && this.__assign) || function () {
 export default function DateTimeRangePicker(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 ? 'datetimerange' : _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, _j = props.rangeDivider, rangeDivider = _j === void 0 ? '–' : _j, 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", "rangeDivider", "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 ? 'datetimerange' : _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, _j = props.rangeDivider, rangeDivider = _j === void 0 ? '–' : _j, 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", "rangeDivider", "required", "secondAriaLabel", "secondPlaceholder", "shouldCloseWidgets", "shouldOpenWidgets", "showLeadingZeros", "value", "yearAriaLabel", "yearPlaceholder"]);
     var _k = useState(isCalendarOpenProps), isCalendarOpen = _k[0], setIsCalendarOpen = _k[1];
@@ -65,3 +65,9 @@ var _l = useState(isClockOpenProps), isClockOpen = _l[0], setIsClockOpen = _l[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' });
         }
@@ -168,3 +193,3 @@ if (onChangeProps) {
             case 'year':
-                openCalendar();
+                openCalendar({ reason: 'focus' });
                 break;
@@ -175,3 +200,3 @@ case 'hour12':
             case 'second':
-                openClock();
+                openClock({ reason: 'focus' });
                 break;
@@ -183,3 +208,3 @@ default:
         if (event.key === 'Escape') {
-            closeWidgets();
+            closeWidgets({ reason: 'escape' });
         }
@@ -204,3 +229,3 @@ }, [closeWidgets]);
             (!clockWrapperEl || !clockWrapperEl.contains(target))) {
-            closeWidgets();
+            closeWidgets({ reason: 'outsideAction' });
         }
@@ -207,0 +232,0 @@ }, [calendarWrapper, clockWrapper, closeWidgets, wrapper]);

dist/esm/shared/types.d.ts

@@ -0,8 +1,11 @@
+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';
 type LooseValuePiece = string | Date | null;
-export type LooseValue = LooseValuePiece | [LooseValuePiece, LooseValuePiece];
+export type LooseValue = LooseValuePiece | Range<LooseValuePiece>;
+export type OpenReason = 'buttonClick' | 'focus';
 type ValuePiece = Date | null;
-export type Value = ValuePiece | [ValuePiece, ValuePiece];
+export type Value = ValuePiece | Range<ValuePiece>;
 export {};

package.json

 {
   "name": "@wojtekmaj/react-datetimerange-picker",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "description": "A datetime range picker for your React app.",
@@ -68,4 +68,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"
@@ -72,0 +72,0 @@ },

README.md

@@ -100,3 +100,3 @@ [![npm](https://img.shields.io/npm/v/@wojtekmaj/react-datetimerange-picker.svg)](https://www.npmjs.com/package/@wojtekmaj/react-datetimerange-picker) ![downloads](https://img.shields.io/npm/dt/@wojtekmaj/react-datetimerange-picker.svg) [![CI](https://github.com/wojtekmaj/react-datetimerange-picker/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-datetimerange-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-DateTimeRange-Picker `<div>` element.                                                                                                                                                                                                                                                             | n/a                     | `"date-picker"`                                                                                                                                                                                                                                                        |
@@ -126,3 +126,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')`                                                                                                                                                                                                                                    |
@@ -132,2 +132,4 @@ | rangeDivider         | Divider between datetime inputs.                                                                                                                                                                                                                                                                                                             | `"–"`                   | `" to "`                                                                                                                                                                                                                                                               |
 | secondAriaLabel      | `aria-label` for the second input.                                                                                                                                                                                                                                                                                                           | n/a                     | `"Second"`                                                                                                                                                                                                                                                             |
+| 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`                                                                                                                                                                                                                                                                 |
@@ -134,0 +136,0 @@ | value                | Input value.                                                                                                                                                                                                                                                                                                                                 | 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,6 +14,8 @@
 
-export type LooseValue = LooseValuePiece | [LooseValuePiece, LooseValuePiece];
+export type LooseValue = LooseValuePiece | Range<LooseValuePiece>;
 
+export type OpenReason = 'buttonClick' | 'focus';
+
 type ValuePiece = Date | null;
 
-export type Value = ValuePiece | [ValuePiece, ValuePiece];
+export type Value = ValuePiece | Range<ValuePiece>;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

174102

increased by5.41%

Lines of code

3044

increased by6.06%

Number of lines in readme file

158

increased by1.28%

No dependency changes