- );
-};
-CalendarDayGrid.displayName = 'CalendarDayGrid';
-
-/**
- * When given work week, if the days are non-contiguous, the hover states look really weird. So for non-contiguous
- * work weeks, we'll just show week view instead.
- */
-function getDateRangeTypeToUse(dateRangeType: DateRangeType, workWeekDays: DayOfWeek[] | undefined): DateRangeType {
- if (workWeekDays && dateRangeType === DateRangeType.WorkWeek) {
- const sortedWWDays = workWeekDays.slice().sort();
- let isContiguous = true;
- for (let i = 1; i < sortedWWDays.length; i++) {
- if (sortedWWDays[i] !== sortedWWDays[i - 1] + 1) {
- isContiguous = false;
- break;
- }
- }
-
- if (!isContiguous || workWeekDays.length === 0) {
- return DateRangeType.Week;
- }
- }
-
- return dateRangeType;
-}
diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarDayGrid.types.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarDayGrid.types.ts
deleted file mode 100644
index a1ef13b5c6ce74..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarDayGrid.types.ts
+++ /dev/null
@@ -1,286 +0,0 @@
-import * as React from 'react';
-import { AnimationDirection } from '../Calendar/Calendar.types';
-import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '../../utils';
-import type { CalendarStrings, DateFormatting, DayGridOptions } from '../../utils';
-
-/**
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export interface ICalendarDayGrid {
- focus(): void;
-}
-
-/**
- * @internal
- */
-export interface CalendarDayGridProps extends DayGridOptions {
- /**
- * Optional callback to access the ICalendarDayGrid interface. Use this instead of ref for accessing
- * the public methods and properties of the component.
- */
- componentRef?: React.RefObject;
-
- /**
- * Additional CSS class(es) to apply to the CalendarDayGrid.
- */
- className?: string;
-
- /**
- * Localized strings to use in the CalendarDayGrid
- */
- strings: CalendarStrings;
-
- /**
- * The currently selected date
- */
- selectedDate: Date;
-
- /**
- * The currently navigated date
- */
- navigatedDate: Date;
-
- /**
- * Callback issued when a date is selected
- * @param date - The date the user selected
- * @param selectedDateRangeArray - The resultant list of dates that are selected based on the date range type set
- * for the component.
- */
- onSelectDate?: (date: Date, selectedDateRangeArray?: Date[]) => void;
-
- /**
- * Callback issued when a date in the calendar is navigated
- * @param date - The date that is navigated to
- * @param focusOnNavigatedDay - Whether to set the focus to the navigated date.
- */
- onNavigateDate: (date: Date, focusOnNavigatedDay: boolean) => void;
-
- /**
- * Callback issued when calendar day is closed
- */
- onDismiss?: () => void;
-
- /**
- * The first day of the week for your locale.
- * @default DayOfWeek.Sunday
- */
- firstDayOfWeek: DayOfWeek;
-
- /**
- * Defines when the first week of the year should start, FirstWeekOfYear.FirstDay,
- * FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values
- * @default FirstWeekOfYear.FirstDay
- */
- firstWeekOfYear: FirstWeekOfYear;
-
- /**
- * The date range type indicating how many days should be selected as the user
- * selects days
- * @default DateRangeType.Day
- */
- dateRangeType: DateRangeType;
-
- /**
- * The number of days to select while dateRangeType === DateRangeType.Day. Used in order to have multi-day
- * views.
- * @default 1
- */
- daysToSelectInDayView?: number;
-
- /**
- * Value of today. If unspecified, current time in client machine will be used.
- */
- today?: Date;
-
- /**
- * Whether the calendar should show the week number (weeks 1 to 53) before each week row
- * @default false
- */
- showWeekNumbers?: boolean;
-
- /**
- * Apply additional formatting to dates, for example localized date formatting.
- */
- dateTimeFormatter: DateFormatting;
-
- /**
- * Ref callback for individual days. Allows for customization of the styling, properties, or listeners of the
- * specific day.
- */
- customDayCellRef?: (element: HTMLElement, date: Date, classNames: CalendarDayGridStyles) => void;
-
- /**
- * How many weeks to show by default. If not provided, will show enough weeks to display the current
- * month, between 4 and 6 depending
- * @default undefined
- */
- weeksToShow?: number;
-
- /**
- * If set the Calendar will not allow navigation to or selection of a date earlier than this value.
- */
- minDate?: Date;
-
- /**
- * If set the Calendar will not allow navigation to or selection of a date later than this value.
- */
- maxDate?: Date;
-
- /**
- * If set the Calendar will not allow selection of dates in this array.
- */
- restrictedDates?: Date[];
-
- /**
- * The days that are selectable when `dateRangeType` is WorkWeek.
- * If `dateRangeType` is not WorkWeek this property does nothing.
- * @default [Monday,Tuesday,Wednesday,Thursday,Friday]
- */
- workWeekDays?: DayOfWeek[];
-
- /**
- * Whether the close button should be shown or not
- * @default false
- */
- showCloseButton?: boolean;
-
- /**
- * Allows all dates and buttons to be focused, including disabled ones
- * @default false
- */
- allFocusable?: boolean;
-
- /**
- * The ID of the control that labels this one
- */
- labelledBy?: string;
-
- /**
- * Whether to show days outside the selected month with lighter styles
- * @default true
- */
- lightenDaysOutsideNavigatedMonth?: boolean;
-
- /**
- * The cardinal directions for animation to occur during transitions, either horizontal or veritcal
- */
- animationDirection?: AnimationDirection;
-
- /**
- * Optional callback function to mark specific days with a small symbol. Fires when the date range changes,
- * gives the starting and ending displayed dates and expects the list of which days in between should be
- * marked.
- */
- getMarkedDays?: (startingDate: Date, endingDate: Date) => Date[];
-}
-
-/**
- * @internal
- */
-export interface CalendarDayGridStyleProps {
- /**
- * Accept custom classNames
- */
- className?: string;
-
- /**
- * The date range type
- */
- dateRangeType?: DateRangeType;
-
- /**
- * Whether week numbers are being shown
- */
- showWeekNumbers?: boolean;
-
- /**
- * Whether to show days outside the selected month with lighter styles
- */
- lightenDaysOutsideNavigatedMonth?: boolean;
-
- /**
- * Whether grid entering animation should be forwards or backwards
- */
- animateBackwards?: boolean;
-
- /**
- * The cardinal directions for animation to occur during transitions, either horizontal or vertical
- */
- animationDirection?: AnimationDirection;
-}
-
-/**
- * @internal
- */
-export interface CalendarDayGridStyles {
- /**
- * The style for the root div
- */
- wrapper?: string;
-
- /**
- * The style for the table containing the grid
- */
- table?: string;
-
- /**
- * The style to apply to the grid cells for days
- */
- dayCell?: string;
-
- /**
- * The style to apply to grid cells for days in the selected range
- */
- daySelected?: string;
-
- /**
- * The style to apply to row around weeks
- */
- weekRow?: string;
-
- /**
- * The style to apply to the column headers above the weeks
- */
- weekDayLabelCell?: string;
-
- /**
- * The style to apply to grid cells for week numbers
- */
- weekNumberCell?: string;
-
- /**
- * The style to apply to individual days that are outside the min/max date range
- */
- dayOutsideBounds?: string;
-
- /**
- * The style to apply to individual days that are outside the current month
- */
- dayOutsideNavigatedMonth?: string;
-
- /**
- * The style to apply to the button element within the day cells
- */
- dayButton?: string;
-
- /**
- * The style to apply to the individual button element that matches the "today" parameter
- */
- dayIsToday?: string;
-
- /**
- * The style applied to the first placeholder week used during transitions
- */
- firstTransitionWeek?: string;
-
- /**
- * The style applied to the last placeholder week used during transitions
- */
- lastTransitionWeek?: string;
-
- /**
- * The style applied to the marker on days to mark as important
- */
- dayMarker?: string;
-}
diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarGridDayCell.tsx b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarGridDayCell.tsx
deleted file mode 100644
index 843d53be01a8e6..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarGridDayCell.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-import * as React from 'react';
-import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Enter } from '@fluentui/keyboard-keys';
-import { getRTLSafeKey } from '@fluentui/react-utilities';
-import { useFluent_unstable } from '@fluentui/react-shared-contexts';
-import { mergeClasses } from '@griffel/react';
-import { addDays, addWeeks, compareDates, findAvailableDate, DateRangeType } from '../../utils';
-import { weekCornersClassNames } from './useWeekCornerStyles.styles';
-import { extraCalendarDayGridClassNames } from './useCalendarDayGridStyles.styles';
-import type { AvailableDateOptions } from '../../utils';
-import type { DayInfo } from './CalendarDayGrid';
-import type { CalendarGridRowProps } from './CalendarGridRow';
-
-/**
- * @internal
- */
-export interface CalendarGridDayCellProps extends CalendarGridRowProps {
- day: DayInfo;
- dayIndex: number;
-}
-
-/**
- * @internal
- */
-export const CalendarGridDayCell: React.FunctionComponent = props => {
- const {
- navigatedDate,
- dateTimeFormatter,
- allFocusable,
- strings,
- activeDescendantId,
- navigatedDayRef,
- calculateRoundedStyles,
- weeks,
- classNames,
- day,
- dayIndex,
- weekIndex,
- weekCorners,
- ariaHidden,
- customDayCellRef,
- dateRangeType,
- daysToSelectInDayView,
- onSelectDate,
- restrictedDates,
- minDate,
- maxDate,
- onNavigateDate,
- getDayInfosInRangeOfDay,
- getRefsFromDayInfos,
- } = props;
- const cornerStyle = weekCorners?.[weekIndex + '_' + dayIndex] ?? '';
- const isNavigatedDate = compareDates(navigatedDate, day.originalDate);
-
- const { dir } = useFluent_unstable();
-
- const navigateMonthEdge = (ev: React.KeyboardEvent, date: Date): void => {
- let targetDate: Date | undefined = undefined;
- let direction = 1; // by default search forward
-
- if (ev.key === ArrowUp) {
- targetDate = addWeeks(date, -1);
- direction = -1;
- } else if (ev.key === ArrowDown) {
- targetDate = addWeeks(date, 1);
- } else if (ev.key === getRTLSafeKey(ArrowLeft, dir)) {
- targetDate = addDays(date, -1);
- direction = -1;
- } else if (ev.key === getRTLSafeKey(ArrowRight, dir)) {
- targetDate = addDays(date, 1);
- }
-
- if (!targetDate) {
- // if we couldn't find a target date at all, do nothing
- return;
- }
-
- const findAvailableDateOptions: AvailableDateOptions = {
- initialDate: date,
- targetDate,
- direction,
- restrictedDates,
- minDate,
- maxDate,
- };
-
- // target date is restricted, search in whatever direction until finding the next possible date,
- // stopping at boundaries
- let nextDate = findAvailableDate(findAvailableDateOptions);
-
- if (!nextDate) {
- // if no dates available in initial direction, try going backwards
- findAvailableDateOptions.direction = -direction;
- nextDate = findAvailableDate(findAvailableDateOptions);
- }
-
- // if the nextDate is still inside the same focusZone area, let the focusZone handle setting the focus so we
- // don't jump the view unnecessarily
- const isInCurrentView =
- weeks &&
- nextDate &&
- weeks.slice(1, weeks.length - 1).some((week: DayInfo[]) => {
- return week.some((dayToCompare: DayInfo) => {
- return compareDates(dayToCompare.originalDate, nextDate!);
- });
- });
- if (isInCurrentView) {
- return;
- }
-
- // else, fire navigation on the date to change the view to show it
- if (nextDate) {
- onNavigateDate(nextDate, true);
- ev.preventDefault();
- }
- };
-
- const onMouseOverDay = (ev: React.MouseEvent) => {
- const dayInfos = getDayInfosInRangeOfDay(day);
- const dayRefs = getRefsFromDayInfos(dayInfos);
-
- dayRefs.forEach((dayRef: HTMLElement | null, index: number) => {
- if (dayRef) {
- dayRef.classList.add(extraCalendarDayGridClassNames.hoverStyle);
- if (
- !dayInfos[index].isSelected &&
- dateRangeType === DateRangeType.Day &&
- daysToSelectInDayView &&
- daysToSelectInDayView > 1
- ) {
- // remove the static classes first to overwrite them
- dayRef.classList.remove(
- weekCornersClassNames.bottomLeftCornerDate!,
- weekCornersClassNames.bottomRightCornerDate!,
- weekCornersClassNames.topLeftCornerDate!,
- weekCornersClassNames.topRightCornerDate!,
- );
-
- const classNamesToAdd = calculateRoundedStyles(false, false, index > 0, index < dayRefs.length - 1).trim();
- if (classNamesToAdd) {
- dayRef.classList.add(...classNamesToAdd);
- }
- }
- }
- });
- };
-
- const onMouseDownDay = (ev: React.MouseEvent) => {
- const dayInfos = getDayInfosInRangeOfDay(day);
- const dayRefs = getRefsFromDayInfos(dayInfos);
-
- dayRefs.forEach((dayRef: HTMLElement | null) => {
- if (dayRef) {
- dayRef.classList.add(extraCalendarDayGridClassNames.pressedStyle);
- }
- });
- };
-
- const onMouseUpDay = (ev: React.MouseEvent) => {
- const dayInfos = getDayInfosInRangeOfDay(day);
- const dayRefs = getRefsFromDayInfos(dayInfos);
-
- dayRefs.forEach((dayRef: HTMLElement | null) => {
- if (dayRef) {
- dayRef.classList.remove(extraCalendarDayGridClassNames.pressedStyle);
- }
- });
- };
-
- const onMouseOutDay = (ev: React.MouseEvent) => {
- const dayInfos = getDayInfosInRangeOfDay(day);
- const dayRefs = getRefsFromDayInfos(dayInfos);
-
- dayRefs.forEach((dayRef: HTMLElement | null, index: number) => {
- if (dayRef) {
- dayRef.classList.remove(extraCalendarDayGridClassNames.hoverStyle);
- dayRef.classList.remove(extraCalendarDayGridClassNames.pressedStyle);
- if (
- !dayInfos[index].isSelected &&
- dateRangeType === DateRangeType.Day &&
- daysToSelectInDayView &&
- daysToSelectInDayView > 1
- ) {
- const classNamesToAdd = calculateRoundedStyles(false, false, index > 0, index < dayRefs.length - 1).trim();
- if (classNamesToAdd) {
- dayRef.classList.remove(...classNamesToAdd);
- }
- }
- }
- });
- };
-
- const onDayKeyDown = (ev: React.KeyboardEvent): void => {
- if (ev.key === Enter) {
- onSelectDate?.(day.originalDate);
- } else {
- navigateMonthEdge(ev, day.originalDate);
- }
- };
-
- let ariaLabel =
- day.originalDate.getDate() +
- ', ' +
- strings.months[day.originalDate.getMonth()] +
- ', ' +
- day.originalDate.getFullYear();
-
- if (day.isMarked) {
- ariaLabel = ariaLabel + ', ' + strings.dayMarkedAriaLabel;
- }
-
- const isFocusable = !ariaHidden && (allFocusable || (day.isInBounds ? true : undefined));
-
- return (
-
- );
-};
-CalendarYear.displayName = 'CalendarYear';
diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarYear/CalendarYear.types.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarYear/CalendarYear.types.ts
deleted file mode 100644
index b0df727b09c3aa..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/components/CalendarYear/CalendarYear.types.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import * as React from 'react';
-import { AnimationDirection } from '../Calendar/Calendar.types';
-import type { CalendarPickerStyleProps, CalendarPickerStyles } from '../CalendarPicker/CalendarPicker.types';
-
-/**
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export interface ICalendarYear {
- focus(): void;
-}
-
-/**
- * @internal
- */
-export interface CalendarYearRange {
- fromYear: number;
- toYear: number;
-}
-
-/**
- * @internal
- */
-export interface CalendarYearRangeToString {
- (range: CalendarYearRange): string;
-}
-
-/**
- * @internal
- */
-export interface CalendarYearStrings {
- rangeAriaLabel?: string | CalendarYearRangeToString;
- prevRangeAriaLabel?: string | CalendarYearRangeToString;
- nextRangeAriaLabel?: string | CalendarYearRangeToString;
- headerAriaLabelFormatString?: string;
-}
-
-/**
- * @internal
- */
-export interface CalendarYearProps {
- /**
- * Optional callback to access the ICalendarYear interface. Use this instead of ref for accessing
- * the public methods and properties of the component.
- */
- componentRef?: React.RefObject;
-
- /**
- * Localized strings to use in the Calendar
- */
- strings?: CalendarYearStrings;
-
- /**
- * The currently selected year
- */
- selectedYear?: number;
-
- /**
- * The currently navigated year
- */
- navigatedYear?: number;
-
- /**
- * Callback action when a year is selected
- * @param year - The year the user selected
- */
- onSelectYear?: (year: number) => void;
-
- /**
- * Callback action when the header is selected
- */
- onHeaderSelect?: (focus: boolean) => void;
-
- /**
- * If set the Calendar will not allow navigation to or selection of a year earlier than this value.
- */
- minYear?: number;
-
- /**
- * If set the Calendar will not allow navigation to or selection of a year later than this value.
- */
- maxYear?: number;
-
- /**
- * Whether the year picker should highlight the current year
- * @default false
- */
- highlightCurrentYear?: boolean;
-
- /**
- * Whether the year picker should highlight the selected year
- * @default false
- */
- highlightSelectedYear?: boolean;
-
- /**
- * Accept custom classNames
- */
- className?: string;
-
- /**
- * Custom renderer for the title
- */
- onRenderTitle?: (props: CalendarYearHeaderProps) => React.ReactNode;
-
- /**
- * Custom renderer for the year
- */
- onRenderYear?: (year: number) => React.ReactNode;
-
- /**
- * The cardinal directions for animation to occur during transitions, either horizontal or veritcal
- */
- animationDirection?: AnimationDirection;
-}
-
-/**
- * @internal
- */
-export interface CalendarYearStyleProps extends CalendarPickerStyleProps {}
-
-/**
- * @internal
- */
-export interface CalendarYearStyles extends CalendarPickerStyles {}
-
-/**
- * @internal
- */
-export interface CalendarYearHeaderProps extends CalendarYearProps, CalendarYearRange {
- /**
- * Callback action when the 'previous' navigation button is selected
- */
- onSelectPrev?: () => void;
-
- /**
- * Callback action when the 'next' navigation button is selected
- */
- onSelectNext?: () => void;
-
- /**
- * Whether title entering animation should be forwards or backwards
- */
- animateBackwards?: boolean;
-}
diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarYear/index.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarYear/index.ts
deleted file mode 100644
index d03d1a5c9d2fe0..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/components/CalendarYear/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './CalendarYear';
-export * from './CalendarYear.types';
-export * from './useCalendarYearStyles.styles';
diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarYear/useCalendarYearStyles.styles.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarYear/useCalendarYearStyles.styles.ts
deleted file mode 100644
index e81f0c58cc0f97..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/components/CalendarYear/useCalendarYearStyles.styles.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarPickerStyles.styles';
-import type { CalendarYearStyleProps, CalendarYearStyles } from './CalendarYear.types';
-
-/**
- * @internal
- *
- * Apply styling to the CalendarYear slots based on the state
- */
-export const useCalendarYearStyles_unstable = (props: CalendarYearStyleProps): CalendarYearStyles => {
- return useCalendarPickerStyles_unstable(props);
-};
diff --git a/packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.types.ts b/packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.types.ts
index 7cc83a55b85c1a..bffab2aa1118c0 100644
--- a/packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.types.ts
+++ b/packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.types.ts
@@ -1,8 +1,7 @@
-import { DayOfWeek, FirstWeekOfYear } from '../../utils';
+import { DayOfWeek, FirstWeekOfYear } from '@fluentui/react-calendar-compat';
import { Input } from '@fluentui/react-input';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import type { CalendarProps } from '../Calendar/Calendar.types';
-import type { CalendarStrings, DateFormatting } from '../../utils';
+import type { CalendarProps, CalendarStrings, DateFormatting } from '@fluentui/react-calendar-compat';
import type { PortalProps } from '@fluentui/react-portal';
import type { PositioningProps } from '@fluentui/react-positioning';
diff --git a/packages/react-components/react-datepicker-compat/src/components/DatePicker/defaults.ts b/packages/react-components/react-datepicker-compat/src/components/DatePicker/defaults.ts
index d1b88828b935e7..6dac4e273923c2 100644
--- a/packages/react-components/react-datepicker-compat/src/components/DatePicker/defaults.ts
+++ b/packages/react-components/react-datepicker-compat/src/components/DatePicker/defaults.ts
@@ -1,5 +1,5 @@
-import { defaultCalendarStrings } from '../Calendar/defaults';
-import type { CalendarStrings } from '../../utils/index';
+import { defaultCalendarStrings } from '@fluentui/react-calendar-compat';
+import type { CalendarStrings } from '@fluentui/react-calendar-compat';
import type { DatePickerErrorType } from './DatePicker.types';
export const defaultDatePickerStrings: CalendarStrings = {
diff --git a/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePicker.tsx b/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePicker.tsx
index 95b31d8e8f3f93..6454e752a10b71 100644
--- a/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePicker.tsx
+++ b/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePicker.tsx
@@ -1,8 +1,7 @@
import * as React from 'react';
import { ArrowDown, Enter, Escape } from '@fluentui/keyboard-keys';
-import { Calendar } from '../Calendar/Calendar';
+import { Calendar, compareDatePart, DayOfWeek, FirstWeekOfYear } from '@fluentui/react-calendar-compat';
import { CalendarMonthRegular } from '@fluentui/react-icons';
-import { compareDatePart, DayOfWeek, FirstWeekOfYear } from '../../utils';
import { defaultDatePickerStrings } from './defaults';
import { Input } from '@fluentui/react-input';
import {
@@ -19,7 +18,7 @@ import { useFieldContext_unstable as useFieldContext } from '@fluentui/react-fie
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { useModalAttributes } from '@fluentui/react-tabster';
import { usePopupPositioning } from '../../utils/usePopupPositioning';
-import type { CalendarProps, ICalendar } from '../Calendar/Calendar.types';
+import type { CalendarProps, ICalendar } from '@fluentui/react-calendar-compat';
import type { DatePickerProps, DatePickerState, DatePickerValidationResultData } from './DatePicker.types';
import type { InputProps, InputOnChangeData } from '@fluentui/react-input';
diff --git a/packages/react-components/react-datepicker-compat/src/index.ts b/packages/react-components/react-datepicker-compat/src/index.ts
index a98fd72dd71daa..0373063bc7da9d 100644
--- a/packages/react-components/react-datepicker-compat/src/index.ts
+++ b/packages/react-components/react-datepicker-compat/src/index.ts
@@ -1,10 +1,3 @@
-export { AnimationDirection } from './Calendar';
-export type { CalendarProps, ICalendar } from './Calendar';
-
-export type { CalendarDayProps, ICalendarDay } from './CalendarDay';
-
-export type { CalendarMonthProps, ICalendarMonth } from './CalendarMonth';
-
export {
DatePicker,
datePickerClassNames,
@@ -15,31 +8,3 @@ export {
useDatePickerStyles_unstable,
} from './DatePicker';
export type { DatePickerErrorType, DatePickerProps, DatePickerValidationResultData } from './DatePicker';
-
-export {
- DAYS_IN_WEEK,
- DateRangeType,
- DayOfWeek,
- FirstWeekOfYear,
- MonthOfYear,
- TimeConstants,
- addDays,
- addMonths,
- addWeeks,
- addYears,
- compareDatePart,
- compareDates,
- getDatePartHashValue,
- getDateRangeArray,
- getEndDateOfWeek,
- getMonthEnd,
- getMonthStart,
- getStartDateOfWeek,
- getWeekNumber,
- getWeekNumbersInMonth,
- getYearEnd,
- getYearStart,
- isInDateRangeArray,
- setMonth,
-} from './utils';
-export type { CalendarStrings, DateFormatting, DateGridStrings } from './utils';
diff --git a/packages/react-components/react-datepicker-compat/src/utils/animations.ts b/packages/react-components/react-datepicker-compat/src/utils/animations.ts
deleted file mode 100644
index b561146beb0a98..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/animations.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { shorthands } from '@griffel/react';
-
-export const EASING_FUNCTION_1 = 'cubic-bezier(.1,.9,.2,1)';
-export const EASING_FUNCTION_2 = 'cubic-bezier(.1,.25,.75,.9)';
-export const DURATION_1 = '0.167s';
-export const DURATION_2 = '0.267s';
-export const DURATION_3 = '0.367s';
-export const DURATION_4 = '0.467s';
-
-export const FADE_IN = {
- from: {
- opacity: 0,
- },
- to: {
- opacity: 1,
- },
-};
-export const FADE_OUT = {
- from: {
- opacity: 1,
- },
- to: {
- opacity: 0,
- visibility: 'hidden' as const,
- },
-};
-export const SLIDE_DOWN_IN20 = {
- from: {
- pointerEvents: 'none' as const,
- transform: 'translate3d(0, -20px, 0)',
- },
- to: {
- pointerEvents: 'auto' as const,
- transform: 'translate3d(0, 0, 0)',
- },
-};
-export const SLIDE_LEFT_IN20 = {
- from: {
- pointerEvents: 'none' as const,
- transform: 'translate3d(20px, 0, 0)',
- },
- to: {
- pointerEvents: 'auto' as const,
- transform: 'translate3d(0, 0, 0)',
- },
-};
-export const SLIDE_RIGHT_IN20 = {
- from: {
- pointerEvents: 'none' as const,
- transform: 'translate3d(-20px, 0, 0)',
- },
- to: {
- pointerEvents: 'auto' as const,
- transform: 'translate3d(0, 0, 0)',
- },
-};
-export const SLIDE_UP_IN20 = {
- from: {
- pointerEvents: 'none' as const,
- transform: 'translate3d(0, 20px, 0)',
- },
- to: {
- pointerEvents: 'auto' as const,
- transform: 'translate3d(0, 0, 0)',
- },
-};
-export const SLIDE_DOWN_OUT20 = {
- from: {
- transform: 'translate3d(0, 0, 0)',
- },
- to: {
- transform: 'translate3d(0, 20px, 0)',
- },
-};
-export const SLIDE_UP_OUT20 = {
- from: {
- transform: 'translate3d(0, 0, 0)',
- },
- to: {
- transform: 'translate3d(0, -20px, 0)',
- },
-};
-export const TRANSITION_ROW_DISAPPEARANCE = {
- '100%': {
- height: '0px',
- ...shorthands.overflow('hidden'),
- width: '0px',
- },
- '99.9%': {
- height: '28px',
- ...shorthands.overflow('visible'),
- width: '100%',
- },
- '0%': {
- height: '28px',
- ...shorthands.overflow('visible'),
- width: '100%',
- },
-};
diff --git a/packages/react-components/react-datepicker-compat/src/utils/constants.ts b/packages/react-components/react-datepicker-compat/src/utils/constants.ts
deleted file mode 100644
index 79266fabef021e..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/constants.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * The days of the week
- */
-export enum DayOfWeek {
- Sunday = 0,
- Monday = 1,
- Tuesday = 2,
- Wednesday = 3,
- Thursday = 4,
- Friday = 5,
- Saturday = 6,
-}
-
-/**
- * The months
- */
-export enum MonthOfYear {
- January = 0,
- February = 1,
- March = 2,
- April = 3,
- May = 4,
- June = 5,
- July = 6,
- August = 7,
- September = 8,
- October = 9,
- November = 10,
- December = 11,
-}
-
-/**
- * First week of the year settings types
- */
-export enum FirstWeekOfYear {
- FirstDay = 0,
- FirstFullWeek = 1,
- FirstFourDayWeek = 2,
-}
-
-/**
- * The supported date range types
- */
-export enum DateRangeType {
- Day = 0,
- Week = 1,
- Month = 2,
- WorkWeek = 3,
-}
-
-export const DAYS_IN_WEEK = 7;
-
-export const TimeConstants = {
- MillisecondsInOneDay: 86400000,
- MillisecondsIn1Sec: 1000,
- MillisecondsIn1Min: 60000,
- MillisecondsIn30Mins: 1800000,
- MillisecondsIn1Hour: 3600000,
- MinutesInOneDay: 1440,
- MinutesInOneHour: 60,
- DaysInOneWeek: 7,
- MonthInOneYear: 12,
- HoursInOneDay: 24,
- SecondsInOneMinute: 60,
- OffsetTo24HourFormat: 12,
- /**
- * Matches a time string. Groups:
- * 1. hours (with or without leading 0)
- * 2. minutes
- * 3. seconds (optional)
- * 4. meridiem (am/pm, case-insensitive, optional)
- */
- TimeFormatRegex: /^(\d\d?):(\d\d):?(\d\d)? ?([ap]m)?/i,
-};
diff --git a/packages/react-components/react-datepicker-compat/src/utils/dateFormatting/dateFormatting.defaults.ts b/packages/react-components/react-datepicker-compat/src/utils/dateFormatting/dateFormatting.defaults.ts
deleted file mode 100644
index 49e98c2d6c20b1..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/dateFormatting/dateFormatting.defaults.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import type { CalendarStrings, DateFormatting, DateGridStrings } from './dateFormatting.types';
-
-/**
- * Format date to a day string representation
- * @param date - input date to format
- */
-export const formatDay = (date: Date) => date.getDate().toString();
-
-/**
- * Format date to a month-day-year string
- * @param date - input date to format
- * @param strings - localized strings
- */
-export const formatMonthDayYear = (date: Date, strings: DateGridStrings) =>
- strings.months[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear();
-
-/**
- * Format date to a month-year string
- * @param date - input date to format
- * @param strings - localized strings
- */
-export const formatMonthYear = (date: Date, strings: DateGridStrings) =>
- strings.months[date.getMonth()] + ' ' + date.getFullYear();
-
-/**
- * Format date to a month string
- * @param date - input date to format
- * @param strings - localized strings
- */
-export const formatMonth = (date: Date, strings: DateGridStrings) => strings.months[date.getMonth()];
-
-/**
- * Format date to a year string representation
- * @param date - input date to format
- */
-export const formatYear = (date: Date) => date.getFullYear().toString();
-
-export const DEFAULT_DATE_GRID_STRINGS: DateGridStrings = {
- months: [
- 'January',
- 'February',
- 'March',
- 'April',
- 'May',
- 'June',
- 'July',
- 'August',
- 'September',
- 'October',
- 'November',
- 'December',
- ],
- shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
- days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
- shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
-};
-
-export const DEFAULT_DATE_FORMATTING: DateFormatting = {
- formatDay,
- formatMonth,
- formatYear,
- formatMonthDayYear,
- formatMonthYear,
-};
-
-export const DEFAULT_CALENDAR_STRINGS: CalendarStrings = {
- ...DEFAULT_DATE_GRID_STRINGS,
-
- goToToday: 'Go to today',
- weekNumberFormatString: 'Week number {0}',
- prevMonthAriaLabel: 'Previous month',
- nextMonthAriaLabel: 'Next month',
- prevYearAriaLabel: 'Previous year',
- nextYearAriaLabel: 'Next year',
- prevYearRangeAriaLabel: 'Previous year range',
- nextYearRangeAriaLabel: 'Next year range',
- closeButtonAriaLabel: 'Close',
- selectedDateFormatString: 'Selected date {0}',
- todayDateFormatString: "Today's date {0}",
- monthPickerHeaderAriaLabel: '{0}, change year',
- yearPickerHeaderAriaLabel: '{0}, change month',
- dayMarkedAriaLabel: 'marked',
-};
diff --git a/packages/react-components/react-datepicker-compat/src/utils/dateFormatting/dateFormatting.test.ts b/packages/react-components/react-datepicker-compat/src/utils/dateFormatting/dateFormatting.test.ts
deleted file mode 100644
index 1ed8ebc5cccfa1..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/dateFormatting/dateFormatting.test.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { MonthOfYear } from '../constants';
-import {
- formatDay,
- formatMonth,
- formatMonthDayYear,
- formatMonthYear,
- formatYear,
- DEFAULT_DATE_GRID_STRINGS,
-} from './dateFormatting.defaults';
-
-const date = new Date(2016, MonthOfYear.April, 1);
-
-describe('formatDay', () => {
- it('returns default format', () => {
- const result = formatDay(date);
- expect(result).toBe('1');
- });
-});
-
-describe('formatMonth', () => {
- it('returns default format', () => {
- const result = formatMonth(date, DEFAULT_DATE_GRID_STRINGS);
- expect(result).toBe('April');
- });
-});
-
-describe('formatMonthDayYear', () => {
- it('returns default format', () => {
- const result = formatMonthDayYear(date, DEFAULT_DATE_GRID_STRINGS);
- expect(result).toBe('April 1, 2016');
- });
-});
-
-describe('formatMonthYear', () => {
- it('returns default format', () => {
- const result = formatMonthYear(date, DEFAULT_DATE_GRID_STRINGS);
- expect(result).toBe('April 2016');
- });
-});
-
-describe('formatYear', () => {
- it('returns default format', () => {
- const result = formatYear(date);
- expect(result).toBe('2016');
- });
-});
diff --git a/packages/react-components/react-datepicker-compat/src/utils/dateFormatting/dateFormatting.types.ts b/packages/react-components/react-datepicker-compat/src/utils/dateFormatting/dateFormatting.types.ts
deleted file mode 100644
index 1af630d1daf0a4..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/dateFormatting/dateFormatting.types.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-export interface DateGridStrings {
- /**
- * An array of strings for the full names of months.
- * The array is 0-based, so months[0] should be the full name of January.
- */
- months: string[];
-
- /**
- * An array of strings for the short names of months.
- * The array is 0-based, so shortMonths[0] should be the short name of January.
- */
- shortMonths: string[];
-
- /**
- * An array of strings for the full names of days of the week.
- * The array is 0-based, so days[0] should be the full name of Sunday.
- */
- days: string[];
-
- /**
- * An array of strings for the initials of the days of the week.
- * The array is 0-based, so days[0] should be the initial of Sunday.
- */
- shortDays: string[];
-}
-
-export interface DateFormatting {
- /**
- * Get a localized string for a day.
- */
- formatDay: (date: Date) => string;
-
- /**
- * Get a localized string for a month.
- */
- formatMonth: (date: Date, strings: DateGridStrings) => string;
-
- /**
- * Get a localized string for a year.
- */
- formatYear: (date: Date) => string;
-
- /**
- * Get a localized string for a month, day, and year.
- */
- formatMonthDayYear: (date: Date, strings: DateGridStrings) => string;
-
- /**
- * Get a localized string for a month and year.
- */
- formatMonthYear: (date: Date, strings: DateGridStrings) => string;
-}
-
-export interface CalendarStrings extends DateGridStrings {
- /**
- * String to render for button to direct the user to today's date.
- */
- goToToday: string;
-
- /**
- * Aria-label for the "previous month" button in day picker.
- */
- prevMonthAriaLabel?: string;
-
- /**
- * Aria-label for the "next month" button in day picker.
- */
- nextMonthAriaLabel?: string;
-
- /**
- * Aria-label for the "previous year" button in month picker.
- */
- prevYearAriaLabel?: string;
-
- /**
- * Aria-label for the "next year" button in month picker.
- */
- nextYearAriaLabel?: string;
-
- /**
- * Aria-label for the "previous year range" button in year picker.
- */
- prevYearRangeAriaLabel?: string;
-
- /**
- * Aria-label for the "next year range" button in year picker.
- */
- nextYearRangeAriaLabel?: string;
-
- /**
- * Aria-label format string for the header button in the month picker. Should have 1 string param, e.g. "`{0}`,
- * select to change the year". This aria-label will only be applied if the year picker is enabled; otherwise
- * the label will default to the header string, e.g. "2019".
- */
- monthPickerHeaderAriaLabel?: string;
-
- /**
- * Aria-label format string for the header button in the year picker.
- * Should have 1 string param, e.g. "`{0}`, select to change the month"
- */
- yearPickerHeaderAriaLabel?: string;
-
- /**
- * Aria-label for the "close" button.
- */
- closeButtonAriaLabel?: string;
-
- /**
- * Aria-label format string for the week number header. Should have 1 string param, e.g. "week number `{0}`"
- */
- weekNumberFormatString?: string;
-
- /**
- * Aria-label format string for the currently selected date. Should have 1 string param, e.g. "Selected date `{0}`"
- */
- selectedDateFormatString?: string;
-
- /**
- * Aria-label format string for today's date. Should have 1 string param, e.g. "Today's date `{0}`"
- */
- todayDateFormatString?: string;
-
- /**
- * Aria-label for when a date is marked
- */
- dayMarkedAriaLabel?: string;
-}
diff --git a/packages/react-components/react-datepicker-compat/src/utils/dateFormatting/index.ts b/packages/react-components/react-datepicker-compat/src/utils/dateFormatting/index.ts
deleted file mode 100644
index 76cf3f30a0f1c6..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/dateFormatting/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './dateFormatting.defaults';
-export * from './dateFormatting.types';
diff --git a/packages/react-components/react-datepicker-compat/src/utils/dateGrid/dateGrid.types.ts b/packages/react-components/react-datepicker-compat/src/utils/dateGrid/dateGrid.types.ts
deleted file mode 100644
index ae06d8a9bdb130..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/dateGrid/dateGrid.types.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import { DayOfWeek, DateRangeType, FirstWeekOfYear } from '../constants';
-
-export interface Day {
- /** `Date.toString()` value of current date */
- key: string;
- /** `Date.getDate()` value of current date */
- date: string;
- /** `Date` object of current date */
- originalDate: Date;
- /** Is current date is in the same month as "today" date */
- isInMonth: boolean;
- /** Is current date is "today" date */
- isToday: boolean;
- /** Is current date is selected */
- isSelected: boolean;
- /** Is current date within restriction boundaries */
- isInBounds: boolean;
- /** Is current date marked */
- isMarked: boolean;
-}
-
-export interface AvailableDateOptions extends RestrictedDatesOptions {
- /** Date from which we start the search */
- initialDate: Date;
- /** Ideal available date */
- targetDate: Date;
- /** Direction of search (`1` - search in future / `-1` search in past) */
- direction: number;
-}
-
-export interface RestrictedDatesOptions {
- /**
- * If set the Calendar will not allow navigation to or selection of a date earlier than this value.
- */
- minDate?: Date;
-
- /**
- * If set the Calendar will not allow navigation to or selection of a date later than this value.
- */
- maxDate?: Date;
-
- /**
- * If set the Calendar will not allow selection of dates in this array.
- */
- restrictedDates?: Date[];
-}
-
-export interface DayGridOptions extends RestrictedDatesOptions {
- /**
- * The first day of the week for your locale.
- */
- firstDayOfWeek: DayOfWeek;
-
- /**
- * Defines when the first week of the year should start, FirstWeekOfYear.FirstDay,
- * FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values
- */
- firstWeekOfYear: FirstWeekOfYear;
-
- /**
- * The date range type indicating how many days should be selected as the user
- * selects days
- */
- dateRangeType: DateRangeType;
-
- /**
- * The number of days to select while dateRangeType === DateRangeType.Day. Used in order to have multi-day
- * views.
- */
- daysToSelectInDayView?: number;
-
- /**
- * Value of today. If unspecified, current time in client machine will be used.
- */
- today?: Date;
-
- /**
- * Whether the calendar should show the week number (weeks 1 to 53) before each week row
- */
- showWeekNumbers?: boolean;
-
- /**
- * The days that are selectable when `dateRangeType` is WorkWeek.
- * If `dateRangeType` is not WorkWeek this property does nothing.
- */
- workWeekDays?: DayOfWeek[];
-
- /**
- * Which days in the generated grid should be marked.
- */
- markedDays?: Date[];
-
- /**
- * The currently selected date
- */
- selectedDate: Date;
-
- /**
- * The currently navigated date
- */
- navigatedDate: Date;
-
- /**
- * How many weeks to show by default. If not provided, will show enough weeks to display the current
- * month, between 4 and 6 depending
- */
- weeksToShow?: number;
-}
diff --git a/packages/react-components/react-datepicker-compat/src/utils/dateGrid/findAvailableDate.ts b/packages/react-components/react-datepicker-compat/src/utils/dateGrid/findAvailableDate.ts
deleted file mode 100644
index 291826faec642a..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/dateGrid/findAvailableDate.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { AvailableDateOptions } from './dateGrid.types';
-
-import { isRestrictedDate } from './isRestrictedDate';
-
-import { isAfterMaxDate } from './isAfterMaxDate';
-
-import { isBeforeMinDate } from './isBeforeMinDate';
-import { compareDatePart, addDays } from '../dateMath/dateMath';
-
-/**
- * Returns closest available date given the restriction `options`, or undefined otherwise
- * @param options - list of search options
- */
-export const findAvailableDate = (options: AvailableDateOptions): Date | undefined => {
- const { targetDate, initialDate, direction, ...restrictedDateOptions } = options;
- let availableDate = targetDate;
- // if the target date is available, return it immediately
- if (!isRestrictedDate(targetDate, restrictedDateOptions)) {
- return targetDate;
- }
-
- while (
- compareDatePart(initialDate, availableDate) !== 0 &&
- isRestrictedDate(availableDate, restrictedDateOptions) &&
- !isAfterMaxDate(availableDate, restrictedDateOptions) &&
- !isBeforeMinDate(availableDate, restrictedDateOptions)
- ) {
- availableDate = addDays(availableDate, direction);
- }
-
- if (compareDatePart(initialDate, availableDate) !== 0 && !isRestrictedDate(availableDate, restrictedDateOptions)) {
- return availableDate;
- }
-
- return undefined;
-};
diff --git a/packages/react-components/react-datepicker-compat/src/utils/dateGrid/getBoundedDateRange.ts b/packages/react-components/react-datepicker-compat/src/utils/dateGrid/getBoundedDateRange.ts
deleted file mode 100644
index a49dfbe56df076..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/dateGrid/getBoundedDateRange.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { compareDatePart } from '../dateMath/dateMath';
-
-/**
- * Generates a list of dates, bounded by min and max dates
- * @param dateRange - input date range
- * @param minDate - min date to limit the range
- * @param maxDate - max date to limit the range
- */
-export const getBoundedDateRange = (dateRange: Date[], minDate?: Date, maxDate?: Date): Date[] => {
- let boundedDateRange = [...dateRange];
- if (minDate) {
- boundedDateRange = boundedDateRange.filter((date: Date) => compareDatePart(date, minDate as Date) >= 0);
- }
- if (maxDate) {
- boundedDateRange = boundedDateRange.filter((date: Date) => compareDatePart(date, maxDate as Date) <= 0);
- }
- return boundedDateRange;
-};
diff --git a/packages/react-components/react-datepicker-compat/src/utils/dateGrid/getDateRangeTypeToUse.ts b/packages/react-components/react-datepicker-compat/src/utils/dateGrid/getDateRangeTypeToUse.ts
deleted file mode 100644
index f01e9759b3ca5b..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/dateGrid/getDateRangeTypeToUse.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { DateRangeType, DayOfWeek } from '../constants';
-import { isContiguous } from './isContiguous';
-/**
- * Return corrected date range type, given `dateRangeType` and list of working days.
- * For non-contiguous working days and working week range type, returns general week range type.
- * For other cases returns input date range type.
- * @param dateRangeType - input type of range
- * @param workWeekDays - list of working days in a week
- */
-export const getDateRangeTypeToUse = (
- dateRangeType: DateRangeType,
- workWeekDays: DayOfWeek[] | undefined,
- firstDayOfWeek: DayOfWeek,
-): DateRangeType => {
- if (workWeekDays && dateRangeType === DateRangeType.WorkWeek) {
- if (!isContiguous(workWeekDays, true, firstDayOfWeek) || workWeekDays.length === 0) {
- return DateRangeType.Week;
- }
- }
-
- return dateRangeType;
-};
diff --git a/packages/react-components/react-datepicker-compat/src/utils/dateGrid/getDayGrid.ts b/packages/react-components/react-datepicker-compat/src/utils/dateGrid/getDayGrid.ts
deleted file mode 100644
index c234b41d799d0b..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/dateGrid/getDayGrid.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import { addDays, compareDates, getDateRangeArray, isInDateRangeArray } from '../dateMath/dateMath';
-import { DAYS_IN_WEEK } from '../constants';
-import { Day, DayGridOptions } from './dateGrid.types';
-import { getDateRangeTypeToUse } from './getDateRangeTypeToUse';
-import { getBoundedDateRange } from './getBoundedDateRange';
-import { isRestrictedDate } from './isRestrictedDate';
-
-/**
- * Generates a grid of days, given the `options`.
- * Returns one additional week at the begining from the previous range
- * and one at the end from the future range
- * @param options - parameters to specify date related restrictions for the resulting grid
- */
-export const getDayGrid = (options: DayGridOptions): Day[][] => {
- const {
- selectedDate,
- dateRangeType,
- firstDayOfWeek,
- today,
- minDate,
- maxDate,
- weeksToShow,
- workWeekDays,
- daysToSelectInDayView,
- restrictedDates,
- markedDays,
- } = options;
- const restrictedDateOptions = { minDate, maxDate, restrictedDates };
-
- const todaysDate = today || new Date();
-
- const navigatedDate = options.navigatedDate ? options.navigatedDate : todaysDate;
-
- let date;
- if (weeksToShow && weeksToShow <= 4) {
- // if showing less than a full month, just use date == navigatedDate
- date = new Date(navigatedDate.getFullYear(), navigatedDate.getMonth(), navigatedDate.getDate());
- } else {
- date = new Date(navigatedDate.getFullYear(), navigatedDate.getMonth(), 1);
- }
- const weeks: Day[][] = [];
-
- // Cycle the date backwards to get to the first day of the week.
- while (date.getDay() !== firstDayOfWeek) {
- date.setDate(date.getDate() - 1);
- }
-
- // add the transition week as last week of previous range
- date = addDays(date, -DAYS_IN_WEEK);
-
- // a flag to indicate whether all days of the week are outside the month
- let isAllDaysOfWeekOutOfMonth = false;
-
- // in work week view if the days aren't contiguous we use week view instead
- const selectedDateRangeType = getDateRangeTypeToUse(dateRangeType, workWeekDays, firstDayOfWeek);
-
- let selectedDates: Date[] = [];
-
- if (selectedDate) {
- selectedDates = getDateRangeArray(
- selectedDate,
- selectedDateRangeType,
- firstDayOfWeek,
- workWeekDays,
- daysToSelectInDayView,
- );
- selectedDates = getBoundedDateRange(selectedDates, minDate, maxDate);
- }
-
- let shouldGetWeeks = true;
-
- for (let weekIndex = 0; shouldGetWeeks; weekIndex++) {
- const week: Day[] = [];
-
- isAllDaysOfWeekOutOfMonth = true;
-
- for (let dayIndex = 0; dayIndex < DAYS_IN_WEEK; dayIndex++) {
- const originalDate = new Date(date.getTime());
- const dayInfo: Day = {
- key: date.toString(),
- date: date.getDate().toString(),
- originalDate,
- isInMonth: date.getMonth() === navigatedDate.getMonth(),
- isToday: compareDates(todaysDate, date),
- isSelected: isInDateRangeArray(date, selectedDates),
- isInBounds: !isRestrictedDate(date, restrictedDateOptions),
- isMarked: markedDays?.some((markedDay: Date) => compareDates(originalDate, markedDay)) || false,
- };
-
- week.push(dayInfo);
-
- if (dayInfo.isInMonth) {
- isAllDaysOfWeekOutOfMonth = false;
- }
-
- date.setDate(date.getDate() + 1);
- }
-
- // We append the condition of the loop depending upon the showSixWeeksByDefault prop.
- shouldGetWeeks = weeksToShow ? weekIndex < weeksToShow + 1 : !isAllDaysOfWeekOutOfMonth || weekIndex === 0;
-
- // we don't check shouldGetWeeks before pushing because we want to add one extra week for transition state
- weeks.push(week);
- }
-
- return weeks;
-};
diff --git a/packages/react-components/react-datepicker-compat/src/utils/dateGrid/index.ts b/packages/react-components/react-datepicker-compat/src/utils/dateGrid/index.ts
deleted file mode 100644
index 015f680c01e9c3..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/dateGrid/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './dateGrid.types';
-export * from './findAvailableDate';
-export * from './getBoundedDateRange';
-export * from './getDayGrid';
-export * from './isRestrictedDate';
diff --git a/packages/react-components/react-datepicker-compat/src/utils/dateGrid/isAfterMaxDate.ts b/packages/react-components/react-datepicker-compat/src/utils/dateGrid/isAfterMaxDate.ts
deleted file mode 100644
index 8c3bcab9e6e126..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/dateGrid/isAfterMaxDate.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { RestrictedDatesOptions } from './dateGrid.types';
-import { compareDatePart } from '../dateMath/dateMath';
-
-/**
- * Checks if `date` happens later than max date
- * @param date - date to check
- * @param options - object with max date to check against
- */
-export const isAfterMaxDate = (date: Date, options: RestrictedDatesOptions): boolean => {
- const { maxDate } = options;
- return maxDate ? compareDatePart(date, maxDate) >= 1 : false;
-};
diff --git a/packages/react-components/react-datepicker-compat/src/utils/dateGrid/isBeforeMinDate.ts b/packages/react-components/react-datepicker-compat/src/utils/dateGrid/isBeforeMinDate.ts
deleted file mode 100644
index 74be1f648da7b6..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/dateGrid/isBeforeMinDate.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { RestrictedDatesOptions } from './dateGrid.types';
-import { compareDatePart } from '../dateMath/dateMath';
-
-/**
- * Checks if `date` happens earlier than min date
- * @param date - date to check
- * @param options - object with min date to check against
- */
-export const isBeforeMinDate = (date: Date, options: RestrictedDatesOptions): boolean => {
- const { minDate } = options;
- return minDate ? compareDatePart(minDate, date) >= 1 : false;
-};
diff --git a/packages/react-components/react-datepicker-compat/src/utils/dateGrid/isContiguous.ts b/packages/react-components/react-datepicker-compat/src/utils/dateGrid/isContiguous.ts
deleted file mode 100644
index a69a0a286af2c6..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/dateGrid/isContiguous.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { DayOfWeek } from '../constants';
-
-/**
- * Returns whether provided week days are contiguous.
- * @param days - list of days in a week
- * @param isSingleWeek - decides whether the contiguous logic applies across week boundaries or not
- * @param firstDayOfWeek - decides which day of week is the first one in the order.
- */
-export const isContiguous = (days: DayOfWeek[], isSingleWeek: boolean, firstDayOfWeek: DayOfWeek): boolean => {
- const daySet = new Set(days);
- let amountOfNoNeighbors = 0;
- for (const day of days) {
- const nextDay = (day + 1) % 7;
- if (!(daySet.has(nextDay) && (!isSingleWeek || firstDayOfWeek !== nextDay))) {
- amountOfNoNeighbors++;
- }
- }
-
- // In case the full week is provided, then each day has a neighbor
- //, otherwise the last day does not have a neighbor.
- return amountOfNoNeighbors < 2;
-};
diff --git a/packages/react-components/react-datepicker-compat/src/utils/dateGrid/isRestrictedDate.ts b/packages/react-components/react-datepicker-compat/src/utils/dateGrid/isRestrictedDate.ts
deleted file mode 100644
index 611344dd4d0625..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/dateGrid/isRestrictedDate.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { RestrictedDatesOptions } from './dateGrid.types';
-import { compareDates } from '../dateMath/dateMath';
-import { isBeforeMinDate } from './isBeforeMinDate';
-import { isAfterMaxDate } from './isAfterMaxDate';
-
-/**
- * Checks if `date` falls into the restricted `options`
- * @param date - date to check
- * @param options - restriction options (min date, max date and list of restricted dates)
- */
-export const isRestrictedDate = (date: Date, options: RestrictedDatesOptions): boolean => {
- const { restrictedDates, minDate, maxDate } = options;
- if (!restrictedDates && !minDate && !maxDate) {
- return false;
- }
- const inRestrictedDates = restrictedDates && restrictedDates.some((rd: Date) => compareDates(rd, date));
- return inRestrictedDates || isBeforeMinDate(date, options) || isAfterMaxDate(date, options);
-};
diff --git a/packages/react-components/react-datepicker-compat/src/utils/dateMath/dateMath.test.ts b/packages/react-components/react-datepicker-compat/src/utils/dateMath/dateMath.test.ts
deleted file mode 100644
index 5556a328ef77fe..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/dateMath/dateMath.test.ts
+++ /dev/null
@@ -1,495 +0,0 @@
-import { DateRangeType, DayOfWeek } from '../constants';
-import * as DateMath from './dateMath';
-
-enum Months {
- Jan = 0,
- Feb = 1,
- Mar = 2,
- Apr = 3,
- May = 4,
- Jun = 5,
- Jul = 6,
- Aug = 7,
- Sep = 8,
- Oct = 9,
- Nov = 10,
- Dec = 11,
-}
-describe('DateMath', () => {
- it('can add days', () => {
- const startDate = new Date(2016, Months.Apr, 1);
- const result = DateMath.addDays(startDate, 5);
- const expected = new Date(2016, Months.Apr, 6);
-
- expect(result.getTime()).toEqual(expected.getTime());
- });
-
- it('can add days across a month boundary', () => {
- const startDate = new Date(2016, Months.Mar, 30);
- const result = DateMath.addDays(startDate, 5);
- const expected = new Date(2016, Months.Apr, 4);
-
- expect(result.getTime()).toEqual(expected.getTime());
- });
-
- it('can add days across multiple month boundaries', () => {
- const startDate = new Date(2016, Months.Mar, 31);
- const result = DateMath.addDays(startDate, 65);
- const expected = new Date(2016, Months.Jun, 4);
-
- expect(result.getTime()).toEqual(expected.getTime());
- });
-
- it('can add days across leap day boundaries', () => {
- const startDate = new Date(2016, Months.Feb, 28);
- const result = DateMath.addDays(startDate, 2);
- const expected = new Date(2016, Months.Mar, 1);
-
- expect(result.getTime()).toEqual(expected.getTime());
- });
-
- it('can add months', () => {
- const startDate = new Date(2015, Months.Dec, 31);
-
- let result = DateMath.addMonths(startDate, 1);
- let expected = new Date(2016, Months.Jan, 31);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, 2);
- expected = new Date(2016, Months.Feb, 29);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, 3);
- expected = new Date(2016, Months.Mar, 31);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, 4);
- expected = new Date(2016, Months.Apr, 30);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, 5);
- expected = new Date(2016, Months.May, 31);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, 6);
- expected = new Date(2016, Months.Jun, 30);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, 7);
- expected = new Date(2016, Months.Jul, 31);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, 8);
- expected = new Date(2016, Months.Aug, 31);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, 9);
- expected = new Date(2016, Months.Sep, 30);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, 10);
- expected = new Date(2016, Months.Oct, 31);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, 11);
- expected = new Date(2016, Months.Nov, 30);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, 12);
- expected = new Date(2016, Months.Dec, 31);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, 14);
- expected = new Date(2017, Months.Feb, 28);
- expect(result.getTime()).toEqual(expected.getTime());
- });
-
- it('can add years', () => {
- let startDate = new Date(2016, Months.Feb, 29);
- let result = DateMath.addYears(startDate, 1);
- let expected = new Date(2017, Months.Feb, 28);
-
- expect(result.getTime()).toEqual(expected.getTime());
-
- startDate = new Date(2016, Months.Feb, 29);
- result = DateMath.addYears(startDate, 4);
- expected = new Date(2020, Months.Feb, 29);
-
- expect(result.getTime()).toEqual(expected.getTime());
-
- startDate = new Date(2016, Months.Jan, 1);
- result = DateMath.addYears(startDate, 1);
- expected = new Date(2017, Months.Jan, 1);
-
- expect(result.getTime()).toEqual(expected.getTime());
- });
-
- it('can subtract days', () => {
- const startDate = new Date(2016, Months.Apr, 30);
- const result = DateMath.addDays(startDate, -5);
- const expected = new Date(2016, Months.Apr, 25);
-
- expect(result.getTime()).toEqual(expected.getTime());
- });
-
- it('can subtract days across a month boundry', () => {
- const startDate = new Date(2016, Months.Apr, 1);
- const result = DateMath.addDays(startDate, -5);
- const expected = new Date(2016, Months.Mar, 27);
-
- expect(result.getTime()).toEqual(expected.getTime());
- });
-
- it('can subtract days across multiple month boundaries', () => {
- const startDate = new Date(2016, Months.Jul, 4);
- const result = DateMath.addDays(startDate, -65);
- const expected = new Date(2016, Months.Apr, 30);
-
- expect(result.getTime()).toEqual(expected.getTime());
- });
-
- it('can subtract days across leap day boundaries', () => {
- const startDate = new Date(2016, Months.Mar, 1);
- const result = DateMath.addDays(startDate, -2);
- const expected = new Date(2016, Months.Feb, 28);
-
- expect(result.getTime()).toEqual(expected.getTime());
- });
-
- it('can subtract months', () => {
- const startDate = new Date(2016, Months.Dec, 31);
-
- let result = DateMath.addMonths(startDate, -12);
- let expected = new Date(2015, Months.Dec, 31);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, -11);
- expected = new Date(2016, Months.Jan, 31);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, -10);
- expected = new Date(2016, Months.Feb, 29);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, -9);
- expected = new Date(2016, Months.Mar, 31);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, -8);
- expected = new Date(2016, Months.Apr, 30);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, -7);
- expected = new Date(2016, Months.May, 31);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, -6);
- expected = new Date(2016, Months.Jun, 30);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, -5);
- expected = new Date(2016, Months.Jul, 31);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, -4);
- expected = new Date(2016, Months.Aug, 31);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, -3);
- expected = new Date(2016, Months.Sep, 30);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, -2);
- expected = new Date(2016, Months.Oct, 31);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, -1);
- expected = new Date(2016, Months.Nov, 30);
- expect(result.getTime()).toEqual(expected.getTime());
-
- result = DateMath.addMonths(startDate, -22);
- expected = new Date(2015, Months.Feb, 28);
- expect(result.getTime()).toEqual(expected.getTime());
- });
-
- it('can subtract years', () => {
- let startDate = new Date(2016, Months.Feb, 29);
- let result = DateMath.addYears(startDate, -1);
- let expected = new Date(2015, Months.Feb, 28);
-
- expect(result.getTime()).toEqual(expected.getTime());
-
- startDate = new Date(2016, Months.Feb, 29);
- result = DateMath.addYears(startDate, -4);
- expected = new Date(2012, Months.Feb, 29);
-
- expect(result.getTime()).toEqual(expected.getTime());
-
- startDate = new Date(2016, Months.Jan, 1);
- result = DateMath.addYears(startDate, -1);
- expected = new Date(2015, Months.Jan, 1);
-
- expect(result.getTime()).toEqual(expected.getTime());
- });
-
- it('can set the month', () => {
- let startDate = new Date(2016, Months.Jan, 31);
- let result = DateMath.setMonth(startDate, Months.Feb);
- let expected = new Date(2016, Months.Feb, 29);
- expect(result.getTime()).toEqual(expected.getTime());
-
- startDate = new Date(2016, Months.Jun, 1);
- result = DateMath.setMonth(startDate, Months.Feb);
- expected = new Date(2016, Months.Feb, 1);
- expect(result.getTime()).toEqual(expected.getTime());
- });
-
- it('can compare dates', () => {
- let date1 = new Date(2016, 4, 1);
- let date2 = new Date(2016, 4, 1);
- expect(DateMath.compareDates(date1, date2)).toBe(true);
-
- date1 = new Date(2016, 4, 1, 12, 30, 0);
- date2 = new Date(2016, 4, 1, 10, 0, 0);
- expect(DateMath.compareDates(date1, date2)).toBe(true);
-
- date1 = new Date(2016, 4, 1);
- date2 = new Date(2016, 4, 2);
- expect(DateMath.compareDates(date1, date2)).toBe(false);
-
- date1 = new Date(2016, 4, 1);
- date2 = new Date(2016, 5, 1);
- expect(DateMath.compareDates(date1, date2)).toBe(false);
-
- date1 = new Date(2016, 4, 1);
- date2 = new Date(2017, 4, 1);
- expect(DateMath.compareDates(date1, date2)).toBe(false);
- });
-
- it('can get date range array', () => {
- const date = new Date(2017, 2, 16);
-
- // Date range: day
- let dateRangeArray = DateMath.getDateRangeArray(date, DateRangeType.Day, DayOfWeek.Sunday);
- expect(dateRangeArray.length).toEqual(1);
- expect(DateMath.compareDates(dateRangeArray[0], date)).toBe(true);
-
- // Date range: week
- let expectedDates = Array(7).map((val: undefined, i: number) => new Date(2017, 2, 12 + i));
- dateRangeArray = DateMath.getDateRangeArray(date, DateRangeType.Week, DayOfWeek.Sunday);
- Array(7).forEach((val: undefined, i: number) =>
- expect(DateMath.compareDates(dateRangeArray[i], expectedDates[i])).toBe(true),
- );
-
- // Date range: work week
- const workWeekDays = [DayOfWeek.Monday, DayOfWeek.Tuesday, DayOfWeek.Thursday, DayOfWeek.Friday];
- expectedDates = [new Date(2017, 2, 13), new Date(2017, 2, 14), new Date(2017, 2, 16), new Date(2017, 2, 17)];
- dateRangeArray = DateMath.getDateRangeArray(date, DateRangeType.Week, DayOfWeek.Sunday, workWeekDays);
- Array(4).forEach((val: undefined, i: number) =>
- expect(DateMath.compareDates(dateRangeArray[i], expectedDates[i])).toBe(true),
- );
-
- // work week defaults
- expectedDates = [
- new Date(2017, 2, 13),
- new Date(2017, 2, 14),
- new Date(2017, 2, 15),
- new Date(2017, 2, 16),
- new Date(2017, 2, 17),
- ];
- dateRangeArray = DateMath.getDateRangeArray(date, DateRangeType.Week, DayOfWeek.Sunday);
- Array(4).forEach((val: undefined, i: number) =>
- expect(DateMath.compareDates(dateRangeArray[i], expectedDates[i])).toBe(true),
- );
-
- // Date range: month
- expectedDates = Array(31).map((val: undefined, i: number) => new Date(2017, 2, 1 + i));
- dateRangeArray = DateMath.getDateRangeArray(date, DateRangeType.Month, DayOfWeek.Sunday);
- Array(31).forEach((val: undefined, i: number) =>
- expect(DateMath.compareDates(dateRangeArray[i], expectedDates[i])).toBe(true),
- );
-
- // First day of week: Tuesday
- expectedDates = Array(7).map((val: undefined, i: number) => new Date(2017, 2, 14 + i));
- dateRangeArray = DateMath.getDateRangeArray(date, DateRangeType.Week, DayOfWeek.Tuesday);
- Array(7).forEach((val: undefined, i: number) => expect(DateMath.compareDates(dateRangeArray[i], date)).toBe(true));
- });
-
- // Generating week numbers array per month
- it('can calculate week numbers from selected date', () => {
- // firstDayOfWeek is Monday, firstWeekOfYear is firstFullWeek
- let date = new Date(2017, 0, 4);
- let result = DateMath.getWeekNumbersInMonth(6, 1, 1, date);
- let expected = 52;
- expect(result[0]).toEqual(expected);
-
- // firstDayOfWeek is Sunday, firstWeekOfYear is firstFullWeek
- date = new Date(2000, 11, 31);
- result = DateMath.getWeekNumbersInMonth(6, 0, 1, date);
- expected = 53;
- expect(result[5]).toEqual(expected);
-
- // firstDayOfWeek is Sunday, firstWeekOfYear is firstFullWeek
- date = new Date(2010, 0, 1);
- result = DateMath.getWeekNumbersInMonth(6, 0, 1, date);
- expected = 52;
- expect(result[0]).toEqual(expected);
-
- // firstDayOfWeek is Sunday, firstWeekOfYear is firstFourDayWeek
- date = new Date(2018, 11, 31);
- result = DateMath.getWeekNumbersInMonth(6, 0, 2, date);
- expected = 1;
- expect(result[5]).toEqual(expected);
- });
-
- // First week of year set to FirstWeekOfYear.FirstDay
- it('can calculate week numbers - option 0', () => {
- // firstDayOfWeek is Sunday
- let date1 = new Date(2018, 0, 1);
- let result = DateMath.getWeekNumber(date1, 0, 0);
- let expected = 1;
- expect(result).toEqual(expected);
-
- // firstDayOfWeek is Sunday
- date1 = new Date(2010, 0, 1);
- result = DateMath.getWeekNumber(date1, 0, 0);
- expected = 1;
- expect(result).toEqual(expected);
-
- // firstDayOfWeek is Sunday
- date1 = new Date(2019, 0, 1);
- result = DateMath.getWeekNumber(date1, 0, 0);
- expected = 1;
- expect(result).toEqual(expected);
-
- // firstDayOfWeek is Monday
- date1 = new Date(2010, 11, 31);
- result = DateMath.getWeekNumber(date1, 1, 0);
- expected = 53;
- expect(result).toEqual(expected);
- });
-
- // First week of year set to FirstWeekOfYear.FirstFullWeek
- it('can calculate week numbers - option 1', () => {
- // firstDayOfWeek is Sunday
- let date1 = new Date(2018, 0, 1);
- let result = DateMath.getWeekNumber(date1, 0, 1);
- let expected = 53;
- expect(result).toEqual(expected);
-
- // firstDayOfWeek is Sunday
- date1 = new Date(2017, 11, 31);
- result = DateMath.getWeekNumber(date1, 0, 1);
- expected = 53;
- expect(result).toEqual(expected);
-
- // firstDayOfWeek is Sunday
- date1 = new Date(2010, 11, 31);
- result = DateMath.getWeekNumber(date1, 0, 1);
- expected = 52;
- expect(result).toEqual(expected);
-
- // firstDayOfWeek is Monday
- date1 = new Date(2011, 0, 1);
- result = DateMath.getWeekNumber(date1, 1, 1);
- expected = 52;
- expect(result).toEqual(expected);
-
- // firstDayOfWeek is Sunday
- date1 = new Date(2021, 0, 1);
- result = DateMath.getWeekNumber(date1, 0, 1);
- expected = 52;
- expect(result).toEqual(expected);
-
- // firstDayOfWeek is Monday
- date1 = new Date(2021, 0, 1);
- result = DateMath.getWeekNumber(date1, 1, 1);
- expected = 52;
- expect(result).toEqual(expected);
- });
-
- // First week of year set to FirstWeekOfYear.FirstFourDayWeek
- it('can calculate week numbers - option 2', () => {
- // firstDayOfWeek is Sunday
- let date1 = new Date(2019, 0, 5);
- let result = DateMath.getWeekNumber(date1, 0, 2);
- let expected = 1;
- expect(result).toEqual(expected);
-
- // firstDayOfWeek is Sunday
- date1 = new Date(2018, 0, 6);
- result = DateMath.getWeekNumber(date1, 0, 2);
- expected = 1;
- expect(result).toEqual(expected);
-
- // firstDayOfWeek is Sunday
- date1 = new Date(2014, 11, 31);
- result = DateMath.getWeekNumber(date1, 0, 2);
- expected = 53;
- expect(result).toEqual(expected);
-
- // firstDayOfWeek is Sunday
- date1 = new Date(2015, 0, 1);
- result = DateMath.getWeekNumber(date1, 0, 2);
- expected = 53;
- expect(result).toEqual(expected);
-
- // firstDayOfWeek is Sunday
- date1 = new Date(2010, 11, 31);
- result = DateMath.getWeekNumber(date1, 0, 2);
- expected = 52;
- expect(result).toEqual(expected);
-
- // firstDayOfWeek is Monday
- date1 = new Date(2011, 0, 1);
- result = DateMath.getWeekNumber(date1, 1, 2);
- expected = 52;
- expect(result).toEqual(expected);
-
- // firstDayOfWeek is Sunday
- date1 = new Date(2021, 0, 1);
- result = DateMath.getWeekNumber(date1, 0, 2);
- expected = 53;
- expect(result).toEqual(expected);
-
- // firstDayOfWeek is Monday
- date1 = new Date(2021, 0, 1);
- result = DateMath.getWeekNumber(date1, 1, 2);
- expected = 53;
- expect(result).toEqual(expected);
- });
-
- it('can get the month start and end', () => {
- const date = new Date('Dec 15 2017');
-
- // First day of month
- expect(DateMath.compareDates(new Date('Dec 1 2017'), DateMath.getMonthStart(date))).toBe(true);
-
- // Last day of month
- expect(DateMath.compareDates(new Date('Dec 31 2017'), DateMath.getMonthEnd(date))).toBe(true);
- });
-
- it('can get the year start and end', () => {
- const date = new Date('Dec 15 2017');
-
- // First day of year
- expect(DateMath.compareDates(new Date('Jan 1 2017'), DateMath.getYearStart(date))).toBe(true);
-
- // Last day of year
- expect(DateMath.compareDates(new Date('Dec 31 2017'), DateMath.getYearEnd(date))).toBe(true);
- });
-
- it('can get start date of week', () => {
- const date = new Date('Aug 2 2020');
- expect(DateMath.compareDates(new Date('Jul 28 2020'), DateMath.getStartDateOfWeek(date, DayOfWeek.Tuesday))).toBe(
- true,
- );
- });
-
- it('can get end date of week', () => {
- const date = new Date('Sep 29 2020');
- expect(DateMath.compareDates(new Date('Oct 5 2020'), DateMath.getEndDateOfWeek(date, DayOfWeek.Tuesday))).toBe(
- true,
- );
- });
-});
diff --git a/packages/react-components/react-datepicker-compat/src/utils/dateMath/dateMath.ts b/packages/react-components/react-datepicker-compat/src/utils/dateMath/dateMath.ts
deleted file mode 100644
index 384912af339661..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/dateMath/dateMath.ts
+++ /dev/null
@@ -1,431 +0,0 @@
-import { DateRangeType, DayOfWeek, FirstWeekOfYear, MonthOfYear, TimeConstants } from '../constants';
-
-/**
- * Returns a date offset from the given date by the specified number of days.
- * @param date - The origin date
- * @param days - The number of days to offset. 'days' can be negative.
- * @returns A new Date object offset from the origin date by the given number of days
- */
-export function addDays(date: Date, days: number): Date {
- const result = new Date(date.getTime());
- result.setDate(result.getDate() + days);
- return result;
-}
-
-/**
- * Returns a date offset from the given date by the specified number of weeks.
- * @param date - The origin date
- * @param weeks - The number of weeks to offset. 'weeks' can be negative.
- * @returns A new Date object offset from the origin date by the given number of weeks
- */
-export function addWeeks(date: Date, weeks: number): Date {
- return addDays(date, weeks * TimeConstants.DaysInOneWeek);
-}
-
-/**
- * Returns a date offset from the given date by the specified number of months.
- * The method tries to preserve the day-of-month; however, if the new month does not have enough days
- * to contain the original day-of-month, we'll use the last day of the new month.
- * @param date - The origin date
- * @param months - The number of months to offset. 'months' can be negative.
- * @returns A new Date object offset from the origin date by the given number of months
- */
-export function addMonths(date: Date, months: number): Date {
- let result = new Date(date.getTime());
- const newMonth = result.getMonth() + months;
- result.setMonth(newMonth);
-
- // We want to maintain the same day-of-month, but that may not be possible if the new month doesn't have enough days.
- // Loop until we back up to a day the new month has.
- // (Weird modulo math is due to Javascript's treatment of negative numbers in modulo)
- if (
- result.getMonth() !==
- ((newMonth % TimeConstants.MonthInOneYear) + TimeConstants.MonthInOneYear) % TimeConstants.MonthInOneYear
- ) {
- result = addDays(result, -result.getDate());
- }
- return result;
-}
-
-/**
- * Returns a date offset from the given date by the specified number of years.
- * The method tries to preserve the day-of-month; however, if the new month does not have enough days
- * to contain the original day-of-month, we'll use the last day of the new month.
- * @param date - The origin date
- * @param years - The number of years to offset. 'years' can be negative.
- * @returns A new Date object offset from the origin date by the given number of years
- */
-export function addYears(date: Date, years: number): Date {
- let result = new Date(date.getTime());
- result.setFullYear(date.getFullYear() + years);
-
- // We want to maintain the same day-of-month, but that may not be possible if the new month doesn't have enough days.
- // Loop until we back up to a day the new month has.
- // (Weird modulo math is due to Javascript's treatment of negative numbers in modulo)
- if (
- result.getMonth() !==
- ((date.getMonth() % TimeConstants.MonthInOneYear) + TimeConstants.MonthInOneYear) % TimeConstants.MonthInOneYear
- ) {
- result = addDays(result, -result.getDate());
- }
- return result;
-}
-
-/**
- * Returns a date that is the first day of the month of the provided date.
- * @param date - The origin date
- * @returns A new Date object with the day set to the first day of the month.
- */
-export function getMonthStart(date: Date): Date {
- return new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0, 0);
-}
-
-/**
- * Returns a date that is the last day of the month of the provided date.
- * @param date - The origin date
- * @returns A new Date object with the day set to the last day of the month.
- */
-export function getMonthEnd(date: Date): Date {
- return new Date(date.getFullYear(), date.getMonth() + 1, 0, 0, 0, 0, 0);
-}
-
-/**
- * Returns a date that is the first day of the year of the provided date.
- * @param date - The origin date
- * @returns A new Date object with the day set to the first day of the year.
- */
-export function getYearStart(date: Date): Date {
- return new Date(date.getFullYear(), 0, 1, 0, 0, 0, 0);
-}
-
-/**
- * Returns a date that is the last day of the year of the provided date.
- * @param date - The origin date
- * @returns A new Date object with the day set to the last day of the year.
- */
-export function getYearEnd(date: Date): Date {
- return new Date(date.getFullYear() + 1, 0, 0, 0, 0, 0, 0);
-}
-
-/**
- * Returns a date that is a copy of the given date, aside from the month changing to the given month.
- * The method tries to preserve the day-of-month; however, if the new month does not have enough days
- * to contain the original day-of-month, we'll use the last day of the new month.
- * @param date - The origin date
- * @param month - The 0-based index of the month to set on the date.
- * @returns A new Date object with the given month set.
- */
-export function setMonth(date: Date, month: number): Date {
- return addMonths(date, month - date.getMonth());
-}
-
-/**
- * Compares two dates, and returns true if the two dates (not accounting for time-of-day) are equal.
- * @returns True if the two dates represent the same date (regardless of time-of-day), false otherwise.
- */
-export function compareDates(date1: Date, date2: Date): boolean {
- if (!date1 && !date2) {
- return true;
- } else if (!date1 || !date2) {
- return false;
- } else {
- return (
- date1.getFullYear() === date2.getFullYear() &&
- date1.getMonth() === date2.getMonth() &&
- date1.getDate() === date2.getDate()
- );
- }
-}
-
-/**
- * Compare the date parts of two dates
- * @param date1 - The first date to compare
- * @param date2 - The second date to compare
- * @returns A negative value if date1 is earlier than date2, 0 if the dates are equal, or a positive value
- * if date1 is later than date2.
- */
-export function compareDatePart(date1: Date, date2: Date): Number {
- return getDatePartHashValue(date1) - getDatePartHashValue(date2);
-}
-
-/**
- * Gets the date range array including the specified date. The date range array is calculated as the list
- * of dates accounting for the specified first day of the week and date range type.
- * @param date - The input date
- * @param dateRangeType - The desired date range type, i.e., day, week, month, etc.
- * @param firstDayOfWeek - The first day of the week.
- * @param workWeekDays - The allowed days in work week. If not provided, assumes all days are allowed.
- * @param daysToSelectInDayView - The number of days to include when using dateRangeType === DateRangeType.Day
- * for multiday view. Defaults to 1
- * @returns An array of dates representing the date range containing the specified date.
- */
-export function getDateRangeArray(
- date: Date,
- dateRangeType: DateRangeType,
- firstDayOfWeek: DayOfWeek,
- workWeekDays?: DayOfWeek[],
- daysToSelectInDayView: number = 1,
-): Date[] {
- const datesArray: Date[] = [];
- let startDate: Date;
- let endDate = null;
-
- if (!workWeekDays) {
- workWeekDays = [DayOfWeek.Monday, DayOfWeek.Tuesday, DayOfWeek.Wednesday, DayOfWeek.Thursday, DayOfWeek.Friday];
- }
-
- daysToSelectInDayView = Math.max(daysToSelectInDayView, 1);
-
- switch (dateRangeType) {
- case DateRangeType.Day:
- startDate = getDatePart(date);
- endDate = addDays(startDate, daysToSelectInDayView);
- break;
-
- case DateRangeType.Week:
- case DateRangeType.WorkWeek:
- startDate = getStartDateOfWeek(getDatePart(date), firstDayOfWeek);
- endDate = addDays(startDate, TimeConstants.DaysInOneWeek);
- break;
-
- case DateRangeType.Month:
- startDate = new Date(date.getFullYear(), date.getMonth(), 1);
- endDate = addMonths(startDate, 1);
- break;
-
- default:
- throw new Error('Unexpected object: ' + dateRangeType);
- }
-
- // Populate the dates array with the dates in range
- let nextDate = startDate;
-
- do {
- if (dateRangeType !== DateRangeType.WorkWeek) {
- // push all days not in work week view
- datesArray.push(nextDate);
- } else if (workWeekDays.indexOf(nextDate.getDay()) !== -1) {
- datesArray.push(nextDate);
- }
- nextDate = addDays(nextDate, 1);
- } while (!compareDates(nextDate, endDate));
-
- return datesArray;
-}
-
-/**
- * Checks whether the specified date is in the given date range.
- * @param date - The origin date
- * @param dateRange - An array of dates to do the lookup on
- * @returns True if the date matches one of the dates in the specified array, false otherwise.
- */
-export function isInDateRangeArray(date: Date, dateRange: Date[]): boolean {
- for (const dateInRange of dateRange) {
- if (compareDates(date, dateInRange)) {
- return true;
- }
- }
- return false;
-}
-
-/**
- * Returns the week number for a date.
- * Week numbers are 1 - 52 (53) in a year
- * @param navigatedDate - A date to find the week number for.
- * @param firstDayOfWeek - The first day of the week (0-6, Sunday = 0)
- * @param firstWeekOfYear - The first week of the year (1-2)
- * @returns The weeks number array for the current month.
- */
-export function getWeekNumbersInMonth(
- weeksInMonth: number,
- firstDayOfWeek: DayOfWeek,
- firstWeekOfYear: FirstWeekOfYear,
- navigatedDate: Date,
-): number[] {
- const selectedYear = navigatedDate.getFullYear();
- const selectedMonth = navigatedDate.getMonth();
- let dayOfMonth = 1;
- const fistDayOfMonth = new Date(selectedYear, selectedMonth, dayOfMonth);
- const endOfFirstWeek =
- dayOfMonth +
- (firstDayOfWeek + TimeConstants.DaysInOneWeek - 1) -
- adjustWeekDay(firstDayOfWeek, fistDayOfMonth.getDay());
- let endOfWeekRange = new Date(selectedYear, selectedMonth, endOfFirstWeek);
- dayOfMonth = endOfWeekRange.getDate();
-
- const weeksArray = [];
- for (let i = 0; i < weeksInMonth; i++) {
- // Get week number for end of week
- weeksArray.push(getWeekNumber(endOfWeekRange, firstDayOfWeek, firstWeekOfYear));
- dayOfMonth += TimeConstants.DaysInOneWeek;
- endOfWeekRange = new Date(selectedYear, selectedMonth, dayOfMonth);
- }
- return weeksArray;
-}
-
-/**
- * Returns the week number for a date.
- * Week numbers are 1 - 52 (53) in a year
- * @param date - A date to find the week number for.
- * @param firstDayOfWeek - The first day of the week (0-6, Sunday = 0)
- * @param firstWeekOfYear - The first week of the year (1-2)
- * @returns The week's number in the year.
- */
-export function getWeekNumber(date: Date, firstDayOfWeek: DayOfWeek, firstWeekOfYear: FirstWeekOfYear): number {
- // First four-day week of the year - minumum days count
- const fourDayWeek = 4;
-
- switch (firstWeekOfYear) {
- case FirstWeekOfYear.FirstFullWeek:
- return getWeekOfYearFullDays(date, firstDayOfWeek, TimeConstants.DaysInOneWeek);
-
- case FirstWeekOfYear.FirstFourDayWeek:
- return getWeekOfYearFullDays(date, firstDayOfWeek, fourDayWeek);
-
- default:
- return getFirstDayWeekOfYear(date, firstDayOfWeek);
- }
-}
-
-/**
- * Gets the date for the first day of the week based on the given date assuming
- * the specified first day of the week.
- * @param date - The date to find the beginning of the week date for.
- * @returns A new date object representing the first day of the week containing the input date.
- */
-export function getStartDateOfWeek(date: Date, firstDayOfWeek: DayOfWeek): Date {
- let daysOffset = firstDayOfWeek - date.getDay();
- if (daysOffset > 0) {
- // If first day of week is > date, go 1 week back, to ensure resulting date is in the past.
- daysOffset -= TimeConstants.DaysInOneWeek;
- }
- return addDays(date, daysOffset);
-}
-
-/**
- * Gets the date for the last day of the week based on the given date assuming
- * the specified first day of the week.
- * @param date - The date to find the beginning of the week date for.
- * @returns A new date object representing the first day of the week containing the input date.
- */
-export function getEndDateOfWeek(date: Date, firstDayOfWeek: DayOfWeek): Date {
- const lastDayOfWeek = firstDayOfWeek - 1 >= 0 ? firstDayOfWeek - 1 : TimeConstants.DaysInOneWeek - 1;
- let daysOffset = lastDayOfWeek - date.getDay();
- if (daysOffset < 0) {
- // If last day of week is < date, go 1 week forward, to ensure resulting date is in the future.
- daysOffset += TimeConstants.DaysInOneWeek;
- }
- return addDays(date, daysOffset);
-}
-
-/**
- * Gets a new date with the time portion zeroed out, i.e., set to midnight
- * @param date - The origin date
- * @returns A new date with the time set to midnight
- */
-function getDatePart(date: Date): Date {
- return new Date(date.getFullYear(), date.getMonth(), date.getDate());
-}
-
-/**
- * Helper function to assist in date comparisons
- */
-export function getDatePartHashValue(date: Date): number {
- // Generate date hash value created as sum of Date (up to 31 = 5 bits), Month (up to 11 = 4 bits) and Year.
- // eslint-disable-next-line no-bitwise
- return date.getDate() + (date.getMonth() << 5) + (date.getFullYear() << 9);
-}
-
-/**
- * Helper function for `getWeekNumber`.
- * Returns week number for a date.
- * @param date - current selected date.
- * @param firstDayOfWeek - The first day of week (0-6, Sunday = 0)
- * @param numberOfFullDays - week settings.
- * @returns The week's number in the year.
- */
-function getWeekOfYearFullDays(date: Date, firstDayOfWeek: DayOfWeek, numberOfFullDays: number): number {
- const dayOfYear = getDayOfYear(date) - 1;
- let num = date.getDay() - (dayOfYear % TimeConstants.DaysInOneWeek);
-
- const lastDayOfPrevYear = new Date(date.getFullYear() - 1, MonthOfYear.December, 31);
- const daysInYear = getDayOfYear(lastDayOfPrevYear) - 1;
-
- let num2 = (firstDayOfWeek - num + 2 * TimeConstants.DaysInOneWeek) % TimeConstants.DaysInOneWeek;
- if (num2 !== 0 && num2 >= numberOfFullDays) {
- num2 -= TimeConstants.DaysInOneWeek;
- }
-
- let num3 = dayOfYear - num2;
- if (num3 < 0) {
- num -= daysInYear % TimeConstants.DaysInOneWeek;
- num2 = (firstDayOfWeek - num + 2 * TimeConstants.DaysInOneWeek) % TimeConstants.DaysInOneWeek;
- if (num2 !== 0 && num2 + 1 >= numberOfFullDays) {
- num2 -= TimeConstants.DaysInOneWeek;
- }
-
- num3 = daysInYear - num2;
- }
-
- return Math.floor(num3 / TimeConstants.DaysInOneWeek + 1);
-}
-
-/**
- * Helper function for `getWeekNumber`.
- * Returns week number for a date.
- * @param date - current selected date.
- * @param firstDayOfWeek - The first day of week (0-6, Sunday = 0)
- * @returns The week's number in the year.
- */
-function getFirstDayWeekOfYear(date: Date, firstDayOfWeek: number): number {
- const num = getDayOfYear(date) - 1;
- const num2 = date.getDay() - (num % TimeConstants.DaysInOneWeek);
- const num3 = (num2 - firstDayOfWeek + 2 * TimeConstants.DaysInOneWeek) % TimeConstants.DaysInOneWeek;
-
- return Math.floor((num + num3) / TimeConstants.DaysInOneWeek + 1);
-}
-
-/**
- * Helper function for `getWeekNumber`.
- * Returns adjusted week day number when `firstDayOfWeek` is other than Sunday.
- * For Week Day Number comparison checks
- * @param firstDayOfWeek - The first day of week (0-6, Sunday = 0)
- * @param dateWeekDay - shifts number forward to 1 week in case passed as true
- * @returns The day of week adjusted to `firstDayOfWeek`; e.g. when `firstDayOfWeek` is Monday (1),
- * Sunday becomes 7.
- */
-function adjustWeekDay(firstDayOfWeek: DayOfWeek, dateWeekDay: DayOfWeek): number {
- return firstDayOfWeek !== DayOfWeek.Sunday && dateWeekDay < firstDayOfWeek
- ? dateWeekDay + TimeConstants.DaysInOneWeek
- : dateWeekDay;
-}
-
-/**
- * Returns the day number for a date in a year:
- * the number of days since January 1st in the particular year.
- * @param date - A date to find the day number for.
- * @returns The day's number in the year.
- */
-function getDayOfYear(date: Date): number {
- const month = date.getMonth();
- const year = date.getFullYear();
- let daysUntilDate = 0;
-
- for (let i = 0; i < month; i++) {
- daysUntilDate += daysInMonth(i + 1, year);
- }
-
- daysUntilDate += date.getDate();
-
- return daysUntilDate;
-}
-
-/**
- * Returns the number of days in the month
- * @param month - The month number to target (months 1-12).
- * @param year - The year to target.
- * @returns The number of days in the month.
- */
-function daysInMonth(month: number, year: number): number {
- return new Date(year, month, 0).getDate();
-}
diff --git a/packages/react-components/react-datepicker-compat/src/utils/dateMath/index.ts b/packages/react-components/react-datepicker-compat/src/utils/dateMath/index.ts
deleted file mode 100644
index 162dde38c42c49..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/dateMath/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dateMath';
diff --git a/packages/react-components/react-datepicker-compat/src/utils/dom.ts b/packages/react-components/react-datepicker-compat/src/utils/dom.ts
deleted file mode 100644
index 4ce45e2fa22b1f..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/dom.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { canUseDOM } from '@fluentui/react-utilities';
-
-export function getWindow(targetElement?: Element | null): Window | undefined {
- if (!canUseDOM() || typeof window === 'undefined') {
- return undefined;
- }
-
- const el = targetElement as Element;
-
- return el && el.ownerDocument && el.ownerDocument.defaultView ? el.ownerDocument.defaultView : window;
-}
diff --git a/packages/react-components/react-datepicker-compat/src/utils/focus.ts b/packages/react-components/react-datepicker-compat/src/utils/focus.ts
deleted file mode 100644
index 97bc5ddb7bfa8b..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/focus.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { getWindow } from './dom';
-
-let targetToFocusOnNextRepaint: HTMLElement | { focus: () => void } | null | undefined = undefined;
-
-/**
- * Sets focus to an element asynchronously. The focus will be set at the next browser repaint,
- * meaning it won't cause any extra recalculations. If more than one focusAsync is called during one frame,
- * only the latest called focusAsync element will actually be focused
- * @param element - The element to focus
- */
-export function focusAsync(element: HTMLElement | { focus: () => void } | undefined | null): void {
- if (element) {
- // An element was already queued to be focused, so replace that one with the new element
- if (targetToFocusOnNextRepaint) {
- targetToFocusOnNextRepaint = element;
- return;
- }
-
- targetToFocusOnNextRepaint = element;
-
- const win = getWindow(element as Element);
-
- if (win) {
- // element.focus() is a no-op if the element is no longer in the DOM, meaning this is always safe
- win.requestAnimationFrame(() => {
- targetToFocusOnNextRepaint && targetToFocusOnNextRepaint.focus();
-
- // We are done focusing for this frame, so reset the queued focus element
- targetToFocusOnNextRepaint = undefined;
- });
- }
- }
-}
diff --git a/packages/react-components/react-datepicker-compat/src/utils/index.ts b/packages/react-components/react-datepicker-compat/src/utils/index.ts
deleted file mode 100644
index 488020805bb61c..00000000000000
--- a/packages/react-components/react-datepicker-compat/src/utils/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from './animations';
-export * from './constants';
-export * from './dateFormatting';
-export * from './dateGrid';
-export * from './dateMath';
-export * from './dom';
-export * from './focus';
diff --git a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerControlled.stories.tsx b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerControlled.stories.tsx
index 31062666a944ef..be839c3aa6cd5b 100644
--- a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerControlled.stories.tsx
+++ b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerControlled.stories.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
-import { addDays, DatePicker } from '@fluentui/react-datepicker-compat';
+import { addDays } from '@fluentui/react-calendar-compat';
+import { DatePicker } from '@fluentui/react-datepicker-compat';
import { Button, Field, makeStyles } from '@fluentui/react-components';
const useStyles = makeStyles({
diff --git a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerDateBoundaries.stories.tsx b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerDateBoundaries.stories.tsx
index 1debb658c2ba7c..10877192660624 100644
--- a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerDateBoundaries.stories.tsx
+++ b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerDateBoundaries.stories.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
-import { addMonths, addYears, DatePicker } from '@fluentui/react-datepicker-compat';
+import { addMonths, addYears } from '@fluentui/react-calendar-compat';
+import { DatePicker } from '@fluentui/react-datepicker-compat';
import { Field, makeStyles } from '@fluentui/react-components';
const useStyles = makeStyles({
diff --git a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerDateRange.stories.tsx b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerDateRange.stories.tsx
index 1770ff822a032d..c4396e5c3e1e18 100644
--- a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerDateRange.stories.tsx
+++ b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerDateRange.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import { Field, Label, makeStyles, Select } from '@fluentui/react-components';
-import { DatePicker, DateRangeType } from '@fluentui/react-datepicker-compat';
+import { DateRangeType } from '@fluentui/react-calendar-compat';
+import { DatePicker } from '@fluentui/react-datepicker-compat';
const useStyles = makeStyles({
container: {
diff --git a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerErrorHandling.stories.tsx b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerErrorHandling.stories.tsx
index 046c85d6c7eaa0..8ee8b60dc240a3 100644
--- a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerErrorHandling.stories.tsx
+++ b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerErrorHandling.stories.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
-import { addMonths, addYears, DatePicker, defaultDatePickerErrorStrings } from '@fluentui/react-datepicker-compat';
+import { addMonths, addYears } from '@fluentui/react-calendar-compat';
+import { DatePicker, defaultDatePickerErrorStrings } from '@fluentui/react-datepicker-compat';
import { Field, makeStyles } from '@fluentui/react-components';
import type { DatePickerValidationResultData } from '@fluentui/react-datepicker-compat';
diff --git a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerFirstDayOfTheWeek.stories.tsx b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerFirstDayOfTheWeek.stories.tsx
index e3c90b7fdd8e5b..a87a1d72c1cfb0 100644
--- a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerFirstDayOfTheWeek.stories.tsx
+++ b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerFirstDayOfTheWeek.stories.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
-import { DatePicker, DayOfWeek } from '@fluentui/react-datepicker-compat';
+import { DayOfWeek } from '@fluentui/react-calendar-compat';
+import { DatePicker } from '@fluentui/react-datepicker-compat';
import { Dropdown, Field, makeStyles, Option, useId } from '@fluentui/react-components';
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];