@itwin/components-react 4.1.0 → 4.2.0

package/lib/cjs/components-react/datepicker/DateField.scss

@@ -1,23 +1,23 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
-
-.components-date-input {
-  width: auto;
-
-  &.components-date-has-error {
-    color: var(--iui-color-text-negative);
-  }
-
-  &.iui-input {
-    padding: $uicore-iui-input-padding;
-  }
-
-  &.iui-input[disabled] {
-    color: var(--buic-foreground-body);
-    opacity: 0.65;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
+
+.components-date-input {
+  width: auto;
+
+  &.components-date-has-error {
+    color: var(--iui-color-text-negative);
+  }
+
+  &.iui-input {
+    padding: $uicore-iui-input-padding;
+  }
+
+  &.iui-input[disabled] {
+    color: var(--buic-foreground-body);
+    opacity: 0.65;
+  }
+}

package/lib/cjs/components-react/datepicker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DatePicker.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AASH,OAAO,mBAAmB,CAAC;AAY3B;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,iCAAiC;IACjC,QAAQ,EAAE,IAAI,CAAC;IACf,qDAAqD;IACrD,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAuLhD"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DatePicker.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AASH,OAAO,mBAAmB,CAAC;AAY3B;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,iCAAiC;IACjC,QAAQ,EAAE,IAAI,CAAC;IACf,qDAAqD;IACrD,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA4ThD"}

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

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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
  */
@@ -121,7 +121,8 @@ function DatePicker(props) {
     const setMonthAndYear = React.useCallback((newMonth, newYear) => {
         setDisplayedMonthIndex(newMonth);
         setDisplayedYear(newYear);
-        if (selectedDay.getFullYear() === newYear && selectedDay.getMonth() === newMonth) {
+        if (selectedDay.getFullYear() === newYear &&
+            selectedDay.getMonth() === newMonth) {
             setFocusedDay(new Date(selectedDay.getTime()));
         }
         else {
@@ -149,7 +150,7 @@ function DatePicker(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)
+            if (focusedDayIndex + 7 > 41)
                 setFocusedDay(days[focusedDayIndex % 7]);
             else
                 setFocusedDay(days[focusedDayIndex + 7]);
@@ -157,7 +158,7 @@ function DatePicker(props) {
         }
         if (event.key === appui_abstract_1.SpecialKey.ArrowUp) {
             const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
-            if ((focusedDayIndex - 7) < 0)
+            if (focusedDayIndex - 7 < 0)
                 setFocusedDay(days[(focusedDayIndex % 7) + 35]);
             else
                 setFocusedDay(days[focusedDayIndex - 7]);
@@ -166,14 +167,14 @@ function DatePicker(props) {
         if (event.key === appui_abstract_1.SpecialKey.ArrowLeft) {
             const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
             // istanbul ignore else
-            if ((focusedDayIndex - 1) >= 0)
+            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)
+            if (focusedDayIndex + 1 <= 41)
                 setFocusedDay(days[focusedDayIndex + 1]);
             event.preventDefault();
         }
@@ -195,11 +196,14 @@ function DatePicker(props) {
                 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("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 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();

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

@@ -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,kDAA+C;AAC/C,kDAAyC;AACzC,oEAA6E;AAE7E,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,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,cAAc,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAChD,cAAc,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;QACzC,sBAAsB,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC;QAClD,gBAAgB,CAAC,cAAc,CAAC,WAAW,EAAE,CAAC,CAAC;QAC/C,aAAa,CAAC,cAAc,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IACrB,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,iBAAI,IAAC,QAAQ,EAAE,oBAAC,oCAAc,OAAG,GAAI,CAC/B;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,iBAAI,IAAC,QAAQ,EAAE,oBAAC,qCAAe,OAAG,GAAI,CAChC,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;AAvLD,gCAuLC","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 { UiComponents } from \"../UiComponents\";\r\nimport { Icon } from \"@itwin/core-react\";\r\nimport { SvgChevronLeft, SvgChevronRight } from \"@itwin/itwinui-icons-react\";\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  React.useEffect(() => {\r\n    const newSelectedDay = new Date(props.selected);\r\n    setSelectedDay(new Date(props.selected));\r\n    setDisplayedMonthIndex(newSelectedDay.getMonth());\r\n    setDisplayedYear(newSelectedDay.getFullYear());\r\n    setFocusedDay(newSelectedDay);\r\n  }, [props.selected]);\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          <Icon iconSpec={<SvgChevronLeft />} />\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          <Icon iconSpec={<SvgChevronRight />} />\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"]}
+{"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(\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:datepicker.previousMonth\"\n    )\n  );\n  const nextMonthLabel = React.useRef(\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:datepicker.nextMonth\"\n    )\n  );\n  const monthsLong = React.useRef([\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:month.long.january\"\n    ),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:month.long.february\"\n    ),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:month.long.march\"\n    ),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:month.long.april\"\n    ),\n    UiComponents.localization.getLocalizedString(\"UiComponents:month.long.may\"),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:month.long.june\"\n    ),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:month.long.july\"\n    ),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:month.long.august\"\n    ),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:month.long.september\"\n    ),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:month.long.october\"\n    ),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:month.long.november\"\n    ),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:month.long.december\"\n    ),\n  ]);\n\n  const daysLong = React.useRef([\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:days.long.sunday\"\n    ),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:days.long.monday\"\n    ),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:days.long.tuesday\"\n    ),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:days.long.wednesday\"\n    ),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:days.long.thursday\"\n    ),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:days.long.friday\"\n    ),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:days.long.saturday\"\n    ),\n  ]);\n\n  const daysShort = React.useRef([\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:days.short.sunday\"\n    ),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:days.short.monday\"\n    ),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:days.short.tuesday\"\n    ),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:days.short.wednesday\"\n    ),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:days.short.thursday\"\n    ),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:days.short.friday\"\n    ),\n    UiComponents.localization.getLocalizedString(\n      \"UiComponents:days.short.saturday\"\n    ),\n  ]);\n\n  const [selectedDay, setSelectedDay] = React.useState(\n    new Date(props.selected.getTime())\n  );\n  const [displayedMonthIndex, setDisplayedMonthIndex] = React.useState(\n    selectedDay.getMonth()\n  );\n  const [displayedYear, setDisplayedYear] = React.useState(\n    selectedDay.getFullYear()\n  );\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(\n      displayedYear,\n      displayedMonthIndex,\n      1\n    ).getTime();\n    let offsetToFirst = new Date(msFirstDayOfMonth).getDay();\n    if (0 === offsetToFirst) 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(\n        new Date(displayedYear, displayedMonthIndex, adjustedDay)\n      );\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(\n    (newMonth: number, newYear: number) => {\n      setDisplayedMonthIndex(newMonth);\n      setDisplayedYear(newYear);\n      if (\n        selectedDay.getFullYear() === newYear &&\n        selectedDay.getMonth() === newMonth\n      ) {\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    },\n    [focusedDay, selectedDay]\n  );\n\n  const handleMoveToPreviousMonth = React.useCallback(() => {\n    const newMonth = displayedMonthIndex !== 0 ? displayedMonthIndex - 1 : 11;\n    const newYear =\n      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 =\n      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(\n    (day: Date) => () => {\n      setSelectedDay(day);\n      setFocusedDay(day);\n      props.onDateChange && props.onDateChange(day);\n    },\n    [props]\n  );\n\n  const handleCalendarKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLUListElement>) => {\n      if (event.key === SpecialKey.ArrowDown) {\n        const focusedDayIndex = days.findIndex((day) =>\n          isSameDay(day, focusedDay)\n        );\n        if (focusedDayIndex + 7 > 41) setFocusedDay(days[focusedDayIndex % 7]);\n        else setFocusedDay(days[focusedDayIndex + 7]);\n        event.preventDefault();\n      }\n      if (event.key === SpecialKey.ArrowUp) {\n        const focusedDayIndex = days.findIndex((day) =>\n          isSameDay(day, focusedDay)\n        );\n        if (focusedDayIndex - 7 < 0)\n          setFocusedDay(days[(focusedDayIndex % 7) + 35]);\n        else setFocusedDay(days[focusedDayIndex - 7]);\n        event.preventDefault();\n      }\n      if (event.key === SpecialKey.ArrowLeft) {\n        const focusedDayIndex = days.findIndex((day) =>\n          isSameDay(day, focusedDay)\n        );\n        // istanbul ignore else\n        if (focusedDayIndex - 1 >= 0) setFocusedDay(days[focusedDayIndex - 1]);\n        event.preventDefault();\n      }\n      if (event.key === SpecialKey.ArrowRight) {\n        const focusedDayIndex = days.findIndex((day) =>\n          isSameDay(day, focusedDay)\n        );\n        // istanbul ignore else\n        if (focusedDayIndex + 1 <= 41) 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    },\n    [days, focusedDay, handleOnDayChange]\n  );\n\n  const previousButtonClass = classnames(\n    \"components-previous-month\",\n    props.showFocusOutline && \"showFocusOutline\"\n  );\n  const nextButtonClass = classnames(\n    \"components-next-month\",\n    props.showFocusOutline && \"showFocusOutline\"\n  );\n  const calendarClass = classnames(\n    \"components-date-picker-calendar-month\",\n    props.showFocusOutline && \"showFocusOutline\"\n  );\n\n  return (\n    <div className=\"components-date-picker-calendar\">\n      <div className=\"components-date-picker-calendar-header-months\">\n        <button\n          className={previousButtonClass}\n          title={previousMonthLabel.current}\n          onClick={handleMoveToPreviousMonth}\n        >\n          <Icon iconSpec={<SvgChevronLeft />} />\n        </button>\n        <span className=\"components-month-year\">\n          {monthsLong.current[displayedMonthIndex]} {displayedYear}\n        </span>\n        <button\n          className={nextButtonClass}\n          title={nextMonthLabel.current}\n          onClick={handleMoveToNextMonth}\n        >\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\n            key={`day-${dayOfWeek}`}\n            className=\"components-date-picker-calendar-header-day-short\"\n            title={daysLong.current[dayOfWeek]}\n          >\n            <span>{daysShort.current[dayOfWeek]}</span>\n          </div>\n        ))}\n      </div>\n      <ul\n        tabIndex={0}\n        onKeyDown={handleCalendarKeyDown}\n        data-testid=\"components-date-picker-calendar-list\"\n        className={calendarClass}\n        role=\"listbox\"\n      >\n        {weeks.map((weekdays, weekIndex) => (\n          <React.Fragment key={`week-${weekIndex}`}>\n            {weekdays.map((day: Date, dayIndex: number) => {\n              const isActive =\n                selectedDay && day && isSameDay(selectedDay, day);\n              const isFocused =\n                focusedDay &&\n                day &&\n                isSameDay(focusedDay, day) &&\n                props.showFocusOutline;\n              const isCurrentMonth = day.getMonth() === displayedMonthIndex;\n              const classNames = classnames(\n                \"components-date-picker-calendar-day\",\n                isActive && \"selected\",\n                !isCurrentMonth && \"notCurrentMonth\",\n                isFocused && \"focused\"\n              );\n              const dateValue = day.getDate();\n              return (\n                /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */\n                <li\n                  className={classNames}\n                  key={`${displayedYear}.${displayedMonthIndex}.day.${dayIndex}`}\n                  onClick={handleOnDayChange(day)}\n                  role=\"option\"\n                  aria-selected={isActive}\n                  data-value={day.getTime()}\n                >\n                  <span>{dateValue}</span>\n                </li>\n              );\n            })}\n          </React.Fragment>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"]}

package/lib/cjs/components-react/datepicker/DatePicker.scss

@@ -1,176 +1,176 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/core-react/lib/cjs/core-react/style/opacity";
-@import "~@itwin/core-react/lib/cjs/core-react/icons/variables";
-
-$date-picker-m: 16px;
-$date-picker-icons-color-actionable: rgba(
-  $buic-foreground-body,
-  $uicore-opacity-2
-);
-$date-picker-icons-color-actionable-hover: rgba(
-  $buic-foreground-body,
-  $uicore-opacity-1
-);
-$date-picker-outside-month-color: var(--iui-color-text-disabled);
-$outline-size: 2px;
-
-.components-date-picker-calendar {
-  border-radius: var(--iui-border-radius-1) var(--iui-border-radius-1) 0 0;
-  background-color: $buic-background-control;
-  color: var(--iui-color-text);
-  font-size: 14px;
-
-  * {
-    box-sizing: border-box;
-  }
-
-  .components-date-picker-calendar-header-months {
-    display: inline-flex;
-    width: calc(100% - 12px);
-    align-items: center;
-    justify-content: space-between;
-    padding: 6px;
-
-    button.components-previous-month,
-    button.components-next-month {
-      background-color: $buic-background-control;
-      border: none;
-      cursor: pointer;
-      padding: 5px;
-      font-size: var(--iui-font-size-2);
-      user-select: none;
-      color: $date-picker-icons-color-actionable;
-
-      &:focus {
-        outline: 0px;
-
-        &.showFocusOutline {
-          outline: 0px;
-          border: 0px solid var(--iui-color-border-foreground);
-          border-radius: var(--iui-border-radius-1);
-          border-color: var(--buic-foreground-focus-border);
-          box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
-            var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
-        }
-      }
-
-      &:hover {
-        color: var(--iui-color-text-accent);
-      }
-    }
-
-    .components-next-month {
-      text-align: right;
-    }
-
-    .components-month-year {
-      flex: 2;
-      font-weight: var(--iui-font-weight-bold);
-      text-align: center;
-    }
-  }
-
-  .components-date-picker-calendar-header-weekdays {
-    display: grid;
-    background-color: $buic-background-2;
-    padding-inline-start: 8px;
-    padding-inline-end: 8px;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-    align-items: center;
-
-    .components-date-picker-calendar-header-day-short {
-      text-align: center;
-      text-decoration: none;
-      font-weight: var(--iui-font-weight-bold);
-      height: 32px;
-      width: 32px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  ul.components-date-picker-calendar-month {
-    margin: 1px;
-    padding: 4px 5px;
-    list-style: none;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-    text-align: center;
-    align-items: center;
-    align-self: center;
-
-    &:focus {
-      outline: 0px;
-
-      &.showFocusOutline {
-        border: 0px solid var(--iui-color-border-foreground);
-        border-radius: var(--iui-border-radius-1);
-        border-color: var(--buic-foreground-focus-border);
-        box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
-          var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
-
-        .components-date-picker-calendar-day.focused {
-          outline: 0px;
-          border: 1px solid var(--iui-color-border-foreground);
-          border-radius: var(--iui-border-radius-1);
-          border-color: var(--buic-foreground-focus-border);
-          box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
-            var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
-          z-index: 1;
-        }
-      }
-    }
-
-    .components-date-picker-calendar-day {
-      box-sizing: border-box;
-      text-align: center;
-      white-space: nowrap;
-      cursor: pointer;
-      height: 32px;
-      width: 32px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-
-      &:focus {
-        outline: 0px;
-      }
-
-      &:hover:not(.selected) {
-        background-color: $buic-row-hover;
-        border-radius: var(--iui-border-radius-1);
-        font-weight: var(--iui-font-weight-semibold);
-      }
-
-      &.selected {
-        background-color: $buic-background-primary;
-        color: var(--iui-color-white);
-        font-weight: var(--iui-font-weight-semibold);
-        border-radius: var(--iui-border-radius-1);
-
-        &:hover {
-          background-color: $buic-row-hover;
-          color: var(--iui-color-text);
-        }
-      }
-
-      &.today {
-        background-color: rgba($buic-foreground-body, $uicore-opacity-6);
-        font-weight: var(--iui-font-weight-semibold);
-        border-radius: 50%;
-      }
-
-      &.notCurrentMonth {
-        &:not(.selected) {
-          color: $date-picker-outside-month-color;
-          font-weight: var(--iui-font-weight-light);
-        }
-      }
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@import "~@itwin/core-react/lib/cjs/core-react/style/opacity";
+@import "~@itwin/core-react/lib/cjs/core-react/icons/variables";
+
+$date-picker-m: 16px;
+$date-picker-icons-color-actionable: rgba(
+  $buic-foreground-body,
+  $uicore-opacity-2
+);
+$date-picker-icons-color-actionable-hover: rgba(
+  $buic-foreground-body,
+  $uicore-opacity-1
+);
+$date-picker-outside-month-color: var(--iui-color-text-disabled);
+$outline-size: 2px;
+
+.components-date-picker-calendar {
+  border-radius: var(--iui-border-radius-1) var(--iui-border-radius-1) 0 0;
+  background-color: $buic-background-control;
+  color: var(--iui-color-text);
+  font-size: 14px;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .components-date-picker-calendar-header-months {
+    display: inline-flex;
+    width: calc(100% - 12px);
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px;
+
+    button.components-previous-month,
+    button.components-next-month {
+      background-color: $buic-background-control;
+      border: none;
+      cursor: pointer;
+      padding: 5px;
+      font-size: var(--iui-font-size-2);
+      user-select: none;
+      color: $date-picker-icons-color-actionable;
+
+      &:focus {
+        outline: 0px;
+
+        &.showFocusOutline {
+          outline: 0px;
+          border: 0px solid var(--iui-color-border-foreground);
+          border-radius: var(--iui-border-radius-1);
+          border-color: var(--buic-foreground-focus-border);
+          box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
+            var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
+        }
+      }
+
+      &:hover {
+        color: var(--iui-color-text-accent);
+      }
+    }
+
+    .components-next-month {
+      text-align: right;
+    }
+
+    .components-month-year {
+      flex: 2;
+      font-weight: var(--iui-font-weight-bold);
+      text-align: center;
+    }
+  }
+
+  .components-date-picker-calendar-header-weekdays {
+    display: grid;
+    background-color: $buic-background-2;
+    padding-inline-start: 8px;
+    padding-inline-end: 8px;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    align-items: center;
+
+    .components-date-picker-calendar-header-day-short {
+      text-align: center;
+      text-decoration: none;
+      font-weight: var(--iui-font-weight-bold);
+      height: 32px;
+      width: 32px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  ul.components-date-picker-calendar-month {
+    margin: 1px;
+    padding: 4px 5px;
+    list-style: none;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    text-align: center;
+    align-items: center;
+    align-self: center;
+
+    &:focus {
+      outline: 0px;
+
+      &.showFocusOutline {
+        border: 0px solid var(--iui-color-border-foreground);
+        border-radius: var(--iui-border-radius-1);
+        border-color: var(--buic-foreground-focus-border);
+        box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
+          var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
+
+        .components-date-picker-calendar-day.focused {
+          outline: 0px;
+          border: 1px solid var(--iui-color-border-foreground);
+          border-radius: var(--iui-border-radius-1);
+          border-color: var(--buic-foreground-focus-border);
+          box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
+            var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
+          z-index: 1;
+        }
+      }
+    }
+
+    .components-date-picker-calendar-day {
+      box-sizing: border-box;
+      text-align: center;
+      white-space: nowrap;
+      cursor: pointer;
+      height: 32px;
+      width: 32px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      &:focus {
+        outline: 0px;
+      }
+
+      &:hover:not(.selected) {
+        background-color: $buic-row-hover;
+        border-radius: var(--iui-border-radius-1);
+        font-weight: var(--iui-font-weight-semibold);
+      }
+
+      &.selected {
+        background-color: $buic-background-primary;
+        color: var(--iui-color-white);
+        font-weight: var(--iui-font-weight-semibold);
+        border-radius: var(--iui-border-radius-1);
+
+        &:hover {
+          background-color: $buic-row-hover;
+          color: var(--iui-color-text);
+        }
+      }
+
+      &.today {
+        background-color: rgba($buic-foreground-body, $uicore-opacity-6);
+        font-weight: var(--iui-font-weight-semibold);
+        border-radius: 50%;
+      }
+
+      &.notCurrentMonth {
+        &:not(.selected) {
+          color: $date-picker-outside-month-color;
+          font-weight: var(--iui-font-weight-light);
+        }
+      }
+    }
+  }
+}

package/lib/cjs/components-react/datepicker/DatePickerPopupButton.d.ts

@@ -26,5 +26,5 @@ export interface DatePickerPopupButtonProps extends CommonProps {
 /** Component that displays a button used to pick a date and optionally a time.
  * @alpha
  * */
-export declare function DatePickerPopupButton({ displayEditField, timeDisplay, selected, onDateChange, dateFormatter, buttonToolTip, fieldStyle, fieldClassName, style }: DatePickerPopupButtonProps): JSX.Element;
+export declare function DatePickerPopupButton({ displayEditField, timeDisplay, selected, onDateChange, dateFormatter, buttonToolTip, fieldStyle, fieldClassName, style, }: DatePickerPopupButtonProps): JSX.Element;
 //# sourceMappingURL=DatePickerPopupButton.d.ts.map

package/lib/cjs/components-react/datepicker/DatePickerPopupButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerPopupButton.d.ts","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DatePickerPopupButton.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAExE,OAAO,KAAK,EAAE,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAQpD,OAAO,8BAA8B,CAAC;AAEtC;YACY;AACZ,MAAM,WAAW,0BAA2B,SAAQ,WAAW;IAC7D,6CAA6C;IAC7C,QAAQ,EAAE,IAAI,CAAC;IACf,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,yCAAyC;IACzC,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,uBAAuB;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yCAAyC;IACzC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAClC;AAED;;KAEK;AACL,wBAAgB,qBAAqB,CAAC,EAAE,gBAAgB,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAC1G,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,0BAA0B,eAkF/E"}
+{"version":3,"file":"DatePickerPopupButton.d.ts","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DatePickerPopupButton.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAExE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAQrD,OAAO,8BAA8B,CAAC;AAEtC;YACY;AACZ,MAAM,WAAW,0BAA2B,SAAQ,WAAW;IAC7D,6CAA6C;IAC7C,QAAQ,EAAE,IAAI,CAAC;IACf,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,yCAAyC;IACzC,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,uBAAuB;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yCAAyC;IACzC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAClC;AAED;;KAEK;AACL,wBAAgB,qBAAqB,CAAC,EACpC,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,aAAa,EACb,UAAU,EACV,cAAc,EACd,KAAK,GACN,EAAE,0BAA0B,eAoI5B"}