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

Comparing version 5.5.0 to 6.0.0

dist/cjs/DateTimeRangePicker.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-datetimerange-picker"` to the main React-DateTimeRange-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;
     /**
@@ -362,4 +356,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 DateTimeRangePicker: React.FC<DateTimeRangePickerProps>;
-export default DateTimeRangePicker;
+} & Omit<EventProps, 'onChange' | 'onFocus'>;
+export default function DateTimeRangePicker(props: DateTimeRangePickerProps): JSX.Element;
+export {};

dist/cjs/DateTimeRangePicker.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_1 = __importDefault(require("react-datetime-picker/dist/cjs/DateTimeInput"));
-var propTypes_js_1 = require("./shared/propTypes.js");
-var isBrowser = typeof document !== 'undefined';
 var baseClassName = 'react-datetimerange-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 DateTimeRangePicker = function DateTimeRangePicker(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 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, 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"]);
@@ -307,10 +277,5 @@ var _k = (0, react_1.useState)(isCalendarOpenProps), isCalendarOpen = _k[0], setIsCalendarOpen = _k[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, onInvalidChange: onInvalidChange, required: required, showLeadingZeros: showLeadingZeros });
-        return (react_1.default.createElement("div", { className: "".concat(baseClassName, "__wrapper") },
-            react_1.default.createElement(DateTimeInput_1.default, __assign({}, commonProps, { 
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus: autoFocus, name: "".concat(name, "_from"), onChange: onChangeFrom, value: valueFrom })),
-            react_1.default.createElement("span", { className: "".concat(baseClassName, "__range-divider") }, rangeDivider),
-            react_1.default.createElement(DateTimeInput_1.default, __assign({}, commonProps, { name: "".concat(name, "_to"), onChange: onChangeTo, value: valueTo })),
-            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_1.default, __assign({}, commonProps, { 
+                    // eslint-disable-next-line jsx-a11y/no-autofocus
+                    autoFocus: autoFocus, name: "".concat(name, "_from"), onChange: onChangeFrom, value: valueFrom })), (0, jsx_runtime_1.jsx)("span", { className: "".concat(baseClassName, "__range-divider"), children: rangeDivider }), (0, jsx_runtime_1.jsx)(DateTimeInput_1.default, __assign({}, commonProps, { name: "".concat(name, "_to"), onChange: onChangeTo, value: valueTo })), 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 }))] }));
     }
@@ -321,15 +286,11 @@ function renderCalendar() {
         }
-        var calendarClassName = props.calendarClassName, dateTimeRangePickerClassName = props.className, // Unused, here to exclude it from calendarProps
-        dateTimeRangePickerMaxDetail = 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); }, selectRange: true, 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); }, selectRange: true, 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 }) }));
     }
@@ -340,5 +301,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");
@@ -348,70 +307,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)]);
-DateTimeRangePicker.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,
-    rangeDivider: prop_types_1.default.node,
-    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) {
-    DateTimeRangePicker.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 = DateTimeRangePicker;

dist/esm/DateTimeRangePicker.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-datetimerange-picker"` to the main React-DateTimeRange-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;
     /**
@@ -362,4 +356,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 DateTimeRangePicker: React.FC<DateTimeRangePickerProps>;
-export default DateTimeRangePicker;
+} & Omit<EventProps, 'onChange' | 'onFocus'>;
+export default function DateTimeRangePicker(props: DateTimeRangePickerProps): JSX.Element;
+export {};

dist/esm/DateTimeRangePicker.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 'react-datetime-picker/dist/esm/DateTimeInput';
-import { isMaxDate, isMinDate, rangeOf } from './shared/propTypes.js';
-var isBrowser = typeof document !== 'undefined';
 var baseClassName = 'react-datetimerange-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 DateTimeRangePicker = function DateTimeRangePicker(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 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, 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"]);
@@ -278,10 +271,5 @@ var _k = useState(isCalendarOpenProps), isCalendarOpen = _k[0], setIsCalendarOpen = _k[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, onInvalidChange: onInvalidChange, required: required, showLeadingZeros: showLeadingZeros });
-        return (React.createElement("div", { className: "".concat(baseClassName, "__wrapper") },
-            React.createElement(DateTimeInput, __assign({}, commonProps, { 
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus: autoFocus, name: "".concat(name, "_from"), onChange: onChangeFrom, value: valueFrom })),
-            React.createElement("span", { className: "".concat(baseClassName, "__range-divider") }, rangeDivider),
-            React.createElement(DateTimeInput, __assign({}, commonProps, { name: "".concat(name, "_to"), onChange: onChangeTo, value: valueTo })),
-            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({}, commonProps, { 
+                    // eslint-disable-next-line jsx-a11y/no-autofocus
+                    autoFocus: autoFocus, name: "".concat(name, "_from"), onChange: onChangeFrom, value: valueFrom })), _jsx("span", { className: "".concat(baseClassName, "__range-divider"), children: rangeDivider }), _jsx(DateTimeInput, __assign({}, commonProps, { name: "".concat(name, "_to"), onChange: onChangeTo, value: valueTo })), 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 }))] }));
     }
@@ -292,15 +280,11 @@ function renderCalendar() {
         }
-        var calendarClassName = props.calendarClassName, dateTimeRangePickerClassName = props.className, // Unused, here to exclude it from calendarProps
-        dateTimeRangePickerMaxDetail = 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); }, selectRange: true, 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); }, selectRange: true, 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 }) }));
     }
@@ -311,5 +295,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");
@@ -319,70 +301,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)]);
-DateTimeRangePicker.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,
-    rangeDivider: PropTypes.node,
-    required: PropTypes.bool,
-    secondAriaLabel: PropTypes.string,
-    secondPlaceholder: PropTypes.string,
-    showLeadingZeros: PropTypes.bool,
-    value: isValueOrValueArray,
-    yearAriaLabel: PropTypes.string,
-    yearPlaceholder: PropTypes.string,
-};
-if (isBrowser) {
-    DateTimeRangePicker.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 DateTimeRangePicker;

package.json

 {
   "name": "@wojtekmaj/react-datetimerange-picker",
-  "version": "5.5.0",
+  "version": "6.0.0",
   "description": "A datetime range picker for your React app.",
@@ -24,3 +24,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",
@@ -30,6 +30,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",
@@ -61,21 +61,20 @@ "unit": "vitest",
     "make-event-props": "^1.6.0",
-    "prop-types": "^15.6.0",
-    "react-calendar": "^4.6.0",
-    "react-clock": "^4.5.0",
-    "react-datetime-picker": "^5.5.1",
-    "react-fit": "^1.7.0"
+    "react-calendar": "^5.0.0",
+    "react-clock": "^5.0.0",
+    "react-datetime-picker": "^6.0.1",
+    "react-fit": "^2.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",
@@ -85,3 +84,3 @@ "react-dom": "^18.2.0",
     "rimraf": "^3.0.0",
-    "typescript": "^5.3.2",
+    "typescript": "^5.4.2",
     "vitest": "^1.0.2",
@@ -91,5 +90,5 @@ "vitest-canvas-mock": "^0.2.2"
   "peerDependencies": {
-    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
@@ -111,3 +110,3 @@ "peerDependenciesMeta": {
     "type": "git",
-    "url": "https://github.com/wojtekmaj/react-datetimerange-picker.git",
+    "url": "git+https://github.com/wojtekmaj/react-datetimerange-picker.git",
     "directory": "packages/react-datetimerange-picker"
@@ -114,0 +113,0 @@ },

README.md

@@ -23,2 +23,11 @@ [![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/actions/workflows/ci.yml/badge.svg)](https://github.com/wojtekmaj/react-datetimerange-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 from" max={valueTo} min={minDatetime} type="datetime-local" />
+<input aria-label="Date and time to" max={maxDatetime} min={valueFrom} type="datetime-local" />
+```
+
 ## Looking for a time picker or a datetime picker?
@@ -95,3 +104,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>                                                                                                                                                |
@@ -101,3 +110,3 @@ | className            | Class name(s) that will be added along with `"react-datetimerange-picker"` to the main React-DateTimeRange-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`                                                                                                                                                                                                                                                                |
@@ -104,0 +113,0 @@ | data-testid          | `data-testid` attribute for the main React-DateTimeRange-Picker `<div>` element.                                                                                                                                                                                                                                                                                                            | n/a                                   | `"datetimerange-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

9

decreased by-10%

Number of lines in readme file

168

increased by5.66%

Worsened metrics

Total package byte prevSize

184478

decreased by-8.51%

Number of package files

22

decreased by-18.52%

Lines of code

3515

decreased by-10.13%

Dependency changes

• + Addedreact-calendar@5.1.0(transitive)

• + Addedreact-clock@5.1.0(transitive)

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

• + Addedreact-datetime-picker@6.0.1(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-datetime-picker@5.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-datetime-picker@^6.0.1

• Updatedreact-fit@^2.0.0