@salt-ds/lab 1.0.0-alpha.8 → 1.0.0-alpha.81

package/dist-cjs/calendar/useCalendarSelection.js

@@ -0,0 +1,604 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var react = require('react');
+var LocalizationProvider = require('../localization-provider/LocalizationProvider.js');
+var CalendarContext = require('./internal/CalendarContext.js');
+var utils = require('./internal/utils.js');
+
+function isDateRangeSelection(value) {
+  return value && !Array.isArray(value) && typeof value === "object" && ("startDate" in value || "endDate" in value);
+}
+function isMultiselect(props) {
+  return props.multiselect === true;
+}
+const withBaseName = core.makePrefixer("saltCalendarDay");
+function selectDateRange(dateAdapter, previousSelectedDate, newDate) {
+  if ((previousSelectedDate == null ? void 0 : previousSelectedDate.startDate) && (previousSelectedDate == null ? void 0 : previousSelectedDate.endDate)) {
+    return {
+      startDate: newDate
+    };
+  }
+  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 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 [...previousSelectedDate, { startDate: newDate }];
+}
+function useCalendarSelection(props) {
+  const {
+    multiselect,
+    focusedDate: focusedDateProp,
+    hoveredDate: hoveredDateProp,
+    selectedDate: selectedDateProp,
+    defaultSelectedDate,
+    onSelectionChange,
+    onHoveredDateChange,
+    isDaySelectable = () => true,
+    isDayVisible = () => true,
+    isOutsideAllowedDates = () => true,
+    focusedDateRef,
+    onFocusedDateChange,
+    select: selectProp,
+    selectionVariant,
+    timezone,
+    visibleMonth
+    // startDateOffset,
+    // endDateOffset,
+  } = props;
+  const { dateAdapter } = LocalizationProvider.useLocalization();
+  const [selectedDate, setSelectedDateState] = core.useControlled({
+    controlled: selectedDateProp,
+    default: defaultSelectedDate,
+    name: "Calendar",
+    state: "selectedDate"
+  });
+  const startDateOffset = selectionVariant === "offset" ? props.startDateOffset : void 0;
+  const endDateOffset = selectionVariant === "offset" ? props.endDateOffset : void 0;
+  const getStartDateOffset = react.useCallback(
+    (date) => {
+      if (selectionVariant === "offset" && startDateOffset) {
+        return startDateOffset(date);
+      }
+      return date;
+    },
+    [selectionVariant, startDateOffset]
+  );
+  const getEndDateOffset = react.useCallback(
+    (date) => {
+      if (selectionVariant === "offset" && endDateOffset) {
+        return endDateOffset(date);
+      }
+      return date;
+    },
+    [selectionVariant, endDateOffset]
+  );
+  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": {
+            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": {
+            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": {
+            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;
+          }
+        }
+      }
+    },
+    [
+      dateAdapter,
+      getEndDateOffset,
+      getStartDateOffset,
+      isDaySelectable,
+      selectProp,
+      selectedDate,
+      selectionVariant,
+      onSelectionChange,
+      props
+      // Ensure props is included in the dependency array
+    ]
+  );
+  const isSelected = react.useCallback(
+    (date) => {
+      if (!selectedDate) {
+        return false;
+      }
+      if (selectionVariant === "single") {
+        const singleDates = Array.isArray(selectedDate) ? selectedDate : [selectedDate];
+        return singleDates.some(
+          (singleDate) => dateAdapter.isSame(singleDate, date, "day")
+        );
+      }
+      return false;
+    },
+    [dateAdapter, selectedDate, selectionVariant]
+  );
+  const getDefaultFocusedDate = () => {
+    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;
+      }
+      const selectionInMonth = focusableSelectedDates.reduce(getFocusableDate, []).sort((a, b) => dateAdapter.compare(a, b));
+      if (selectionInMonth.length > 0) {
+        return selectionInMonth[0];
+      }
+    } 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);
+    }
+    const firstSelectableDate = utils.generateDatesForMonth(
+      dateAdapter,
+      visibleMonth
+    ).find((visibleDay) => visibleDay && (isDaySelectable == null ? void 0 : isDaySelectable(visibleDay)));
+    if (firstSelectableDate) {
+      return firstSelectableDate;
+    }
+    return null;
+  };
+  const [focusedDate, setFocusedDateState] = core.useControlled({
+    controlled: focusedDateProp,
+    default: react.useMemo(getDefaultFocusedDate, []),
+    name: "Calendar",
+    state: "focusedDate"
+  });
+  const setFocusedDate = react.useCallback(
+    (event, date) => {
+      if (focusedDateRef && (event == null ? void 0 : event.target) instanceof HTMLElement) {
+        focusedDateRef.current = event.target;
+      }
+      if (date && (focusedDate && dateAdapter.isSame(date, focusedDate, "day") || isOutsideAllowedDates(date))) {
+        return;
+      }
+      setFocusedDateState(date);
+      onFocusedDateChange == null ? void 0 : onFocusedDateChange(event, date);
+    },
+    [
+      dateAdapter,
+      focusedDate,
+      focusedDateRef,
+      isOutsideAllowedDates,
+      onFocusedDateChange
+    ]
+  );
+  const [hoveredDate, setHoveredDateState] = core.useControlled({
+    controlled: hoveredDateProp,
+    default: void 0,
+    name: "Calendar",
+    state: "hoveredDate"
+  });
+  const setHoveredDate = react.useCallback(
+    (event, date) => {
+      setHoveredDateState(date);
+      onHoveredDateChange == null ? void 0 : onHoveredDateChange(event, date);
+    },
+    [onHoveredDateChange]
+  );
+  const isHovered = react.useCallback(
+    (date) => {
+      return !!hoveredDate && dateAdapter.isSame(date, hoveredDate, "day");
+    },
+    [dateAdapter, hoveredDate]
+  );
+  const getFocusableDates = react.useCallback(() => {
+    const focusableDates = [];
+    if (Array.isArray(selectedDate)) {
+      for (const selection of selectedDate) {
+        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);
+      }
+    }
+    if (focusedDate && visibleMonth && dateAdapter.isSame(focusedDate, visibleMonth, "month")) {
+      focusableDates.push(focusedDate);
+      return focusableDates;
+    }
+    if (focusableDates.length === 0 && isDaySelectable(dateAdapter.today(timezone)) && isDayVisible(dateAdapter.today(timezone))) {
+      focusableDates.push(dateAdapter.today(timezone));
+    }
+    if (focusableDates.length === 0 || !focusableDates.some(isDayVisible)) {
+      const firstSelectableDate = utils.generateDatesForMonth(
+        dateAdapter,
+        visibleMonth
+      ).find((visibleDay) => visibleDay && isDaySelectable(visibleDay));
+      if (firstSelectableDate) {
+        focusableDates.push(firstSelectableDate);
+      }
+    }
+    return focusableDates;
+  }, [
+    dateAdapter,
+    focusedDate,
+    isDaySelectable,
+    isDayVisible,
+    selectedDate,
+    timezone,
+    visibleMonth
+  ]);
+  const isHoveredStart = react.useCallback(
+    (date) => {
+      if (selectionVariant === "range" && hoveredDate && dateAdapter.isSame(date, hoveredDate, "day")) {
+        const dateRanges = Array.isArray(selectedDate) ? selectedDate : [selectedDate];
+        const allDatesPopulated = dateRanges.every(
+          (range) => (range == null ? void 0 : range.startDate) && (range == null ? void 0 : range.endDate)
+        );
+        const startDateMatches = dateRanges.some(
+          (range) => (range == null ? void 0 : range.startDate) && dateAdapter.isSame(date, range.startDate, "day")
+        );
+        const firstIncompleteRange = dateRanges.find(
+          (range) => (range == null ? void 0 : range.startDate) && !(range == null ? void 0 : range.endDate)
+        );
+        const newDateRangeRequired = (firstIncompleteRange == null ? void 0 : firstIncompleteRange.startDate) && dateAdapter.compare(date, firstIncompleteRange.startDate) < 0;
+        return allDatesPopulated || startDateMatches || newDateRangeRequired;
+      }
+      if (selectionVariant === "offset" && hoveredDate) {
+        const startDate = getStartDateOffset(hoveredDate);
+        return dateAdapter.isSame(date, startDate, "day") && (!isDaySelectable || isDaySelectable(date));
+      }
+      return false;
+    },
+    [
+      dateAdapter,
+      getStartDateOffset,
+      selectionVariant,
+      selectedDate,
+      hoveredDate,
+      isDaySelectable
+    ]
+  );
+  const isHoveredSpan = react.useCallback(
+    (date) => {
+      if (selectionVariant === "range") {
+        const dateRanges = Array.isArray(selectedDate) ? selectedDate : [selectedDate];
+        return dateRanges.some((range) => {
+          if (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;
+            const isValidDayHovered = !isDaySelectable || isDaySelectable(hoveredDate);
+            return isForwardRange && isValidDayHovered;
+          }
+          return false;
+        });
+      }
+      if (selectionVariant === "offset" && hoveredDate) {
+        const startDate = getStartDateOffset(hoveredDate);
+        const endDate = getEndDateOffset(hoveredDate);
+        return dateAdapter.compare(date, startDate) > 0 && dateAdapter.compare(date, endDate) < 0 && (!isDaySelectable || isDaySelectable(date));
+      }
+      return false;
+    },
+    [
+      dateAdapter,
+      isOutsideAllowedDates,
+      selectionVariant,
+      selectedDate,
+      hoveredDate,
+      isDaySelectable
+    ]
+  );
+  const isHoveredEnd = react.useCallback(
+    (date) => {
+      if (selectionVariant === "range" && hoveredDate && dateAdapter.isSame(date, hoveredDate, "day")) {
+        const dateRanges = Array.isArray(selectedDate) ? selectedDate : [selectedDate];
+        const isIncompleteRange = dateRanges.some(
+          (range) => (range == null ? void 0 : range.startDate) && !(range == null ? void 0 : range.endDate) && hoveredDate && dateAdapter.compare(hoveredDate, range.startDate) >= 0
+        );
+        const endDateMatches = dateRanges.some(
+          (range) => (range == null ? void 0 : range.endDate) && dateAdapter.isSame(range.endDate, date, "day")
+        );
+        return endDateMatches || isIncompleteRange;
+      }
+      if (selectionVariant === "offset" && hoveredDate) {
+        const endDate = getEndDateOffset(hoveredDate);
+        return dateAdapter.isSame(date, endDate, "day") && (!isDaySelectable || isDaySelectable(date));
+      }
+      return false;
+    },
+    [
+      dateAdapter,
+      getEndDateOffset,
+      selectionVariant,
+      selectedDate,
+      hoveredDate,
+      isDaySelectable
+    ]
+  );
+  const isSameDay = react.useCallback(
+    (date) => {
+      const dateRanges = Array.isArray(selectedDate) ? selectedDate : [selectedDate];
+      return dateRanges.some((range) => {
+        if ((selectionVariant === "range" || selectionVariant === "offset") && isDateRangeSelection(range) && (range == null ? void 0 : range.startDate) && (range == null ? void 0 : range.endDate) && dateAdapter.isSame(range == null ? void 0 : range.startDate, date, "day")) {
+          return dateAdapter.isSame(range == null ? void 0 : range.startDate, range == null ? void 0 : range.endDate, "day");
+        }
+        return false;
+      });
+    },
+    [dateAdapter, isOutsideAllowedDates, selectionVariant, selectedDate]
+  );
+  const isSelectedStart = react.useCallback(
+    (date) => {
+      if (selectionVariant === "single") {
+        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 isSelectedSpan = react.useCallback(
+    (date) => {
+      if (selectionVariant === "single") {
+        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 isSelectedEnd = react.useCallback(
+    (date) => {
+      if (selectionVariant === "single") {
+        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]
+  );
+  return react.useMemo(
+    () => ({
+      state: {
+        focusedDate,
+        focusedDateRef,
+        hoveredDate,
+        selectedDate,
+        focusableDates: getFocusableDates()
+      },
+      helpers: {
+        isHovered,
+        isSelected,
+        setHoveredDate,
+        isSameDay,
+        setSelectedDate,
+        isSelectedStart,
+        isSelectedSpan,
+        isSelectedEnd,
+        isHoveredStart,
+        isHoveredSpan,
+        isHoveredEnd,
+        isDaySelectable,
+        setFocusedDate
+      }
+    }),
+    [
+      selectedDate,
+      focusedDate,
+      focusedDateRef,
+      getFocusableDates,
+      hoveredDate,
+      isSelected,
+      isHoveredStart,
+      isHoveredSpan,
+      isHoveredEnd,
+      isSameDay,
+      isSelectedStart,
+      isSelectedSpan,
+      isSelectedEnd,
+      isDaySelectable,
+      setFocusedDate,
+      setHoveredDate,
+      setSelectedDate
+    ]
+  );
+}
+function useCalendarSelectionDay({
+  date
+}) {
+  const {
+    state: { selectionVariant },
+    helpers: {
+      setSelectedDate,
+      isSameDay,
+      isSelected,
+      isSelectedStart,
+      isSelectedSpan,
+      isSelectedEnd,
+      isHovered,
+      isHoveredStart,
+      isHoveredSpan,
+      isHoveredEnd,
+      isDaySelectable
+    }
+  } = CalendarContext.useCalendarContext();
+  const handleClick = react.useCallback(
+    (event) => {
+      setSelectedDate(event, date);
+    },
+    [date, setSelectedDate]
+  );
+  const handleKeyDown = react.useCallback(
+    (event) => {
+      switch (event.key) {
+        case "Space":
+        case "Enter":
+          setSelectedDate(event, date);
+          event.preventDefault();
+      }
+    },
+    [date, setSelectedDate]
+  );
+  const selected = isSelected(date);
+  const selectedStart = isSelectedStart(date);
+  const selectedSpan = isSelectedSpan(date);
+  const selectedEnd = isSelectedEnd(date);
+  const selectedOnSameDay = isSameDay(date);
+  const hovered = isHovered(date);
+  const hoveredStart = isHoveredStart(date);
+  const hoveredSpan = isHoveredSpan(date);
+  const hoveredEnd = isHoveredEnd(date);
+  return {
+    handleClick,
+    handleKeyDown,
+    status: {
+      hovered,
+      selected,
+      selectedStart,
+      selectedSpan,
+      selectedEnd,
+      hoveredStart,
+      hoveredSpan,
+      hoveredEnd
+    },
+    dayProps: {
+      className: clsx.clsx({
+        [withBaseName("selected")]: selectionVariant === "single" ? selected : void 0,
+        [withBaseName("selectedStart")]: selectionVariant !== "single" ? selectedStart : void 0,
+        [withBaseName("selectedSpan")]: selectionVariant !== "single" ? selectedSpan : void 0,
+        [withBaseName("selectedEnd")]: selectionVariant !== "single" ? selectedEnd : void 0,
+        [withBaseName("selectedSameDay")]: selectionVariant !== "single" && selectedOnSameDay,
+        [withBaseName("hoveredStart")]: selectionVariant !== "single" && hoveredStart,
+        [withBaseName("hoveredSpan")]: selectionVariant !== "single" && hoveredSpan,
+        [withBaseName("hoveredEnd")]: selectionVariant !== "single" && hoveredEnd
+      }),
+      "aria-pressed": selected || selectedEnd || selectedStart || selectedSpan ? "true" : void 0,
+      "aria-disabled": isDaySelectable && !isDaySelectable(date) ? "true" : void 0
+    }
+  };
+}
+
+exports.isDateRangeSelection = isDateRangeSelection;
+exports.useCalendarSelection = useCalendarSelection;
+exports.useCalendarSelectionDay = useCalendarSelectionDay;
+//# sourceMappingURL=useCalendarSelection.js.map