@itwin/components-react 4.0.0-dev.12 → 4.0.0-dev.14

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

@@ -1,183 +1,183 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import * as React from "react";
-import classnames from "classnames";
-import { SpecialKey } from "@itwin/appui-abstract";
-import { UiComponents } from "../UiComponents";
-import { Icon } from "@itwin/core-react";
-import { SvgChevronLeft, SvgChevronRight } from "@itwin/itwinui-icons-react";
-import "./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
- */
-export function DatePicker(props) {
-    const previousMonthLabel = React.useRef(UiComponents.localization.getLocalizedString("UiComponents:datepicker.previousMonth"));
-    const nextMonthLabel = React.useRef(UiComponents.localization.getLocalizedString("UiComponents:datepicker.nextMonth"));
-    const monthsLong = React.useRef([
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.january"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.february"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.march"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.april"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.may"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.june"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.july"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.august"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.september"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.october"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.november"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.december"),
-    ]);
-    const daysLong = React.useRef([
-        UiComponents.localization.getLocalizedString("UiComponents:days.long.sunday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.long.monday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.long.tuesday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.long.wednesday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.long.thursday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.long.friday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.long.saturday"),
-    ]);
-    const daysShort = React.useRef([
-        UiComponents.localization.getLocalizedString("UiComponents:days.short.sunday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.short.monday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.short.tuesday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.short.wednesday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.short.thursday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.short.friday"),
-        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 === 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 === 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 === 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 === 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 === SpecialKey.Enter || event.key === SpecialKey.Space) {
-            handleOnDayChange(focusedDay)(); // NB: immediately call returned handler function
-            event.preventDefault();
-        }
-    }, [days, focusedDay, handleOnDayChange]);
-    const previousButtonClass = classnames("components-previous-month", props.showFocusOutline && "showFocusOutline");
-    const nextButtonClass = classnames("components-next-month", props.showFocusOutline && "showFocusOutline");
-    const calendarClass = classnames("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(Icon, { iconSpec: React.createElement(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(Icon, { iconSpec: React.createElement(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 = classnames("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)));
-        })))))));
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import * as React from "react";
+import classnames from "classnames";
+import { SpecialKey } from "@itwin/appui-abstract";
+import { UiComponents } from "../UiComponents";
+import { Icon } from "@itwin/core-react";
+import { SvgChevronLeft, SvgChevronRight } from "@itwin/itwinui-icons-react";
+import "./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
+ */
+export function DatePicker(props) {
+    const previousMonthLabel = React.useRef(UiComponents.localization.getLocalizedString("UiComponents:datepicker.previousMonth"));
+    const nextMonthLabel = React.useRef(UiComponents.localization.getLocalizedString("UiComponents:datepicker.nextMonth"));
+    const monthsLong = React.useRef([
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.january"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.february"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.march"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.april"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.may"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.june"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.july"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.august"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.september"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.october"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.november"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.december"),
+    ]);
+    const daysLong = React.useRef([
+        UiComponents.localization.getLocalizedString("UiComponents:days.long.sunday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.long.monday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.long.tuesday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.long.wednesday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.long.thursday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.long.friday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.long.saturday"),
+    ]);
+    const daysShort = React.useRef([
+        UiComponents.localization.getLocalizedString("UiComponents:days.short.sunday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.short.monday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.short.tuesday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.short.wednesday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.short.thursday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.short.friday"),
+        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 === 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 === 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 === 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 === 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 === SpecialKey.Enter || event.key === SpecialKey.Space) {
+            handleOnDayChange(focusedDay)(); // NB: immediately call returned handler function
+            event.preventDefault();
+        }
+    }, [days, focusedDay, handleOnDayChange]);
+    const previousButtonClass = classnames("components-previous-month", props.showFocusOutline && "showFocusOutline");
+    const nextButtonClass = classnames("components-next-month", props.showFocusOutline && "showFocusOutline");
+    const calendarClass = classnames("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(Icon, { iconSpec: React.createElement(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(Icon, { iconSpec: React.createElement(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 = classnames("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)));
+        })))))));
+}
 //# sourceMappingURL=DatePicker.js.map

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

@@ -5,7 +5,6 @@
 @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";
-@import "~@itwin/core-react/lib/cjs/core-react/button/variables";
 
 $date-picker-m: 16px;
 $date-picker-icons-color-actionable: rgba(

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

@@ -1,30 +1,30 @@
-/** @packageDocumentation
- * @module Date
- */
-import * as React from "react";
-import { DateFormatter, TimeDisplay } from "@itwin/appui-abstract";
-import { CommonProps } from "@itwin/core-react";
-import "./DatePickerPopupButton.scss";
-/** Props used by [[DatePickerPopupButton]] component.
- * @alpha */
-export interface DatePickerPopupButtonProps extends CommonProps {
-    /** Date to be shown as the selected date. */
-    selected: Date;
-    /** If true show the date (and optionally time) edit field next to button */
-    displayEditField?: boolean;
-    timeDisplay?: TimeDisplay;
-    /** Function called when Date changes. */
-    onDateChange?: (day: Date) => void;
-    /** Optional tooltip */
-    buttonToolTip?: string;
-    dateFormatter?: DateFormatter;
-    /** User defined class name for edit field. */
-    fieldClassName?: string;
-    /** User defined style for edit field. */
-    fieldStyle?: React.CSSProperties;
-}
-/** 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;
+/** @packageDocumentation
+ * @module Date
+ */
+import * as React from "react";
+import { DateFormatter, TimeDisplay } from "@itwin/appui-abstract";
+import { CommonProps } from "@itwin/core-react";
+import "./DatePickerPopupButton.scss";
+/** Props used by [[DatePickerPopupButton]] component.
+ * @alpha */
+export interface DatePickerPopupButtonProps extends CommonProps {
+    /** Date to be shown as the selected date. */
+    selected: Date;
+    /** If true show the date (and optionally time) edit field next to button */
+    displayEditField?: boolean;
+    timeDisplay?: TimeDisplay;
+    /** Function called when Date changes. */
+    onDateChange?: (day: Date) => void;
+    /** Optional tooltip */
+    buttonToolTip?: string;
+    dateFormatter?: DateFormatter;
+    /** User defined class name for edit field. */
+    fieldClassName?: string;
+    /** User defined style for edit field. */
+    fieldStyle?: React.CSSProperties;
+}
+/** 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;
 //# sourceMappingURL=DatePickerPopupButton.d.ts.map

package/lib/esm/components-react/datepicker/DatePickerPopupButton.js

@@ -1,77 +1,77 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import * as React from "react";
-import { RelativePosition, SpecialKey } from "@itwin/appui-abstract";
-import { Popup } from "@itwin/core-react";
-import { Text } from "@itwin/itwinui-react";
-import { UiComponents } from "../UiComponents";
-import { DatePicker } from "./DatePicker";
-import { DateField } from "./DateField";
-import { TimeField } from "./TimeField";
-import "./DatePickerPopupButton.scss";
-/** Component that displays a button used to pick a date and optionally a time.
- * @alpha
- * */
-export function DatePickerPopupButton({ displayEditField, timeDisplay, selected, onDateChange, dateFormatter, buttonToolTip, fieldStyle, fieldClassName, style }) {
-    const [workingDate, setWorkingDate] = React.useState(new Date(selected.getTime()));
-    const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);
-    const timeLabelRef = React.useRef(UiComponents.translate("datepicker.time"));
-    const toolTipLabelRef = React.useRef(UiComponents.translate("datepicker.selectDate"));
-    const toolTipLabel = React.useMemo(() => buttonToolTip ? buttonToolTip : toolTipLabelRef.current, [buttonToolTip]);
-    // See if props have changed since component mounted
-    React.useEffect(() => {
-        const newWorkingDate = new Date(selected.getTime());
-        setWorkingDate(newWorkingDate);
-    }, [selected]);
-    const buttonRef = React.useRef(null);
-    const togglePopupDisplay = React.useCallback((event) => {
-        event.preventDefault();
-        setShowFocusOutline(false);
-        setIsSettingsOpen((prev) => !prev);
-    }, [setIsSettingsOpen]);
-    const handleCloseSetting = React.useCallback(() => {
-        setIsSettingsOpen(false);
-    }, [setIsSettingsOpen]);
-    const handleOnDateChanged = (day) => {
-        // combine current time into selected Date
-        const newWorkingDate = new Date(day.getTime());
-        newWorkingDate.setHours(workingDate.getHours(), workingDate.getMinutes(), workingDate.getSeconds());
-        onDateChange && onDateChange(newWorkingDate);
-        !timeDisplay && setIsSettingsOpen(false);
-    };
-    const handleOnTimeChanged = (time) => {
-        // Combine new time into selected Date
-        const newWorkingDate = new Date(workingDate.getTime());
-        newWorkingDate.setHours(time.hours, time.minutes, time.seconds);
-        setWorkingDate(newWorkingDate);
-        onDateChange && onDateChange(newWorkingDate);
-    };
-    const [showFocusOutline, setShowFocusOutline] = React.useState(false);
-    const handlePopupKeyDown = React.useCallback((event) => {
-        // istanbul ignore else
-        if (event.key === SpecialKey.Space) {
-            setShowFocusOutline(true);
-            setIsSettingsOpen(true);
-        }
-    }, []);
-    const timeSpec = { hours: workingDate.getHours(), minutes: workingDate.getMinutes(), seconds: workingDate.getSeconds() };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("button", { title: toolTipLabel, style: style, className: "components-date-picker-calendar-popup-button", onKeyDown: handlePopupKeyDown, "data-testid": "components-date-picker-calendar-popup-button", onPointerDown: togglePopupDisplay, ref: buttonRef },
-            React.createElement("div", { className: "datepicker-button" },
-                React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16" },
-                    React.createElement("path", { d: "M13,13H9V10h4ZM16,3V15a1,1,0,0,1-1,1H1a1,1,0,0,1-1-1V3A1,1,0,0,1,1,2H3V0H4V2h8V0h1V2h2A1,1,0,0,1,16,3ZM15,6H1v9H15Z" })))),
-        React.createElement(Popup, { isOpen: isSettingsOpen, position: RelativePosition.BottomLeft, onClose: handleCloseSetting, target: buttonRef.current, closeOnEnter: false, moveFocus: showFocusOutline, closeOnNestedPopupOutsideClick: true },
-            React.createElement("div", { className: "components-date-picker-calendar-popup-panel", "data-testid": "components-date-picker-calendar-popup-panel" },
-                React.createElement(DatePicker, { selected: workingDate, onDateChange: handleOnDateChanged, showFocusOutline: showFocusOutline }),
-                timeDisplay &&
-                    React.createElement("div", { className: "time-container" },
-                        React.createElement(Text, { variant: "body", className: "time-label" }, timeLabelRef.current),
-                        React.createElement(TimeField, { time: timeSpec, timeDisplay: timeDisplay, onTimeChange: handleOnTimeChanged })))),
-        !!displayEditField && React.createElement(DateField, { style: fieldStyle, className: fieldClassName, initialDate: workingDate, timeDisplay: timeDisplay, dateFormatter: dateFormatter, onDateChange: handleOnDateChanged })));
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import * as React from "react";
+import { RelativePosition, SpecialKey } from "@itwin/appui-abstract";
+import { Popup } from "@itwin/core-react";
+import { Text } from "@itwin/itwinui-react";
+import { UiComponents } from "../UiComponents";
+import { DatePicker } from "./DatePicker";
+import { DateField } from "./DateField";
+import { TimeField } from "./TimeField";
+import "./DatePickerPopupButton.scss";
+/** Component that displays a button used to pick a date and optionally a time.
+ * @alpha
+ * */
+export function DatePickerPopupButton({ displayEditField, timeDisplay, selected, onDateChange, dateFormatter, buttonToolTip, fieldStyle, fieldClassName, style }) {
+    const [workingDate, setWorkingDate] = React.useState(new Date(selected.getTime()));
+    const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);
+    const timeLabelRef = React.useRef(UiComponents.translate("datepicker.time"));
+    const toolTipLabelRef = React.useRef(UiComponents.translate("datepicker.selectDate"));
+    const toolTipLabel = React.useMemo(() => buttonToolTip ? buttonToolTip : toolTipLabelRef.current, [buttonToolTip]);
+    // See if props have changed since component mounted
+    React.useEffect(() => {
+        const newWorkingDate = new Date(selected.getTime());
+        setWorkingDate(newWorkingDate);
+    }, [selected]);
+    const buttonRef = React.useRef(null);
+    const togglePopupDisplay = React.useCallback((event) => {
+        event.preventDefault();
+        setShowFocusOutline(false);
+        setIsSettingsOpen((prev) => !prev);
+    }, [setIsSettingsOpen]);
+    const handleCloseSetting = React.useCallback(() => {
+        setIsSettingsOpen(false);
+    }, [setIsSettingsOpen]);
+    const handleOnDateChanged = (day) => {
+        // combine current time into selected Date
+        const newWorkingDate = new Date(day.getTime());
+        newWorkingDate.setHours(workingDate.getHours(), workingDate.getMinutes(), workingDate.getSeconds());
+        onDateChange && onDateChange(newWorkingDate);
+        !timeDisplay && setIsSettingsOpen(false);
+    };
+    const handleOnTimeChanged = (time) => {
+        // Combine new time into selected Date
+        const newWorkingDate = new Date(workingDate.getTime());
+        newWorkingDate.setHours(time.hours, time.minutes, time.seconds);
+        setWorkingDate(newWorkingDate);
+        onDateChange && onDateChange(newWorkingDate);
+    };
+    const [showFocusOutline, setShowFocusOutline] = React.useState(false);
+    const handlePopupKeyDown = React.useCallback((event) => {
+        // istanbul ignore else
+        if (event.key === SpecialKey.Space) {
+            setShowFocusOutline(true);
+            setIsSettingsOpen(true);
+        }
+    }, []);
+    const timeSpec = { hours: workingDate.getHours(), minutes: workingDate.getMinutes(), seconds: workingDate.getSeconds() };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { title: toolTipLabel, style: style, className: "components-date-picker-calendar-popup-button", onKeyDown: handlePopupKeyDown, "data-testid": "components-date-picker-calendar-popup-button", onPointerDown: togglePopupDisplay, ref: buttonRef },
+            React.createElement("div", { className: "datepicker-button" },
+                React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16" },
+                    React.createElement("path", { d: "M13,13H9V10h4ZM16,3V15a1,1,0,0,1-1,1H1a1,1,0,0,1-1-1V3A1,1,0,0,1,1,2H3V0H4V2h8V0h1V2h2A1,1,0,0,1,16,3ZM15,6H1v9H15Z" })))),
+        React.createElement(Popup, { isOpen: isSettingsOpen, position: RelativePosition.BottomLeft, onClose: handleCloseSetting, target: buttonRef.current, closeOnEnter: false, moveFocus: showFocusOutline, closeOnNestedPopupOutsideClick: true },
+            React.createElement("div", { className: "components-date-picker-calendar-popup-panel", "data-testid": "components-date-picker-calendar-popup-panel" },
+                React.createElement(DatePicker, { selected: workingDate, onDateChange: handleOnDateChanged, showFocusOutline: showFocusOutline }),
+                timeDisplay &&
+                    React.createElement("div", { className: "time-container" },
+                        React.createElement(Text, { variant: "body", className: "time-label" }, timeLabelRef.current),
+                        React.createElement(TimeField, { time: timeSpec, timeDisplay: timeDisplay, onTimeChange: handleOnTimeChanged })))),
+        !!displayEditField && React.createElement(DateField, { style: fieldStyle, className: fieldClassName, initialDate: workingDate, timeDisplay: timeDisplay, dateFormatter: dateFormatter, onDateChange: handleOnDateChanged })));
+}
 //# sourceMappingURL=DatePickerPopupButton.js.map

package/lib/esm/components-react/datepicker/DatePickerPopupButton.scss

@@ -31,7 +31,7 @@
   }
 
   &:focus {
-    box-shadow: $uicore-button-focus-boxshadow;
+    box-shadow: $buic-focus-boxshadow 0px 0px 0px 2px;
     outline: none;
   }
 }