@salt-ds/lab 1.0.0-alpha.76 → 1.0.0-alpha.78

package/dist-cjs/calendar/useCalendar.js

@@ -7,7 +7,6 @@ var useCalendarSelection = require('./useCalendarSelection.js');
 
 const defaultIsDayUnselectable = () => false;
 const defaultIsDayHighlighted = () => false;
-const defaultIsDayDisabled = () => false;
 function useCalendar(props) {
   var _a;
   const {
@@ -22,7 +21,6 @@ function useCalendar(props) {
     hoveredDate,
     focusedDate: focusedDateProp,
     focusedDateRef,
-    isDayDisabled = defaultIsDayDisabled,
     isDayHighlighted = defaultIsDayHighlighted,
     isDayUnselectable = defaultIsDayUnselectable,
     multiselect,
@@ -43,7 +41,10 @@ function useCalendar(props) {
   const { matchedBreakpoints } = core.useBreakpoint();
   const responsiveNumberOfVisibleMonths = core.resolveResponsiveValue(numberOfVisibleMonths, matchedBreakpoints) ?? 1;
   const [visibleMonth, setVisibleMonthState] = core.useControlled({
-    controlled: visibleMonthProp ? dateAdapter.startOf(visibleMonthProp, "month") : void 0,
+    controlled: react.useMemo(
+      () => visibleMonthProp ? dateAdapter.startOf(visibleMonthProp, "month") : void 0,
+      [visibleMonthProp]
+    ),
     // biome-ignore lint/correctness/useExhaustiveDependencies: just on mount
     default: react.useMemo(
       () => dateAdapter.startOf(defaultVisibleMonth, "month"),
@@ -75,8 +76,8 @@ function useCalendar(props) {
     [dateAdapter, minDate, maxDate]
   );
   const isDaySelectable = react.useCallback(
-    (date) => !(date && (isDayUnselectable(date) || isDayDisabled(date) || isOutsideAllowedDates(date))),
-    [isDayUnselectable, isDayDisabled, isOutsideAllowedDates]
+    (date) => !(date && (isDayUnselectable(date) || isOutsideAllowedDates(date))),
+    [isDayUnselectable, isOutsideAllowedDates]
   );
   const isDayVisible = react.useCallback(
     (date) => {
@@ -116,7 +117,7 @@ function useCalendar(props) {
   react.useEffect(() => {
     var _a2;
     const focusedDate = (_a2 = selectionManager == null ? void 0 : selectionManager.state) == null ? void 0 : _a2.focusedDate;
-    const shouldTransition = focusedDate && !focusedDateProp !== void 0 && !isDayVisible(focusedDate) && isDaySelectable(focusedDate) && !isOutsideAllowedDates(focusedDate);
+    const shouldTransition = focusedDate && !focusedDateProp !== void 0 && !isDayVisible(focusedDate) && !isOutsideAllowedDates(focusedDate);
     if (shouldTransition) {
       setVisibleMonth(null, dateAdapter.startOf(focusedDate, "month"));
     }
@@ -124,7 +125,6 @@ function useCalendar(props) {
     dateAdapter,
     focusedDateProp,
     isOutsideAllowedDates,
-    isDaySelectable,
     (_a = selectionManager == null ? void 0 : selectionManager.state) == null ? void 0 : _a.focusedDate
   ]);
   const setVisibleMonth = react.useCallback(
@@ -151,7 +151,6 @@ function useCalendar(props) {
         setVisibleMonth,
         isDayUnselectable,
         isDayHighlighted,
-        isDayDisabled,
         isDayVisible,
         isOutsideAllowedDates,
         isOutsideAllowedMonths,
@@ -170,7 +169,6 @@ function useCalendar(props) {
       setVisibleMonth,
       isDayUnselectable,
       isDayHighlighted,
-      isDayDisabled,
       isDayVisible,
       isOutsideAllowedDates,
       isOutsideAllowedMonths,

package/dist-cjs/calendar/useCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCalendar.js","sources":["../src/calendar/useCalendar.ts"],"sourcesContent":["import {\n  type ResponsiveProp,\n  resolveResponsiveValue,\n  useBreakpoint,\n  useControlled,\n} from \"@salt-ds/core\";\nimport type { DateFrameworkType, Timezone } from \"@salt-ds/date-adapters\";\nimport { type SyntheticEvent, useCallback, useEffect, useMemo } from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport {\n  type UseCalendarSelectionBaseProps,\n  type UseCalendarSelectionMultiselectOffsetProps,\n  type UseCalendarSelectionMultiselectRangeProps,\n  type UseCalendarSelectionMultiselectSingleProps,\n  type UseCalendarSelectionOffsetProps,\n  type UseCalendarSelectionProps,\n  type UseCalendarSelectionRangeProps,\n  type UseCalendarSelectionSingleProps,\n  useCalendarSelection,\n} from \"./useCalendarSelection\";\n\n/**\n * Base properties for the UseCalendar hook.\n * @template TDate - The type of the date object.\n */\ninterface UseCalendarBaseProps<TDate>\n  extends UseCalendarSelectionBaseProps<TDate> {\n  /**\n   * The default visible month.\n   */\n  defaultVisibleMonth?: TDate;\n  /**\n   * Callback fired when the visible month changes.\n   * @param event - The synthetic event or null if triggered by code.\n   * @param visibleMonth - The new visible month.\n   */\n  onVisibleMonthChange?: (\n    event: SyntheticEvent | null,\n    visibleMonth: TDate,\n  ) => void;\n  /**\n   * Function to determine if a day is unselectable.\n   * @param date - The date to check.\n   * @returns A string reason if the day is unselectable, otherwise `false` or `undefined`.\n   */\n  isDayUnselectable?: (date: TDate) => string | false | undefined;\n  /**\n   * Function to determine if a day is highlighted.\n   * @param date - The date to check.\n   * @returns A string reason if the day is highlighted, otherwise `false` or `undefined`.\n   */\n  isDayHighlighted?: (date: TDate) => string | false | undefined;\n  /**\n   * Function to determine if a day is disabled.\n   * @param date - The date to check.\n   * @returns A string reason if the day is disabled, otherwise `false` or `undefined`.\n   */\n  isDayDisabled?: (date: TDate) => string | false | undefined;\n  /**\n   * If `true`, hides dates that are out of the selectable range.\n   */\n  hideOutOfRangeDates?: boolean;\n  /**\n   * The minimum selectable date.\n   */\n  minDate?: TDate;\n  /**\n   * The maximum selectable date.\n   */\n  maxDate?: TDate;\n  /**\n   * Number of visible months, maximum 12, defaults to 1.\n   */\n  numberOfVisibleMonths?: ResponsiveProp<\n    1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n  >;\n  /**\n   * If `true`, the calendar will be multiselect.\n   */\n  multiselect?: boolean;\n}\n\n/**\n * UseCalendar hook props for a single date selection.\n */\nexport interface UseCalendarSingleProps<TDate extends DateFrameworkType>\n  extends UseCalendarSelectionSingleProps<TDate>,\n    UseCalendarBaseProps<TDate> {}\n\n/**\n * UseCalendar hook props for a multi-select, single date selection.\n */\nexport interface UseCalendarMultiselectSingleProps<\n  TDate extends DateFrameworkType,\n> extends UseCalendarSelectionMultiselectSingleProps<TDate>,\n    Omit<UseCalendarBaseProps<TDate>, \"multiselect\"> {}\n\n/**\n * UseCalendar hook props for a date range selection.\n * @template TDate - The type of the date object.\n */\nexport interface UseCalendarRangeProps<TDate extends DateFrameworkType>\n  extends UseCalendarSelectionRangeProps<TDate>,\n    UseCalendarBaseProps<TDate> {}\n\n/**\n * UseCalendar hook props for a multi-select, date range selection.\n * @template TDate - The type of the date object.\n */\nexport interface UseCalendarMultiselectRangeProps<\n  TDate extends DateFrameworkType,\n> extends UseCalendarSelectionMultiselectRangeProps<TDate>,\n    Omit<UseCalendarBaseProps<TDate>, \"multiselect\"> {}\n\n/**\n * UseCalendar hook props for an offset date selection.\n * @template TDate - The type of the date object.\n */\nexport interface UseCalendarOffsetProps<TDate extends DateFrameworkType>\n  extends UseCalendarSelectionOffsetProps<TDate>,\n    UseCalendarBaseProps<TDate> {}\n\n/**\n * UseCalendar hook props for a multi-select, offset selection.\n * @template TDate - The type of the date object.\n */\nexport interface UseCalendarMultiselectOffsetProps<\n  TDate extends DateFrameworkType,\n> extends UseCalendarSelectionMultiselectOffsetProps<TDate>,\n    Omit<UseCalendarBaseProps<TDate>, \"multiselect\"> {}\n\n/**\n * UseCalendar hook props, wth the selection variant determining the return type of the date selection\n * @template TDate - The type of the date object.\n */\nexport type UseCalendarProps<TDate extends DateFrameworkType> =\n  | UseCalendarSingleProps<TDate>\n  | UseCalendarMultiselectSingleProps<TDate>\n  | UseCalendarRangeProps<TDate>\n  | UseCalendarMultiselectRangeProps<TDate>\n  | UseCalendarOffsetProps<TDate>\n  | UseCalendarMultiselectOffsetProps<TDate>;\n\n/**\n * Default function to determine if a day is unselectable.\n * @returns `false` indicating the day is selectable.\n */\nconst defaultIsDayUnselectable = (): string | false => false;\n\n/**\n * Default function to determine if a day is highlighted.\n * @returns `false` indicating the day is not highlighted.\n */\nconst defaultIsDayHighlighted = (): string | false => false;\n\n/**\n * Default function to determine if a day is disabled.\n * @returns `false` indicating the day is not disabled.\n */\nconst defaultIsDayDisabled = (): false => false;\n\n/**\n * Represents the return type of the useCalendar hook.\n * @template TDate - The type of the date object.\n */\nexport interface UseCalendarReturn<TDate extends DateFrameworkType> {\n  /**\n   * The state of the calendar.\n   */\n  state: {\n    /**\n     * The currently visible month in the calendar.\n     */\n    visibleMonth: TDate;\n\n    /**\n     * The currently focused date in the calendar, or null if no date is focused.\n     */\n    focusedDate: TDate | null;\n\n    /**\n     *  Focusable dates based on current state\n     */\n    focusableDates: TDate[];\n\n    /**\n     * The minimum selectable date in the calendar.\n     */\n    minDate: TDate;\n\n    /**\n     * The maximum selectable date in the calendar.\n     */\n    maxDate: TDate;\n\n    /**\n     * The selection variant of the calendar, indicating the type of selection allowed.\n     */\n    selectionVariant: \"single\" | \"range\" | \"offset\";\n\n    /**\n     * Whether to hide dates that are out of the selectable range.\n     */\n    hideOutOfRangeDates?: boolean;\n\n    /**\n     * Number of visible months\n     */\n    numberOfVisibleMonths: number;\n    /**\n     * Specifies the timezone behavior:\n     * - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`.\n     * - If set to \"default\", the default timezone of the date library will be used.\n     * - If set to \"system\", the local system's timezone will be applied.\n     * - If set to \"UTC\", the time will be returned in UTC.\n     * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.\n     */\n    timezone?: Timezone;\n    /**\n     * Additional state properties from selectionManager.state.\n     */\n    // biome-ignore lint/suspicious/noExplicitAny: user defined\n    [key: string]: any; // Use a more specific type if possible\n  };\n\n  /**\n   * Helper functions for interacting with the calendar.\n   */\n  helpers: {\n    /**\n     * Sets the visible month in the calendar.\n     *\n     * @param event - The synthetic event or null if triggered by code.\n     * @param newVisibleMonth - The new visible month to set.\n     */\n    setVisibleMonth: (\n      event: SyntheticEvent | null,\n      newVisibleMonth: TDate,\n    ) => void;\n\n    /**\n     * Sets the focused date in the calendar.\n     *\n     * @param event - The synthetic event or null if triggered by code.\n     * @param date - The new date to focus.\n     */\n    setFocusedDate: (event: SyntheticEvent | null, date: TDate | null) => void;\n\n    /**\n     * Determines if a day is unselectable.\n     *\n     * @param date - The date to check.\n     * @returns A string reason if the day is unselectable, otherwise `false` or `undefined`.\n     */\n    isDayUnselectable: (date: TDate) => string | false | undefined;\n\n    /**\n     * Determines if a day is highlighted.\n     *\n     * @param date - The date to check.\n     * @returns A string reason if the day is highlighted, otherwise `false` or `undefined`.\n     */\n    isDayHighlighted: (date: TDate) => string | false | undefined;\n\n    /**\n     * Determines if a day is disabled.\n     *\n     * @param date - The date to check.\n     * @returns A string reason if the day is disabled, otherwise `false` or `undefined`.\n     */\n    isDayDisabled: (date: TDate) => string | false | undefined;\n\n    /**\n     * Determines if a day is visible in the calendar.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the day is visible, otherwise `false`.\n     */\n    isDayVisible: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is outside the allowed date range.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is outside the allowed range, otherwise `false`.\n     */\n    isOutsideAllowedDates: (date: TDate) => boolean;\n\n    /**\n     * Determines if a month is outside the allowed range.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the month is outside the allowed range, otherwise `false`.\n     */\n    isOutsideAllowedMonths: (date: TDate) => boolean;\n\n    /**\n     * Determines if a year is outside the allowed range.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the year is outside the allowed range, otherwise `false`.\n     */\n    isOutsideAllowedYears: (date: TDate) => boolean;\n\n    /**\n     * Sets the selected date in the calendar.\n     *\n     * @param event - The event triggering the change.\n     * @param newSelectedDate - The new date to select.\n     */\n    setSelectedDate: (\n      event:\n        | React.KeyboardEvent<HTMLButtonElement>\n        | React.MouseEvent<HTMLButtonElement, MouseEvent>,\n      newSelectedDate: TDate,\n    ) => void;\n\n    /**\n     * Determines if a date is selected.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is selected, otherwise `false`.\n     */\n    isSelected: (date: TDate) => boolean;\n\n    /**\n     * Sets the hovered date in the calendar.\n     *\n     * @param event - The event triggering the change.\n     * @param newHoveredDate - The new date to hover.\n     */\n    setHoveredDate: (\n      event: SyntheticEvent,\n      newHoveredDate: TDate | null,\n    ) => void;\n\n    /**\n     * Determines if a date is part of a selected span.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is part of a selected span, otherwise `false`.\n     */\n    isSelectedSpan: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is part of a hovered span.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is part of a hovered span, otherwise `false`.\n     */\n    isHoveredSpan: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is the start of a selected range.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is the start of a selected range, otherwise `false`.\n     */\n    isSelectedStart: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is the end of a selected range.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is the end of a selected range, otherwise `false`.\n     */\n    isSelectedEnd: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is hovered.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is hovered, otherwise `false`.\n     */\n    isHovered: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is part of a hovered offset.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is part of a hovered offset, otherwise `false`.\n     */\n    isHoveredOffset: (date: TDate) => boolean;\n\n    /**\n     * Determines if a day is selectable.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the day is selectable, otherwise `false`.\n     */\n    isDaySelectable: (date: TDate) => boolean;\n  };\n}\n\nexport function useCalendar<TDate extends DateFrameworkType>(\n  props: UseCalendarProps<TDate>,\n): UseCalendarReturn<TDate> {\n  const {\n    dateAdapter,\n    defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate },\n  } = useLocalization<TDate>();\n  const {\n    timezone,\n    defaultSelectedDate,\n    defaultVisibleMonth = dateAdapter.today(timezone),\n    hideOutOfRangeDates,\n    hoveredDate,\n    focusedDate: focusedDateProp,\n    focusedDateRef,\n    isDayDisabled = defaultIsDayDisabled,\n    isDayHighlighted = defaultIsDayHighlighted,\n    isDayUnselectable = defaultIsDayUnselectable,\n    multiselect,\n    maxDate = defaultMaxDate,\n    minDate = defaultMinDate,\n    numberOfVisibleMonths = 1,\n    onHoveredDateChange,\n    onSelectionChange,\n    onVisibleMonthChange,\n    onFocusedDateChange,\n    select,\n    selectedDate,\n    selectionVariant,\n    visibleMonth: visibleMonthProp,\n    // startDateOffset,\n    // endDateOffset,\n  } = props;\n  const { matchedBreakpoints } = useBreakpoint();\n\n  const responsiveNumberOfVisibleMonths =\n    resolveResponsiveValue(numberOfVisibleMonths, matchedBreakpoints) ?? 1;\n\n  const [visibleMonth, setVisibleMonthState] = useControlled({\n    controlled: visibleMonthProp\n      ? dateAdapter.startOf(visibleMonthProp, \"month\")\n      : undefined,\n    // biome-ignore lint/correctness/useExhaustiveDependencies: just on mount\n    default: useMemo(\n      () => dateAdapter.startOf(defaultVisibleMonth, \"month\"),\n      [],\n    ),\n    name: \"Calendar\",\n    state: \"visibleMonth\",\n  });\n\n  const isOutsideAllowedDates = useCallback(\n    (date: TDate) => {\n      return (\n        dateAdapter.compare(date, minDate) < 0 ||\n        dateAdapter.compare(date, maxDate) > 0\n      );\n    },\n    [dateAdapter, maxDate, minDate],\n  );\n\n  const isOutsideAllowedMonths = useCallback(\n    (date: TDate) => {\n      const startOfMonth = dateAdapter.startOf(date, \"month\");\n      const endOfMonth = dateAdapter.endOf(date, \"month\");\n      return (\n        dateAdapter.compare(endOfMonth, minDate) < 0 ||\n        dateAdapter.compare(startOfMonth, maxDate) > 0\n      );\n    },\n    [dateAdapter, minDate, maxDate],\n  );\n\n  const isOutsideAllowedYears = useCallback(\n    (date: TDate) => {\n      const startOfYear = dateAdapter.startOf(date, \"year\");\n      const endOfYear = dateAdapter.endOf(date, \"year\");\n      return (\n        dateAdapter.compare(endOfYear, minDate) < 0 ||\n        dateAdapter.compare(startOfYear, maxDate) > 0\n      );\n    },\n    [dateAdapter, minDate, maxDate],\n  );\n\n  const isDaySelectable = useCallback(\n    (date?: TDate) =>\n      !(\n        date &&\n        (isDayUnselectable(date) ||\n          isDayDisabled(date) ||\n          isOutsideAllowedDates(date))\n      ),\n    [isDayUnselectable, isDayDisabled, isOutsideAllowedDates],\n  );\n\n  const isDayVisible = useCallback(\n    (date?: TDate | null) => {\n      if (!date) {\n        return false;\n      }\n      const startInsideDays = dateAdapter.startOf(visibleMonth, \"month\");\n\n      if (dateAdapter.compare(date, startInsideDays) < 0) return false;\n\n      const endVisibleMonth = dateAdapter.add(visibleMonth, {\n        months: responsiveNumberOfVisibleMonths - 1,\n      });\n      const endInsideDays = dateAdapter.endOf(endVisibleMonth, \"month\");\n\n      return !(dateAdapter.compare(date, endInsideDays) > 0);\n    },\n    [dateAdapter, responsiveNumberOfVisibleMonths, visibleMonth],\n  );\n\n  const selectionManager = useCalendarSelection<TDate>({\n    defaultSelectedDate,\n    selectedDate,\n    onSelectionChange,\n    startDateOffset:\n      props.selectionVariant === \"offset\" ? props.startDateOffset : undefined,\n    endDateOffset:\n      props.selectionVariant === \"offset\" ? props.endDateOffset : undefined,\n    isOutsideAllowedDates,\n    isDaySelectable,\n    isDayVisible,\n    focusedDate: focusedDateProp,\n    focusedDateRef,\n    multiselect,\n    onFocusedDateChange,\n    select,\n    selectionVariant,\n    onHoveredDateChange,\n    hoveredDate,\n    timezone,\n    visibleMonth,\n  } as UseCalendarSelectionProps<TDate>);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: isDayVisible ignored (due to dependency on visibleMonth)\n  useEffect(() => {\n    const focusedDate = selectionManager?.state?.focusedDate;\n    const shouldTransition =\n      focusedDate &&\n      !focusedDateProp !== undefined &&\n      !isDayVisible(focusedDate) &&\n      isDaySelectable(focusedDate) &&\n      !isOutsideAllowedDates(focusedDate);\n\n    if (shouldTransition) {\n      setVisibleMonth(null, dateAdapter.startOf(focusedDate, \"month\"));\n    }\n  }, [\n    dateAdapter,\n    focusedDateProp,\n    isOutsideAllowedDates,\n    isDaySelectable,\n    selectionManager?.state?.focusedDate,\n  ]);\n\n  const setVisibleMonth = useCallback(\n    (event: SyntheticEvent | null, newVisibleMonth: TDate) => {\n      setVisibleMonthState(newVisibleMonth);\n      onVisibleMonthChange?.(event, newVisibleMonth);\n    },\n    [onVisibleMonthChange],\n  );\n\n  return useMemo(\n    () =>\n      ({\n        state: {\n          visibleMonth,\n          timezone,\n          multiselect,\n          minDate,\n          maxDate,\n          numberOfVisibleMonths: responsiveNumberOfVisibleMonths,\n          selectionVariant,\n          hideOutOfRangeDates,\n          ...selectionManager.state,\n        },\n        helpers: {\n          setVisibleMonth,\n          isDayUnselectable,\n          isDayHighlighted,\n          isDayDisabled,\n          isDayVisible,\n          isOutsideAllowedDates,\n          isOutsideAllowedMonths,\n          isOutsideAllowedYears,\n          ...selectionManager.helpers,\n        },\n      }) as UseCalendarReturn<TDate>,\n    [\n      visibleMonth,\n      timezone,\n      multiselect,\n      minDate,\n      maxDate,\n      selectionVariant,\n      hideOutOfRangeDates,\n      setVisibleMonth,\n      isDayUnselectable,\n      isDayHighlighted,\n      isDayDisabled,\n      isDayVisible,\n      isOutsideAllowedDates,\n      isOutsideAllowedMonths,\n      isOutsideAllowedYears,\n      responsiveNumberOfVisibleMonths,\n      selectionManager,\n    ],\n  );\n}\n"],"names":["useLocalization","useBreakpoint","resolveResponsiveValue","useControlled","useMemo","useCallback","useCalendarSelection","useEffect","_a"],"mappings":"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"}
+{"version":3,"file":"useCalendar.js","sources":["../src/calendar/useCalendar.ts"],"sourcesContent":["import {\n  type ResponsiveProp,\n  resolveResponsiveValue,\n  useBreakpoint,\n  useControlled,\n} from \"@salt-ds/core\";\nimport type { DateFrameworkType, Timezone } from \"@salt-ds/date-adapters\";\nimport { type SyntheticEvent, useCallback, useEffect, useMemo } from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport {\n  type UseCalendarSelectionBaseProps,\n  type UseCalendarSelectionMultiselectOffsetProps,\n  type UseCalendarSelectionMultiselectRangeProps,\n  type UseCalendarSelectionMultiselectSingleProps,\n  type UseCalendarSelectionOffsetProps,\n  type UseCalendarSelectionProps,\n  type UseCalendarSelectionRangeProps,\n  type UseCalendarSelectionSingleProps,\n  useCalendarSelection,\n} from \"./useCalendarSelection\";\n\n/**\n * Base properties for the UseCalendar hook.\n * @template TDate - The type of the date object.\n */\ninterface UseCalendarBaseProps<TDate>\n  extends UseCalendarSelectionBaseProps<TDate> {\n  /**\n   * The default visible month.\n   */\n  defaultVisibleMonth?: TDate;\n  /**\n   * Callback fired when the visible month changes.\n   * @param event - The synthetic event or null if triggered by code.\n   * @param visibleMonth - The new visible month.\n   */\n  onVisibleMonthChange?: (\n    event: SyntheticEvent | null,\n    visibleMonth: TDate,\n  ) => void;\n  /**\n   * Function to determine if a day is unselectable.\n   * @param date - The date to check.\n   * @returns A string reason if the day is unselectable, otherwise `false` or `undefined`.\n   */\n  isDayUnselectable?: (date: TDate) => string | false | undefined;\n  /**\n   * Function to determine if a day is highlighted.\n   * @param date - The date to check.\n   * @returns A string reason if the day is highlighted, otherwise `false` or `undefined`.\n   */\n  isDayHighlighted?: (date: TDate) => string | false | undefined;\n  /**\n   * If `true`, hides dates that are out of the selectable range.\n   */\n  hideOutOfRangeDates?: boolean;\n  /**\n   * The minimum selectable date.\n   */\n  minDate?: TDate;\n  /**\n   * The maximum selectable date.\n   */\n  maxDate?: TDate;\n  /**\n   * Number of visible months, maximum 12, defaults to 1.\n   */\n  numberOfVisibleMonths?: ResponsiveProp<\n    1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n  >;\n  /**\n   * If `true`, the calendar will be multiselect.\n   */\n  multiselect?: boolean;\n}\n\n/**\n * UseCalendar hook props for a single date selection.\n */\nexport interface UseCalendarSingleProps<TDate extends DateFrameworkType>\n  extends UseCalendarSelectionSingleProps<TDate>,\n    UseCalendarBaseProps<TDate> {}\n\n/**\n * UseCalendar hook props for a multi-select, single date selection.\n */\nexport interface UseCalendarMultiselectSingleProps<\n  TDate extends DateFrameworkType,\n> extends UseCalendarSelectionMultiselectSingleProps<TDate>,\n    Omit<UseCalendarBaseProps<TDate>, \"multiselect\"> {}\n\n/**\n * UseCalendar hook props for a date range selection.\n * @template TDate - The type of the date object.\n */\nexport interface UseCalendarRangeProps<TDate extends DateFrameworkType>\n  extends UseCalendarSelectionRangeProps<TDate>,\n    UseCalendarBaseProps<TDate> {}\n\n/**\n * UseCalendar hook props for a multi-select, date range selection.\n * @template TDate - The type of the date object.\n */\nexport interface UseCalendarMultiselectRangeProps<\n  TDate extends DateFrameworkType,\n> extends UseCalendarSelectionMultiselectRangeProps<TDate>,\n    Omit<UseCalendarBaseProps<TDate>, \"multiselect\"> {}\n\n/**\n * UseCalendar hook props for an offset date selection.\n * @template TDate - The type of the date object.\n */\nexport interface UseCalendarOffsetProps<TDate extends DateFrameworkType>\n  extends UseCalendarSelectionOffsetProps<TDate>,\n    UseCalendarBaseProps<TDate> {}\n\n/**\n * UseCalendar hook props for a multi-select, offset selection.\n * @template TDate - The type of the date object.\n */\nexport interface UseCalendarMultiselectOffsetProps<\n  TDate extends DateFrameworkType,\n> extends UseCalendarSelectionMultiselectOffsetProps<TDate>,\n    Omit<UseCalendarBaseProps<TDate>, \"multiselect\"> {}\n\n/**\n * UseCalendar hook props, wth the selection variant determining the return type of the date selection\n * @template TDate - The type of the date object.\n */\nexport type UseCalendarProps<TDate extends DateFrameworkType> =\n  | UseCalendarSingleProps<TDate>\n  | UseCalendarMultiselectSingleProps<TDate>\n  | UseCalendarRangeProps<TDate>\n  | UseCalendarMultiselectRangeProps<TDate>\n  | UseCalendarOffsetProps<TDate>\n  | UseCalendarMultiselectOffsetProps<TDate>;\n\n/**\n * Default function to determine if a day is unselectable.\n * @returns `false` indicating the day is selectable.\n */\nconst defaultIsDayUnselectable = (): string | false => false;\n\n/**\n * Default function to determine if a day is highlighted.\n * @returns `false` indicating the day is not highlighted.\n */\nconst defaultIsDayHighlighted = (): string | false => false;\n\n/**\n * Represents the return type of the useCalendar hook.\n * @template TDate - The type of the date object.\n */\nexport interface UseCalendarReturn<TDate extends DateFrameworkType> {\n  /**\n   * The state of the calendar.\n   */\n  state: {\n    /**\n     * The currently visible month in the calendar.\n     */\n    visibleMonth: TDate;\n\n    /**\n     * The currently focused date in the calendar, or null if no date is focused.\n     */\n    focusedDate: TDate | null;\n\n    /**\n     *  Focusable dates based on current state\n     */\n    focusableDates: TDate[];\n\n    /**\n     * The minimum selectable date in the calendar.\n     */\n    minDate: TDate;\n\n    /**\n     * The maximum selectable date in the calendar.\n     */\n    maxDate: TDate;\n\n    /**\n     * The selection variant of the calendar, indicating the type of selection allowed.\n     */\n    selectionVariant: \"single\" | \"range\" | \"offset\";\n\n    /**\n     * Whether to hide dates that are out of the selectable range.\n     */\n    hideOutOfRangeDates?: boolean;\n\n    /**\n     * Number of visible months\n     */\n    numberOfVisibleMonths: number;\n    /**\n     * Specifies the timezone behavior:\n     * - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`.\n     * - If set to \"default\", the default timezone of the date library will be used.\n     * - If set to \"system\", the local system's timezone will be applied.\n     * - If set to \"UTC\", the time will be returned in UTC.\n     * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.\n     */\n    timezone?: Timezone;\n    /**\n     * Additional state properties from selectionManager.state.\n     */\n    // biome-ignore lint/suspicious/noExplicitAny: user defined\n    [key: string]: any; // Use a more specific type if possible\n  };\n\n  /**\n   * Helper functions for interacting with the calendar.\n   */\n  helpers: {\n    /**\n     * Sets the visible month in the calendar.\n     *\n     * @param event - The synthetic event or null if triggered by code.\n     * @param newVisibleMonth - The new visible month to set.\n     */\n    setVisibleMonth: (\n      event: SyntheticEvent | null,\n      newVisibleMonth: TDate,\n    ) => void;\n\n    /**\n     * Sets the focused date in the calendar.\n     *\n     * @param event - The synthetic event or null if triggered by code.\n     * @param date - The new date to focus.\n     */\n    setFocusedDate: (event: SyntheticEvent | null, date: TDate | null) => void;\n\n    /**\n     * Determines if a day is unselectable.\n     *\n     * @param date - The date to check.\n     * @returns A string reason if the day is unselectable, otherwise `false` or `undefined`.\n     */\n    isDayUnselectable: (date: TDate) => string | false | undefined;\n\n    /**\n     * Determines if a day is highlighted.\n     *\n     * @param date - The date to check.\n     * @returns A string reason if the day is highlighted, otherwise `false` or `undefined`.\n     */\n    isDayHighlighted: (date: TDate) => string | false | undefined;\n\n    /**\n     * Determines if a day is visible in the calendar.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the day is visible, otherwise `false`.\n     */\n    isDayVisible: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is outside the allowed date range.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is outside the allowed range, otherwise `false`.\n     */\n    isOutsideAllowedDates: (date: TDate) => boolean;\n\n    /**\n     * Determines if a month is outside the allowed range.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the month is outside the allowed range, otherwise `false`.\n     */\n    isOutsideAllowedMonths: (date: TDate) => boolean;\n\n    /**\n     * Determines if a year is outside the allowed range.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the year is outside the allowed range, otherwise `false`.\n     */\n    isOutsideAllowedYears: (date: TDate) => boolean;\n\n    /**\n     * Determines if the date range is on the same day\n     *\n     * @param date - The range to check.\n     * @returns `true` if the range start and end date are the same\n     */\n    isSameDay: (date: TDate) => boolean;\n\n    /**\n     * Sets the selected date in the calendar.\n     *\n     * @param event - The event triggering the change.\n     * @param newSelectedDate - The new date to select.\n     */\n    setSelectedDate: (\n      event:\n        | React.KeyboardEvent<HTMLButtonElement>\n        | React.MouseEvent<HTMLButtonElement, MouseEvent>,\n      newSelectedDate: TDate,\n    ) => void;\n\n    /**\n     * Determines if a date is selected.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is selected, otherwise `false`.\n     */\n    isSelected: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is hovered.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is hovered, otherwise `false`.\n     */\n    isHovered: (date: TDate) => boolean;\n\n    /**\n     * Sets the hovered date in the calendar.\n     *\n     * @param event - The event triggering the change.\n     * @param newHoveredDate - The new date to hover.\n     */\n    setHoveredDate: (\n      event: SyntheticEvent,\n      newHoveredDate: TDate | null,\n    ) => void;\n\n    /**\n     * Determines if a date is part of a selected span.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is part of a selected span, otherwise `false`.\n     */\n    isSelectedSpan: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is the start of a selected range.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is the start of a selected range, otherwise `false`.\n     */\n    isSelectedStart: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is the end of a selected range.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is the end of a selected range, otherwise `false`.\n     */\n    isSelectedEnd: (date: TDate) => boolean;\n\n    /**\n     * Determines if the hovered and a new date range would be created, if selected.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is the start of a hovered offset, otherwise `false`.\n     */\n    isHoveredStart: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is part of a hovered range.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is part of a hovered offset, otherwise `false`.\n     */\n    isHoveredSpan: (date: TDate) => boolean;\n\n    /**\n     * Determines if the hovered and a date range would be completed, if selected.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is the end of a hovered offset, otherwise `false`.\n     */\n    isHoveredEnd: (date: TDate) => boolean;\n\n    /**\n     * Determines if a day is selectable.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the day is selectable, otherwise `false`.\n     */\n    isDaySelectable: (date: TDate) => boolean;\n  };\n}\n\nexport function useCalendar<TDate extends DateFrameworkType>(\n  props: UseCalendarProps<TDate>,\n): UseCalendarReturn<TDate> {\n  const {\n    dateAdapter,\n    defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate },\n  } = useLocalization<TDate>();\n  const {\n    timezone,\n    defaultSelectedDate,\n    defaultVisibleMonth = dateAdapter.today(timezone),\n    hideOutOfRangeDates,\n    hoveredDate,\n    focusedDate: focusedDateProp,\n    focusedDateRef,\n    isDayHighlighted = defaultIsDayHighlighted,\n    isDayUnselectable = defaultIsDayUnselectable,\n    multiselect,\n    maxDate = defaultMaxDate,\n    minDate = defaultMinDate,\n    numberOfVisibleMonths = 1,\n    onHoveredDateChange,\n    onSelectionChange,\n    onVisibleMonthChange,\n    onFocusedDateChange,\n    select,\n    selectedDate,\n    selectionVariant,\n    visibleMonth: visibleMonthProp,\n    // startDateOffset,\n    // endDateOffset,\n  } = props;\n  const { matchedBreakpoints } = useBreakpoint();\n\n  const responsiveNumberOfVisibleMonths =\n    resolveResponsiveValue(numberOfVisibleMonths, matchedBreakpoints) ?? 1;\n\n  const [visibleMonth, setVisibleMonthState] = useControlled({\n    controlled: useMemo(\n      () =>\n        visibleMonthProp\n          ? dateAdapter.startOf(visibleMonthProp, \"month\")\n          : undefined,\n      [visibleMonthProp],\n    ),\n    // biome-ignore lint/correctness/useExhaustiveDependencies: just on mount\n    default: useMemo(\n      () => dateAdapter.startOf(defaultVisibleMonth, \"month\"),\n      [],\n    ),\n    name: \"Calendar\",\n    state: \"visibleMonth\",\n  });\n\n  const isOutsideAllowedDates = useCallback(\n    (date: TDate) => {\n      return (\n        dateAdapter.compare(date, minDate) < 0 ||\n        dateAdapter.compare(date, maxDate) > 0\n      );\n    },\n    [dateAdapter, maxDate, minDate],\n  );\n\n  const isOutsideAllowedMonths = useCallback(\n    (date: TDate) => {\n      const startOfMonth = dateAdapter.startOf(date, \"month\");\n      const endOfMonth = dateAdapter.endOf(date, \"month\");\n      return (\n        dateAdapter.compare(endOfMonth, minDate) < 0 ||\n        dateAdapter.compare(startOfMonth, maxDate) > 0\n      );\n    },\n    [dateAdapter, minDate, maxDate],\n  );\n\n  const isOutsideAllowedYears = useCallback(\n    (date: TDate) => {\n      const startOfYear = dateAdapter.startOf(date, \"year\");\n      const endOfYear = dateAdapter.endOf(date, \"year\");\n      return (\n        dateAdapter.compare(endOfYear, minDate) < 0 ||\n        dateAdapter.compare(startOfYear, maxDate) > 0\n      );\n    },\n    [dateAdapter, minDate, maxDate],\n  );\n\n  const isDaySelectable = useCallback(\n    (date?: TDate) =>\n      !(date && (isDayUnselectable(date) || isOutsideAllowedDates(date))),\n    [isDayUnselectable, isOutsideAllowedDates],\n  );\n\n  const isDayVisible = useCallback(\n    (date?: TDate | null) => {\n      if (!date) {\n        return false;\n      }\n      const startInsideDays = dateAdapter.startOf(visibleMonth, \"month\");\n\n      if (dateAdapter.compare(date, startInsideDays) < 0) return false;\n\n      const endVisibleMonth = dateAdapter.add(visibleMonth, {\n        months: responsiveNumberOfVisibleMonths - 1,\n      });\n      const endInsideDays = dateAdapter.endOf(endVisibleMonth, \"month\");\n\n      return !(dateAdapter.compare(date, endInsideDays) > 0);\n    },\n    [dateAdapter, responsiveNumberOfVisibleMonths, visibleMonth],\n  );\n\n  const selectionManager = useCalendarSelection<TDate>({\n    defaultSelectedDate,\n    selectedDate,\n    onSelectionChange,\n    startDateOffset:\n      props.selectionVariant === \"offset\" ? props.startDateOffset : undefined,\n    endDateOffset:\n      props.selectionVariant === \"offset\" ? props.endDateOffset : undefined,\n    isOutsideAllowedDates,\n    isDaySelectable,\n    isDayVisible,\n    focusedDate: focusedDateProp,\n    focusedDateRef,\n    multiselect,\n    onFocusedDateChange,\n    select,\n    selectionVariant,\n    onHoveredDateChange,\n    hoveredDate,\n    timezone,\n    visibleMonth,\n  } as UseCalendarSelectionProps<TDate>);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: isDayVisible ignored (due to dependency on visibleMonth)\n  useEffect(() => {\n    const focusedDate = selectionManager?.state?.focusedDate;\n    const shouldTransition =\n      focusedDate &&\n      !focusedDateProp !== undefined &&\n      !isDayVisible(focusedDate) &&\n      !isOutsideAllowedDates(focusedDate);\n\n    if (shouldTransition) {\n      setVisibleMonth(null, dateAdapter.startOf(focusedDate, \"month\"));\n    }\n  }, [\n    dateAdapter,\n    focusedDateProp,\n    isOutsideAllowedDates,\n    selectionManager?.state?.focusedDate,\n  ]);\n\n  const setVisibleMonth = useCallback(\n    (event: SyntheticEvent | null, newVisibleMonth: TDate) => {\n      setVisibleMonthState(newVisibleMonth);\n      onVisibleMonthChange?.(event, newVisibleMonth);\n    },\n    [onVisibleMonthChange],\n  );\n\n  return useMemo(\n    () =>\n      ({\n        state: {\n          visibleMonth,\n          timezone,\n          multiselect,\n          minDate,\n          maxDate,\n          numberOfVisibleMonths: responsiveNumberOfVisibleMonths,\n          selectionVariant,\n          hideOutOfRangeDates,\n          ...selectionManager.state,\n        },\n        helpers: {\n          setVisibleMonth,\n          isDayUnselectable,\n          isDayHighlighted,\n          isDayVisible,\n          isOutsideAllowedDates,\n          isOutsideAllowedMonths,\n          isOutsideAllowedYears,\n          ...selectionManager.helpers,\n        },\n      }) as UseCalendarReturn<TDate>,\n    [\n      visibleMonth,\n      timezone,\n      multiselect,\n      minDate,\n      maxDate,\n      selectionVariant,\n      hideOutOfRangeDates,\n      setVisibleMonth,\n      isDayUnselectable,\n      isDayHighlighted,\n      isDayVisible,\n      isOutsideAllowedDates,\n      isOutsideAllowedMonths,\n      isOutsideAllowedYears,\n      responsiveNumberOfVisibleMonths,\n      selectionManager,\n    ],\n  );\n}\n"],"names":["useLocalization","useBreakpoint","resolveResponsiveValue","useControlled","useMemo","useCallback","useCalendarSelection","useEffect","_a"],"mappings":"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"}

package/dist-cjs/calendar/useCalendarDay.js

@@ -19,45 +19,42 @@ function useCalendarDay(props) {
     helpers: {
       setHoveredDate,
       isDayUnselectable,
-      isDaySelectable,
       isDayHighlighted,
-      isDayDisabled,
       isOutsideAllowedMonths
     }
   } = CalendarContext.useCalendarContext();
   const selectionManager = useCalendarSelection.useCalendarSelectionDay({ date });
   const focusManager = useFocusManagement.useFocusManagement({ date });
   const handleClick = (event) => {
-    selectionManager == null ? void 0 : selectionManager.handleClick(event);
+    selectionManager.handleClick(event);
     focusManager.handleClick(event);
   };
   const handleKeyDown = (event) => {
     focusManager.handleKeyDown(event);
-    selectionManager == null ? void 0 : selectionManager.handleKeyDown(event);
+    selectionManager.handleKeyDown(event);
   };
   const handleFocus = (event) => {
     focusManager.handleFocus(event);
     setHoveredDate(event, date);
   };
-  const handleMouseEnter = (event) => {
+  const handleMouseMove = (event) => {
     setHoveredDate(event, date);
   };
   const eventHandlers = {
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     onFocus: handleFocus,
-    onMouseEnter: handleMouseEnter
+    onMouseMove: handleMouseMove
   };
-  const outOfRange = !dateAdapter.isSame(date, month, "month");
-  const focused = focusedDate && dateAdapter.isSame(date, focusedDate, "day") && !outOfRange;
+  const focused = focusedDate && dateAdapter.isSame(date, focusedDate, "day");
   const tabIndex = focusableDates.find(
     (tabbableDate) => dateAdapter.isSame(date, tabbableDate, "day")
   ) ? 0 : -1;
   const today = dateAdapter.isSame(dateAdapter.today(timezone), date, "day");
   const unselectableReason = isDayUnselectable(date);
   const highlightedReason = isDayHighlighted(date);
-  const disabled = isDayDisabled(date) || outOfRange && isOutsideAllowedMonths(date) || isDaySelectable && !isDaySelectable(date);
-  const unselectable = Boolean(unselectableReason);
+  const outOfRange = !dateAdapter.isSame(date, month, "month");
+  const unselectable = Boolean(unselectableReason) || isOutsideAllowedMonths(date);
   const highlighted = Boolean(highlightedReason);
   const hidden = hideOutOfRangeDates ? outOfRange : false;
   return {
@@ -67,7 +64,6 @@ function useCalendarDay(props) {
       unselectable,
       focused,
       hidden,
-      disabled,
       highlighted,
       ...selectionManager.status
     },

package/dist-cjs/calendar/useCalendarDay.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCalendarDay.js","sources":["../src/calendar/useCalendarDay.ts"],"sourcesContent":["import type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport type {\n  ComponentPropsWithoutRef,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\nimport { useFocusManagement } from \"./internal/useFocusManagement\";\nimport { useCalendarSelectionDay } from \"./useCalendarSelection\";\n\n/**\n * Interface representing the status of a day in the Calendar.\n */\nexport interface DayStatus {\n  /**\n   * If `true`, the day is out of the selectable range.\n   */\n  outOfRange?: boolean;\n  /**\n   * If `true`, the day is selected.\n   */\n  selected?: boolean;\n  /**\n   * If `true`, the day is today.\n   */\n  today?: boolean;\n  /**\n   * If set, the day is unselectable with a reason.\n   */\n  unselectable?: string | false;\n  /**\n   * If set, the day is highlighted with a reason.\n   */\n  highlighted?: string | false;\n  /**\n   * If `true`, the day is focused.\n   */\n  focused?: boolean;\n  /**\n   * If `true`, the day is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the day is hidden.\n   */\n  hidden?: boolean;\n}\n\n/**\n * UseCalendar hook props to return a calendar day's status\n * @template TDate - The type of the date object.\n */\nexport interface useCalendarDayProps<TDate> {\n  /**\n   * The date of the calendar day.\n   */\n  date: TDate;\n  /**\n   * The month of the calendar day.\n   */\n  month: TDate;\n}\n\nexport function useCalendarDay<TDate extends DateFrameworkType>(\n  props: useCalendarDayProps<TDate>,\n) {\n  const { date, month } = props;\n  const { dateAdapter } = useLocalization<TDate>();\n  const {\n    state: {\n      focusedDate,\n      focusedDateRef,\n      hideOutOfRangeDates,\n      timezone,\n      focusableDates,\n    },\n    helpers: {\n      setHoveredDate,\n      isDayUnselectable,\n      isDaySelectable,\n      isDayHighlighted,\n      isDayDisabled,\n      isOutsideAllowedMonths,\n    },\n  } = useCalendarContext<TDate>();\n  const selectionManager = useCalendarSelectionDay<TDate>({ date });\n  const focusManager = useFocusManagement<TDate>({ date });\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    selectionManager?.handleClick(event);\n    focusManager.handleClick(event);\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLButtonElement> = (event) => {\n    focusManager.handleKeyDown(event);\n    selectionManager?.handleKeyDown(event);\n  };\n\n  const handleFocus: FocusEventHandler<HTMLButtonElement> = (event) => {\n    focusManager.handleFocus(event);\n    setHoveredDate(event, date);\n  };\n\n  const handleMouseEnter: MouseEventHandler<HTMLButtonElement> = (event) => {\n    setHoveredDate(event, date);\n  };\n\n  const eventHandlers = {\n    onClick: handleClick,\n    onKeyDown: handleKeyDown,\n    onFocus: handleFocus,\n    onMouseEnter: handleMouseEnter,\n  };\n\n  const outOfRange = !dateAdapter.isSame(date, month, \"month\");\n  const focused =\n    focusedDate && dateAdapter.isSame(date, focusedDate, \"day\") && !outOfRange;\n  const tabIndex = focusableDates.find((tabbableDate) =>\n    dateAdapter.isSame(date, tabbableDate, \"day\"),\n  )\n    ? 0\n    : -1;\n  const today = dateAdapter.isSame(dateAdapter.today(timezone), date, \"day\");\n\n  const unselectableReason = isDayUnselectable(date);\n  const highlightedReason = isDayHighlighted(date);\n\n  const disabled =\n    isDayDisabled(date) ||\n    (outOfRange && isOutsideAllowedMonths(date)) ||\n    (isDaySelectable && !isDaySelectable(date));\n  const unselectable = Boolean(unselectableReason);\n  const highlighted = Boolean(highlightedReason);\n  const hidden = hideOutOfRangeDates ? outOfRange : false;\n\n  return {\n    status: {\n      outOfRange,\n      today,\n      unselectable,\n      focused,\n      hidden,\n      disabled,\n      highlighted,\n      ...selectionManager.status,\n    } as DayStatus,\n    dayProps: {\n      tabIndex,\n      \"aria-current\": today ? \"date\" : undefined,\n      \"aria-hidden\": hidden ? \"true\" : undefined,\n      ...eventHandlers,\n      ...selectionManager.dayProps,\n    } as ComponentPropsWithoutRef<\"button\">,\n    focusedDateRef: focused ? focusedDateRef : null,\n    unselectableReason,\n    highlightedReason,\n  };\n}\n"],"names":["useLocalization","useCalendarContext","useCalendarSelectionDay","useFocusManagement"],"mappings":"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"}
+{"version":3,"file":"useCalendarDay.js","sources":["../src/calendar/useCalendarDay.ts"],"sourcesContent":["import type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport type {\n  ComponentPropsWithoutRef,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\nimport { useFocusManagement } from \"./internal/useFocusManagement\";\nimport { useCalendarSelectionDay } from \"./useCalendarSelection\";\n\n/**\n * Interface representing the status of a day in the Calendar.\n */\nexport interface DayStatus {\n  /**\n   * If `true`, the day is selectable but outside of current month.\n   */\n  outOfRange?: boolean;\n  /**\n   * If `true`, the day is selected.\n   */\n  selected?: boolean;\n  /**\n   * If `true`, the day is today.\n   */\n  today?: boolean;\n  /**\n   * If set, the day is unselectable with a reason.\n   */\n  unselectable?: string | false;\n  /**\n   * If set, the day is highlighted with a reason.\n   */\n  highlighted?: string | false;\n  /**\n   * If `true`, the day is focused.\n   */\n  focused?: boolean;\n  /**\n   * If `true`, the day is hidden.\n   */\n  hidden?: boolean;\n}\n\n/**\n * UseCalendar hook props to return a calendar day's status\n * @template TDate - The type of the date object.\n */\nexport interface useCalendarDayProps<TDate> {\n  /**\n   * The date of the calendar day.\n   */\n  date: TDate;\n  /**\n   * The month of the calendar day.\n   */\n  month: TDate;\n}\n\nexport function useCalendarDay<TDate extends DateFrameworkType>(\n  props: useCalendarDayProps<TDate>,\n) {\n  const { date, month } = props;\n  const { dateAdapter } = useLocalization<TDate>();\n  const {\n    state: {\n      focusedDate,\n      focusedDateRef,\n      hideOutOfRangeDates,\n      timezone,\n      focusableDates,\n    },\n    helpers: {\n      setHoveredDate,\n      isDayUnselectable,\n      isDayHighlighted,\n      isOutsideAllowedMonths,\n    },\n  } = useCalendarContext<TDate>();\n  const selectionManager = useCalendarSelectionDay<TDate>({ date });\n  const focusManager = useFocusManagement<TDate>({ date });\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    selectionManager.handleClick(event);\n    focusManager.handleClick(event);\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLButtonElement> = (event) => {\n    focusManager.handleKeyDown(event);\n    selectionManager.handleKeyDown(event);\n  };\n\n  const handleFocus: FocusEventHandler<HTMLButtonElement> = (event) => {\n    focusManager.handleFocus(event);\n    setHoveredDate(event, date);\n  };\n\n  const handleMouseMove: MouseEventHandler<HTMLButtonElement> = (event) => {\n    setHoveredDate(event, date);\n  };\n\n  const eventHandlers = {\n    onClick: handleClick,\n    onKeyDown: handleKeyDown,\n    onFocus: handleFocus,\n    onMouseMove: handleMouseMove,\n  };\n\n  const focused = focusedDate && dateAdapter.isSame(date, focusedDate, \"day\");\n  const tabIndex = focusableDates.find((tabbableDate) =>\n    dateAdapter.isSame(date, tabbableDate, \"day\"),\n  )\n    ? 0\n    : -1;\n  const today = dateAdapter.isSame(dateAdapter.today(timezone), date, \"day\");\n\n  const unselectableReason = isDayUnselectable(date);\n  const highlightedReason = isDayHighlighted(date);\n\n  const outOfRange = !dateAdapter.isSame(date, month, \"month\");\n  const unselectable =\n    Boolean(unselectableReason) || isOutsideAllowedMonths(date);\n  const highlighted = Boolean(highlightedReason);\n  const hidden = hideOutOfRangeDates ? outOfRange : false;\n\n  return {\n    status: {\n      outOfRange,\n      today,\n      unselectable,\n      focused,\n      hidden,\n      highlighted,\n      ...selectionManager.status,\n    } as DayStatus,\n    dayProps: {\n      tabIndex,\n      \"aria-current\": today ? \"date\" : undefined,\n      \"aria-hidden\": hidden ? \"true\" : undefined,\n      ...eventHandlers,\n      ...selectionManager.dayProps,\n    } as ComponentPropsWithoutRef<\"button\">,\n    focusedDateRef: focused ? focusedDateRef : null,\n    unselectableReason,\n    highlightedReason,\n  };\n}\n"],"names":["useLocalization","useCalendarContext","useCalendarSelectionDay","useFocusManagement"],"mappings":"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"}

package/dist-cjs/calendar/useCalendarSelection.js

@@ -189,24 +189,13 @@ 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)
+      if (selectionVariant === "single") {
+        const singleDates = Array.isArray(selectedDate) ? selectedDate : [selectedDate];
+        return singleDates.some(
+          (singleDate) => dateAdapter.isSame(singleDate, date, "day")
         );
       }
-      switch (selectionVariant) {
-        case "single":
-          return isSingleDateSelected(
-            selectedDate
-          );
-        case "range":
-        case "offset":
-          return isDateRangeSelected(selectedDate);
-        default:
-          return false;
-      }
+      return false;
     },
     [dateAdapter, selectedDate, selectionVariant]
   );
@@ -344,29 +333,56 @@ function useCalendarSelection(props) {
     timezone,
     visibleMonth
   ]);
-  const isSelectedSpan = react.useCallback(
+  const isHoveredStart = react.useCallback(
     (date) => {
-      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;
-      });
+      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, isOutsideAllowedDates, selectionVariant, selectedDate]
+    [
+      dateAdapter,
+      getStartDateOffset,
+      selectionVariant,
+      selectedDate,
+      hoveredDate,
+      isDaySelectable
+    ]
   );
   const isHoveredSpan = react.useCallback(
     (date) => {
-      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;
-      });
+      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,
@@ -377,8 +393,50 @@ function useCalendarSelection(props) {
       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)) {
@@ -389,35 +447,35 @@ function useCalendarSelection(props) {
     },
     [dateAdapter, isOutsideAllowedDates, selectionVariant, selectedDate]
   );
-  const isSelectedEnd = react.useCallback(
+  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.endDate) && !isOutsideAllowedDates(range.endDate)) {
-          return dateAdapter.isSame(range.endDate, date, "day");
+        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 isHoveredOffset = react.useCallback(
+  const isSelectedEnd = react.useCallback(
     (date) => {
-      if (hoveredDate && selectionVariant === "offset") {
-        const startDate = getStartDateOffset(hoveredDate);
-        const endDate = getEndDateOffset(hoveredDate);
-        return dateAdapter.compare(date, startDate) >= 0 && dateAdapter.compare(date, endDate) <= 0 && (!isDaySelectable || isDaySelectable(date));
+      if (selectionVariant === "single") {
+        return false;
       }
-      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,
-      getStartDateOffset,
-      getEndDateOffset,
-      hoveredDate,
-      isDaySelectable,
-      selectionVariant
-    ]
+    [dateAdapter, isOutsideAllowedDates, selectionVariant, selectedDate]
   );
   return react.useMemo(
     () => ({
@@ -429,15 +487,17 @@ function useCalendarSelection(props) {
         focusableDates: getFocusableDates()
       },
       helpers: {
-        isSelected,
-        setSelectedDate,
         isHovered,
+        isSelected,
         setHoveredDate,
-        isSelectedSpan,
-        isHoveredSpan,
+        isSameDay,
+        setSelectedDate,
         isSelectedStart,
+        isSelectedSpan,
         isSelectedEnd,
-        isHoveredOffset,
+        isHoveredStart,
+        isHoveredSpan,
+        isHoveredEnd,
         isDaySelectable,
         setFocusedDate
       }
@@ -449,12 +509,13 @@ function useCalendarSelection(props) {
       getFocusableDates,
       hoveredDate,
       isSelected,
-      isHovered,
-      isSelectedSpan,
+      isHoveredStart,
       isHoveredSpan,
+      isHoveredEnd,
+      isSameDay,
       isSelectedStart,
+      isSelectedSpan,
       isSelectedEnd,
-      isHoveredOffset,
       isDaySelectable,
       setFocusedDate,
       setHoveredDate,
@@ -466,15 +527,18 @@ function useCalendarSelectionDay({
   date
 }) {
   const {
+    state: { selectionVariant },
     helpers: {
       setSelectedDate,
+      isSameDay,
       isSelected,
-      isSelectedSpan,
-      isHoveredSpan,
       isSelectedStart,
+      isSelectedSpan,
       isSelectedEnd,
       isHovered,
-      isHoveredOffset,
+      isHoveredStart,
+      isHoveredSpan,
+      isHoveredEnd,
       isDaySelectable
     }
   } = CalendarContext.useCalendarContext();
@@ -496,33 +560,37 @@ function useCalendarSelectionDay({
     [date, setSelectedDate]
   );
   const selected = isSelected(date);
-  const selectedSpan = isSelectedSpan(date);
-  const hoveredSpan = isHoveredSpan(date);
   const selectedStart = isSelectedStart(date);
+  const selectedSpan = isSelectedSpan(date);
   const selectedEnd = isSelectedEnd(date);
+  const selectedOnSameDay = isSameDay(date);
   const hovered = isHovered(date);
-  const hoveredOffset = isHoveredOffset(date);
+  const hoveredStart = isHoveredStart(date);
+  const hoveredSpan = isHoveredSpan(date);
+  const hoveredEnd = isHoveredEnd(date);
   return {
     handleClick,
     handleKeyDown,
     status: {
+      hovered,
       selected,
-      selectedSpan,
-      hoveredSpan,
       selectedStart,
+      selectedSpan,
       selectedEnd,
-      hovered,
-      hoveredOffset
+      hoveredStart,
+      hoveredSpan,
+      hoveredEnd
     },
     dayProps: {
       className: clsx.clsx({
-        [withBaseName("selected")]: selected,
-        [withBaseName("selectedSpan")]: selectedSpan,
-        [withBaseName("hoveredSpan")]: hoveredSpan,
-        [withBaseName("selectedStart")]: selectedStart,
-        [withBaseName("selectedEnd")]: selectedEnd,
-        [withBaseName("hovered")]: hovered,
-        [withBaseName("hoveredOffset")]: hoveredOffset
+        [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