@salt-ds/lab 1.0.0-alpha.89 → 1.0.0-alpha.90

package/dist-cjs/calendar/useCalendarSelection.js

@@ -1,604 +0,0 @@
-'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