wojtekmaj

@wojtekmaj/react-daterange-picker

var __assign = (this && this.__assign) || function () {

    __assign = Object.assign || function(t) {

        for (var s, i = 1, n = arguments.length; i < n; i++) {

            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))

    return __assign.apply(this, arguments);

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {

    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]; } };

var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {

    Object.defineProperty(o, "default", { enumerable: true, value: v });

var __importStar = (this && this.__importStar) || function (mod) {

    if (mod && mod.__esModule) return mod;

    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);

var __rest = (this && this.__rest) || function (s, e) {

    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

    if (s != null && typeof Object.getOwnPropertySymbols === "function")

        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {

            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))

var __importDefault = (this && this.__importDefault) || function (mod) {

    return (mod && mod.__esModule) ? mod : { "default": mod };

Object.defineProperty(exports, "__esModule", { value: true });

var react_1 = __importStar(require("react"));

var prop_types_1 = __importDefault(require("prop-types"));

var make_event_props_1 = __importDefault(require("make-event-props"));

var clsx_1 = __importDefault(require("clsx"));

var react_calendar_1 = __importDefault(require("react-calendar"));

var react_fit_1 = __importDefault(require("react-fit"));

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 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 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"]);

    var _j = (0, react_1.useState)(isOpenProps), isOpen = _j[0], setIsOpen = _j[1];

    var wrapper = (0, react_1.useRef)(null);

    var calendarWrapper = (0, react_1.useRef)(null);

            if (!shouldOpenCalendar({ reason: reason })) {

    var closeCalendar = (0, react_1.useCallback)(function (_a) {

            if (!shouldCloseCalendar({ reason: reason })) {

    }, [onCalendarClose, shouldCloseCalendar]);

            closeCalendar({ reason: 'buttonClick' });

            openCalendar({ reason: 'buttonClick' });

    function onChange(value, shouldCloseCalendar) {

        if (shouldCloseCalendar === void 0) { shouldCloseCalendar = shouldCloseCalendarOnSelect; }

            closeCalendar({ reason: 'select' });

    function onChangeFrom(nextValue, closeCalendar) {

        var nextValueFrom = (Array.isArray(nextValue) ? nextValue : [nextValue])[0];

        var _a = Array.isArray(value) ? value : [value], valueTo = _a[1];

        var valueToDate = valueTo ? new Date(valueTo) : null;

        onChange([nextValueFrom, valueToDate], closeCalendar);

    function onChangeTo(nextValue, closeCalendar) {

        var _a = Array.isArray(nextValue) ? nextValue : [null, nextValue], nextValueTo = _a[1];

        var valueFrom = (Array.isArray(value) ? value : [value])[0];

        var valueFromDate = valueFrom ? new Date(valueFrom) : null;

        onChange([valueFromDate, nextValueTo], closeCalendar);

        // Internet Explorer still fires onFocus on disabled elements

            event.target.dataset.select === 'true') {

        openCalendar({ reason: 'focus' });

    var onKeyDown = (0, react_1.useCallback)(function (event) {

            closeCalendar({ reason: 'escape' });

    openCalendarOnFocus: prop_types_1.default.bool,

    portalContainer: prop_types_1.default.instanceOf(HTMLElement),

    portalContainer: isBrowser ? prop_types_1.default.instanceOf(HTMLElement) : undefined,

    rangeDivider: prop_types_1.default.node,

    showLeadingZeros: prop_types_1.default.bool,

    yearAriaLabel: prop_types_1.default.string,

    yearPlaceholder: prop_types_1.default.string,

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';

import { createPortal } from 'react-dom';

import makeEventProps from 'make-event-props';

import DateInput from 'react-date-picker/dist/cjs/DateInput';

import { isMaxDate, isMinDate, rangeOf } from './shared/propTypes.js';

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 _j = useState(isOpenProps), isOpen = _j[0], setIsOpen = _j[1];

    var closeCalendar = useCallback(function (_a) {

    var onKeyDown = useCallback(function (event) {

    portalContainer: PropTypes.instanceOf(HTMLElement),

    portalContainer: isBrowser ? PropTypes.instanceOf(HTMLElement) : undefined,

  "name": "@wojtekmaj/react-daterange-picker",

  "description": "A date range picker for your React app.",

    "./dist/DateRangePicker.css": "./dist/DateRangePicker.css"

    "build": "yarn build-js && yarn copy-styles",

    "build-js": "yarn build-js-esm && yarn build-js-cjs && yarn build-js-cjs-package",

    "build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext",

    "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs",

    "build-js-cjs-package": "echo '{\n  \"type\": \"commonjs\"\n}' > dist/cjs/package.json",

    "copy-styles": "cpy 'src/**/*.css' dist",

    "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",

    "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & yarn build-js-cjs-package & nodemon --watch src --ext css --exec \"yarn copy-styles\""

    "@testing-library/jest-dom": "^5.15.0",

    "@testing-library/user-event": "^14.4.0",

    "@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"

    "url": "https://github.com/wojtekmaj/react-daterange-picker.git"

  "funding": "https://github.com/wojtekmaj/react-daterange-picker?sponsor=1",

		{
		"name": "@wojtekmaj/react-daterange-picker",
		"version": "5.4.0",
		"version": "5.4.1",
		"description": "A date range picker for your React app.",
		@@ -55,3 +55,3 @@ "type": "module",
		"react-calendar": "^4.6.0",
		"react-date-picker": "^10.4.1",
		"react-date-picker": "^10.5.0",
		"react-fit": "^1.7.0"
		@@ -58,0 +58,0 @@ },

Improved metrics

Dependency changes

		@@ -61,2 +61,3 @@ "use strict";
		var propTypes_js_1 = require("./shared/propTypes.js");
		var isBrowser = typeof document !== 'undefined';
		var baseClassName = 'react-daterange-picker';
		@@ -278,3 +279,3 @@ var outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];
		openCalendarOnFocus: prop_types_1.default.bool,
		portalContainer: prop_types_1.default.instanceOf(HTMLElement),
		portalContainer: isBrowser ? prop_types_1.default.instanceOf(HTMLElement) : undefined,
		rangeDivider: prop_types_1.default.node,
		@@ -281,0 +282,0 @@ required: prop_types_1.default.bool,

		@@ -33,2 +33,3 @@ 'use client';
		import { isMaxDate, isMinDate, rangeOf } from './shared/propTypes.js';
		var isBrowser = typeof document !== 'undefined';
		var baseClassName = 'react-daterange-picker';
		@@ -250,3 +251,3 @@ var outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];
		openCalendarOnFocus: PropTypes.bool,
		portalContainer: PropTypes.instanceOf(HTMLElement),
		portalContainer: isBrowser ? PropTypes.instanceOf(HTMLElement) : undefined,
		rangeDivider: PropTypes.node,
		@@ -253,0 +254,0 @@ required: PropTypes.bool,