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

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

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

@@ -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/cjs/components-react/datepicker/DatePickerPopupButton.js

@@ -1,100 +1,104 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Date
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePickerPopupButton = void 0;
-const React = __importStar(require("react"));
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_react_1 = require("@itwin/core-react");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-const UiComponents_1 = require("../UiComponents");
-const DatePicker_1 = require("./DatePicker");
-const DateField_1 = require("./DateField");
-const TimeField_1 = require("./TimeField");
-require("./DatePickerPopupButton.scss");
-/** Component that displays a button used to pick a date and optionally a time.
- * @alpha
- * */
-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_1.UiComponents.translate("datepicker.time"));
-    const toolTipLabelRef = React.useRef(UiComponents_1.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 === appui_abstract_1.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(core_react_1.Popup, { isOpen: isSettingsOpen, position: appui_abstract_1.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_1.DatePicker, { selected: workingDate, onDateChange: handleOnDateChanged, showFocusOutline: showFocusOutline }),
-                timeDisplay &&
-                    React.createElement("div", { className: "time-container" },
-                        React.createElement(itwinui_react_1.Text, { variant: "body", className: "time-label" }, timeLabelRef.current),
-                        React.createElement(TimeField_1.TimeField, { time: timeSpec, timeDisplay: timeDisplay, onTimeChange: handleOnTimeChanged })))),
-        !!displayEditField && React.createElement(DateField_1.DateField, { style: fieldStyle, className: fieldClassName, initialDate: workingDate, timeDisplay: timeDisplay, dateFormatter: dateFormatter, onDateChange: handleOnDateChanged })));
-}
-exports.DatePickerPopupButton = DatePickerPopupButton;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Date
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerPopupButton = void 0;
+const React = __importStar(require("react"));
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const UiComponents_1 = require("../UiComponents");
+const DatePicker_1 = require("./DatePicker");
+const DateField_1 = require("./DateField");
+const TimeField_1 = require("./TimeField");
+require("./DatePickerPopupButton.scss");
+/** Component that displays a button used to pick a date and optionally a time.
+ * @alpha
+ * */
+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_1.UiComponents.translate("datepicker.time"));
+    const toolTipLabelRef = React.useRef(UiComponents_1.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 === appui_abstract_1.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(core_react_1.Popup, { isOpen: isSettingsOpen, position: appui_abstract_1.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_1.DatePicker, { selected: workingDate, onDateChange: handleOnDateChanged, showFocusOutline: showFocusOutline }),
+                timeDisplay &&
+                    React.createElement("div", { className: "time-container" },
+                        React.createElement(itwinui_react_1.Text, { variant: "body", className: "time-label" }, timeLabelRef.current),
+                        React.createElement(TimeField_1.TimeField, { time: timeSpec, timeDisplay: timeDisplay, onTimeChange: handleOnTimeChanged })))),
+        !!displayEditField && React.createElement(DateField_1.DateField, { style: fieldStyle, className: fieldClassName, initialDate: workingDate, timeDisplay: timeDisplay, dateFormatter: dateFormatter, onDateChange: handleOnDateChanged })));
+}
+exports.DatePickerPopupButton = DatePickerPopupButton;
 //# sourceMappingURL=DatePickerPopupButton.js.map