@itwin/components-react 4.17.6 → 5.0.0-dev.3

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

@@ -0,0 +1,179 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+$date-picker-m: 16px;
+$date-picker-icons-color-actionable: rgba(
+  var(--iui-color-text),
+  var(--iui-opacity-2)
+);
+$date-picker-icons-color-actionable-hover: rgba(
+  var(--iui-color-text),
+  var(--iui-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: var(--iui-color-background);
+  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: var(--iui-color-background);
+      border: none;
+      cursor: pointer;
+      padding: 5px;
+      font-size: var(--iui-font-size-2);
+      user-select: none;
+      -webkit-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: hsl(
+            var(--iui-color-foreground-hsl) / var(--iui-opacity-4)
+          );
+          box-shadow: hsl(var(--iui-color-accent-hsl) / 0) 0px 1px 1px,
+            hsl(var(--iui-color-accent-hsl) / 0.65) 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: var(--iui-color-background-hover);
+    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: hsl(
+          var(--iui-color-foreground-hsl) / var(--iui-opacity-4)
+        );
+        box-shadow: hsl(var(--iui-color-accent-hsl) / 0) 0px 1px 1px,
+          hsl(var(--iui-color-accent-hsl) / 0.65) 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: hsl(
+            var(--iui-color-foreground-hsl) / var(--iui-opacity-4)
+          );
+          box-shadow: hsl(var(--iui-color-accent-hsl) / 0) 0px 1px 1px,
+            hsl(var(--iui-color-accent-hsl) / 0.65) 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: var(--iui-color-background-hover);
+        border-radius: var(--iui-border-radius-1);
+        font-weight: var(--iui-font-weight-semibold);
+      }
+
+      &.selected {
+        background-color: var(--iui-color-background-accent);
+        color: var(--iui-color-white);
+        font-weight: var(--iui-font-weight-semibold);
+        border-radius: var(--iui-border-radius-1);
+
+        &:hover {
+          background-color: var(--iui-color-background-hover);
+          color: var(--iui-color-text);
+        }
+      }
+
+      &.today {
+        background-color: rgba(var(--iui-color-text), var(--iui-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/components-react/datepicker/DatePickerPopupButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerPopupButton.d.ts","sourceRoot":"","sources":["../../../src/components-react/datepicker/DatePickerPopupButton.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAExE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOrD,OAAO,8BAA8B,CAAC;AAGtC;;;GAGG;AAEH,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;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,aAAa,EACb,UAAU,EACV,cAAc,EACd,KAAK,GACN,EACD,0BAA0B,qBA8HzB"}

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

@@ -0,0 +1,80 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 } from "@itwin/appui-abstract";
+import { Popup } from "@itwin/core-react";
+import { Text } from "@itwin/itwinui-react";
+import { DatePicker } from "./DatePicker.js";
+import { DateField } from "./DateField.js";
+import { TimeField } from "./TimeField.js";
+import "./DatePickerPopupButton.scss";
+import { useTranslation } from "../l10n/useTranslation.js";
+/** Component that displays a button used to pick a date and optionally a time.
+ * @alpha
+ * @deprecated in 4.11.0. Use {@link https://itwinui.bentley.com/docs/datepicker iTwinUI date picker} instead.
+ */
+export function DatePickerPopupButton({ displayEditField, timeDisplay, selected, onDateChange, dateFormatter, buttonToolTip, fieldStyle, fieldClassName, style, }) {
+    const { translate } = useTranslation();
+    const [workingDate, setWorkingDate] = React.useState(new Date(selected.getTime()));
+    const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);
+    const toolTipLabel = buttonToolTip ?? translate("datepicker.selectDate");
+    // 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) => {
+        if (event.key === " ") {
+            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 // eslint-disable-line deprecation/deprecation
+                , { selected: workingDate, onDateChange: handleOnDateChanged, showFocusOutline: showFocusOutline }),
+                timeDisplay && (React.createElement("div", { className: "time-container" },
+                    React.createElement(Text, { variant: "body", className: "time-label" }, translate("datepicker.time")),
+                    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/components-react/datepicker/DatePickerPopupButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerPopupButton.js","sourceRoot":"","sources":["../../../src/components-react/datepicker/DatePickerPopupButton.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,8BAA8B,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AA2B3D;;;GAGG;AACH,MAAM,UAAU,qBAAqB,CAAC,EACpC,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,aAAa,EACb,UAAU,EACV,cAAc,EACd,KAAK,GAEmB;IACxB,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IACvC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAClD,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAC7B,CAAC;IACF,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,YAAY,GAAG,aAAa,IAAI,SAAS,CAAC,uBAAuB,CAAC,CAAC;IAEzE,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,CAC1C,CAAC,KAAsD,EAAE,EAAE;QACzD,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,EACD,CAAC,iBAAiB,CAAC,CACpB,CAAC;IAEF,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,CACrB,WAAW,CAAC,QAAQ,EAAE,EACtB,WAAW,CAAC,UAAU,EAAE,EACxB,WAAW,CAAC,UAAU,EAAE,CACzB,CAAC;QACF,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,CAC1C,CAAC,KAA6C,EAAE,EAAE;QAChD,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACtB,mBAAmB,CAAC,IAAI,CAAC,CAAC;YAC1B,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,QAAQ,GAAa;QACzB,KAAK,EAAE,WAAW,CAAC,QAAQ,EAAE;QAC7B,OAAO,EAAE,WAAW,CAAC,UAAU,EAAE;QACjC,OAAO,EAAE,WAAW,CAAC,UAAU,EAAE;KAClC,CAAC;IACF,OAAO,CACL;QACE,gCACE,KAAK,EAAE,YAAY,EACnB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAC,8CAA8C,EACxD,SAAS,EAAE,kBAAkB,iBACjB,8CAA8C,EAC1D,aAAa,EAAE,kBAAkB,EACjC,GAAG,EAAE,SAAS;YAEd,6BAAK,SAAS,EAAC,mBAAmB;gBAChC,6BAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW;oBACzD,8BAAM,CAAC,EAAC,qHAAqH,GAAG,CAC5H,CACF,CACC;QAET,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,6BACE,SAAS,EAAC,6CAA6C,iBAC3C,6CAA6C;gBAEzD,oBAAC,UAAU,CAAC,8CAA8C;oBACxD,QAAQ,EAAE,WAAW,EACrB,YAAY,EAAE,mBAAmB,EACjC,gBAAgB,EAAE,gBAAgB,GAClC;gBACD,WAAW,IAAI,CACd,6BAAK,SAAS,EAAC,gBAAgB;oBAC7B,oBAAC,IAAI,IAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAC,YAAY,IACxC,SAAS,CAAC,iBAAiB,CAAC,CACxB;oBACP,oBAAC,SAAS,IACR,IAAI,EAAE,QAAQ,EACd,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,mBAAmB,GACjC,CACE,CACP,CACG,CACA;QACP,CAAC,CAAC,gBAAgB,IAAI,CACrB,oBAAC,SAAS,IACR,KAAK,EAAE,UAAU,EACjB,SAAS,EAAE,cAAc,EACzB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,mBAAmB,GACjC,CACH,CACA,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 type { DateFormatter, TimeDisplay } from \"@itwin/appui-abstract\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Popup } from \"@itwin/core-react\";\nimport { Text } from \"@itwin/itwinui-react\";\nimport { DatePicker } from \"./DatePicker.js\";\nimport { DateField } from \"./DateField.js\";\nimport type { TimeSpec } from \"./TimeField.js\";\nimport { TimeField } from \"./TimeField.js\";\nimport \"./DatePickerPopupButton.scss\";\nimport { useTranslation } from \"../l10n/useTranslation.js\";\n\n/** Props used by [[DatePickerPopupButton]] component.\n * @alpha\n * @deprecated in 4.11.0. Props of deprecated component {@link DatePickerPopupButton}.\n */\n// eslint-disable-next-line deprecation/deprecation\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 * @deprecated in 4.11.0. Use {@link https://itwinui.bentley.com/docs/datepicker iTwinUI date picker} instead.\n */\nexport function DatePickerPopupButton({\n  displayEditField,\n  timeDisplay,\n  selected,\n  onDateChange,\n  dateFormatter,\n  buttonToolTip,\n  fieldStyle,\n  fieldClassName,\n  style,\n}: // eslint-disable-next-line deprecation/deprecation\nDatePickerPopupButtonProps) {\n  const { translate } = useTranslation();\n  const [workingDate, setWorkingDate] = React.useState(\n    new Date(selected.getTime())\n  );\n  const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);\n  const toolTipLabel = buttonToolTip ?? translate(\"datepicker.selectDate\");\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(\n    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      event.preventDefault();\n      setShowFocusOutline(false);\n      setIsSettingsOpen((prev) => !prev);\n    },\n    [setIsSettingsOpen]\n  );\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(\n      workingDate.getHours(),\n      workingDate.getMinutes(),\n      workingDate.getSeconds()\n    );\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(\n    (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      if (event.key === \" \") {\n        setShowFocusOutline(true);\n        setIsSettingsOpen(true);\n      }\n    },\n    []\n  );\n\n  const timeSpec: TimeSpec = {\n    hours: workingDate.getHours(),\n    minutes: workingDate.getMinutes(),\n    seconds: workingDate.getSeconds(),\n  };\n  return (\n    <>\n      <button\n        title={toolTipLabel}\n        style={style}\n        className=\"components-date-picker-calendar-popup-button\"\n        onKeyDown={handlePopupKeyDown}\n        data-testid=\"components-date-picker-calendar-popup-button\"\n        onPointerDown={togglePopupDisplay}\n        ref={buttonRef}\n      >\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      {/* eslint-disable-next-line deprecation/deprecation */}\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\n          className=\"components-date-picker-calendar-popup-panel\"\n          data-testid=\"components-date-picker-calendar-popup-panel\"\n        >\n          <DatePicker // eslint-disable-line deprecation/deprecation\n            selected={workingDate}\n            onDateChange={handleOnDateChanged}\n            showFocusOutline={showFocusOutline}\n          />\n          {timeDisplay && (\n            <div className=\"time-container\">\n              <Text variant=\"body\" className=\"time-label\">\n                {translate(\"datepicker.time\")}\n              </Text>\n              <TimeField\n                time={timeSpec}\n                timeDisplay={timeDisplay}\n                onTimeChange={handleOnTimeChanged}\n              />\n            </div>\n          )}\n        </div>\n      </Popup>\n      {!!displayEditField && (\n        <DateField\n          style={fieldStyle}\n          className={fieldClassName}\n          initialDate={workingDate}\n          timeDisplay={timeDisplay}\n          dateFormatter={dateFormatter}\n          onDateChange={handleOnDateChanged}\n        />\n      )}\n    </>\n  );\n}\n"]}

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

@@ -0,0 +1,56 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.components-date-picker-calendar-popup-button {
+  color: var(--iui-color-text);
+  font-size: var(--iui-font-size-1);
+  background-color: transparent;
+  height: 2.2em;
+  border: none;
+  margin-right: 2px;
+
+  .datepicker-button {
+    width: 16px;
+    height: 16px;
+  }
+
+  svg {
+    fill: var(--iui-color-icon);
+  }
+
+  &:hover {
+    color: var(--iui-color-text-accent-hover);
+    cursor: auto;
+
+    svg {
+      fill: var(--iui-color-text-accent-hover);
+    }
+  }
+
+  &:focus {
+    box-shadow: hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-4)) 0px 0px
+      0px 2px;
+    outline: none;
+  }
+}
+
+.components-date-picker-calendar-popup-panel {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--iui-color-background);
+
+  .time-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    border-top: 2px solid var(--iui-color-border-foreground);
+    padding-top: 8px;
+    padding-bottom: 8px;
+
+    .time-label {
+      margin-right: 4px;
+    }
+  }
+}

package/lib/components-react/datepicker/IntlFormatter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntlFormatter.d.ts","sourceRoot":"","sources":["../../../src/components-react/datepicker/IntlFormatter.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D;;;;;;;;GAQG;AACH,qBAAa,aAAc,YAAW,aAAa;IACrC,OAAO,CAAC,cAAc,CAAC;gBAAf,cAAc,CAAC,iCAAqB;IAExD,IAAW,SAAS,IAAI,IAAI,CAAC,cAAc,CAgB1C;IAEM,WAAW,CAAC,GAAG,EAAE,IAAI;CAO7B"}

package/lib/components-react/datepicker/IntlFormatter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntlFormatter.js","sourceRoot":"","sources":["../../../src/components-react/datepicker/IntlFormatter.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAIH;;;;;;;;GAQG;AACH,MAAM,OAAO,aAAa;IACxB,YAAoB,cAAoC;QAApC,mBAAc,GAAd,cAAc,CAAsB;IAAG,CAAC;IAE5D,IAAW,SAAS;QAClB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YACzB,+DAA+D;YAC/D,IAAI,CAAC,cAAc,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE;gBACvD,OAAO,EAAE,OAAO,CAAC,+BAA+B;gBAChD,IAAI,EAAE,SAAS,CAAC,0BAA0B;gBAC1C,KAAK,EAAE,SAAS,CAAC,qDAAqD;gBACtE,GAAG,EAAE,SAAS,CAAC,0BAA0B;gBACzC,IAAI,EAAE,SAAS,CAAC,0BAA0B;gBAC1C,MAAM,EAAE,IAAI;gBACZ,MAAM,EAAE,SAAS,CAAC,0BAA0B;gBAC5C,MAAM,EAAE,SAAS,CAAC,0BAA0B,CAAC,qBAAqB;gBAClE,4BAA4B;aAC7B,CAAC,CAAC;QACL,CAAC;QACD,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAEM,WAAW,CAAC,GAAS;QAC1B,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACpC,CAAC;CAKF","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 type { DateFormatter } from \"@itwin/appui-abstract\";\n\n/**\n * A basic class that allows user to provide an Intl.DateTimeFormat\n * that can be used to format the date and time display. If no format is\n * specified a default format will be used. This default implementation does not\n * support parsing, so when used by [[DatePickerPopup]] the edit field will be readonly. If\n * a parseData function is implemented then the edit field will be editable.\n * @alpha\n * @deprecated in 4.11.0. Use {@link https://itwinui.bentley.com/docs/datepicker iTwinUI date picker} instead.\n */\nexport class IntlFormatter implements DateFormatter {\n  constructor(private _intlFormatter?: Intl.DateTimeFormat) {}\n\n  public get formatter(): Intl.DateTimeFormat {\n    if (!this._intlFormatter) {\n      // https://tc39.es/ecma402/#sec-intl-datetimeformat-constructor\n      this._intlFormatter = new Intl.DateTimeFormat(undefined, {\n        weekday: \"short\" /* \"narrow\", \"short\", \"long\" */,\n        year: \"numeric\" /* \"2-digit\", \"numeric\" */,\n        month: \"2-digit\" /* \"2-digit\", \"numeric\", \"narrow\", \"short\", \"long\" */,\n        day: \"2-digit\" /* \"2-digit\", \"numeric\" */,\n        hour: \"numeric\" /* \"2-digit\", \"numeric\" */,\n        hour12: true,\n        minute: \"numeric\" /* \"2-digit\", \"numeric\" */,\n        second: \"numeric\" /* \"2-digit\", \"numeric\" */ /* \"short\", \"long\" */,\n        /* timeZoneName:\t\"short\", */\n      });\n    }\n    return this._intlFormatter;\n  }\n\n  public formateDate(day: Date) {\n    return this.formatter.format(day);\n  }\n\n  // The default implementation does not currently support parsing. If a derived class supports parsing then the\n  // parseDate function must be implemented.\n  // parseDate(dateString: string): Date|undefined {}\n}\n"]}

package/lib/components-react/datepicker/TimeField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/components-react/datepicker/TimeField.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,kBAAkB,CAAC;AAG1B;;;GAGG;AACH,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,QAAQ,CAAC;IACf,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuBD;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,YAAY,GACb,EAAE,cAAc,qBAyUhB"}

package/lib/components-react/datepicker/TimeField.js

@@ -0,0 +1,257 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { Key } from "ts-key-enum";
+import { Input } from "@itwin/itwinui-react";
+import "./TimeField.scss";
+import { useTranslation } from "../l10n/useTranslation.js";
+function getValidInt(intText, min, max, defaultValue) {
+    try {
+        const newValue = parseInt(intText, 10);
+        if (newValue >= min && newValue <= max)
+            return newValue;
+    }
+    catch (_e) {
+        return defaultValue;
+    }
+    return defaultValue;
+}
+function isSameTime(a, b) {
+    return (a.hours === b.hours && a.minutes === b.minutes && a.seconds === b.seconds);
+}
+/** Field used to set the Hour:Minutes:Seconds in the [[DatePicker]] Popup panel. The user may key-in the value or use up/down keys to
+ * change the time.
+ * @internal
+ */
+export function TimeField({ time, timeDisplay, readOnly, onTimeChange, }) {
+    const { translate } = useTranslation();
+    const initialDateRef = React.useRef(time);
+    const amLabel = translate("timepicker.day-period-am");
+    const pmLabel = translate("timepicker.day-period-pm");
+    const [timeSpec, setTimeSpec] = React.useState(time);
+    const { hours, minutes, seconds } = timeSpec;
+    const showDayPeriod = -1 !== timeDisplay.search("aa");
+    const getDisplayHours = React.useCallback((timeHours) => {
+        if (!showDayPeriod) {
+            return timeHours;
+        }
+        const outHours = 0 === timeHours ? 12 : timeHours > 12 ? timeHours - 12 : timeHours;
+        return outHours;
+    }, [showDayPeriod]);
+    // See if new initialDate props have changed since component mounted
+    React.useEffect(() => {
+        if (!isSameTime(time, initialDateRef.current)) {
+            setTimeSpec(time);
+            initialDateRef.current = time;
+        }
+    }, [time]);
+    const displayHour = getDisplayHours(hours);
+    const [dayPeriodText, setDayPeriodText] = React.useState(showDayPeriod ? (hours >= 12 ? pmLabel : amLabel) : undefined);
+    const [hoursText, setHoursText] = React.useState(displayHour.toString().padStart(2, "0"));
+    const [minutesText, setMinutesText] = React.useState(minutes.toString().padStart(2, "0"));
+    const [secondsText, setSecondsText] = React.useState(seconds.toString().padStart(2, "0"));
+    const updateTimeSpec = React.useCallback((newTime) => {
+        if (newTime.hours !== timeSpec.hours ||
+            newTime.minutes !== timeSpec.minutes ||
+            newTime.seconds !== timeSpec.seconds) {
+            setTimeSpec(newTime);
+            onTimeChange && onTimeChange(newTime);
+        }
+    }, [onTimeChange, timeSpec.hours, timeSpec.minutes, timeSpec.seconds]);
+    const handleHoursChange = React.useCallback((event) => {
+        setHoursText(event.currentTarget.value);
+    }, []);
+    const handleMinutesChange = React.useCallback((event) => {
+        setMinutesText(event.currentTarget.value);
+    }, []);
+    const handleSecondsChange = React.useCallback((event) => {
+        setSecondsText(event.currentTarget.value);
+    }, []);
+    const handleDayPeriodChange = React.useCallback((event) => {
+        setDayPeriodText(event.currentTarget.value);
+    }, []);
+    const handleHoursOnBlur = React.useCallback(() => {
+        const newHours = getValidInt(hoursText, 0, 24, hours);
+        setHoursText(getDisplayHours(newHours).toString().padStart(2, "0"));
+        updateTimeSpec({ ...timeSpec, hours: newHours });
+        showDayPeriod && setDayPeriodText(newHours >= 12 ? pmLabel : amLabel);
+    }, [
+        amLabel,
+        getDisplayHours,
+        hours,
+        hoursText,
+        pmLabel,
+        showDayPeriod,
+        timeSpec,
+        updateTimeSpec,
+    ]);
+    const handleMinutesOnBlur = React.useCallback(() => {
+        const newMinutes = getValidInt(minutesText, 0, 59, minutes);
+        setMinutesText(newMinutes.toString().padStart(2, "0"));
+        updateTimeSpec({ ...timeSpec, minutes: newMinutes });
+    }, [minutes, minutesText, timeSpec, updateTimeSpec]);
+    const handleSecondsOnBlur = React.useCallback(() => {
+        const newSeconds = getValidInt(secondsText, 0, 59, seconds);
+        setSecondsText(newSeconds.toString().padStart(2, "0"));
+        updateTimeSpec({ ...timeSpec, seconds: newSeconds });
+    }, [seconds, secondsText, timeSpec, updateTimeSpec]);
+    const handleDayPeriodOnBlur = React.useCallback(() => {
+        let newPeriodText;
+        if (dayPeriodText === "AM" ||
+            dayPeriodText === "am" ||
+            dayPeriodText === amLabel)
+            newPeriodText = amLabel;
+        else if (dayPeriodText === "PM" ||
+            dayPeriodText === "pm" ||
+            dayPeriodText === pmLabel)
+            newPeriodText = pmLabel;
+        if (undefined !== newPeriodText) {
+            setDayPeriodText(newPeriodText);
+            if (newPeriodText === amLabel && hours > 12) {
+                updateTimeSpec({ ...timeSpec, hours: hours - 12 });
+            }
+            else if (newPeriodText === pmLabel && hours <= 11) {
+                updateTimeSpec({ ...timeSpec, hours: hours + 12 });
+            }
+        }
+    }, [amLabel, dayPeriodText, hours, pmLabel, timeSpec, updateTimeSpec]);
+    const handleHoursOnKeyDown = React.useCallback((event) => {
+        if (event.key === Key.ArrowDown.valueOf() ||
+            event.key === Key.ArrowUp.valueOf()) {
+            let newHours = hours + (event.key === Key.ArrowDown.valueOf() ? -1 : 1);
+            if (newHours < 0)
+                newHours = 24;
+            if (newHours > 24 || (newHours > 23 && minutes + seconds > 0))
+                newHours = 0;
+            setHoursText(getDisplayHours(newHours).toString().padStart(2, "0"));
+            updateTimeSpec({ ...timeSpec, hours: newHours });
+            showDayPeriod && setDayPeriodText(newHours >= 12 ? pmLabel : amLabel);
+            event.preventDefault();
+        }
+        else if (event.key === Key.Enter.valueOf()) {
+            const newHours = getValidInt(hoursText, 0, 24, hours);
+            setHoursText(getDisplayHours(newHours).toString().padStart(2, "0"));
+            updateTimeSpec({ ...timeSpec, hours: newHours });
+            showDayPeriod && setDayPeriodText(newHours >= 12 ? pmLabel : amLabel);
+            event.preventDefault();
+        }
+    }, [
+        amLabel,
+        getDisplayHours,
+        hours,
+        hoursText,
+        minutes,
+        pmLabel,
+        seconds,
+        showDayPeriod,
+        timeSpec,
+        updateTimeSpec,
+    ]);
+    const handleMinutesOnKeyDown = React.useCallback((event) => {
+        if (event.key === Key.ArrowDown.valueOf()) {
+            const newMinutes = minutes === 0 ? 59 : minutes - 1;
+            setMinutesText(newMinutes.toString().padStart(2, "0"));
+            updateTimeSpec({ ...timeSpec, minutes: newMinutes });
+            event.preventDefault();
+        }
+        else if (event.key === Key.ArrowUp.valueOf()) {
+            const newMinutes = minutes === 59 ? 0 : minutes + 1;
+            setMinutesText(newMinutes.toString().padStart(2, "0"));
+            updateTimeSpec({ ...timeSpec, minutes: newMinutes });
+            event.preventDefault();
+        }
+        else if (event.key === Key.Home.valueOf() ||
+            event.key === Key.End.valueOf()) {
+            const newMinutes = event.key === Key.Home.valueOf() ? 0 : 59;
+            setMinutesText(newMinutes.toString().padStart(2, "0"));
+            updateTimeSpec({ ...timeSpec, minutes: newMinutes });
+            event.preventDefault();
+        }
+        else if (event.key === Key.Enter.valueOf()) {
+            const newMinutes = getValidInt(minutesText, 0, 59, minutes);
+            setMinutesText(newMinutes.toString().padStart(2, "0"));
+            updateTimeSpec({ ...timeSpec, minutes: newMinutes });
+            event.preventDefault();
+        }
+    }, [minutesText, minutes, timeSpec, updateTimeSpec]);
+    const handleSecondsOnKeyDown = React.useCallback((event) => {
+        if (event.key === Key.ArrowDown.valueOf()) {
+            const newSeconds = seconds === 0 ? 59 : seconds - 1;
+            setSecondsText(newSeconds.toString().padStart(2, "0"));
+            updateTimeSpec({ ...timeSpec, seconds: newSeconds });
+            event.preventDefault();
+        }
+        else if (event.key === Key.ArrowUp.valueOf()) {
+            const newSeconds = seconds === 59 ? 0 : seconds + 1;
+            setSecondsText(newSeconds.toString().padStart(2, "0"));
+            updateTimeSpec({ ...timeSpec, seconds: newSeconds });
+            event.preventDefault();
+        }
+        else if (event.key === Key.Home.valueOf() ||
+            event.key === Key.End.valueOf()) {
+            const newSeconds = event.key === Key.Home.valueOf() ? 0 : 59;
+            setSecondsText(newSeconds.toString().padStart(2, "0"));
+            updateTimeSpec({ ...timeSpec, seconds: newSeconds });
+            event.preventDefault();
+        }
+        else if (event.key === Key.Enter.valueOf()) {
+            const newSeconds = getValidInt(secondsText, 0, 59, seconds);
+            setSecondsText(newSeconds.toString().padStart(2, "0"));
+            updateTimeSpec({ ...timeSpec, seconds: newSeconds });
+            event.preventDefault();
+        }
+    }, [seconds, secondsText, timeSpec, updateTimeSpec]);
+    const handleDayPeriodOnKeyDown = React.useCallback((event) => {
+        let newPeriodText;
+        if (event.key === Key.ArrowDown.valueOf() ||
+            event.key === Key.Home.valueOf() ||
+            event.key === "a" ||
+            event.key === "A") {
+            newPeriodText = amLabel;
+            event.preventDefault();
+        }
+        else if (event.key === Key.ArrowUp.valueOf() ||
+            event.key === Key.End.valueOf() ||
+            event.key === "p" ||
+            event.key === "P") {
+            newPeriodText = pmLabel;
+            event.preventDefault();
+        }
+        else if (event.key === Key.Enter.valueOf()) {
+            if (dayPeriodText === "AM" ||
+                dayPeriodText === "am" ||
+                dayPeriodText === amLabel)
+                newPeriodText = amLabel;
+            else if (dayPeriodText === "PM" ||
+                dayPeriodText === "pm" ||
+                dayPeriodText === pmLabel)
+                newPeriodText = pmLabel;
+            event.preventDefault();
+        }
+        if (undefined !== newPeriodText) {
+            setDayPeriodText(newPeriodText);
+            if (newPeriodText === amLabel && hours > 12) {
+                updateTimeSpec({ ...timeSpec, hours: hours - 12 });
+            }
+            else if (newPeriodText === pmLabel && hours <= 11) {
+                updateTimeSpec({ ...timeSpec, hours: hours + 12 });
+            }
+        }
+    }, [amLabel, dayPeriodText, hours, pmLabel, timeSpec, updateTimeSpec]);
+    const showSeconds = -1 !== timeDisplay.search(":ss");
+    return (React.createElement("div", { "data-testid": "components-time-input", className: "components-time" },
+        React.createElement(Input, { className: classnames("components-time-input", "components-input"), onKeyDown: handleHoursOnKeyDown, onBlur: handleHoursOnBlur, onChange: handleHoursChange, value: hoursText, disabled: readOnly, size: "small" }),
+        React.createElement("span", { className: "component-time-separator" }, ":"),
+        React.createElement(Input, { className: classnames("components-time-input", "components-input"), onKeyDown: handleMinutesOnKeyDown, onBlur: handleMinutesOnBlur, onChange: handleMinutesChange, value: minutesText, disabled: readOnly, size: "small" }),
+        showSeconds && (React.createElement(React.Fragment, null,
+            React.createElement("span", { className: "component-time-separator" }, ":"),
+            React.createElement(Input, { className: classnames("components-time-input", "components-input"), onKeyDown: handleSecondsOnKeyDown, onBlur: handleSecondsOnBlur, onChange: handleSecondsChange, value: secondsText, disabled: readOnly, size: "small" }))),
+        dayPeriodText && (React.createElement(Input, { className: classnames("components-time-period-input", "components-input"), onKeyDown: handleDayPeriodOnKeyDown, onBlur: handleDayPeriodOnBlur, onChange: handleDayPeriodChange, value: dayPeriodText, disabled: readOnly, size: "small" }))));
+}
+//# sourceMappingURL=TimeField.js.map