@salt-ds/lab 1.0.0-alpha.71 → 1.0.0-alpha.73

package/dist-cjs/calendar/useCalendarSelection.js

@@ -7,43 +7,49 @@ var LocalizationProvider = require('../localization-provider/LocalizationProvide
 var CalendarContext = require('./internal/CalendarContext.js');
 var utils = require('./internal/utils.js');
 
-function isSingleSelectionValueType(value) {
-  return !isMultipleDateSelection(value) && !isDateRangeSelection(value);
-}
 function isDateRangeSelection(value) {
-  return value && typeof value === "object" && ("startDate" in value || "endDate" in value);
+  return value && !Array.isArray(value) && typeof value === "object" && ("startDate" in value || "endDate" in value);
 }
-function isMultipleDateSelection(value) {
-  return Array.isArray(value) && value.every((item) => isSingleSelectionValueType(item));
+function isMultiselect(props) {
+  return props.multiselect === true;
 }
 const withBaseName = core.makePrefixer("saltCalendarDay");
-function addOrRemoveFromArray(dateAdapter, array, item) {
-  if (Array.isArray(array)) {
-    const filteredArray = array.filter(
-      (element) => !dateAdapter.isSame(element, item, "day")
-    );
-    if (filteredArray.length === array.length) {
-      return array.concat(item);
-    }
-    return filteredArray;
+function selectDateRange(dateAdapter, previousSelectedDate, newDate) {
+  if ((previousSelectedDate == null ? void 0 : previousSelectedDate.startDate) && (previousSelectedDate == null ? void 0 : previousSelectedDate.endDate)) {
+    return {
+      startDate: newDate
+    };
   }
-  return [item];
+  if ((previousSelectedDate == null ? void 0 : previousSelectedDate.startDate) && dateAdapter.compare(newDate, previousSelectedDate == null ? void 0 : previousSelectedDate.startDate) >= 0) {
+    return {
+      ...previousSelectedDate,
+      endDate: newDate
+    };
+  }
+  return {
+    startDate: newDate
+  };
 }
-function updateRangeSelection(datePicker, currentSelectedDate, newSelectedDate) {
-  let base = { ...currentSelectedDate };
-  if ((base == null ? void 0 : base.startDate) && (base == null ? void 0 : base.endDate)) {
-    base = { startDate: newSelectedDate };
-  } else if ((base == null ? void 0 : base.startDate) && datePicker.compare(newSelectedDate, base.startDate) < 0) {
-    base = { startDate: newSelectedDate };
-  } else if ((base == null ? void 0 : base.startDate) && datePicker.compare(newSelectedDate, base.startDate) >= 0) {
-    base = { ...base, endDate: newSelectedDate };
-  } else {
-    base = { startDate: newSelectedDate };
+function selectMultiselectDateRange(dateAdapter, previousSelectedDate, newDate) {
+  const lastRange = previousSelectedDate.length ? previousSelectedDate[previousSelectedDate.length - 1] : void 0;
+  const isIncompleteRange = !(lastRange == null ? void 0 : lastRange.endDate);
+  if (isIncompleteRange) {
+    const isNewSelection = previousSelectedDate.length === 0;
+    if (isNewSelection) {
+      return [{ startDate: newDate }];
+    }
+    const completeDateRange = selectDateRange(
+      dateAdapter,
+      previousSelectedDate[previousSelectedDate.length - 1],
+      newDate
+    );
+    return [...previousSelectedDate.slice(0, -1), completeDateRange];
   }
-  return base;
+  return [...previousSelectedDate, { startDate: newDate }];
 }
 function useCalendarSelection(props) {
   const {
+    multiselect,
     focusedDate: focusedDateProp,
     hoveredDate: hoveredDateProp,
     selectedDate: selectedDateProp,
@@ -55,6 +61,7 @@ function useCalendarSelection(props) {
     isOutsideAllowedDates = () => true,
     focusedDateRef,
     onFocusedDateChange,
+    select: selectProp,
     selectionVariant,
     timezone,
     visibleMonth
@@ -91,39 +98,74 @@ function useCalendarSelection(props) {
   const setSelectedDate = react.useCallback(
     (event, newSelectedDate) => {
       if (!isDaySelectable || isDaySelectable(newSelectedDate)) {
+        const handleSelectionChange = (updatedSelection, changeHandler) => {
+          changeHandler == null ? void 0 : changeHandler(event, updatedSelection);
+          setSelectedDateState(updatedSelection);
+        };
         switch (selectionVariant) {
           case "single": {
-            setSelectedDateState(newSelectedDate);
-            onSelectionChange == null ? void 0 : onSelectionChange(event, newSelectedDate);
-            break;
-          }
-          case "multiselect": {
-            const newMultiSelectDate = addOrRemoveFromArray(
-              dateAdapter,
-              selectedDate,
-              newSelectedDate
-            );
-            setSelectedDateState(newMultiSelectDate);
-            onSelectionChange == null ? void 0 : onSelectionChange(event, newMultiSelectDate);
+            if (isMultiselect(props)) {
+              const multipleSingleSelectedDate = selectedDate;
+              const select = selectProp;
+              const updatedSelection = select ? select(multipleSingleSelectedDate ?? [], newSelectedDate) : [...multipleSingleSelectedDate ?? [], newSelectedDate];
+              const changeHandler = onSelectionChange;
+              handleSelectionChange(updatedSelection, changeHandler);
+            } else {
+              const singleSelectedDate = selectedDate;
+              const select = selectProp;
+              const updatedSelection = select ? select(singleSelectedDate, newSelectedDate) : newSelectedDate;
+              const changeHandler = onSelectionChange;
+              handleSelectionChange(updatedSelection, changeHandler);
+            }
             break;
           }
           case "range": {
-            const newRangeDate = updateRangeSelection(
-              dateAdapter,
-              selectedDate,
-              newSelectedDate
-            );
-            setSelectedDateState(newRangeDate);
-            onSelectionChange == null ? void 0 : onSelectionChange(event, newRangeDate);
+            if (isMultiselect(props)) {
+              const multipleRangeSelectedDate = selectedDate;
+              const select = selectProp;
+              const updatedSelection = select ? select(multipleRangeSelectedDate ?? [], newSelectedDate) : selectMultiselectDateRange(
+                dateAdapter,
+                multipleRangeSelectedDate ?? [],
+                newSelectedDate
+              );
+              const changeHandler = onSelectionChange;
+              handleSelectionChange(updatedSelection, changeHandler);
+            } else {
+              const rangeSelectedDate = selectedDate;
+              const select = selectProp;
+              const updatedSelection = select ? select(rangeSelectedDate, newSelectedDate) : selectDateRange(
+                dateAdapter,
+                rangeSelectedDate,
+                newSelectedDate
+              );
+              const changeHandler = onSelectionChange;
+              handleSelectionChange(updatedSelection, changeHandler);
+            }
             break;
           }
           case "offset": {
-            const newOffsetDate = {
-              startDate: getStartDateOffset(newSelectedDate),
-              endDate: getEndDateOffset(newSelectedDate)
-            };
-            setSelectedDateState(newOffsetDate);
-            onSelectionChange == null ? void 0 : onSelectionChange(event, newOffsetDate);
+            if (isMultiselect(props)) {
+              const multipleOffsetSelectedDate = selectedDate;
+              const select = selectProp;
+              const updatedSelection = select ? select(multipleOffsetSelectedDate ?? [], newSelectedDate) : [
+                ...multipleOffsetSelectedDate ?? [],
+                {
+                  startDate: getStartDateOffset(newSelectedDate),
+                  endDate: getEndDateOffset(newSelectedDate)
+                }
+              ];
+              const changeHandler = onSelectionChange;
+              handleSelectionChange(updatedSelection, changeHandler);
+            } else {
+              const offsetSelectedDate = selectedDate;
+              const select = selectProp;
+              const updatedSelection = select ? select(offsetSelectedDate, newSelectedDate) : {
+                startDate: getStartDateOffset(newSelectedDate),
+                endDate: getEndDateOffset(newSelectedDate)
+              };
+              const changeHandler = onSelectionChange;
+              handleSelectionChange(updatedSelection, changeHandler);
+            }
             break;
           }
         }
@@ -134,9 +176,12 @@ function useCalendarSelection(props) {
       getEndDateOffset,
       getStartDateOffset,
       isDaySelectable,
+      selectProp,
       selectedDate,
       selectionVariant,
-      onSelectionChange
+      onSelectionChange,
+      props
+      // Ensure props is included in the dependency array
     ]
   );
   const isSelected = react.useCallback(
@@ -144,34 +189,53 @@ function useCalendarSelection(props) {
       if (!selectedDate) {
         return false;
       }
+      const isSingleDateSelected = (element) => dateAdapter.isSame(element, date, "day");
+      const isDateRangeSelected = (range) => range.startDate && range.endDate && dateAdapter.compare(date, range.startDate) >= 0 && dateAdapter.compare(date, range.endDate) <= 0;
+      if (Array.isArray(selectedDate)) {
+        return selectedDate.some(
+          (element) => isDateRangeSelection(element) ? isDateRangeSelected(element) : isSingleDateSelected(element)
+        );
+      }
       switch (selectionVariant) {
         case "single":
-          return isSingleSelectionValueType(selectedDate) && dateAdapter.isSame(selectedDate, date, "day");
-        case "multiselect":
-          return Array.isArray(selectedDate) && !!selectedDate.find(
-            (element) => dateAdapter.isSame(element, date, "day")
+          return isSingleDateSelected(
+            selectedDate
           );
+        case "range":
+        case "offset":
+          return isDateRangeSelected(selectedDate);
         default:
           return false;
       }
     },
-    [dateAdapter, selectionVariant, selectedDate]
+    [dateAdapter, selectedDate, selectionVariant]
   );
   const getDefaultFocusedDate = () => {
-    if ((selectionVariant === "range" || selectionVariant === "offset") && isDateRangeSelection(selectedDate)) {
-      if ((selectedDate == null ? void 0 : selectedDate.startDate) && isDayVisible(selectedDate.startDate)) {
-        return selectedDate.startDate;
-      }
-      if ((selectedDate == null ? void 0 : selectedDate.endDate) && isDayVisible(selectedDate.endDate)) {
-        return selectedDate.endDate;
+    if (selectedDate && (selectionVariant === "range" || selectionVariant === "offset")) {
+      const getFocusableDate = (result, selection) => {
+        if ((selection == null ? void 0 : selection.startDate) && isDayVisible(selection.startDate)) {
+          return [...result, selection.startDate];
+        }
+        if ((selection == null ? void 0 : selection.endDate) && isDayVisible(selection.endDate)) {
+          return [...result, selection.endDate];
+        }
+        return result;
+      };
+      let focusableSelectedDates;
+      if (!multiselect) {
+        focusableSelectedDates = [selectedDate];
+      } else {
+        focusableSelectedDates = selectedDate;
       }
-    } else if (selectionVariant === "multiselect" && Array.isArray(selectedDate)) {
-      const selectionInMonth = selectedDate.filter((day) => isDayVisible(day)).sort((a, b) => dateAdapter.compare(a, b));
+      const selectionInMonth = focusableSelectedDates.reduce(getFocusableDate, []).sort((a, b) => dateAdapter.compare(a, b));
       if (selectionInMonth.length > 0) {
         return selectionInMonth[0];
       }
-    } else if (selectedDate && selectionVariant === "single" && !isDateRangeSelection(selectedDate) && !Array.isArray(selectedDate) && isDayVisible(selectedDate)) {
-      return selectedDate;
+    } else if (selectedDate && selectionVariant === "single") {
+      const focusableSelectedDate = multiselect ? selectedDate == null ? void 0 : selectedDate[0] : selectedDate;
+      if (focusableSelectedDate && isDayVisible(focusableSelectedDate)) {
+        return focusableSelectedDate;
+      }
     }
     if ((isDaySelectable == null ? void 0 : isDaySelectable(dateAdapter.today(timezone))) && isDayVisible(dateAdapter.today(timezone))) {
       return dateAdapter.today(timezone);
@@ -231,19 +295,28 @@ function useCalendarSelection(props) {
   );
   const getFocusableDates = react.useCallback(() => {
     const focusableDates = [];
-    if ((selectionVariant === "range" || selectionVariant === "offset") && isDateRangeSelection(selectedDate)) {
-      if ((selectedDate == null ? void 0 : selectedDate.startDate) && isDayVisible(selectedDate.startDate)) {
-        focusableDates.push(selectedDate.startDate);
-      } else if ((selectedDate == null ? void 0 : selectedDate.endDate) && isDayVisible(selectedDate.endDate)) {
-        focusableDates.push(selectedDate.endDate);
-      }
-    } else if (selectionVariant === "multiselect" && Array.isArray(selectedDate)) {
-      const selectionInMonth = selectedDate.filter((day) => isDayVisible(day)).sort((a, b) => dateAdapter.compare(a, b));
-      if (selectionInMonth.length > 0) {
-        focusableDates.push(selectionInMonth[0]);
+    if (Array.isArray(selectedDate)) {
+      selectedDate.forEach((selection) => {
+        if (isDateRangeSelection(selection)) {
+          if (selection.startDate && isDayVisible(selection.startDate)) {
+            focusableDates.push(selection.startDate);
+          } else if (selection.endDate && isDayVisible(selection.endDate)) {
+            focusableDates.push(selection.endDate);
+          }
+        } else if (isDayVisible(selection)) {
+          focusableDates.push(selection);
+        }
+      });
+    } else if (selectedDate) {
+      if (isDateRangeSelection(selectedDate)) {
+        if (selectedDate.startDate && isDayVisible(selectedDate.startDate)) {
+          focusableDates.push(selectedDate.startDate);
+        } else if (selectedDate.endDate && isDayVisible(selectedDate.endDate)) {
+          focusableDates.push(selectedDate.endDate);
+        }
+      } else if (isDayVisible(selectedDate)) {
+        focusableDates.push(selectedDate);
       }
-    } else if (selectionVariant === "single" && !isDateRangeSelection(selectedDate) && !Array.isArray(selectedDate) && selectedDate && isDayVisible(selectedDate)) {
-      focusableDates.push(selectedDate);
     }
     if (focusedDate && visibleMonth && dateAdapter.isSame(focusedDate, visibleMonth, "month")) {
       focusableDates.push(focusedDate);
@@ -268,27 +341,32 @@ function useCalendarSelection(props) {
     isDaySelectable,
     isDayVisible,
     selectedDate,
-    selectionVariant,
     timezone,
     visibleMonth
   ]);
   const isSelectedSpan = react.useCallback(
     (date) => {
-      if ((selectionVariant === "range" || selectionVariant === "offset") && isDateRangeSelection(selectedDate) && dateAdapter.isValid(selectedDate.startDate) && dateAdapter.isValid(selectedDate.endDate) && !isOutsideAllowedDates(selectedDate.startDate) && !isOutsideAllowedDates(selectedDate.endDate)) {
-        return dateAdapter.compare(date, selectedDate.startDate) > 0 && dateAdapter.compare(date, selectedDate.endDate) < 0;
-      }
-      return false;
+      const dateRanges = Array.isArray(selectedDate) ? selectedDate : [selectedDate];
+      return dateRanges.some((range) => {
+        if ((selectionVariant === "range" || selectionVariant === "offset") && isDateRangeSelection(range) && dateAdapter.isValid(range.startDate) && dateAdapter.isValid(range.endDate) && !isOutsideAllowedDates(range.startDate) && !isOutsideAllowedDates(range.endDate)) {
+          return dateAdapter.compare(date, range.startDate) > 0 && dateAdapter.compare(date, range.endDate) < 0;
+        }
+        return false;
+      });
     },
     [dateAdapter, isOutsideAllowedDates, selectionVariant, selectedDate]
   );
   const isHoveredSpan = react.useCallback(
     (date) => {
-      if ((selectionVariant === "range" || selectionVariant === "offset") && isDateRangeSelection(selectedDate) && dateAdapter.isValid(selectedDate.startDate) && !dateAdapter.isValid(selectedDate.endDate) && !isOutsideAllowedDates(selectedDate.startDate) && hoveredDate) {
-        const isForwardRange = dateAdapter.compare(hoveredDate, selectedDate.startDate) > 0 && (dateAdapter.compare(date, selectedDate.startDate) > 0 && dateAdapter.compare(date, hoveredDate) < 0 || dateAdapter.isSame(date, hoveredDate, "day"));
-        const isValidDayHovered = !isDaySelectable || isDaySelectable(hoveredDate);
-        return isForwardRange && isValidDayHovered;
-      }
-      return false;
+      const dateRanges = Array.isArray(selectedDate) ? selectedDate : [selectedDate];
+      return dateRanges.some((range) => {
+        if ((selectionVariant === "range" || selectionVariant === "offset") && isDateRangeSelection(range) && dateAdapter.isValid(range.startDate) && !dateAdapter.isValid(range.endDate) && !isOutsideAllowedDates(range.startDate) && hoveredDate) {
+          const isForwardRange = dateAdapter.compare(hoveredDate, range.startDate) >= 0 && (dateAdapter.compare(date, range.startDate) >= 0 && dateAdapter.compare(date, hoveredDate) <= 0 || dateAdapter.isSame(date, hoveredDate, "day"));
+          const isValidDayHovered = !isDaySelectable || isDaySelectable(hoveredDate);
+          return isForwardRange && isValidDayHovered;
+        }
+        return false;
+      });
     },
     [
       dateAdapter,
@@ -301,19 +379,25 @@ function useCalendarSelection(props) {
   );
   const isSelectedStart = react.useCallback(
     (date) => {
-      if ((selectionVariant === "range" || selectionVariant === "offset") && isDateRangeSelection(selectedDate) && dateAdapter.isValid(selectedDate.startDate) && !isOutsideAllowedDates(selectedDate.startDate)) {
-        return dateAdapter.isSame(selectedDate.startDate, date, "day");
-      }
-      return false;
+      const dateRanges = Array.isArray(selectedDate) ? selectedDate : [selectedDate];
+      return dateRanges.some((range) => {
+        if ((selectionVariant === "range" || selectionVariant === "offset") && isDateRangeSelection(range) && dateAdapter.isValid(range.startDate) && !isOutsideAllowedDates(range.startDate)) {
+          return dateAdapter.isSame(range.startDate, date, "day");
+        }
+        return false;
+      });
     },
     [dateAdapter, isOutsideAllowedDates, selectionVariant, selectedDate]
   );
   const isSelectedEnd = react.useCallback(
     (date) => {
-      if ((selectionVariant === "range" || selectionVariant === "offset") && isDateRangeSelection(selectedDate) && dateAdapter.isValid(selectedDate.endDate) && !isOutsideAllowedDates(selectedDate.endDate)) {
-        return dateAdapter.isSame(selectedDate.endDate, date, "day");
-      }
-      return false;
+      const dateRanges = Array.isArray(selectedDate) ? selectedDate : [selectedDate];
+      return dateRanges.some((range) => {
+        if ((selectionVariant === "range" || selectionVariant === "offset") && isDateRangeSelection(range) && dateAdapter.isValid(range.endDate) && !isOutsideAllowedDates(range.endDate)) {
+          return dateAdapter.isSame(range.endDate, date, "day");
+        }
+        return false;
+      });
     },
     [dateAdapter, isOutsideAllowedDates, selectionVariant, selectedDate]
   );
@@ -345,10 +429,10 @@ function useCalendarSelection(props) {
         focusableDates: getFocusableDates()
       },
       helpers: {
-        setSelectedDate,
         isSelected,
-        setHoveredDate,
+        setSelectedDate,
         isHovered,
+        setHoveredDate,
         isSelectedSpan,
         isHoveredSpan,
         isSelectedStart,
@@ -447,8 +531,6 @@ function useCalendarSelectionDay({
 }
 
 exports.isDateRangeSelection = isDateRangeSelection;
-exports.isMultipleDateSelection = isMultipleDateSelection;
-exports.isSingleSelectionValueType = isSingleSelectionValueType;
 exports.useCalendarSelection = useCalendarSelection;
 exports.useCalendarSelectionDay = useCalendarSelectionDay;
 //# sourceMappingURL=useCalendarSelection.js.map