react-date-picker - npm Package Compare versions

Comparing version 10.6.0 to 11.0.0

dist/cjs/DateInput.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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
@@ -51,3 +28,4 @@ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
 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");
@@ -142,4 +120,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];
@@ -152,13 +130,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;
     }, []);
@@ -177,3 +155,3 @@ }
     var _k = (0, react_1.useState)(isCalendarOpenProps), isCalendarOpen = _k[0], setIsCalendarOpen = _k[1];
-    var lastPressedKey = (0, react_1.useRef)();
+    var lastPressedKey = (0, react_1.useRef)(undefined);
     (0, react_1.useEffect)(function () {
@@ -439,5 +417,5 @@ setIsCalendarOpen(isCalendarOpenProps);
         var showLeadingZerosFromFormat = currentMatch && currentMatch.length === 2;
-        return (react_1.default.createElement(DayInput_js_1.default, __assign({ key: "day" }, commonInputProps, { ariaLabel: dayAriaLabel, 
+        return ((0, jsx_runtime_1.jsx)(DayInput_js_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"));
     }
@@ -449,15 +427,15 @@ function renderMonth(currentMatch, index) {
         if (currentMatch.length > 2) {
-            return (react_1.default.createElement(MonthSelect_js_1.default, __assign({ key: "month" }, commonInputProps, { ariaLabel: monthAriaLabel, 
+            return ((0, jsx_runtime_1.jsx)(MonthSelect_js_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_js_1.default, __assign({ key: "month" }, commonInputProps, { ariaLabel: monthAriaLabel, 
+        return ((0, jsx_runtime_1.jsx)(MonthInput_js_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_js_1.default, __assign({ key: "year" }, commonInputProps, { ariaLabel: yearAriaLabel, 
+        return ((0, jsx_runtime_1.jsx)(YearInput_js_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: valueType })));
+            autoFocus: index === 0 && autoFocus, inputRef: yearInput, placeholder: yearPlaceholder, value: year, valueType: valueType }), "year"));
     }
@@ -474,10 +452,8 @@ function renderCustomInputsInternal() {
     function renderNativeInput() {
-        return (react_1.default.createElement(NativeInput_js_1.default, { key: "date", 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 }, "date"));
     }
     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 = DateInput;

dist/cjs/DateInput/DayInput.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 import Input from './Input.js';
@@ -3,0 +3,0 @@ type DayInputProps = {

dist/cjs/DateInput/DayInput.js

@@ -28,3 +28,3 @@ "use strict";
 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");
@@ -46,4 +46,4 @@ var Input_js_1 = __importDefault(require("./Input.js"));
     var minDay = (0, utils_js_1.safeMax)(1, minDate && isSameMonth(minDate) && (0, date_utils_1.getDate)(minDate));
-    return react_1.default.createElement(Input_js_1.default, __assign({ max: maxDay, min: minDay, name: "day" }, otherProps));
+    return (0, jsx_runtime_1.jsx)(Input_js_1.default, __assign({ max: maxDay, min: minDay, name: "day" }, otherProps));
 }
 exports.default = DayInput;

dist/cjs/DateInput/Input.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 type InputProps = {
@@ -7,3 +7,3 @@ ariaLabel?: string;
     disabled?: boolean;
-    inputRef?: React.RefObject<HTMLInputElement>;
+    inputRef?: React.RefObject<HTMLInputElement | null>;
     max: number;
@@ -10,0 +10,0 @@ min: number;

dist/cjs/DateInput/Input.js

@@ -29,3 +29,4 @@ "use strict";
 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 clsx_1 = __importDefault(require("clsx"));
@@ -127,11 +128,11 @@ var update_input_width_1 = __importStar(require("update-input-width"));
     var maxLength = max ? max.toString().length : null;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        hasLeadingZero ? react_1.default.createElement("span", { className: "".concat(className, "__leadingZero") }, "0") : null,
-        react_1.default.createElement("input", { "aria-label": ariaLabel, autoComplete: "off", autoFocus: autoFocus, className: (0, clsx_1.default)("".concat(className, "__input"), "".concat(className, "__").concat(nameForClass || name), hasLeadingZero && "".concat(className, "__input--hasLeadingZero")), "data-input": "true", disabled: disabled, inputMode: "numeric", max: max, min: min, name: name, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onKeyPress: makeOnKeyPress(maxLength), onKeyUp: function (event) {
-                (0, update_input_width_1.default)(event.target);
-                if (onKeyUp) {
-                    onKeyUp(event);
-                }
-            }, placeholder: placeholder, ref: inputRef, required: required, step: step, type: "number", value: value !== null ? value : '' })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasLeadingZero ? (0, jsx_runtime_1.jsx)("span", { className: "".concat(className, "__leadingZero"), children: "0" }) : null, (0, jsx_runtime_1.jsx)("input", { "aria-label": ariaLabel, autoComplete: "off", autoFocus: autoFocus, className: (0, clsx_1.default)("".concat(className, "__input"), "".concat(className, "__").concat(nameForClass || name), hasLeadingZero && "".concat(className, "__input--hasLeadingZero")), "data-input": "true", disabled: disabled, inputMode: "numeric", max: max, min: min, name: name, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onKeyPress: makeOnKeyPress(maxLength), onKeyUp: function (event) {
+                    (0, update_input_width_1.default)(event.target);
+                    if (onKeyUp) {
+                        onKeyUp(event);
+                    }
+                }, placeholder: placeholder, 
+                // Assertion is needed for React 18 compatibility
+                ref: inputRef, required: required, step: step, type: "number", value: value !== null ? value : '' })] }));
 }
 exports.default = Input;

dist/cjs/DateInput/MonthInput.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 import Input from './Input.js';
@@ -3,0 +3,0 @@ type MonthInputProps = {

dist/cjs/DateInput/MonthInput.js

@@ -28,3 +28,3 @@ "use strict";
 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");
@@ -40,4 +40,4 @@ var Input_js_1 = __importDefault(require("./Input.js"));
     var minMonth = (0, utils_js_1.safeMax)(1, minDate && isSameYear(minDate) && (0, date_utils_1.getMonthHuman)(minDate));
-    return react_1.default.createElement(Input_js_1.default, __assign({ max: maxMonth, min: minMonth, name: "month" }, otherProps));
+    return (0, jsx_runtime_1.jsx)(Input_js_1.default, __assign({ max: maxMonth, min: minMonth, name: "month" }, otherProps));
 }
 exports.default = MonthInput;

dist/cjs/DateInput/MonthSelect.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 type MonthSelectProps = {
@@ -7,3 +7,3 @@ ariaLabel?: string;
     disabled?: boolean;
-    inputRef?: React.RefObject<HTMLSelectElement>;
+    inputRef?: React.RefObject<HTMLSelectElement | null>;
     locale?: string;
@@ -10,0 +10,0 @@ maxDate?: Date;

dist/cjs/DateInput/MonthSelect.js

@@ -15,3 +15,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var clsx_1 = __importDefault(require("clsx"));
@@ -31,10 +31,10 @@ var date_utils_1 = require("@wojtekmaj/date-utils");
     var formatter = short ? dateFormatter_js_1.formatShortMonth : dateFormatter_js_1.formatMonth;
-    return (react_1.default.createElement("select", { "aria-label": ariaLabel, autoFocus: autoFocus, className: (0, clsx_1.default)("".concat(className, "__input"), "".concat(className, "__").concat(name)), "data-input": "true", "data-select": "true", disabled: disabled, name: name, onChange: onChange, onKeyDown: onKeyDown, ref: inputRef, required: required, value: value !== null ? value : '' },
-        !value && react_1.default.createElement("option", { value: "" }, placeholder),
-        dates.map(function (date) {
-            var month = (0, date_utils_1.getMonthHuman)(date);
-            var disabled = month < minMonth || month > maxMonth;
-            return (react_1.default.createElement("option", { key: month, disabled: disabled, value: month }, formatter(locale, date)));
-        })));
+    return ((0, jsx_runtime_1.jsxs)("select", { "aria-label": ariaLabel, autoFocus: autoFocus, className: (0, clsx_1.default)("".concat(className, "__input"), "".concat(className, "__").concat(name)), "data-input": "true", "data-select": "true", disabled: disabled, name: name, onChange: onChange, onKeyDown: onKeyDown, 
+        // Assertion is needed for React 18 compatibility
+        ref: inputRef, required: required, value: value !== null ? value : '', children: [!value && (0, jsx_runtime_1.jsx)("option", { value: "", children: placeholder }), dates.map(function (date) {
+                var month = (0, date_utils_1.getMonthHuman)(date);
+                var disabled = month < minMonth || month > maxMonth;
+                return ((0, jsx_runtime_1.jsx)("option", { disabled: disabled, value: month, children: formatter(locale, date) }, month));
+            })] }));
 }
 exports.default = MonthSelect;

dist/cjs/DateInput/NativeInput.d.ts

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

dist/cjs/DateInput/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");
@@ -39,3 +36,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, 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, style: {
             visibility: 'hidden',
@@ -42,0 +39,0 @@ position: 'absolute',

dist/cjs/DateInput/YearInput.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 import Input from './Input.js';
@@ -3,0 +3,0 @@ type YearInputProps = {

dist/cjs/DateInput/YearInput.js

@@ -28,3 +28,3 @@ "use strict";
 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");
@@ -43,4 +43,4 @@ var Input_js_1 = __importDefault(require("./Input.js"));
     })();
-    return (react_1.default.createElement(Input_js_1.default, __assign({ max: maxYear, min: minYear, name: "year", placeholder: placeholder, step: yearStep }, otherProps)));
+    return ((0, jsx_runtime_1.jsx)(Input_js_1.default, __assign({ max: maxYear, min: minYear, name: "year", placeholder: placeholder, step: yearStep }, otherProps)));
 }
 exports.default = YearInput;

dist/cjs/DatePicker.d.ts

@@ -1,9 +0,9 @@
-import React from 'react';
+/// <reference types="react" />
 import makeEventProps from 'make-event-props';
 import Calendar from 'react-calendar';
-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 EventProps = ReturnType<typeof makeEventProps>;
@@ -24,9 +24,2 @@ export type DatePickerProps = {
     /**
-     * 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.
@@ -40,2 +33,6 @@ *
     /**
+     * Props to pass to React-Calendar component.
+     */
+    calendarProps?: CalendarProps;
+    /**
      * Class name(s) that will be added along with `"react-date-picker"` to the main React-Date-Picker `<div>` element.
@@ -277,4 +274,4 @@ *
     yearPlaceholder?: string;
-} & CalendarProps & Omit<EventProps, 'onChange' | 'onFocus'>;
-declare const DatePicker: React.FC<DatePickerProps>;
-export default DatePicker;
+} & Omit<EventProps, 'onChange' | 'onFocus'>;
+export default function DatePicker(props: DatePickerProps): JSX.Element;
+export {};

dist/cjs/DatePicker.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"));
@@ -62,7 +39,4 @@ var clsx_1 = __importDefault(require("clsx"));
 var DateInput_js_1 = __importDefault(require("./DateInput.js"));
-var propTypes_js_1 = require("./shared/propTypes.js");
-var isBrowser = typeof document !== 'undefined';
 var baseClassName = 'react-date-picker';
 var outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];
-var allViews = ['century', 'decade', 'year', 'month'];
 var iconProps = {
@@ -76,10 +50,5 @@ xmlns: 'http://www.w3.org/2000/svg',
 };
-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 DatePicker = function DatePicker(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 DatePicker(props) {
     var 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.closeCalendar, shouldCloseCalendarOnSelect = _c === void 0 ? true : _c, dataTestid = props["data-testid"], dayAriaLabel = props.dayAriaLabel, dayPlaceholder = props.dayPlaceholder, disableCalendar = props.disableCalendar, disabled = props.disabled, format = props.format, id = props.id, _d = props.isOpen, isOpenProps = _d === void 0 ? null : _d, locale = props.locale, maxDate = props.maxDate, _e = props.maxDetail, maxDetail = _e === void 0 ? 'month' : _e, minDate = props.minDate, monthAriaLabel = props.monthAriaLabel, monthPlaceholder = props.monthPlaceholder, _f = props.name, name = _f === void 0 ? 'date' : _f, nativeInputAriaLabel = props.nativeInputAriaLabel, onCalendarClose = props.onCalendarClose, onCalendarOpen = props.onCalendarOpen, onChangeProps = props.onChange, onFocusProps = props.onFocus, onInvalidChange = props.onInvalidChange, _g = props.openCalendarOnFocus, openCalendarOnFocus = _g === void 0 ? true : _g, required = props.required, _h = props.returnValue, returnValue = _h === void 0 ? 'start' : _h, shouldCloseCalendar = props.shouldCloseCalendar, shouldOpenCalendar = props.shouldOpenCalendar, showLeadingZeros = props.showLeadingZeros, value = props.value, yearAriaLabel = props.yearAriaLabel, yearPlaceholder = props.yearPlaceholder, otherProps = __rest(props, ["autoFocus", "calendarAriaLabel", "calendarIcon", "className", "clearAriaLabel", "clearIcon", "closeCalendar", 'data-testid', "dayAriaLabel", "dayPlaceholder", "disableCalendar", "disabled", "format", "id", "isOpen", "locale", "maxDate", "maxDetail", "minDate", "monthAriaLabel", "monthPlaceholder", "name", "nativeInputAriaLabel", "onCalendarClose", "onCalendarOpen", "onChange", "onFocus", "onInvalidChange", "openCalendarOnFocus", "required", "returnValue", "shouldCloseCalendar", "shouldOpenCalendar", "showLeadingZeros", "value", "yearAriaLabel", "yearPlaceholder"]);
@@ -206,8 +175,5 @@ var _j = (0, react_1.useState)(isOpenProps), isOpen = _j[0], setIsOpen = _j[1];
         };
-        return (react_1.default.createElement("div", { className: "".concat(baseClassName, "__wrapper") },
-            react_1.default.createElement(DateInput_js_1.default, __assign({}, ariaLabelProps, placeholderProps, { 
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus: autoFocus, className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isCalendarOpen: isOpen, locale: locale, maxDate: maxDate, maxDetail: maxDetail, minDate: minDate, name: name, onChange: onChange, onInvalidChange: onInvalidChange, required: required, returnValue: returnValue, 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)(DateInput_js_1.default, __assign({}, ariaLabelProps, placeholderProps, { 
+                    // eslint-disable-next-line jsx-a11y/no-autofocus
+                    autoFocus: autoFocus, className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isCalendarOpen: isOpen, locale: locale, maxDate: maxDate, maxDetail: maxDetail, minDate: minDate, name: name, onChange: onChange, onInvalidChange: onInvalidChange, required: required, returnValue: returnValue, 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": isOpen || 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 }))] }));
     }
@@ -218,62 +184,15 @@ function renderCalendar() {
         }
-        var calendarClassName = props.calendarClassName, datePickerClassName = props.className, // 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", "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(isOpen ? 'open' : 'closed'));
-        var calendar = (react_1.default.createElement(react_calendar_1.default, __assign({ className: calendarClassName, onChange: function (value) { return onChange(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, maxDetail: maxDetail, minDate: minDate, onChange: function (value) { return onChange(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 && !isOpen) {
                         ref.removeAttribute('style');
                     }
-                }, className: classNames }, calendar)));
+                }, className: classNames, children: calendar }) }));
     }
     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(isOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className), "data-testid": dataTestid, id: id }, eventProps, { onFocus: onFocus, ref: wrapper }),
-        renderInputs(),
-        renderCalendar()));
-};
-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)]);
-DatePicker.propTypes = {
-    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]),
-    closeCalendar: 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,
-    disabled: prop_types_1.default.bool,
-    format: prop_types_1.default.string,
-    id: prop_types_1.default.string,
-    isOpen: 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,
-    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,
-    onFocus: prop_types_1.default.func,
-    openCalendarOnFocus: prop_types_1.default.bool,
-    required: prop_types_1.default.bool,
-    returnValue: prop_types_1.default.oneOf(['start', 'end', 'range']),
-    showLeadingZeros: prop_types_1.default.bool,
-    value: isValueOrValueArray,
-    yearAriaLabel: prop_types_1.default.string,
-    yearPlaceholder: prop_types_1.default.string,
-};
-if (isBrowser) {
-    DatePicker.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(isOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className), "data-testid": dataTestid, id: id }, eventProps, { onFocus: onFocus, ref: wrapper, children: [renderInputs(), renderCalendar()] })));
 }
 exports.default = DatePicker;

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-date-picker__inputGroup__divider" }, children);
+    return (0, jsx_runtime_1.jsx)("span", { className: "react-date-picker__inputGroup__divider", children: children });
 }
 exports.default = Divider;

dist/esm/DateInput.js

@@ -22,3 +22,4 @@ 'use client';
 };
-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 } from '@wojtekmaj/date-utils';
@@ -113,4 +114,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];
@@ -123,13 +124,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;
     }, []);
@@ -148,3 +149,3 @@ }
     var _k = useState(isCalendarOpenProps), isCalendarOpen = _k[0], setIsCalendarOpen = _k[1];
-    var lastPressedKey = useRef();
+    var lastPressedKey = useRef(undefined);
     useEffect(function () {
@@ -410,5 +411,5 @@ setIsCalendarOpen(isCalendarOpenProps);
         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"));
     }
@@ -420,15 +421,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: valueType })));
+            autoFocus: index === 0 && autoFocus, inputRef: yearInput, placeholder: yearPlaceholder, value: year, valueType: valueType }), "year"));
     }
@@ -445,9 +446,7 @@ function renderCustomInputsInternal() {
     function renderNativeInput() {
-        return (React.createElement(NativeInput, { key: "date", 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 }, "date"));
     }
     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/DateInput/DayInput.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 import Input from './Input.js';
@@ -3,0 +3,0 @@ type DayInputProps = {

dist/esm/DateInput/DayInput.js

@@ -23,3 +23,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getYear, getMonthHuman, getDate, getDaysInMonth } from '@wojtekmaj/date-utils';
@@ -41,3 +41,3 @@ import Input from './Input.js';
     var minDay = safeMax(1, minDate && isSameMonth(minDate) && getDate(minDate));
-    return React.createElement(Input, __assign({ max: maxDay, min: minDay, name: "day" }, otherProps));
+    return _jsx(Input, __assign({ max: maxDay, min: minDay, name: "day" }, otherProps));
 }

dist/esm/DateInput/Input.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 type InputProps = {
@@ -7,3 +7,3 @@ ariaLabel?: string;
     disabled?: boolean;
-    inputRef?: React.RefObject<HTMLInputElement>;
+    inputRef?: React.RefObject<HTMLInputElement | null>;
     max: number;
@@ -10,0 +10,0 @@ min: number;

dist/esm/DateInput/Input.js

@@ -1,2 +0,3 @@
-import React, { useEffect, useLayoutEffect } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect } from 'react';
 import clsx from 'clsx';
@@ -98,10 +99,10 @@ import updateInputWidth, { getFontShorthand } from 'update-input-width';
     var maxLength = max ? max.toString().length : null;
-    return (React.createElement(React.Fragment, null,
-        hasLeadingZero ? React.createElement("span", { className: "".concat(className, "__leadingZero") }, "0") : null,
-        React.createElement("input", { "aria-label": ariaLabel, autoComplete: "off", autoFocus: autoFocus, className: clsx("".concat(className, "__input"), "".concat(className, "__").concat(nameForClass || name), hasLeadingZero && "".concat(className, "__input--hasLeadingZero")), "data-input": "true", disabled: disabled, inputMode: "numeric", max: max, min: min, name: name, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onKeyPress: makeOnKeyPress(maxLength), onKeyUp: function (event) {
-                updateInputWidth(event.target);
-                if (onKeyUp) {
-                    onKeyUp(event);
-                }
-            }, placeholder: placeholder, ref: inputRef, required: required, step: step, type: "number", value: value !== null ? value : '' })));
+    return (_jsxs(_Fragment, { children: [hasLeadingZero ? _jsx("span", { className: "".concat(className, "__leadingZero"), children: "0" }) : null, _jsx("input", { "aria-label": ariaLabel, autoComplete: "off", autoFocus: autoFocus, className: clsx("".concat(className, "__input"), "".concat(className, "__").concat(nameForClass || name), hasLeadingZero && "".concat(className, "__input--hasLeadingZero")), "data-input": "true", disabled: disabled, inputMode: "numeric", max: max, min: min, name: name, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onKeyPress: makeOnKeyPress(maxLength), onKeyUp: function (event) {
+                    updateInputWidth(event.target);
+                    if (onKeyUp) {
+                        onKeyUp(event);
+                    }
+                }, placeholder: placeholder, 
+                // Assertion is needed for React 18 compatibility
+                ref: inputRef, required: required, step: step, type: "number", value: value !== null ? value : '' })] }));
 }

dist/esm/DateInput/MonthInput.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 import Input from './Input.js';
@@ -3,0 +3,0 @@ type MonthInputProps = {

dist/esm/DateInput/MonthInput.js

@@ -23,3 +23,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getYear, getMonthHuman } from '@wojtekmaj/date-utils';
@@ -35,3 +35,3 @@ import Input from './Input.js';
     var minMonth = safeMax(1, minDate && isSameYear(minDate) && getMonthHuman(minDate));
-    return React.createElement(Input, __assign({ max: maxMonth, min: minMonth, name: "month" }, otherProps));
+    return _jsx(Input, __assign({ max: maxMonth, min: minMonth, name: "month" }, otherProps));
 }

dist/esm/DateInput/MonthSelect.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 type MonthSelectProps = {
@@ -7,3 +7,3 @@ ariaLabel?: string;
     disabled?: boolean;
-    inputRef?: React.RefObject<HTMLSelectElement>;
+    inputRef?: React.RefObject<HTMLSelectElement | null>;
     locale?: string;
@@ -10,0 +10,0 @@ maxDate?: Date;

dist/esm/DateInput/MonthSelect.js

@@ -10,3 +10,3 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
@@ -26,9 +26,9 @@ import { getYear, getMonthHuman } from '@wojtekmaj/date-utils';
     var formatter = short ? formatShortMonth : formatMonth;
-    return (React.createElement("select", { "aria-label": ariaLabel, autoFocus: autoFocus, className: clsx("".concat(className, "__input"), "".concat(className, "__").concat(name)), "data-input": "true", "data-select": "true", disabled: disabled, name: name, onChange: onChange, onKeyDown: onKeyDown, ref: inputRef, required: required, value: value !== null ? value : '' },
-        !value && React.createElement("option", { value: "" }, placeholder),
-        dates.map(function (date) {
-            var month = getMonthHuman(date);
-            var disabled = month < minMonth || month > maxMonth;
-            return (React.createElement("option", { key: month, disabled: disabled, value: month }, formatter(locale, date)));
-        })));
+    return (_jsxs("select", { "aria-label": ariaLabel, autoFocus: autoFocus, className: clsx("".concat(className, "__input"), "".concat(className, "__").concat(name)), "data-input": "true", "data-select": "true", disabled: disabled, name: name, onChange: onChange, onKeyDown: onKeyDown, 
+        // Assertion is needed for React 18 compatibility
+        ref: inputRef, required: required, value: value !== null ? value : '', children: [!value && _jsx("option", { value: "", children: placeholder }), dates.map(function (date) {
+                var month = getMonthHuman(date);
+                var disabled = month < minMonth || month > maxMonth;
+                return (_jsx("option", { disabled: disabled, value: month, children: formatter(locale, date) }, month));
+            })] }));
 }

dist/esm/DateInput/NativeInput.d.ts

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

dist/esm/DateInput/NativeInput.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getYear, getISOLocalDate, getISOLocalMonth } from '@wojtekmaj/date-utils';
@@ -34,3 +34,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, 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, style: {
             visibility: 'hidden',
@@ -37,0 +37,0 @@ position: 'absolute',

dist/esm/DateInput/YearInput.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 import Input from './Input.js';
@@ -3,0 +3,0 @@ type YearInputProps = {

dist/esm/DateInput/YearInput.js

@@ -23,3 +23,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getYear } from '@wojtekmaj/date-utils';
@@ -38,3 +38,3 @@ import Input from './Input.js';
     })();
-    return (React.createElement(Input, __assign({ max: maxYear, min: minYear, name: "year", placeholder: placeholder, step: yearStep }, otherProps)));
+    return (_jsx(Input, __assign({ max: maxYear, min: minYear, name: "year", placeholder: placeholder, step: yearStep }, otherProps)));
 }

dist/esm/DatePicker.d.ts

@@ -1,9 +0,9 @@
-import React from 'react';
+/// <reference types="react" />
 import makeEventProps from 'make-event-props';
 import Calendar from 'react-calendar';
-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 EventProps = ReturnType<typeof makeEventProps>;
@@ -24,9 +24,2 @@ export type DatePickerProps = {
     /**
-     * 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.
@@ -40,2 +33,6 @@ *
     /**
+     * Props to pass to React-Calendar component.
+     */
+    calendarProps?: CalendarProps;
+    /**
      * Class name(s) that will be added along with `"react-date-picker"` to the main React-Date-Picker `<div>` element.
@@ -277,4 +274,4 @@ *
     yearPlaceholder?: string;
-} & CalendarProps & Omit<EventProps, 'onChange' | 'onFocus'>;
-declare const DatePicker: React.FC<DatePickerProps>;
-export default DatePicker;
+} & Omit<EventProps, 'onChange' | 'onFocus'>;
+export default function DatePicker(props: DatePickerProps): JSX.Element;
+export {};

dist/esm/DatePicker.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';
@@ -33,7 +33,4 @@ import clsx from 'clsx';
 import DateInput from './DateInput.js';
-import { isMaxDate, isMinDate, rangeOf } from './shared/propTypes.js';
-var isBrowser = typeof document !== 'undefined';
 var baseClassName = 'react-date-picker';
 var outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];
-var allViews = ['century', 'decade', 'year', 'month'];
 var iconProps = {
@@ -47,10 +44,5 @@ xmlns: 'http://www.w3.org/2000/svg',
 };
-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 DatePicker = function DatePicker(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 DatePicker(props) {
     var 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.closeCalendar, shouldCloseCalendarOnSelect = _c === void 0 ? true : _c, dataTestid = props["data-testid"], dayAriaLabel = props.dayAriaLabel, dayPlaceholder = props.dayPlaceholder, disableCalendar = props.disableCalendar, disabled = props.disabled, format = props.format, id = props.id, _d = props.isOpen, isOpenProps = _d === void 0 ? null : _d, locale = props.locale, maxDate = props.maxDate, _e = props.maxDetail, maxDetail = _e === void 0 ? 'month' : _e, minDate = props.minDate, monthAriaLabel = props.monthAriaLabel, monthPlaceholder = props.monthPlaceholder, _f = props.name, name = _f === void 0 ? 'date' : _f, nativeInputAriaLabel = props.nativeInputAriaLabel, onCalendarClose = props.onCalendarClose, onCalendarOpen = props.onCalendarOpen, onChangeProps = props.onChange, onFocusProps = props.onFocus, onInvalidChange = props.onInvalidChange, _g = props.openCalendarOnFocus, openCalendarOnFocus = _g === void 0 ? true : _g, required = props.required, _h = props.returnValue, returnValue = _h === void 0 ? 'start' : _h, shouldCloseCalendar = props.shouldCloseCalendar, shouldOpenCalendar = props.shouldOpenCalendar, showLeadingZeros = props.showLeadingZeros, value = props.value, yearAriaLabel = props.yearAriaLabel, yearPlaceholder = props.yearPlaceholder, otherProps = __rest(props, ["autoFocus", "calendarAriaLabel", "calendarIcon", "className", "clearAriaLabel", "clearIcon", "closeCalendar", 'data-testid', "dayAriaLabel", "dayPlaceholder", "disableCalendar", "disabled", "format", "id", "isOpen", "locale", "maxDate", "maxDetail", "minDate", "monthAriaLabel", "monthPlaceholder", "name", "nativeInputAriaLabel", "onCalendarClose", "onCalendarOpen", "onChange", "onFocus", "onInvalidChange", "openCalendarOnFocus", "required", "returnValue", "shouldCloseCalendar", "shouldOpenCalendar", "showLeadingZeros", "value", "yearAriaLabel", "yearPlaceholder"]);
@@ -177,8 +169,5 @@ var _j = useState(isOpenProps), isOpen = _j[0], setIsOpen = _j[1];
         };
-        return (React.createElement("div", { className: "".concat(baseClassName, "__wrapper") },
-            React.createElement(DateInput, __assign({}, ariaLabelProps, placeholderProps, { 
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus: autoFocus, className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isCalendarOpen: isOpen, locale: locale, maxDate: maxDate, maxDetail: maxDetail, minDate: minDate, name: name, onChange: onChange, onInvalidChange: onInvalidChange, required: required, returnValue: returnValue, 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(DateInput, __assign({}, ariaLabelProps, placeholderProps, { 
+                    // eslint-disable-next-line jsx-a11y/no-autofocus
+                    autoFocus: autoFocus, className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isCalendarOpen: isOpen, locale: locale, maxDate: maxDate, maxDetail: maxDetail, minDate: minDate, name: name, onChange: onChange, onInvalidChange: onInvalidChange, required: required, returnValue: returnValue, 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": isOpen || 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 }))] }));
     }
@@ -189,62 +178,14 @@ function renderCalendar() {
         }
-        var calendarClassName = props.calendarClassName, datePickerClassName = props.className, // 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", "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(isOpen ? 'open' : 'closed'));
-        var calendar = (React.createElement(Calendar, __assign({ className: calendarClassName, onChange: function (value) { return onChange(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, maxDetail: maxDetail, minDate: minDate, onChange: function (value) { return onChange(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 && !isOpen) {
                         ref.removeAttribute('style');
                     }
-                }, className: classNames }, calendar)));
+                }, className: classNames, children: calendar }) }));
     }
     var eventProps = useMemo(function () { return makeEventProps(otherProps); }, [otherProps]);
-    return (React.createElement("div", __assign({ className: clsx(baseClassName, "".concat(baseClassName, "--").concat(isOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className), "data-testid": dataTestid, id: id }, eventProps, { onFocus: onFocus, ref: wrapper }),
-        renderInputs(),
-        renderCalendar()));
-};
-var isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]);
-var isValueOrValueArray = PropTypes.oneOfType([isValue, rangeOf(isValue)]);
-DatePicker.propTypes = {
-    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]),
-    closeCalendar: PropTypes.bool,
-    'data-testid': PropTypes.string,
-    dayAriaLabel: PropTypes.string,
-    dayPlaceholder: PropTypes.string,
-    disableCalendar: PropTypes.bool,
-    disabled: PropTypes.bool,
-    format: PropTypes.string,
-    id: PropTypes.string,
-    isOpen: PropTypes.bool,
-    locale: PropTypes.string,
-    maxDate: isMaxDate,
-    maxDetail: PropTypes.oneOf(allViews),
-    minDate: isMinDate,
-    monthAriaLabel: PropTypes.string,
-    monthPlaceholder: PropTypes.string,
-    name: PropTypes.string,
-    nativeInputAriaLabel: PropTypes.string,
-    onCalendarClose: PropTypes.func,
-    onCalendarOpen: PropTypes.func,
-    onChange: PropTypes.func,
-    onFocus: PropTypes.func,
-    openCalendarOnFocus: PropTypes.bool,
-    required: PropTypes.bool,
-    returnValue: PropTypes.oneOf(['start', 'end', 'range']),
-    showLeadingZeros: PropTypes.bool,
-    value: isValueOrValueArray,
-    yearAriaLabel: PropTypes.string,
-    yearPlaceholder: PropTypes.string,
-};
-if (isBrowser) {
-    DatePicker.propTypes.portalContainer = PropTypes.instanceOf(HTMLElement);
+    return (_jsxs("div", __assign({ className: clsx(baseClassName, "".concat(baseClassName, "--").concat(isOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className), "data-testid": dataTestid, id: id }, eventProps, { onFocus: onFocus, ref: wrapper, children: [renderInputs(), renderCalendar()] })));
 }
-export default DatePicker;

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-date-picker__inputGroup__divider" }, children);
+    return _jsx("span", { className: "react-date-picker__inputGroup__divider", children: children });
 }

package.json

 {
   "name": "react-date-picker",
-  "version": "10.6.0",
+  "version": "11.0.0",
   "description": "A date picker for your React app.",
@@ -84,10 +84,10 @@ "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",
     "clean": "rimraf dist",
     "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",
@@ -114,24 +114,23 @@ "unit": "vitest",
     "make-event-props": "^1.6.0",
-    "prop-types": "^15.6.0",
-    "react-calendar": "^4.6.0",
-    "react-fit": "^1.7.0",
+    "react-calendar": "^5.0.0",
+    "react-fit": "^2.0.0",
     "update-input-width": "^1.4.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",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.0",
-    "typescript": "^5.3.2",
+    "typescript": "^5.4.2",
     "vitest": "^1.0.2",
@@ -141,5 +140,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"
   },
@@ -161,3 +160,3 @@ "peerDependenciesMeta": {
     "type": "git",
-    "url": "https://github.com/wojtekmaj/react-date-picker.git",
+    "url": "git+https://github.com/wojtekmaj/react-date-picker.git",
     "directory": "packages/react-date-picker"
@@ -164,0 +163,0 @@ },

README.md

@@ -23,2 +23,10 @@ [![npm](https://img.shields.io/npm/v/react-date-picker.svg)](https://www.npmjs.com/package/react-date-picker) ![downloads](https://img.shields.io/npm/dt/react-date-picker.svg) [![CI](https://github.com/wojtekmaj/react-date-picker/actions/workflows/ci.yml/badge.svg)](https://github.com/wojtekmaj/react-date-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 date input instead. It's more accessible, adds no extra weight to your bundle, and works better on mobile devices.
+
+```tsx
+<input aria-label="Date" type="date" />
+```
+
 ## Looking for a time picker or a datetime picker?
@@ -93,3 +101,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>                                                                                             |
@@ -96,0 +104,0 @@ | className            | Class name(s) that will be added along with `"react-date-picker"` to the main React-Date-Picker `<div>` element.                                                                                                                                                                                                                           | n/a                                   | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>                                                                                                                 |

No alert changes

Improved metrics

Dependency count

10

decreased by-9.09%

Number of lines in readme file

178

increased by4.71%

Worsened metrics

Total package byte prevSize

298578

decreased by-5.47%

Number of package files

85

decreased by-5.56%

Lines of code

6591

decreased by-5.91%

Dependency changes

• + Addedreact-calendar@5.0.0(transitive)

• + Addedreact-fit@2.0.1(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-fit@1.7.1(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedtiny-warning@1.0.3(transitive)

• Updatedreact-calendar@^5.0.0

• Updatedreact-fit@^2.0.0