react-datetime-picker - npm Package Compare versions

Comparing version 5.6.0 to 6.0.0

dist/cjs/DateTimeInput.js

@@ -14,34 +14,2 @@ "use strict";
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -51,3 +19,4 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var date_utils_1 = require("@wojtekmaj/date-utils");
@@ -129,4 +98,4 @@ var Divider_js_1 = __importDefault(require("./Divider.js"));
         // eslint-disable-next-line react/no-array-index-key
-        react_1.default.createElement(Divider_js_1.default, { key: "separator_".concat(index) }, element));
-        var res = __spreadArray(__spreadArray([], arr, true), [divider], false);
+        (0, jsx_runtime_1.jsx)(Divider_js_1.default, { children: element }, "separator_".concat(index)));
+        arr.push(divider);
         var currentMatch = matches && matches[index];
@@ -139,13 +108,13 @@ if (currentMatch) {
             if (!renderFunction) {
-                return res;
+                return arr;
             }
             if (!allowMultipleInstances && usedFunctions.includes(renderFunction)) {
-                res.push(currentMatch);
+                arr.push(currentMatch);
             }
             else {
-                res.push(renderFunction(currentMatch, index));
+                arr.push(renderFunction(currentMatch, index));
                 usedFunctions.push(renderFunction);
             }
         }
-        return res;
+        return arr;
     }, []);
@@ -174,3 +143,3 @@ }
     var _m = (0, react_1.useState)(isWidgetOpenProps), isWidgetOpen = _m[0], setIsWidgetOpenOpen = _m[1];
-    var lastPressedKey = (0, react_1.useRef)();
+    var lastPressedKey = (0, react_1.useRef)(undefined);
     (0, react_1.useEffect)(function () {
@@ -491,5 +460,5 @@ setIsWidgetOpenOpen(isWidgetOpenProps);
         var showLeadingZerosFromFormat = currentMatch && currentMatch.length === 2;
-        return (react_1.default.createElement(DayInput_1.default, __assign({ key: "day" }, commonInputProps, { ariaLabel: dayAriaLabel, 
+        return ((0, jsx_runtime_1.jsx)(DayInput_1.default, __assign({}, commonInputProps, { ariaLabel: dayAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, inputRef: dayInput, month: month, placeholder: dayPlaceholder, showLeadingZeros: showLeadingZerosFromFormat || showLeadingZeros, value: day, year: year })));
+            autoFocus: index === 0 && autoFocus, inputRef: dayInput, month: month, placeholder: dayPlaceholder, showLeadingZeros: showLeadingZerosFromFormat || showLeadingZeros, value: day, year: year }), "day"));
     }
@@ -501,15 +470,15 @@ function renderMonth(currentMatch, index) {
         if (currentMatch.length > 2) {
-            return (react_1.default.createElement(MonthSelect_1.default, __assign({ key: "month" }, commonInputProps, { ariaLabel: monthAriaLabel, 
+            return ((0, jsx_runtime_1.jsx)(MonthSelect_1.default, __assign({}, commonInputProps, { ariaLabel: monthAriaLabel, 
                 // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus: index === 0 && autoFocus, inputRef: monthSelect, locale: locale, placeholder: monthPlaceholder, short: currentMatch.length === 3, value: month, year: year })));
+                autoFocus: index === 0 && autoFocus, inputRef: monthSelect, locale: locale, placeholder: monthPlaceholder, short: currentMatch.length === 3, value: month, year: year }), "month"));
         }
         var showLeadingZerosFromFormat = currentMatch && currentMatch.length === 2;
-        return (react_1.default.createElement(MonthInput_1.default, __assign({ key: "month" }, commonInputProps, { ariaLabel: monthAriaLabel, 
+        return ((0, jsx_runtime_1.jsx)(MonthInput_1.default, __assign({}, commonInputProps, { ariaLabel: monthAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, inputRef: monthInput, placeholder: monthPlaceholder, showLeadingZeros: showLeadingZerosFromFormat || showLeadingZeros, value: month, year: year })));
+            autoFocus: index === 0 && autoFocus, inputRef: monthInput, placeholder: monthPlaceholder, showLeadingZeros: showLeadingZerosFromFormat || showLeadingZeros, value: month, year: year }), "month"));
     }
     function renderYear(currentMatch, index) {
-        return (react_1.default.createElement(YearInput_1.default, __assign({ key: "year" }, commonInputProps, { ariaLabel: yearAriaLabel, 
+        return ((0, jsx_runtime_1.jsx)(YearInput_1.default, __assign({}, commonInputProps, { ariaLabel: yearAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, inputRef: yearInput, placeholder: yearPlaceholder, value: year, valueType: "day" })));
+            autoFocus: index === 0 && autoFocus, inputRef: yearInput, placeholder: yearPlaceholder, value: year, valueType: "day" }), "year"));
     }
@@ -521,5 +490,5 @@ function renderHour12(currentMatch, index) {
         var showLeadingZeros = currentMatch ? currentMatch.length === 2 : false;
-        return (react_1.default.createElement(Hour12Input_1.default, __assign({ key: "hour12" }, commonInputProps, commonTimeInputProps, { amPm: amPm, ariaLabel: hourAriaLabel, 
+        return ((0, jsx_runtime_1.jsx)(Hour12Input_1.default, __assign({}, commonInputProps, commonTimeInputProps, { amPm: amPm, ariaLabel: hourAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, inputRef: hour12Input, placeholder: hourPlaceholder, showLeadingZeros: showLeadingZeros, value: hour })));
+            autoFocus: index === 0 && autoFocus, inputRef: hour12Input, placeholder: hourPlaceholder, showLeadingZeros: showLeadingZeros, value: hour }), "hour12"));
     }
@@ -531,5 +500,5 @@ function renderHour24(currentMatch, index) {
         var showLeadingZeros = currentMatch ? currentMatch.length === 2 : false;
-        return (react_1.default.createElement(Hour24Input_1.default, __assign({ key: "hour24" }, commonInputProps, commonTimeInputProps, { ariaLabel: hourAriaLabel, 
+        return ((0, jsx_runtime_1.jsx)(Hour24Input_1.default, __assign({}, commonInputProps, commonTimeInputProps, { ariaLabel: hourAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, inputRef: hour24Input, placeholder: hourPlaceholder, showLeadingZeros: showLeadingZeros, value: hour })));
+            autoFocus: index === 0 && autoFocus, inputRef: hour24Input, placeholder: hourPlaceholder, showLeadingZeros: showLeadingZeros, value: hour }), "hour24"));
     }
@@ -547,5 +516,5 @@ function renderHour(currentMatch, index) {
         var showLeadingZeros = currentMatch ? currentMatch.length === 2 : false;
-        return (react_1.default.createElement(MinuteInput_1.default, __assign({ key: "minute" }, commonInputProps, commonTimeInputProps, { ariaLabel: minuteAriaLabel, 
+        return ((0, jsx_runtime_1.jsx)(MinuteInput_1.default, __assign({}, commonInputProps, commonTimeInputProps, { ariaLabel: minuteAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, hour: hour, inputRef: minuteInput, placeholder: minutePlaceholder, showLeadingZeros: showLeadingZeros, value: minute })));
+            autoFocus: index === 0 && autoFocus, hour: hour, inputRef: minuteInput, placeholder: minutePlaceholder, showLeadingZeros: showLeadingZeros, value: minute }), "minute"));
     }
@@ -557,10 +526,10 @@ function renderSecond(currentMatch, index) {
         var showLeadingZeros = currentMatch ? currentMatch.length === 2 : true;
-        return (react_1.default.createElement(SecondInput_1.default, __assign({ key: "second" }, commonInputProps, commonTimeInputProps, { ariaLabel: secondAriaLabel, 
+        return ((0, jsx_runtime_1.jsx)(SecondInput_1.default, __assign({}, commonInputProps, commonTimeInputProps, { ariaLabel: secondAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, hour: hour, inputRef: secondInput, minute: minute, placeholder: secondPlaceholder, showLeadingZeros: showLeadingZeros, value: second })));
+            autoFocus: index === 0 && autoFocus, hour: hour, inputRef: secondInput, minute: minute, placeholder: secondPlaceholder, showLeadingZeros: showLeadingZeros, value: second }), "second"));
     }
     function renderAmPm(currentMatch, index) {
-        return (react_1.default.createElement(AmPm_1.default, __assign({ key: "ampm" }, commonInputProps, commonTimeInputProps, { ariaLabel: amPmAriaLabel, 
+        return ((0, jsx_runtime_1.jsx)(AmPm_1.default, __assign({}, commonInputProps, commonTimeInputProps, { ariaLabel: amPmAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, inputRef: amPmInput, locale: locale, onChange: onChange, value: amPm })));
+            autoFocus: index === 0 && autoFocus, inputRef: amPmInput, locale: locale, onChange: onChange, value: amPm }), "ampm"));
     }
@@ -582,10 +551,8 @@ function renderCustomInputsInternal() {
     function renderNativeInput() {
-        return (react_1.default.createElement(NativeInput_js_1.default, { key: "datetime", ariaLabel: nativeInputAriaLabel, disabled: disabled, maxDate: maxDate || defaultMaxDate, minDate: minDate || defaultMinDate, name: name, onChange: onChangeNative, required: required, value: value, valueType: valueType }));
+        return ((0, jsx_runtime_1.jsx)(NativeInput_js_1.default, { ariaLabel: nativeInputAriaLabel, disabled: disabled, maxDate: maxDate || defaultMaxDate, minDate: minDate || defaultMinDate, name: name, onChange: onChangeNative, required: required, value: value, valueType: valueType }, "datetime"));
     }
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    react_1.default.createElement("div", { className: className, onClick: onClick },
-        renderNativeInput(),
-        renderCustomInputsInternal()));
+    (0, jsx_runtime_1.jsxs)("div", { className: className, onClick: onClick, children: [renderNativeInput(), renderCustomInputsInternal()] }));
 }
 exports.default = DateTimeInput;

dist/cjs/DateTimeInput/NativeInput.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 type NativeInputProps = {
@@ -3,0 +3,0 @@ ariaLabel?: string;

dist/cjs/DateTimeInput/NativeInput.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var date_utils_1 = require("@wojtekmaj/date-utils");
@@ -41,3 +38,3 @@ function NativeInput(_a) {
     }
-    return (react_1.default.createElement("input", { "aria-label": ariaLabel, disabled: disabled, hidden: true, max: maxDate ? nativeValueParser(maxDate) : undefined, min: minDate ? nativeValueParser(minDate) : undefined, name: name, onChange: onChange, onFocus: stopPropagation, required: required, step: step, style: {
+    return ((0, jsx_runtime_1.jsx)("input", { "aria-label": ariaLabel, disabled: disabled, hidden: true, max: maxDate ? nativeValueParser(maxDate) : undefined, min: minDate ? nativeValueParser(minDate) : undefined, name: name, onChange: onChange, onFocus: stopPropagation, required: required, step: step, style: {
             visibility: 'hidden',
@@ -44,0 +41,0 @@ position: 'absolute',

dist/cjs/DateTimePicker.d.ts

@@ -1,10 +0,10 @@
-import React from 'react';
+/// <reference types="react" />
 import makeEventProps from 'make-event-props';
 import Calendar from 'react-calendar';
 import Clock from 'react-clock';
-import type { ReactNodeArray } from 'prop-types';
 import type { ClassName, CloseReason, Detail, LooseValue, OpenReason, Value } from './shared/types.js';
-type Icon = React.ReactElement | ReactNodeArray | null | string | number | boolean;
+type ReactNodeLike = React.ReactNode | string | number | boolean | null | undefined;
+type Icon = ReactNodeLike | ReactNodeLike[];
 type IconOrRenderFunction = Icon | React.ComponentType | React.ReactElement;
-type CalendarProps = Omit<React.ComponentPropsWithoutRef<typeof Calendar>, 'className' | 'maxDetail' | 'onChange'>;
+type CalendarProps = Omit<React.ComponentPropsWithoutRef<typeof Calendar>, 'onChange' | 'selectRange' | 'value'>;
 type ClockProps = Omit<React.ComponentPropsWithoutRef<typeof Clock>, 'value'>;
@@ -32,9 +32,2 @@ type EventProps = ReturnType<typeof makeEventProps>;
     /**
-     * Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element.
-     *
-     * @example 'class1 class2'
-     * @example ['class1', 'class2 class3']
-     */
-    calendarClassName?: ClassName;
-    /**
      * Content of the calendar button. Setting the value explicitly to `null` will hide the icon.
@@ -48,2 +41,6 @@ *
     /**
+     * Props to pass to React-Calendar component.
+     */
+    calendarProps?: CalendarProps;
+    /**
      * Class name(s) that will be added along with `"react-datetime-picker"` to the main React-DateTime-Picker `<div>` element.
@@ -70,8 +67,5 @@ *
     /**
-     * Class name(s) that will be added along with `"react-clock"` to the main React-Calendar `<div>` element.
-     *
-     * @example 'class1 class2'
-     * @example ['class1', 'class2 class3']
+     * Props to pass to React-Clock component.
      */
-    clockClassName?: ClassName;
+    clockProps?: ClockProps;
     /**
@@ -355,4 +349,4 @@ * Whether to close the widgets on value selection. **Note**: It's recommended to use `shouldCloseWidgets` function instead.
     yearPlaceholder?: string;
-} & CalendarProps & ClockProps & Omit<EventProps, 'onChange' | 'onFocus'>;
-declare const DateTimePicker: React.FC<DateTimePickerProps>;
-export default DateTimePicker;
+} & Omit<EventProps, 'onChange' | 'onFocus'>;
+export default function DateTimePicker(props: DateTimePickerProps): JSX.Element;
+export {};

dist/cjs/DateTimePicker.js

@@ -14,25 +14,2 @@ "use strict";
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
@@ -53,5 +30,5 @@ var t = {};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var react_dom_1 = require("react-dom");
-var prop_types_1 = __importDefault(require("prop-types"));
 var make_event_props_1 = __importDefault(require("make-event-props"));
@@ -63,4 +40,2 @@ var clsx_1 = __importDefault(require("clsx"));
 var DateTimeInput_js_1 = __importDefault(require("./DateTimeInput.js"));
-var propTypes_js_1 = require("./shared/propTypes.js");
-var isBrowser = typeof document !== 'undefined';
 var baseClassName = 'react-datetime-picker';
@@ -77,10 +52,5 @@ var outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];
 };
-var CalendarIcon = (react_1.default.createElement("svg", __assign({}, iconProps, { className: "".concat(baseClassName, "__calendar-button__icon ").concat(baseClassName, "__button__icon") }),
-    react_1.default.createElement("rect", { fill: "none", height: "15", width: "15", x: "2", y: "2" }),
-    react_1.default.createElement("line", { x1: "6", x2: "6", y1: "0", y2: "4" }),
-    react_1.default.createElement("line", { x1: "13", x2: "13", y1: "0", y2: "4" })));
-var ClearIcon = (react_1.default.createElement("svg", __assign({}, iconProps, { className: "".concat(baseClassName, "__clear-button__icon ").concat(baseClassName, "__button__icon") }),
-    react_1.default.createElement("line", { x1: "4", x2: "15", y1: "4", y2: "15" }),
-    react_1.default.createElement("line", { x1: "15", x2: "4", y1: "4", y2: "15" })));
-var DateTimePicker = function DateTimePicker(props) {
+var CalendarIcon = ((0, jsx_runtime_1.jsxs)("svg", __assign({}, iconProps, { className: "".concat(baseClassName, "__calendar-button__icon ").concat(baseClassName, "__button__icon"), children: [(0, jsx_runtime_1.jsx)("rect", { fill: "none", height: "15", width: "15", x: "2", y: "2" }), (0, jsx_runtime_1.jsx)("line", { x1: "6", x2: "6", y1: "0", y2: "4" }), (0, jsx_runtime_1.jsx)("line", { x1: "13", x2: "13", y1: "0", y2: "4" })] })));
+var ClearIcon = ((0, jsx_runtime_1.jsxs)("svg", __assign({}, iconProps, { className: "".concat(baseClassName, "__clear-button__icon ").concat(baseClassName, "__button__icon"), children: [(0, jsx_runtime_1.jsx)("line", { x1: "4", x2: "15", y1: "4", y2: "15" }), (0, jsx_runtime_1.jsx)("line", { x1: "15", x2: "4", y1: "4", y2: "15" })] })));
+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, 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"]);
@@ -286,8 +256,5 @@ var _j = (0, react_1.useState)(isCalendarOpenProps), isCalendarOpen = _j[0], setIsCalendarOpen = _j[1];
         };
-        return (react_1.default.createElement("div", { className: "".concat(baseClassName, "__wrapper") },
-            react_1.default.createElement(DateTimeInput_js_1.default, __assign({}, ariaLabelProps, placeholderProps, { 
-                // 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, 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)),
-            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))));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "".concat(baseClassName, "__wrapper"), children: [(0, jsx_runtime_1.jsx)(DateTimeInput_js_1.default, __assign({}, ariaLabelProps, placeholderProps, { 
+                    // 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, onInvalidChange: onInvalidChange, required: required, showLeadingZeros: showLeadingZeros, value: valueFrom })), clearIcon !== null && ((0, jsx_runtime_1.jsx)("button", { "aria-label": clearAriaLabel, className: "".concat(baseClassName, "__clear-button ").concat(baseClassName, "__button"), disabled: disabled, onClick: clear, onFocus: stopPropagation, type: "button", children: typeof clearIcon === 'function' ? (0, react_1.createElement)(clearIcon) : clearIcon })), calendarIcon !== null && !disableCalendar && ((0, jsx_runtime_1.jsx)("button", { "aria-expanded": isCalendarOpen || false, "aria-label": calendarAriaLabel, className: "".concat(baseClassName, "__calendar-button ").concat(baseClassName, "__button"), disabled: disabled, onClick: toggleCalendar, onFocus: stopPropagation, type: "button", children: typeof calendarIcon === 'function' ? (0, react_1.createElement)(calendarIcon) : calendarIcon }))] }));
     }
@@ -298,15 +265,11 @@ function renderCalendar() {
         }
-        var calendarClassName = props.calendarClassName, dateTimePickerClassName = props.className, // Unused, here to exclude it from calendarProps
-        dateTimePickerMaxDetail = props.maxDetail, // Unused, here to exclude it from calendarProps
-        onChangeProps = props.onChange, // Unused, here to exclude it from calendarProps
-        portalContainer = props.portalContainer, value = props.value, calendarProps = __rest(props, ["calendarClassName", "className", "maxDetail", "onChange", "portalContainer", "value"]);
+        var calendarProps = props.calendarProps, portalContainer = props.portalContainer, value = props.value;
         var className = "".concat(baseClassName, "__calendar");
         var classNames = (0, clsx_1.default)(className, "".concat(className, "--").concat(isCalendarOpen ? 'open' : 'closed'));
-        var calendar = (react_1.default.createElement(react_calendar_1.default, __assign({ className: calendarClassName, onChange: function (value) { return onDateChange(value); }, value: value }, calendarProps)));
-        return portalContainer ? ((0, react_dom_1.createPortal)(react_1.default.createElement("div", { ref: calendarWrapper, className: classNames }, calendar), portalContainer)) : (react_1.default.createElement(react_fit_1.default, null,
-            react_1.default.createElement("div", { ref: function (ref) {
+        var calendar = ((0, jsx_runtime_1.jsx)(react_calendar_1.default, __assign({ locale: locale, maxDate: maxDate, minDate: minDate, onChange: function (value) { return onDateChange(value); }, value: value }, calendarProps)));
+        return portalContainer ? ((0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { ref: calendarWrapper, className: classNames, children: calendar }), portalContainer)) : ((0, jsx_runtime_1.jsx)(react_fit_1.default, { children: (0, jsx_runtime_1.jsx)("div", { ref: function (ref) {
                     if (ref && !isCalendarOpen) {
                         ref.removeAttribute('style');
                     }
-                }, className: classNames }, calendar)));
+                }, className: classNames, children: calendar }) }));
     }
@@ -317,5 +280,3 @@ function renderClock() {
         }
-        var clockClassName = props.clockClassName, dateTimePickerClassName = props.className, // Unused, here to exclude it from clockProps
-        _a = props.maxDetail, // Unused, here to exclude it from clockProps
-        maxDetail = _a === void 0 ? 'minute' : _a, onChange = props.onChange, portalContainer = props.portalContainer, value = props.value, clockProps = __rest(props, ["clockClassName", "className", "maxDetail", "onChange", "portalContainer", "value"]);
+        var clockProps = props.clockProps, _a = props.maxDetail, maxDetail = _a === void 0 ? 'minute' : _a, portalContainer = props.portalContainer, value = props.value;
         var className = "".concat(baseClassName, "__clock");
@@ -325,69 +286,12 @@ var classNames = (0, clsx_1.default)(className, "".concat(className, "--").concat(isClockOpen ? 'open' : 'closed'));
         var maxDetailIndex = allViews.indexOf(maxDetail);
-        var clock = (react_1.default.createElement(react_clock_1.default, __assign({ className: clockClassName, renderMinuteHand: maxDetailIndex > 0, renderSecondHand: maxDetailIndex > 1, value: valueFrom }, clockProps)));
-        return portalContainer ? ((0, react_dom_1.createPortal)(react_1.default.createElement("div", { ref: clockWrapper, className: classNames }, clock), portalContainer)) : (react_1.default.createElement(react_fit_1.default, null,
-            react_1.default.createElement("div", { ref: function (ref) {
+        var clock = ((0, jsx_runtime_1.jsx)(react_clock_1.default, __assign({ locale: locale, renderMinuteHand: maxDetailIndex > 0, renderSecondHand: maxDetailIndex > 1, value: valueFrom }, clockProps)));
+        return portalContainer ? ((0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { ref: clockWrapper, className: classNames, children: clock }), portalContainer)) : ((0, jsx_runtime_1.jsx)(react_fit_1.default, { children: (0, jsx_runtime_1.jsx)("div", { ref: function (ref) {
                     if (ref && !isClockOpen) {
                         ref.removeAttribute('style');
                     }
-                }, className: classNames }, clock)));
+                }, className: classNames, children: clock }) }));
     }
     var eventProps = (0, react_1.useMemo)(function () { return (0, make_event_props_1.default)(otherProps); }, [otherProps]);
-    return (react_1.default.createElement("div", __assign({ className: (0, clsx_1.default)(baseClassName, "".concat(baseClassName, "--").concat(isCalendarOpen || isClockOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className), "data-testid": dataTestid, id: id }, eventProps, { onFocus: onFocus, ref: wrapper }),
-        renderInputs(),
-        renderCalendar(),
-        renderClock()));
-};
-var isValue = prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.instanceOf(Date)]);
-var isValueOrValueArray = prop_types_1.default.oneOfType([isValue, (0, propTypes_js_1.rangeOf)(isValue)]);
-DateTimePicker.propTypes = {
-    amPmAriaLabel: prop_types_1.default.string,
-    autoFocus: prop_types_1.default.bool,
-    calendarAriaLabel: prop_types_1.default.string,
-    calendarClassName: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.arrayOf(prop_types_1.default.string)]),
-    calendarIcon: prop_types_1.default.oneOfType([prop_types_1.default.node, prop_types_1.default.func]),
-    className: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.arrayOf(prop_types_1.default.string)]),
-    clearAriaLabel: prop_types_1.default.string,
-    clearIcon: prop_types_1.default.oneOfType([prop_types_1.default.node, prop_types_1.default.func]),
-    clockClassName: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.arrayOf(prop_types_1.default.string)]),
-    closeWidgets: prop_types_1.default.bool,
-    'data-testid': prop_types_1.default.string,
-    dayAriaLabel: prop_types_1.default.string,
-    dayPlaceholder: prop_types_1.default.string,
-    disableCalendar: prop_types_1.default.bool,
-    disableClock: prop_types_1.default.bool,
-    disabled: prop_types_1.default.bool,
-    format: prop_types_1.default.string,
-    hourAriaLabel: prop_types_1.default.string,
-    hourPlaceholder: prop_types_1.default.string,
-    id: prop_types_1.default.string,
-    isCalendarOpen: prop_types_1.default.bool,
-    isClockOpen: prop_types_1.default.bool,
-    locale: prop_types_1.default.string,
-    maxDate: propTypes_js_1.isMaxDate,
-    maxDetail: prop_types_1.default.oneOf(allViews),
-    minDate: propTypes_js_1.isMinDate,
-    minuteAriaLabel: prop_types_1.default.string,
-    minutePlaceholder: prop_types_1.default.string,
-    monthAriaLabel: prop_types_1.default.string,
-    monthPlaceholder: prop_types_1.default.string,
-    name: prop_types_1.default.string,
-    nativeInputAriaLabel: prop_types_1.default.string,
-    onCalendarClose: prop_types_1.default.func,
-    onCalendarOpen: prop_types_1.default.func,
-    onChange: prop_types_1.default.func,
-    onClockClose: prop_types_1.default.func,
-    onClockOpen: prop_types_1.default.func,
-    onFocus: prop_types_1.default.func,
-    openWidgetsOnFocus: prop_types_1.default.bool,
-    required: prop_types_1.default.bool,
-    secondAriaLabel: prop_types_1.default.string,
-    secondPlaceholder: prop_types_1.default.string,
-    showLeadingZeros: prop_types_1.default.bool,
-    value: isValueOrValueArray,
-    yearAriaLabel: prop_types_1.default.string,
-    yearPlaceholder: prop_types_1.default.string,
-};
-if (isBrowser) {
-    DateTimePicker.propTypes.portalContainer = prop_types_1.default.instanceOf(HTMLElement);
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, clsx_1.default)(baseClassName, "".concat(baseClassName, "--").concat(isCalendarOpen || isClockOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className), "data-testid": dataTestid, id: id }, eventProps, { onFocus: onFocus, ref: wrapper, children: [renderInputs(), renderCalendar(), renderClock()] })));
 }
 exports.default = DateTimePicker;

dist/cjs/Divider.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 type DividerProps = {
@@ -3,0 +3,0 @@ children?: React.ReactNode;

dist/cjs/Divider.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 function Divider(_a) {
     var children = _a.children;
-    return react_1.default.createElement("span", { className: "react-datetime-picker__inputGroup__divider" }, children);
+    return (0, jsx_runtime_1.jsx)("span", { className: "react-datetime-picker__inputGroup__divider", children: children });
 }
 exports.default = Divider;

dist/esm/DateTimeInput.js

@@ -13,12 +13,4 @@ 'use client';
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import React, { useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
 import { getYear, getMonthHuman, getDate, getHours, getMinutes, getSeconds, getHoursMinutesSeconds, } from '@wojtekmaj/date-utils';
@@ -100,4 +92,4 @@ import Divider from './Divider.js';
         // eslint-disable-next-line react/no-array-index-key
-        React.createElement(Divider, { key: "separator_".concat(index) }, element));
-        var res = __spreadArray(__spreadArray([], arr, true), [divider], false);
+        _jsx(Divider, { children: element }, "separator_".concat(index)));
+        arr.push(divider);
         var currentMatch = matches && matches[index];
@@ -110,13 +102,13 @@ if (currentMatch) {
             if (!renderFunction) {
-                return res;
+                return arr;
             }
             if (!allowMultipleInstances && usedFunctions.includes(renderFunction)) {
-                res.push(currentMatch);
+                arr.push(currentMatch);
             }
             else {
-                res.push(renderFunction(currentMatch, index));
+                arr.push(renderFunction(currentMatch, index));
                 usedFunctions.push(renderFunction);
             }
         }
-        return res;
+        return arr;
     }, []);
@@ -145,3 +137,3 @@ }
     var _m = useState(isWidgetOpenProps), isWidgetOpen = _m[0], setIsWidgetOpenOpen = _m[1];
-    var lastPressedKey = useRef();
+    var lastPressedKey = useRef(undefined);
     useEffect(function () {
@@ -462,5 +454,5 @@ setIsWidgetOpenOpen(isWidgetOpenProps);
         var showLeadingZerosFromFormat = currentMatch && currentMatch.length === 2;
-        return (React.createElement(DayInput, __assign({ key: "day" }, commonInputProps, { ariaLabel: dayAriaLabel, 
+        return (_jsx(DayInput, __assign({}, commonInputProps, { ariaLabel: dayAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, inputRef: dayInput, month: month, placeholder: dayPlaceholder, showLeadingZeros: showLeadingZerosFromFormat || showLeadingZeros, value: day, year: year })));
+            autoFocus: index === 0 && autoFocus, inputRef: dayInput, month: month, placeholder: dayPlaceholder, showLeadingZeros: showLeadingZerosFromFormat || showLeadingZeros, value: day, year: year }), "day"));
     }
@@ -472,15 +464,15 @@ function renderMonth(currentMatch, index) {
         if (currentMatch.length > 2) {
-            return (React.createElement(MonthSelect, __assign({ key: "month" }, commonInputProps, { ariaLabel: monthAriaLabel, 
+            return (_jsx(MonthSelect, __assign({}, commonInputProps, { ariaLabel: monthAriaLabel, 
                 // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus: index === 0 && autoFocus, inputRef: monthSelect, locale: locale, placeholder: monthPlaceholder, short: currentMatch.length === 3, value: month, year: year })));
+                autoFocus: index === 0 && autoFocus, inputRef: monthSelect, locale: locale, placeholder: monthPlaceholder, short: currentMatch.length === 3, value: month, year: year }), "month"));
         }
         var showLeadingZerosFromFormat = currentMatch && currentMatch.length === 2;
-        return (React.createElement(MonthInput, __assign({ key: "month" }, commonInputProps, { ariaLabel: monthAriaLabel, 
+        return (_jsx(MonthInput, __assign({}, commonInputProps, { ariaLabel: monthAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, inputRef: monthInput, placeholder: monthPlaceholder, showLeadingZeros: showLeadingZerosFromFormat || showLeadingZeros, value: month, year: year })));
+            autoFocus: index === 0 && autoFocus, inputRef: monthInput, placeholder: monthPlaceholder, showLeadingZeros: showLeadingZerosFromFormat || showLeadingZeros, value: month, year: year }), "month"));
     }
     function renderYear(currentMatch, index) {
-        return (React.createElement(YearInput, __assign({ key: "year" }, commonInputProps, { ariaLabel: yearAriaLabel, 
+        return (_jsx(YearInput, __assign({}, commonInputProps, { ariaLabel: yearAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, inputRef: yearInput, placeholder: yearPlaceholder, value: year, valueType: "day" })));
+            autoFocus: index === 0 && autoFocus, inputRef: yearInput, placeholder: yearPlaceholder, value: year, valueType: "day" }), "year"));
     }
@@ -492,5 +484,5 @@ function renderHour12(currentMatch, index) {
         var showLeadingZeros = currentMatch ? currentMatch.length === 2 : false;
-        return (React.createElement(Hour12Input, __assign({ key: "hour12" }, commonInputProps, commonTimeInputProps, { amPm: amPm, ariaLabel: hourAriaLabel, 
+        return (_jsx(Hour12Input, __assign({}, commonInputProps, commonTimeInputProps, { amPm: amPm, ariaLabel: hourAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, inputRef: hour12Input, placeholder: hourPlaceholder, showLeadingZeros: showLeadingZeros, value: hour })));
+            autoFocus: index === 0 && autoFocus, inputRef: hour12Input, placeholder: hourPlaceholder, showLeadingZeros: showLeadingZeros, value: hour }), "hour12"));
     }
@@ -502,5 +494,5 @@ function renderHour24(currentMatch, index) {
         var showLeadingZeros = currentMatch ? currentMatch.length === 2 : false;
-        return (React.createElement(Hour24Input, __assign({ key: "hour24" }, commonInputProps, commonTimeInputProps, { ariaLabel: hourAriaLabel, 
+        return (_jsx(Hour24Input, __assign({}, commonInputProps, commonTimeInputProps, { ariaLabel: hourAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, inputRef: hour24Input, placeholder: hourPlaceholder, showLeadingZeros: showLeadingZeros, value: hour })));
+            autoFocus: index === 0 && autoFocus, inputRef: hour24Input, placeholder: hourPlaceholder, showLeadingZeros: showLeadingZeros, value: hour }), "hour24"));
     }
@@ -518,5 +510,5 @@ function renderHour(currentMatch, index) {
         var showLeadingZeros = currentMatch ? currentMatch.length === 2 : false;
-        return (React.createElement(MinuteInput, __assign({ key: "minute" }, commonInputProps, commonTimeInputProps, { ariaLabel: minuteAriaLabel, 
+        return (_jsx(MinuteInput, __assign({}, commonInputProps, commonTimeInputProps, { ariaLabel: minuteAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, hour: hour, inputRef: minuteInput, placeholder: minutePlaceholder, showLeadingZeros: showLeadingZeros, value: minute })));
+            autoFocus: index === 0 && autoFocus, hour: hour, inputRef: minuteInput, placeholder: minutePlaceholder, showLeadingZeros: showLeadingZeros, value: minute }), "minute"));
     }
@@ -528,10 +520,10 @@ function renderSecond(currentMatch, index) {
         var showLeadingZeros = currentMatch ? currentMatch.length === 2 : true;
-        return (React.createElement(SecondInput, __assign({ key: "second" }, commonInputProps, commonTimeInputProps, { ariaLabel: secondAriaLabel, 
+        return (_jsx(SecondInput, __assign({}, commonInputProps, commonTimeInputProps, { ariaLabel: secondAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, hour: hour, inputRef: secondInput, minute: minute, placeholder: secondPlaceholder, showLeadingZeros: showLeadingZeros, value: second })));
+            autoFocus: index === 0 && autoFocus, hour: hour, inputRef: secondInput, minute: minute, placeholder: secondPlaceholder, showLeadingZeros: showLeadingZeros, value: second }), "second"));
     }
     function renderAmPm(currentMatch, index) {
-        return (React.createElement(AmPm, __assign({ key: "ampm" }, commonInputProps, commonTimeInputProps, { ariaLabel: amPmAriaLabel, 
+        return (_jsx(AmPm, __assign({}, commonInputProps, commonTimeInputProps, { ariaLabel: amPmAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, inputRef: amPmInput, locale: locale, onChange: onChange, value: amPm })));
+            autoFocus: index === 0 && autoFocus, inputRef: amPmInput, locale: locale, onChange: onChange, value: amPm }), "ampm"));
     }
@@ -553,9 +545,7 @@ function renderCustomInputsInternal() {
     function renderNativeInput() {
-        return (React.createElement(NativeInput, { key: "datetime", ariaLabel: nativeInputAriaLabel, disabled: disabled, maxDate: maxDate || defaultMaxDate, minDate: minDate || defaultMinDate, name: name, onChange: onChangeNative, required: required, value: value, valueType: valueType }));
+        return (_jsx(NativeInput, { ariaLabel: nativeInputAriaLabel, disabled: disabled, maxDate: maxDate || defaultMaxDate, minDate: minDate || defaultMinDate, name: name, onChange: onChangeNative, required: required, value: value, valueType: valueType }, "datetime"));
     }
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    React.createElement("div", { className: className, onClick: onClick },
-        renderNativeInput(),
-        renderCustomInputsInternal()));
+    _jsxs("div", { className: className, onClick: onClick, children: [renderNativeInput(), renderCustomInputsInternal()] }));
 }

dist/esm/DateTimeInput/NativeInput.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 type NativeInputProps = {
@@ -3,0 +3,0 @@ ariaLabel?: string;

dist/esm/DateTimeInput/NativeInput.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getHours, getHoursMinutes, getISOLocalDate, getISOLocalDateTime, } from '@wojtekmaj/date-utils';
@@ -36,3 +36,3 @@ export default function NativeInput(_a) {
     }
-    return (React.createElement("input", { "aria-label": ariaLabel, disabled: disabled, hidden: true, max: maxDate ? nativeValueParser(maxDate) : undefined, min: minDate ? nativeValueParser(minDate) : undefined, name: name, onChange: onChange, onFocus: stopPropagation, required: required, step: step, style: {
+    return (_jsx("input", { "aria-label": ariaLabel, disabled: disabled, hidden: true, max: maxDate ? nativeValueParser(maxDate) : undefined, min: minDate ? nativeValueParser(minDate) : undefined, name: name, onChange: onChange, onFocus: stopPropagation, required: required, step: step, style: {
             visibility: 'hidden',
@@ -39,0 +39,0 @@ position: 'absolute',

dist/esm/DateTimePicker.d.ts

@@ -1,10 +0,10 @@
-import React from 'react';
+/// <reference types="react" />
 import makeEventProps from 'make-event-props';
 import Calendar from 'react-calendar';
 import Clock from 'react-clock';
-import type { ReactNodeArray } from 'prop-types';
 import type { ClassName, CloseReason, Detail, LooseValue, OpenReason, Value } from './shared/types.js';
-type Icon = React.ReactElement | ReactNodeArray | null | string | number | boolean;
+type ReactNodeLike = React.ReactNode | string | number | boolean | null | undefined;
+type Icon = ReactNodeLike | ReactNodeLike[];
 type IconOrRenderFunction = Icon | React.ComponentType | React.ReactElement;
-type CalendarProps = Omit<React.ComponentPropsWithoutRef<typeof Calendar>, 'className' | 'maxDetail' | 'onChange'>;
+type CalendarProps = Omit<React.ComponentPropsWithoutRef<typeof Calendar>, 'onChange' | 'selectRange' | 'value'>;
 type ClockProps = Omit<React.ComponentPropsWithoutRef<typeof Clock>, 'value'>;
@@ -32,9 +32,2 @@ type EventProps = ReturnType<typeof makeEventProps>;
     /**
-     * Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element.
-     *
-     * @example 'class1 class2'
-     * @example ['class1', 'class2 class3']
-     */
-    calendarClassName?: ClassName;
-    /**
      * Content of the calendar button. Setting the value explicitly to `null` will hide the icon.
@@ -48,2 +41,6 @@ *
     /**
+     * Props to pass to React-Calendar component.
+     */
+    calendarProps?: CalendarProps;
+    /**
      * Class name(s) that will be added along with `"react-datetime-picker"` to the main React-DateTime-Picker `<div>` element.
@@ -70,8 +67,5 @@ *
     /**
-     * Class name(s) that will be added along with `"react-clock"` to the main React-Calendar `<div>` element.
-     *
-     * @example 'class1 class2'
-     * @example ['class1', 'class2 class3']
+     * Props to pass to React-Clock component.
      */
-    clockClassName?: ClassName;
+    clockProps?: ClockProps;
     /**
@@ -355,4 +349,4 @@ * Whether to close the widgets on value selection. **Note**: It's recommended to use `shouldCloseWidgets` function instead.
     yearPlaceholder?: string;
-} & CalendarProps & ClockProps & Omit<EventProps, 'onChange' | 'onFocus'>;
-declare const DateTimePicker: React.FC<DateTimePickerProps>;
-export default DateTimePicker;
+} & Omit<EventProps, 'onChange' | 'onFocus'>;
+export default function DateTimePicker(props: DateTimePickerProps): JSX.Element;
+export {};

dist/esm/DateTimePicker.js

@@ -24,5 +24,5 @@ 'use client';
 };
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
 import makeEventProps from 'make-event-props';
@@ -34,4 +34,2 @@ import clsx from 'clsx';
 import DateTimeInput from './DateTimeInput.js';
-import { isMaxDate, isMinDate, rangeOf } from './shared/propTypes.js';
-var isBrowser = typeof document !== 'undefined';
 var baseClassName = 'react-datetime-picker';
@@ -48,10 +46,5 @@ var outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];
 };
-var CalendarIcon = (React.createElement("svg", __assign({}, iconProps, { className: "".concat(baseClassName, "__calendar-button__icon ").concat(baseClassName, "__button__icon") }),
-    React.createElement("rect", { fill: "none", height: "15", width: "15", x: "2", y: "2" }),
-    React.createElement("line", { x1: "6", x2: "6", y1: "0", y2: "4" }),
-    React.createElement("line", { x1: "13", x2: "13", y1: "0", y2: "4" })));
-var ClearIcon = (React.createElement("svg", __assign({}, iconProps, { className: "".concat(baseClassName, "__clear-button__icon ").concat(baseClassName, "__button__icon") }),
-    React.createElement("line", { x1: "4", x2: "15", y1: "4", y2: "15" }),
-    React.createElement("line", { x1: "15", x2: "4", y1: "4", y2: "15" })));
-var DateTimePicker = function DateTimePicker(props) {
+var CalendarIcon = (_jsxs("svg", __assign({}, iconProps, { className: "".concat(baseClassName, "__calendar-button__icon ").concat(baseClassName, "__button__icon"), children: [_jsx("rect", { fill: "none", height: "15", width: "15", x: "2", y: "2" }), _jsx("line", { x1: "6", x2: "6", y1: "0", y2: "4" }), _jsx("line", { x1: "13", x2: "13", y1: "0", y2: "4" })] })));
+var ClearIcon = (_jsxs("svg", __assign({}, iconProps, { className: "".concat(baseClassName, "__clear-button__icon ").concat(baseClassName, "__button__icon"), children: [_jsx("line", { x1: "4", x2: "15", y1: "4", y2: "15" }), _jsx("line", { x1: "15", x2: "4", y1: "4", y2: "15" })] })));
+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, 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"]);
@@ -257,8 +250,5 @@ var _j = useState(isCalendarOpenProps), isCalendarOpen = _j[0], setIsCalendarOpen = _j[1];
         };
-        return (React.createElement("div", { className: "".concat(baseClassName, "__wrapper") },
-            React.createElement(DateTimeInput, __assign({}, ariaLabelProps, placeholderProps, { 
-                // 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, 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)),
-            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))));
+        return (_jsxs("div", { className: "".concat(baseClassName, "__wrapper"), children: [_jsx(DateTimeInput, __assign({}, ariaLabelProps, placeholderProps, { 
+                    // 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, onInvalidChange: onInvalidChange, required: required, showLeadingZeros: showLeadingZeros, value: valueFrom })), clearIcon !== null && (_jsx("button", { "aria-label": clearAriaLabel, className: "".concat(baseClassName, "__clear-button ").concat(baseClassName, "__button"), disabled: disabled, onClick: clear, onFocus: stopPropagation, type: "button", children: typeof clearIcon === 'function' ? createElement(clearIcon) : clearIcon })), calendarIcon !== null && !disableCalendar && (_jsx("button", { "aria-expanded": isCalendarOpen || false, "aria-label": calendarAriaLabel, className: "".concat(baseClassName, "__calendar-button ").concat(baseClassName, "__button"), disabled: disabled, onClick: toggleCalendar, onFocus: stopPropagation, type: "button", children: typeof calendarIcon === 'function' ? createElement(calendarIcon) : calendarIcon }))] }));
     }
@@ -269,15 +259,11 @@ function renderCalendar() {
         }
-        var calendarClassName = props.calendarClassName, dateTimePickerClassName = props.className, // Unused, here to exclude it from calendarProps
-        dateTimePickerMaxDetail = props.maxDetail, // Unused, here to exclude it from calendarProps
-        onChangeProps = props.onChange, // Unused, here to exclude it from calendarProps
-        portalContainer = props.portalContainer, value = props.value, calendarProps = __rest(props, ["calendarClassName", "className", "maxDetail", "onChange", "portalContainer", "value"]);
+        var calendarProps = props.calendarProps, portalContainer = props.portalContainer, value = props.value;
         var className = "".concat(baseClassName, "__calendar");
         var classNames = clsx(className, "".concat(className, "--").concat(isCalendarOpen ? 'open' : 'closed'));
-        var calendar = (React.createElement(Calendar, __assign({ className: calendarClassName, onChange: function (value) { return onDateChange(value); }, value: value }, calendarProps)));
-        return portalContainer ? (createPortal(React.createElement("div", { ref: calendarWrapper, className: classNames }, calendar), portalContainer)) : (React.createElement(Fit, null,
-            React.createElement("div", { ref: function (ref) {
+        var calendar = (_jsx(Calendar, __assign({ locale: locale, maxDate: maxDate, minDate: minDate, onChange: function (value) { return onDateChange(value); }, value: value }, calendarProps)));
+        return portalContainer ? (createPortal(_jsx("div", { ref: calendarWrapper, className: classNames, children: calendar }), portalContainer)) : (_jsx(Fit, { children: _jsx("div", { ref: function (ref) {
                     if (ref && !isCalendarOpen) {
                         ref.removeAttribute('style');
                     }
-                }, className: classNames }, calendar)));
+                }, className: classNames, children: calendar }) }));
     }
@@ -288,5 +274,3 @@ function renderClock() {
         }
-        var clockClassName = props.clockClassName, dateTimePickerClassName = props.className, // Unused, here to exclude it from clockProps
-        _a = props.maxDetail, // Unused, here to exclude it from clockProps
-        maxDetail = _a === void 0 ? 'minute' : _a, onChange = props.onChange, portalContainer = props.portalContainer, value = props.value, clockProps = __rest(props, ["clockClassName", "className", "maxDetail", "onChange", "portalContainer", "value"]);
+        var clockProps = props.clockProps, _a = props.maxDetail, maxDetail = _a === void 0 ? 'minute' : _a, portalContainer = props.portalContainer, value = props.value;
         var className = "".concat(baseClassName, "__clock");
@@ -296,69 +280,11 @@ var classNames = clsx(className, "".concat(className, "--").concat(isClockOpen ? 'open' : 'closed'));
         var maxDetailIndex = allViews.indexOf(maxDetail);
-        var clock = (React.createElement(Clock, __assign({ className: clockClassName, renderMinuteHand: maxDetailIndex > 0, renderSecondHand: maxDetailIndex > 1, value: valueFrom }, clockProps)));
-        return portalContainer ? (createPortal(React.createElement("div", { ref: clockWrapper, className: classNames }, clock), portalContainer)) : (React.createElement(Fit, null,
-            React.createElement("div", { ref: function (ref) {
+        var clock = (_jsx(Clock, __assign({ locale: locale, renderMinuteHand: maxDetailIndex > 0, renderSecondHand: maxDetailIndex > 1, value: valueFrom }, clockProps)));
+        return portalContainer ? (createPortal(_jsx("div", { ref: clockWrapper, className: classNames, children: clock }), portalContainer)) : (_jsx(Fit, { children: _jsx("div", { ref: function (ref) {
                     if (ref && !isClockOpen) {
                         ref.removeAttribute('style');
                     }
-                }, className: classNames }, clock)));
+                }, className: classNames, children: clock }) }));
     }
     var eventProps = useMemo(function () { return makeEventProps(otherProps); }, [otherProps]);
-    return (React.createElement("div", __assign({ className: clsx(baseClassName, "".concat(baseClassName, "--").concat(isCalendarOpen || isClockOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className), "data-testid": dataTestid, id: id }, eventProps, { onFocus: onFocus, ref: wrapper }),
-        renderInputs(),
-        renderCalendar(),
-        renderClock()));
-};
-var isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]);
-var isValueOrValueArray = PropTypes.oneOfType([isValue, rangeOf(isValue)]);
-DateTimePicker.propTypes = {
-    amPmAriaLabel: PropTypes.string,
-    autoFocus: PropTypes.bool,
-    calendarAriaLabel: PropTypes.string,
-    calendarClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    calendarIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-    className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    clearAriaLabel: PropTypes.string,
-    clearIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-    clockClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    closeWidgets: PropTypes.bool,
-    'data-testid': PropTypes.string,
-    dayAriaLabel: PropTypes.string,
-    dayPlaceholder: PropTypes.string,
-    disableCalendar: PropTypes.bool,
-    disableClock: PropTypes.bool,
-    disabled: PropTypes.bool,
-    format: PropTypes.string,
-    hourAriaLabel: PropTypes.string,
-    hourPlaceholder: PropTypes.string,
-    id: PropTypes.string,
-    isCalendarOpen: PropTypes.bool,
-    isClockOpen: PropTypes.bool,
-    locale: PropTypes.string,
-    maxDate: isMaxDate,
-    maxDetail: PropTypes.oneOf(allViews),
-    minDate: isMinDate,
-    minuteAriaLabel: PropTypes.string,
-    minutePlaceholder: PropTypes.string,
-    monthAriaLabel: PropTypes.string,
-    monthPlaceholder: PropTypes.string,
-    name: PropTypes.string,
-    nativeInputAriaLabel: PropTypes.string,
-    onCalendarClose: PropTypes.func,
-    onCalendarOpen: PropTypes.func,
-    onChange: PropTypes.func,
-    onClockClose: PropTypes.func,
-    onClockOpen: PropTypes.func,
-    onFocus: PropTypes.func,
-    openWidgetsOnFocus: PropTypes.bool,
-    required: PropTypes.bool,
-    secondAriaLabel: PropTypes.string,
-    secondPlaceholder: PropTypes.string,
-    showLeadingZeros: PropTypes.bool,
-    value: isValueOrValueArray,
-    yearAriaLabel: PropTypes.string,
-    yearPlaceholder: PropTypes.string,
-};
-if (isBrowser) {
-    DateTimePicker.propTypes.portalContainer = PropTypes.instanceOf(HTMLElement);
+    return (_jsxs("div", __assign({ className: clsx(baseClassName, "".concat(baseClassName, "--").concat(isCalendarOpen || isClockOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className), "data-testid": dataTestid, id: id }, eventProps, { onFocus: onFocus, ref: wrapper, children: [renderInputs(), renderCalendar(), renderClock()] })));
 }
-export default DateTimePicker;

dist/esm/Divider.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 type DividerProps = {
@@ -3,0 +3,0 @@ children?: React.ReactNode;

dist/esm/Divider.js

@@ -1,5 +0,5 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function Divider(_a) {
     var children = _a.children;
-    return React.createElement("span", { className: "react-datetime-picker__inputGroup__divider" }, children);
+    return _jsx("span", { className: "react-datetime-picker__inputGroup__divider", children: children });
 }

package.json

 {
   "name": "react-datetime-picker",
-  "version": "5.6.0",
+  "version": "6.0.0",
   "description": "A date range picker for your React app.",
@@ -36,3 +36,3 @@ "type": "module",
     "build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm",
-    "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs --verbatimModuleSyntax false",
+    "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs --moduleResolution node --verbatimModuleSyntax false",
     "build-js-cjs-package": "echo '{\n  \"type\": \"commonjs\"\n}' > dist/cjs/package.json",
@@ -42,6 +42,6 @@ "build-js-cjs-replace": "replace-in-files --string='/dist/esm/'  --replacement='/dist/cjs/' dist/cjs/**/*",
     "copy-styles": "cpy 'src/**/*.css' dist",
+    "format": "prettier --check . --cache",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "prepack": "yarn clean && yarn build",
-    "prettier": "prettier --check . --cache",
-    "test": "yarn lint && yarn tsc && yarn prettier && yarn unit",
+    "test": "yarn lint && yarn tsc && yarn format && yarn unit",
     "tsc": "tsc",
@@ -71,22 +71,21 @@ "unit": "vitest",
     "make-event-props": "^1.6.0",
-    "prop-types": "^15.6.0",
-    "react-calendar": "^4.6.0",
-    "react-clock": "^4.5.0",
-    "react-date-picker": "^10.5.0",
-    "react-fit": "^1.7.0",
-    "react-time-picker": "^6.5.0"
+    "react-calendar": "^5.0.0",
+    "react-clock": "^5.0.0",
+    "react-date-picker": "^11.0.0",
+    "react-fit": "^2.0.0",
+    "react-time-picker": "^7.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^9.0.0",
+    "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.0",
+    "@testing-library/react": "^15.0.0",
+    "@testing-library/user-event": "^14.5.0",
     "@types/node": "*",
     "@types/react": "*",
     "cpy-cli": "^5.0.0",
-    "eslint": "^8.26.0",
-    "eslint-config-wojtekmaj": "^0.9.0",
+    "eslint": "^8.56.0",
+    "eslint-config-wojtekmaj": "^1.0.0",
     "happy-dom": "^12.6.0",
     "nodemon": "^3.0.0",
-    "prettier": "^3.0.0",
+    "prettier": "^3.2.0",
     "react": "^18.2.0",
@@ -96,3 +95,3 @@ "react-dom": "^18.2.0",
     "rimraf": "^3.0.0",
-    "typescript": "^5.3.2",
+    "typescript": "^5.4.2",
     "vitest": "^1.0.2",
@@ -121,3 +120,3 @@ "vitest-canvas-mock": "^0.2.2"
     "type": "git",
-    "url": "https://github.com/wojtekmaj/react-datetime-picker.git",
+    "url": "git+https://github.com/wojtekmaj/react-datetime-picker.git",
     "directory": "packages/react-datetime-picker"
@@ -124,0 +123,0 @@ },

README.md

@@ -22,2 +22,10 @@ [![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/actions/workflows/ci.yml/badge.svg)](https://github.com/wojtekmaj/react-datetime-picker/actions)
 
+## Consider native alternative
+
+If you don't need to support legacy browsers and don't need the advanced features this package provides, consider using native datetime input instead. It's more accessible, adds no extra weight to your bundle, and works better on mobile devices.
+
+```tsx
+<input aria-label="Date and time" type="datetime-local" />
+```
+
 ## Looking for _just_ a date picker or a time picker?
@@ -94,3 +102,3 @@
 | calendarAriaLabel    | `aria-label` for the calendar button.                                                                                                                                                                                                                                                                                                                                                       | n/a                                   | `"Toggle calendar"`                                                                                                                                                                                                                                                    |
-| calendarClassName    | Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element.                                                                                                                                                                                                                                                                                  | n/a                                   | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>                                                                                                                                                                    |
+| calendarProps        | Props to pass to React-Calendar component.                                                                                                                                                                                                                                                                                                                                                  | n/a                                   | See [React-Calendar documentation](https://github.com/wojtekmaj/react-calendar)                                                                                                                                                                                        |
 | calendarIcon         | Content of the calendar button. Setting the value explicitly to `null` will hide the icon.                                                                                                                                                                                                                                                                                                  | (default icon)                        | <ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li><li>React function: `CalendarIcon`</li></ul>                                                                                                                                                |
@@ -100,3 +108,3 @@ | className            | Class name(s) that will be added along with `"react-datetime-picker"` to the main React-DateTime-Picker `<div>` element.                                                                                                                                                                                                                                                                    | n/a                                   | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>                                                                                                                                                                    |
 | clearIcon            | Content of the clear button. Setting the value explicitly to `null` will hide the icon.                                                                                                                                                                                                                                                                                                     | (default icon)                        | <ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li><li>React function: `ClearIcon`</li></ul>                                                                                                                                                         |
-| 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>                                                                                                                                                                    |
+| clockProps           | Props to pass to React-Clock component.                                                                                                                                                                                                                                                                                                                                                     | n/a                                   | See [React-Clock documentation](https://github.com/wojtekmaj/react-clock)                                                                                                                                                                                              |
 | closeWidgets         | Whether to close the widgets on value selection. **Note**: It's recommended to use `shouldCloseWidgets` function instead.                                                                                                                                                                                                                                                                   | `true`                                | `false`                                                                                                                                                                                                                                                                |
@@ -103,0 +111,0 @@ | data-testid          | `data-testid` attribute for the main React-DateTime-Picker `<div>` element.                                                                                                                                                                                                                                                                                                                 | n/a                                   | `"datetime-picker"`                                                                                                                                                                                                                                                    |

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

Dependency count

12

decreased by-7.69%

Number of lines in readme file

174

increased by4.82%

Worsened metrics

Total package byte prevSize

298904

decreased by-6.54%

Number of package files

57

decreased by-8.06%

Lines of code

6285

decreased by-6.94%

Dependency changes

• + Addedreact-calendar@5.1.0(transitive)

• + Addedreact-clock@5.1.0(transitive)

• + Addedreact-date-picker@11.0.0(transitive)

• + Addedreact-fit@2.0.1(transitive)

• + Addedreact-time-picker@7.0.0(transitive)

• - Removedprop-types@^15.6.0

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact-calendar@4.8.0(transitive)

• - Removedreact-clock@4.6.0(transitive)

• - Removedreact-date-picker@10.6.0(transitive)

• - Removedreact-fit@1.7.1(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedreact-time-picker@6.6.0(transitive)

• - Removedtiny-warning@1.0.3(transitive)

• Updatedreact-calendar@^5.0.0

• Updatedreact-clock@^5.0.0

• Updatedreact-date-picker@^11.0.0

• Updatedreact-fit@^2.0.0

• Updatedreact-time-picker@^7.0.0