@itwin/components-react 4.0.0-dev.9 → 4.0.1

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

@@ -1,177 +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";
-@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: var(--iui-border-radius-1) var(--iui-border-radius-1) 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: 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: $buic-foreground-primary;
-      }
-    }
-
-    .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 $buic-inputs-border;
-        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 $buic-inputs-border;
-          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: $buic-foreground-accessory;
-        font-weight: var(--iui-font-weight-semibold);
-        border-radius: var(--iui-border-radius-1);
-
-        &:hover {
-          background-color: $buic-row-hover;
-          color: $buic-foreground-body;
-        }
-      }
-
-      &.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/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.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,EAAE,aAAa,EAAgC,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACjG,OAAO,EAAY,WAAW,EAAS,MAAM,mBAAmB,CAAC;AAKjE,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,EAAE,aAAa,EAAgC,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACjG,OAAO,EAAE,WAAW,EAAS,MAAM,mBAAmB,CAAC;AAMvD,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"}

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

@@ -1,76 +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 { 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 { 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