@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

package/esm/core/DatePicker/DatePicker.js

@@ -4,106 +4,116 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { SvgChevronLeft, SvgChevronRight, SvgChevronLeftDouble, SvgChevronRightDouble, isBefore, Box, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/date-picker.css';
+import {
+  SvgChevronLeft,
+  SvgChevronRight,
+  SvgChevronLeftDouble,
+  SvgChevronRightDouble,
+  isBefore,
+  Box,
+  useId,
+} from '../utils/index.js';
 import { IconButton } from '../Buttons/IconButton/index.js';
 import { TimePicker } from '../TimePicker/index.js';
+import { Surface } from '../Surface/index.js';
 const isSameDay = (a, b) => {
-    return (a &&
-        b &&
-        a.getFullYear() === b.getFullYear() &&
-        a.getMonth() === b.getMonth() &&
-        a.getDate() === b.getDate());
+  return (
+    a &&
+    b &&
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
 };
 const isInDateRange = (date, startDate, endDate) => {
-    if (!date || !startDate || !endDate) {
-        return false;
-    }
-    const minDate = new Date(startDate);
-    const maxDate = new Date(endDate);
-    const testDate = new Date(date);
-    testDate && testDate.setHours(0, 0, 0, 0);
-    minDate && minDate.setHours(0, 0, 0, 0);
-    maxDate && maxDate.setHours(0, 0, 0, 0);
-    return testDate > minDate && testDate < maxDate;
+  if (!date || !startDate || !endDate) {
+    return false;
+  }
+  const minDate = new Date(startDate);
+  const maxDate = new Date(endDate);
+  const testDate = new Date(date);
+  testDate && testDate.setHours(0, 0, 0, 0);
+  minDate && minDate.setHours(0, 0, 0, 0);
+  maxDate && maxDate.setHours(0, 0, 0, 0);
+  return testDate > minDate && testDate < maxDate;
 };
 // Type guard for multiple did not work
 const isSingleOnChange = (onChange, enableRangeSelect) => {
-    return !enableRangeSelect;
+  return !enableRangeSelect;
 };
 const defaultMonths = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
 ];
 const defaultShortDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
 const defaultLongDays = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday',
+  'Sunday',
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
 ];
 /**
  * Generate localized months and days strings using `Intl.DateTimeFormat` for passed locale to use in DatePicker component.
  * If locale is not passed, browser locale will be used.
  */
 export const generateLocalizedStrings = (locale) => {
-    const shortWeekDayFormatter = new Intl.DateTimeFormat(locale, {
-        weekday: 'short',
-    });
-    const longWeekDayFormatter = new Intl.DateTimeFormat(locale, {
-        weekday: 'long',
-    });
-    const monthFormatter = new Intl.DateTimeFormat(locale, { month: 'long' });
-    const months = [
-        monthFormatter.format(new Date(2020, 0, 1)),
-        monthFormatter.format(new Date(2020, 1, 1)),
-        monthFormatter.format(new Date(2020, 2, 1)),
-        monthFormatter.format(new Date(2020, 3, 1)),
-        monthFormatter.format(new Date(2020, 4, 1)),
-        monthFormatter.format(new Date(2020, 5, 1)),
-        monthFormatter.format(new Date(2020, 6, 1)),
-        monthFormatter.format(new Date(2020, 7, 1)),
-        monthFormatter.format(new Date(2020, 8, 1)),
-        monthFormatter.format(new Date(2020, 9, 1)),
-        monthFormatter.format(new Date(2020, 10, 1)),
-        monthFormatter.format(new Date(2020, 11, 1)),
-    ];
-    const days = [
-        longWeekDayFormatter.format(new Date(2020, 10, 1)),
-        longWeekDayFormatter.format(new Date(2020, 10, 2)),
-        longWeekDayFormatter.format(new Date(2020, 10, 3)),
-        longWeekDayFormatter.format(new Date(2020, 10, 4)),
-        longWeekDayFormatter.format(new Date(2020, 10, 5)),
-        longWeekDayFormatter.format(new Date(2020, 10, 6)),
-        longWeekDayFormatter.format(new Date(2020, 10, 7)),
-    ];
-    const shortDays = [
-        shortWeekDayFormatter.format(new Date(2020, 10, 1)).slice(0, 2),
-        shortWeekDayFormatter.format(new Date(2020, 10, 2)).slice(0, 2),
-        shortWeekDayFormatter.format(new Date(2020, 10, 3)).slice(0, 2),
-        shortWeekDayFormatter.format(new Date(2020, 10, 4)).slice(0, 2),
-        shortWeekDayFormatter.format(new Date(2020, 10, 5)).slice(0, 2),
-        shortWeekDayFormatter.format(new Date(2020, 10, 6)).slice(0, 2),
-        shortWeekDayFormatter.format(new Date(2020, 10, 7)).slice(0, 2),
-    ];
-    return {
-        months,
-        shortDays,
-        days,
-    };
+  const shortWeekDayFormatter = new Intl.DateTimeFormat(locale, {
+    weekday: 'short',
+  });
+  const longWeekDayFormatter = new Intl.DateTimeFormat(locale, {
+    weekday: 'long',
+  });
+  const monthFormatter = new Intl.DateTimeFormat(locale, { month: 'long' });
+  const months = [
+    monthFormatter.format(new Date(2020, 0, 1)),
+    monthFormatter.format(new Date(2020, 1, 1)),
+    monthFormatter.format(new Date(2020, 2, 1)),
+    monthFormatter.format(new Date(2020, 3, 1)),
+    monthFormatter.format(new Date(2020, 4, 1)),
+    monthFormatter.format(new Date(2020, 5, 1)),
+    monthFormatter.format(new Date(2020, 6, 1)),
+    monthFormatter.format(new Date(2020, 7, 1)),
+    monthFormatter.format(new Date(2020, 8, 1)),
+    monthFormatter.format(new Date(2020, 9, 1)),
+    monthFormatter.format(new Date(2020, 10, 1)),
+    monthFormatter.format(new Date(2020, 11, 1)),
+  ];
+  const days = [
+    longWeekDayFormatter.format(new Date(2020, 10, 1)),
+    longWeekDayFormatter.format(new Date(2020, 10, 2)),
+    longWeekDayFormatter.format(new Date(2020, 10, 3)),
+    longWeekDayFormatter.format(new Date(2020, 10, 4)),
+    longWeekDayFormatter.format(new Date(2020, 10, 5)),
+    longWeekDayFormatter.format(new Date(2020, 10, 6)),
+    longWeekDayFormatter.format(new Date(2020, 10, 7)),
+  ];
+  const shortDays = [
+    shortWeekDayFormatter.format(new Date(2020, 10, 1)).slice(0, 2),
+    shortWeekDayFormatter.format(new Date(2020, 10, 2)).slice(0, 2),
+    shortWeekDayFormatter.format(new Date(2020, 10, 3)).slice(0, 2),
+    shortWeekDayFormatter.format(new Date(2020, 10, 4)).slice(0, 2),
+    shortWeekDayFormatter.format(new Date(2020, 10, 5)).slice(0, 2),
+    shortWeekDayFormatter.format(new Date(2020, 10, 6)).slice(0, 2),
+    shortWeekDayFormatter.format(new Date(2020, 10, 7)).slice(0, 2),
+  ];
+  return {
+    months,
+    shortDays,
+    days,
+  };
 };
 /**
  * Date picker component
@@ -111,255 +121,472 @@ export const generateLocalizedStrings = (locale) => {
  * <DatePicker date={new Date()} onChange={(e) => console.log('New date value: ' + e)} />
  */
 export const DatePicker = React.forwardRef((props, forwardedRef) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { date, onChange, localizedNames, className, setFocus = false, showTime = false, use12Hours = false, precision, hourStep, minuteStep, secondStep, useCombinedRenderer, combinedRenderer, hourRenderer, minuteRenderer, secondRenderer, meridiemRenderer, showYearSelection = false, enableRangeSelect = false, startDate, endDate, isDateDisabled, ...rest } = props;
-    const monthNames = (_a = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.months) !== null && _a !== void 0 ? _a : defaultMonths;
-    const shortDays = (_b = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.shortDays) !== null && _b !== void 0 ? _b : defaultShortDays;
-    const longDays = (_c = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.days) !== null && _c !== void 0 ? _c : defaultLongDays;
-    const [selectedDay, setSelectedDay] = React.useState(date);
-    const [selectedStartDay, setSelectedStartDay] = React.useState(startDate);
-    const [selectedEndDay, setSelectedEndDay] = React.useState(endDate);
-    const [focusedDay, setFocusedDay] = React.useState((_d = selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay) !== null && _d !== void 0 ? _d : new Date());
-    const [displayedMonthIndex, setDisplayedMonthIndex] = React.useState((_f = (_e = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getMonth()) !== null && _e !== void 0 ? _e : selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.getMonth()) !== null && _f !== void 0 ? _f : new Date().getMonth());
-    const [displayedYear, setDisplayedYear] = React.useState((_h = (_g = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getFullYear()) !== null && _g !== void 0 ? _g : selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.getFullYear()) !== null && _h !== void 0 ? _h : new Date().getFullYear());
-    // boolean that toggles between the user picking the start date and end date for date range
-    const [isSelectingStartDate, setIsSelectingStartDate] = React.useState(true);
-    // Used to focus days only when days are changed
-    // e.g. without this, when changing months day would be focused
-    const needFocus = React.useRef(setFocus);
-    React.useEffect(() => {
-        if (needFocus.current) {
-            needFocus.current = false;
-        }
-    });
-    const setMonthAndYear = React.useCallback((newMonth, newYear) => {
-        setDisplayedMonthIndex(newMonth);
-        setDisplayedYear(newYear);
-    }, []);
-    React.useEffect(() => {
-        var _a, _b, _c, _d;
-        const currentDate = new Date();
-        setSelectedDay(date);
-        setSelectedStartDay(startDate);
-        setSelectedEndDay(endDate);
-        if (!enableRangeSelect) {
-            setFocusedDay(date !== null && date !== void 0 ? date : currentDate);
-        }
-        setMonthAndYear((_b = (_a = startDate === null || startDate === void 0 ? void 0 : startDate.getMonth()) !== null && _a !== void 0 ? _a : date === null || date === void 0 ? void 0 : date.getMonth()) !== null && _b !== void 0 ? _b : currentDate.getMonth(), (_d = (_c = startDate === null || startDate === void 0 ? void 0 : startDate.getFullYear()) !== null && _c !== void 0 ? _c : date === null || date === void 0 ? void 0 : date.getFullYear()) !== null && _d !== void 0 ? _d : currentDate.getFullYear());
-    }, [date, setMonthAndYear, startDate, endDate, enableRangeSelect]);
-    const days = React.useMemo(() => {
-        let offsetToFirst = new Date(displayedYear, displayedMonthIndex, 1).getDay();
-        // if its sunday, show one week before
-        if (0 === offsetToFirst) {
-            offsetToFirst = 7;
-        }
-        const daysInMonth = [];
-        // generate 6 weeks of dates
-        for (let i = 1; i <= 42; i++) {
-            const adjustedDay = i - offsetToFirst;
-            daysInMonth.push(new Date(displayedYear, displayedMonthIndex, adjustedDay));
-        }
-        return daysInMonth;
-    }, [displayedMonthIndex, displayedYear]);
-    const weeks = React.useMemo(() => {
-        const weeksInMonth = [];
-        const weekCount = Math.ceil(days.length / 7);
-        for (let i = 0; i < weekCount; i++) {
-            weeksInMonth.push(days.slice(i * 7, (i + 1) * 7));
-        }
-        return weeksInMonth;
-    }, [days]);
-    const getNewFocusedDate = (newYear, newMonth) => {
-        var _a;
-        const currentDate = (_a = selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay) !== null && _a !== void 0 ? _a : new Date();
-        const newDate = new Date(newYear, newMonth, currentDate.getDate(), currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds());
-        return newDate;
-    };
-    const handleMoveToPreviousYear = () => {
-        const newYear = displayedYear - 1;
-        setMonthAndYear(displayedMonthIndex, newYear);
-        setFocusedDay(getNewFocusedDate(newYear, displayedMonthIndex));
-    };
-    const handleMoveToNextYear = () => {
-        const newYear = displayedYear + 1;
-        setMonthAndYear(displayedMonthIndex, newYear);
-        setFocusedDay(getNewFocusedDate(newYear, displayedMonthIndex));
-    };
-    const handleMoveToPreviousMonth = () => {
-        const newMonth = displayedMonthIndex !== 0 ? displayedMonthIndex - 1 : 11;
-        const newYear = displayedMonthIndex !== 0 ? displayedYear : displayedYear - 1;
-        setMonthAndYear(newMonth, newYear);
-        setFocusedDay(getNewFocusedDate(newYear, newMonth));
-    };
-    const handleMoveToNextMonth = () => {
-        const newMonth = displayedMonthIndex !== 11 ? displayedMonthIndex + 1 : 0;
-        const newYear = displayedMonthIndex !== 11 ? displayedYear : displayedYear + 1;
-        setMonthAndYear(newMonth, newYear);
-        setFocusedDay(getNewFocusedDate(newYear, newMonth));
-    };
-    const onDayClick = (day) => {
-        // single date selection
-        if (!enableRangeSelect) {
-            if (day.getMonth() !== (selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.getMonth())) {
-                setMonthAndYear(day.getMonth(), day.getFullYear());
-            }
-            const currentDate = selectedDay !== null && selectedDay !== void 0 ? selectedDay : new Date();
-            const newDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds());
-            setSelectedDay(newDate);
-            setFocusedDay(newDate);
-            isSingleOnChange(onChange, enableRangeSelect) && (onChange === null || onChange === void 0 ? void 0 : onChange(newDate));
-        }
-        // start date selection (date range only)
-        else if (isSelectingStartDate) {
-            if (day.getMonth() !== (selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getMonth())) {
-                setMonthAndYear(day.getMonth(), day.getFullYear());
-            }
-            const currentStartDate = selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : new Date();
-            const newStartDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentStartDate.getHours(), currentStartDate.getMinutes(), currentStartDate.getSeconds());
-            setSelectedStartDay(newStartDate);
-            setFocusedDay(newStartDate);
-            // if the start date is after the end date or the end date is undefined, reset the end date
-            if (!isBefore(newStartDate, selectedEndDay)) {
-                setSelectedEndDay(newStartDate);
-                onChange === null || onChange === void 0 ? void 0 : onChange(newStartDate, newStartDate);
-            }
-            else {
-                selectedEndDay && (onChange === null || onChange === void 0 ? void 0 : onChange(newStartDate, selectedEndDay));
-            }
-            setIsSelectingStartDate(false);
-        }
-        // end date selection (date range only)
-        else {
-            if (day.getMonth() !== (selectedEndDay === null || selectedEndDay === void 0 ? void 0 : selectedEndDay.getMonth())) {
-                setMonthAndYear(day.getMonth(), day.getFullYear());
-            }
-            const currentEndDate = selectedEndDay !== null && selectedEndDay !== void 0 ? selectedEndDay : new Date();
-            const newEndDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentEndDate.getHours(), currentEndDate.getMinutes(), currentEndDate.getSeconds());
-            setFocusedDay(newEndDate);
-            // if the end date is before the start date, move back the start date and still have user select end date
-            if (!isBefore(newEndDate, selectedStartDay)) {
-                setSelectedEndDay(newEndDate);
-                selectedStartDay && (onChange === null || onChange === void 0 ? void 0 : onChange(selectedStartDay, newEndDate));
-                setIsSelectingStartDate(true);
-            }
-            else {
-                setSelectedStartDay(newEndDate);
-                selectedEndDay && (onChange === null || onChange === void 0 ? void 0 : onChange(newEndDate, selectedEndDay));
-            }
-        }
-    };
-    const handleCalendarKeyDown = (event) => {
-        if (event.altKey) {
-            return;
-        }
-        if (!focusedDay) {
-            return;
-        }
-        const adjustedFocusedDay = new Date(focusedDay);
-        switch (event.key) {
-            case 'ArrowDown':
-                adjustedFocusedDay.setDate(focusedDay.getDate() + 7);
-                if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
-                    handleMoveToNextMonth();
-                }
-                setFocusedDay(adjustedFocusedDay);
-                needFocus.current = true;
-                event.preventDefault();
-                break;
-            case 'ArrowUp':
-                adjustedFocusedDay.setDate(focusedDay.getDate() - 7);
-                if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
-                    handleMoveToPreviousMonth();
-                }
-                setFocusedDay(adjustedFocusedDay);
-                needFocus.current = true;
-                event.preventDefault();
-                break;
-            case 'ArrowLeft':
-                adjustedFocusedDay.setDate(focusedDay.getDate() - 1);
-                if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
-                    handleMoveToPreviousMonth();
-                }
-                setFocusedDay(adjustedFocusedDay);
-                needFocus.current = true;
-                event.preventDefault();
-                break;
-            case 'ArrowRight':
-                adjustedFocusedDay.setDate(focusedDay.getDate() + 1);
-                if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
-                    handleMoveToNextMonth();
-                }
-                setFocusedDay(adjustedFocusedDay);
-                needFocus.current = true;
-                event.preventDefault();
-                break;
-            case 'Enter':
-            case ' ':
-            case 'Spacebar':
-                if (!(isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(focusedDay))) {
-                    onDayClick(focusedDay);
-                }
-                event.preventDefault();
-                break;
-        }
-    };
-    const getDayClass = (day) => {
-        if (day.getMonth() !== displayedMonthIndex) {
-            return 'iui-calendar-day-outside-month';
-        }
-        let dayClass = 'iui-calendar-day';
-        const isSelectedDay = isSameDay(day, selectedDay) ||
-            (isSameDay(day, selectedStartDay) && isSameDay(day, selectedEndDay));
-        if (isSelectedDay) {
-            dayClass += '-selected';
+  const {
+    date,
+    onChange,
+    localizedNames,
+    className,
+    setFocus = false,
+    showTime = false,
+    use12Hours = false,
+    precision,
+    hourStep,
+    minuteStep,
+    secondStep,
+    useCombinedRenderer,
+    combinedRenderer,
+    hourRenderer,
+    minuteRenderer,
+    secondRenderer,
+    meridiemRenderer,
+    showYearSelection = false,
+    enableRangeSelect = false,
+    startDate,
+    endDate,
+    monthYearProps,
+    calendarProps,
+    monthProps,
+    weekDayProps,
+    dayProps,
+    weekProps,
+    isDateDisabled,
+    applyBackground = true,
+    ...rest
+  } = props;
+  const monthNames = localizedNames?.months ?? defaultMonths;
+  const shortDays = localizedNames?.shortDays ?? defaultShortDays;
+  const longDays = localizedNames?.days ?? defaultLongDays;
+  const [selectedDay, setSelectedDay] = React.useState(date);
+  const [selectedStartDay, setSelectedStartDay] = React.useState(startDate);
+  const [selectedEndDay, setSelectedEndDay] = React.useState(endDate);
+  const [focusedDay, setFocusedDay] = React.useState(
+    selectedStartDay ?? selectedDay ?? new Date(),
+  );
+  const [displayedMonthIndex, setDisplayedMonthIndex] = React.useState(
+    selectedStartDay?.getMonth() ??
+      selectedDay?.getMonth() ??
+      new Date().getMonth(),
+  );
+  const [displayedYear, setDisplayedYear] = React.useState(
+    selectedStartDay?.getFullYear() ??
+      selectedDay?.getFullYear() ??
+      new Date().getFullYear(),
+  );
+  // boolean that toggles between the user picking the start date and end date for date range
+  const [isSelectingStartDate, setIsSelectingStartDate] = React.useState(true);
+  // Used to focus days only when days are changed
+  // e.g. without this, when changing months day would be focused
+  const needFocus = React.useRef(setFocus);
+  React.useEffect(() => {
+    if (needFocus.current) {
+      needFocus.current = false;
+    }
+  });
+  const setMonthAndYear = React.useCallback((newMonth, newYear) => {
+    setDisplayedMonthIndex(newMonth);
+    setDisplayedYear(newYear);
+  }, []);
+  React.useEffect(() => {
+    const currentDate = new Date();
+    setSelectedDay(date);
+    setSelectedStartDay(startDate);
+    setSelectedEndDay(endDate);
+    if (!enableRangeSelect) {
+      setFocusedDay(date ?? currentDate);
+    }
+    setMonthAndYear(
+      startDate?.getMonth() ?? date?.getMonth() ?? currentDate.getMonth(),
+      startDate?.getFullYear() ??
+        date?.getFullYear() ??
+        currentDate.getFullYear(),
+    );
+  }, [date, setMonthAndYear, startDate, endDate, enableRangeSelect]);
+  const days = React.useMemo(() => {
+    let offsetToFirst = new Date(
+      displayedYear,
+      displayedMonthIndex,
+      1,
+    ).getDay();
+    // if its sunday, show one week before
+    if (0 === offsetToFirst) {
+      offsetToFirst = 7;
+    }
+    const daysInMonth = [];
+    // generate 6 weeks of dates
+    for (let i = 1; i <= 42; i++) {
+      const adjustedDay = i - offsetToFirst;
+      daysInMonth.push(
+        new Date(displayedYear, displayedMonthIndex, adjustedDay),
+      );
+    }
+    return daysInMonth;
+  }, [displayedMonthIndex, displayedYear]);
+  const weeks = React.useMemo(() => {
+    const weeksInMonth = [];
+    const weekCount = Math.ceil(days.length / 7);
+    for (let i = 0; i < weekCount; i++) {
+      weeksInMonth.push(days.slice(i * 7, (i + 1) * 7));
+    }
+    return weeksInMonth;
+  }, [days]);
+  const getNewFocusedDate = (newYear, newMonth) => {
+    const currentDate = selectedStartDay ?? selectedDay ?? new Date();
+    const newDate = new Date(
+      newYear,
+      newMonth,
+      currentDate.getDate(),
+      currentDate.getHours(),
+      currentDate.getMinutes(),
+      currentDate.getSeconds(),
+    );
+    return newDate;
+  };
+  const handleMoveToPreviousYear = () => {
+    const newYear = displayedYear - 1;
+    setMonthAndYear(displayedMonthIndex, newYear);
+    setFocusedDay(getNewFocusedDate(newYear, displayedMonthIndex));
+  };
+  const handleMoveToNextYear = () => {
+    const newYear = displayedYear + 1;
+    setMonthAndYear(displayedMonthIndex, newYear);
+    setFocusedDay(getNewFocusedDate(newYear, displayedMonthIndex));
+  };
+  const handleMoveToPreviousMonth = () => {
+    const newMonth = displayedMonthIndex !== 0 ? displayedMonthIndex - 1 : 11;
+    const newYear =
+      displayedMonthIndex !== 0 ? displayedYear : displayedYear - 1;
+    setMonthAndYear(newMonth, newYear);
+    setFocusedDay(getNewFocusedDate(newYear, newMonth));
+  };
+  const handleMoveToNextMonth = () => {
+    const newMonth = displayedMonthIndex !== 11 ? displayedMonthIndex + 1 : 0;
+    const newYear =
+      displayedMonthIndex !== 11 ? displayedYear : displayedYear + 1;
+    setMonthAndYear(newMonth, newYear);
+    setFocusedDay(getNewFocusedDate(newYear, newMonth));
+  };
+  const onDayClick = (day) => {
+    // single date selection
+    if (!enableRangeSelect) {
+      if (day.getMonth() !== selectedDay?.getMonth()) {
+        setMonthAndYear(day.getMonth(), day.getFullYear());
+      }
+      const currentDate = selectedDay ?? new Date();
+      const newDate = new Date(
+        day.getFullYear(),
+        day.getMonth(),
+        day.getDate(),
+        currentDate.getHours(),
+        currentDate.getMinutes(),
+        currentDate.getSeconds(),
+      );
+      setSelectedDay(newDate);
+      setFocusedDay(newDate);
+      isSingleOnChange(onChange, enableRangeSelect) && onChange?.(newDate);
+    }
+    // start date selection (date range only)
+    else if (isSelectingStartDate) {
+      if (day.getMonth() !== selectedStartDay?.getMonth()) {
+        setMonthAndYear(day.getMonth(), day.getFullYear());
+      }
+      const currentStartDate = selectedStartDay ?? new Date();
+      const newStartDate = new Date(
+        day.getFullYear(),
+        day.getMonth(),
+        day.getDate(),
+        currentStartDate.getHours(),
+        currentStartDate.getMinutes(),
+        currentStartDate.getSeconds(),
+      );
+      setSelectedStartDay(newStartDate);
+      setFocusedDay(newStartDate);
+      // if the start date is after the end date or the end date is undefined, reset the end date
+      if (!isBefore(newStartDate, selectedEndDay)) {
+        setSelectedEndDay(newStartDate);
+        onChange?.(newStartDate, newStartDate);
+      } else {
+        selectedEndDay && onChange?.(newStartDate, selectedEndDay);
+      }
+      setIsSelectingStartDate(false);
+    }
+    // end date selection (date range only)
+    else {
+      if (day.getMonth() !== selectedEndDay?.getMonth()) {
+        setMonthAndYear(day.getMonth(), day.getFullYear());
+      }
+      const currentEndDate = selectedEndDay ?? new Date();
+      const newEndDate = new Date(
+        day.getFullYear(),
+        day.getMonth(),
+        day.getDate(),
+        currentEndDate.getHours(),
+        currentEndDate.getMinutes(),
+        currentEndDate.getSeconds(),
+      );
+      setFocusedDay(newEndDate);
+      // if the end date is before the start date, move back the start date and still have user select end date
+      if (!isBefore(newEndDate, selectedStartDay)) {
+        setSelectedEndDay(newEndDate);
+        selectedStartDay && onChange?.(selectedStartDay, newEndDate);
+        setIsSelectingStartDate(true);
+      } else {
+        setSelectedStartDay(newEndDate);
+        selectedEndDay && onChange?.(newEndDate, selectedEndDay);
+      }
+    }
+  };
+  const handleCalendarKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    if (!focusedDay) {
+      return;
+    }
+    const adjustedFocusedDay = new Date(focusedDay);
+    switch (event.key) {
+      case 'ArrowDown':
+        adjustedFocusedDay.setDate(focusedDay.getDate() + 7);
+        if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
+          handleMoveToNextMonth();
         }
-        else if (isSameDay(day, selectedStartDay)) {
-            dayClass += '-range-start';
+        setFocusedDay(adjustedFocusedDay);
+        needFocus.current = true;
+        event.preventDefault();
+        break;
+      case 'ArrowUp':
+        adjustedFocusedDay.setDate(focusedDay.getDate() - 7);
+        if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
+          handleMoveToPreviousMonth();
         }
-        else if (isSameDay(day, selectedEndDay)) {
-            dayClass += '-range-end';
+        setFocusedDay(adjustedFocusedDay);
+        needFocus.current = true;
+        event.preventDefault();
+        break;
+      case 'ArrowLeft':
+        adjustedFocusedDay.setDate(focusedDay.getDate() - 1);
+        if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
+          handleMoveToPreviousMonth();
         }
-        // adds range class to dates between start and end date
-        if (selectedStartDay &&
-            selectedEndDay &&
-            isInDateRange(day, selectedStartDay, selectedEndDay)) {
-            dayClass += '-range';
+        setFocusedDay(adjustedFocusedDay);
+        needFocus.current = true;
+        event.preventDefault();
+        break;
+      case 'ArrowRight':
+        adjustedFocusedDay.setDate(focusedDay.getDate() + 1);
+        if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
+          handleMoveToNextMonth();
         }
-        if (isSameDay(day, new Date())) {
-            dayClass += '-today';
+        setFocusedDay(adjustedFocusedDay);
+        needFocus.current = true;
+        event.preventDefault();
+        break;
+      case 'Enter':
+      case ' ':
+      case 'Spacebar':
+        if (!isDateDisabled?.(focusedDay)) {
+          onDayClick(focusedDay);
         }
-        return dayClass;
-    };
-    return (React.createElement(Box, { className: cx('iui-date-picker', className), ref: forwardedRef, ...rest },
-        React.createElement("div", null,
-            React.createElement(Box, { className: 'iui-calendar-month-year' },
-                showYearSelection && (React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousYear, "aria-label": 'Previous year', size: 'small' },
-                    React.createElement(SvgChevronLeftDouble, null))),
-                React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousMonth, "aria-label": 'Previous month', size: 'small' },
-                    React.createElement(SvgChevronLeft, null)),
-                React.createElement("span", { "aria-live": 'polite' },
-                    React.createElement(Box, { as: 'span', className: 'iui-calendar-month', title: monthNames[displayedMonthIndex] }, monthNames[displayedMonthIndex]),
-                    "\u00A0",
-                    displayedYear),
-                React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToNextMonth, "aria-label": 'Next month', size: 'small' },
-                    React.createElement(SvgChevronRight, null)),
-                showYearSelection && (React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToNextYear, "aria-label": 'Next year', size: 'small' },
-                    React.createElement(SvgChevronRightDouble, null)))),
-            React.createElement(Box, { className: 'iui-calendar-weekdays' }, shortDays.map((day, index) => (React.createElement("div", { key: day, title: longDays[index] }, day)))),
-            React.createElement("div", { onKeyDown: handleCalendarKeyDown, role: 'listbox' }, weeks.map((weekDays, weekIndex) => {
-                return (React.createElement(Box, { key: `week-${displayedMonthIndex}-${weekIndex}`, className: 'iui-calendar-week' }, weekDays.map((weekDay, dayIndex) => {
-                    const dateValue = weekDay.getDate();
-                    const isDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(weekDay);
-                    return (React.createElement(Box, { key: `day-${displayedMonthIndex}-${dayIndex}`, className: getDayClass(weekDay), onClick: () => !isDisabled && onDayClick(weekDay), role: 'option', tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1, "aria-disabled": isDisabled ? 'true' : undefined, ref: (element) => isSameDay(weekDay, focusedDay) &&
-                            needFocus.current &&
-                            (element === null || element === void 0 ? void 0 : element.focus()) }, dateValue));
-                })));
-            }))),
-        showTime && (React.createElement(TimePicker, { date: selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay, use12Hours: use12Hours, precision: precision, hourStep: hourStep, minuteStep: minuteStep, secondStep: secondStep, useCombinedRenderer: useCombinedRenderer, combinedRenderer: combinedRenderer, hourRenderer: hourRenderer, minuteRenderer: minuteRenderer, secondRenderer: secondRenderer, meridiemRenderer: meridiemRenderer, onChange: (date) => {
-                var _a, _b, _c, _d, _e, _f;
-                return isSingleOnChange(onChange, enableRangeSelect)
-                    ? onChange === null || onChange === void 0 ? void 0 : onChange(date)
-                    : onChange === null || onChange === void 0 ? void 0 : onChange(new Date((_a = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getFullYear()) !== null && _a !== void 0 ? _a : date.getFullYear(), (_b = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getMonth()) !== null && _b !== void 0 ? _b : date.getMonth(), (_c = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getDate()) !== null && _c !== void 0 ? _c : date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()), new Date((_d = selectedEndDay === null || selectedEndDay === void 0 ? void 0 : selectedEndDay.getFullYear()) !== null && _d !== void 0 ? _d : date.getFullYear(), (_e = selectedEndDay === null || selectedEndDay === void 0 ? void 0 : selectedEndDay.getMonth()) !== null && _e !== void 0 ? _e : date.getMonth(), (_f = selectedEndDay === null || selectedEndDay === void 0 ? void 0 : selectedEndDay.getDate()) !== null && _f !== void 0 ? _f : date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()));
-            } }))));
+        event.preventDefault();
+        break;
+    }
+  };
+  const getDayClass = (day) => {
+    if (day.getMonth() !== displayedMonthIndex) {
+      return 'iui-calendar-day-outside-month';
+    }
+    let dayClass = 'iui-calendar-day';
+    const isSelectedDay =
+      isSameDay(day, selectedDay) ||
+      (isSameDay(day, selectedStartDay) && isSameDay(day, selectedEndDay));
+    if (isSelectedDay) {
+      dayClass += '-selected';
+    } else if (isSameDay(day, selectedStartDay)) {
+      dayClass += '-range-start';
+    } else if (isSameDay(day, selectedEndDay)) {
+      dayClass += '-range-end';
+    }
+    // adds range class to dates between start and end date
+    if (
+      selectedStartDay &&
+      selectedEndDay &&
+      isInDateRange(day, selectedStartDay, selectedEndDay)
+    ) {
+      dayClass += '-range';
+    }
+    if (isSameDay(day, new Date())) {
+      dayClass += '-today';
+    }
+    return dayClass;
+  };
+  const dateTableId = useId();
+  return React.createElement(
+    Box,
+    {
+      as: applyBackground ? Surface : 'div',
+      className: cx('iui-date-picker', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      'div',
+      null,
+      React.createElement(
+        Box,
+        {
+          as: 'div',
+          ...monthYearProps,
+          className: cx('iui-calendar-month-year', monthYearProps?.className),
+        },
+        showYearSelection &&
+          React.createElement(
+            IconButton,
+            {
+              styleType: 'borderless',
+              onClick: handleMoveToPreviousYear,
+              'aria-label': 'Previous year',
+              size: 'small',
+            },
+            React.createElement(SvgChevronLeftDouble, null),
+          ),
+        React.createElement(
+          IconButton,
+          {
+            styleType: 'borderless',
+            onClick: handleMoveToPreviousMonth,
+            'aria-label': 'Previous month',
+            size: 'small',
+          },
+          React.createElement(SvgChevronLeft, null),
+        ),
+        React.createElement(
+          'span',
+          { 'aria-live': 'polite' },
+          React.createElement(
+            Box,
+            {
+              as: 'span',
+              id: dateTableId,
+              title: monthNames[displayedMonthIndex],
+              ...monthProps,
+              className: cx('iui-calendar-month', monthProps?.className),
+            },
+            monthNames[displayedMonthIndex],
+          ),
+          '\u00A0',
+          displayedYear,
+        ),
+        React.createElement(
+          IconButton,
+          {
+            styleType: 'borderless',
+            onClick: handleMoveToNextMonth,
+            'aria-label': 'Next month',
+            size: 'small',
+          },
+          React.createElement(SvgChevronRight, null),
+        ),
+        showYearSelection &&
+          React.createElement(
+            IconButton,
+            {
+              styleType: 'borderless',
+              onClick: handleMoveToNextYear,
+              'aria-label': 'Next year',
+              size: 'small',
+            },
+            React.createElement(SvgChevronRightDouble, null),
+          ),
+      ),
+      React.createElement(
+        Box,
+        {
+          as: 'div',
+          ...weekDayProps,
+          className: cx('iui-calendar-weekdays', weekDayProps?.className),
+        },
+        shortDays.map((day, index) =>
+          React.createElement('div', { key: day, title: longDays[index] }, day),
+        ),
+      ),
+      React.createElement(
+        'div',
+        {
+          onKeyDown: handleCalendarKeyDown,
+          role: 'listbox',
+          'aria-labelledby': dateTableId,
+          ...calendarProps,
+        },
+        weeks.map((weekDays, weekIndex) => {
+          return React.createElement(
+            Box,
+            {
+              as: 'div',
+              key: `week-${displayedMonthIndex}-${weekIndex}`,
+              ...weekProps,
+              className: cx('iui-calendar-week', weekProps?.className),
+            },
+            weekDays.map((weekDay, dayIndex) => {
+              const dateValue = weekDay.getDate();
+              const isDisabled = isDateDisabled?.(weekDay);
+              return React.createElement(
+                Box,
+                {
+                  as: 'div',
+                  key: `day-${displayedMonthIndex}-${dayIndex}`,
+                  onClick: () => !isDisabled && onDayClick(weekDay),
+                  role: 'option',
+                  tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1,
+                  'aria-disabled': isDisabled ? 'true' : undefined,
+                  ref: (element) =>
+                    isSameDay(weekDay, focusedDay) &&
+                    needFocus.current &&
+                    element?.focus(),
+                  ...dayProps,
+                  className: cx(getDayClass(weekDay), dayProps?.className),
+                },
+                dateValue,
+              );
+            }),
+          );
+        }),
+      ),
+    ),
+    showTime &&
+      React.createElement(TimePicker, {
+        date: selectedStartDay ?? selectedDay,
+        use12Hours: use12Hours,
+        precision: precision,
+        hourStep: hourStep,
+        minuteStep: minuteStep,
+        secondStep: secondStep,
+        useCombinedRenderer: useCombinedRenderer,
+        combinedRenderer: combinedRenderer,
+        hourRenderer: hourRenderer,
+        minuteRenderer: minuteRenderer,
+        secondRenderer: secondRenderer,
+        meridiemRenderer: meridiemRenderer,
+        onChange: (date) =>
+          isSingleOnChange(onChange, enableRangeSelect)
+            ? onChange?.(date)
+            : onChange?.(
+                new Date(
+                  selectedStartDay?.getFullYear() ?? date.getFullYear(),
+                  selectedStartDay?.getMonth() ?? date.getMonth(),
+                  selectedStartDay?.getDate() ?? date.getDate(),
+                  date.getHours(),
+                  date.getMinutes(),
+                  date.getSeconds(),
+                ),
+                new Date(
+                  selectedEndDay?.getFullYear() ?? date.getFullYear(),
+                  selectedEndDay?.getMonth() ?? date.getMonth(),
+                  selectedEndDay?.getDate() ?? date.getDate(),
+                  date.getHours(),
+                  date.getMinutes(),
+                  date.getSeconds(),
+                ),
+              ),
+      }),
+  );
 });
 export default DatePicker;