@itwin/itwinui-react 3.11.3 → 3.12.0

package/cjs/core/DatePicker/DatePicker.js

@@ -1,399 +1,606 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePicker = exports.generateLocalizedStrings = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../../utils/index.js");
-const IconButton_js_1 = require("../Buttons/IconButton.js");
-const TimePicker_js_1 = require("../TimePicker/TimePicker.js");
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  DatePicker: function () {
+    return DatePicker;
+  },
+  generateLocalizedStrings: function () {
+    return generateLocalizedStrings;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _classnames = _interop_require_default._(require('classnames'));
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../utils/index.js');
+const _IconButton = require('../Buttons/IconButton.js');
+const _TimePicker = require('../TimePicker/TimePicker.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.
- */
 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,
+  };
 };
-exports.generateLocalizedStrings = generateLocalizedStrings;
-/**
- * Date picker component
- * @example
- * <DatePicker date={new Date()} onChange={(e) => console.log('New date value: ' + e)} />
- */
-exports.DatePicker = React.forwardRef((props, forwardedRef) => {
-    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, showDatesOutsideMonth = 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 it's sunday, show one week before, but only if dates outside month are shown.
-        // (We do not want empty space at the top if dates outside month are not shown.)
-        if (0 === offsetToFirst && showDatesOutsideMonth) {
-            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, showDatesOutsideMonth]);
-    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 (!(0, index_js_1.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 (!(0, index_js_1.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();
-                }
-                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;
-        }
-    };
-    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 DatePicker = _react.forwardRef((props, forwardedRef) => {
+  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,
+    showDatesOutsideMonth = 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(),
+  );
+  const [isSelectingStartDate, setIsSelectingStartDate] = _react.useState(true);
+  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 (0 === offsetToFirst && showDatesOutsideMonth) {
+      offsetToFirst = 7;
+    }
+    const daysInMonth = [];
+    for (let i = 1; i <= 42; i++) {
+      const adjustedDay = i - offsetToFirst;
+      daysInMonth.push(
+        new Date(displayedYear, displayedMonthIndex, adjustedDay),
+      );
+    }
+    return daysInMonth;
+  }, [displayedMonthIndex, displayedYear, showDatesOutsideMonth]);
+  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) => {
+    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);
+    } 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 (!(0, _index.isBefore)(newStartDate, selectedEndDay)) {
+        setSelectedEndDay(newStartDate);
+        onChange?.(newStartDate, newStartDate);
+      } else {
+        selectedEndDay && onChange?.(newStartDate, selectedEndDay);
+      }
+      setIsSelectingStartDate(false);
+    } 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 (!(0, _index.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;
-    };
-    const dateTableId = (0, index_js_1.useId)();
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-date-picker', { 'iui-popover-surface': applyBackground }, className), ref: forwardedRef, ...rest },
-        React.createElement("div", null,
-            React.createElement(index_js_1.Box, { as: 'div', ...monthYearProps, className: (0, classnames_1.default)('iui-calendar-month-year', monthYearProps?.className) },
-                showYearSelection && (React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousYear, "aria-label": 'Previous year', size: 'small' },
-                    React.createElement(index_js_1.SvgChevronLeftDouble, null))),
-                React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousMonth, "aria-label": 'Previous month', size: 'small' },
-                    React.createElement(index_js_1.SvgChevronLeft, null)),
-                React.createElement("span", { "aria-live": 'polite' },
-                    React.createElement(index_js_1.Box, { as: 'span', id: dateTableId, title: monthNames[displayedMonthIndex], ...monthProps, className: (0, classnames_1.default)('iui-calendar-month', monthProps?.className) }, monthNames[displayedMonthIndex]),
-                    "\u00A0",
-                    displayedYear),
-                React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', onClick: handleMoveToNextMonth, "aria-label": 'Next month', size: 'small' },
-                    React.createElement(index_js_1.SvgChevronRight, null)),
-                showYearSelection && (React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', onClick: handleMoveToNextYear, "aria-label": 'Next year', size: 'small' },
-                    React.createElement(index_js_1.SvgChevronRightDouble, null)))),
-            React.createElement(index_js_1.Box, { as: 'div', ...weekDayProps, className: (0, classnames_1.default)('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(index_js_1.Box, { as: 'div', key: `week-${displayedMonthIndex}-${weekIndex}`, ...weekProps, className: (0, classnames_1.default)('iui-calendar-week', weekProps?.className) }, weekDays.map((weekDay, dayIndex) => {
+        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';
+    }
+    if (
+      selectedStartDay &&
+      selectedEndDay &&
+      isInDateRange(day, selectedStartDay, selectedEndDay)
+    ) {
+      dayClass += '-range';
+    }
+    if (isSameDay(day, new Date())) {
+      dayClass += '-today';
+    }
+    return dayClass;
+  };
+  const dateTableId = (0, _index.useId)();
+  return (0, _jsxruntime.jsxs)(_index.Box, {
+    className: (0, _classnames.default)(
+      'iui-date-picker',
+      {
+        'iui-popover-surface': applyBackground,
+      },
+      className,
+    ),
+    ref: forwardedRef,
+    ...rest,
+    children: [
+      (0, _jsxruntime.jsxs)('div', {
+        children: [
+          (0, _jsxruntime.jsxs)(_index.Box, {
+            as: 'div',
+            ...monthYearProps,
+            className: (0, _classnames.default)(
+              'iui-calendar-month-year',
+              monthYearProps?.className,
+            ),
+            children: [
+              showYearSelection &&
+                (0, _jsxruntime.jsx)(_IconButton.IconButton, {
+                  styleType: 'borderless',
+                  onClick: handleMoveToPreviousYear,
+                  'aria-label': 'Previous year',
+                  size: 'small',
+                  children: (0, _jsxruntime.jsx)(
+                    _index.SvgChevronLeftDouble,
+                    {},
+                  ),
+                }),
+              (0, _jsxruntime.jsx)(_IconButton.IconButton, {
+                styleType: 'borderless',
+                onClick: handleMoveToPreviousMonth,
+                'aria-label': 'Previous month',
+                size: 'small',
+                children: (0, _jsxruntime.jsx)(_index.SvgChevronLeft, {}),
+              }),
+              (0, _jsxruntime.jsxs)('span', {
+                'aria-live': 'polite',
+                children: [
+                  (0, _jsxruntime.jsx)(_index.Box, {
+                    as: 'span',
+                    id: dateTableId,
+                    title: monthNames[displayedMonthIndex],
+                    ...monthProps,
+                    className: (0, _classnames.default)(
+                      'iui-calendar-month',
+                      monthProps?.className,
+                    ),
+                    children: monthNames[displayedMonthIndex],
+                  }),
+                  ' ',
+                  displayedYear,
+                ],
+              }),
+              (0, _jsxruntime.jsx)(_IconButton.IconButton, {
+                styleType: 'borderless',
+                onClick: handleMoveToNextMonth,
+                'aria-label': 'Next month',
+                size: 'small',
+                children: (0, _jsxruntime.jsx)(_index.SvgChevronRight, {}),
+              }),
+              showYearSelection &&
+                (0, _jsxruntime.jsx)(_IconButton.IconButton, {
+                  styleType: 'borderless',
+                  onClick: handleMoveToNextYear,
+                  'aria-label': 'Next year',
+                  size: 'small',
+                  children: (0, _jsxruntime.jsx)(
+                    _index.SvgChevronRightDouble,
+                    {},
+                  ),
+                }),
+            ],
+          }),
+          (0, _jsxruntime.jsx)(_index.Box, {
+            as: 'div',
+            ...weekDayProps,
+            className: (0, _classnames.default)(
+              'iui-calendar-weekdays',
+              weekDayProps?.className,
+            ),
+            children: shortDays.map((day, index) =>
+              (0, _jsxruntime.jsx)(
+                'div',
+                {
+                  title: longDays[index],
+                  children: day,
+                },
+                day,
+              ),
+            ),
+          }),
+          (0, _jsxruntime.jsx)('div', {
+            onKeyDown: handleCalendarKeyDown,
+            role: 'listbox',
+            'aria-labelledby': dateTableId,
+            ...calendarProps,
+            children: weeks.map((weekDays, weekIndex) => {
+              return (0, _jsxruntime.jsx)(
+                _index.Box,
+                {
+                  as: 'div',
+                  ...weekProps,
+                  className: (0, _classnames.default)(
+                    'iui-calendar-week',
+                    weekProps?.className,
+                  ),
+                  children: weekDays.map((weekDay, dayIndex) => {
                     const dateValue = weekDay.getDate();
                     const isDisabled = isDateDisabled?.(weekDay);
-                    const isOutsideMonth = weekDay.getMonth() !== displayedMonthIndex;
+                    const isOutsideMonth =
+                      weekDay.getMonth() !== displayedMonthIndex;
                     if (isOutsideMonth && !showDatesOutsideMonth) {
-                        return (React.createElement(index_js_1.Box, { key: `day-${displayedMonthIndex}-${dayIndex}`, className: (0, classnames_1.default)(getDayClass(weekDay), dayProps?.className), "aria-hidden": true }));
+                      return (0, _jsxruntime.jsx)(
+                        _index.Box,
+                        {
+                          className: (0, _classnames.default)(
+                            getDayClass(weekDay),
+                            dayProps?.className,
+                          ),
+                          'aria-hidden': true,
+                        },
+                        `day-${displayedMonthIndex}-${dayIndex}`,
+                      );
                     }
-                    return (React.createElement(index_js_1.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: (0, classnames_1.default)(getDayClass(weekDay), dayProps?.className) }, dateValue));
-                })));
-            }))),
-        showTime && (React.createElement(TimePicker_js_1.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())) }))));
+                    return (0, _jsxruntime.jsx)(
+                      _index.Box,
+                      {
+                        as: 'div',
+                        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: (0, _classnames.default)(
+                          getDayClass(weekDay),
+                          dayProps?.className,
+                        ),
+                        children: dateValue,
+                      },
+                      `day-${displayedMonthIndex}-${dayIndex}`,
+                    );
+                  }),
+                },
+                `week-${displayedMonthIndex}-${weekIndex}`,
+              );
+            }),
+          }),
+        ],
+      }),
+      showTime &&
+        (0, _jsxruntime.jsx)(_TimePicker.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(),
+                  ),
+                ),
+        }),
+    ],
+  });
 });