@snapdragonsnursery/react-components 1.19.5 → 1.19.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.19.5",
+  "version": "1.19.7",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/components/ui/date-range-picker.jsx

@@ -92,48 +92,47 @@ export function DateRangePicker({
     const hasCompleteCurrentRange = Boolean(
       internalRange?.from && internalRange?.to
     );
+    const isInProgressRange = Boolean(
+      internalRange?.from && !internalRange?.to
+    );
 
-    let newRange = normalizedRange;
-
-    if (normalizedRange.from && normalizedRange.to) {
-      if (hasCompleteCurrentRange && !isSelectingRange.current) {
-        const sameStart = datesEqual(normalizedRange.from, internalRange.from);
+    let newRange;
 
-        if (sameStart) {
-          // Adjusting end date on an existing range
-          newRange = {
-            from: internalRange.from,
-            to: normalizedRange.to,
-          };
-        } else {
-          // Starting a new range selection cycle
-          newRange = {
-            from: normalizedSelectedDay ?? normalizedRange.from,
-            to: null,
-          };
-        }
-      } else if (internalRange?.from && !internalRange?.to) {
-        // Completing an in-progress range
+    // If we're in the middle of selecting a range (start date set, end date not set)
+    if (isInProgressRange) {
+      // Completing an in-progress range - set the clicked date as the end date
+      if (normalizedRange.to) {
         newRange = {
           from: internalRange.from,
           to: normalizedRange.to,
         };
-      }
-    } else if (normalizedRange.from && !normalizedRange.to) {
-      if (hasCompleteCurrentRange && !isSelectingRange.current) {
-        // New cycle starting from the selected day
+      } else if (normalizedRange.from) {
+        // Use the clicked date as end date
         newRange = {
-          from: normalizedSelectedDay ?? normalizedRange.from,
-          to: null,
+          from: internalRange.from,
+          to: normalizedSelectedDay ?? normalizedRange.from,
         };
       } else {
+        newRange = internalRange; // Keep current state
+      }
+    } else if (hasCompleteCurrentRange) {
+      // We have a complete range - clicking ANY date should start a new range
+      // Use the clicked date as the new start date
+      newRange = {
+        from:
+          normalizedSelectedDay ?? normalizedRange.from ?? normalizedRange.to,
+        to: null,
+      };
+    } else {
+      // No range selected or only partial - start a new range
+      if (normalizedRange.from) {
         newRange = {
           from: normalizedRange.from,
-          to: null,
+          to: normalizedRange.to || null,
         };
+      } else {
+        newRange = null;
       }
-    } else {
-      newRange = null;
     }
 
     setInternalRange(newRange);
@@ -291,6 +290,7 @@ export function DatePicker({
   placeholder = "Select a date",
   disabled,
   disableFuture = false,
+  displayFormat = "PPP",
   ...props
 }) {
   const [isOpen, setIsOpen] = useState(false);
@@ -315,7 +315,7 @@ export function DatePicker({
         >
           <CalendarIcon className="mr-2 h-4 w-4" />
           {selectedDate ? (
-            format(selectedDate, "PPP")
+            format(selectedDate, displayFormat)
           ) : (
             <span>{placeholder}</span>
           )}

package/src/index.d.ts

@@ -43,6 +43,7 @@ export interface DatePickerProps {
   placeholder?: string
   disabled?: boolean
   disableFuture?: boolean
+  displayFormat?: string
 }
 export const DatePicker: React.ComponentType<DatePickerProps>
 export const Calendar: React.ComponentType<any>