@itwin/itwinui-react 3.13.4 → 3.14.0

package/DEV-esm/core/DatePicker/DatePicker.js

@@ -1,349 +1,520 @@
 import cx from 'classnames';
 import * as React from 'react';
-import { SvgChevronLeft, SvgChevronRight, SvgChevronLeftDouble, SvgChevronRightDouble, isBefore, Box, useId } from '../../utils/index.js';
+import {
+  SvgChevronLeft,
+  SvgChevronRight,
+  SvgChevronLeftDouble,
+  SvgChevronRightDouble,
+  isBefore,
+  Box,
+  useId,
+} from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { TimePicker } from '../TimePicker/TimePicker.js';
-let isSameDay = (a, b)=>a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-let isInDateRange = (date, startDate, endDate)=>{
-    if (!date || !startDate || !endDate) return false;
-    let minDate = new Date(startDate);
-    let maxDate = new Date(endDate);
-    let 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;
+let isSameDay = (a, b) =>
+  a &&
+  b &&
+  a.getFullYear() === b.getFullYear() &&
+  a.getMonth() === b.getMonth() &&
+  a.getDate() === b.getDate();
+let isInDateRange = (date, startDate, endDate) => {
+  if (!date || !startDate || !endDate) return false;
+  let minDate = new Date(startDate);
+  let maxDate = new Date(endDate);
+  let 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;
 };
-let isSingleOnChange = (onChange, enableRangeSelect)=>!enableRangeSelect;
+let isSingleOnChange = (onChange, enableRangeSelect) => !enableRangeSelect;
 let defaultMonths = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-];
-let defaultShortDays = [
-    'Su',
-    'Mo',
-    'Tu',
-    'We',
-    'Th',
-    'Fr',
-    'Sa'
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
 ];
+let defaultShortDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
 let defaultLongDays = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday'
+  'Sunday',
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
 ];
-export const generateLocalizedStrings = (locale)=>{
-    let shortWeekDayFormatter = new Intl.DateTimeFormat(locale, {
-        weekday: 'short'
-    });
-    let longWeekDayFormatter = new Intl.DateTimeFormat(locale, {
-        weekday: 'long'
-    });
-    let monthFormatter = new Intl.DateTimeFormat(locale, {
-        month: 'long'
-    });
-    let 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))
-    ];
-    let 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))
-    ];
-    let 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
-    };
+export const generateLocalizedStrings = (locale) => {
+  let shortWeekDayFormatter = new Intl.DateTimeFormat(locale, {
+    weekday: 'short',
+  });
+  let longWeekDayFormatter = new Intl.DateTimeFormat(locale, {
+    weekday: 'long',
+  });
+  let monthFormatter = new Intl.DateTimeFormat(locale, {
+    month: 'long',
+  });
+  let 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)),
+  ];
+  let 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)),
+  ];
+  let 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,
+  };
 };
-export const DatePicker = React.forwardRef((props, forwardedRef)=>{
-    let { 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, showDatesOutsideMonth = true, ...rest } = props;
-    let monthNames = localizedNames?.months ?? defaultMonths;
-    let shortDays = localizedNames?.shortDays ?? defaultShortDays;
-    let longDays = localizedNames?.days ?? defaultLongDays;
-    let [selectedDay, setSelectedDay] = React.useState(date);
-    let [selectedStartDay, setSelectedStartDay] = React.useState(startDate);
-    let [selectedEndDay, setSelectedEndDay] = React.useState(endDate);
-    let [focusedDay, setFocusedDay] = React.useState(selectedStartDay ?? selectedDay ?? new Date());
-    let [displayedMonthIndex, setDisplayedMonthIndex] = React.useState(selectedStartDay?.getMonth() ?? selectedDay?.getMonth() ?? new Date().getMonth());
-    let [displayedYear, setDisplayedYear] = React.useState(selectedStartDay?.getFullYear() ?? selectedDay?.getFullYear() ?? new Date().getFullYear());
-    let [isSelectingStartDate, setIsSelectingStartDate] = React.useState(true);
-    let needFocus = React.useRef(setFocus);
-    React.useEffect(()=>{
-        if (needFocus.current) needFocus.current = false;
-    });
-    let setMonthAndYear = React.useCallback((newMonth, newYear)=>{
-        setDisplayedMonthIndex(newMonth);
-        setDisplayedYear(newYear);
-    }, []);
-    React.useEffect(()=>{
-        let 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
-    ]);
-    let days = React.useMemo(()=>{
-        let offsetToFirst = new Date(displayedYear, displayedMonthIndex, 1).getDay();
-        if (0 === offsetToFirst && showDatesOutsideMonth) offsetToFirst = 7;
-        let daysInMonth = [];
-        for(let i = 1; i <= 42; i++){
-            let adjustedDay = i - offsetToFirst;
-            daysInMonth.push(new Date(displayedYear, displayedMonthIndex, adjustedDay));
+export const DatePicker = React.forwardRef((props, forwardedRef) => {
+  let {
+    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,
+    showDatesOutsideMonth = true,
+    ...rest
+  } = props;
+  let monthNames = localizedNames?.months ?? defaultMonths;
+  let shortDays = localizedNames?.shortDays ?? defaultShortDays;
+  let longDays = localizedNames?.days ?? defaultLongDays;
+  let [selectedDay, setSelectedDay] = React.useState(date);
+  let [selectedStartDay, setSelectedStartDay] = React.useState(startDate);
+  let [selectedEndDay, setSelectedEndDay] = React.useState(endDate);
+  let [focusedDay, setFocusedDay] = React.useState(
+    selectedStartDay ?? selectedDay ?? new Date(),
+  );
+  let [displayedMonthIndex, setDisplayedMonthIndex] = React.useState(
+    selectedStartDay?.getMonth() ??
+      selectedDay?.getMonth() ??
+      new Date().getMonth(),
+  );
+  let [displayedYear, setDisplayedYear] = React.useState(
+    selectedStartDay?.getFullYear() ??
+      selectedDay?.getFullYear() ??
+      new Date().getFullYear(),
+  );
+  let [isSelectingStartDate, setIsSelectingStartDate] = React.useState(true);
+  let needFocus = React.useRef(setFocus);
+  React.useEffect(() => {
+    if (needFocus.current) needFocus.current = false;
+  });
+  let setMonthAndYear = React.useCallback((newMonth, newYear) => {
+    setDisplayedMonthIndex(newMonth);
+    setDisplayedYear(newYear);
+  }, []);
+  React.useEffect(() => {
+    let 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]);
+  let days = React.useMemo(() => {
+    let offsetToFirst = new Date(
+      displayedYear,
+      displayedMonthIndex,
+      1,
+    ).getDay();
+    if (0 === offsetToFirst && showDatesOutsideMonth) offsetToFirst = 7;
+    let daysInMonth = [];
+    for (let i = 1; i <= 42; i++) {
+      let adjustedDay = i - offsetToFirst;
+      daysInMonth.push(
+        new Date(displayedYear, displayedMonthIndex, adjustedDay),
+      );
+    }
+    return daysInMonth;
+  }, [displayedMonthIndex, displayedYear, showDatesOutsideMonth]);
+  let weeks = React.useMemo(() => {
+    let weeksInMonth = [];
+    let weekCount = Math.ceil(days.length / 7);
+    for (let i = 0; i < weekCount; i++)
+      weeksInMonth.push(days.slice(7 * i, (i + 1) * 7));
+    return weeksInMonth;
+  }, [days]);
+  let getNewFocusedDate = (newYear, newMonth) => {
+    let currentDate = selectedStartDay ?? selectedDay ?? new Date();
+    let newDate = new Date(
+      newYear,
+      newMonth,
+      currentDate.getDate(),
+      currentDate.getHours(),
+      currentDate.getMinutes(),
+      currentDate.getSeconds(),
+    );
+    return newDate;
+  };
+  let handleMoveToPreviousYear = () => {
+    let newYear = displayedYear - 1;
+    setMonthAndYear(displayedMonthIndex, newYear);
+    setFocusedDay(getNewFocusedDate(newYear, displayedMonthIndex));
+  };
+  let handleMoveToNextYear = () => {
+    let newYear = displayedYear + 1;
+    setMonthAndYear(displayedMonthIndex, newYear);
+    setFocusedDay(getNewFocusedDate(newYear, displayedMonthIndex));
+  };
+  let handleMoveToPreviousMonth = () => {
+    let newMonth = 0 !== displayedMonthIndex ? displayedMonthIndex - 1 : 11;
+    let newYear = 0 !== displayedMonthIndex ? displayedYear : displayedYear - 1;
+    setMonthAndYear(newMonth, newYear);
+    setFocusedDay(getNewFocusedDate(newYear, newMonth));
+  };
+  let handleMoveToNextMonth = () => {
+    let newMonth = 11 !== displayedMonthIndex ? displayedMonthIndex + 1 : 0;
+    let newYear =
+      11 !== displayedMonthIndex ? displayedYear : displayedYear + 1;
+    setMonthAndYear(newMonth, newYear);
+    setFocusedDay(getNewFocusedDate(newYear, newMonth));
+  };
+  let onDayClick = (day) => {
+    if (enableRangeSelect) {
+      if (isSelectingStartDate) {
+        if (day.getMonth() !== selectedStartDay?.getMonth())
+          setMonthAndYear(day.getMonth(), day.getFullYear());
+        let currentStartDate = selectedStartDay ?? new Date();
+        let newStartDate = new Date(
+          day.getFullYear(),
+          day.getMonth(),
+          day.getDate(),
+          currentStartDate.getHours(),
+          currentStartDate.getMinutes(),
+          currentStartDate.getSeconds(),
+        );
+        setSelectedStartDay(newStartDate);
+        setFocusedDay(newStartDate);
+        if (isBefore(newStartDate, selectedEndDay))
+          selectedEndDay && onChange?.(newStartDate, selectedEndDay);
+        else {
+          setSelectedEndDay(newStartDate);
+          onChange?.(newStartDate, newStartDate);
         }
-        return daysInMonth;
-    }, [
-        displayedMonthIndex,
-        displayedYear,
-        showDatesOutsideMonth
-    ]);
-    let weeks = React.useMemo(()=>{
-        let weeksInMonth = [];
-        let weekCount = Math.ceil(days.length / 7);
-        for(let i = 0; i < weekCount; i++)weeksInMonth.push(days.slice(7 * i, (i + 1) * 7));
-        return weeksInMonth;
-    }, [
-        days
-    ]);
-    let getNewFocusedDate = (newYear, newMonth)=>{
-        let currentDate = selectedStartDay ?? selectedDay ?? new Date();
-        let newDate = new Date(newYear, newMonth, currentDate.getDate(), currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds());
-        return newDate;
-    };
-    let handleMoveToPreviousYear = ()=>{
-        let newYear = displayedYear - 1;
-        setMonthAndYear(displayedMonthIndex, newYear);
-        setFocusedDay(getNewFocusedDate(newYear, displayedMonthIndex));
-    };
-    let handleMoveToNextYear = ()=>{
-        let newYear = displayedYear + 1;
-        setMonthAndYear(displayedMonthIndex, newYear);
-        setFocusedDay(getNewFocusedDate(newYear, displayedMonthIndex));
-    };
-    let handleMoveToPreviousMonth = ()=>{
-        let newMonth = 0 !== displayedMonthIndex ? displayedMonthIndex - 1 : 11;
-        let newYear = 0 !== displayedMonthIndex ? displayedYear : displayedYear - 1;
-        setMonthAndYear(newMonth, newYear);
-        setFocusedDay(getNewFocusedDate(newYear, newMonth));
-    };
-    let handleMoveToNextMonth = ()=>{
-        let newMonth = 11 !== displayedMonthIndex ? displayedMonthIndex + 1 : 0;
-        let newYear = 11 !== displayedMonthIndex ? displayedYear : displayedYear + 1;
-        setMonthAndYear(newMonth, newYear);
-        setFocusedDay(getNewFocusedDate(newYear, newMonth));
-    };
-    let onDayClick = (day)=>{
-        if (enableRangeSelect) {
-            if (isSelectingStartDate) {
-                if (day.getMonth() !== selectedStartDay?.getMonth()) setMonthAndYear(day.getMonth(), day.getFullYear());
-                let currentStartDate = selectedStartDay ?? new Date();
-                let newStartDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentStartDate.getHours(), currentStartDate.getMinutes(), currentStartDate.getSeconds());
-                setSelectedStartDay(newStartDate);
-                setFocusedDay(newStartDate);
-                if (isBefore(newStartDate, selectedEndDay)) selectedEndDay && onChange?.(newStartDate, selectedEndDay);
-                else {
-                    setSelectedEndDay(newStartDate);
-                    onChange?.(newStartDate, newStartDate);
-                }
-                setIsSelectingStartDate(false);
-            } else {
-                if (day.getMonth() !== selectedEndDay?.getMonth()) setMonthAndYear(day.getMonth(), day.getFullYear());
-                let currentEndDate = selectedEndDay ?? new Date();
-                let newEndDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentEndDate.getHours(), currentEndDate.getMinutes(), currentEndDate.getSeconds());
-                setFocusedDay(newEndDate);
-                if (isBefore(newEndDate, selectedStartDay)) {
-                    setSelectedStartDay(newEndDate);
-                    selectedEndDay && onChange?.(newEndDate, selectedEndDay);
-                } else {
-                    setSelectedEndDay(newEndDate);
-                    selectedStartDay && onChange?.(selectedStartDay, newEndDate);
-                    setIsSelectingStartDate(true);
-                }
-            }
+        setIsSelectingStartDate(false);
+      } else {
+        if (day.getMonth() !== selectedEndDay?.getMonth())
+          setMonthAndYear(day.getMonth(), day.getFullYear());
+        let currentEndDate = selectedEndDay ?? new Date();
+        let newEndDate = new Date(
+          day.getFullYear(),
+          day.getMonth(),
+          day.getDate(),
+          currentEndDate.getHours(),
+          currentEndDate.getMinutes(),
+          currentEndDate.getSeconds(),
+        );
+        setFocusedDay(newEndDate);
+        if (isBefore(newEndDate, selectedStartDay)) {
+          setSelectedStartDay(newEndDate);
+          selectedEndDay && onChange?.(newEndDate, selectedEndDay);
         } else {
-            if (day.getMonth() !== selectedDay?.getMonth()) setMonthAndYear(day.getMonth(), day.getFullYear());
-            let currentDate = selectedDay ?? new Date();
-            let newDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds());
-            setSelectedDay(newDate);
-            setFocusedDay(newDate);
-            isSingleOnChange(onChange, enableRangeSelect) && onChange?.(newDate);
-        }
-    };
-    let handleCalendarKeyDown = (event)=>{
-        if (event.altKey) return;
-        if (!focusedDay) return;
-        let 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?.(focusedDay)) onDayClick(focusedDay);
-                event.preventDefault();
-                break;
+          setSelectedEndDay(newEndDate);
+          selectedStartDay && onChange?.(selectedStartDay, newEndDate);
+          setIsSelectingStartDate(true);
         }
-    };
-    let getDayClass = (day)=>{
-        if (day.getMonth() !== displayedMonthIndex) return 'iui-calendar-day-outside-month';
-        let dayClass = 'iui-calendar-day';
-        let 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';
-        if (selectedStartDay && selectedEndDay && isInDateRange(day, selectedStartDay, selectedEndDay)) dayClass += '-range';
-        if (isSameDay(day, new Date())) dayClass += '-today';
-        return dayClass;
-    };
-    let dateTableId = useId();
-    return React.createElement(Box, {
-        className: cx('iui-date-picker', {
-            'iui-popover-surface': applyBackground
-        }, 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]), " ", 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)=>React.createElement(Box, {
-            as: "div",
-            key: `week-${displayedMonthIndex}-${weekIndex}`,
-            ...weekProps,
-            className: cx('iui-calendar-week', weekProps?.className)
-        }, weekDays.map((weekDay, dayIndex)=>{
-            let dateValue = weekDay.getDate();
-            let isDisabled = isDateDisabled?.(weekDay);
-            let isOutsideMonth = weekDay.getMonth() !== displayedMonthIndex;
-            if (isOutsideMonth && !showDatesOutsideMonth) return React.createElement(Box, {
-                key: `day-${displayedMonthIndex}-${dayIndex}`,
-                className: cx(getDayClass(weekDay), dayProps?.className),
-                "aria-hidden": true
-            });
-            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' : void 0,
-                ref: (element)=>isSameDay(weekDay, focusedDay) && needFocus.current && element?.focus(),
-                ...dayProps,
-                className: cx(getDayClass(weekDay), dayProps?.className)
-            }, dateValue);
-        }))))), showTime && React.createElement(TimePicker, {
+      }
+    } else {
+      if (day.getMonth() !== selectedDay?.getMonth())
+        setMonthAndYear(day.getMonth(), day.getFullYear());
+      let currentDate = selectedDay ?? new Date();
+      let newDate = new Date(
+        day.getFullYear(),
+        day.getMonth(),
+        day.getDate(),
+        currentDate.getHours(),
+        currentDate.getMinutes(),
+        currentDate.getSeconds(),
+      );
+      setSelectedDay(newDate);
+      setFocusedDay(newDate);
+      isSingleOnChange(onChange, enableRangeSelect) && onChange?.(newDate);
+    }
+  };
+  let handleCalendarKeyDown = (event) => {
+    if (event.altKey) return;
+    if (!focusedDay) return;
+    let 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?.(focusedDay)) onDayClick(focusedDay);
+        event.preventDefault();
+        break;
+    }
+  };
+  let getDayClass = (day) => {
+    if (day.getMonth() !== displayedMonthIndex)
+      return 'iui-calendar-day-outside-month';
+    let dayClass = 'iui-calendar-day';
+    let 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';
+    if (
+      selectedStartDay &&
+      selectedEndDay &&
+      isInDateRange(day, selectedStartDay, selectedEndDay)
+    )
+      dayClass += '-range';
+    if (isSameDay(day, new Date())) dayClass += '-today';
+    return dayClass;
+  };
+  let dateTableId = useId();
+  return React.createElement(
+    Box,
+    {
+      className: cx(
+        'iui-date-picker',
+        {
+          'iui-popover-surface': applyBackground,
+        },
+        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],
+          ),
+          ' ',
+          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) =>
+          React.createElement(
+            Box,
+            {
+              as: 'div',
+              key: `week-${displayedMonthIndex}-${weekIndex}`,
+              ...weekProps,
+              className: cx('iui-calendar-week', weekProps?.className),
+            },
+            weekDays.map((weekDay, dayIndex) => {
+              let dateValue = weekDay.getDate();
+              let isDisabled = isDateDisabled?.(weekDay);
+              let isOutsideMonth = weekDay.getMonth() !== displayedMonthIndex;
+              if (isOutsideMonth && !showDatesOutsideMonth)
+                return React.createElement(Box, {
+                  key: `day-${displayedMonthIndex}-${dayIndex}`,
+                  className: cx(getDayClass(weekDay), dayProps?.className),
+                  'aria-hidden': true,
+                });
+              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' : void 0,
+                  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,
@@ -356,7 +527,28 @@ export const DatePicker = React.forwardRef((props, forwardedRef)=>{
         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()))
-    }));
+        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(),
+                ),
+              ),
+      }),
+  );
 });
 DatePicker.displayName = 'DatePicker';