@cerebruminc/cerebellum 16.0.0-beta.dangerous.99fc6b7 → 16.0.0-beta.dangerous.a3d7575

package/lib/esm/{InlineDatePicker-ClVBWEzW.js → InlineDatePicker-xO3XGIcG.js}

@@ -2,7 +2,7 @@ import { b as __makeTemplateObject, f as __rest, _ as __assign } from './_tslib-
 import { jsxs, jsx } from 'react/jsx-runtime';
 import dayjs from 'dayjs';
 import * as React from 'react';
-import React__default, { useLayoutEffect, createElement, cloneElement, createRef, Component, useRef, useCallback, useEffect, useState, forwardRef } from 'react';
+import React__default, { useLayoutEffect, cloneElement, createRef, Component, useRef, useCallback, useEffect, createElement, useState, forwardRef } from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import { colors } from './colors.js';
@@ -7497,34 +7497,40 @@ function isShadowRoot(value) {
   }
   return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
 }
+const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
 function isOverflowElement(element) {
   const {
     overflow,
     overflowX,
     overflowY,
     display
-  } = getComputedStyle(element);
-  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
+  } = getComputedStyle$1(element);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
 }
+const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
 function isTableElement(element) {
-  return ['table', 'td', 'th'].includes(getNodeName(element));
+  return tableElements.has(getNodeName(element));
 }
+const topLayerSelectors = [':popover-open', ':modal'];
 function isTopLayer(element) {
-  return [':popover-open', ':modal'].some(selector => {
+  return topLayerSelectors.some(selector => {
     try {
       return element.matches(selector);
-    } catch (e) {
+    } catch (_e) {
       return false;
     }
   });
 }
+const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
+const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
+const containValues = ['paint', 'layout', 'strict', 'content'];
 function isContainingBlock(elementOrCss) {
   const webkit = isWebKit();
-  const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
+  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   // https://drafts.csswg.org/css-transforms-2/#individual-transforms
-  return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+  return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -7542,10 +7548,11 @@ function isWebKit() {
   if (typeof CSS === 'undefined' || !CSS.supports) return false;
   return CSS.supports('-webkit-backdrop-filter', 'none');
 }
+const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
 function isLastTraversableNode(node) {
-  return ['html', 'body', '#document'].includes(getNodeName(node));
+  return lastTraversableNodeNames.has(getNodeName(node));
 }
-function getComputedStyle(element) {
+function getComputedStyle$1(element) {
   return getWindow(element).getComputedStyle(element);
 }
 function getNodeScroll(element) {
@@ -7647,8 +7654,9 @@ function getOppositeAxis(axis) {
 function getAxisLength(axis) {
   return axis === 'y' ? 'height' : 'width';
 }
+const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
 function getSideAxis(placement) {
-  return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
+  return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
 }
 function getAlignmentAxis(placement) {
   return getOppositeAxis(getSideAxis(placement));
@@ -7673,19 +7681,19 @@ function getExpandedPlacements(placement) {
 function getOppositeAlignmentPlacement(placement) {
   return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
 }
+const lrPlacement = ['left', 'right'];
+const rlPlacement = ['right', 'left'];
+const tbPlacement = ['top', 'bottom'];
+const btPlacement = ['bottom', 'top'];
 function getSideList(side, isStart, rtl) {
-  const lr = ['left', 'right'];
-  const rl = ['right', 'left'];
-  const tb = ['top', 'bottom'];
-  const bt = ['bottom', 'top'];
   switch (side) {
     case 'top':
     case 'bottom':
-      if (rtl) return isStart ? rl : lr;
-      return isStart ? lr : rl;
+      if (rtl) return isStart ? rlPlacement : lrPlacement;
+      return isStart ? lrPlacement : rlPlacement;
     case 'left':
     case 'right':
-      return isStart ? tb : bt;
+      return isStart ? tbPlacement : btPlacement;
     default:
       return [];
   }
@@ -8137,7 +8145,7 @@ const flip$2 = function (options) {
           if (!ignoreCrossAxisOverflow ||
           // We leave the current main axis only if every placement on that axis
           // overflows the main axis.
-          overflowsData.every(d => d.overflows[0] > 0 && getSideAxis(d.placement) === initialSideAxis)) {
+          overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
             // Try next placement and re-run the lifecycle.
             return {
               data: {
@@ -8194,6 +8202,8 @@ const flip$2 = function (options) {
   };
 };
 
+const originSides = /*#__PURE__*/new Set(['left', 'top']);
+
 // For type backwards-compatibility, the `OffsetOptions` type was also
 // Derivable.
 
@@ -8207,7 +8217,7 @@ async function convertValueToCoords(state, options) {
   const side = getSide(placement);
   const alignment = getAlignment(placement);
   const isVertical = getSideAxis(placement) === 'y';
-  const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
+  const mainAxisMulti = originSides.has(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
   const rawValue = evaluate(options, state);
 
@@ -8279,7 +8289,7 @@ const offset$2 = function (options) {
 };
 
 function getCssDimensions(element) {
-  const css = getComputedStyle(element);
+  const css = getComputedStyle$1(element);
   // In testing environments, the `width` and `height` properties are empty
   // strings for SVG elements, returning NaN. Fallback to `0` in this case.
   let width = parseFloat(css.width) || 0;
@@ -8384,7 +8394,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css = getComputedStyle(currentIFrame);
+      const css = getComputedStyle$1(currentIFrame);
       const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
       const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
@@ -8415,14 +8425,9 @@ function getWindowScrollBarX(element, rect) {
   return rect.left + leftScroll;
 }
 
-function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
-  if (ignoreScrollbarX === void 0) {
-    ignoreScrollbarX = false;
-  }
+function getHTMLOffset(documentElement, scroll) {
   const htmlRect = documentElement.getBoundingClientRect();
-  const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :
-  // RTL <body> scrollbar.
-  getWindowScrollBarX(documentElement, htmlRect));
+  const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
   const y = htmlRect.top + scroll.scrollTop;
   return {
     x,
@@ -8461,7 +8466,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
       offsets.y = offsetRect.y + offsetParent.clientTop;
     }
   }
-  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
   return {
     width: rect.width * scale.x,
     height: rect.height * scale.y,
@@ -8484,7 +8489,7 @@ function getDocumentRect(element) {
   const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
-  if (getComputedStyle(body).direction === 'rtl') {
+  if (getComputedStyle$1(body).direction === 'rtl') {
     x += max(html.clientWidth, body.clientWidth) - width;
   }
   return {
@@ -8495,6 +8500,10 @@ function getDocumentRect(element) {
   };
 }
 
+// Safety check: ensure the scrollbar space is reasonable in case this
+// calculation is affected by unusual styles.
+// Most scrollbars leave 15-18px of space.
+const SCROLLBAR_MAX = 25;
 function getViewportRect(element, strategy) {
   const win = getWindow(element);
   const html = getDocumentElement(element);
@@ -8512,6 +8521,24 @@ function getViewportRect(element, strategy) {
       y = visualViewport.offsetTop;
     }
   }
+  const windowScrollbarX = getWindowScrollBarX(html);
+  // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
+  // visual width of the <html> but this is not considered in the size
+  // of `html.clientWidth`.
+  if (windowScrollbarX <= 0) {
+    const doc = html.ownerDocument;
+    const body = doc.body;
+    const bodyStyles = getComputedStyle(body);
+    const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
+    const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+    if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+      width -= clippingStableScrollbarWidth;
+    }
+  } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+    // If the <body> scrollbar is on the left, the width needs to be extended
+    // by the scrollbar amount so there isn't extra space on the right.
+    width += windowScrollbarX;
+  }
   return {
     width,
     height,
@@ -8520,6 +8547,7 @@ function getViewportRect(element, strategy) {
   };
 }
 
+const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
 // Returns the inner client rect, subtracting scrollbars if present.
 function getInnerBoundingClientRect(element, strategy) {
   const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
@@ -8561,7 +8589,7 @@ function hasFixedPositionAncestor(element, stopNode) {
   if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
     return false;
   }
-  return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
 }
 
 // A "clipping ancestor" is an `overflow` element with the characteristic of
@@ -8574,17 +8602,17 @@ function getClippingElementAncestors(element, cache) {
   }
   let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
   let currentContainingBlockComputedStyle = null;
-  const elementIsFixed = getComputedStyle(element).position === 'fixed';
+  const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
   let currentNode = elementIsFixed ? getParentNode(element) : element;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
-    const computedStyle = getComputedStyle(currentNode);
+    const computedStyle = getComputedStyle$1(currentNode);
     const currentNodeIsContaining = isContainingBlock(currentNode);
     if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
     }
-    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
     if (shouldDropCurrentNode) {
       // Drop non-containing blocks.
       result = result.filter(ancestor => ancestor !== currentNode);
@@ -8680,11 +8708,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
 }
 
 function isStaticPositioned(element) {
-  return getComputedStyle(element).position === 'static';
+  return getComputedStyle$1(element).position === 'static';
 }
 
 function getTrueOffsetParent(element, polyfill) {
-  if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
     return null;
   }
   if (polyfill) {
@@ -8745,7 +8773,7 @@ const getElementRects = async function (data) {
 };
 
 function isRTL(element) {
-  return getComputedStyle(element).direction === 'rtl';
+  return getComputedStyle$1(element).direction === 'rtl';
 }
 
 const platform = {
@@ -9385,7 +9413,7 @@ const FloatingArrow = /*#__PURE__*/React.forwardRef(function FloatingArrow(props
   // https://github.com/floating-ui/floating-ui/issues/2932
   index$1(() => {
     if (!floating) return;
-    const isRTL = getComputedStyle(floating).direction === 'rtl';
+    const isRTL = getComputedStyle$1(floating).direction === 'rtl';
     if (isRTL) {
       setIsRTL(true);
     }
@@ -9644,7 +9672,7 @@ function useFloating(options) {
 }
 
 /*!
-  react-datepicker v8.4.0
+  react-datepicker v8.6.0
   https://github.com/Hacker0x01/react-datepicker
   Released under the MIT License.
 */
@@ -9879,12 +9907,13 @@ var DATE_RANGE_SEPARATOR = " - ";
  * @returns - The formatted date range or an empty string.
  */
 function safeDateRangeFormat(startDate, endDate, props) {
-    if (!startDate) {
+    if (!startDate && !endDate) {
         return "";
     }
-    var formattedStartDate = safeDateFormat(startDate, props);
+    var formattedStartDate = startDate ? safeDateFormat(startDate, props) : "";
     var formattedEndDate = endDate ? safeDateFormat(endDate, props) : "";
-    return "".concat(formattedStartDate).concat(DATE_RANGE_SEPARATOR).concat(formattedEndDate);
+    var dateRangeSeparator = props.rangeSeparator || DATE_RANGE_SEPARATOR;
+    return "".concat(formattedStartDate).concat(dateRangeSeparator).concat(formattedEndDate);
 }
 /**
  * Safely formats multiple dates.
@@ -10986,7 +11015,7 @@ var Day = /** @class */ (function (_super) {
         };
         _this.isInSelectingRange = function () {
             var _a;
-            var _b = _this.props, day = _b.day, selectsStart = _b.selectsStart, selectsEnd = _b.selectsEnd, selectsRange = _b.selectsRange, selectsDisabledDaysInRange = _b.selectsDisabledDaysInRange, startDate = _b.startDate, endDate = _b.endDate;
+            var _b = _this.props, day = _b.day, selectsStart = _b.selectsStart, selectsEnd = _b.selectsEnd, selectsRange = _b.selectsRange, selectsDisabledDaysInRange = _b.selectsDisabledDaysInRange, startDate = _b.startDate, swapRange = _b.swapRange, endDate = _b.endDate;
             var selectingDate = (_a = _this.props.selectingDate) !== null && _a !== void 0 ? _a : _this.props.preSelection;
             if (!(selectsStart || selectsEnd || selectsRange) ||
                 !selectingDate ||
@@ -11003,11 +11032,16 @@ var Day = /** @class */ (function (_super) {
                 (isAfter(selectingDate, startDate) || isEqual(selectingDate, startDate))) {
                 return isDayInRange(day, startDate, selectingDate);
             }
-            if (selectsRange &&
-                startDate &&
-                !endDate &&
-                (isAfter(selectingDate, startDate) || isEqual(selectingDate, startDate))) {
-                return isDayInRange(day, startDate, selectingDate);
+            if (selectsRange && startDate && !endDate) {
+                if (isEqual(selectingDate, startDate)) {
+                    return isDayInRange(day, startDate, selectingDate);
+                }
+                if (isAfter(selectingDate, startDate)) {
+                    return isDayInRange(day, startDate, selectingDate);
+                }
+                if (swapRange && isBefore(selectingDate, startDate)) {
+                    return isDayInRange(day, selectingDate, startDate);
+                }
             }
             return false;
         };
@@ -11016,28 +11050,33 @@ var Day = /** @class */ (function (_super) {
             if (!_this.isInSelectingRange()) {
                 return false;
             }
-            var _b = _this.props, day = _b.day, startDate = _b.startDate, selectsStart = _b.selectsStart;
+            var _b = _this.props, day = _b.day, startDate = _b.startDate, selectsStart = _b.selectsStart, swapRange = _b.swapRange, selectsRange = _b.selectsRange;
             var selectingDate = (_a = _this.props.selectingDate) !== null && _a !== void 0 ? _a : _this.props.preSelection;
             if (selectsStart) {
                 return isSameDay(day, selectingDate);
             }
-            else {
-                return isSameDay(day, startDate);
+            if (selectsRange && swapRange && startDate && selectingDate) {
+                return isSameDay(day, isBefore(selectingDate, startDate) ? selectingDate : startDate);
             }
+            return isSameDay(day, startDate);
         };
         _this.isSelectingRangeEnd = function () {
             var _a;
             if (!_this.isInSelectingRange()) {
                 return false;
             }
-            var _b = _this.props, day = _b.day, endDate = _b.endDate, selectsEnd = _b.selectsEnd, selectsRange = _b.selectsRange;
+            var _b = _this.props, day = _b.day, endDate = _b.endDate, selectsEnd = _b.selectsEnd, selectsRange = _b.selectsRange, swapRange = _b.swapRange, startDate = _b.startDate;
             var selectingDate = (_a = _this.props.selectingDate) !== null && _a !== void 0 ? _a : _this.props.preSelection;
-            if (selectsEnd || selectsRange) {
+            if (selectsEnd) {
                 return isSameDay(day, selectingDate);
             }
-            else {
-                return isSameDay(day, endDate);
+            if (selectsRange && swapRange && startDate && selectingDate) {
+                return isSameDay(day, isBefore(selectingDate, startDate) ? startDate : selectingDate);
             }
+            if (selectsRange) {
+                return isSameDay(day, selectingDate);
+            }
+            return isSameDay(day, endDate);
         };
         _this.isRangeStart = function () {
             var _a = _this.props, day = _a.day, startDate = _a.startDate, endDate = _a.endDate;
@@ -11405,7 +11444,10 @@ var Week = /** @class */ (function (_super) {
             "react-datepicker__week--selected": isSameDay(this.startOfWeek(), this.props.selected),
             "react-datepicker__week--keyboard-selected": this.isKeyboardSelected(),
         };
-        return React__default.createElement("div", { className: clsx(weekNumberClasses) }, this.renderDays());
+        var customWeekClassName = this.props.weekClassName
+            ? this.props.weekClassName(this.startOfWeek())
+            : undefined;
+        return (React__default.createElement("div", { className: clsx(weekNumberClasses, customWeekClassName) }, this.renderDays()));
     };
     return Week;
 }(Component));
@@ -12108,11 +12150,40 @@ var MonthDropdownOptions = /** @class */ (function (_super) {
     __extends(MonthDropdownOptions, _super);
     function MonthDropdownOptions() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.monthOptionButtonsRef = {};
         _this.isSelectedMonth = function (i) { return _this.props.month === i; };
+        _this.handleOptionKeyDown = function (i, e) {
+            var _a;
+            switch (e.key) {
+                case "Enter":
+                    e.preventDefault();
+                    _this.onChange(i);
+                    break;
+                case "Escape":
+                    e.preventDefault();
+                    _this.props.onCancel();
+                    break;
+                case "ArrowUp":
+                case "ArrowDown": {
+                    e.preventDefault();
+                    var newMonth = (i + (e.key === "ArrowUp" ? -1 : 1) + _this.props.monthNames.length) %
+                        _this.props.monthNames.length;
+                    (_a = _this.monthOptionButtonsRef[newMonth]) === null || _a === void 0 ? void 0 : _a.focus();
+                    break;
+                }
+            }
+        };
         _this.renderOptions = function () {
-            return _this.props.monthNames.map(function (month, i) { return (React__default.createElement("div", { className: _this.isSelectedMonth(i)
+            // Clear refs to prevent memory leaks on re-render
+            _this.monthOptionButtonsRef = {};
+            return _this.props.monthNames.map(function (month, i) { return (React__default.createElement("div", { ref: function (el) {
+                    _this.monthOptionButtonsRef[i] = el;
+                    if (_this.isSelectedMonth(i)) {
+                        el === null || el === void 0 ? void 0 : el.focus();
+                    }
+                }, role: "button", tabIndex: 0, className: _this.isSelectedMonth(i)
                     ? "react-datepicker__month-option react-datepicker__month-option--selected_month"
-                    : "react-datepicker__month-option", key: month, onClick: _this.onChange.bind(_this, i), "aria-selected": _this.isSelectedMonth(i) ? "true" : undefined },
+                    : "react-datepicker__month-option", key: month, onClick: _this.onChange.bind(_this, i), onKeyDown: _this.handleOptionKeyDown.bind(_this, i), "aria-selected": _this.isSelectedMonth(i) ? "true" : undefined },
                 _this.isSelectedMonth(i) ? (React__default.createElement("span", { className: "react-datepicker__month-option--selected" }, "\u2713")) : (""),
                 month)); });
         };
@@ -12137,7 +12208,7 @@ var MonthDropdown = /** @class */ (function (_super) {
             return monthNames.map(function (m, i) { return (React__default.createElement("option", { key: m, value: i }, m)); });
         };
         _this.renderSelectMode = function (monthNames) { return (React__default.createElement("select", { value: _this.props.month, className: "react-datepicker__month-select", onChange: function (e) { return _this.onChange(parseInt(e.target.value)); } }, _this.renderSelectOptions(monthNames))); };
-        _this.renderReadView = function (visible, monthNames) { return (React__default.createElement("div", { key: "read", style: { visibility: visible ? "visible" : "hidden" }, className: "react-datepicker__month-read-view", onClick: _this.toggleDropdown },
+        _this.renderReadView = function (visible, monthNames) { return (React__default.createElement("button", { key: "read", type: "button", style: { visibility: visible ? "visible" : "hidden" }, className: "react-datepicker__month-read-view", onClick: _this.toggleDropdown },
             React__default.createElement("span", { className: "react-datepicker__month-read-view--down-arrow" }),
             React__default.createElement("span", { className: "react-datepicker__month-read-view--selected-month" }, monthNames[_this.props.month]))); };
         _this.renderDropdown = function (monthNames) { return (React__default.createElement(MonthDropdownOptions, _assign({ key: "dropdown" }, _this.props, { monthNames: monthNames, onChange: _this.onChange, onCancel: _this.toggleDropdown }))); };
@@ -12625,19 +12696,20 @@ var Year$1 = /** @class */ (function (_super) {
             return isSameYear(_year, endDate !== null && endDate !== void 0 ? endDate : null);
         };
         _this.isKeyboardSelected = function (y) {
-            if (_this.props.date === undefined ||
-                _this.props.selected == null ||
+            if (_this.props.disabledKeyboardNavigation ||
+                _this.props.date === undefined ||
                 _this.props.preSelection == null) {
                 return;
             }
-            var _a = _this.props, minDate = _a.minDate, maxDate = _a.maxDate, excludeDates = _a.excludeDates, includeDates = _a.includeDates, filterDate = _a.filterDate;
+            var _a = _this.props, minDate = _a.minDate, maxDate = _a.maxDate, excludeDates = _a.excludeDates, includeDates = _a.includeDates, filterDate = _a.filterDate, selected = _a.selected;
             var date = getStartOfYear(setYear(_this.props.date, y));
             var isDisabled = (minDate || maxDate || excludeDates || includeDates || filterDate) &&
                 isYearDisabled(y, _this.props);
-            return (!_this.props.disabledKeyboardNavigation &&
-                !_this.props.inline &&
-                !isSameDay(date, getStartOfYear(_this.props.selected)) &&
-                isSameDay(date, getStartOfYear(_this.props.preSelection)) &&
+            var isSelectedDay = !!selected && isSameDay(date, getStartOfYear(selected));
+            var isKeyboardSelectedDay = isSameDay(date, getStartOfYear(_this.props.preSelection));
+            return (!_this.props.inline &&
+                !isSelectedDay &&
+                isKeyboardSelectedDay &&
                 !isDisabled);
         };
         _this.isSelectedYear = function (year) {
@@ -12823,11 +12895,42 @@ var YearDropdownOptions = /** @class */ (function (_super) {
     __extends(YearDropdownOptions, _super);
     function YearDropdownOptions(props) {
         var _this = _super.call(this, props) || this;
+        _this.yearOptionButtonsRef = {};
+        _this.handleOptionKeyDown = function (year, e) {
+            var _a;
+            switch (e.key) {
+                case "Enter":
+                    e.preventDefault();
+                    _this.onChange(year);
+                    break;
+                case "Escape":
+                    e.preventDefault();
+                    _this.props.onCancel();
+                    break;
+                case "ArrowUp":
+                case "ArrowDown": {
+                    e.preventDefault();
+                    var newYear = year + (e.key === "ArrowUp" ? 1 : -1);
+                    // Add bounds checking to ensure the year exists in our refs
+                    if (_this.yearOptionButtonsRef[newYear]) {
+                        (_a = _this.yearOptionButtonsRef[newYear]) === null || _a === void 0 ? void 0 : _a.focus();
+                    }
+                    break;
+                }
+            }
+        };
         _this.renderOptions = function () {
+            // Clear refs to prevent memory leaks on re-render
+            _this.yearOptionButtonsRef = {};
             var selectedYear = _this.props.year;
-            var options = _this.state.yearsList.map(function (year) { return (React__default.createElement("div", { className: selectedYear === year
+            var options = _this.state.yearsList.map(function (year) { return (React__default.createElement("div", { ref: function (el) {
+                    _this.yearOptionButtonsRef[year] = el;
+                    if (year === selectedYear) {
+                        el === null || el === void 0 ? void 0 : el.focus();
+                    }
+                }, role: "button", tabIndex: 0, className: selectedYear === year
                     ? "react-datepicker__year-option react-datepicker__year-option--selected_year"
-                    : "react-datepicker__year-option", key: year, onClick: _this.onChange.bind(_this, year), "aria-selected": selectedYear === year ? "true" : undefined },
+                    : "react-datepicker__year-option", key: year, onClick: _this.onChange.bind(_this, year), onKeyDown: _this.handleOptionKeyDown.bind(_this, year), "aria-selected": selectedYear === year ? "true" : undefined },
                 selectedYear === year ? (React__default.createElement("span", { className: "react-datepicker__year-option--selected" }, "\u2713")) : (""),
                 year)); });
             var minYear = _this.props.minDate ? getYear(_this.props.minDate) : null;
@@ -12922,9 +13025,7 @@ var YearDropdown = /** @class */ (function (_super) {
             _this.onChange(parseInt(event.target.value));
         };
         _this.renderSelectMode = function () { return (React__default.createElement("select", { value: _this.props.year, className: "react-datepicker__year-select", onChange: _this.onSelectChange }, _this.renderSelectOptions())); };
-        _this.renderReadView = function (visible) { return (React__default.createElement("div", { key: "read", style: { visibility: visible ? "visible" : "hidden" }, className: "react-datepicker__year-read-view", onClick: function (event) {
-                return _this.toggleDropdown(event);
-            } },
+        _this.renderReadView = function (visible) { return (React__default.createElement("button", { key: "read", type: "button", style: { visibility: visible ? "visible" : "hidden" }, className: "react-datepicker__year-read-view", onClick: _this.toggleDropdown },
             React__default.createElement("span", { className: "react-datepicker__year-read-view--down-arrow" }),
             React__default.createElement("span", { className: "react-datepicker__year-read-view--selected-year" }, _this.props.year))); };
         _this.renderDropdown = function () { return (React__default.createElement(YearDropdownOptions, _assign({ key: "dropdown" }, _this.props, { onChange: _this.onChange, onCancel: _this.toggleDropdown }))); };
@@ -12986,6 +13087,7 @@ var DROPDOWN_FOCUS_CLASSNAMES = [
     "react-datepicker__month-select",
     "react-datepicker__month-year-select",
 ];
+var OUTSIDE_CLICK_IGNORE_CLASS = "react-datepicker-ignore-onclickoutside";
 var isDropdownSelect = function (element) {
     var classNames = (element.className || "").split(/\s+/);
     return DROPDOWN_FOCUS_CLASSNAMES.some(function (testClassname) { return classNames.indexOf(testClassname) >= 0; });
@@ -13137,7 +13239,9 @@ var Calendar = /** @class */ (function (_super) {
             var startOfWeek = getStartOfWeek(date, _this.props.locale, _this.props.calendarStartDay);
             var dayNames = [];
             if (_this.props.showWeekNumbers) {
-                dayNames.push(React__default.createElement("div", { key: "W", className: "react-datepicker__day-name" }, _this.props.weekLabel || "#"));
+                dayNames.push(React__default.createElement("div", { key: "W", className: "react-datepicker__day-name", role: "columnheader" },
+                    React__default.createElement("span", { className: "sr-only" }, "Week number"),
+                    React__default.createElement("span", { "aria-hidden": "true" }, _this.props.weekLabel || "#")));
             }
             return dayNames.concat([0, 1, 2, 3, 4, 5, 6].map(function (offset) {
                 var day = addDays(startOfWeek, offset);
@@ -13145,7 +13249,9 @@ var Calendar = /** @class */ (function (_super) {
                 var weekDayClassName = _this.props.weekDayClassName
                     ? _this.props.weekDayClassName(day)
                     : undefined;
-                return (React__default.createElement("div", { key: offset, "aria-label": formatDate(day, "EEEE", _this.props.locale), className: clsx("react-datepicker__day-name", weekDayClassName) }, weekDayName));
+                return (React__default.createElement("div", { key: offset, role: "columnheader", className: clsx("react-datepicker__day-name", weekDayClassName) },
+                    React__default.createElement("span", { className: "sr-only" }, formatDate(day, "EEEE", _this.props.locale)),
+                    React__default.createElement("span", { "aria-hidden": "true" }, weekDayName)));
             }));
         };
         _this.formatWeekday = function (day, locale) {
@@ -13360,7 +13466,7 @@ var Calendar = /** @class */ (function (_super) {
                     _this.renderMonthDropdown(i !== 0),
                     _this.renderMonthYearDropdown(i !== 0),
                     _this.renderYearDropdown(i !== 0)),
-                React__default.createElement("div", { className: "react-datepicker__day-names" }, _this.header(monthDate))));
+                React__default.createElement("div", { className: "react-datepicker__day-names", role: "row" }, _this.header(monthDate))));
         };
         _this.renderCustomHeader = function (headerArgs) {
             var _a, _b;
@@ -13369,6 +13475,15 @@ var Calendar = /** @class */ (function (_super) {
                 _this.props.showTimeSelectOnly) {
                 return null;
             }
+            var _c = _this.props, showYearPicker = _c.showYearPicker, yearItemNumber = _c.yearItemNumber;
+            var visibleYearsRange;
+            if (showYearPicker) {
+                var _d = getYearsPeriod(monthDate, yearItemNumber), startYear = _d.startPeriod, endYear = _d.endPeriod;
+                visibleYearsRange = {
+                    startYear: startYear,
+                    endYear: endYear,
+                };
+            }
             var prevMonthButtonDisabled = monthDisabledBefore(_this.state.date, _this.props);
             var nextMonthButtonDisabled = monthDisabledAfter(_this.state.date, _this.props);
             var prevYearButtonDisabled = yearDisabledBefore(_this.state.date, _this.props);
@@ -13377,7 +13492,7 @@ var Calendar = /** @class */ (function (_super) {
                 !_this.props.showQuarterYearPicker &&
                 !_this.props.showYearPicker;
             return (React__default.createElement("div", { className: "react-datepicker__header react-datepicker__header--custom", onFocus: _this.props.onDropdownFocus }, (_b = (_a = _this.props).renderCustomHeader) === null || _b === void 0 ? void 0 :
-                _b.call(_a, _assign(_assign({}, _this.state), { customHeaderCount: i, monthDate: monthDate, changeMonth: _this.changeMonth, changeYear: _this.changeYear, decreaseMonth: _this.decreaseMonth, increaseMonth: _this.increaseMonth, decreaseYear: _this.decreaseYear, increaseYear: _this.increaseYear, prevMonthButtonDisabled: prevMonthButtonDisabled, nextMonthButtonDisabled: nextMonthButtonDisabled, prevYearButtonDisabled: prevYearButtonDisabled, nextYearButtonDisabled: nextYearButtonDisabled })),
+                _b.call(_a, _assign(_assign(_assign({}, _this.state), (showYearPicker && { visibleYearsRange: visibleYearsRange })), { customHeaderCount: i, monthDate: monthDate, changeMonth: _this.changeMonth, changeYear: _this.changeYear, decreaseMonth: _this.decreaseMonth, increaseMonth: _this.increaseMonth, decreaseYear: _this.decreaseYear, increaseYear: _this.increaseYear, prevMonthButtonDisabled: prevMonthButtonDisabled, nextMonthButtonDisabled: nextMonthButtonDisabled, prevYearButtonDisabled: prevYearButtonDisabled, nextYearButtonDisabled: nextYearButtonDisabled })),
                 showDayNames && (React__default.createElement("div", { className: "react-datepicker__day-names" }, _this.header(monthDate)))));
         };
         _this.renderYearHeader = function (_a) {
@@ -13497,6 +13612,7 @@ var Calendar = /** @class */ (function (_super) {
             return {
                 monthsShown: 1,
                 forceShowMonthNavigation: false,
+                outsideClickIgnoreClass: OUTSIDE_CLICK_IGNORE_CLASS,
                 timeCaption: "Time",
                 previousYearButtonLabel: "Previous Year",
                 nextYearButtonLabel: "Next Year",
@@ -13730,7 +13846,7 @@ var TabLoop = /** @class */ (function (_super) {
  * @returns A new component with floating behavior.
  */
 function withFloating(Component) {
-    var WithFloating = function (props) {
+    function WithFloating(props) {
         var _a;
         var hidePopper = typeof props.hidePopper === "boolean" ? props.hidePopper : true;
         var arrowRef = useRef(null);
@@ -13741,51 +13857,35 @@ function withFloating(Component) {
             ], ((_a = props.popperModifiers) !== null && _a !== void 0 ? _a : []), true) }, props.popperProps));
         var componentProps = _assign(_assign({}, props), { hidePopper: hidePopper, popperProps: _assign(_assign({}, floatingProps), { arrowRef: arrowRef }) });
         return React__default.createElement(Component, _assign({}, componentProps));
-    };
+    }
+    WithFloating.displayName = "withFloating(".concat(Component.displayName || Component.name || "Component", ")");
     return WithFloating;
 }
 
 // Exported for testing purposes
-var PopperComponent = /** @class */ (function (_super) {
-    __extends(PopperComponent, _super);
-    function PopperComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Object.defineProperty(PopperComponent, "defaultProps", {
-        get: function () {
-            return {
-                hidePopper: true,
-            };
-        },
-        enumerable: false,
-        configurable: true
-    });
-    PopperComponent.prototype.render = function () {
-        var _a = this.props, className = _a.className, wrapperClassName = _a.wrapperClassName, _b = _a.hidePopper, hidePopper = _b === void 0 ? PopperComponent.defaultProps.hidePopper : _b, popperComponent = _a.popperComponent, targetComponent = _a.targetComponent, enableTabLoop = _a.enableTabLoop, popperOnKeyDown = _a.popperOnKeyDown, portalId = _a.portalId, portalHost = _a.portalHost, popperProps = _a.popperProps, showArrow = _a.showArrow;
-        var popper = undefined;
-        if (!hidePopper) {
-            var classes = clsx("react-datepicker-popper", className);
-            popper = (React__default.createElement(TabLoop, { enableTabLoop: enableTabLoop },
-                React__default.createElement("div", { ref: popperProps.refs.setFloating, style: popperProps.floatingStyles, className: classes, "data-placement": popperProps.placement, onKeyDown: popperOnKeyDown },
-                    popperComponent,
-                    showArrow && (React__default.createElement(FloatingArrow, { ref: popperProps.arrowRef, context: popperProps.context, fill: "currentColor", strokeWidth: 1, height: 8, width: 16, style: { transform: "translateY(-1px)" }, className: "react-datepicker__triangle" })))));
-        }
-        if (this.props.popperContainer) {
-            popper = createElement(this.props.popperContainer, {}, popper);
-        }
-        if (portalId && !hidePopper) {
-            popper = (React__default.createElement(Portal, { portalId: portalId, portalHost: portalHost }, popper));
-        }
-        var wrapperClasses = clsx("react-datepicker-wrapper", wrapperClassName);
-        return (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement("div", { ref: popperProps.refs.setReference, className: wrapperClasses }, targetComponent),
-            popper));
-    };
-    return PopperComponent;
-}(Component));
+var PopperComponent = function (props) {
+    var className = props.className, wrapperClassName = props.wrapperClassName, _a = props.hidePopper, hidePopper = _a === void 0 ? true : _a, popperComponent = props.popperComponent, targetComponent = props.targetComponent, enableTabLoop = props.enableTabLoop, popperOnKeyDown = props.popperOnKeyDown, portalId = props.portalId, portalHost = props.portalHost, popperProps = props.popperProps, showArrow = props.showArrow;
+    var popper = undefined;
+    if (!hidePopper) {
+        var classes = clsx("react-datepicker-popper", className);
+        popper = (React__default.createElement(TabLoop, { enableTabLoop: enableTabLoop },
+            React__default.createElement("div", { ref: popperProps.refs.setFloating, style: popperProps.floatingStyles, className: classes, "data-placement": popperProps.placement, onKeyDown: popperOnKeyDown },
+                popperComponent,
+                showArrow && (React__default.createElement(FloatingArrow, { ref: popperProps.arrowRef, context: popperProps.context, fill: "currentColor", strokeWidth: 1, height: 8, width: 16, style: { transform: "translateY(-1px)" }, className: "react-datepicker__triangle" })))));
+    }
+    if (props.popperContainer) {
+        popper = createElement(props.popperContainer, {}, popper);
+    }
+    if (portalId && !hidePopper) {
+        popper = (React__default.createElement(Portal, { portalId: portalId, portalHost: portalHost }, popper));
+    }
+    var wrapperClasses = clsx("react-datepicker-wrapper", wrapperClassName);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { ref: popperProps.refs.setReference, className: wrapperClasses }, targetComponent),
+        popper));
+};
 var PopperComponent$1 = withFloating(PopperComponent);
 
-var outsideClickIgnoreClass = "react-datepicker-ignore-onclickoutside";
 // Compares dates year+month combinations
 function hasPreSelectionChanged(date1, date2) {
     if (date1 && date2) {
@@ -13851,6 +13951,35 @@ var DatePicker = /** @class */ (function (_super) {
                 wasHidden: false,
             };
         };
+        _this.getInputValue = function () {
+            var _a;
+            var _b = _this.props, locale = _b.locale, startDate = _b.startDate, endDate = _b.endDate, rangeSeparator = _b.rangeSeparator, selected = _b.selected, selectedDates = _b.selectedDates, selectsMultiple = _b.selectsMultiple, selectsRange = _b.selectsRange, value = _b.value;
+            var dateFormat = (_a = _this.props.dateFormat) !== null && _a !== void 0 ? _a : DatePicker.defaultProps.dateFormat;
+            var inputValue = _this.state.inputValue;
+            if (typeof value === "string") {
+                return value;
+            }
+            else if (typeof inputValue === "string") {
+                return inputValue;
+            }
+            else if (selectsRange) {
+                return safeDateRangeFormat(startDate, endDate, {
+                    dateFormat: dateFormat,
+                    locale: locale,
+                    rangeSeparator: rangeSeparator,
+                });
+            }
+            else if (selectsMultiple) {
+                return safeMultipleDatesFormat(selectedDates !== null && selectedDates !== void 0 ? selectedDates : [], {
+                    dateFormat: dateFormat,
+                    locale: locale,
+                });
+            }
+            return safeDateFormat(selected, {
+                dateFormat: dateFormat,
+                locale: locale,
+            });
+        };
         _this.resetHiddenStatus = function () {
             _this.setState(_assign(_assign({}, _this.state), { wasHidden: false }));
         };
@@ -13950,11 +14079,15 @@ var DatePicker = /** @class */ (function (_super) {
         _this.handleDropdownFocus = function () {
             _this.cancelFocusInput();
         };
+        _this.resetInputValue = function () {
+            _this.setState(_assign(_assign({}, _this.state), { inputValue: null }));
+        };
         _this.handleBlur = function (event) {
             var _a, _b;
             if (!_this.state.open || _this.props.withPortal || _this.props.showTimeInput) {
                 (_b = (_a = _this.props).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, event);
             }
+            _this.resetInputValue();
             if (_this.state.open && _this.props.open === false) {
                 _this.setOpen(false);
             }
@@ -13995,11 +14128,17 @@ var DatePicker = /** @class */ (function (_super) {
             var strictParsing = (_b = _this.props.strictParsing) !== null && _b !== void 0 ? _b : DatePicker.defaultProps.strictParsing;
             var value = (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLInputElement ? event.target.value : "";
             if (selectsRange) {
+                var rangeSeparator = _this.props.rangeSeparator;
+                var trimmedRangeSeparator = rangeSeparator.trim();
                 var _g = value
-                    .split(dateFormat.includes("-") ? DATE_RANGE_SEPARATOR : "-", 2)
+                    .split(dateFormat.includes(trimmedRangeSeparator)
+                    ? rangeSeparator
+                    : trimmedRangeSeparator, 2)
                     .map(function (val) { return val.trim(); }), valueStart = _g[0], valueEnd = _g[1];
                 var startDateNew = parseDate(valueStart !== null && valueStart !== void 0 ? valueStart : "", dateFormat, _this.props.locale, strictParsing);
-                var endDateNew = parseDate(valueEnd !== null && valueEnd !== void 0 ? valueEnd : "", dateFormat, _this.props.locale, strictParsing);
+                var endDateNew = startDateNew
+                    ? parseDate(valueEnd !== null && valueEnd !== void 0 ? valueEnd : "", dateFormat, _this.props.locale, strictParsing)
+                    : null;
                 var startChanged = (startDate === null || startDate === void 0 ? void 0 : startDate.getTime()) !== (startDateNew === null || startDateNew === void 0 ? void 0 : startDateNew.getTime());
                 var endChanged = (endDate === null || endDate === void 0 ? void 0 : endDate.getTime()) !== (endDateNew === null || endDateNew === void 0 ? void 0 : endDateNew.getTime());
                 if (!startChanged && !endChanged) {
@@ -14025,7 +14164,12 @@ var DatePicker = /** @class */ (function (_super) {
         _this.handleSelect = function (date, event, monthSelectedIn) {
             if (_this.props.readOnly)
                 return;
-            if (_this.props.shouldCloseOnSelect && !_this.props.showTimeSelect) {
+            var _a = _this.props, selectsRange = _a.selectsRange, startDate = _a.startDate, endDate = _a.endDate, swapRange = _a.swapRange;
+            var isDateSelectionComplete = !selectsRange ||
+                (startDate && !endDate && (swapRange || !isDateBefore(date, startDate)));
+            if (_this.props.shouldCloseOnSelect &&
+                !_this.props.showTimeSelect &&
+                isDateSelectionComplete) {
                 // Preventing onFocus event to fix issue
                 // https://github.com/Hacker0x01/react-datepicker/issues/628
                 _this.sendFocusBackToInput();
@@ -14040,16 +14184,8 @@ var DatePicker = /** @class */ (function (_super) {
             if (!_this.props.shouldCloseOnSelect || _this.props.showTimeSelect) {
                 _this.setPreSelection(date);
             }
-            else if (!_this.props.inline) {
-                if (!_this.props.selectsRange) {
-                    _this.setOpen(false);
-                }
-                var _a = _this.props, startDate = _a.startDate, endDate = _a.endDate;
-                if (startDate &&
-                    !endDate &&
-                    (_this.props.swapRange || !isDateBefore(date, startDate))) {
-                    _this.setOpen(false);
-                }
+            else if (isDateSelectionComplete) {
+                _this.setOpen(false);
             }
         };
         // setSelected is called either from handleChange (user typed date into textbox and it was parsed) or handleSelect (user selected date from calendar using mouse or keyboard)
@@ -14114,6 +14250,7 @@ var DatePicker = /** @class */ (function (_super) {
                 if (selectsRange) {
                     var noRanges = !startDate && !endDate;
                     var hasStartRange = startDate && !endDate;
+                    var hasOnlyEndRange = !startDate && !!endDate;
                     var isRangeFilled = startDate && endDate;
                     if (noRanges) {
                         onChange === null || onChange === void 0 ? void 0 : onChange([changedDate, null], event);
@@ -14134,6 +14271,14 @@ var DatePicker = /** @class */ (function (_super) {
                             onChange === null || onChange === void 0 ? void 0 : onChange([startDate, changedDate], event);
                         }
                     }
+                    else if (hasOnlyEndRange) {
+                        if (changedDate && isDateBefore(changedDate, endDate)) {
+                            onChange === null || onChange === void 0 ? void 0 : onChange([changedDate, endDate], event);
+                        }
+                        else {
+                            onChange === null || onChange === void 0 ? void 0 : onChange([changedDate, null], event);
+                        }
+                    }
                     if (isRangeFilled) {
                         onChange === null || onChange === void 0 ? void 0 : onChange([changedDate, null], event);
                     }
@@ -14507,10 +14652,12 @@ var DatePicker = /** @class */ (function (_super) {
             }
             return (React__default.createElement(Calendar, _assign({ showMonthYearDropdown: undefined, ref: function (elem) {
                     _this.calendar = elem;
-                } }, _this.props, _this.state, { setOpen: _this.setOpen, dateFormat: (_a = _this.props.dateFormatCalendar) !== null && _a !== void 0 ? _a : DatePicker.defaultProps.dateFormatCalendar, onSelect: _this.handleSelect, onClickOutside: _this.handleCalendarClickOutside, holidays: getHolidaysMap(_this.modifyHolidays()), outsideClickIgnoreClass: outsideClickIgnoreClass, onDropdownFocus: _this.handleDropdownFocus, onTimeChange: _this.handleTimeChange, className: _this.props.calendarClassName, container: _this.props.calendarContainer, handleOnKeyDown: _this.props.onKeyDown, handleOnDayKeyDown: _this.onDayKeyDown, setPreSelection: _this.setPreSelection, dropdownMode: (_b = _this.props.dropdownMode) !== null && _b !== void 0 ? _b : DatePicker.defaultProps.dropdownMode }), _this.props.children));
+                } }, _this.props, _this.state, { setOpen: _this.setOpen, dateFormat: (_a = _this.props.dateFormatCalendar) !== null && _a !== void 0 ? _a : DatePicker.defaultProps.dateFormatCalendar, onSelect: _this.handleSelect, onClickOutside: _this.handleCalendarClickOutside, holidays: getHolidaysMap(_this.modifyHolidays()), outsideClickIgnoreClass: _this.props.outsideClickIgnoreClass, onDropdownFocus: _this.handleDropdownFocus, onTimeChange: _this.handleTimeChange, className: _this.props.calendarClassName, container: _this.props.calendarContainer, handleOnKeyDown: _this.props.onKeyDown, handleOnDayKeyDown: _this.onDayKeyDown, setPreSelection: _this.setPreSelection, dropdownMode: (_b = _this.props.dropdownMode) !== null && _b !== void 0 ? _b : DatePicker.defaultProps.dropdownMode }), _this.props.children));
         };
         _this.renderAriaLiveRegion = function () {
-            var _a = _this.props, _b = _a.dateFormat, dateFormat = _b === void 0 ? DatePicker.defaultProps.dateFormat : _b, locale = _a.locale;
+            var _a;
+            var locale = _this.props.locale;
+            var dateFormat = (_a = _this.props.dateFormat) !== null && _a !== void 0 ? _a : DatePicker.defaultProps.dateFormat;
             var isContainsTime = _this.props.showTimeInput || _this.props.showTimeSelect;
             var longDateFormat = isContainsTime ? "PPPPp" : "PPPP";
             var ariaLiveMessage;
@@ -14553,36 +14700,17 @@ var DatePicker = /** @class */ (function (_super) {
         };
         _this.renderDateInput = function () {
             var _a, _b;
-            var _c;
             var className = clsx(_this.props.className, (_a = {},
-                _a[outsideClickIgnoreClass] = _this.state.open,
+                _a[_this.props.outsideClickIgnoreClass ||
+                    DatePicker.defaultProps.outsideClickIgnoreClass] = _this.state.open,
                 _a));
             var customInput = _this.props.customInput || React__default.createElement("input", { type: "text" });
             var customInputRef = _this.props.customInputRef || "ref";
-            var _d = _this.props, _e = _d.dateFormat, dateFormat = _e === void 0 ? DatePicker.defaultProps.dateFormat : _e, locale = _d.locale;
-            var inputValue = typeof _this.props.value === "string"
-                ? _this.props.value
-                : typeof _this.state.inputValue === "string"
-                    ? _this.state.inputValue
-                    : _this.props.selectsRange
-                        ? safeDateRangeFormat(_this.props.startDate, _this.props.endDate, {
-                            dateFormat: dateFormat,
-                            locale: locale,
-                        })
-                        : _this.props.selectsMultiple
-                            ? safeMultipleDatesFormat((_c = _this.props.selectedDates) !== null && _c !== void 0 ? _c : [], {
-                                dateFormat: dateFormat,
-                                locale: locale,
-                            })
-                            : safeDateFormat(_this.props.selected, {
-                                dateFormat: dateFormat,
-                                locale: locale,
-                            });
             return cloneElement(customInput, (_b = {},
                 _b[customInputRef] = function (input) {
                     _this.input = input;
                 },
-                _b.value = inputValue,
+                _b.value = _this.getInputValue(),
                 _b.onBlur = _this.handleBlur,
                 _b.onChange = _this.handleChange,
                 _b.onClick = _this.onInputClick,
@@ -14635,7 +14763,9 @@ var DatePicker = /** @class */ (function (_super) {
                 dropdownMode: "scroll",
                 preventOpenOnFocus: false,
                 monthsShown: 1,
+                outsideClickIgnoreClass: OUTSIDE_CLICK_IGNORE_CLASS,
                 readOnly: false,
+                rangeSeparator: DATE_RANGE_SEPARATOR,
                 withPortal: false,
                 selectsDisabledDaysInRange: false,
                 shouldCloseOnSelect: true,
@@ -15148,4 +15278,4 @@ var InlineDatePicker = function (props) {
 };
 
 export { DatePickerGroup as D, HelperText as H, InlineDatePicker as I, ValidationText as V };
-//# sourceMappingURL=InlineDatePicker-ClVBWEzW.js.map
+//# sourceMappingURL=InlineDatePicker-xO3XGIcG.js.map