@itwin/components-react 3.4.0-dev.44 → 3.4.0-dev.46

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

@@ -1,171 +1,171 @@
-/*---------------------------------------------------------------------------------------------
-* 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/itwinui-css/scss/style/typography";
-@import "~@itwin/itwinui-css/scss/style/variables";
-@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($buic-foreground-body, $uicore-opacity-2);
-$date-picker-icons-color-actionable-hover: rgba($buic-foreground-body, $uicore-opacity-1);
-$date-picker-outside-month-color: $buic-text-color-disabled;
-$outline-size: 2px;
-
-.components-date-picker-calendar {
-  border-radius: 3px 3px 0 0;
-  background-color: $buic-background-control;
-  color: $buic-foreground-body;
-  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: $uicore-icons-small;
-      user-select: none;
-      color: $date-picker-icons-color-actionable;
-
-      &:focus {
-        outline: 0px;
-
-        &.showFocusOutline {
-          outline: 0px;
-          border: 0px solid $buic-inputs-border;
-          border-radius: 3px;
-          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: $buic-foreground-primary;
-      }
-    }
-
-    .components-next-month {
-      text-align: right;
-    }
-
-    .components-month-year {
-      flex: 2;
-      font-weight: $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: $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 $buic-inputs-border;
-        border-radius: 3px;
-        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 $buic-inputs-border;
-          border-radius: 3px;
-          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: $iui-border-radius;
-        font-weight: $iui-font-weight-semibold;
-      }
-
-      &.selected {
-        background-color: $buic-background-primary;
-        color: $buic-foreground-accessory;
-        font-weight: $iui-font-weight-semibold;
-        border-radius: $iui-border-radius;
-
-        &:hover {
-          background-color: $buic-row-hover;
-          color: $buic-foreground-body;
-        }
-      }
-
-      &.today {
-        background-color: rgba($buic-foreground-body, $uicore-opacity-6);
-        font-weight: $iui-font-weight-semibold;
-        border-radius: 50%;
-      }
-
-      &.notCurrentMonth {
-        &:not(.selected) {
-          color: $date-picker-outside-month-color;
-          font-weight: $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/itwinui-css/scss/style/typography";
+@import "~@itwin/itwinui-css/scss/style/variables";
+@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($buic-foreground-body, $uicore-opacity-2);
+$date-picker-icons-color-actionable-hover: rgba($buic-foreground-body, $uicore-opacity-1);
+$date-picker-outside-month-color: $buic-text-color-disabled;
+$outline-size: 2px;
+
+.components-date-picker-calendar {
+  border-radius: 3px 3px 0 0;
+  background-color: $buic-background-control;
+  color: $buic-foreground-body;
+  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: $uicore-icons-small;
+      user-select: none;
+      color: $date-picker-icons-color-actionable;
+
+      &:focus {
+        outline: 0px;
+
+        &.showFocusOutline {
+          outline: 0px;
+          border: 0px solid $buic-inputs-border;
+          border-radius: 3px;
+          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: $buic-foreground-primary;
+      }
+    }
+
+    .components-next-month {
+      text-align: right;
+    }
+
+    .components-month-year {
+      flex: 2;
+      font-weight: $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: $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 $buic-inputs-border;
+        border-radius: 3px;
+        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 $buic-inputs-border;
+          border-radius: 3px;
+          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: $iui-border-radius;
+        font-weight: $iui-font-weight-semibold;
+      }
+
+      &.selected {
+        background-color: $buic-background-primary;
+        color: $buic-foreground-accessory;
+        font-weight: $iui-font-weight-semibold;
+        border-radius: $iui-border-radius;
+
+        &:hover {
+          background-color: $buic-row-hover;
+          color: $buic-foreground-body;
+        }
+      }
+
+      &.today {
+        background-color: rgba($buic-foreground-body, $uicore-opacity-6);
+        font-weight: $iui-font-weight-semibold;
+        border-radius: 50%;
+      }
+
+      &.notCurrentMonth {
+        &:not(.selected) {
+          color: $date-picker-outside-month-color;
+          font-weight: $iui-font-weight-light;
+        }
+      }
+    }
+  }
+
 }

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,76 +1,76 @@
-/*---------------------------------------------------------------------------------------------
-* 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 { BodyText, Popup } from "@itwin/core-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(BodyText, { 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 { BodyText, Popup } from "@itwin/core-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(BodyText, { 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.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerPopupButton.js","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DatePickerPopupButton.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAiB,gBAAgB,EAAE,UAAU,EAAe,MAAM,uBAAuB,CAAC;AACjG,OAAO,EAAE,QAAQ,EAAe,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAY,MAAM,aAAa,CAAC;AAClD,OAAO,8BAA8B,CAAC;AAwBtC;;KAEK;AACL,MAAM,UAAU,qBAAqB,CAAC,EAAE,gBAAgB,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAC1G,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,KAAK,EAA8B;IAC9E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;IACnF,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAC7E,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAC,CAAC;IACtF,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEnH,oDAAoD;IACpD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,cAAc,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;QACpD,cAAc,CAAC,cAAc,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IACxD,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAsD,EAAE,EAAE;QACtG,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,mBAAmB,CAAC,KAAK,CAAC,CAAC;QAC3B,iBAAiB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAChD,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,MAAM,mBAAmB,GAAG,CAAC,GAAS,EAAE,EAAE;QACxC,0CAA0C;QAC1C,MAAM,cAAc,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC;QAC/C,cAAc,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,EAAE,EAAE,WAAW,CAAC,UAAU,EAAE,EAAE,WAAW,CAAC,UAAU,EAAE,CAAC,CAAC;QACpG,YAAY,IAAI,YAAY,CAAC,cAAc,CAAC,CAAC;QAC7C,CAAC,WAAW,IAAI,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,IAAc,EAAE,EAAE;QAC7C,sCAAsC;QACtC,MAAM,cAAc,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC;QACvD,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAChE,cAAc,CAAC,cAAc,CAAC,CAAC;QAC/B,YAAY,IAAI,YAAY,CAAC,cAAc,CAAC,CAAC;IAC/C,CAAC,CAAC;IAEF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtE,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAA6C,EAAE,EAAE;QAC7F,uBAAuB;QACvB,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,KAAK,EAAE;YAClC,mBAAmB,CAAC,IAAI,CAAC,CAAC;YAC1B,iBAAiB,CAAC,IAAI,CAAC,CAAC;SACzB;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,QAAQ,GAAa,EAAE,KAAK,EAAE,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,WAAW,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,WAAW,CAAC,UAAU,EAAE,EAAE,CAAC;IACnI,OAAO,CACL;QACE,gCAAQ,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,8CAA8C,EAAC,SAAS,EAAE,kBAAkB,iBACnH,8CAA8C,EAAC,aAAa,EAAE,kBAAkB,EAAE,GAAG,EAAE,SAAS;YAC5G,6BAAK,SAAS,EAAC,mBAAmB;gBAChC,6BAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW;oBACzD,8BAAM,CAAC,EAAC,qHAAqH,GAAG,CAC5H,CACF,CACC;QACT,oBAAC,KAAK,IACJ,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,gBAAgB,CAAC,UAAU,EACrC,OAAO,EAAE,kBAAkB,EAC3B,MAAM,EAAE,SAAS,CAAC,OAAO,EACzB,YAAY,EAAE,KAAK,EACnB,SAAS,EAAE,gBAAgB,EAC3B,8BAA8B;YAE9B,6BAAK,SAAS,EAAC,6CAA6C,iBAAa,6CAA6C;gBACpH,oBAAC,UAAU,IAAC,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,gBAAgB,GAAI;gBAC3G,WAAW;oBACV,6BAAK,SAAS,EAAC,gBAAgB;wBAC7B,oBAAC,QAAQ,IAAC,SAAS,EAAC,YAAY,IAAE,YAAY,CAAC,OAAO,CAAY;wBAClE,oBAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,mBAAmB,GAAI,CACtF,CAEJ,CACC;QACR,CAAC,CAAC,gBAAgB,IAAI,oBAAC,SAAS,IAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,mBAAmB,GAAI,CACtM,CACJ,CAAC;AACJ,CAAC","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 { DateFormatter, RelativePosition, SpecialKey, TimeDisplay } from \"@itwin/appui-abstract\";\nimport { BodyText, CommonProps, Popup } from \"@itwin/core-react\";\nimport { UiComponents } from \"../UiComponents\";\nimport { DatePicker } from \"./DatePicker\";\nimport { DateField } from \"./DateField\";\nimport { TimeField, TimeSpec } from \"./TimeField\";\nimport \"./DatePickerPopupButton.scss\";\n\n/** Props used by [[DatePickerPopupButton]] component.\n * @alpha */\nexport interface DatePickerPopupButtonProps extends CommonProps {\n  /** Date to be shown as the selected date. */\n  selected: Date;\n  /** If true show the date (and optionally time) edit field next to button */\n  displayEditField?: boolean;\n  // If defined show time in popup and also display time if input field is shown\n  timeDisplay?: TimeDisplay;\n  /** Function called when Date changes. */\n  onDateChange?: (day: Date) => void;\n  /** Optional tooltip */\n  buttonToolTip?: string;\n  /* Custom date formatter. WARNING: if used values will only be shown in specified format and will not be based on locale.\n   * If used the existence of a parseDate function will determine if the edit field allows editing. */\n  dateFormatter?: DateFormatter;\n  /** User defined class name for edit field. */\n  fieldClassName?: string;\n  /** User defined style for edit field. */\n  fieldStyle?: React.CSSProperties;\n}\n\n/** Component that displays a button used to pick a date and optionally a time.\n * @alpha\n * */\nexport function DatePickerPopupButton({ displayEditField, timeDisplay, selected, onDateChange, dateFormatter,\n  buttonToolTip, fieldStyle, fieldClassName, style }: DatePickerPopupButtonProps) {\n  const [workingDate, setWorkingDate] = React.useState(new Date(selected.getTime()));\n  const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);\n  const timeLabelRef = React.useRef(UiComponents.translate(\"datepicker.time\"));\n  const toolTipLabelRef = React.useRef(UiComponents.translate(\"datepicker.selectDate\"));\n  const toolTipLabel = React.useMemo(() => buttonToolTip ? buttonToolTip : toolTipLabelRef.current, [buttonToolTip]);\n\n  // See if props have changed since component mounted\n  React.useEffect(() => {\n    const newWorkingDate = new Date(selected.getTime());\n    setWorkingDate(newWorkingDate);\n  }, [selected]);\n\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const togglePopupDisplay = React.useCallback((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    event.preventDefault();\n    setShowFocusOutline(false);\n    setIsSettingsOpen((prev) => !prev);\n  }, [setIsSettingsOpen]);\n\n  const handleCloseSetting = React.useCallback(() => {\n    setIsSettingsOpen(false);\n  }, [setIsSettingsOpen]);\n\n  const handleOnDateChanged = (day: Date) => {\n    // combine current time into selected Date\n    const newWorkingDate = new Date(day.getTime());\n    newWorkingDate.setHours(workingDate.getHours(), workingDate.getMinutes(), workingDate.getSeconds());\n    onDateChange && onDateChange(newWorkingDate);\n    !timeDisplay && setIsSettingsOpen(false);\n  };\n\n  const handleOnTimeChanged = (time: TimeSpec) => {\n    // Combine new time into selected Date\n    const newWorkingDate = new Date(workingDate.getTime());\n    newWorkingDate.setHours(time.hours, time.minutes, time.seconds);\n    setWorkingDate(newWorkingDate);\n    onDateChange && onDateChange(newWorkingDate);\n  };\n\n  const [showFocusOutline, setShowFocusOutline] = React.useState(false);\n  const handlePopupKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLButtonElement>) => {\n    // istanbul ignore else\n    if (event.key === SpecialKey.Space) {\n      setShowFocusOutline(true);\n      setIsSettingsOpen(true);\n    }\n  }, []);\n\n  const timeSpec: TimeSpec = { hours: workingDate.getHours(), minutes: workingDate.getMinutes(), seconds: workingDate.getSeconds() };\n  return (\n    <>\n      <button title={toolTipLabel} style={style} className=\"components-date-picker-calendar-popup-button\" onKeyDown={handlePopupKeyDown}\n        data-testid=\"components-date-picker-calendar-popup-button\" onPointerDown={togglePopupDisplay} ref={buttonRef}>\n        <div className=\"datepicker-button\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n            <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\" />\n          </svg>\n        </div>\n      </button>\n      <Popup\n        isOpen={isSettingsOpen}\n        position={RelativePosition.BottomLeft}\n        onClose={handleCloseSetting}\n        target={buttonRef.current}\n        closeOnEnter={false}\n        moveFocus={showFocusOutline}\n        closeOnNestedPopupOutsideClick\n      >\n        <div className=\"components-date-picker-calendar-popup-panel\" data-testid=\"components-date-picker-calendar-popup-panel\">\n          <DatePicker selected={workingDate} onDateChange={handleOnDateChanged} showFocusOutline={showFocusOutline} />\n          {timeDisplay &&\n            <div className=\"time-container\">\n              <BodyText className=\"time-label\">{timeLabelRef.current}</BodyText>\n              <TimeField time={timeSpec} timeDisplay={timeDisplay} onTimeChange={handleOnTimeChanged} />\n            </div>\n          }\n        </div>\n      </Popup >\n      {!!displayEditField && <DateField style={fieldStyle} className={fieldClassName} initialDate={workingDate} timeDisplay={timeDisplay} dateFormatter={dateFormatter} onDateChange={handleOnDateChanged} />}\n    </>\n  );\n}\n"]}
+{"version":3,"file":"DatePickerPopupButton.js","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DatePickerPopupButton.tsx"],"names":[],"mappings":"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","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 { DateFormatter, RelativePosition, SpecialKey, TimeDisplay } from \"@itwin/appui-abstract\";\r\nimport { BodyText, CommonProps, Popup } from \"@itwin/core-react\";\r\nimport { UiComponents } from \"../UiComponents\";\r\nimport { DatePicker } from \"./DatePicker\";\r\nimport { DateField } from \"./DateField\";\r\nimport { TimeField, TimeSpec } from \"./TimeField\";\r\nimport \"./DatePickerPopupButton.scss\";\r\n\r\n/** Props used by [[DatePickerPopupButton]] component.\r\n * @alpha */\r\nexport interface DatePickerPopupButtonProps extends CommonProps {\r\n  /** Date to be shown as the selected date. */\r\n  selected: Date;\r\n  /** If true show the date (and optionally time) edit field next to button */\r\n  displayEditField?: boolean;\r\n  // If defined show time in popup and also display time if input field is shown\r\n  timeDisplay?: TimeDisplay;\r\n  /** Function called when Date changes. */\r\n  onDateChange?: (day: Date) => void;\r\n  /** Optional tooltip */\r\n  buttonToolTip?: string;\r\n  /* Custom date formatter. WARNING: if used values will only be shown in specified format and will not be based on locale.\r\n   * If used the existence of a parseDate function will determine if the edit field allows editing. */\r\n  dateFormatter?: DateFormatter;\r\n  /** User defined class name for edit field. */\r\n  fieldClassName?: string;\r\n  /** User defined style for edit field. */\r\n  fieldStyle?: React.CSSProperties;\r\n}\r\n\r\n/** Component that displays a button used to pick a date and optionally a time.\r\n * @alpha\r\n * */\r\nexport function DatePickerPopupButton({ displayEditField, timeDisplay, selected, onDateChange, dateFormatter,\r\n  buttonToolTip, fieldStyle, fieldClassName, style }: DatePickerPopupButtonProps) {\r\n  const [workingDate, setWorkingDate] = React.useState(new Date(selected.getTime()));\r\n  const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);\r\n  const timeLabelRef = React.useRef(UiComponents.translate(\"datepicker.time\"));\r\n  const toolTipLabelRef = React.useRef(UiComponents.translate(\"datepicker.selectDate\"));\r\n  const toolTipLabel = React.useMemo(() => buttonToolTip ? buttonToolTip : toolTipLabelRef.current, [buttonToolTip]);\r\n\r\n  // See if props have changed since component mounted\r\n  React.useEffect(() => {\r\n    const newWorkingDate = new Date(selected.getTime());\r\n    setWorkingDate(newWorkingDate);\r\n  }, [selected]);\r\n\r\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\r\n  const togglePopupDisplay = React.useCallback((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\r\n    event.preventDefault();\r\n    setShowFocusOutline(false);\r\n    setIsSettingsOpen((prev) => !prev);\r\n  }, [setIsSettingsOpen]);\r\n\r\n  const handleCloseSetting = React.useCallback(() => {\r\n    setIsSettingsOpen(false);\r\n  }, [setIsSettingsOpen]);\r\n\r\n  const handleOnDateChanged = (day: Date) => {\r\n    // combine current time into selected Date\r\n    const newWorkingDate = new Date(day.getTime());\r\n    newWorkingDate.setHours(workingDate.getHours(), workingDate.getMinutes(), workingDate.getSeconds());\r\n    onDateChange && onDateChange(newWorkingDate);\r\n    !timeDisplay && setIsSettingsOpen(false);\r\n  };\r\n\r\n  const handleOnTimeChanged = (time: TimeSpec) => {\r\n    // Combine new time into selected Date\r\n    const newWorkingDate = new Date(workingDate.getTime());\r\n    newWorkingDate.setHours(time.hours, time.minutes, time.seconds);\r\n    setWorkingDate(newWorkingDate);\r\n    onDateChange && onDateChange(newWorkingDate);\r\n  };\r\n\r\n  const [showFocusOutline, setShowFocusOutline] = React.useState(false);\r\n  const handlePopupKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLButtonElement>) => {\r\n    // istanbul ignore else\r\n    if (event.key === SpecialKey.Space) {\r\n      setShowFocusOutline(true);\r\n      setIsSettingsOpen(true);\r\n    }\r\n  }, []);\r\n\r\n  const timeSpec: TimeSpec = { hours: workingDate.getHours(), minutes: workingDate.getMinutes(), seconds: workingDate.getSeconds() };\r\n  return (\r\n    <>\r\n      <button title={toolTipLabel} style={style} className=\"components-date-picker-calendar-popup-button\" onKeyDown={handlePopupKeyDown}\r\n        data-testid=\"components-date-picker-calendar-popup-button\" onPointerDown={togglePopupDisplay} ref={buttonRef}>\r\n        <div className=\"datepicker-button\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n            <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\" />\r\n          </svg>\r\n        </div>\r\n      </button>\r\n      <Popup\r\n        isOpen={isSettingsOpen}\r\n        position={RelativePosition.BottomLeft}\r\n        onClose={handleCloseSetting}\r\n        target={buttonRef.current}\r\n        closeOnEnter={false}\r\n        moveFocus={showFocusOutline}\r\n        closeOnNestedPopupOutsideClick\r\n      >\r\n        <div className=\"components-date-picker-calendar-popup-panel\" data-testid=\"components-date-picker-calendar-popup-panel\">\r\n          <DatePicker selected={workingDate} onDateChange={handleOnDateChanged} showFocusOutline={showFocusOutline} />\r\n          {timeDisplay &&\r\n            <div className=\"time-container\">\r\n              <BodyText className=\"time-label\">{timeLabelRef.current}</BodyText>\r\n              <TimeField time={timeSpec} timeDisplay={timeDisplay} onTimeChange={handleOnTimeChanged} />\r\n            </div>\r\n          }\r\n        </div>\r\n      </Popup >\r\n      {!!displayEditField && <DateField style={fieldStyle} className={fieldClassName} initialDate={workingDate} timeDisplay={timeDisplay} dateFormatter={dateFormatter} onDateChange={handleOnDateChanged} />}\r\n    </>\r\n  );\r\n}\r\n"]}