impact-ui 4.0.1-alpha.2 → 4.0.1-alpha.21

package/dist/components/DateRangePicker/dateRangePickerInput.js

@@ -1,39 +1,30 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect } from "react";
 import moment from "moment";
 import { getAssetUrl } from "../../utils/assetBase.js";
 const calendarIcon = getAssetUrl("icons/calendar.svg");
-const NUMBER_POSITIONS = [0, 1, 3, 4, 6, 7, 8, 9];
-const FORMAT_MAP = {
-  "DD-MM-YYYY": { day: [0, 2], month: [3, 5], year: [6, 10] },
-  "MM-DD-YYYY": { day: [3, 5], month: [0, 2], year: [6, 10] },
-  "YYYY-MM-DD": { day: [8, 10], month: [5, 7], year: [0, 4] }
-};
 function DateRangePickerInput({
-  id,
-  "data-testid": dataTestId,
   inputContainerRef,
-  startDateString = "",
-  onStartDateFocus,
+  startDateString,
   startDateInputRef,
   startDateInputProps,
-  endDateString = "",
-  onEndDateFocus,
+  endDateString,
   endDateInputRef,
   endDateInputProps,
   isDisabled,
   isError,
-  isOpen = false,
+  onStartDateFocus,
+  onEndDateFocus,
   displayFormat = "DD-MM-YYYY",
   onStartDateStringChange,
   onEndDateStringChange,
   minDate,
   maxDate,
-  readOnly = false,
+  readOnly,
   isOutsideRange,
   onErrorStateChange,
-  clearErrorsTrigger = 0,
-  resetTrigger = 0,
+  clearErrorsTrigger,
+  resetTrigger,
   customIcon
 }) {
   const [startInputValue, setStartInputValue] = useState("");
@@ -42,12 +33,42 @@ function DateRangePickerInput({
   const [endErrorState, setEndErrorState] = useState(false);
   const [startPendingCursorPosition, setStartPendingCursorPosition] = useState(null);
   const [endPendingCursorPosition, setEndPendingCursorPosition] = useState(null);
+  const NUMBER_POSITIONS = [0, 1, 3, 4, 6, 7, 8, 9];
+  useEffect(() => {
+    if (startPendingCursorPosition !== null && startDateInputRef.current) {
+      startDateInputRef.current.setSelectionRange(
+        startPendingCursorPosition,
+        startPendingCursorPosition
+      );
+      setStartPendingCursorPosition(null);
+    }
+  }, [startInputValue, startPendingCursorPosition]);
+  useEffect(() => {
+    if (endPendingCursorPosition !== null && endDateInputRef.current) {
+      endDateInputRef.current.setSelectionRange(endPendingCursorPosition, endPendingCursorPosition);
+      setEndPendingCursorPosition(null);
+    }
+  }, [endInputValue, endPendingCursorPosition]);
   useEffect(() => {
-    setStartInputValue(startDateString ?? "");
+    if (startDateString) {
+      setStartInputValue(startDateString);
+    } else {
+      setStartInputValue("");
+    }
   }, [startDateString]);
   useEffect(() => {
-    setEndInputValue(endDateString ?? "");
+    if (endDateString) {
+      setEndInputValue(endDateString);
+    } else {
+      setEndInputValue("");
+    }
   }, [endDateString]);
+  useEffect(() => {
+    const hasErrors = startErrorState || endErrorState;
+    if (onErrorStateChange) {
+      onErrorStateChange(hasErrors);
+    }
+  }, [startErrorState, endErrorState, onErrorStateChange]);
   useEffect(() => {
     if (clearErrorsTrigger > 0) {
       setStartErrorState(false);
@@ -64,275 +85,299 @@ function DateRangePickerInput({
       onEndDateStringChange == null ? void 0 : onEndDateStringChange(null);
     }
   }, [resetTrigger]);
-  useEffect(() => {
-    const hasErrors = startErrorState || endErrorState;
-    onErrorStateChange == null ? void 0 : onErrorStateChange(hasErrors);
-  }, [startErrorState, endErrorState, onErrorStateChange]);
-  useEffect(() => {
-    if (startPendingCursorPosition != null && startDateInputRef.current) {
-      startDateInputRef.current.setSelectionRange(
-        startPendingCursorPosition,
-        startPendingCursorPosition
-      );
-      setStartPendingCursorPosition(null);
+  const validateDate = (date, isStartDate) => {
+    if (!date) return false;
+    if (minDate && moment(date).isBefore(minDate, "day")) {
+      return false;
     }
-  }, [startInputValue, startPendingCursorPosition, startDateInputRef]);
-  useEffect(() => {
-    if (endPendingCursorPosition != null && endDateInputRef.current) {
-      endDateInputRef.current.setSelectionRange(endPendingCursorPosition, endPendingCursorPosition);
-      setEndPendingCursorPosition(null);
+    if (maxDate && moment(date).isAfter(maxDate, "day")) {
+      return false;
     }
-  }, [endInputValue, endPendingCursorPosition, endDateInputRef]);
-  const validateDate = useCallback(
-    (date, isStartDate) => {
-      if (minDate != null && date.isBefore(minDate, "day")) return false;
-      if (maxDate != null && date.isAfter(maxDate, "day")) return false;
-      const formatInfo = FORMAT_MAP[displayFormat] ?? FORMAT_MAP["DD-MM-YYYY"];
-      if (!formatInfo) return false;
-      const inputVal = isStartDate ? startInputValue : endInputValue;
-      const day = parseInt(inputVal.substring(formatInfo.day[0], formatInfo.day[1]), 10) || 0;
-      const month = parseInt(inputVal.substring(formatInfo.month[0], formatInfo.month[1]), 10) || 0;
-      const year = parseInt(inputVal.substring(formatInfo.year[0], formatInfo.year[1]), 10) || 0;
-      if (month < 1 || month > 12) return false;
-      const lastDay = moment(`${year}-${month}`, "YYYY-M").daysInMonth();
-      if (day < 1 || day > lastDay) return false;
-      if (isStartDate && endInputValue) {
-        const endDateParsed = moment(endInputValue, displayFormat, true);
-        if (endDateParsed.isValid() && date.isAfter(endDateParsed, "day")) return false;
+    const inputValue = isStartDate ? startInputValue : endInputValue;
+    const format = displayFormat || "DD-MM-YYYY";
+    const formatMap = {
+      "DD-MM-YYYY": { day: [0, 2], month: [3, 5], year: [6, 10] },
+      "MM-DD-YYYY": { day: [3, 5], month: [0, 2], year: [6, 10] },
+      "YYYY-MM-DD": { day: [8, 10], month: [5, 7], year: [0, 4] }
+    };
+    const formatInfo = formatMap[format] || formatMap["DD-MM-YYYY"];
+    const day = parseInt(inputValue.substring(formatInfo.day[0], formatInfo.day[1]));
+    const month = parseInt(inputValue.substring(formatInfo.month[0], formatInfo.month[1]));
+    const year = parseInt(inputValue.substring(formatInfo.year[0], formatInfo.year[1]));
+    if (month < 1 || month > 12) {
+      return false;
+    }
+    const lastDayOfMonth = moment(`${year}-${month}`, "YYYY-M").daysInMonth();
+    if (day < 1 || day > lastDayOfMonth) {
+      return false;
+    }
+    if (isStartDate && endInputValue) {
+      const endDate = moment(endInputValue, displayFormat, true);
+      if (endDate.isValid() && moment(date).isAfter(endDate, "day")) {
+        return false;
       }
-      if (!isStartDate && startInputValue) {
-        const startDateParsed = moment(startInputValue, displayFormat, true);
-        if (startDateParsed.isValid() && date.isBefore(startDateParsed, "day")) return false;
+    }
+    if (!isStartDate && startInputValue) {
+      const startDate = moment(startInputValue, displayFormat, true);
+      if (startDate.isValid() && moment(date).isBefore(startDate, "day")) {
+        return false;
       }
-      if (isOutsideRange == null ? void 0 : isOutsideRange(date)) return false;
-      return true;
-    },
-    [displayFormat, minDate, maxDate, startInputValue, endInputValue, isOutsideRange]
-  );
-  const handleStartFocus = () => {
+    }
+    if (isOutsideRange == null ? void 0 : isOutsideRange(moment(date))) {
+      return false;
+    }
+    return true;
+  };
+  const handleStartDateInputFocus = () => {
     if (!startInputValue) {
       setStartInputValue(displayFormat);
       setTimeout(() => {
-        var _a;
-        (_a = startDateInputRef.current) == null ? void 0 : _a.setSelectionRange(0, 0);
+        if (startDateInputRef.current) {
+          startDateInputRef.current.setSelectionRange(0, 0);
+        }
       }, 0);
     }
     onStartDateFocus();
   };
-  const handleEndFocus = () => {
+  const handleEndDateInputFocus = () => {
     if (!endInputValue) {
       setEndInputValue(displayFormat);
       setTimeout(() => {
-        var _a;
-        (_a = endDateInputRef.current) == null ? void 0 : _a.setSelectionRange(0, 0);
+        if (endDateInputRef.current) {
+          endDateInputRef.current.setSelectionRange(0, 0);
+        }
       }, 0);
     }
     onEndDateFocus();
   };
-  const handleStartBlur = () => {
-    const parsed = moment(startInputValue, displayFormat, true);
-    if (parsed.isValid()) {
-      const valid = validateDate(parsed, true);
-      setStartErrorState(!valid);
-      if (valid) onStartDateStringChange == null ? void 0 : onStartDateStringChange(parsed);
+  const handleStartDateInputBlur = () => {
+    const parsedDate = moment(startInputValue, displayFormat, true);
+    if (parsedDate.isValid()) {
+      const isValid = validateDate(parsedDate, true);
+      setStartErrorState(!isValid);
+      if (isValid) {
+        onStartDateStringChange == null ? void 0 : onStartDateStringChange(parsedDate);
+      }
     } else {
       setStartErrorState(true);
     }
     if (!startInputValue || startInputValue === displayFormat) {
       setStartInputValue("");
       setStartErrorState(false);
-      if (!isOpen) {
-        onStartDateStringChange == null ? void 0 : onStartDateStringChange(null);
-      }
+      onStartDateStringChange == null ? void 0 : onStartDateStringChange(null);
     }
   };
-  const handleEndBlur = () => {
-    const parsed = moment(endInputValue, displayFormat, true);
-    if (parsed.isValid()) {
-      const valid = validateDate(parsed, false);
-      setEndErrorState(!valid);
-      if (valid) onEndDateStringChange == null ? void 0 : onEndDateStringChange(parsed);
+  const handleEndDateInputBlur = () => {
+    const parsedDate = moment(endInputValue, displayFormat, true);
+    if (parsedDate.isValid()) {
+      const isValid = validateDate(parsedDate, false);
+      setEndErrorState(!isValid);
+      if (isValid) {
+        onEndDateStringChange == null ? void 0 : onEndDateStringChange(parsedDate);
+      }
     } else {
       setEndErrorState(true);
     }
     if (!endInputValue || endInputValue === displayFormat) {
       setEndInputValue("");
       setEndErrorState(false);
-      if (!isOpen) {
-        onEndDateStringChange == null ? void 0 : onEndDateStringChange(null);
+      onEndDateStringChange == null ? void 0 : onEndDateStringChange(null);
+    }
+  };
+  const handleStartDateInputClick = () => {
+    if (startDateInputRef.current) {
+      const cursor = startDateInputRef.current.selectionStart;
+      if (cursor >= NUMBER_POSITIONS[NUMBER_POSITIONS.length - 1] + 1) {
+        startDateInputRef.current.setSelectionRange(
+          NUMBER_POSITIONS[NUMBER_POSITIONS.length - 1] + 1,
+          NUMBER_POSITIONS[NUMBER_POSITIONS.length - 1] + 1
+        );
+        return;
+      }
+      if (!NUMBER_POSITIONS.includes(cursor)) {
+        const nextPos = NUMBER_POSITIONS.find((pos) => pos >= cursor);
+        const fallbackPos = NUMBER_POSITIONS[NUMBER_POSITIONS.length - 1];
+        startDateInputRef.current.setSelectionRange(
+          nextPos !== void 0 ? nextPos : fallbackPos,
+          nextPos !== void 0 ? nextPos : fallbackPos
+        );
       }
     }
   };
-  const handleStartChange = (e) => {
+  const handleEndDateInputClick = () => {
+    if (endDateInputRef.current) {
+      const cursor = endDateInputRef.current.selectionStart;
+      if (cursor >= NUMBER_POSITIONS[NUMBER_POSITIONS.length - 1] + 1) {
+        endDateInputRef.current.setSelectionRange(
+          NUMBER_POSITIONS[NUMBER_POSITIONS.length - 1] + 1,
+          NUMBER_POSITIONS[NUMBER_POSITIONS.length - 1] + 1
+        );
+        return;
+      }
+      if (!NUMBER_POSITIONS.includes(cursor)) {
+        const nextPos = NUMBER_POSITIONS.find((pos) => pos >= cursor);
+        const fallbackPos = NUMBER_POSITIONS[NUMBER_POSITIONS.length - 1];
+        endDateInputRef.current.setSelectionRange(
+          nextPos !== void 0 ? nextPos : fallbackPos,
+          nextPos !== void 0 ? nextPos : fallbackPos
+        );
+      }
+    }
+  };
+  const handleStartDateInputChange = (e) => {
+    var _a;
     const input = e.target;
     const value = input.value;
-    const cursorPosition = input.selectionStart ?? 0;
-    if (cursorPosition < 1) return;
+    const cursorPosition = input.selectionStart;
+    if (cursorPosition == null || cursorPosition < 1) return;
     const newChar = value[cursorPosition - 1];
-    if (newChar == null || !/^\d$/.test(newChar)) return;
+    if (!/^\d$/.test(newChar)) return;
     const pos = cursorPosition - 1;
     if (!NUMBER_POSITIONS.includes(pos)) {
-      e.preventDefault();
-      const next = NUMBER_POSITIONS.find((p) => p > pos) ?? NUMBER_POSITIONS[NUMBER_POSITIONS.length - 1];
-      setStartPendingCursorPosition(next ?? null);
+      (_a = e.preventDefault) == null ? void 0 : _a.call(e);
+      setStartPendingCursorPosition(
+        NUMBER_POSITIONS.find((p) => p > pos) ?? NUMBER_POSITIONS[NUMBER_POSITIONS.length - 1]
+      );
       return;
     }
     const newValue = startInputValue.slice(0, pos) + newChar + startInputValue.slice(pos + 1);
     if (newValue.length > displayFormat.length) return;
     setStartInputValue(newValue);
     onStartDateStringChange == null ? void 0 : onStartDateStringChange(newValue);
-    const idx = NUMBER_POSITIONS.indexOf(pos);
-    if (idx < NUMBER_POSITIONS.length - 1) {
-      setStartPendingCursorPosition(NUMBER_POSITIONS[idx + 1] ?? null);
+    const currentIndex = NUMBER_POSITIONS.indexOf(pos);
+    if (currentIndex < NUMBER_POSITIONS.length - 1) {
+      const nextPos = NUMBER_POSITIONS[currentIndex + 1];
+      setStartPendingCursorPosition(nextPos);
     } else {
-      const parsed = moment(newValue, displayFormat, true);
-      const valid = parsed.isValid() && validateDate(parsed, true);
-      setStartErrorState(!valid);
-      onStartDateStringChange == null ? void 0 : onStartDateStringChange(valid ? parsed : newValue);
+      const parsedDate = moment(newValue, displayFormat, true);
+      const isValid = parsedDate.isValid() && validateDate(parsedDate, true);
+      setStartErrorState(!isValid);
+      onStartDateStringChange == null ? void 0 : onStartDateStringChange(isValid ? parsedDate : newValue);
     }
   };
-  const handleEndChange = (e) => {
+  const handleEndDateInputChange = (e) => {
+    var _a;
     const input = e.target;
     const value = input.value;
-    const cursorPosition = input.selectionStart ?? 0;
-    if (cursorPosition < 1) return;
+    const cursorPosition = input.selectionStart;
+    if (cursorPosition == null || cursorPosition < 1) return;
     const newChar = value[cursorPosition - 1];
-    if (newChar == null || !/^\d$/.test(newChar)) return;
+    if (!/^\d$/.test(newChar)) return;
     const pos = cursorPosition - 1;
     if (!NUMBER_POSITIONS.includes(pos)) {
-      e.preventDefault();
-      const next = NUMBER_POSITIONS.find((p) => p > pos) ?? NUMBER_POSITIONS[NUMBER_POSITIONS.length - 1];
-      setEndPendingCursorPosition(next ?? null);
+      (_a = e.preventDefault) == null ? void 0 : _a.call(e);
+      setEndPendingCursorPosition(
+        NUMBER_POSITIONS.find((p) => p > pos) ?? NUMBER_POSITIONS[NUMBER_POSITIONS.length - 1]
+      );
       return;
     }
     const newValue = endInputValue.slice(0, pos) + newChar + endInputValue.slice(pos + 1);
     if (newValue.length > displayFormat.length) return;
     setEndInputValue(newValue);
     onEndDateStringChange == null ? void 0 : onEndDateStringChange(newValue);
-    const idx = NUMBER_POSITIONS.indexOf(pos);
-    if (idx < NUMBER_POSITIONS.length - 1) {
-      setEndPendingCursorPosition(NUMBER_POSITIONS[idx + 1] ?? null);
+    const currentIndex = NUMBER_POSITIONS.indexOf(pos);
+    if (currentIndex < NUMBER_POSITIONS.length - 1) {
+      const nextPos = NUMBER_POSITIONS[currentIndex + 1];
+      setEndPendingCursorPosition(nextPos);
     } else {
-      const parsed = moment(newValue, displayFormat, true);
-      const valid = parsed.isValid() && validateDate(parsed, false);
-      setEndErrorState(!valid);
-      onEndDateStringChange == null ? void 0 : onEndDateStringChange(valid ? parsed : newValue);
+      const parsedDate = moment(newValue, displayFormat, true);
+      const isValid = parsedDate.isValid() && validateDate(parsedDate, false);
+      setEndErrorState(!isValid);
+      onEndDateStringChange == null ? void 0 : onEndDateStringChange(isValid ? parsedDate : newValue);
     }
   };
-  const handleStartKeyDown = (e) => {
-    var _a;
-    if (["ArrowLeft", "ArrowRight", "Tab"].includes(e.key)) return;
+  const handleStartDateKeyDown = (e) => {
+    if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Tab") {
+      return;
+    }
     if (e.key === "Backspace") {
       e.preventDefault();
-      const caret = ((_a = startDateInputRef.current) == null ? void 0 : _a.selectionStart) ?? 0;
+      const caret = startDateInputRef.current.selectionStart;
       const deletePos = [...NUMBER_POSITIONS].reverse().find((p) => p < caret);
       if (deletePos == null) return;
-      const sep = displayFormat[deletePos] ?? "";
-      const newValue = startInputValue.slice(0, deletePos) + sep + startInputValue.slice(deletePos + 1);
+      const newValue = startInputValue.slice(0, deletePos) + displayFormat[deletePos] + // "D" | "M" | "Y"
+      startInputValue.slice(deletePos + 1);
       setStartInputValue(newValue);
       onStartDateStringChange == null ? void 0 : onStartDateStringChange(newValue);
       let nextCaret = deletePos;
-      while (nextCaret > 0 && !NUMBER_POSITIONS.includes(nextCaret - 1)) nextCaret--;
+      while (nextCaret > 0 && !NUMBER_POSITIONS.includes(nextCaret - 1)) {
+        nextCaret--;
+      }
       setStartPendingCursorPosition(nextCaret);
       return;
     }
-    if (!/^\d$/.test(e.key)) e.preventDefault();
+    if (!/^\d$/.test(e.key)) {
+      e.preventDefault();
+    }
   };
-  const handleEndKeyDown = (e) => {
-    var _a;
-    if (["ArrowLeft", "ArrowRight", "Tab"].includes(e.key)) return;
+  const handleEndDateKeyDown = (e) => {
+    if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Tab") {
+      return;
+    }
     if (e.key === "Backspace") {
       e.preventDefault();
-      const caret = ((_a = endDateInputRef.current) == null ? void 0 : _a.selectionStart) ?? 0;
+      const caret = endDateInputRef.current.selectionStart;
       const deletePos = [...NUMBER_POSITIONS].reverse().find((p) => p < caret);
       if (deletePos == null) return;
-      const sep = displayFormat[deletePos] ?? "";
-      const newValue = endInputValue.slice(0, deletePos) + sep + endInputValue.slice(deletePos + 1);
+      const newValue = endInputValue.slice(0, deletePos) + displayFormat[deletePos] + // "D" | "M" | "Y"
+      endInputValue.slice(deletePos + 1);
       setEndInputValue(newValue);
       onEndDateStringChange == null ? void 0 : onEndDateStringChange(newValue);
       let nextCaret = deletePos;
-      while (nextCaret > 0 && !NUMBER_POSITIONS.includes(nextCaret - 1)) nextCaret--;
+      while (nextCaret > 0 && !NUMBER_POSITIONS.includes(nextCaret - 1)) {
+        nextCaret--;
+      }
       setEndPendingCursorPosition(nextCaret);
       return;
     }
-    if (!/^\d$/.test(e.key)) e.preventDefault();
-  };
-  const handleStartClick = () => {
-    var _a, _b, _c;
-    const cursor = ((_a = startDateInputRef.current) == null ? void 0 : _a.selectionStart) ?? 0;
-    const lastPos = (NUMBER_POSITIONS[NUMBER_POSITIONS.length - 1] ?? 0) + 1;
-    if (cursor >= lastPos) {
-      (_b = startDateInputRef.current) == null ? void 0 : _b.setSelectionRange(lastPos, lastPos);
-      return;
-    }
-    if (!NUMBER_POSITIONS.includes(cursor)) {
-      const next = NUMBER_POSITIONS.find((p) => p >= cursor) ?? NUMBER_POSITIONS[NUMBER_POSITIONS.length - 1] ?? 0;
-      (_c = startDateInputRef.current) == null ? void 0 : _c.setSelectionRange(next, next);
-    }
-  };
-  const handleEndClick = () => {
-    var _a, _b, _c;
-    const cursor = ((_a = endDateInputRef.current) == null ? void 0 : _a.selectionStart) ?? 0;
-    const lastPos = (NUMBER_POSITIONS[NUMBER_POSITIONS.length - 1] ?? 0) + 1;
-    if (cursor >= lastPos) {
-      (_b = endDateInputRef.current) == null ? void 0 : _b.setSelectionRange(lastPos, lastPos);
-      return;
-    }
-    if (!NUMBER_POSITIONS.includes(cursor)) {
-      const next = NUMBER_POSITIONS.find((p) => p >= cursor) ?? NUMBER_POSITIONS[NUMBER_POSITIONS.length - 1] ?? 0;
-      (_c = endDateInputRef.current) == null ? void 0 : _c.setSelectionRange(next, next);
+    if (!/^\d$/.test(e.key)) {
+      e.preventDefault();
     }
   };
-  const showError = Boolean(isError ?? startErrorState ?? endErrorState);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: inputContainerRef,
-      className: `dateRangePicker-input-container ${isDisabled ? "dateRangePicker-input-disabled" : ""} ${showError ? "impact-dateRangePicker-error" : ""}`.trim(),
-      "data-testid": dataTestId,
-      id,
+      className: `dateRangePicker-input-container ${isDisabled ? "dateRangePicker-input-disabled" : ""}
+      ${isError || startErrorState || endErrorState ? "impact-dateRangePicker-error" : ""}`,
       children: [
         /* @__PURE__ */ jsx(
           "input",
           {
             ref: startDateInputRef,
-            className: "dateRangePicker-input-start-date",
-            "data-testid": dataTestId != null ? `${dataTestId}-start` : void 0,
-            disabled: isDisabled,
-            id: id != null ? `${id}-start` : void 0,
             placeholder: "Start Date",
             readOnly,
             type: "text",
             value: startInputValue,
-            onBlur: handleStartBlur,
-            onChange: handleStartChange,
-            onClick: handleStartClick,
-            onFocus: handleStartFocus,
-            onKeyDown: handleStartKeyDown,
-            ...startDateInputProps
+            onBlur: handleStartDateInputBlur,
+            onChange: handleStartDateInputChange,
+            onClick: handleStartDateInputClick,
+            onFocus: handleStartDateInputFocus,
+            onKeyDown: handleStartDateKeyDown,
+            ...startDateInputProps,
+            className: "dateRangePicker-input-start-date",
+            disabled: isDisabled
           }
         ),
         /* @__PURE__ */ jsx(
           "input",
           {
             ref: endDateInputRef,
-            className: "dateRangePicker-input-end-date",
-            "data-testid": dataTestId != null ? `${dataTestId}-end` : void 0,
-            disabled: isDisabled,
-            id: id != null ? `${id}-end` : void 0,
             placeholder: "End Date",
             readOnly,
             type: "text",
             value: endInputValue,
-            onBlur: handleEndBlur,
-            onChange: handleEndChange,
-            onClick: handleEndClick,
-            onFocus: handleEndFocus,
-            onKeyDown: handleEndKeyDown,
-            ...endDateInputProps
+            onBlur: handleEndDateInputBlur,
+            onChange: handleEndDateInputChange,
+            onClick: handleEndDateInputClick,
+            onFocus: handleEndDateInputFocus,
+            onKeyDown: handleEndDateKeyDown,
+            ...endDateInputProps,
+            className: "dateRangePicker-input-end-date",
+            disabled: isDisabled
           }
         ),
-        customIcon != null ? /* @__PURE__ */ jsx(
+        customIcon ? /* @__PURE__ */ jsx(
           "span",
           {
             className: "end-date-icon",
@@ -349,7 +394,6 @@ function DateRangePickerInput({
         ) : /* @__PURE__ */ jsx(
           "span",
           {
-            "aria-hidden": true,
             className: "end-date-icon",
             style: {
               position: "absolute",
@@ -363,9 +407,10 @@ function DateRangePickerInput({
               opacity: isDisabled ? 0.5 : 1
             },
             onClick: (e) => {
-              var _a;
               e.stopPropagation();
-              if (!isDisabled) (_a = startDateInputRef.current) == null ? void 0 : _a.focus();
+              if (startDateInputRef.current && !isDisabled) {
+                startDateInputRef.current.focus();
+              }
             }
           }
         )

package/dist/components/DateRangePicker/index.d.ts

@@ -1,9 +1,5 @@
-import { DateRangePickerProps } from './DateRangePicker.types';
+import { default as React } from 'react';
 
 export type { DateRangePickerProps } from './DateRangePicker.types';
-/**
- * DateRangePicker component. Uses react-dates and moment; supports start/end date selection,
- * range shortcuts, min/max, portal, and footer actions.
- */
-export declare const DateRangePicker: import('react').ForwardRefExoticComponent<DateRangePickerProps & import('react').RefAttributes<HTMLDivElement | null>>;
+export declare const DateRangePicker: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/DateRangePicker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/index.tsx"],"names":[],"mappings":"AAEA,OAAO,wBAAwB,CAAC;AAKhC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,qCAAqC,CAAC;AAC7C,OAAO,+BAA+B,CAAC;AAEvC,YAAY,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpE;;;GAGG;AACH,eAAO,MAAM,eAAe,wHAkW3B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/index.tsx"],"names":[],"mappings":"AACA,OAAO,wBAAwB,CAAC;AAChC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,KAAkD,MAAM,OAAO,CAAC;AAIvE,OAAO,+BAA+B,CAAC;AAIvC,YAAY,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpE,eAAO,MAAM,eAAe,kFA6W3B,CAAC"}