@ssa-ui-kit/core 2.32.0 → 2.33.0

package/dist/index.js

@@ -14975,8 +14975,8 @@ const styles_MonthsViewCell = /*#__PURE__*/base_default()("div",  true ? {
 const TriggerWrapper = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
   target: "e19l41fq0"
 } : 0)( true ? {
-  name: "1utaypi",
-  styles: "padding:14px"
+  name: "1h91tay",
+  styles: "padding:14px;cursor:default"
 } : 0);
 ;// ./src/components/DateRangePicker/utils/dates.ts
 
@@ -15068,7 +15068,6 @@ const DateRangePickerContext = /*#__PURE__*/(0,external_react_namespaceObject.cr
   nameFrom: '',
   nameTo: '',
   maskOptions: {},
-  openCalendarMode: 'icon',
   inputFromRef: {
     current: null
   },
@@ -15097,9 +15096,6 @@ const DateRangePickerContext = /*#__PURE__*/(0,external_react_namespaceObject.cr
     day: 1
   }),
   currentIndex: 0,
-  handleSetIsOpen: () => {
-    // no-op
-  },
   handleToggleOpen: () => {
     // no-op
   },
@@ -15109,6 +15105,13 @@ const DateRangePickerContext = /*#__PURE__*/(0,external_react_namespaceObject.cr
   setCalendarType: () => {
     // no-op
   },
+  rangeSelectionStep: null,
+  setRangeSelectionStep: () => {
+    // no-op
+  },
+  clearInputValue: () => {
+    // no-op
+  },
   setCalendarViewDateTime: () => {
     // no-op
   },
@@ -15117,7 +15120,8 @@ const DateRangePickerContext = /*#__PURE__*/(0,external_react_namespaceObject.cr
   },
   setLastFocusedElement: () => {
     // no-op
-  }
+  },
+  allowReverseSelection: false
 });
 ;// ./src/components/DateRangePicker/useDateRangePickerContext.tsx
 
@@ -15175,6 +15179,88 @@ const useRangeHighlighting = () => {
     hoveredDate
   };
 };
+;// ./src/components/DateRangePicker/hooks/useRangeSelection.ts
+
+const useRangeSelection = ({
+  createNewDate,
+  getComparisonFormat
+}) => {
+  const {
+    dateTime,
+    calendarViewDateTime,
+    setCalendarViewDateTime,
+    setDateTime,
+    setIsOpen,
+    setLastFocusedElement,
+    rangeSelectionStep,
+    setRangeSelectionStep,
+    clearInputValue,
+    allowReverseSelection = false,
+    onChange
+  } = useDateRangePickerContext();
+  const handleRangeSelect = selectedValue => {
+    const newDate = createNewDate(selectedValue);
+    if (!newDate) return;
+
+    // Range selection logic
+    const isSelectingStart = rangeSelectionStep === 'start';
+    if (isSelectingStart) {
+      clearInputValue('to');
+      setLastFocusedElement('to');
+      setRangeSelectionStep('end');
+    }
+    let newDateTuple = isSelectingStart ? [newDate, undefined] : [dateTime[0], newDate];
+    setCalendarViewDateTime(isSelectingStart ? [newDate, newDate] : [dateTime[0] ? calendarViewDateTime?.[0] : newDate, newDate]);
+
+    // Check if dates are in reverse order
+    const isReversed = newDateTuple[0] && newDateTuple[1] && newDateTuple[0].toMillis() > newDateTuple[1].toMillis();
+    if (isReversed) {
+      if (allowReverseSelection) {
+        // Auto-swap dates when reverse selection is allowed
+        newDateTuple = [newDateTuple[1], newDateTuple[0]];
+      } else if (!isSelectingStart) {
+        // User selected an earlier date - update start date
+        newDateTuple = [newDateTuple[1], undefined];
+        setLastFocusedElement('to');
+        setRangeSelectionStep('end');
+        setCalendarViewDateTime([newDateTuple[0], newDateTuple[0]]);
+      }
+    }
+    setDateTime(newDateTuple);
+    const normalizeToMidnight = dt => dt.set({
+      hour: 0,
+      minute: 0,
+      second: 0,
+      millisecond: 0
+    }).toJSDate();
+
+    // Call onChange when a date is selected from calendar
+    if (isSelectingStart && newDateTuple[0]) {
+      // First date selected
+      onChange?.([normalizeToMidnight(newDateTuple[0]), null]);
+    } else if (newDateTuple[0] && newDateTuple[1] && newDateTuple[0].toMillis() <= newDateTuple[1].toMillis()) {
+      // Both dates selected and in correct order
+      onChange?.([normalizeToMidnight(newDateTuple[0]), normalizeToMidnight(newDateTuple[1])]);
+      setRangeSelectionStep(null);
+      setIsOpen(false);
+    }
+  };
+  const getDateSelectionState = currentDT => {
+    const comparisonFormat = getComparisonFormat();
+    const isCalendarFirstDateSelected = currentDT.toFormat(comparisonFormat) === dateTime[0]?.toFormat(comparisonFormat);
+    const isCalendarSecondDateSelected = currentDT.toFormat(comparisonFormat) === dateTime[1]?.toFormat(comparisonFormat);
+    const isCalendarDateSelected = isCalendarFirstDateSelected || isCalendarSecondDateSelected;
+    return {
+      isCalendarFirstDateSelected,
+      isCalendarSecondDateSelected,
+      isCalendarDateSelected
+    };
+  };
+  return {
+    handleRangeSelect,
+    getDateSelectionState
+  };
+};
 ;// ./src/components/DateRangePicker/components/DaysView.tsx
 function components_DaysView_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
@@ -15201,15 +15287,9 @@ var components_DaysView_ref3 =  true ? {
 const DaysView_DaysView = () => {
   const weekDays = dates_getWeekDays();
   const {
-    dateTime,
-    calendarViewDateTime,
     dateMinDT,
     dateMaxDT,
-    lastFocusedElement,
-    currentCalendarViewDT,
-    setCalendarViewDateTime,
-    setDateTime,
-    setIsOpen
+    currentCalendarViewDT
   } = useDateRangePickerContext();
   const currentDate = currentCalendarViewDT.toJSDate();
   const currentMonth = currentDate?.getMonth();
@@ -15220,22 +15300,23 @@ const DaysView_DaysView = () => {
     getClassNames,
     isHighlightDate
   } = useRangeHighlighting();
+  const {
+    handleRangeSelect,
+    getDateSelectionState
+  } = useRangeSelection({
+    createNewDate: selectedDay => currentCalendarViewDT.set({
+      day: Number(selectedDay)
+    }),
+    getComparisonFormat: () => 'D'
+  });
   const handleDaySelect = event => {
     const {
       target
     } = event;
-    const selectedDay = Number(target.innerHTML);
+    const selectedDay = target.innerHTML;
     const isEnabled = target.getAttribute('aria-disabled') === 'false';
     if (isEnabled) {
-      const newDate = currentCalendarViewDT.set({
-        day: selectedDay
-      });
-      const newDateTuple = lastFocusedElement === 'from' ? [newDate, dateTime[1]] : [dateTime[0], newDate];
-      setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, dateTime[1] ? calendarViewDateTime?.[1] : newDate] : [dateTime[0] ? calendarViewDateTime?.[0] : newDate, newDate]);
-      setDateTime(newDateTuple);
-      if (newDateTuple[0] && newDateTuple[1]) {
-        setIsOpen(false);
-      }
+      handleRangeSelect(selectedDay);
     }
   };
   return (0,jsx_runtime_namespaceObject.jsxs)((external_react_default()).Fragment, {
@@ -15249,16 +15330,18 @@ const DaysView_DaysView = () => {
       css: components_DaysView_ref3,
       onClick: handleDaySelect,
       children: dates.map((currentDate, index) => {
-        const currentDT = external_luxon_namespaceObject.DateTime.fromJSDate(currentDate);
+        const currentDT = external_luxon_namespaceObject.DateTime.fromJSDate(currentDate).startOf('day');
         const calendarDate = currentDT.toFormat('D');
         const calendarDay = currentDate.getDate();
         const calendarMonth = currentDate.getMonth();
         const ariaLabel = currentDT.toLocaleString(external_luxon_namespaceObject.DateTime.DATE_HUGE);
         const isCalendarDateNow = nowDate === calendarDate;
         const isCalendarMonth = currentMonth === calendarMonth;
-        const isCalendarFirstDateSelected = calendarDate === dateTime[0]?.toFormat('D');
-        const isCalendarSecondDateSelected = calendarDate === dateTime[1]?.toFormat('D');
-        const isCalendarDateSelected = isCalendarFirstDateSelected || isCalendarSecondDateSelected;
+        const {
+          isCalendarFirstDateSelected,
+          isCalendarSecondDateSelected,
+          isCalendarDateSelected
+        } = getDateSelectionState(currentDT);
         let isAriaDisabled = false;
         if (dateMinDT && dateMaxDT) {
           isAriaDisabled = currentDT < dateMinDT || currentDT > dateMaxDT || !isCalendarMonth;
@@ -15307,24 +15390,36 @@ var components_MonthsView_ref =  true ? {
 } : 0;
 const MonthsView_MonthsView = () => {
   const {
-    dateTime,
-    calendarViewDateTime,
     dateMinDT,
     dateMaxDT,
     lastFocusedElement,
     currentCalendarViewDT,
+    calendarViewDateTime,
     rangePickerType,
     setCalendarType,
     setCalendarViewDateTime,
-    onMonthChange,
-    setDateTime,
-    setIsOpen
+    onMonthChange
   } = useDateRangePickerContext();
   const {
     handleDateHover,
     getClassNames,
     isHighlightDate
   } = useRangeHighlighting();
+  const {
+    handleRangeSelect,
+    getDateSelectionState
+  } = useRangeSelection({
+    createNewDate: selectedMonth => {
+      const monthNumber = constants_MONTHS.findIndex(month => month === selectedMonth);
+      const newMonth = currentCalendarViewDT?.set({
+        month: monthNumber + 1
+      });
+      return newMonth?.set({
+        day: lastFocusedElement === 'from' ? 1 : newMonth.daysInMonth
+      });
+    },
+    getComparisonFormat: () => 'yyyy-MM'
+  });
   const handleMonthSelect = event => {
     const {
       target
@@ -15335,29 +15430,20 @@ const MonthsView_MonthsView = () => {
       return;
     }
     const selectedMonth = target.innerHTML;
-    const monthNumber = constants_MONTHS.findIndex(month => month === selectedMonth);
     if (rangePickerType === 'days') {
+      // Navigation case: selecting month navigates to days view
+      const monthNumber = constants_MONTHS.findIndex(month => month === selectedMonth);
       const newDate = currentCalendarViewDT?.set({
         month: monthNumber + 1
       });
-      setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, calendarViewDateTime[1]] : [calendarViewDateTime[0], newDate]);
       if (newDate) {
+        setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, calendarViewDateTime[1]] : [calendarViewDateTime[0], newDate]);
         onMonthChange?.(newDate.toJSDate());
+        setCalendarType('days');
       }
-      setCalendarType('days');
     } else {
-      const newMonth = currentCalendarViewDT?.set({
-        month: monthNumber + 1
-      });
-      const newDate = newMonth?.set({
-        day: lastFocusedElement === 'from' ? 1 : newMonth.daysInMonth
-      });
-      const newDateTuple = lastFocusedElement === 'from' ? [newDate, dateTime[1]] : [dateTime[0], newDate];
-      setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, dateTime[1] ? calendarViewDateTime?.[1] : newDate] : [dateTime[0] ? calendarViewDateTime?.[0] : newDate, newDate]);
-      setDateTime(newDateTuple);
-      if (newDateTuple[0] && newDateTuple[1]) {
-        setIsOpen(false);
-      }
+      // Range selection case: selecting month completes the range
+      handleRangeSelect(selectedMonth);
     }
   };
   return (0,jsx_runtime_namespaceObject.jsx)(DatesListWrapper, {
@@ -15372,8 +15458,10 @@ const MonthsView_MonthsView = () => {
       const isMinMonthReached = dateMinDT ? currentMonthDT.month < dateMinDT.month && currentMonthDT.year === dateMinDT.year : false;
       const isMaxMonthReached = dateMaxDT ? currentMonthDT.month > dateMaxDT.month && currentMonthDT.year === dateMaxDT.year : false;
       const isAriaDisabled = isMinMonthReached || isMaxMonthReached;
-      const isCalendarFirstDateSelected = currentMonthDT.toFormat('yyyy-MM') === dateTime[0]?.toFormat('yyyy-MM');
-      const isCalendarSecondDateSelected = currentMonthDT.toFormat('yyyy-MM') === dateTime[1]?.toFormat('yyyy-MM');
+      const {
+        isCalendarFirstDateSelected,
+        isCalendarSecondDateSelected
+      } = getDateSelectionState(currentMonthDT);
       const classNames = getClassNames(currentMonthDT, {
         isCalendarFirstDateSelected,
         isCalendarSecondDateSelected
@@ -15409,7 +15497,6 @@ var components_YearsView_ref =  true ? {
 const YearsView_YearsView = () => {
   const {
     rangePickerType,
-    dateTime,
     calendarViewDateTime,
     currentCalendarViewDT,
     dateMinParts,
@@ -15418,9 +15505,7 @@ const YearsView_YearsView = () => {
     lastFocusedElement,
     setCalendarType,
     setCalendarViewDateTime,
-    onYearChange,
-    setDateTime,
-    setIsOpen
+    onYearChange
   } = useDateRangePickerContext();
   const wrapper = (0,external_react_namespaceObject.useRef)(null);
   const yearsList = dates_getYearsList({
@@ -15432,6 +15517,24 @@ const YearsView_YearsView = () => {
     getClassNames,
     isHighlightDate
   } = useRangeHighlighting();
+  const {
+    handleRangeSelect,
+    getDateSelectionState
+  } = useRangeSelection({
+    createNewDate: selectedYear => {
+      const newYear = currentCalendarViewDT?.set({
+        year: Number(selectedYear)
+      });
+      return newYear?.set(lastFocusedElement === 'from' ? {
+        day: 1,
+        month: 1
+      } : {
+        day: 31,
+        month: 12
+      });
+    },
+    getComparisonFormat: () => 'yyyy'
+  });
   (0,external_react_namespaceObject.useEffect)(() => {
     if (currentCalendarViewDT && wrapper.current) {
       wrapper.current.querySelector('[aria-current=date]')?.scrollIntoView({
@@ -15439,15 +15542,16 @@ const YearsView_YearsView = () => {
         block: 'center'
       });
     }
-  }, [calendarViewDateTime, lastFocusedElement]);
+  }, [calendarViewDateTime, lastFocusedElement, currentCalendarViewDT]);
   const handleYearSelect = event => {
     const {
       target
     } = event;
-    const selectedYear = Number(target.innerHTML);
+    const selectedYear = target.innerHTML;
     if (rangePickerType !== 'years') {
+      // Navigation case: selecting year navigates to months view
       const newDate = currentCalendarViewDT.set({
-        year: selectedYear
+        year: Number(selectedYear)
       });
       setCalendarType('months');
       setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, calendarViewDateTime[1]] : [calendarViewDateTime[0], newDate]);
@@ -15455,22 +15559,8 @@ const YearsView_YearsView = () => {
         onYearChange?.(newDate.toJSDate());
       }
     } else {
-      const newYear = currentCalendarViewDT?.set({
-        year: selectedYear
-      });
-      const newDate = newYear?.set(lastFocusedElement === 'from' ? {
-        day: 1,
-        month: 1
-      } : {
-        day: 31,
-        month: 12
-      });
-      const newDateTuple = lastFocusedElement === 'from' ? [newDate, dateTime[1]] : [dateTime[0], newDate];
-      setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, dateTime[1] ? calendarViewDateTime?.[1] : newDate] : [dateTime[0] ? calendarViewDateTime?.[0] : newDate, newDate]);
-      setDateTime(newDateTuple);
-      if (newDateTuple[0] && newDateTuple[1]) {
-        setIsOpen(false);
-      }
+      // Range selection case: selecting year completes the range
+      handleRangeSelect(selectedYear);
     }
   };
   return (0,jsx_runtime_namespaceObject.jsx)(DatesListWrapper, {
@@ -15488,8 +15578,10 @@ const YearsView_YearsView = () => {
       if (isCalendarYear) {
         additionalProps['aria-current'] = 'date';
       }
-      const isCalendarFirstDateSelected = year.toString() === dateTime[0]?.toFormat('yyyy');
-      const isCalendarSecondDateSelected = year.toString() === dateTime[1]?.toFormat('yyyy');
+      const {
+        isCalendarFirstDateSelected,
+        isCalendarSecondDateSelected
+      } = getDateSelectionState(currentYearDT);
       const classNames = getClassNames(currentYearDT, {
         isCalendarFirstDateSelected,
         isCalendarSecondDateSelected
@@ -15829,24 +15921,9 @@ function TriggerInput_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried
 
 
 
-const WithTriggerPopover = ({
-  isEnabled,
-  children
-}) => {
-  return isEnabled ? (0,jsx_runtime_namespaceObject.jsx)(PopoverTrigger, {
-    asChild: true,
-    children: /*#__PURE__*/external_react_default().cloneElement(children, {
-      ...children.props
-    })
-  }) : (/*#__PURE__*/external_react_default().cloneElement(children, {
-    ...children.props
-  }));
-};
 const TriggerInput = ({
   datepickerType,
-  withPopover = false,
-  className,
-  onClick
+  className
 }) => {
   const {
     format,
@@ -15859,7 +15936,9 @@ const TriggerInput = ({
     messages,
     setLastFocusedElement,
     classNames,
-    onBlur: handleBlur
+    onBlur: handleBlur,
+    isOpen,
+    setIsOpen
   } = useDateRangePickerContext();
   const formContext = (0,external_react_hook_form_namespaceObject.useFormContext)(); // Using FormProvider from react-hook-form
   const useFormResult = (0,external_react_hook_form_namespaceObject.useForm)();
@@ -15881,42 +15960,55 @@ const TriggerInput = ({
     setLastFocusedElement(datepickerType);
     inputProps?.inputProps?.onFocus?.(e);
   };
-  const handleOpen = event => {
-    onClick?.(event);
-  };
-  return (0,jsx_runtime_namespaceObject.jsx)(WithTriggerPopover, {
-    isEnabled: withPopover,
-    children: (0,jsx_runtime_namespaceObject.jsx)(Input_Input, {
-      name: currentName,
-      placeholder: format,
-      ref: datepickerType === 'from' ? inputFromRef : inputToRef,
-      disabled: disabled,
-      register: register,
-      className: className,
-      wrapperClassName: /*#__PURE__*/(0,css_namespaceObject.css)("display:flex;padding-left:", datepickerType === 'from' ? 0 : 14, "px;" + ( true ? "" : 0),  true ? "" : 0),
-      inputProps: {
-        onBlur: handleBlur,
-        onClick: handleOpen,
-        onFocus: handleFocus,
-        id: inputProps?.inputProps?.id || currentName,
-        'data-testid': `daterangepicker-input-${datepickerType}`,
-        autoComplete: 'off',
-        className: [/*#__PURE__*/(0,css_namespaceObject.css)( true ? {
-          name: "15obm9d",
-          styles: "border:none!important;height:auto!important;padding:0!important;min-width:75px;line-height:16px;max-height:16px;letter-spacing:0.8px;border-radius:0!important;&::placeholder{letter-spacing:normal;}"
-        } : 0), datepickerType === 'from' ? classNames?.trigger?.inputFrom : classNames?.trigger?.inputTo].filter(Boolean).join(' '),
-        ...inputElementProps
+  return (0,jsx_runtime_namespaceObject.jsx)(Input_Input, {
+    name: currentName,
+    placeholder: format,
+    ref: datepickerType === 'from' ? inputFromRef : inputToRef,
+    disabled: disabled,
+    register: register,
+    className: className,
+    wrapperClassName: /*#__PURE__*/(0,css_namespaceObject.css)("display:flex;padding-left:", datepickerType === 'from' ? 0 : 14, "px;" + ( true ? "" : 0),  true ? "" : 0),
+    inputProps: {
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onClick: e => {
+        if (isOpen) {
+          setIsOpen(false);
+        }
+        inputProps?.inputProps?.onClick?.(e);
       },
-      showStatusIcon: false,
-      errors: fieldError,
-      status: fieldStatus,
-      helperText: fieldStatus === 'basic' ? messages?.description : messages?.error,
-      helperClassName: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
-        name: "lhoo11",
-        styles: "&>span::first-letter{text-transform:uppercase;}"
-      } : 0),
-      ...restInputProps
-    })
+      onKeyDown: e => {
+        inputProps?.inputProps?.onKeyDown?.(e);
+      },
+      onBeforeInput: e => {
+        // pass-through
+        inputProps?.inputProps?.onBeforeInput?.(e);
+      },
+      onInput: e => {
+        // pass-through
+        inputProps?.inputProps?.onInput?.(e);
+      },
+      onChange: e => {
+        inputProps?.inputProps?.onChange?.(e);
+      },
+      id: inputProps?.inputProps?.id || currentName,
+      'data-testid': `daterangepicker-input-${datepickerType}`,
+      autoComplete: 'off',
+      className: [/*#__PURE__*/(0,css_namespaceObject.css)( true ? {
+        name: "15obm9d",
+        styles: "border:none!important;height:auto!important;padding:0!important;min-width:75px;line-height:16px;max-height:16px;letter-spacing:0.8px;border-radius:0!important;&::placeholder{letter-spacing:normal;}"
+      } : 0), datepickerType === 'from' ? classNames?.trigger?.inputFrom : classNames?.trigger?.inputTo].filter(Boolean).join(' '),
+      ...inputElementProps
+    },
+    showStatusIcon: false,
+    errors: fieldError,
+    status: fieldStatus,
+    helperText: fieldStatus === 'basic' ? messages?.description : messages?.error,
+    helperClassName: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
+      name: "lhoo11",
+      styles: "&>span::first-letter{text-transform:uppercase;}"
+    } : 0),
+    ...restInputProps
   });
 };
 ;// ./src/components/Field/FieldDescription.tsx
@@ -16016,8 +16108,8 @@ function Trigger_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to st
 
 
 var Trigger_ref =  true ? {
-  name: "1ldd2k6",
-  styles: "margin:0 3px"
+  name: "cx8u11",
+  styles: "margin:0 3px;cursor:pointer"
 } : 0;
 const Trigger = () => {
   const {
@@ -16027,7 +16119,6 @@ const Trigger = () => {
     lastFocusedElement,
     disabled,
     status,
-    openCalendarMode,
     isOpen,
     showCalendarIcon,
     showStatusArea,
@@ -16060,49 +16151,46 @@ const Trigger = () => {
         ref: wrapperRef,
         className: classNames?.trigger?.controlsWrapper,
         children: [(0,jsx_runtime_namespaceObject.jsx)(TriggerInput, {
-          withPopover: true,
           datepickerType: "from",
-          className: classNames?.trigger?.inputFrom,
-          onClick: () => {
-            if (!isOpen) {
-              setIsOpen(true);
-            }
-          }
+          className: classNames?.trigger?.inputFrom
         }), (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
           name: "carrot-right",
           size: 16,
           color: disabled ? theme.colors.grey : theme.colors.greyDarker,
           className: classNames?.trigger?.arrowIcon,
+          onClick: () => {
+            if (isOpen) {
+              setIsOpen(false);
+            }
+          },
           css: Trigger_ref
         }), (0,jsx_runtime_namespaceObject.jsx)(TriggerInput, {
           datepickerType: "to",
-          className: classNames?.trigger?.inputTo,
-          onClick: () => {
-            if (!isOpen) {
-              setIsOpen(true);
-            }
-          }
-        }), showCalendarIcon && (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
-          endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
-            name: "calendar",
-            size: 16,
-            color: disabled ? theme.colors.grey : theme.colors.greyDarker
-          }),
-          "data-testid": 'daterangepicker-button',
-          onClick: handleToggleOpen,
-          variant: "tertiary",
-          "aria-label": "Calendar",
-          isDisabled: disabled,
-          className: classNames?.trigger?.calendarIcon,
-          css: /*#__PURE__*/(0,react_namespaceObject.css)({
-            padding: 0,
-            margin: '0 0 0 10px',
-            height: 'auto',
-            cursor: openCalendarMode === 'input' || disabled ? 'default' : 'pointer',
-            '&:focus::before': {
-              display: 'none'
-            }
-          },  true ? "" : 0,  true ? "" : 0)
+          className: classNames?.trigger?.inputTo
+        }), showCalendarIcon && (0,jsx_runtime_namespaceObject.jsx)(PopoverTrigger, {
+          asChild: true,
+          children: (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+            endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+              name: "calendar",
+              size: 16,
+              color: disabled ? theme.colors.grey : theme.colors.greyDarker
+            }),
+            "data-testid": 'daterangepicker-button',
+            onClick: handleToggleOpen,
+            variant: "tertiary",
+            "aria-label": "Calendar",
+            isDisabled: disabled,
+            className: classNames?.trigger?.calendarIcon,
+            css: /*#__PURE__*/(0,react_namespaceObject.css)({
+              padding: 0,
+              margin: '0 0 0 10px',
+              height: 'auto',
+              cursor: disabled ? 'default' : 'pointer',
+              '&:focus::before': {
+                display: 'none'
+              }
+            },  true ? "" : 0,  true ? "" : 0)
+          })
         })]
       })
     }), showStatusArea && (0,jsx_runtime_namespaceObject.jsx)(TriggerStatusArea, {})]
@@ -16127,12 +16215,8 @@ const Content_DatePickerContent = () => {
 };
 ;// ./src/components/DateRangePicker/hooks/useDatePickerMask.tsx
 
-
 const useDatePickerMask_useDatePickerMask = ({
-  maskOptions,
-  formatIndexes,
-  dateMinParts,
-  dateMaxParts
+  maskOptions
 }) => {
   const {
     mask,
@@ -16145,28 +16229,13 @@ const useDatePickerMask_useDatePickerMask = ({
     mask,
     replacement,
     track: ({
-      data,
-      selectionStart,
-      selectionEnd,
-      value: currentValue
+      data
     }) => {
-      const isDateMask = typeof mask === 'string' && /^[_/]+$/.test(mask);
-      if (isDateMask) {
-        const newValue = currentValue.slice(0, selectionStart) + data + currentValue.slice(selectionEnd);
-        const updatedValue = (0,mask_namespaceObject.format)(newValue, {
-          mask,
-          replacement
-        });
-        const splittedValue = updatedValue.split('/');
-        const isChecked = dates_processDate({
-          day: splittedValue[formatIndexes['day']],
-          month: splittedValue[formatIndexes['month']],
-          year: splittedValue[formatIndexes['year']]
-        }, dateMinParts[formatIndexes['year']], dateMaxParts[formatIndexes['year']]);
-        return isChecked ? data : '';
-      } else {
-        return data;
-      }
+      // The mask should only format input, not validate it
+      // Validation happens on blur in useDateRangePicker.handleBlur
+      // This allows users to freely type and edit dates without blocking
+      // Return data as-is (string for insertions, null/undefined for deletions)
+      return data;
     },
     ...restMaskOptions
   });
@@ -16208,15 +16277,12 @@ const useDateRangePicker = ({
   const [isOpen, setIsOpen] = (0,external_react_namespaceObject.useState)(isOpenState);
   const [status, setStatus] = (0,external_react_namespaceObject.useState)(rest.status);
   const previousOpenState = (0,external_react_namespaceObject.useRef)(isOpenState);
-  const handleSetIsOpen = open => {
-    setIsOpen(open);
-  };
+  const previousDateTime = (0,external_react_namespaceObject.useRef)([undefined, undefined]);
+  const defaultValueProcessed = (0,external_react_namespaceObject.useRef)(false);
   const {
     clearErrors,
     setError,
-    setValue,
-    resetField,
-    setFocus
+    setValue
   } = (0,external_react_hook_form_namespaceObject.useFormContext)();
   const nameFrom = `${_name}From`;
   const nameTo = `${_name}To`;
@@ -16230,7 +16296,6 @@ const useDateRangePicker = ({
   const [lastChangedDate, setLastChangedDate] = (0,external_react_namespaceObject.useState)([undefined, undefined]);
   const [lastFocusedElement, setLastFocusedElement] = (0,external_react_namespaceObject.useState)('from');
   const currentIndex = lastFocusedElement === 'from' ? 0 : 1;
-  const currentName = lastFocusedElement === 'from' ? nameFrom : nameTo;
   const [dateTimeForChangeEvent, setDateTimeForChangeEvent] = (0,external_react_namespaceObject.useState)(undefined);
   const [currentError, setCurrentError] = (0,external_react_namespaceObject.useState)({
     date: null,
@@ -16243,6 +16308,7 @@ const useDateRangePicker = ({
     year: splittedFormat.findIndex(item => item === 'yyyy')
   });
   const [calendarType, setCalendarType] = (0,external_react_namespaceObject.useState)(rangePickerType);
+  const [rangeSelectionStep, setRangeSelectionStep] = (0,external_react_namespaceObject.useState)(null);
   const [calendarViewDateTime, setCalendarViewDateTime] = (0,external_react_namespaceObject.useState)([undefined, undefined]);
   const currentCalendarViewDT = calendarViewDateTime[currentIndex] || external_luxon_namespaceObject.DateTime.now().set({
     day: 1
@@ -16252,14 +16318,18 @@ const useDateRangePicker = ({
   const dateMinParts = finalDateMin.split('/').map(Number);
   const dateMaxParts = finalDateMax.split('/').map(Number);
   const defaultMask = getMaskForFormat(format);
-  const maskInputRef = useDatePickerMask_useDatePickerMask({
+  // separate mask refs per input to prevent focus/typing conflicts
+  const maskInputRefFrom = useDatePickerMask_useDatePickerMask({
     maskOptions: {
       mask: defaultMask,
-      ...maskOptions
-    },
-    dateMaxParts,
-    dateMinParts,
-    formatIndexes
+      ...(maskOptions || {})
+    }
+  });
+  const maskInputRefTo = useDatePickerMask_useDatePickerMask({
+    maskOptions: {
+      mask: defaultMask,
+      ...(maskOptions || {})
+    }
   });
   const dateMaxDT = external_luxon_namespaceObject.DateTime.fromObject({
     year: dateMaxParts[formatIndexes['year']],
@@ -16313,7 +16383,7 @@ const useDateRangePicker = ({
       setError(currentName, {
         message: errorMessage
       }, {
-        shouldFocus: true
+        shouldFocus: false
       });
       setStatus('error');
       setDateTime(newDateTimeIfInvalid);
@@ -16325,7 +16395,7 @@ const useDateRangePicker = ({
         setError(currentName, {
           message: errorMessage
         }, {
-          shouldFocus: true
+          shouldFocus: false
         });
         setStatus('error');
         setDateTime(newDateTimeIfInvalid);
@@ -16333,6 +16403,33 @@ const useDateRangePicker = ({
         safeOnChange();
       } else {
         setDateTime(newDateTimeIfValid);
+        // Update calendar view to reflect the manually entered date
+        let adjustedDateTime = newDateTime.startOf('day');
+        if (adjustedDateTime < dateMinDT) {
+          const {
+            year,
+            month,
+            day
+          } = dateMinDT;
+          adjustedDateTime = adjustedDateTime.set({
+            year,
+            month,
+            day
+          });
+        }
+        if (adjustedDateTime > dateMaxDT) {
+          const {
+            year,
+            month,
+            day
+          } = dateMaxDT;
+          adjustedDateTime = adjustedDateTime.set({
+            year,
+            month,
+            day
+          });
+        }
+        setCalendarViewDateTime(currentElementType === 'from' ? [adjustedDateTime, calendarViewDateTime[1] || adjustedDateTime] : [calendarViewDateTime[0] || adjustedDateTime, adjustedDateTime]);
         clearErrors();
         setStatus('basic');
         safeOnError?.(null);
@@ -16341,26 +16438,35 @@ const useDateRangePicker = ({
     }
   };
   const handleBlur = event => {
-    event.preventDefault();
     const blurredValue = event.currentTarget.value;
+    const fieldName = event.currentTarget.name;
+    const isFromField = fieldName === nameFrom;
     if (blurredValue.length > 0) {
-      processValue(blurredValue);
+      processValue(blurredValue, isFromField ? 'from' : 'to');
+    } else {
+      // User cleared the field - clear the corresponding dateTime
+      setDateTime(prev => isFromField ? [undefined, prev[1]] : [prev[0], undefined]);
+      setLastChangedDate(prev => isFromField ? [undefined, prev[1]] : [prev[0], undefined]);
+      setValue(fieldName, undefined);
+      clearErrors(fieldName);
     }
   };
   const processInputValue = (inputValue, elementName) => {
     const currentElementType = elementName || lastFocusedElement;
     const currentName = currentElementType === 'from' ? nameFrom : nameTo;
+    const currentWatchedValue = currentElementType === 'from' ? inputValueFrom : inputValueTo;
     if (typeof inputValue === 'string' && inputValue.length && inputValue.length < expectedDateLength) {
       setIsOpen(false);
-      setTimeout(() => {
-        maskInputRef.current.focus();
-      }, 10);
     }
     let newDateTime;
     if (typeof inputValue === 'string' && inputValue.length === expectedDateLength) {
       newDateTime = external_luxon_namespaceObject.DateTime.fromFormat(inputValue, luxonFormat);
-      setValue(currentName, inputValue);
-      processValue(inputValue, elementName);
+      // Avoid redundant setValue to prevent React Hook Form update loops
+      if (currentWatchedValue !== inputValue) {
+        setValue(currentName, inputValue);
+      }
+      // Do NOT validate immediately here to avoid blocking mid-edit scenarios and feedback loops.
+      // Validation will happen on blur explicitly.
     }
     const newCalendarViewDateTime = newDateTime && newDateTime.isValid ? newDateTime : undefined;
     if (newCalendarViewDateTime) {
@@ -16408,56 +16514,95 @@ const useDateRangePicker = ({
     }
   }, [inputValueTo]);
   (0,external_react_namespaceObject.useEffect)(() => {
-    const currentIndex = lastFocusedElement === 'from' ? 0 : 1;
-    const currentInputValue = currentIndex === 0 ? inputValueFrom : inputValueTo;
-    if (dateTime?.[currentIndex]) {
-      const newValue = dateTime[currentIndex].toFormat(luxonFormat);
-      if (currentInputValue !== newValue) {
-        setValue(currentName, newValue);
+    // Only sync when dateTime actually changes (from calendar selection or programmatic change)
+    // Don't sync when only inputValue changes (user typing)
+    const dateTimeChanged = previousDateTime.current[0]?.toMillis() !== dateTime[0]?.toMillis() || previousDateTime.current[1]?.toMillis() !== dateTime[1]?.toMillis();
+
+    // Initialize on first run
+    if (previousDateTime.current[0] === undefined && previousDateTime.current[1] === undefined && (dateTime[0] !== undefined || dateTime[1] !== undefined)) {
+      previousDateTime.current = [dateTime[0], dateTime[1]];
+      // Continue to sync on initialization
+    } else if (!dateTimeChanged) {
+      // dateTime hasn't changed, don't sync (user is typing)
+      return;
+    } else {
+      // Update previous dateTime
+      previousDateTime.current = [dateTime[0], dateTime[1]];
+    }
+    const nextFromValue = dateTime[0]?.toFormat(luxonFormat);
+    if (nextFromValue) {
+      // Sync dateTime to form when dateTime changed (calendar selection)
+      // Don't overwrite if user is actively typing (input is focused and partial)
+      const isInputFocused = inputFromRef.current && document.activeElement === inputFromRef.current || inputToRef.current && document.activeElement === inputToRef.current;
+      if (!inputValueFrom) {
+        // Input is empty - sync from dateTime
+        setValue(nameFrom, nextFromValue);
+      } else if (inputValueFrom === nextFromValue) {
+        // Already in sync - no action needed
+      } else if (inputValueFrom.length < expectedDateLength && isInputFocused) {
+        // User is actively typing partial input - don't overwrite
+      } else {
+        // dateTime changed (calendar selection) - sync to form
+        setValue(nameFrom, nextFromValue);
+      }
+    }
+    const nextToValue = dateTime[1]?.toFormat(luxonFormat);
+    if (nextToValue) {
+      // Sync dateTime to form when dateTime changed (calendar selection)
+      // Don't overwrite if user is actively typing (input is focused and partial)
+      const isInputFocused = inputFromRef.current && document.activeElement === inputFromRef.current || inputToRef.current && document.activeElement === inputToRef.current;
+      if (!inputValueTo) {
+        // Input is empty - sync from dateTime
+        setValue(nameTo, nextToValue);
+      } else if (inputValueTo === nextToValue) {
+        // Already in sync - no action needed
+      } else if (inputValueTo.length < expectedDateLength && isInputFocused) {
+        // User is actively typing partial input - don't overwrite
+      } else {
+        // dateTime changed (calendar selection) - sync to form
+        setValue(nameTo, nextToValue);
       }
     }
-  }, [dateTime, lastFocusedElement, currentName]);
+  }, [dateTime, inputValueFrom, inputValueTo, luxonFormat, nameFrom, nameTo, setValue, expectedDateLength, inputFromRef, inputToRef]);
   (0,external_react_namespaceObject.useEffect)(() => {
     if (dateTime[0] && dateTime[1] && dateTime[0] > dateTime[1]) {
+      // When dates are in reverse order, swap them silently
+      // Calendar only opens via user click on icon button, not automatically
       if (lastFocusedElement === 'from') {
-        resetField(nameTo);
         setDateTime([dateTime[0], undefined]);
         setLastChangedDate([dateTime[0].toJSDate(), undefined]);
         setValue(nameTo, undefined);
-        setLastFocusedElement('to');
-        setTimeout(() => {
-          setFocus(nameTo, {
-            shouldSelect: true
-          });
-        }, 50);
-        setIsOpen(true);
       } else {
-        resetField(nameFrom);
         setDateTime([undefined, dateTime[1]]);
         setLastChangedDate([undefined, dateTime[1].toJSDate()]);
         setValue(nameFrom, undefined);
-        setLastFocusedElement('from');
-        setTimeout(() => {
-          setFocus(nameFrom, {
-            shouldSelect: true
-          });
-        }, 50);
-        setIsOpen(true);
       }
     }
-  }, [dateTime]);
+  }, [dateTime, lastFocusedElement, nameFrom, nameTo, setValue]);
   (0,external_react_namespaceObject.useEffect)(() => {
     if (previousOpenState.current !== isOpen) {
       if (isOpen) {
         onOpen?.();
+        setRangeSelectionStep('start');
+        setLastFocusedElement('from');
+        // Sync calendar view with current dateTime when opening
+        // This ensures preselected dates are visible in the calendar
+        if (dateTime[0] || dateTime[1]) {
+          setCalendarViewDateTime([dateTime[0] || dateTime[1] || external_luxon_namespaceObject.DateTime.now().set({
+            day: 1
+          }), dateTime[1] || dateTime[0] || external_luxon_namespaceObject.DateTime.now().set({
+            day: 1
+          })]);
+        }
       } else {
         onClose?.();
+        setRangeSelectionStep(null);
         setCalendarType(rangePickerType);
         setCalendarViewDateTime([dateTime[0], dateTime[1]]);
       }
       previousOpenState.current = isOpen;
     }
-  }, [isOpen]);
+  }, [isOpen, dateTime, rangePickerType, onOpen, onClose]);
   (0,external_react_namespaceObject.useEffect)(() => {
     const splittedFormat = format.split('/');
     setFormatIndexes({
@@ -16484,27 +16629,18 @@ const useDateRangePicker = ({
     if (Array.isArray(rest.value)) {
       const newDateTimeFrom = typeof rest.value[0] === 'string' && rest.value[0].length === expectedDateLength ? external_luxon_namespaceObject.DateTime.fromFormat(rest.value[0], luxonFormat) : undefined;
       const newDateTimeTo = typeof rest.value[1] === 'string' && rest.value[1].length === expectedDateLength ? external_luxon_namespaceObject.DateTime.fromFormat(rest.value[1], luxonFormat) : undefined;
-      const newDateTime = [newDateTimeFrom?.isValid ? newDateTimeFrom : undefined, newDateTimeTo?.isValid ? newDateTimeTo : undefined];
+      const newDateTime = [newDateTimeFrom?.isValid ? newDateTimeFrom.startOf('day') : undefined, newDateTimeTo?.isValid ? newDateTimeTo.startOf('day') : undefined];
       setDateTime(newDateTime);
       setLastChangedDate([newDateTime[0]?.toJSDate(), newDateTime[1]?.toJSDate()]);
+      // Sync calendar view with the new dates so they're visible when calendar opens
+      setCalendarViewDateTime([newDateTime[0] || newDateTime[1] || undefined, newDateTime[1] || newDateTime[0] || undefined]);
       setValue(nameFrom, newDateTime[0]?.toFormat(luxonFormat));
       setValue(nameTo, newDateTime[1]?.toFormat(luxonFormat));
     }
-  }, [rest.value]);
+  }, [rest.value, expectedDateLength, luxonFormat, nameFrom, nameTo, setValue, _name]);
   (0,external_react_namespaceObject.useEffect)(() => {
     setStatus(rest.status);
   }, [rest.status]);
-  (0,external_react_namespaceObject.useEffect)(() => {
-    if (lastChangedDate[0] || lastChangedDate[1]) {
-      if (lastFocusedElement === 'from' && !lastChangedDate[1]) {
-        setFocus(nameTo);
-      }
-      if (lastFocusedElement === 'to' && !lastChangedDate[0]) {
-        setFocus(nameFrom);
-        inputFromRef.current?.focus();
-      }
-    }
-  }, [lastChangedDate]);
   (0,external_react_namespaceObject.useEffect)(() => {
     if (calendarViewDateTime[0] && !calendarViewDateTime[1]) {
       setCalendarViewDateTime([calendarViewDateTime[0], calendarViewDateTime[0]]);
@@ -16519,11 +16655,20 @@ const useDateRangePicker = ({
     }
   }, [isOpenState]);
   (0,external_react_namespaceObject.useEffect)(() => {
-    if (defaultValue) {
-      setValue(nameFrom, defaultValue[0]);
-      setValue(nameTo, defaultValue[1]);
+    // Only process defaultValue once on mount to avoid re-processing
+    if (Array.isArray(defaultValue) && !defaultValueProcessed.current) {
+      const defaultDateTimeFrom = typeof defaultValue[0] === 'string' && defaultValue[0].length === expectedDateLength ? external_luxon_namespaceObject.DateTime.fromFormat(defaultValue[0], luxonFormat) : undefined;
+      const defaultDateTimeTo = typeof defaultValue[1] === 'string' && defaultValue[1].length === expectedDateLength ? external_luxon_namespaceObject.DateTime.fromFormat(defaultValue[1], luxonFormat) : undefined;
+      const newDateTime = [defaultDateTimeFrom?.isValid ? defaultDateTimeFrom.startOf('day') : undefined, defaultDateTimeTo?.isValid ? defaultDateTimeTo.startOf('day') : undefined];
+      setDateTime(newDateTime);
+      setLastChangedDate([newDateTime[0]?.toJSDate(), newDateTime[1]?.toJSDate()]);
+      // Sync calendar view with default dates so they're visible when calendar opens
+      setCalendarViewDateTime([newDateTime[0] || newDateTime[1] || undefined, newDateTime[1] || newDateTime[0] || undefined]);
+      setValue(nameFrom, newDateTime[0]?.toFormat(luxonFormat));
+      setValue(nameTo, newDateTime[1]?.toFormat(luxonFormat));
+      defaultValueProcessed.current = true;
     }
-  }, []);
+  }, [defaultValue, expectedDateLength, luxonFormat, nameFrom, nameTo, setCalendarViewDateTime, setValue, _name]);
   return {
     formatIndexes,
     dateMinParts,
@@ -16534,7 +16679,6 @@ const useDateRangePicker = ({
     inputValueFrom,
     inputValueTo,
     calendarViewDateTime,
-    maskInputRef,
     calendarType,
     lastChangedDate,
     luxonFormat,
@@ -16545,16 +16689,24 @@ const useDateRangePicker = ({
     currentCalendarViewDT,
     isOpen,
     status,
-    inputFromRef: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([maskInputRef, inputFromRef]),
-    inputToRef: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([maskInputRef, inputToRef]),
+    inputFromRef: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([maskInputRefFrom, inputFromRef]),
+    inputToRef: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([maskInputRefTo, inputToRef]),
     setIsOpen,
-    handleSetIsOpen,
     setLastFocusedElement,
     safeOnChange,
     setCalendarType,
     setCalendarViewDateTime,
     setDateTime,
-    handleBlur
+    handleBlur,
+    rangeSelectionStep,
+    setRangeSelectionStep,
+    clearInputValue: field => {
+      const targetName = field === 'from' ? nameFrom : nameTo;
+      clearErrors(targetName);
+      setValue(targetName, undefined);
+      setDateTime(prev => field === 'from' ? [undefined, prev[1]] : [prev[0], undefined]);
+      setLastChangedDate(prev => field === 'from' ? [undefined, prev[1]] : [prev[0], undefined]);
+    }
   };
 };
 ;// ./src/components/DateRangePicker/DateRangePickerProvider.tsx
@@ -16583,7 +16735,7 @@ const DateRangePickerProvider = ({
   };
   const handleToggleOpen = e => {
     const tagName = e.currentTarget.tagName.toLowerCase();
-    if (rest.openCalendarMode === 'both' || rest.openCalendarMode === 'input' && tagName === 'input' || rest.openCalendarMode === 'icon' && tagName === 'button') {
+    if (tagName === 'button') {
       toggleOpen();
     }
     if (tagName === 'input' && rest.inputProps?.inputProps?.onClick) {
@@ -16610,7 +16762,6 @@ const DateRangePickerProvider = ({
 
 const DateRangePicker = ({
   format,
-  openCalendarMode = 'icon',
   showCalendarIcon = true,
   showStatusArea = true,
   rangePickerType = 'days',
@@ -16619,7 +16770,6 @@ const DateRangePicker = ({
   const actualFormat = format || getFormatForRangePickerType(rangePickerType);
   return (0,jsx_runtime_namespaceObject.jsx)(DateRangePickerProvider, {
     format: actualFormat,
-    openCalendarMode: openCalendarMode,
     showCalendarIcon: showCalendarIcon,
     showStatusArea: showStatusArea,
     rangePickerType: rangePickerType,