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

Comparing version 5.1.0 to 5.2.0

dist/cjs/DateTimeRangePicker.d.ts

@@ -13,3 +13,3 @@ import React from 'react';
 type EventProps = ReturnType<typeof makeEventProps>;
-type DateTimeRangePickerProps = {
+export type DateTimeRangePickerProps = {
     amPmAriaLabel?: string;
@@ -53,2 +53,3 @@ autoFocus?: boolean;
     onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+    onInvalidChange?: () => void;
     openWidgetsOnFocus?: boolean;
@@ -72,3 +73,3 @@ portalContainer?: HTMLElement | null;
     yearPlaceholder?: string;
-} & CalendarProps & ClockProps & EventProps;
+} & CalendarProps & ClockProps & Omit<EventProps, 'onChange' | 'onFocus'>;
 declare function DateTimeRangePicker(props: DateTimeRangePickerProps): JSX.Element;
@@ -75,0 +76,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, 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 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, onInvalidChange = props.onInvalidChange, _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", "onInvalidChange", "openWidgetsOnFocus", "rangeDivider", "required", "secondAriaLabel", "secondPlaceholder", "shouldCloseWidgets", "shouldOpenWidgets", "showLeadingZeros", "value", "yearAriaLabel", "yearPlaceholder"]);
     var _k = (0, react_1.useState)(isCalendarOpenProps), isCalendarOpen = _k[0], setIsCalendarOpen = _k[1];
@@ -295,3 +295,3 @@ var _l = (0, react_1.useState)(isClockOpenProps), isClockOpen = _l[0], setIsClockOpen = _l[1];
         };
-        var commonProps = __assign(__assign(__assign({}, ariaLabelProps), placeholderProps), { className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isWidgetOpen: isCalendarOpen || isClockOpen, locale: locale, maxDate: maxDate, maxDetail: maxDetail, minDate: minDate, required: required, showLeadingZeros: showLeadingZeros });
+        var commonProps = __assign(__assign(__assign({}, ariaLabelProps), placeholderProps), { className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isWidgetOpen: isCalendarOpen || isClockOpen, locale: locale, maxDate: maxDate, maxDetail: maxDetail, minDate: minDate, onInvalidChange: onInvalidChange, required: required, showLeadingZeros: showLeadingZeros });
         return (react_1.default.createElement("div", { className: "".concat(baseClassName, "__wrapper") },
@@ -298,0 +298,0 @@ react_1.default.createElement(DateTimeInput_1.default, __assign({}, commonProps, {

dist/cjs/index.d.ts

 import DateTimeRangePicker from './DateTimeRangePicker';
+import type { DateTimeRangePickerProps } from './DateTimeRangePicker';
 export { DateTimeRangePicker };
+export type { DateTimeRangePickerProps };
 export default DateTimeRangePicker;

dist/esm/DateTimeRangePicker.d.ts

@@ -13,3 +13,3 @@ import React from 'react';
 type EventProps = ReturnType<typeof makeEventProps>;
-type DateTimeRangePickerProps = {
+export type DateTimeRangePickerProps = {
     amPmAriaLabel?: string;
@@ -53,2 +53,3 @@ autoFocus?: boolean;
     onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+    onInvalidChange?: () => void;
     openWidgetsOnFocus?: boolean;
@@ -72,3 +73,3 @@ portalContainer?: HTMLElement | null;
     yearPlaceholder?: string;
-} & CalendarProps & ClockProps & EventProps;
+} & CalendarProps & ClockProps & Omit<EventProps, 'onChange' | 'onFocus'>;
 declare function DateTimeRangePicker(props: DateTimeRangePickerProps): JSX.Element;
@@ -75,0 +76,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, 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 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, onInvalidChange = props.onInvalidChange, _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", "onInvalidChange", "openWidgetsOnFocus", "rangeDivider", "required", "secondAriaLabel", "secondPlaceholder", "shouldCloseWidgets", "shouldOpenWidgets", "showLeadingZeros", "value", "yearAriaLabel", "yearPlaceholder"]);
     var _k = useState(isCalendarOpenProps), isCalendarOpen = _k[0], setIsCalendarOpen = _k[1];
@@ -267,3 +267,3 @@ var _l = useState(isClockOpenProps), isClockOpen = _l[0], setIsClockOpen = _l[1];
         };
-        var commonProps = __assign(__assign(__assign({}, ariaLabelProps), placeholderProps), { className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isWidgetOpen: isCalendarOpen || isClockOpen, locale: locale, maxDate: maxDate, maxDetail: maxDetail, minDate: minDate, required: required, showLeadingZeros: showLeadingZeros });
+        var commonProps = __assign(__assign(__assign({}, ariaLabelProps), placeholderProps), { className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isWidgetOpen: isCalendarOpen || isClockOpen, locale: locale, maxDate: maxDate, maxDetail: maxDetail, minDate: minDate, onInvalidChange: onInvalidChange, required: required, showLeadingZeros: showLeadingZeros });
         return (React.createElement("div", { className: "".concat(baseClassName, "__wrapper") },
@@ -270,0 +270,0 @@ React.createElement(DateTimeInput, __assign({}, commonProps, {

dist/esm/index.d.ts

 import DateTimeRangePicker from './DateTimeRangePicker';
+import type { DateTimeRangePickerProps } from './DateTimeRangePicker';
 export { DateTimeRangePicker };
+export type { DateTimeRangePickerProps };
 export default DateTimeRangePicker;

package.json

 {
   "name": "@wojtekmaj/react-datetimerange-picker",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "A datetime range picker for your React app.",
@@ -51,3 +51,3 @@ "main": "dist/cjs/index.js",
     "react-clock": "^4.2.0",
-    "react-datetime-picker": "^5.0.1",
+    "react-datetime-picker": "^5.2.0",
     "react-fit": "^1.5.1"
@@ -54,0 +54,0 @@ },

README.md

@@ -77,6 +77,2 @@ [![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)
 
-### 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
@@ -126,2 +122,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`                                                                                                                                                                                                                                                                |
@@ -128,0 +125,0 @@ | portalContainer      | Element to render the widgets in using portal.                                                                                                                                                                                                                                                                                               | n/a                     | `document.getElementById('my-div')`                                                                                                                                                                                                                                    |

src/index.ts

 import DateTimeRangePicker from './DateTimeRangePicker';
 
+import type { DateTimeRangePickerProps } from './DateTimeRangePicker';
+
 export { DateTimeRangePicker };
 
+export type { DateTimeRangePickerProps };
+
 export default DateTimeRangePicker;

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

175894

increased by1.03%

Lines of code

3067

increased by0.76%

Worsened metrics

Number of lines in readme file

155

decreased by-1.9%

Dependency changes

• Updatedreact-datetime-picker@^5.2.0