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

package/lib/cjs/components-react/editors/DateTimeEditor.js

@@ -1,303 +1,306 @@
-"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 PropertyEditors
- */
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateTimePropertyEditor = exports.ShortDateTimePropertyEditor = exports.DateTimeEditor = void 0;
-require("./DateTimeEditor.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const PropertyEditorManager_1 = require("./PropertyEditorManager");
-const PopupButton_1 = require("./PopupButton");
-const TimeField_1 = require("../datepicker/TimeField");
-const DatePicker_1 = require("../datepicker/DatePicker");
-const TypeConverterManager_1 = require("../converters/TypeConverterManager");
-const DateTimeTypeConverter_1 = require("../converters/DateTimeTypeConverter");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-const DateUtils_1 = require("../common/DateUtils");
-/** DateTimeEditor React component that is a property editor for selection of date and time.
- * @internal
- */
-class DateTimeEditor extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._isMounted = false;
-        this._enterKey = false;
-        this._divElement = React.createRef();
-        /** @internal */
-        this.state = {
-            value: new Date(),
-            editInUtc: false,
-        };
-        this._handleChange = (newValue) => {
-            // istanbul ignore else
-            if (this._isMounted && this.state.typeConverter) {
-                // istanbul ignore else
-                if (this.state.editInUtc) {
-                    newValue = (0, DateUtils_1.adjustDateToTimezone)(newValue, newValue.getTimezoneOffset() * -1);
-                }
-                // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                this.processDateChange(this.state.typeConverter, newValue);
-            }
-        };
-        this._handleTimeChange = (time) => {
-            // Combine new time into selected Date
-            if (this.state.editInUtc) {
-                const newWorkingDate = (0, DateUtils_1.adjustDateToTimezone)(this.state.value, 0);
-                newWorkingDate.setUTCHours(time.hours, time.minutes, time.seconds);
-                this._handleChange(newWorkingDate);
-            }
-            else {
-                const newWorkingDate = new Date(this.state.value.getTime());
-                newWorkingDate.setHours(time.hours, time.minutes, time.seconds);
-                this._handleChange(newWorkingDate);
-            }
-        };
-        this._handleEnter = async () => {
-            this._enterKey = true;
-            await this._handleCommit();
-        };
-        this._handleClose = async () => {
-            if (this._enterKey) {
-                this._enterKey = false;
-            }
-            else {
-                // istanbul ignore next
-                if (this.props.onCancel)
-                    this.props.onCancel();
-            }
-        };
-        this._handleOk = async (_event) => {
-            await this._handleCommit();
-        };
-        this._handleCancel = (_event) => {
-            // istanbul ignore else
-            if (this.props.onCancel) {
-                this.props.onCancel();
-            }
-        };
-        this._handleCommit = async () => {
-            // istanbul ignore else
-            if (this.props.propertyRecord && this.props.onCommit) {
-                const propertyValue = await this.getPropertyValue();
-                // istanbul ignore else
-                if (propertyValue !== undefined) {
-                    this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });
-                }
-            }
-        };
-    }
-    async getPropertyValue() {
-        const record = this.props.propertyRecord;
-        let propertyValue;
-        // istanbul ignore else
-        if (record && record.value.valueFormat === appui_abstract_1.PropertyValueFormat.Primitive) {
-            propertyValue = {
-                valueFormat: appui_abstract_1.PropertyValueFormat.Primitive,
-                value: this.state.value,
-                displayValue: this.state.displayValue,
-            };
-        }
-        return propertyValue;
-    }
-    get htmlElement() {
-        return this._divElement.current;
-    }
-    get hasFocus() {
-        let containsFocus = false;
-        // istanbul ignore else
-        if (this.htmlElement)
-            containsFocus = this.htmlElement.contains(document.activeElement);
-        return containsFocus;
-    }
-    async processDateChange(typeConverter, newValue) {
-        // istanbul ignore else
-        if (this.props.propertyRecord) {
-            const displayValue = await typeConverter.convertPropertyToString(this.props.propertyRecord.property, newValue);
-            this.setState({
-                value: newValue,
-                displayValue,
-            });
-        }
-    }
-    /** @internal */
-    componentDidMount() {
-        this._isMounted = true;
-        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
-    }
-    /** @internal */
-    componentWillUnmount() {
-        this._isMounted = false;
-    }
-    /** @internal */
-    componentDidUpdate(prevProps) {
-        if (this.props.propertyRecord !== prevProps.propertyRecord) {
-            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
-        }
-    }
-    async setStateFromProps() {
-        var _a, _b;
-        const record = this.props.propertyRecord;
-        let initialValue;
-        let typeConverter;
-        let timeDisplay;
-        let alternateDateFormat = appui_abstract_1.AlternateDateFormats.None;
-        let editInUtc = false;
-        // istanbul ignore else
-        if (this.props.showTime)
-            timeDisplay = appui_abstract_1.TimeDisplay.H12MC;
-        // istanbul ignore else
-        if (record && record.value.valueFormat === appui_abstract_1.PropertyValueFormat.Primitive) {
-            // istanbul ignore else
-            if (record.value.value instanceof Date)
-                initialValue = new Date(record.value.value);
-            else if (typeof record.value.value === "string")
-                initialValue = new Date(record.value.value);
-            else if (record.value.value === undefined)
-                initialValue = new Date();
-            typeConverter = TypeConverterManager_1.TypeConverterManager.getConverter(record.property.typename, (_a = record.property.converter) === null || _a === void 0 ? void 0 : _a.name);
-            const options = (_b = record.property.converter) === null || _b === void 0 ? void 0 : _b.options;
-            if (options) {
-                // istanbul ignore else
-                if ("alternateDateFormat" in options) {
-                    // istanbul ignore else
-                    if (DateTimeTypeConverter_1.DateTimeTypeConverterBase.isAlternateDateFormats(options.alternateDateFormat)) {
-                        timeDisplay = appui_abstract_1.TimeDisplay.H24MS;
-                        alternateDateFormat = options.alternateDateFormat;
-                    }
-                }
-                if ("timeDisplay" in options && this.props.showTime) {
-                    timeDisplay = options.timeDisplay;
-                    // use 24 hr time display if alternateDateFormat is defined
-                    // istanbul ignore next
-                    if (alternateDateFormat && timeDisplay !== appui_abstract_1.TimeDisplay.H24MS && timeDisplay !== appui_abstract_1.TimeDisplay.H24M)
-                        timeDisplay = appui_abstract_1.TimeDisplay.H24MS;
-                }
-                // istanbul ignore else
-                if (alternateDateFormat) {
-                    editInUtc = true;
-                    if (this.props.showTime) {
-                        if (alternateDateFormat === appui_abstract_1.AlternateDateFormats.IsoShort) {
-                            alternateDateFormat = appui_abstract_1.AlternateDateFormats.IsoDateTime;
-                        }
-                        if (alternateDateFormat === appui_abstract_1.AlternateDateFormats.UtcShort) {
-                            alternateDateFormat = appui_abstract_1.AlternateDateFormats.UtcDateTime;
-                        }
-                        if (alternateDateFormat === appui_abstract_1.AlternateDateFormats.UtcShortWithDay) {
-                            alternateDateFormat = appui_abstract_1.AlternateDateFormats.UtcDateTimeWithDay;
-                        }
-                    }
-                    else {
-                        timeDisplay = undefined;
-                        if (alternateDateFormat === appui_abstract_1.AlternateDateFormats.IsoDateTime)
-                            alternateDateFormat = appui_abstract_1.AlternateDateFormats.IsoShort;
-                        if (alternateDateFormat === appui_abstract_1.AlternateDateFormats.UtcDateTime)
-                            alternateDateFormat = appui_abstract_1.AlternateDateFormats.UtcShort;
-                        if (alternateDateFormat === appui_abstract_1.AlternateDateFormats.UtcDateTimeWithDay)
-                            alternateDateFormat = appui_abstract_1.AlternateDateFormats.UtcShortWithDay;
-                    }
-                }
-            }
-        }
-        // istanbul ignore next
-        if (!initialValue) {
-            throw new Error("Bad Value");
-        }
-        // istanbul ignore next
-        if (!typeConverter) {
-            throw new Error("Unable to determine TypeConverter");
-        }
-        const isDisabled = record && !!record.isDisabled;
-        const displayValue = await typeConverter.convertPropertyToString(record.property, initialValue);
-        // istanbul ignore else
-        if (this._isMounted)
-            this.setState({
-                value: initialValue,
-                isDisabled,
-                timeDisplay,
-                typeConverter,
-                displayValue,
-                editInUtc,
-            });
-    }
-    /** @internal */
-    render() {
-        const date = this.state.editInUtc ? (0, DateUtils_1.adjustDateToTimezone)(this.state.value, 0) : this.state.value;
-        const timeSpec = {
-            hours: date.getHours(),
-            minutes: date.getMinutes(),
-            seconds: date.getSeconds(),
-        };
-        const className = (0, classnames_1.default)("components-cell-editor", "components-datetime-editor", this.props.className);
-        return (React.createElement("div", { className: className, ref: this._divElement },
-            React.createElement(PopupButton_1.PopupButton, { label: this.state.displayValue, onClose: this._handleClose, onEnter: this._handleEnter, setFocus: this.props.setFocus },
-                React.createElement(PopupButton_1.PopupContent, null,
-                    React.createElement(React.Fragment, null,
-                        React.createElement("div", { className: "components-date-picker-calendar-popup-panel", "data-testid": "components-date-picker-calendar-popup-panel" },
-                            React.createElement(DatePicker_1.DatePicker, { selected: date, onDateChange: this._handleChange, showFocusOutline: false }),
-                            this.state.timeDisplay &&
-                                React.createElement("div", { className: "time-container" },
-                                    React.createElement(itwinui_react_1.Text, { variant: "body", className: "time-label" }, "Time"),
-                                    React.createElement(TimeField_1.TimeField, { time: timeSpec, timeDisplay: this.state.timeDisplay, onTimeChange: this._handleTimeChange })))),
-                    React.createElement(PopupButton_1.PopupOkCancelButtons, { onOk: this._handleOk, onCancel: this._handleCancel })))));
-    }
-}
-exports.DateTimeEditor = DateTimeEditor;
-/** DateTime Property Editor registered for the "number" type name and "DateTime" editor name.
-  * It uses the [[DateTimeEditor]] React component.
-  * @internal
-  */
-class ShortDateTimePropertyEditor extends PropertyEditorManager_1.PropertyEditorBase {
-    get reactNode() {
-        return React.createElement(DateTimeEditor, { showTime: false });
-    }
-    // istanbul ignore next
-    get containerHandlesTab() {
-        return false;
-    }
-}
-exports.ShortDateTimePropertyEditor = ShortDateTimePropertyEditor;
-/** DateTime Property Editor registered for the "number" type name and "DateTime" editor name.
-  * It uses the [[DateTimeEditor]] React component.
-  * @internal
-  */
-class DateTimePropertyEditor extends PropertyEditorManager_1.PropertyEditorBase {
-    get reactNode() {
-        return React.createElement(DateTimeEditor, { showTime: true });
-    }
-    // istanbul ignore next
-    get containerHandlesTab() {
-        return false;
-    }
-}
-exports.DateTimePropertyEditor = DateTimePropertyEditor;
-PropertyEditorManager_1.PropertyEditorManager.registerEditor(appui_abstract_1.StandardTypeNames.ShortDate, ShortDateTimePropertyEditor);
-PropertyEditorManager_1.PropertyEditorManager.registerEditor(appui_abstract_1.StandardTypeNames.DateTime, DateTimePropertyEditor);
+"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 PropertyEditors
+ */
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateTimePropertyEditor = exports.ShortDateTimePropertyEditor = exports.DateTimeEditor = void 0;
+require("./DateTimeEditor.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const PropertyEditorManager_1 = require("./PropertyEditorManager");
+const PopupButton_1 = require("./PopupButton");
+const TimeField_1 = require("../datepicker/TimeField");
+const DatePicker_1 = require("../datepicker/DatePicker");
+const TypeConverterManager_1 = require("../converters/TypeConverterManager");
+const DateTimeTypeConverter_1 = require("../converters/DateTimeTypeConverter");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const DateUtils_1 = require("../common/DateUtils");
+/** DateTimeEditor React component that is a property editor for selection of date and time.
+ * @internal
+ */
+class DateTimeEditor extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._isMounted = false;
+        this._enterKey = false;
+        this._divElement = React.createRef();
+        /** @internal */
+        this.state = {
+            value: new Date(),
+            editInUtc: false,
+        };
+        this._handleChange = (newValue) => {
+            // istanbul ignore else
+            if (this._isMounted && this.state.typeConverter) {
+                // istanbul ignore else
+                if (this.state.editInUtc) {
+                    newValue = (0, DateUtils_1.adjustDateToTimezone)(newValue, newValue.getTimezoneOffset() * -1);
+                }
+                // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                this.processDateChange(this.state.typeConverter, newValue);
+            }
+        };
+        this._handleTimeChange = (time) => {
+            // Combine new time into selected Date
+            if (this.state.editInUtc) {
+                const newWorkingDate = (0, DateUtils_1.adjustDateToTimezone)(this.state.value, 0);
+                newWorkingDate.setUTCHours(time.hours, time.minutes, time.seconds);
+                this._handleChange(newWorkingDate);
+            }
+            else {
+                const newWorkingDate = new Date(this.state.value.getTime());
+                newWorkingDate.setHours(time.hours, time.minutes, time.seconds);
+                this._handleChange(newWorkingDate);
+            }
+        };
+        this._handleEnter = async () => {
+            this._enterKey = true;
+            await this._handleCommit();
+        };
+        this._handleClose = async () => {
+            if (this._enterKey) {
+                this._enterKey = false;
+            }
+            else {
+                // istanbul ignore next
+                if (this.props.onCancel)
+                    this.props.onCancel();
+            }
+        };
+        this._handleOk = async (_event) => {
+            await this._handleCommit();
+        };
+        this._handleCancel = (_event) => {
+            // istanbul ignore else
+            if (this.props.onCancel) {
+                this.props.onCancel();
+            }
+        };
+        this._handleCommit = async () => {
+            // istanbul ignore else
+            if (this.props.propertyRecord && this.props.onCommit) {
+                const propertyValue = await this.getPropertyValue();
+                // istanbul ignore else
+                if (propertyValue !== undefined) {
+                    this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });
+                }
+            }
+        };
+    }
+    async getPropertyValue() {
+        const record = this.props.propertyRecord;
+        let propertyValue;
+        // istanbul ignore else
+        if (record && record.value.valueFormat === appui_abstract_1.PropertyValueFormat.Primitive) {
+            propertyValue = {
+                valueFormat: appui_abstract_1.PropertyValueFormat.Primitive,
+                value: this.state.value,
+                displayValue: this.state.displayValue,
+            };
+        }
+        return propertyValue;
+    }
+    get htmlElement() {
+        return this._divElement.current;
+    }
+    get hasFocus() {
+        let containsFocus = false;
+        // istanbul ignore else
+        if (this.htmlElement)
+            containsFocus = this.htmlElement.contains(document.activeElement);
+        return containsFocus;
+    }
+    async processDateChange(typeConverter, newValue) {
+        // istanbul ignore else
+        if (this.props.propertyRecord) {
+            const displayValue = await typeConverter.convertPropertyToString(this.props.propertyRecord.property, newValue);
+            this.setState({
+                value: newValue,
+                displayValue,
+            });
+        }
+    }
+    /** @internal */
+    componentDidMount() {
+        this._isMounted = true;
+        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+    }
+    /** @internal */
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+    /** @internal */
+    componentDidUpdate(prevProps) {
+        if (this.props.propertyRecord !== prevProps.propertyRecord) {
+            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+        }
+    }
+    async setStateFromProps() {
+        const record = this.props.propertyRecord;
+        let initialValue;
+        let typeConverter;
+        let timeDisplay;
+        let alternateDateFormat = appui_abstract_1.AlternateDateFormats.None;
+        let editInUtc = false;
+        // istanbul ignore else
+        if (this.props.showTime)
+            timeDisplay = appui_abstract_1.TimeDisplay.H12MC;
+        // istanbul ignore else
+        if (record && record.value.valueFormat === appui_abstract_1.PropertyValueFormat.Primitive) {
+            // istanbul ignore else
+            if (record.value.value instanceof Date)
+                initialValue = new Date(record.value.value);
+            else if (typeof record.value.value === "string")
+                initialValue = new Date(record.value.value);
+            else if (record.value.value === undefined)
+                initialValue = new Date();
+            typeConverter = TypeConverterManager_1.TypeConverterManager.getConverter(record.property.typename, record.property.converter?.name);
+            const options = record.property.converter?.options;
+            if (options) {
+                // istanbul ignore else
+                if ("alternateDateFormat" in options) {
+                    // istanbul ignore else
+                    if (DateTimeTypeConverter_1.DateTimeTypeConverterBase.isAlternateDateFormats(options.alternateDateFormat)) {
+                        timeDisplay = appui_abstract_1.TimeDisplay.H24MS;
+                        alternateDateFormat = options.alternateDateFormat;
+                    }
+                }
+                if ("timeDisplay" in options && this.props.showTime) {
+                    timeDisplay = options.timeDisplay;
+                    // use 24 hr time display if alternateDateFormat is defined
+                    // istanbul ignore next
+                    if (alternateDateFormat && timeDisplay !== appui_abstract_1.TimeDisplay.H24MS && timeDisplay !== appui_abstract_1.TimeDisplay.H24M)
+                        timeDisplay = appui_abstract_1.TimeDisplay.H24MS;
+                }
+                // istanbul ignore else
+                if (alternateDateFormat) {
+                    editInUtc = true;
+                    if (this.props.showTime) {
+                        if (alternateDateFormat === appui_abstract_1.AlternateDateFormats.IsoShort) {
+                            alternateDateFormat = appui_abstract_1.AlternateDateFormats.IsoDateTime;
+                        }
+                        if (alternateDateFormat === appui_abstract_1.AlternateDateFormats.UtcShort) {
+                            alternateDateFormat = appui_abstract_1.AlternateDateFormats.UtcDateTime;
+                        }
+                        if (alternateDateFormat === appui_abstract_1.AlternateDateFormats.UtcShortWithDay) {
+                            alternateDateFormat = appui_abstract_1.AlternateDateFormats.UtcDateTimeWithDay;
+                        }
+                    }
+                    else {
+                        timeDisplay = undefined;
+                        if (alternateDateFormat === appui_abstract_1.AlternateDateFormats.IsoDateTime)
+                            alternateDateFormat = appui_abstract_1.AlternateDateFormats.IsoShort;
+                        if (alternateDateFormat === appui_abstract_1.AlternateDateFormats.UtcDateTime)
+                            alternateDateFormat = appui_abstract_1.AlternateDateFormats.UtcShort;
+                        if (alternateDateFormat === appui_abstract_1.AlternateDateFormats.UtcDateTimeWithDay)
+                            alternateDateFormat = appui_abstract_1.AlternateDateFormats.UtcShortWithDay;
+                    }
+                }
+            }
+        }
+        // istanbul ignore next
+        if (!initialValue) {
+            throw new Error("Bad Value");
+        }
+        // istanbul ignore next
+        if (!typeConverter) {
+            throw new Error("Unable to determine TypeConverter");
+        }
+        const isDisabled = record && !!record.isDisabled;
+        const displayValue = await typeConverter.convertPropertyToString(record.property, initialValue);
+        // istanbul ignore else
+        if (this._isMounted)
+            this.setState({
+                value: initialValue,
+                isDisabled,
+                timeDisplay,
+                typeConverter,
+                displayValue,
+                editInUtc,
+            });
+    }
+    /** @internal */
+    render() {
+        const date = this.state.editInUtc ? (0, DateUtils_1.adjustDateToTimezone)(this.state.value, 0) : this.state.value;
+        const timeSpec = {
+            hours: date.getHours(),
+            minutes: date.getMinutes(),
+            seconds: date.getSeconds(),
+        };
+        const className = (0, classnames_1.default)("components-cell-editor", "components-datetime-editor", this.props.className);
+        return (React.createElement("div", { className: className, ref: this._divElement },
+            React.createElement(PopupButton_1.PopupButton, { label: this.state.displayValue, onClose: this._handleClose, onEnter: this._handleEnter, setFocus: this.props.setFocus },
+                React.createElement(PopupButton_1.PopupContent, null,
+                    React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: "components-date-picker-calendar-popup-panel", "data-testid": "components-date-picker-calendar-popup-panel" },
+                            React.createElement(DatePicker_1.DatePicker, { selected: date, onDateChange: this._handleChange, showFocusOutline: false }),
+                            this.state.timeDisplay &&
+                                React.createElement("div", { className: "time-container" },
+                                    React.createElement(itwinui_react_1.Text, { variant: "body", className: "time-label" }, "Time"),
+                                    React.createElement(TimeField_1.TimeField, { time: timeSpec, timeDisplay: this.state.timeDisplay, onTimeChange: this._handleTimeChange })))),
+                    React.createElement(PopupButton_1.PopupOkCancelButtons, { onOk: this._handleOk, onCancel: this._handleCancel })))));
+    }
+}
+exports.DateTimeEditor = DateTimeEditor;
+/** DateTime Property Editor registered for the "number" type name and "DateTime" editor name.
+  * It uses the [[DateTimeEditor]] React component.
+  * @internal
+  */
+class ShortDateTimePropertyEditor extends PropertyEditorManager_1.PropertyEditorBase {
+    get reactNode() {
+        return React.createElement(DateTimeEditor, { showTime: false });
+    }
+    // istanbul ignore next
+    get containerHandlesTab() {
+        return false;
+    }
+}
+exports.ShortDateTimePropertyEditor = ShortDateTimePropertyEditor;
+/** DateTime Property Editor registered for the "number" type name and "DateTime" editor name.
+  * It uses the [[DateTimeEditor]] React component.
+  * @internal
+  */
+class DateTimePropertyEditor extends PropertyEditorManager_1.PropertyEditorBase {
+    get reactNode() {
+        return React.createElement(DateTimeEditor, { showTime: true });
+    }
+    // istanbul ignore next
+    get containerHandlesTab() {
+        return false;
+    }
+}
+exports.DateTimePropertyEditor = DateTimePropertyEditor;
+PropertyEditorManager_1.PropertyEditorManager.registerEditor(appui_abstract_1.StandardTypeNames.ShortDate, ShortDateTimePropertyEditor);
+PropertyEditorManager_1.PropertyEditorManager.registerEditor(appui_abstract_1.StandardTypeNames.DateTime, DateTimePropertyEditor);
 //# sourceMappingURL=DateTimeEditor.js.map