npm - @itwin/components-react - Versions diffs - 4.0.0-dev.8 → 4.0.0 - Mend

@itwin/components-react 4.0.0-dev.8 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1519) hide show

package/lib/cjs/components-react/datepicker/DatePicker.js CHANGED Viewed

@@ -1,201 +1,213 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Date
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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;
-});
-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 = void 0;
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_react_1 = require("@itwin/core-react");
-const UiComponents_1 = require("../UiComponents");
-require("./DatePicker.scss");
-function isSameDay(a, b) {
-    return (a &&
-        b &&
-        a.getFullYear() === b.getFullYear() &&
-        a.getMonth() === b.getMonth() &&
-        a.getDate() === b.getDate());
-}
-/** DatePicker component. Show a month selector and a day calendar to select a specific date.
- * @alpha
- */
-function DatePicker(props) {
-    const previousMonthLabel = React.useRef(UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:datepicker.previousMonth"));
-    const nextMonthLabel = React.useRef(UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:datepicker.nextMonth"));
-    const monthsLong = React.useRef([
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.january"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.february"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.march"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.april"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.may"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.june"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.july"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.august"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.september"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.october"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.november"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.december"),
-    ]);
-    const daysLong = React.useRef([
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.long.sunday"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.long.monday"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.long.tuesday"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.long.wednesday"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.long.thursday"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.long.friday"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.long.saturday"),
-    ]);
-    const daysShort = React.useRef([
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.short.sunday"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.short.monday"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.short.tuesday"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.short.wednesday"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.short.thursday"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.short.friday"),
-        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.short.saturday"),
-    ]);
-    const [selectedDay, setSelectedDay] = React.useState(new Date(props.selected.getTime()));
-    const [displayedMonthIndex, setDisplayedMonthIndex] = React.useState(selectedDay.getMonth());
-    const [displayedYear, setDisplayedYear] = React.useState(selectedDay.getFullYear());
-    const [focusedDay, setFocusedDay] = React.useState(selectedDay);
-    const days = React.useMemo(() => {
-        const msFirstDayOfMonth = new Date(displayedYear, displayedMonthIndex, 1).getTime();
-        let offsetToFirst = new Date(msFirstDayOfMonth).getDay();
-        if (0 === offsetToFirst)
-            offsetToFirst = 7;
-        const daysInMonth = [];
-        // generate 6 weeks of dates
-        for (let i = 0; i < 42; i++) {
-            const adjustedDay = 1 + i - offsetToFirst;
-            daysInMonth.push(new Date(displayedYear, displayedMonthIndex, adjustedDay));
-        }
-        return daysInMonth;
-    }, [displayedMonthIndex, displayedYear]);
-    const weeks = React.useMemo(() => {
-        const weeksInMonth = [];
-        const weekCount = Math.ceil(days.length / 7);
-        for (let i = 0; i < weekCount; i++) {
-            weeksInMonth.push(days.slice(i * 7, (i + 1) * 7));
-        }
-        return weeksInMonth;
-    }, [days]);
-    const setMonthAndYear = React.useCallback((newMonth, newYear) => {
-        setDisplayedMonthIndex(newMonth);
-        setDisplayedYear(newYear);
-        if (selectedDay.getFullYear() === newYear && selectedDay.getMonth() === newMonth) {
-            setFocusedDay(new Date(selectedDay.getTime()));
-        }
-        else {
-            const newFocusDay = new Date(focusedDay.getTime());
-            newFocusDay.setFullYear(newYear, newMonth, 1);
-            setFocusedDay(newFocusDay);
-        }
-    }, [focusedDay, selectedDay]);
-    const handleMoveToPreviousMonth = React.useCallback(() => {
-        const newMonth = displayedMonthIndex !== 0 ? displayedMonthIndex - 1 : 11;
-        const newYear = displayedMonthIndex !== 0 ? displayedYear : displayedYear - 1;
-        setMonthAndYear(newMonth, newYear);
-    }, [displayedMonthIndex, displayedYear, setMonthAndYear]);
-    const handleMoveToNextMonth = React.useCallback(() => {
-        const newMonth = displayedMonthIndex !== 11 ? displayedMonthIndex + 1 : 0;
-        const newYear = displayedMonthIndex !== 11 ? displayedYear : displayedYear + 1;
-        setMonthAndYear(newMonth, newYear);
-    }, [displayedMonthIndex, displayedYear, setMonthAndYear]);
-    // when invoked, it will return another function which can be used for the onClick React listener.
-    const handleOnDayChange = React.useCallback((day) => () => {
-        setSelectedDay(day);
-        setFocusedDay(day);
-        props.onDateChange && props.onDateChange(day);
-    }, [props]);
-    const handleCalendarKeyDown = React.useCallback((event) => {
-        if (event.key === appui_abstract_1.SpecialKey.ArrowDown) {
-            const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
-            if ((focusedDayIndex + 7) > 41)
-                setFocusedDay(days[focusedDayIndex % 7]);
-            else
-                setFocusedDay(days[focusedDayIndex + 7]);
-            event.preventDefault();
-        }
-        if (event.key === appui_abstract_1.SpecialKey.ArrowUp) {
-            const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
-            if ((focusedDayIndex - 7) < 0)
-                setFocusedDay(days[(focusedDayIndex % 7) + 35]);
-            else
-                setFocusedDay(days[focusedDayIndex - 7]);
-            event.preventDefault();
-        }
-        if (event.key === appui_abstract_1.SpecialKey.ArrowLeft) {
-            const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
-            // istanbul ignore else
-            if ((focusedDayIndex - 1) >= 0)
-                setFocusedDay(days[focusedDayIndex - 1]);
-            event.preventDefault();
-        }
-        if (event.key === appui_abstract_1.SpecialKey.ArrowRight) {
-            const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
-            // istanbul ignore else
-            if ((focusedDayIndex + 1) <= 41)
-                setFocusedDay(days[focusedDayIndex + 1]);
-            event.preventDefault();
-        }
-        if (event.key === appui_abstract_1.SpecialKey.Enter || event.key === appui_abstract_1.SpecialKey.Space) {
-            handleOnDayChange(focusedDay)(); // NB: immediately call returned handler function
-            event.preventDefault();
-        }
-    }, [days, focusedDay, handleOnDayChange]);
-    const previousButtonClass = (0, classnames_1.default)("components-previous-month", props.showFocusOutline && "showFocusOutline");
-    const nextButtonClass = (0, classnames_1.default)("components-next-month", props.showFocusOutline && "showFocusOutline");
-    const calendarClass = (0, classnames_1.default)("components-date-picker-calendar-month", props.showFocusOutline && "showFocusOutline");
-    return (React.createElement("div", { className: "components-date-picker-calendar" },
-        React.createElement("div", { className: "components-date-picker-calendar-header-months" },
-            React.createElement("button", { className: previousButtonClass, title: previousMonthLabel.current, onClick: handleMoveToPreviousMonth },
-                React.createElement(core_react_1.WebFontIcon, { iconName: "icon-chevron-left" })),
-            React.createElement("span", { className: "components-month-year" },
-                monthsLong.current[displayedMonthIndex],
-                " ",
-                displayedYear),
-            React.createElement("button", { className: nextButtonClass, title: nextMonthLabel.current, onClick: handleMoveToNextMonth },
-                React.createElement(core_react_1.WebFontIcon, { iconName: "icon-chevron-right" }))),
-        React.createElement("div", { className: "components-date-picker-calendar-header-weekdays" }, [0, 1, 2, 3, 4, 5, 6].map((dayOfWeek) => React.createElement("div", { key: `day-${dayOfWeek}`, className: "components-date-picker-calendar-header-day-short", title: daysLong.current[dayOfWeek] },
-            React.createElement("span", null, daysShort.current[dayOfWeek])))),
-        React.createElement("ul", { tabIndex: 0, onKeyDown: handleCalendarKeyDown, "data-testid": "components-date-picker-calendar-list", className: calendarClass, role: "listbox" }, weeks.map((weekdays, weekIndex) => (React.createElement(React.Fragment, { key: `week-${weekIndex}` }, weekdays.map((day, dayIndex) => {
-            const isActive = selectedDay && day && isSameDay(selectedDay, day);
-            const isFocused = focusedDay && day && isSameDay(focusedDay, day) && props.showFocusOutline;
-            const isCurrentMonth = day.getMonth() === displayedMonthIndex;
-            const classNames = (0, classnames_1.default)("components-date-picker-calendar-day", isActive && "selected", !isCurrentMonth && "notCurrentMonth", isFocused && "focused");
-            const dateValue = day.getDate();
-            return (
-            /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
-            React.createElement("li", { className: classNames, key: `${displayedYear}.${displayedMonthIndex}.day.${dayIndex}`, onClick: handleOnDayChange(day), role: "option", "aria-selected": isActive, "data-value": day.getTime() },
-                React.createElement("span", null, dateValue)));
-        })))))));
-}
-exports.DatePicker = DatePicker;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Date
+ */
+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;
+});
+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 = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const UiComponents_1 = require("../UiComponents");
+const core_react_1 = require("@itwin/core-react");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+require("./DatePicker.scss");
+function isSameDay(a, b) {
+    return (a &&
+        b &&
+        a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+/** DatePicker component. Show a month selector and a day calendar to select a specific date.
+ * @alpha
+ */
+function DatePicker(props) {
+    const previousMonthLabel = React.useRef(UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:datepicker.previousMonth"));
+    const nextMonthLabel = React.useRef(UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:datepicker.nextMonth"));
+    const monthsLong = React.useRef([
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.january"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.february"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.march"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.april"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.may"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.june"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.july"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.august"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.september"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.october"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.november"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:month.long.december"),
+    ]);
+    const daysLong = React.useRef([
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.long.sunday"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.long.monday"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.long.tuesday"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.long.wednesday"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.long.thursday"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.long.friday"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.long.saturday"),
+    ]);
+    const daysShort = React.useRef([
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.short.sunday"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.short.monday"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.short.tuesday"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.short.wednesday"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.short.thursday"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.short.friday"),
+        UiComponents_1.UiComponents.localization.getLocalizedString("UiComponents:days.short.saturday"),
+    ]);
+    const [selectedDay, setSelectedDay] = React.useState(new Date(props.selected.getTime()));
+    const [displayedMonthIndex, setDisplayedMonthIndex] = React.useState(selectedDay.getMonth());
+    const [displayedYear, setDisplayedYear] = React.useState(selectedDay.getFullYear());
+    const [focusedDay, setFocusedDay] = React.useState(selectedDay);
+    React.useEffect(() => {
+        const newSelectedDay = new Date(props.selected);
+        setSelectedDay(new Date(props.selected));
+        setDisplayedMonthIndex(newSelectedDay.getMonth());
+        setDisplayedYear(newSelectedDay.getFullYear());
+        setFocusedDay(newSelectedDay);
+    }, [props.selected]);
+    const days = React.useMemo(() => {
+        const msFirstDayOfMonth = new Date(displayedYear, displayedMonthIndex, 1).getTime();
+        let offsetToFirst = new Date(msFirstDayOfMonth).getDay();
+        if (0 === offsetToFirst)
+            offsetToFirst = 7;
+        const daysInMonth = [];
+        // generate 6 weeks of dates
+        for (let i = 0; i < 42; i++) {
+            const adjustedDay = 1 + i - offsetToFirst;
+            daysInMonth.push(new Date(displayedYear, displayedMonthIndex, adjustedDay));
+        }
+        return daysInMonth;
+    }, [displayedMonthIndex, displayedYear]);
+    const weeks = React.useMemo(() => {
+        const weeksInMonth = [];
+        const weekCount = Math.ceil(days.length / 7);
+        for (let i = 0; i < weekCount; i++) {
+            weeksInMonth.push(days.slice(i * 7, (i + 1) * 7));
+        }
+        return weeksInMonth;
+    }, [days]);
+    const setMonthAndYear = React.useCallback((newMonth, newYear) => {
+        setDisplayedMonthIndex(newMonth);
+        setDisplayedYear(newYear);
+        if (selectedDay.getFullYear() === newYear && selectedDay.getMonth() === newMonth) {
+            setFocusedDay(new Date(selectedDay.getTime()));
+        }
+        else {
+            const newFocusDay = new Date(focusedDay.getTime());
+            newFocusDay.setFullYear(newYear, newMonth, 1);
+            setFocusedDay(newFocusDay);
+        }
+    }, [focusedDay, selectedDay]);
+    const handleMoveToPreviousMonth = React.useCallback(() => {
+        const newMonth = displayedMonthIndex !== 0 ? displayedMonthIndex - 1 : 11;
+        const newYear = displayedMonthIndex !== 0 ? displayedYear : displayedYear - 1;
+        setMonthAndYear(newMonth, newYear);
+    }, [displayedMonthIndex, displayedYear, setMonthAndYear]);
+    const handleMoveToNextMonth = React.useCallback(() => {
+        const newMonth = displayedMonthIndex !== 11 ? displayedMonthIndex + 1 : 0;
+        const newYear = displayedMonthIndex !== 11 ? displayedYear : displayedYear + 1;
+        setMonthAndYear(newMonth, newYear);
+    }, [displayedMonthIndex, displayedYear, setMonthAndYear]);
+    // when invoked, it will return another function which can be used for the onClick React listener.
+    const handleOnDayChange = React.useCallback((day) => () => {
+        setSelectedDay(day);
+        setFocusedDay(day);
+        props.onDateChange && props.onDateChange(day);
+    }, [props]);
+    const handleCalendarKeyDown = React.useCallback((event) => {
+        if (event.key === appui_abstract_1.SpecialKey.ArrowDown) {
+            const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
+            if ((focusedDayIndex + 7) > 41)
+                setFocusedDay(days[focusedDayIndex % 7]);
+            else
+                setFocusedDay(days[focusedDayIndex + 7]);
+            event.preventDefault();
+        }
+        if (event.key === appui_abstract_1.SpecialKey.ArrowUp) {
+            const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
+            if ((focusedDayIndex - 7) < 0)
+                setFocusedDay(days[(focusedDayIndex % 7) + 35]);
+            else
+                setFocusedDay(days[focusedDayIndex - 7]);
+            event.preventDefault();
+        }
+        if (event.key === appui_abstract_1.SpecialKey.ArrowLeft) {
+            const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
+            // istanbul ignore else
+            if ((focusedDayIndex - 1) >= 0)
+                setFocusedDay(days[focusedDayIndex - 1]);
+            event.preventDefault();
+        }
+        if (event.key === appui_abstract_1.SpecialKey.ArrowRight) {
+            const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
+            // istanbul ignore else
+            if ((focusedDayIndex + 1) <= 41)
+                setFocusedDay(days[focusedDayIndex + 1]);
+            event.preventDefault();
+        }
+        if (event.key === appui_abstract_1.SpecialKey.Enter || event.key === appui_abstract_1.SpecialKey.Space) {
+            handleOnDayChange(focusedDay)(); // NB: immediately call returned handler function
+            event.preventDefault();
+        }
+    }, [days, focusedDay, handleOnDayChange]);
+    const previousButtonClass = (0, classnames_1.default)("components-previous-month", props.showFocusOutline && "showFocusOutline");
+    const nextButtonClass = (0, classnames_1.default)("components-next-month", props.showFocusOutline && "showFocusOutline");
+    const calendarClass = (0, classnames_1.default)("components-date-picker-calendar-month", props.showFocusOutline && "showFocusOutline");
+    return (React.createElement("div", { className: "components-date-picker-calendar" },
+        React.createElement("div", { className: "components-date-picker-calendar-header-months" },
+            React.createElement("button", { className: previousButtonClass, title: previousMonthLabel.current, onClick: handleMoveToPreviousMonth },
+                React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgChevronLeft, null) })),
+            React.createElement("span", { className: "components-month-year" },
+                monthsLong.current[displayedMonthIndex],
+                " ",
+                displayedYear),
+            React.createElement("button", { className: nextButtonClass, title: nextMonthLabel.current, onClick: handleMoveToNextMonth },
+                React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgChevronRight, null) }))),
+        React.createElement("div", { className: "components-date-picker-calendar-header-weekdays" }, [0, 1, 2, 3, 4, 5, 6].map((dayOfWeek) => React.createElement("div", { key: `day-${dayOfWeek}`, className: "components-date-picker-calendar-header-day-short", title: daysLong.current[dayOfWeek] },
+            React.createElement("span", null, daysShort.current[dayOfWeek])))),
+        React.createElement("ul", { tabIndex: 0, onKeyDown: handleCalendarKeyDown, "data-testid": "components-date-picker-calendar-list", className: calendarClass, role: "listbox" }, weeks.map((weekdays, weekIndex) => (React.createElement(React.Fragment, { key: `week-${weekIndex}` }, weekdays.map((day, dayIndex) => {
+            const isActive = selectedDay && day && isSameDay(selectedDay, day);
+            const isFocused = focusedDay && day && isSameDay(focusedDay, day) && props.showFocusOutline;
+            const isCurrentMonth = day.getMonth() === displayedMonthIndex;
+            const classNames = (0, classnames_1.default)("components-date-picker-calendar-day", isActive && "selected", !isCurrentMonth && "notCurrentMonth", isFocused && "focused");
+            const dateValue = day.getDate();
+            return (
+            /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
+            React.createElement("li", { className: classNames, key: `${displayedYear}.${displayedMonthIndex}.day.${dayIndex}`, onClick: handleOnDayChange(day), role: "option", "aria-selected": isActive, "data-value": day.getTime() },
+                React.createElement("span", null, dateValue)));
+        })))))));
+}
+exports.DatePicker = DatePicker;
 //# sourceMappingURL=DatePicker.js.map

package/lib/cjs/components-react/datepicker/DatePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DatePicker.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,6CAA+B;AAC/B,4DAAoC;AACpC,0DAAmD;AACnD,kDAAgD;AAChD,kDAA+C;AAE/C,6BAA2B;AAE3B,SAAS,SAAS,CAAC,CAAO,EAAE,CAAO;IACjC,OAAO,CACL,CAAC;QACD,CAAC;QACD,CAAC,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE;QACnC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,QAAQ,EAAE;QAC7B,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,OAAO,EAAE,CAC5B,CAAC;AACJ,CAAC;AAeD;;GAEG;AACH,SAAgB,UAAU,CAAC,KAAsB;IAC/C,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,CAAC,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,uCAAuC,CAAC,CAAC,CAAC;IAC/H,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,mCAAmC,CAAC,CAAC,CAAC;IACvH,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC;QAC9B,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,iCAAiC,CAAC;QAC/E,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,kCAAkC,CAAC;QAChF,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,+BAA+B,CAAC;QAC7E,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,+BAA+B,CAAC;QAC7E,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,6BAA6B,CAAC;QAC3E,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,8BAA8B,CAAC;QAC5E,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,8BAA8B,CAAC;QAC5E,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,gCAAgC,CAAC;QAC9E,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,mCAAmC,CAAC;QACjF,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,iCAAiC,CAAC;QAC/E,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,kCAAkC,CAAC;QAChF,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,kCAAkC,CAAC;KACjF,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,+BAA+B,CAAC;QAC7E,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,+BAA+B,CAAC;QAC7E,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,gCAAgC,CAAC;QAC9E,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,kCAAkC,CAAC;QAChF,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,iCAAiC,CAAC;QAC/E,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,+BAA+B,CAAC;QAC7E,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,iCAAiC,CAAC;KAChF,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;QAC7B,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,gCAAgC,CAAC;QAC9E,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,gCAAgC,CAAC;QAC9E,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,iCAAiC,CAAC;QAC/E,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,mCAAmC,CAAC;QACjF,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,kCAAkC,CAAC;QAChF,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,gCAAgC,CAAC;QAC9E,2BAAY,CAAC,YAAY,CAAC,kBAAkB,CAAC,kCAAkC,CAAC;KACjF,CAAC,CAAC;IAEH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;IACzF,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC7F,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC;IACpF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAChE,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC9B,MAAM,iBAAiB,GAAG,IAAI,IAAI,CAAC,aAAa,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;QACpF,IAAI,aAAa,GAAG,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,MAAM,EAAE,CAAC;QACzD,IAAI,CAAC,KAAK,aAAa;YACrB,aAAa,GAAG,CAAC,CAAC;QAEpB,MAAM,WAAW,GAAW,EAAE,CAAC;QAC/B,4BAA4B;QAC5B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE;YAC3B,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,aAAa,CAAC;YAC1C,WAAW,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE,mBAAmB,EAAE,WAAW,CAAC,CAAC,CAAC;SAC7E;QACD,OAAO,WAAW,CAAC;IACrB,CAAC,EAAE,CAAC,mBAAmB,EAAE,aAAa,CAAC,CAAC,CAAC;IAEzC,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC/B,MAAM,YAAY,GAAG,EAAE,CAAC;QACxB,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC7C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,EAAE;YAClC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;SACnD;QACD,OAAO,YAAY,CAAC;IACtB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAE,OAAe,EAAE,EAAE;QAC9E,sBAAsB,CAAC,QAAQ,CAAC,CAAC;QACjC,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAC1B,IAAI,WAAW,CAAC,WAAW,EAAE,KAAK,OAAO,IAAI,WAAW,CAAC,QAAQ,EAAE,KAAK,QAAQ,EAAE;YAChF,aAAa,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;SAChD;aAAM;YACL,MAAM,WAAW,GAAG,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC;YACnD,WAAW,CAAC,WAAW,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;YAC9C,aAAa,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAE9B,MAAM,yBAAyB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACvD,MAAM,QAAQ,GAAG,mBAAmB,KAAK,CAAC,CAAC,CAAC,CAAC,mBAAmB,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC1E,MAAM,OAAO,GAAG,mBAAmB,KAAK,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,GAAG,CAAC,CAAC;QAC9E,eAAe,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,mBAAmB,EAAE,aAAa,EAAE,eAAe,CAAC,CAAC,CAAC;IAE1D,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACnD,MAAM,QAAQ,GAAG,mBAAmB,KAAK,EAAE,CAAC,CAAC,CAAC,mBAAmB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1E,MAAM,OAAO,GAAG,mBAAmB,KAAK,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,GAAG,CAAC,CAAC;QAC/E,eAAe,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,mBAAmB,EAAE,aAAa,EAAE,eAAe,CAAC,CAAC,CAAC;IAE1D,kGAAkG;IAClG,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,GAAS,EAAE,EAAE,CAAC,GAAG,EAAE;QAC9D,cAAc,CAAC,GAAG,CAAC,CAAC;QACpB,aAAa,CAAC,GAAG,CAAC,CAAC;QACnB,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAA4C,EAAE,EAAE;QAC/F,IAAI,KAAK,CAAC,GAAG,KAAK,2BAAU,CAAC,SAAS,EAAE;YACtC,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC;YAC5E,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,GAAG,EAAE;gBAC5B,aAAa,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,CAAC;;gBAEzC,aAAa,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,CAAC;YAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;QACD,IAAI,KAAK,CAAC,GAAG,KAAK,2BAAU,CAAC,OAAO,EAAE;YACpC,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC;YAC5E,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,GAAG,CAAC;gBAC3B,aAAa,CAAC,IAAI,CAAC,CAAC,eAAe,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;;gBAEhD,aAAa,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,CAAC;YAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;QACD,IAAI,KAAK,CAAC,GAAG,KAAK,2BAAU,CAAC,SAAS,EAAE;YACtC,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC;YAC5E,uBAAuB;YACvB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC;gBAC5B,aAAa,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,CAAC;YAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;QACD,IAAI,KAAK,CAAC,GAAG,KAAK,2BAAU,CAAC,UAAU,EAAE;YACvC,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC;YAC5E,uBAAuB;YACvB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,EAAE;gBAC7B,aAAa,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,CAAC;YAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;QACD,IAAI,KAAK,CAAC,GAAG,KAAK,2BAAU,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,KAAK,2BAAU,CAAC,KAAK,EAAE;YACpE,iBAAiB,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,iDAAiD;YAClF,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE1C,MAAM,mBAAmB,GAAG,IAAA,oBAAU,EAAC,2BAA2B,EAAE,KAAK,CAAC,gBAAgB,IAAI,kBAAkB,CAAC,CAAC;IAClH,MAAM,eAAe,GAAG,IAAA,oBAAU,EAAC,uBAAuB,EAAE,KAAK,CAAC,gBAAgB,IAAI,kBAAkB,CAAC,CAAC;IAC1G,MAAM,aAAa,GAAG,IAAA,oBAAU,EAAC,uCAAuC,EAAE,KAAK,CAAC,gBAAgB,IAAI,kBAAkB,CAAC,CAAC;IAExH,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,6BAAK,SAAS,EAAC,+CAA+C;YAC5D,gCAAQ,SAAS,EAAE,mBAAmB,EAAE,KAAK,EAAE,kBAAkB,CAAC,OAAO,EAAE,OAAO,EAAE,yBAAyB;gBAC3G,oBAAC,wBAAW,IAAC,QAAQ,EAAE,mBAAmB,GAAI,CACvC;YACT,8BAAM,SAAS,EAAC,uBAAuB;gBAAE,UAAU,CAAC,OAAO,CAAC,mBAAmB,CAAC;;gBAAG,aAAa,CAAQ;YACxG,gCAAQ,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,cAAc,CAAC,OAAO,EAAE,OAAO,EAAE,qBAAqB;gBAC/F,oBAAC,wBAAW,IAAC,QAAQ,EAAE,oBAAoB,GAAI,CACxC,CACL;QACN,6BAAK,SAAS,EAAC,iDAAiD,IAC7D,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CACvC,6BAAK,GAAG,EAAE,OAAO,SAAS,EAAE,EAAE,SAAS,EAAC,kDAAkD,EACxF,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC;YAAE,kCAAO,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,CAAQ,CAAM,CAAC,CACtF;QACN,4BAAI,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,qBAAqB,iBAAc,sCAAsC,EAAC,SAAS,EAAE,aAAa,EAAE,IAAI,EAAC,SAAS,IAC3I,KAAK,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,CAClC,oBAAC,KAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,QAAQ,SAAS,EAAE,IACrC,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAS,EAAE,QAAgB,EAAE,EAAE;YAC5C,MAAM,QAAQ,GAAG,WAAW,IAAI,GAAG,IAAI,SAAS,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;YACnE,MAAM,SAAS,GAAG,UAAU,IAAI,GAAG,IAAI,SAAS,CAAC,UAAU,EAAE,GAAG,CAAC,IAAI,KAAK,CAAC,gBAAgB,CAAC;YAC5F,MAAM,cAAc,GAAG,GAAG,CAAC,QAAQ,EAAE,KAAK,mBAAmB,CAAC;YAC9D,MAAM,UAAU,GAAG,IAAA,oBAAU,EAAC,qCAAqC,EAAE,QAAQ,IAAI,UAAU,EAAE,CAAC,cAAc,IAAI,iBAAiB,EAAE,SAAS,IAAI,SAAS,CAAC,CAAC;YAC3J,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;YAChC,OAAO;YACL,oEAAoE;YACpE,4BAAI,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,GAAG,aAAa,IAAI,mBAAmB,QAAQ,QAAQ,EAAE,EACvF,OAAO,EAAE,iBAAiB,CAAC,GAAG,CAAC,EAAE,IAAI,EAAC,QAAQ,mBAAgB,QAAQ,gBAAc,GAAG,CAAC,OAAO,EAAE;gBACjG,kCAAO,SAAS,CAAQ,CACrB,CACN,CAAC;QACJ,CAAC,CAAC,CACa,CAAC,CACnB,CACE,CACD,CACP,CAAC;AACJ,CAAC;AAhLD,gCAgLC","sourcesContent":["/---------------------------------------------------------------------------------------------\r\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n--------------------------------------------------------------------------------------------/\r\n/** @packageDocumentation\r\n * @module Date\r\n /\r\n\r\nimport as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { WebFontIcon } from \"@itwin/core-react\";\r\nimport { UiComponents } from \"../UiComponents\";\r\n\r\nimport \"./DatePicker.scss\";\r\n\r\nfunction isSameDay(a: Date, b: Date) {\r\n return (\r\n a &&\r\n b &&\r\n a.getFullYear() === b.getFullYear() &&\r\n a.getMonth() === b.getMonth() &&\r\n a.getDate() === b.getDate()\r\n );\r\n}\r\n\r\n/*\r\n Props for [[DatePicker]] component.\r\n * @alpha\r\n /\r\nexport interface DatePickerProps {\r\n /* defines both date and time /\r\n selected: Date;\r\n /* function to call when date or time has changed /\r\n onDateChange?: (day: Date) => void;\r\n /* show focus outlines, useful for keyboard navigation /\r\n showFocusOutline?: boolean;\r\n}\r\n\r\n/* DatePicker component. Show a month selector and a day calendar to select a specific date.\r\n * @alpha\r\n /\r\nexport function DatePicker(props: DatePickerProps) {\r\n const previousMonthLabel = React.useRef(UiComponents.localization.getLocalizedString(\"UiComponents:datepicker.previousMonth\"));\r\n const nextMonthLabel = React.useRef(UiComponents.localization.getLocalizedString(\"UiComponents:datepicker.nextMonth\"));\r\n const monthsLong = React.useRef([\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.january\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.february\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.march\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.april\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.may\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.june\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.july\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.august\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.september\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.october\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.november\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.december\"),\r\n ]);\r\n\r\n const daysLong = React.useRef([\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.sunday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.monday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.tuesday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.wednesday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.thursday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.friday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.saturday\"),\r\n ]);\r\n\r\n const daysShort = React.useRef([\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.sunday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.monday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.tuesday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.wednesday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.thursday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.friday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.saturday\"),\r\n ]);\r\n\r\n const [selectedDay, setSelectedDay] = React.useState(new Date(props.selected.getTime()));\r\n const [displayedMonthIndex, setDisplayedMonthIndex] = React.useState(selectedDay.getMonth());\r\n const [displayedYear, setDisplayedYear] = React.useState(selectedDay.getFullYear());\r\n const [focusedDay, setFocusedDay] = React.useState(selectedDay);\r\n const days = React.useMemo(() => {\r\n const msFirstDayOfMonth = new Date(displayedYear, displayedMonthIndex, 1).getTime();\r\n let offsetToFirst = new Date(msFirstDayOfMonth).getDay();\r\n if (0 === offsetToFirst)\r\n offsetToFirst = 7;\r\n\r\n const daysInMonth: Date[] = [];\r\n // generate 6 weeks of dates\r\n for (let i = 0; i < 42; i++) {\r\n const adjustedDay = 1 + i - offsetToFirst;\r\n daysInMonth.push(new Date(displayedYear, displayedMonthIndex, adjustedDay));\r\n }\r\n return daysInMonth;\r\n }, [displayedMonthIndex, displayedYear]);\r\n\r\n const weeks = React.useMemo(() => {\r\n const weeksInMonth = [];\r\n const weekCount = Math.ceil(days.length / 7);\r\n for (let i = 0; i < weekCount; i++) {\r\n weeksInMonth.push(days.slice(i 7, (i + 1) * 7));\r\n }\r\n return weeksInMonth;\r\n }, [days]);\r\n\r\n const setMonthAndYear = React.useCallback((newMonth: number, newYear: number) => {\r\n setDisplayedMonthIndex(newMonth);\r\n setDisplayedYear(newYear);\r\n if (selectedDay.getFullYear() === newYear && selectedDay.getMonth() === newMonth) {\r\n setFocusedDay(new Date(selectedDay.getTime()));\r\n } else {\r\n const newFocusDay = new Date(focusedDay.getTime());\r\n newFocusDay.setFullYear(newYear, newMonth, 1);\r\n setFocusedDay(newFocusDay);\r\n }\r\n }, [focusedDay, selectedDay]);\r\n\r\n const handleMoveToPreviousMonth = React.useCallback(() => {\r\n const newMonth = displayedMonthIndex !== 0 ? displayedMonthIndex - 1 : 11;\r\n const newYear = displayedMonthIndex !== 0 ? displayedYear : displayedYear - 1;\r\n setMonthAndYear(newMonth, newYear);\r\n }, [displayedMonthIndex, displayedYear, setMonthAndYear]);\r\n\r\n const handleMoveToNextMonth = React.useCallback(() => {\r\n const newMonth = displayedMonthIndex !== 11 ? displayedMonthIndex + 1 : 0;\r\n const newYear = displayedMonthIndex !== 11 ? displayedYear : displayedYear + 1;\r\n setMonthAndYear(newMonth, newYear);\r\n }, [displayedMonthIndex, displayedYear, setMonthAndYear]);\r\n\r\n // when invoked, it will return another function which can be used for the onClick React listener.\r\n const handleOnDayChange = React.useCallback((day: Date) => () => {\r\n setSelectedDay(day);\r\n setFocusedDay(day);\r\n props.onDateChange && props.onDateChange(day);\r\n }, [props]);\r\n\r\n const handleCalendarKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLUListElement>) => {\r\n if (event.key === SpecialKey.ArrowDown) {\r\n const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));\r\n if ((focusedDayIndex + 7) > 41)\r\n setFocusedDay(days[focusedDayIndex % 7]);\r\n else\r\n setFocusedDay(days[focusedDayIndex + 7]);\r\n event.preventDefault();\r\n }\r\n if (event.key === SpecialKey.ArrowUp) {\r\n const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));\r\n if ((focusedDayIndex - 7) < 0)\r\n setFocusedDay(days[(focusedDayIndex % 7) + 35]);\r\n else\r\n setFocusedDay(days[focusedDayIndex - 7]);\r\n event.preventDefault();\r\n }\r\n if (event.key === SpecialKey.ArrowLeft) {\r\n const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));\r\n // istanbul ignore else\r\n if ((focusedDayIndex - 1) >= 0)\r\n setFocusedDay(days[focusedDayIndex - 1]);\r\n event.preventDefault();\r\n }\r\n if (event.key === SpecialKey.ArrowRight) {\r\n const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));\r\n // istanbul ignore else\r\n if ((focusedDayIndex + 1) <= 41)\r\n setFocusedDay(days[focusedDayIndex + 1]);\r\n event.preventDefault();\r\n }\r\n if (event.key === SpecialKey.Enter \|\| event.key === SpecialKey.Space) {\r\n handleOnDayChange(focusedDay)(); // NB: immediately call returned handler function\r\n event.preventDefault();\r\n }\r\n }, [days, focusedDay, handleOnDayChange]);\r\n\r\n const previousButtonClass = classnames(\"components-previous-month\", props.showFocusOutline && \"showFocusOutline\");\r\n const nextButtonClass = classnames(\"components-next-month\", props.showFocusOutline && \"showFocusOutline\");\r\n const calendarClass = classnames(\"components-date-picker-calendar-month\", props.showFocusOutline && \"showFocusOutline\");\r\n\r\n return (\r\n <div className=\"components-date-picker-calendar\">\r\n <div className=\"components-date-picker-calendar-header-months\">\r\n <button className={previousButtonClass} title={previousMonthLabel.current} onClick={handleMoveToPreviousMonth}>\r\n <WebFontIcon iconName={\"icon-chevron-left\"} />\r\n </button>\r\n <span className=\"components-month-year\">{monthsLong.current[displayedMonthIndex]} {displayedYear}</span>\r\n <button className={nextButtonClass} title={nextMonthLabel.current} onClick={handleMoveToNextMonth}>\r\n <WebFontIcon iconName={\"icon-chevron-right\"} />\r\n </button>\r\n </div>\r\n <div className=\"components-date-picker-calendar-header-weekdays\">\r\n {[0, 1, 2, 3, 4, 5, 6].map((dayOfWeek) =>\r\n <div key={`day-${dayOfWeek}`} className=\"components-date-picker-calendar-header-day-short\"\r\n title={daysLong.current[dayOfWeek]}><span>{daysShort.current[dayOfWeek]}</span></div>)}\r\n </div>\r\n <ul tabIndex={0} onKeyDown={handleCalendarKeyDown} data-testid=\"components-date-picker-calendar-list\" className={calendarClass} role=\"listbox\">\r\n {weeks.map((weekdays, weekIndex) => (\r\n <React.Fragment key={`week-${weekIndex}`}>\r\n {weekdays.map((day: Date, dayIndex: number) => {\r\n const isActive = selectedDay && day && isSameDay(selectedDay, day);\r\n const isFocused = focusedDay && day && isSameDay(focusedDay, day) && props.showFocusOutline;\r\n const isCurrentMonth = day.getMonth() === displayedMonthIndex;\r\n const classNames = classnames(\"components-date-picker-calendar-day\", isActive && \"selected\", !isCurrentMonth && \"notCurrentMonth\", isFocused && \"focused\");\r\n const dateValue = day.getDate();\r\n return (\r\n /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */\r\n <li className={classNames} key={`${displayedYear}.${displayedMonthIndex}.day.${dayIndex}`}\r\n onClick={handleOnDayChange(day)} role=\"option\" aria-selected={isActive} data-value={day.getTime()}>\r\n <span>{dateValue}</span>\r\n </li>\r\n );\r\n })}\r\n </React.Fragment>)\r\n )}\r\n </ul>\r\n </div>\r\n );\r\n}\r\n"]}
1	+ {"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n--------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module Date\n /\n\nimport as React from \"react\";\nimport classnames from \"classnames\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport { UiComponents } from \"../UiComponents\";\nimport { Icon } from \"@itwin/core-react\";\nimport { SvgChevronLeft, SvgChevronRight } from \"@itwin/itwinui-icons-react\";\n\nimport \"./DatePicker.scss\";\n\nfunction isSameDay(a: Date, b: Date) {\n return (\n a &&\n b &&\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate()\n );\n}\n\n/*\n Props for [[DatePicker]] component.\n * @alpha\n /\nexport interface DatePickerProps {\n /* defines both date and time /\n selected: Date;\n /* function to call when date or time has changed /\n onDateChange?: (day: Date) => void;\n /* show focus outlines, useful for keyboard navigation /\n showFocusOutline?: boolean;\n}\n\n/* DatePicker component. Show a month selector and a day calendar to select a specific date.\n * @alpha\n /\nexport function DatePicker(props: DatePickerProps) {\n const previousMonthLabel = React.useRef(UiComponents.localization.getLocalizedString(\"UiComponents:datepicker.previousMonth\"));\n const nextMonthLabel = React.useRef(UiComponents.localization.getLocalizedString(\"UiComponents:datepicker.nextMonth\"));\n const monthsLong = React.useRef([\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.january\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.february\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.march\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.april\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.may\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.june\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.july\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.august\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.september\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.october\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.november\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.december\"),\n ]);\n\n const daysLong = React.useRef([\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.sunday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.monday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.tuesday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.wednesday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.thursday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.friday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.saturday\"),\n ]);\n\n const daysShort = React.useRef([\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.sunday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.monday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.tuesday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.wednesday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.thursday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.friday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.saturday\"),\n ]);\n\n const [selectedDay, setSelectedDay] = React.useState(new Date(props.selected.getTime()));\n const [displayedMonthIndex, setDisplayedMonthIndex] = React.useState(selectedDay.getMonth());\n const [displayedYear, setDisplayedYear] = React.useState(selectedDay.getFullYear());\n const [focusedDay, setFocusedDay] = React.useState(selectedDay);\n React.useEffect(() => {\n const newSelectedDay = new Date(props.selected);\n setSelectedDay(new Date(props.selected));\n setDisplayedMonthIndex(newSelectedDay.getMonth());\n setDisplayedYear(newSelectedDay.getFullYear());\n setFocusedDay(newSelectedDay);\n }, [props.selected]);\n const days = React.useMemo(() => {\n const msFirstDayOfMonth = new Date(displayedYear, displayedMonthIndex, 1).getTime();\n let offsetToFirst = new Date(msFirstDayOfMonth).getDay();\n if (0 === offsetToFirst)\n offsetToFirst = 7;\n\n const daysInMonth: Date[] = [];\n // generate 6 weeks of dates\n for (let i = 0; i < 42; i++) {\n const adjustedDay = 1 + i - offsetToFirst;\n daysInMonth.push(new Date(displayedYear, displayedMonthIndex, adjustedDay));\n }\n return daysInMonth;\n }, [displayedMonthIndex, displayedYear]);\n\n const weeks = React.useMemo(() => {\n const weeksInMonth = [];\n const weekCount = Math.ceil(days.length / 7);\n for (let i = 0; i < weekCount; i++) {\n weeksInMonth.push(days.slice(i 7, (i + 1) * 7));\n }\n return weeksInMonth;\n }, [days]);\n\n const setMonthAndYear = React.useCallback((newMonth: number, newYear: number) => {\n setDisplayedMonthIndex(newMonth);\n setDisplayedYear(newYear);\n if (selectedDay.getFullYear() === newYear && selectedDay.getMonth() === newMonth) {\n setFocusedDay(new Date(selectedDay.getTime()));\n } else {\n const newFocusDay = new Date(focusedDay.getTime());\n newFocusDay.setFullYear(newYear, newMonth, 1);\n setFocusedDay(newFocusDay);\n }\n }, [focusedDay, selectedDay]);\n\n const handleMoveToPreviousMonth = React.useCallback(() => {\n const newMonth = displayedMonthIndex !== 0 ? displayedMonthIndex - 1 : 11;\n const newYear = displayedMonthIndex !== 0 ? displayedYear : displayedYear - 1;\n setMonthAndYear(newMonth, newYear);\n }, [displayedMonthIndex, displayedYear, setMonthAndYear]);\n\n const handleMoveToNextMonth = React.useCallback(() => {\n const newMonth = displayedMonthIndex !== 11 ? displayedMonthIndex + 1 : 0;\n const newYear = displayedMonthIndex !== 11 ? displayedYear : displayedYear + 1;\n setMonthAndYear(newMonth, newYear);\n }, [displayedMonthIndex, displayedYear, setMonthAndYear]);\n\n // when invoked, it will return another function which can be used for the onClick React listener.\n const handleOnDayChange = React.useCallback((day: Date) => () => {\n setSelectedDay(day);\n setFocusedDay(day);\n props.onDateChange && props.onDateChange(day);\n }, [props]);\n\n const handleCalendarKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLUListElement>) => {\n if (event.key === SpecialKey.ArrowDown) {\n const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));\n if ((focusedDayIndex + 7) > 41)\n setFocusedDay(days[focusedDayIndex % 7]);\n else\n setFocusedDay(days[focusedDayIndex + 7]);\n event.preventDefault();\n }\n if (event.key === SpecialKey.ArrowUp) {\n const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));\n if ((focusedDayIndex - 7) < 0)\n setFocusedDay(days[(focusedDayIndex % 7) + 35]);\n else\n setFocusedDay(days[focusedDayIndex - 7]);\n event.preventDefault();\n }\n if (event.key === SpecialKey.ArrowLeft) {\n const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));\n // istanbul ignore else\n if ((focusedDayIndex - 1) >= 0)\n setFocusedDay(days[focusedDayIndex - 1]);\n event.preventDefault();\n }\n if (event.key === SpecialKey.ArrowRight) {\n const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));\n // istanbul ignore else\n if ((focusedDayIndex + 1) <= 41)\n setFocusedDay(days[focusedDayIndex + 1]);\n event.preventDefault();\n }\n if (event.key === SpecialKey.Enter \|\| event.key === SpecialKey.Space) {\n handleOnDayChange(focusedDay)(); // NB: immediately call returned handler function\n event.preventDefault();\n }\n }, [days, focusedDay, handleOnDayChange]);\n\n const previousButtonClass = classnames(\"components-previous-month\", props.showFocusOutline && \"showFocusOutline\");\n const nextButtonClass = classnames(\"components-next-month\", props.showFocusOutline && \"showFocusOutline\");\n const calendarClass = classnames(\"components-date-picker-calendar-month\", props.showFocusOutline && \"showFocusOutline\");\n\n return (\n <div className=\"components-date-picker-calendar\">\n <div className=\"components-date-picker-calendar-header-months\">\n <button className={previousButtonClass} title={previousMonthLabel.current} onClick={handleMoveToPreviousMonth}>\n <Icon iconSpec={<SvgChevronLeft />} />\n </button>\n <span className=\"components-month-year\">{monthsLong.current[displayedMonthIndex]} {displayedYear}</span>\n <button className={nextButtonClass} title={nextMonthLabel.current} onClick={handleMoveToNextMonth}>\n <Icon iconSpec={<SvgChevronRight />} />\n </button>\n </div>\n <div className=\"components-date-picker-calendar-header-weekdays\">\n {[0, 1, 2, 3, 4, 5, 6].map((dayOfWeek) =>\n <div key={`day-${dayOfWeek}`} className=\"components-date-picker-calendar-header-day-short\"\n title={daysLong.current[dayOfWeek]}><span>{daysShort.current[dayOfWeek]}</span></div>)}\n </div>\n <ul tabIndex={0} onKeyDown={handleCalendarKeyDown} data-testid=\"components-date-picker-calendar-list\" className={calendarClass} role=\"listbox\">\n {weeks.map((weekdays, weekIndex) => (\n <React.Fragment key={`week-${weekIndex}`}>\n {weekdays.map((day: Date, dayIndex: number) => {\n const isActive = selectedDay && day && isSameDay(selectedDay, day);\n const isFocused = focusedDay && day && isSameDay(focusedDay, day) && props.showFocusOutline;\n const isCurrentMonth = day.getMonth() === displayedMonthIndex;\n const classNames = classnames(\"components-date-picker-calendar-day\", isActive && \"selected\", !isCurrentMonth && \"notCurrentMonth\", isFocused && \"focused\");\n const dateValue = day.getDate();\n return (\n /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */\n <li className={classNames} key={`${displayedYear}.${displayedMonthIndex}.day.${dayIndex}`}\n onClick={handleOnDayChange(day)} role=\"option\" aria-selected={isActive} data-value={day.getTime()}>\n <span>{dateValue}</span>\n </li>\n );\n })}\n </React.Fragment>)\n )}\n </ul>\n </div>\n );\n}\n"]}