@itwin/itwinui-react 2.0.0-dev.1 → 2.0.0-dev.3

package/cjs/core/DatePicker/DatePicker.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,47 +8,47 @@ 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.
  *--------------------------------------------------------------------------------------------*/
-var classnames_1 = __importDefault(require("classnames"));
-var react_1 = __importDefault(require("react"));
-var utils_1 = require("../utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/date-picker.css");
-var IconButton_1 = require("../Buttons/IconButton");
-var TimePicker_1 = require("../TimePicker");
-var isSameDay = function (a, b) {
+const IconButton_1 = require("../Buttons/IconButton");
+const TimePicker_1 = require("../TimePicker");
+const isSameDay = (a, b) => {
     return (a &&
         b &&
         a.getFullYear() === b.getFullYear() &&
         a.getMonth() === b.getMonth() &&
         a.getDate() === b.getDate());
 };
-var isInDateRange = function (date, startDate, endDate) {
+const isInDateRange = (date, startDate, endDate) => {
     if (!date || !startDate || !endDate) {
         return false;
     }
-    var minDate = new Date(startDate);
-    var maxDate = new Date(endDate);
-    var testDate = new Date(date);
+    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;
 };
 // compares to see if one date is earlier than another
-var isBefore = function (beforeDate, afterDate) {
+const isBefore = (beforeDate, afterDate) => {
     if (!beforeDate || !afterDate) {
         return false;
     }
-    var firstDate = new Date(beforeDate);
-    var secondDate = new Date(afterDate);
+    const firstDate = new Date(beforeDate);
+    const secondDate = new Date(afterDate);
     firstDate && firstDate.setHours(0, 0, 0, 0);
     secondDate && secondDate.setHours(0, 0, 0, 0);
     return firstDate < secondDate;
 };
 // Type guard for multiple did not work
-var isSingleOnChange = function (onChange, enableRangeSelect) {
+const isSingleOnChange = (onChange, enableRangeSelect) => {
     return !enableRangeSelect;
 };
-var defaultMonths = [
+const defaultMonths = [
     'January',
     'February',
     'March',
@@ -84,8 +62,8 @@ var defaultMonths = [
     'November',
     'December',
 ];
-var defaultShortDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-var defaultLongDays = [
+const defaultShortDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const defaultLongDays = [
     'Sunday',
     'Monday',
     'Tuesday',
@@ -98,15 +76,15 @@ var defaultLongDays = [
  * 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.
  */
-var generateLocalizedStrings = function (locale) {
-    var shortWeekDayFormatter = new Intl.DateTimeFormat(locale, {
+const generateLocalizedStrings = (locale) => {
+    const shortWeekDayFormatter = new Intl.DateTimeFormat(locale, {
         weekday: 'short',
     });
-    var longWeekDayFormatter = new Intl.DateTimeFormat(locale, {
+    const longWeekDayFormatter = new Intl.DateTimeFormat(locale, {
         weekday: 'long',
     });
-    var monthFormatter = new Intl.DateTimeFormat(locale, { month: 'long' });
-    var months = [
+    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)),
@@ -120,7 +98,7 @@ var generateLocalizedStrings = function (locale) {
         monthFormatter.format(new Date(2020, 10, 1)),
         monthFormatter.format(new Date(2020, 11, 1)),
     ];
-    var days = [
+    const days = [
         longWeekDayFormatter.format(new Date(2020, 10, 1)),
         longWeekDayFormatter.format(new Date(2020, 10, 2)),
         longWeekDayFormatter.format(new Date(2020, 10, 3)),
@@ -129,7 +107,7 @@ var generateLocalizedStrings = function (locale) {
         longWeekDayFormatter.format(new Date(2020, 10, 6)),
         longWeekDayFormatter.format(new Date(2020, 10, 7)),
     ];
-    var shortDays = [
+    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),
@@ -139,9 +117,9 @@ var generateLocalizedStrings = function (locale) {
         shortWeekDayFormatter.format(new Date(2020, 10, 7)).slice(0, 2),
     ];
     return {
-        months: months,
-        shortDays: shortDays,
-        days: days,
+        months,
+        shortDays,
+        days,
     };
 };
 exports.generateLocalizedStrings = generateLocalizedStrings;
@@ -150,36 +128,36 @@ exports.generateLocalizedStrings = generateLocalizedStrings;
  * @example
  * <DatePicker date={new Date()} onChange={(e) => console.log('New date value: ' + e)} />
  */
-var DatePicker = function (props) {
+const DatePicker = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    var date = props.date, onChange = props.onChange, localizedNames = props.localizedNames, className = props.className, style = props.style, _j = props.setFocus, setFocus = _j === void 0 ? false : _j, _k = props.showTime, showTime = _k === void 0 ? false : _k, _l = props.use12Hours, use12Hours = _l === void 0 ? false : _l, precision = props.precision, hourStep = props.hourStep, minuteStep = props.minuteStep, secondStep = props.secondStep, _m = props.showYearSelection, showYearSelection = _m === void 0 ? false : _m, _o = props.enableRangeSelect, enableRangeSelect = _o === void 0 ? false : _o, startDate = props.startDate, endDate = props.endDate, rest = __rest(props, ["date", "onChange", "localizedNames", "className", "style", "setFocus", "showTime", "use12Hours", "precision", "hourStep", "minuteStep", "secondStep", "showYearSelection", "enableRangeSelect", "startDate", "endDate"]);
+    const { date, onChange, localizedNames, className, style, setFocus = false, showTime = false, use12Hours = false, precision, hourStep, minuteStep, secondStep, showYearSelection = false, enableRangeSelect = false, startDate, endDate, ...rest } = props;
     (0, utils_1.useTheme)();
-    var monthNames = (_a = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.months) !== null && _a !== void 0 ? _a : defaultMonths;
-    var shortDays = (_b = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.shortDays) !== null && _b !== void 0 ? _b : defaultShortDays;
-    var longDays = (_c = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.days) !== null && _c !== void 0 ? _c : defaultLongDays;
-    var _p = react_1.default.useState(date), selectedDay = _p[0], setSelectedDay = _p[1];
-    var _q = react_1.default.useState(startDate), selectedStartDay = _q[0], setSelectedStartDay = _q[1];
-    var _r = react_1.default.useState(endDate), selectedEndDay = _r[0], setSelectedEndDay = _r[1];
-    var _s = react_1.default.useState((_d = selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay) !== null && _d !== void 0 ? _d : new Date()), focusedDay = _s[0], setFocusedDay = _s[1];
-    var _t = react_1.default.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()), displayedMonthIndex = _t[0], setDisplayedMonthIndex = _t[1];
-    var _u = react_1.default.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()), displayedYear = _u[0], setDisplayedYear = _u[1];
+    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_1.default.useState(date);
+    const [selectedStartDay, setSelectedStartDay] = react_1.default.useState(startDate);
+    const [selectedEndDay, setSelectedEndDay] = react_1.default.useState(endDate);
+    const [focusedDay, setFocusedDay] = react_1.default.useState((_d = selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay) !== null && _d !== void 0 ? _d : new Date());
+    const [displayedMonthIndex, setDisplayedMonthIndex] = react_1.default.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_1.default.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
-    var _v = react_1.default.useState(true), isSelectingStartDate = _v[0], setIsSelectingStartDate = _v[1];
+    const [isSelectingStartDate, setIsSelectingStartDate] = react_1.default.useState(true);
     // Used to focus days only when days are changed
     // e.g. without this, when changing months day would be focused
-    var needFocus = react_1.default.useRef(setFocus);
-    react_1.default.useEffect(function () {
+    const needFocus = react_1.default.useRef(setFocus);
+    react_1.default.useEffect(() => {
         if (needFocus.current) {
             needFocus.current = false;
         }
     });
-    var setMonthAndYear = react_1.default.useCallback(function (newMonth, newYear) {
+    const setMonthAndYear = react_1.default.useCallback((newMonth, newYear) => {
         setDisplayedMonthIndex(newMonth);
         setDisplayedYear(newYear);
     }, []);
-    react_1.default.useEffect(function () {
+    react_1.default.useEffect(() => {
         var _a, _b, _c, _d;
-        var currentDate = new Date();
+        const currentDate = new Date();
         setSelectedDay(date);
         setSelectedStartDay(startDate);
         setSelectedEndDay(endDate);
@@ -188,64 +166,64 @@ var DatePicker = function (props) {
         }
         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]);
-    var days = react_1.default.useMemo(function () {
-        var offsetToFirst = new Date(displayedYear, displayedMonthIndex, 1).getDay();
+    const days = react_1.default.useMemo(() => {
+        let offsetToFirst = new Date(displayedYear, displayedMonthIndex, 1).getDay();
         // if its sunday, show one week before
         if (0 === offsetToFirst) {
             offsetToFirst = 7;
         }
-        var daysInMonth = [];
+        const daysInMonth = [];
         // generate 6 weeks of dates
-        for (var i = 1; i <= 42; i++) {
-            var adjustedDay = i - offsetToFirst;
+        for (let i = 1; i <= 42; i++) {
+            const adjustedDay = i - offsetToFirst;
             daysInMonth.push(new Date(displayedYear, displayedMonthIndex, adjustedDay));
         }
         return daysInMonth;
     }, [displayedMonthIndex, displayedYear]);
-    var weeks = react_1.default.useMemo(function () {
-        var weeksInMonth = [];
-        var weekCount = Math.ceil(days.length / 7);
-        for (var i = 0; i < weekCount; i++) {
+    const weeks = react_1.default.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]);
-    var getNewFocusedDate = function (newYear, newMonth) {
+    const getNewFocusedDate = (newYear, newMonth) => {
         var _a;
-        var currentDate = (_a = selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay) !== null && _a !== void 0 ? _a : new Date();
-        var newDate = new Date(newYear, newMonth, currentDate.getDate(), currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds());
+        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;
     };
-    var handleMoveToPreviousYear = function () {
-        var newYear = displayedYear - 1;
+    const handleMoveToPreviousYear = () => {
+        const newYear = displayedYear - 1;
         setMonthAndYear(displayedMonthIndex, newYear);
         setFocusedDay(getNewFocusedDate(newYear, displayedMonthIndex));
     };
-    var handleMoveToNextYear = function () {
-        var newYear = displayedYear + 1;
+    const handleMoveToNextYear = () => {
+        const newYear = displayedYear + 1;
         setMonthAndYear(displayedMonthIndex, newYear);
         setFocusedDay(getNewFocusedDate(newYear, displayedMonthIndex));
     };
-    var handleMoveToPreviousMonth = function () {
-        var newMonth = displayedMonthIndex !== 0 ? displayedMonthIndex - 1 : 11;
-        var newYear = displayedMonthIndex !== 0 ? displayedYear : displayedYear - 1;
+    const handleMoveToPreviousMonth = () => {
+        const newMonth = displayedMonthIndex !== 0 ? displayedMonthIndex - 1 : 11;
+        const newYear = displayedMonthIndex !== 0 ? displayedYear : displayedYear - 1;
         setMonthAndYear(newMonth, newYear);
         setFocusedDay(getNewFocusedDate(newYear, newMonth));
     };
-    var handleMoveToNextMonth = function () {
-        var newMonth = displayedMonthIndex !== 11 ? displayedMonthIndex + 1 : 0;
-        var newYear = displayedMonthIndex !== 11 ? displayedYear : displayedYear + 1;
+    const handleMoveToNextMonth = () => {
+        const newMonth = displayedMonthIndex !== 11 ? displayedMonthIndex + 1 : 0;
+        const newYear = displayedMonthIndex !== 11 ? displayedYear : displayedYear + 1;
         setMonthAndYear(newMonth, newYear);
         setFocusedDay(getNewFocusedDate(newYear, newMonth));
     };
-    var onDayClick = function (day) {
+    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());
             }
-            var currentDate = selectedDay !== null && selectedDay !== void 0 ? selectedDay : new Date();
-            var newDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds());
+            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));
@@ -255,8 +233,8 @@ var DatePicker = function (props) {
             if (day.getMonth() !== (selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getMonth())) {
                 setMonthAndYear(day.getMonth(), day.getFullYear());
             }
-            var currentStartDate = selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : new Date();
-            var newStartDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentStartDate.getHours(), currentStartDate.getMinutes(), currentStartDate.getSeconds());
+            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
@@ -274,8 +252,8 @@ var DatePicker = function (props) {
             if (day.getMonth() !== (selectedEndDay === null || selectedEndDay === void 0 ? void 0 : selectedEndDay.getMonth())) {
                 setMonthAndYear(day.getMonth(), day.getFullYear());
             }
-            var currentEndDate = selectedEndDay !== null && selectedEndDay !== void 0 ? selectedEndDay : new Date();
-            var newEndDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentEndDate.getHours(), currentEndDate.getMinutes(), currentEndDate.getSeconds());
+            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)) {
@@ -289,11 +267,11 @@ var DatePicker = function (props) {
             }
         }
     };
-    var handleCalendarKeyDown = function (event) {
+    const handleCalendarKeyDown = (event) => {
         if (!focusedDay) {
             return;
         }
-        var adjustedFocusedDay = new Date(focusedDay);
+        const adjustedFocusedDay = new Date(focusedDay);
         switch (event.key) {
             case 'ArrowDown':
                 adjustedFocusedDay.setDate(focusedDay.getDate() + 7);
@@ -339,12 +317,12 @@ var DatePicker = function (props) {
                 break;
         }
     };
-    var getDayClass = function (day) {
+    const getDayClass = (day) => {
         if (day.getMonth() !== displayedMonthIndex) {
             return 'iui-calendar-day-outside-month';
         }
-        var dayClass = 'iui-calendar-day';
-        var isSelectedDay = isSameDay(day, selectedDay) ||
+        let dayClass = 'iui-calendar-day';
+        const isSelectedDay = isSameDay(day, selectedDay) ||
             (isSameDay(day, selectedStartDay) && isSameDay(day, selectedEndDay));
         if (isSelectedDay) {
             dayClass += '-selected';
@@ -366,7 +344,7 @@ var DatePicker = function (props) {
         }
         return dayClass;
     };
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-date-picker', className), style: style }, rest),
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-date-picker', className), style: style, ...rest },
         react_1.default.createElement("div", null,
             react_1.default.createElement("div", { className: 'iui-calendar-month-year' },
                 showYearSelection && (react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousYear, "aria-label": 'Previous year', size: 'small' },
@@ -381,18 +359,16 @@ var DatePicker = function (props) {
                     react_1.default.createElement(utils_1.SvgChevronRight, null)),
                 showYearSelection && (react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToNextYear, "aria-label": 'Next year', size: 'small' },
                     react_1.default.createElement(utils_1.SvgChevronRightDouble, null)))),
-            react_1.default.createElement("div", { className: 'iui-calendar-weekdays' }, shortDays.map(function (day, index) { return (react_1.default.createElement("div", { key: day, title: longDays[index] }, day)); })),
-            react_1.default.createElement("div", { onKeyDown: handleCalendarKeyDown, role: 'listbox' }, weeks.map(function (weekDays, weekIndex) {
-                return (react_1.default.createElement("div", { key: "week-".concat(displayedMonthIndex, "-").concat(weekIndex), className: 'iui-calendar-week' }, weekDays.map(function (weekDay, dayIndex) {
-                    var dateValue = weekDay.getDate();
-                    return (react_1.default.createElement("div", { key: "day-".concat(displayedMonthIndex, "-").concat(dayIndex), className: getDayClass(weekDay), onClick: function () { return onDayClick(weekDay); }, role: 'option', tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1, ref: function (element) {
-                            return isSameDay(weekDay, focusedDay) &&
-                                needFocus.current &&
-                                (element === null || element === void 0 ? void 0 : element.focus());
-                        } }, dateValue));
+            react_1.default.createElement("div", { className: 'iui-calendar-weekdays' }, shortDays.map((day, index) => (react_1.default.createElement("div", { key: day, title: longDays[index] }, day)))),
+            react_1.default.createElement("div", { onKeyDown: handleCalendarKeyDown, role: 'listbox' }, weeks.map((weekDays, weekIndex) => {
+                return (react_1.default.createElement("div", { key: `week-${displayedMonthIndex}-${weekIndex}`, className: 'iui-calendar-week' }, weekDays.map((weekDay, dayIndex) => {
+                    const dateValue = weekDay.getDate();
+                    return (react_1.default.createElement("div", { key: `day-${displayedMonthIndex}-${dayIndex}`, className: getDayClass(weekDay), onClick: () => onDayClick(weekDay), role: 'option', tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1, ref: (element) => isSameDay(weekDay, focusedDay) &&
+                            needFocus.current &&
+                            (element === null || element === void 0 ? void 0 : element.focus()) }, dateValue));
                 })));
             }))),
-        showTime && (react_1.default.createElement(TimePicker_1.TimePicker, { date: selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay, use12Hours: use12Hours, precision: precision, hourStep: hourStep, minuteStep: minuteStep, secondStep: secondStep, onChange: function (date) {
+        showTime && (react_1.default.createElement(TimePicker_1.TimePicker, { date: selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay, use12Hours: use12Hours, precision: precision, hourStep: hourStep, minuteStep: minuteStep, secondStep: secondStep, onChange: (date) => {
                 var _a, _b, _c, _d, _e, _f;
                 return isSingleOnChange(onChange, enableRangeSelect)
                     ? onChange === null || onChange === void 0 ? void 0 : onChange(date)

package/cjs/core/Dialog/Dialog.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,16 +8,16 @@ exports.Dialog = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 require("@itwin/itwinui-css/css/dialog.css");
-var DialogTitleBar_1 = require("./DialogTitleBar");
-var DialogContent_1 = require("./DialogContent");
-var DialogBackdrop_1 = require("./DialogBackdrop");
-var DialogContext_1 = require("./DialogContext");
-var DialogButtonBar_1 = require("./DialogButtonBar");
-var DialogMain_1 = require("./DialogMain");
-var utils_1 = require("../utils");
+const DialogTitleBar_1 = require("./DialogTitleBar");
+const DialogContent_1 = require("./DialogContent");
+const DialogBackdrop_1 = require("./DialogBackdrop");
+const DialogContext_1 = require("./DialogContext");
+const DialogButtonBar_1 = require("./DialogButtonBar");
+const DialogMain_1 = require("./DialogMain");
+const utils_1 = require("../utils");
 /**
  * Dialog component.
  * @example
@@ -62,25 +40,27 @@ var utils_1 = require("../utils");
  *   </Dialog.Main>
  * </Dialog>
  */
-exports.Dialog = Object.assign(react_1.default.forwardRef(function (props, ref) {
-    var children = props.children, _a = props.trapFocus, trapFocus = _a === void 0 ? false : _a, _b = props.setFocus, setFocus = _b === void 0 ? false : _b, _c = props.preventDocumentScroll, preventDocumentScroll = _c === void 0 ? false : _c, _d = props.isOpen, isOpen = _d === void 0 ? false : _d, _e = props.isDismissible, isDismissible = _e === void 0 ? true : _e, _f = props.closeOnEsc, closeOnEsc = _f === void 0 ? true : _f, _g = props.closeOnExternalClick, closeOnExternalClick = _g === void 0 ? false : _g, onClose = props.onClose, _h = props.isDraggable, isDraggable = _h === void 0 ? false : _h, _j = props.isResizable, isResizable = _j === void 0 ? false : _j, _k = props.relativeTo, relativeTo = _k === void 0 ? 'viewport' : _k, className = props.className, style = props.style, rest = __rest(props, ["children", "trapFocus", "setFocus", "preventDocumentScroll", "isOpen", "isDismissible", "closeOnEsc", "closeOnExternalClick", "onClose", "isDraggable", "isResizable", "relativeTo", "className", "style"]);
-    var dialogRootRef = react_1.default.useRef(null);
-    var refs = (0, utils_1.useMergedRefs)(ref, dialogRootRef);
+exports.Dialog = Object.assign(react_1.default.forwardRef((props, ref) => {
+    const { children, trapFocus = false, setFocus = false, preventDocumentScroll = false, isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = false, onClose, isDraggable = false, isResizable = false, relativeTo = 'viewport', className, style, ...rest } = props;
+    const dialogRootRef = react_1.default.useRef(null);
+    const refs = (0, utils_1.useMergedRefs)(ref, dialogRootRef);
     return (react_1.default.createElement(DialogContext_1.DialogContext.Provider, { value: {
-            isOpen: isOpen,
-            onClose: onClose,
-            closeOnEsc: closeOnEsc,
-            closeOnExternalClick: closeOnExternalClick,
-            isDismissible: isDismissible,
-            preventDocumentScroll: preventDocumentScroll,
-            trapFocus: trapFocus,
-            setFocus: setFocus,
-            isDraggable: isDraggable,
-            isResizable: isResizable,
-            relativeTo: relativeTo,
-            dialogRootRef: dialogRootRef,
+            isOpen,
+            onClose,
+            closeOnEsc,
+            closeOnExternalClick,
+            isDismissible,
+            preventDocumentScroll,
+            trapFocus,
+            setFocus,
+            isDraggable,
+            isResizable,
+            relativeTo,
+            dialogRootRef,
         } },
-        react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: refs, style: __assign({}, style) }, rest), children)));
+        react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: refs, style: {
+                ...style,
+            }, ...rest }, children)));
 }), {
     Backdrop: DialogBackdrop_1.DialogBackdrop,
     Main: DialogMain_1.DialogMain,

package/cjs/core/Dialog/DialogBackdrop.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,23 +8,23 @@ exports.DialogBackdrop = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var Backdrop_1 = require("../Backdrop");
-var utils_1 = require("../utils");
-var DialogContext_1 = require("./DialogContext");
-var classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const Backdrop_1 = require("../Backdrop");
+const utils_1 = require("../utils");
+const DialogContext_1 = require("./DialogContext");
+const classnames_1 = __importDefault(require("classnames"));
 /**
  * Backdrop component for dialog. Recommended to be used with `Dialog`
  * then its visibility is being controlled by dialog's `isOpen` prop.
  * @example
  * <Dialog.Backdrop />
  */
-exports.DialogBackdrop = react_1.default.forwardRef(function (props, ref) {
-    var dialogContext = (0, DialogContext_1.useDialogContext)();
-    var _a = props.isVisible, isVisible = _a === void 0 ? dialogContext.isOpen : _a, _b = props.isDismissible, isDismissible = _b === void 0 ? dialogContext.isDismissible : _b, _c = props.onClose, onClose = _c === void 0 ? dialogContext.onClose : _c, _d = props.closeOnExternalClick, closeOnExternalClick = _d === void 0 ? dialogContext.closeOnExternalClick : _d, _e = props.relativeTo, relativeTo = _e === void 0 ? dialogContext.relativeTo : _e, onMouseDown = props.onMouseDown, className = props.className, style = props.style, rest = __rest(props, ["isVisible", "isDismissible", "onClose", "closeOnExternalClick", "relativeTo", "onMouseDown", "className", "style"]);
-    var backdropRef = react_1.default.useRef(null);
-    var refs = (0, utils_1.useMergedRefs)(backdropRef, ref);
-    var handleMouseDown = function (event) {
+exports.DialogBackdrop = react_1.default.forwardRef((props, ref) => {
+    const dialogContext = (0, DialogContext_1.useDialogContext)();
+    const { isVisible = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnExternalClick = dialogContext.closeOnExternalClick, relativeTo = dialogContext.relativeTo, onMouseDown, className, style, ...rest } = props;
+    const backdropRef = react_1.default.useRef(null);
+    const refs = (0, utils_1.useMergedRefs)(backdropRef, ref);
+    const handleMouseDown = (event) => {
         // Prevents React from resetting its properties
         event.persist();
         if (event.target !== backdropRef.current) {
@@ -57,8 +35,11 @@ exports.DialogBackdrop = react_1.default.forwardRef(function (props, ref) {
         }
         onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
     };
-    return (react_1.default.createElement(Backdrop_1.Backdrop, __assign({ isVisible: isVisible, className: (0, classnames_1.default)({
+    return (react_1.default.createElement(Backdrop_1.Backdrop, { isVisible: isVisible, className: (0, classnames_1.default)({
             'iui-backdrop-fixed': relativeTo === 'viewport',
-        }, className), ref: refs, onMouseDown: handleMouseDown, style: __assign({ pointerEvents: 'auto' }, style) }, rest)));
+        }, className), ref: refs, onMouseDown: handleMouseDown, style: {
+            pointerEvents: 'auto',
+            ...style,
+        }, ...rest }));
 });
 exports.default = exports.DialogBackdrop;

package/cjs/core/Dialog/DialogButtonBar.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,9 +8,9 @@ exports.DialogButtonBar = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var utils_1 = require("../utils");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/dialog.css");
 /**
  * Container for Buttons in `Dialog`. Recommended to be used as a child of `Dialog`.
@@ -42,9 +20,9 @@ require("@itwin/itwinui-css/css/dialog.css");
  *   <Button>Close</Button>
  * </Dialog.ButtonBar>
  */
-exports.DialogButtonBar = react_1.default.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+exports.DialogButtonBar = react_1.default.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-dialog-button-bar', className), ref: ref }, rest), children));
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-dialog-button-bar', className), ref: ref, ...rest }, children));
 });
 exports.default = exports.DialogButtonBar;