react-datetime-picker - npm Package Compare versions

Comparing version 5.1.0 to 5.2.0

dist/cjs/DateTimeInput.d.ts

@@ -27,2 +27,3 @@ /// <reference types="react" />
     onChange?: (value: Date | null, shouldCloseWidgets: boolean) => void;
+    onInvalidChange?: () => void;
     required?: boolean;
@@ -36,3 +37,3 @@ secondAriaLabel?: string;
 };
-declare function DateTimeInput({ amPmAriaLabel, autoFocus, className, dayAriaLabel, dayPlaceholder, disabled, format, hourAriaLabel, hourPlaceholder, isWidgetOpen: isWidgetOpenProps, locale, maxDate, maxDetail, minDate, minuteAriaLabel, minutePlaceholder, monthAriaLabel, monthPlaceholder, name, nativeInputAriaLabel, onChange: onChangeProps, required, secondAriaLabel, secondPlaceholder, showLeadingZeros, value: valueProps, yearAriaLabel, yearPlaceholder, }: DateTimeInputProps): JSX.Element;
+declare function DateTimeInput({ amPmAriaLabel, autoFocus, className, dayAriaLabel, dayPlaceholder, disabled, format, hourAriaLabel, hourPlaceholder, isWidgetOpen: isWidgetOpenProps, locale, maxDate, maxDetail, minDate, minuteAriaLabel, minutePlaceholder, monthAriaLabel, monthPlaceholder, name, nativeInputAriaLabel, onChange: onChangeProps, onInvalidChange, required, secondAriaLabel, secondPlaceholder, showLeadingZeros, value: valueProps, yearAriaLabel, yearPlaceholder, }: DateTimeInputProps): JSX.Element;
 declare namespace DateTimeInput {
@@ -39,0 +40,0 @@ var propTypes: {

dist/cjs/DateTimeInput.js

@@ -152,3 +152,3 @@ "use strict";
 function DateTimeInput(_a) {
-    var amPmAriaLabel = _a.amPmAriaLabel, autoFocus = _a.autoFocus, className = _a.className, dayAriaLabel = _a.dayAriaLabel, dayPlaceholder = _a.dayPlaceholder, disabled = _a.disabled, format = _a.format, hourAriaLabel = _a.hourAriaLabel, hourPlaceholder = _a.hourPlaceholder, isWidgetOpenProps = _a.isWidgetOpen, locale = _a.locale, maxDate = _a.maxDate, _b = _a.maxDetail, maxDetail = _b === void 0 ? 'minute' : _b, minDate = _a.minDate, minuteAriaLabel = _a.minuteAriaLabel, minutePlaceholder = _a.minutePlaceholder, monthAriaLabel = _a.monthAriaLabel, monthPlaceholder = _a.monthPlaceholder, _c = _a.name, name = _c === void 0 ? 'datetime' : _c, nativeInputAriaLabel = _a.nativeInputAriaLabel, onChangeProps = _a.onChange, required = _a.required, secondAriaLabel = _a.secondAriaLabel, secondPlaceholder = _a.secondPlaceholder, showLeadingZeros = _a.showLeadingZeros, valueProps = _a.value, yearAriaLabel = _a.yearAriaLabel, yearPlaceholder = _a.yearPlaceholder;
+    var amPmAriaLabel = _a.amPmAriaLabel, autoFocus = _a.autoFocus, className = _a.className, dayAriaLabel = _a.dayAriaLabel, dayPlaceholder = _a.dayPlaceholder, disabled = _a.disabled, format = _a.format, hourAriaLabel = _a.hourAriaLabel, hourPlaceholder = _a.hourPlaceholder, isWidgetOpenProps = _a.isWidgetOpen, locale = _a.locale, maxDate = _a.maxDate, _b = _a.maxDetail, maxDetail = _b === void 0 ? 'minute' : _b, minDate = _a.minDate, minuteAriaLabel = _a.minuteAriaLabel, minutePlaceholder = _a.minutePlaceholder, monthAriaLabel = _a.monthAriaLabel, monthPlaceholder = _a.monthPlaceholder, _c = _a.name, name = _c === void 0 ? 'datetime' : _c, nativeInputAriaLabel = _a.nativeInputAriaLabel, onChangeProps = _a.onChange, onInvalidChange = _a.onInvalidChange, required = _a.required, secondAriaLabel = _a.secondAriaLabel, secondPlaceholder = _a.secondPlaceholder, showLeadingZeros = _a.showLeadingZeros, valueProps = _a.value, yearAriaLabel = _a.yearAriaLabel, yearPlaceholder = _a.yearPlaceholder;
     var _d = (0, react_1.useState)(null), amPm = _d[0], setAmPm = _d[1];
@@ -380,6 +380,10 @@ var _e = (0, react_1.useState)(null), year = _e[0], setYear = _e[1];
         });
-        if (formElementsWithoutSelect.every(function (formElement) { return !formElement.value; })) {
+        var isEveryValueEmpty = formElementsWithoutSelect.every(function (formElement) { return !formElement.value; });
+        if (isEveryValueEmpty) {
             onChangeProps(null, false);
+            return;
         }
-        else if (formElements.every(function (formElement) { return formElement.value && formElement.validity.valid; })) {
+        var isEveryValueFilled = formElements.every(function (formElement) { return formElement.value; });
+        var isEveryValueValid = formElements.every(function (formElement) { return formElement.validity.valid; });
+        if (isEveryValueFilled && isEveryValueValid) {
             var year_1 = Number(values.year || new Date().getFullYear());
@@ -397,3 +401,8 @@ var monthIndex = Number(values.month || 1) - 1;
             onChangeProps(proposedValue, false);
+            return;
         }
+        if (!onInvalidChange) {
+            return;
+        }
+        onInvalidChange();
     }
@@ -400,0 +409,0 @@ /**

dist/cjs/DateTimePicker.d.ts

@@ -13,3 +13,3 @@ import React from 'react';
 type EventProps = ReturnType<typeof makeEventProps>;
-type DateTimePickerProps = {
+export type DateTimePickerProps = {
     amPmAriaLabel?: string;
@@ -53,2 +53,3 @@ autoFocus?: boolean;
     onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+    onInvalidChange?: () => void;
     openWidgetsOnFocus?: boolean;
@@ -71,3 +72,3 @@ portalContainer?: HTMLElement | null;
     yearPlaceholder?: string;
-} & CalendarProps & ClockProps & EventProps;
+} & CalendarProps & ClockProps & Omit<EventProps, 'onChange' | 'onFocus'>;
 declare function DateTimePicker(props: DateTimePickerProps): JSX.Element;
@@ -74,0 +75,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, 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 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, onInvalidChange = props.onInvalidChange, _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", "onInvalidChange", "openWidgetsOnFocus", "required", "secondAriaLabel", "secondPlaceholder", "shouldCloseWidgets", "shouldOpenWidgets", "showLeadingZeros", "value", "yearAriaLabel", "yearPlaceholder"]);
     var _j = (0, react_1.useState)(isCalendarOpenProps), isCalendarOpen = _j[0], setIsCalendarOpen = _j[1];
@@ -278,3 +278,3 @@ var _k = (0, react_1.useState)(isClockOpenProps), isClockOpen = _k[0], setIsClockOpen = _k[1];
                 // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus: autoFocus, className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isWidgetOpen: isCalendarOpen || isClockOpen, locale: locale, maxDate: maxDate, maxDetail: maxDetail, minDate: minDate, name: name, onChange: onChange, required: required, showLeadingZeros: showLeadingZeros, value: valueFrom })),
+                autoFocus: autoFocus, className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isWidgetOpen: isCalendarOpen || isClockOpen, locale: locale, maxDate: maxDate, maxDetail: maxDetail, minDate: minDate, name: name, onChange: onChange, onInvalidChange: onInvalidChange, required: required, showLeadingZeros: showLeadingZeros, value: valueFrom })),
             clearIcon !== null && (react_1.default.createElement("button", { "aria-label": clearAriaLabel, className: "".concat(baseClassName, "__clear-button ").concat(baseClassName, "__button"), disabled: disabled, onClick: clear, onFocus: stopPropagation, type: "button" }, typeof clearIcon === 'function' ? react_1.default.createElement(clearIcon) : clearIcon)),
@@ -281,0 +281,0 @@ calendarIcon !== null && !disableCalendar && (react_1.default.createElement("button", { "aria-label": calendarAriaLabel, className: "".concat(baseClassName, "__calendar-button ").concat(baseClassName, "__button"), disabled: disabled, onClick: toggleCalendar, onFocus: stopPropagation, type: "button" }, typeof calendarIcon === 'function' ? react_1.default.createElement(calendarIcon) : calendarIcon))));

dist/cjs/index.d.ts

 import DateTimePicker from './DateTimePicker';
+import type { DateTimePickerProps } from './DateTimePicker';
 export { DateTimePicker };
+export type { DateTimePickerProps };
 export default DateTimePicker;

dist/esm/DateTimeInput.d.ts

@@ -27,2 +27,3 @@ /// <reference types="react" />
     onChange?: (value: Date | null, shouldCloseWidgets: boolean) => void;
+    onInvalidChange?: () => void;
     required?: boolean;
@@ -36,3 +37,3 @@ secondAriaLabel?: string;
 };
-declare function DateTimeInput({ amPmAriaLabel, autoFocus, className, dayAriaLabel, dayPlaceholder, disabled, format, hourAriaLabel, hourPlaceholder, isWidgetOpen: isWidgetOpenProps, locale, maxDate, maxDetail, minDate, minuteAriaLabel, minutePlaceholder, monthAriaLabel, monthPlaceholder, name, nativeInputAriaLabel, onChange: onChangeProps, required, secondAriaLabel, secondPlaceholder, showLeadingZeros, value: valueProps, yearAriaLabel, yearPlaceholder, }: DateTimeInputProps): JSX.Element;
+declare function DateTimeInput({ amPmAriaLabel, autoFocus, className, dayAriaLabel, dayPlaceholder, disabled, format, hourAriaLabel, hourPlaceholder, isWidgetOpen: isWidgetOpenProps, locale, maxDate, maxDetail, minDate, minuteAriaLabel, minutePlaceholder, monthAriaLabel, monthPlaceholder, name, nativeInputAriaLabel, onChange: onChangeProps, onInvalidChange, required, secondAriaLabel, secondPlaceholder, showLeadingZeros, value: valueProps, yearAriaLabel, yearPlaceholder, }: DateTimeInputProps): JSX.Element;
 declare namespace DateTimeInput {
@@ -39,0 +40,0 @@ var propTypes: {

dist/esm/DateTimeInput.js

@@ -124,3 +124,3 @@ var __assign = (this && this.__assign) || function () {
 export default function DateTimeInput(_a) {
-    var amPmAriaLabel = _a.amPmAriaLabel, autoFocus = _a.autoFocus, className = _a.className, dayAriaLabel = _a.dayAriaLabel, dayPlaceholder = _a.dayPlaceholder, disabled = _a.disabled, format = _a.format, hourAriaLabel = _a.hourAriaLabel, hourPlaceholder = _a.hourPlaceholder, isWidgetOpenProps = _a.isWidgetOpen, locale = _a.locale, maxDate = _a.maxDate, _b = _a.maxDetail, maxDetail = _b === void 0 ? 'minute' : _b, minDate = _a.minDate, minuteAriaLabel = _a.minuteAriaLabel, minutePlaceholder = _a.minutePlaceholder, monthAriaLabel = _a.monthAriaLabel, monthPlaceholder = _a.monthPlaceholder, _c = _a.name, name = _c === void 0 ? 'datetime' : _c, nativeInputAriaLabel = _a.nativeInputAriaLabel, onChangeProps = _a.onChange, required = _a.required, secondAriaLabel = _a.secondAriaLabel, secondPlaceholder = _a.secondPlaceholder, showLeadingZeros = _a.showLeadingZeros, valueProps = _a.value, yearAriaLabel = _a.yearAriaLabel, yearPlaceholder = _a.yearPlaceholder;
+    var amPmAriaLabel = _a.amPmAriaLabel, autoFocus = _a.autoFocus, className = _a.className, dayAriaLabel = _a.dayAriaLabel, dayPlaceholder = _a.dayPlaceholder, disabled = _a.disabled, format = _a.format, hourAriaLabel = _a.hourAriaLabel, hourPlaceholder = _a.hourPlaceholder, isWidgetOpenProps = _a.isWidgetOpen, locale = _a.locale, maxDate = _a.maxDate, _b = _a.maxDetail, maxDetail = _b === void 0 ? 'minute' : _b, minDate = _a.minDate, minuteAriaLabel = _a.minuteAriaLabel, minutePlaceholder = _a.minutePlaceholder, monthAriaLabel = _a.monthAriaLabel, monthPlaceholder = _a.monthPlaceholder, _c = _a.name, name = _c === void 0 ? 'datetime' : _c, nativeInputAriaLabel = _a.nativeInputAriaLabel, onChangeProps = _a.onChange, onInvalidChange = _a.onInvalidChange, required = _a.required, secondAriaLabel = _a.secondAriaLabel, secondPlaceholder = _a.secondPlaceholder, showLeadingZeros = _a.showLeadingZeros, valueProps = _a.value, yearAriaLabel = _a.yearAriaLabel, yearPlaceholder = _a.yearPlaceholder;
     var _d = useState(null), amPm = _d[0], setAmPm = _d[1];
@@ -352,6 +352,10 @@ var _e = useState(null), year = _e[0], setYear = _e[1];
         });
-        if (formElementsWithoutSelect.every(function (formElement) { return !formElement.value; })) {
+        var isEveryValueEmpty = formElementsWithoutSelect.every(function (formElement) { return !formElement.value; });
+        if (isEveryValueEmpty) {
             onChangeProps(null, false);
+            return;
         }
-        else if (formElements.every(function (formElement) { return formElement.value && formElement.validity.valid; })) {
+        var isEveryValueFilled = formElements.every(function (formElement) { return formElement.value; });
+        var isEveryValueValid = formElements.every(function (formElement) { return formElement.validity.valid; });
+        if (isEveryValueFilled && isEveryValueValid) {
             var year_1 = Number(values.year || new Date().getFullYear());
@@ -369,3 +373,8 @@ var monthIndex = Number(values.month || 1) - 1;
             onChangeProps(proposedValue, false);
+            return;
         }
+        if (!onInvalidChange) {
+            return;
+        }
+        onInvalidChange();
     }
@@ -372,0 +381,0 @@ /**

dist/esm/DateTimePicker.d.ts

@@ -13,3 +13,3 @@ import React from 'react';
 type EventProps = ReturnType<typeof makeEventProps>;
-type DateTimePickerProps = {
+export type DateTimePickerProps = {
     amPmAriaLabel?: string;
@@ -53,2 +53,3 @@ autoFocus?: boolean;
     onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+    onInvalidChange?: () => void;
     openWidgetsOnFocus?: boolean;
@@ -71,3 +72,3 @@ portalContainer?: HTMLElement | null;
     yearPlaceholder?: string;
-} & CalendarProps & ClockProps & EventProps;
+} & CalendarProps & ClockProps & Omit<EventProps, 'onChange' | 'onFocus'>;
 declare function DateTimePicker(props: DateTimePickerProps): JSX.Element;
@@ -74,0 +75,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, 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 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, onInvalidChange = props.onInvalidChange, _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", "onInvalidChange", "openWidgetsOnFocus", "required", "secondAriaLabel", "secondPlaceholder", "shouldCloseWidgets", "shouldOpenWidgets", "showLeadingZeros", "value", "yearAriaLabel", "yearPlaceholder"]);
     var _j = useState(isCalendarOpenProps), isCalendarOpen = _j[0], setIsCalendarOpen = _j[1];
@@ -250,3 +250,3 @@ var _k = useState(isClockOpenProps), isClockOpen = _k[0], setIsClockOpen = _k[1];
                 // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus: autoFocus, className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isWidgetOpen: isCalendarOpen || isClockOpen, locale: locale, maxDate: maxDate, maxDetail: maxDetail, minDate: minDate, name: name, onChange: onChange, required: required, showLeadingZeros: showLeadingZeros, value: valueFrom })),
+                autoFocus: autoFocus, className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isWidgetOpen: isCalendarOpen || isClockOpen, locale: locale, maxDate: maxDate, maxDetail: maxDetail, minDate: minDate, name: name, onChange: onChange, onInvalidChange: onInvalidChange, required: required, showLeadingZeros: showLeadingZeros, value: valueFrom })),
             clearIcon !== null && (React.createElement("button", { "aria-label": clearAriaLabel, className: "".concat(baseClassName, "__clear-button ").concat(baseClassName, "__button"), disabled: disabled, onClick: clear, onFocus: stopPropagation, type: "button" }, typeof clearIcon === 'function' ? React.createElement(clearIcon) : clearIcon)),
@@ -253,0 +253,0 @@ calendarIcon !== null && !disableCalendar && (React.createElement("button", { "aria-label": calendarAriaLabel, className: "".concat(baseClassName, "__calendar-button ").concat(baseClassName, "__button"), disabled: disabled, onClick: toggleCalendar, onFocus: stopPropagation, type: "button" }, typeof calendarIcon === 'function' ? React.createElement(calendarIcon) : calendarIcon))));

dist/esm/index.d.ts

 import DateTimePicker from './DateTimePicker';
+import type { DateTimePickerProps } from './DateTimePicker';
 export { DateTimePicker };
+export type { DateTimePickerProps };
 export default DateTimePicker;

package.json

 {
   "name": "react-datetime-picker",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "A date range picker for your React app.",
@@ -5,0 +5,0 @@ "main": "dist/cjs/index.js",

README.md

@@ -76,6 +76,2 @@ [![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)
 
-### Next.js and Vite
-
-Next.js and Vite do not allow components from `node_modules` to import styles. You'll need to follow instructions from [Custom styling](#custom-styling) to get going.
-
 ## User guide
@@ -129,2 +125,3 @@
 | onFocus              | Function called when the focuses an input.                                                                                                                                                                                                                                                                                         | n/a                     | `(event) => alert('Focused input: ', event.target.name)`                                                                                                                                                                                                               |
+| onInvalidChange      | Function called when the user picks an invalid datetime.                                                                                                                                                                                                                                                                           | n/a                     | `() => alert('Invalid datetime')`                                                                                                                                                                                                                                      |
 | openWidgetsOnFocus   | Whether to open the widgets on input focus. Note: It's recommended to use shouldOpenWidgets function instead.                                                                                                                                                                                                                      | `true`                  | `false`                                                                                                                                                                                                                                                                |
@@ -131,0 +128,0 @@ | portalContainer      | Element to render the widgets in using portal.                                                                                                                                                                                                                                                                                     | n/a                     | `document.getElementById('my-div')`                                                                                                                                                                                                                                    |

src/index.ts

 import DateTimePicker from './DateTimePicker';
 
+import type { DateTimePickerProps } from './DateTimePicker';
+
 export { DateTimePicker };
 
+export type { DateTimePickerProps };
+
 export default DateTimePicker;

No alert changes

Improved metrics

Total package byte prevSize

304896

increased by0.97%

Lines of code

6195

increased by0.86%

Worsened metrics

Number of lines in readme file

164

decreased by-1.8%

No dependency changes