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

Comparing version 5.5.0 to 6.0.0

dist/cjs/DateRangePicker.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 DateRangePickerProps = {
     /**
-     * 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-daterange-picker"` to the main React-DateRange-Picker `<div>` element.
@@ -277,4 +274,4 @@ *
     yearPlaceholder?: string;
-} & CalendarProps & Omit<EventProps, 'onChange' | 'onFocus'>;
-declare const DateRangePicker: React.FC<DateRangePickerProps>;
-export default DateRangePicker;
+} & Omit<EventProps, 'onChange' | 'onFocus'>;
+export default function DateRangePicker(props: DateRangePickerProps): JSX.Element;
+export {};

dist/cjs/DateRangePicker.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_1 = __importDefault(require("react-date-picker/dist/cjs/DateInput"));
-var propTypes_js_1 = require("./shared/propTypes.js");
-var isBrowser = typeof document !== 'undefined';
 var baseClassName = 'react-daterange-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 DateRangePicker = function DateRangePicker(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 DateRangePicker(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 ? 'daterange' : _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, _h = props.rangeDivider, rangeDivider = _h === void 0 ? '–' : _h, required = props.required, 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", "rangeDivider", "required", "shouldCloseCalendar", "shouldOpenCalendar", "showLeadingZeros", "value", "yearAriaLabel", "yearPlaceholder"]);
@@ -219,10 +188,5 @@ var _j = (0, react_1.useState)(isOpenProps), isOpen = _j[0], setIsOpen = _j[1];
         var commonProps = __assign(__assign(__assign({}, ariaLabelProps), placeholderProps), { className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isCalendarOpen: isOpen, 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(DateInput_1.default, __assign({}, commonProps, { 
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus: autoFocus, name: "".concat(name, "_from"), onChange: onChangeFrom, returnValue: "start", value: valueFrom })),
-            react_1.default.createElement("span", { className: "".concat(baseClassName, "__range-divider") }, rangeDivider),
-            react_1.default.createElement(DateInput_1.default, __assign({}, commonProps, { name: "".concat(name, "_to"), onChange: onChangeTo, returnValue: "end", 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)(DateInput_1.default, __assign({}, commonProps, { 
+                    // eslint-disable-next-line jsx-a11y/no-autofocus
+                    autoFocus: autoFocus, name: "".concat(name, "_from"), onChange: onChangeFrom, returnValue: "start", value: valueFrom })), (0, jsx_runtime_1.jsx)("span", { className: "".concat(baseClassName, "__range-divider"), children: rangeDivider }), (0, jsx_runtime_1.jsx)(DateInput_1.default, __assign({}, commonProps, { name: "".concat(name, "_to"), onChange: onChangeTo, returnValue: "end", 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": 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 }))] }));
     }
@@ -233,62 +197,15 @@ function renderCalendar() {
         }
-        var calendarClassName = props.calendarClassName, dateRangePickerClassName = 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); }, 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, maxDetail: maxDetail, minDate: minDate, onChange: function (value) { return onChange(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 && !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)]);
-DateRangePicker.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,
-    rangeDivider: prop_types_1.default.node,
-    required: prop_types_1.default.bool,
-    showLeadingZeros: prop_types_1.default.bool,
-    value: isValueOrValueArray,
-    yearAriaLabel: prop_types_1.default.string,
-    yearPlaceholder: prop_types_1.default.string,
-};
-if (isBrowser) {
-    DateRangePicker.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 = DateRangePicker;

dist/esm/DateRangePicker.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 DateRangePickerProps = {
     /**
-     * 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-daterange-picker"` to the main React-DateRange-Picker `<div>` element.
@@ -277,4 +274,4 @@ *
     yearPlaceholder?: string;
-} & CalendarProps & Omit<EventProps, 'onChange' | 'onFocus'>;
-declare const DateRangePicker: React.FC<DateRangePickerProps>;
-export default DateRangePicker;
+} & Omit<EventProps, 'onChange' | 'onFocus'>;
+export default function DateRangePicker(props: DateRangePickerProps): JSX.Element;
+export {};

dist/esm/DateRangePicker.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 'react-date-picker/dist/esm/DateInput';
-import { isMaxDate, isMinDate, rangeOf } from './shared/propTypes.js';
-var isBrowser = typeof document !== 'undefined';
 var baseClassName = 'react-daterange-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 DateRangePicker = function DateRangePicker(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 DateRangePicker(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 ? 'daterange' : _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, _h = props.rangeDivider, rangeDivider = _h === void 0 ? '–' : _h, required = props.required, 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", "rangeDivider", "required", "shouldCloseCalendar", "shouldOpenCalendar", "showLeadingZeros", "value", "yearAriaLabel", "yearPlaceholder"]);
@@ -190,10 +182,5 @@ var _j = useState(isOpenProps), isOpen = _j[0], setIsOpen = _j[1];
         var commonProps = __assign(__assign(__assign({}, ariaLabelProps), placeholderProps), { className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isCalendarOpen: isOpen, locale: locale, maxDate: maxDate, maxDetail: maxDetail, minDate: minDate, onInvalidChange: onInvalidChange, required: required, showLeadingZeros: showLeadingZeros });
-        return (React.createElement("div", { className: "".concat(baseClassName, "__wrapper") },
-            React.createElement(DateInput, __assign({}, commonProps, { 
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus: autoFocus, name: "".concat(name, "_from"), onChange: onChangeFrom, returnValue: "start", value: valueFrom })),
-            React.createElement("span", { className: "".concat(baseClassName, "__range-divider") }, rangeDivider),
-            React.createElement(DateInput, __assign({}, commonProps, { name: "".concat(name, "_to"), onChange: onChangeTo, returnValue: "end", 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(DateInput, __assign({}, commonProps, { 
+                    // eslint-disable-next-line jsx-a11y/no-autofocus
+                    autoFocus: autoFocus, name: "".concat(name, "_from"), onChange: onChangeFrom, returnValue: "start", value: valueFrom })), _jsx("span", { className: "".concat(baseClassName, "__range-divider"), children: rangeDivider }), _jsx(DateInput, __assign({}, commonProps, { name: "".concat(name, "_to"), onChange: onChangeTo, returnValue: "end", 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": 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 }))] }));
     }
@@ -204,62 +191,14 @@ function renderCalendar() {
         }
-        var calendarClassName = props.calendarClassName, dateRangePickerClassName = 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); }, 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, maxDetail: maxDetail, minDate: minDate, onChange: function (value) { return onChange(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 && !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)]);
-DateRangePicker.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,
-    rangeDivider: PropTypes.node,
-    required: PropTypes.bool,
-    showLeadingZeros: PropTypes.bool,
-    value: isValueOrValueArray,
-    yearAriaLabel: PropTypes.string,
-    yearPlaceholder: PropTypes.string,
-};
-if (isBrowser) {
-    DateRangePicker.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 DateRangePicker;

package.json

 {
   "name": "@wojtekmaj/react-daterange-picker",
-  "version": "5.5.0",
+  "version": "6.0.0",
   "description": "A date 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",
@@ -56,20 +56,19 @@ "unit": "vitest",
     "make-event-props": "^1.6.0",
-    "prop-types": "^15.6.0",
-    "react-calendar": "^4.6.0",
-    "react-date-picker": "^10.5.0",
-    "react-fit": "^1.7.0"
+    "react-calendar": "^5.0.0",
+    "react-date-picker": "^11.0.0",
+    "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",
@@ -79,3 +78,3 @@ "react-dom": "^18.2.0",
     "rimraf": "^3.0.0",
-    "typescript": "^5.3.2",
+    "typescript": "^5.4.2",
     "vitest": "^1.0.2",
@@ -85,5 +84,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"
   },
@@ -105,3 +104,3 @@ "peerDependenciesMeta": {
     "type": "git",
-    "url": "https://github.com/wojtekmaj/react-daterange-picker.git",
+    "url": "git+https://github.com/wojtekmaj/react-daterange-picker.git",
     "directory": "packages/react-daterange-picker"
@@ -108,0 +107,0 @@ },

README.md

@@ -23,2 +23,11 @@ [![npm](https://img.shields.io/npm/v/@wojtekmaj/react-daterange-picker.svg)](https://www.npmjs.com/package/@wojtekmaj/react-daterange-picker) ![downloads](https://img.shields.io/npm/dt/@wojtekmaj/react-daterange-picker.svg) [![CI](https://github.com/wojtekmaj/react-daterange-picker/actions/workflows/ci.yml/badge.svg)](https://github.com/wojtekmaj/react-daterange-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 from" max={valueTo} min={minDate} type="date" />
+<input aria-label="Date to" max={maxDate} min={valueFrom} type="date" />
+```
+
 ## Looking for a time picker or a datetime picker?
@@ -93,3 +102,3 @@
 | calendarAriaLabel    | `aria-label` for the calendar button.                                                                                                                                                                                                                                                                                                      | n/a                                   | `"Toggle calendar"`                                                                                                                                                                                                 |
-| calendarClassName    | Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element.                                                                                                                                                                                                                                 | n/a                                   | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>                                                                                                                 |
+| calendarProps        | Props to pass to React-Calendar component.                                                                                                                                                                                                                                                                                                 | n/a                                   | See [React-Calendar documentation](https://github.com/wojtekmaj/react-calendar)                                                                                                                                     |
 | calendarIcon         | Content of the calendar button. Setting the value explicitly to `null` will hide the icon.                                                                                                                                                                                                                                                 | (default icon)                        | <ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li><li>React function: `CalendarIcon`</li></ul>                                                                                             |
@@ -96,0 +105,0 @@ | className            | Class name(s) that will be added along with `"react-daterange-picker"` to the main React-DateRange-Picker `<div>` element.                                                                                                                                                                                                                 | n/a                                   | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>                                                                                                                 |

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

8

decreased by-11.11%

Number of lines in readme file

159

increased by6%

Worsened metrics

Total package byte prevSize

130697

decreased by-9.62%

Number of package files

22

decreased by-18.52%

Lines of code

2452

decreased by-11.83%

Dependency changes

• + Addedreact-calendar@5.0.0(transitive)

• + Addedreact-date-picker@11.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-date-picker@10.6.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-date-picker@^11.0.0

• Updatedreact-fit@^2.0.0