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

package/lib/components-react/editors/CustomNumberEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomNumberEditor.js","sourceRoot":"","sources":["../../../src/components-react/editors/CustomNumberEditor.tsx"],"names":[],"mappings":"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","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 PropertyEditors\n */\n\n// cSpell:ignore customnumber testid\n\nimport \"./CustomNumberEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport { Logger } from \"@itwin/core-bentley\";\nimport type {\n  CustomFormattedNumberParams,\n  IconEditorParams,\n  InputEditorSizeParams,\n  PrimitiveValue,\n  PropertyEditorParams,\n  PropertyRecord,\n  PropertyValue,\n} from \"@itwin/appui-abstract\";\nimport {\n  MessageSeverity,\n  PropertyEditorParamTypes,\n  PropertyValueFormat,\n  UiAdmin,\n} from \"@itwin/appui-abstract\";\nimport { Icon, IconInput } from \"@itwin/core-react\";\nimport { Input } from \"@itwin/itwinui-react\";\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Input>;\n\nimport { UiComponents } from \"../UiComponents.js\";\nimport type { PropertyEditorProps, TypeEditor } from \"./EditorContainer.js\";\nimport { PropertyEditorBase } from \"./PropertyEditorManager.js\";\n\n/** @internal */\ninterface CustomNumberEditorState {\n  inputValue: string;\n  size?: number;\n  maxLength?: number;\n  iconSpec?: string;\n}\n\n/** CustomNumberEditor is a React component that is a property editor for numbers that specify custom formatting and parsing functions.\n * @alpha\n */\nexport class CustomNumberEditor\n  extends React.PureComponent<PropertyEditorProps, CustomNumberEditorState>\n  implements TypeEditor\n{\n  private _isMounted = false;\n  private _formatParams: CustomFormattedNumberParams | undefined;\n  private _inputElement = React.createRef<HTMLInputElement>();\n  private _lastValidValue: PropertyValue | undefined;\n\n  public override readonly state: Readonly<CustomNumberEditorState> = {\n    inputValue: \"\",\n  };\n\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\n    const record = this.props.propertyRecord as PropertyRecord;\n    let propertyValue: PropertyValue | undefined;\n\n    if (record.isReadonly) {\n      return {\n        valueFormat: PropertyValueFormat.Primitive,\n        value: (record.value as PrimitiveValue).value,\n        displayValue: (record.value as PrimitiveValue).displayValue,\n      };\n    }\n\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      const parseResults = (\n        this._formatParams as CustomFormattedNumberParams\n      ).parseFunction(this.state.inputValue);\n      if (!parseResults.parseError && undefined !== parseResults.value) {\n        const newDisplayValue = (\n          this._formatParams as CustomFormattedNumberParams\n        ).formatFunction(parseResults.value as number);\n        propertyValue = {\n          valueFormat: PropertyValueFormat.Primitive,\n          value: parseResults.value,\n          displayValue: newDisplayValue,\n        };\n        this._lastValidValue = { ...propertyValue };\n        // make sure the text in the input item matches the latest formatted text... this could get out if the input string say 1.5 === the display string of 1'-6\"\n        if (newDisplayValue !== this.state.inputValue) {\n          this.setState({ inputValue: newDisplayValue });\n        }\n      } else {\n        if (this.htmlElement) {\n          UiAdmin.messagePresenter.displayInputFieldMessage(\n            this.htmlElement,\n            MessageSeverity.Error,\n            parseResults.parseError\n              ? parseResults.parseError\n              : UiComponents.translate(\"errors.unable-to-parse-quantity\")\n          );\n          this.htmlElement.focus();\n        } else {\n          UiAdmin.messagePresenter.displayMessage(\n            MessageSeverity.Error,\n            parseResults.parseError\n              ? parseResults.parseError\n              : UiComponents.translate(\"errors.unable-to-parse-quantity\")\n          );\n        }\n\n        const displayValue =\n          record.value.displayValue && record.value.displayValue.length > 0\n            ? record.value.displayValue\n            : (\n                this._formatParams as CustomFormattedNumberParams\n              ).formatFunction(record.value.value as number);\n        propertyValue = this._lastValidValue\n          ? { ...this._lastValidValue }\n          : {\n              valueFormat: PropertyValueFormat.Primitive,\n              value: record.value.value,\n              displayValue,\n            };\n      }\n    }\n\n    return propertyValue;\n  }\n\n  public get htmlElement(): HTMLElement | null {\n    return this._inputElement.current;\n  }\n\n  public get hasFocus(): boolean {\n    return document.activeElement === this._inputElement.current;\n  }\n\n  private shouldSetFocus(): boolean {\n    if (!this.props.setFocus) return false;\n\n    const record = this.props.propertyRecord as PropertyRecord;\n    const disabled = record && !record.isDisabled ? false : true;\n    const readonly = record && !record.isReadonly ? false : true;\n\n    return !disabled && !readonly;\n  }\n\n  private _applyUpdatedValue(userInput: string) {\n    const record = this.props.propertyRecord as PropertyRecord;\n    const readonly = record && !record.isReadonly ? false : true;\n    const disabled = record && !record.isDisabled ? false : true;\n\n    if (readonly || disabled) return;\n\n    if (this._isMounted)\n      this.setState({\n        inputValue: userInput,\n      });\n  }\n\n  private _updateInputValue = (e: React.ChangeEvent<HTMLInputElement>) => {\n    this._applyUpdatedValue(e.target.value);\n  };\n\n  public override componentDidMount() {\n    this._isMounted = true;\n    void this.setStateFromProps();\n  }\n\n  public override componentWillUnmount() {\n    this._isMounted = false;\n  }\n\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      void this.setStateFromProps();\n    }\n  }\n\n  private _getInitialDisplayValue(): string {\n    const record = this.props.propertyRecord;\n    let initialDisplayValue = \"\";\n    let numberValue = 0;\n    if (record) {\n      if (record.value.valueFormat === PropertyValueFormat.Primitive) {\n        const primitiveValue = record.value;\n        numberValue =\n          undefined !== primitiveValue.value\n            ? (primitiveValue.value as number)\n            : 0;\n        if (primitiveValue.displayValue)\n          initialDisplayValue = primitiveValue.displayValue;\n        else\n          initialDisplayValue = (\n            this._formatParams as CustomFormattedNumberParams\n          ).formatFunction(numberValue);\n      }\n    }\n\n    return initialDisplayValue;\n  }\n\n  private async setStateFromProps() {\n    const record = this.props.propertyRecord;\n    if (!record || !record.property) {\n      Logger.logError(\n        UiComponents.loggerCategory(\"CustomNumberEditor\"),\n        \"PropertyRecord must be defined to use CustomNumberPropertyEditor\"\n      );\n      return;\n    }\n    if (\n      record.property &&\n      record.property.editor &&\n      record.property.editor.params\n    ) {\n      this._formatParams = record.property.editor.params.find(\n        (param: PropertyEditorParams) =>\n          param.type ===\n          PropertyEditorParamTypes.CustomFormattedNumber.valueOf()\n      ) as CustomFormattedNumberParams;\n    }\n\n    if (!this._formatParams) {\n      Logger.logError(\n        UiComponents.loggerCategory(\"CustomNumberEditor\"),\n        `CustomFormattedNumberParams must be defined for property ${record.property.name}`\n      );\n      return;\n    }\n\n    const initialDisplayValue = this._getInitialDisplayValue();\n    this._lastValidValue = {\n      valueFormat: PropertyValueFormat.Primitive,\n      value: (record.value as PrimitiveValue).value,\n      displayValue: initialDisplayValue,\n    };\n    let size: number | undefined;\n    let maxLength: number | undefined;\n    let iconSpec: string | undefined;\n\n    if (\n      record.property &&\n      record.property.editor &&\n      record.property.editor.params\n    ) {\n      const editorSizeParams = record.property.editor.params.find(\n        (param: PropertyEditorParams) =>\n          param.type === PropertyEditorParamTypes.InputEditorSize.valueOf()\n      ) as InputEditorSizeParams;\n      if (editorSizeParams) {\n        if (editorSizeParams.size) size = editorSizeParams.size;\n        if (editorSizeParams.maxLength) maxLength = editorSizeParams.maxLength;\n      }\n\n      const iconParams = record.property.editor.params.find(\n        (param: PropertyEditorParams) =>\n          param.type === PropertyEditorParamTypes.Icon.valueOf()\n      ) as IconEditorParams;\n      if (iconParams) {\n        iconSpec = iconParams.definition.iconSpec;\n      }\n    }\n\n    if (this._isMounted)\n      this.setState({\n        inputValue: initialDisplayValue,\n        size,\n        maxLength,\n        iconSpec,\n      });\n  }\n\n  private _resetToLastValidDisplayValue() {\n    const initialDisplayValue =\n      (this._lastValidValue &&\n        (this._lastValidValue as PrimitiveValue).displayValue) ??\n      this._getInitialDisplayValue();\n    this.setState({ inputValue: initialDisplayValue });\n  }\n\n  private _onKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === Key.Escape.valueOf()) {\n      const initialDisplayValue =\n        (this._lastValidValue &&\n          (this._lastValidValue as PrimitiveValue).displayValue) ??\n        this._getInitialDisplayValue();\n      if (initialDisplayValue !== this.state.inputValue) {\n        e.preventDefault();\n        e.stopPropagation();\n        this._resetToLastValidDisplayValue();\n      } else {\n        if (this.props.onCancel) this.props.onCancel();\n      }\n    }\n\n    if (e.key !== Key.Enter.valueOf()) {\n      UiAdmin.messagePresenter.closeInputFieldMessage();\n    }\n  };\n\n  private _onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    e.target.select();\n  };\n\n  public override render(): React.ReactNode {\n    const minSize = this.state.size ? this.state.size : 8;\n    const minWidthStyle: React.CSSProperties = {\n      minWidth: `${minSize * 0.75}em`,\n    };\n    const record = this.props.propertyRecord as PropertyRecord;\n    if (!record || !this._formatParams) return null;\n\n    const readOnly = !record.isReadonly ? false : true;\n    const disabled = !record.isDisabled ? false : true;\n\n    const className = classnames(\n      \"components-cell-editor\",\n      \"components-customnumber-editor\",\n      this.props.className\n    );\n\n    const inputProps: Omit<InputProps, \"size\"> = {\n      className,\n      style: this.props.style ? this.props.style : minWidthStyle,\n      readOnly,\n      disabled,\n      maxLength: this.state.maxLength,\n      value: this.state.inputValue,\n      onChange: this._updateInputValue,\n      onBlur: this.props.onBlur,\n      onFocus: this._onFocus,\n      autoFocus: this.shouldSetFocus(),\n      onKeyDown: this._onKeyPress,\n    };\n\n    let reactNode: React.ReactNode;\n    if (this.state.iconSpec) {\n      // eslint-disable-next-line deprecation/deprecation\n      const icon = <Icon iconSpec={this.state.iconSpec} />;\n      reactNode = (\n        // eslint-disable-next-line deprecation/deprecation\n        <IconInput\n          {...inputProps}\n          ref={this._inputElement}\n          icon={icon}\n          data-testid=\"components-customnumber-editor\"\n        />\n      );\n    } else {\n      reactNode = (\n        <Input\n          {...inputProps}\n          ref={this._inputElement}\n          data-testid=\"components-customnumber-editor\"\n          size=\"small\"\n          id={this.props.propertyRecord?.property.name}\n        />\n      );\n    }\n\n    return reactNode;\n  }\n}\n\n/** Custom Property Editor registered for the \"number\" type name and the \"number-custom\" editor name.\n * It uses the [[CustomNumberEditor]] React component.\n * @alpha\n */\nexport class CustomNumberPropertyEditor extends PropertyEditorBase {\n  public get reactNode(): React.ReactNode {\n    return <CustomNumberEditor />;\n  }\n  public override get containerHandlesEscape(): boolean {\n    return false;\n  }\n}\n"]}

package/lib/components-react/editors/CustomNumberEditor.scss

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "./variables" as *;
+
+.components-customnumber-editor {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+.components-smallEditor-host {
+  .components-customnumber-editor {
+    min-height: $editor-component-height-small !important;
+    padding-top: 1px !important;
+    padding-bottom: 1px !important;
+  }
+}

package/lib/components-react/editors/DateTimeEditor.d.ts

@@ -0,0 +1,66 @@
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./DateTimeEditor.scss";
+import * as React from "react";
+import type { PropertyValue } from "@itwin/appui-abstract";
+import { TimeDisplay } from "@itwin/appui-abstract";
+import type { PropertyEditorProps, TypeEditor } from "./EditorContainer.js";
+import { PropertyEditorBase } from "./PropertyEditorManager.js";
+import type { TypeConverter } from "../converters/TypeConverter.js";
+/** @internal */
+interface DateTimeEditorState {
+    value: Date;
+    displayValue?: string;
+    timeDisplay?: TimeDisplay;
+    isDisabled?: boolean;
+    typeConverter?: TypeConverter;
+    editInUtc: boolean;
+}
+/** @internal */
+interface DateTimeEditorProps extends PropertyEditorProps {
+    showTime?: boolean;
+}
+/** DateTimeEditor React component that is a property editor for selection of date and time.
+ * @internal
+ */
+export declare class DateTimeEditor extends React.PureComponent<DateTimeEditorProps, DateTimeEditorState> implements TypeEditor {
+    private _isMounted;
+    private _enterKey;
+    private _divElement;
+    readonly state: Readonly<DateTimeEditorState>;
+    getPropertyValue(): Promise<PropertyValue | undefined>;
+    get htmlElement(): HTMLElement | null;
+    get hasFocus(): boolean;
+    processDateChange(typeConverter: TypeConverter, newValue: Date): Promise<void>;
+    private _handleChange;
+    private _handleTimeChange;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: PropertyEditorProps): void;
+    private setStateFromProps;
+    private _handleEnter;
+    private _handleClose;
+    private _handleOk;
+    private _handleCancel;
+    private _handleCommit;
+    render(): React.ReactNode;
+}
+/** DateTime Property Editor registered for the "number" type name and "DateTime" editor name.
+ * It uses the [[DateTimeEditor]] React component.
+ * @internal
+ */
+export declare class ShortDateTimePropertyEditor extends PropertyEditorBase {
+    get reactNode(): React.ReactNode;
+    get containerHandlesTab(): boolean;
+}
+/** DateTime Property Editor registered for the "number" type name and "DateTime" editor name.
+ * It uses the [[DateTimeEditor]] React component.
+ * @internal
+ */
+export declare class DateTimePropertyEditor extends PropertyEditorBase {
+    get reactNode(): React.ReactNode;
+    get containerHandlesTab(): boolean;
+}
+export {};
+//# sourceMappingURL=DateTimeEditor.d.ts.map

package/lib/components-react/editors/DateTimeEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeEditor.d.ts","sourceRoot":"","sources":["../../../src/components-react/editors/DateTimeEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAGL,WAAW,EACZ,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAQhE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AASpE,gBAAgB;AAChB,UAAU,mBAAmB;IAC3B,KAAK,EAAE,IAAI,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,gBAAgB;AAChB,UAAU,mBAAoB,SAAQ,mBAAmB;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,qBAAa,cACX,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,mBAAmB,CACpE,YAAW,UAAU;IAErB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAqC;IAExD,SAAyB,KAAK,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAG3D;IAEW,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;IAenE,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,IAAW,QAAQ,IAAI,OAAO,CAK7B;IAEY,iBAAiB,CAC5B,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,IAAI,GACb,OAAO,CAAC,IAAI,CAAC;IAahB,OAAO,CAAC,aAAa,CAWnB;IAEF,OAAO,CAAC,iBAAiB,CAWvB;IAEc,iBAAiB;IAKjB,oBAAoB;IAIpB,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;YAMnD,iBAAiB;IAiG/B,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,YAAY,CAMlB;IAEF,OAAO,CAAC,SAAS,CAEf;IAEF,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,aAAa,CAUnB;IAEc,MAAM,IAAI,KAAK,CAAC,SAAS;CA0D1C;AAED;;;GAGG;AACH,qBAAa,2BAA4B,SAAQ,kBAAkB;IACjE,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;IACD,IAAoB,mBAAmB,IAAI,OAAO,CAEjD;CACF;AAED;;;GAGG;AACH,qBAAa,sBAAuB,SAAQ,kBAAkB;IAC5D,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;IACD,IAAoB,mBAAmB,IAAI,OAAO,CAEjD;CACF"}

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

@@ -0,0 +1,252 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import "./DateTimeEditor.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { AlternateDateFormats, PropertyValueFormat, TimeDisplay, } from "@itwin/appui-abstract";
+import { PropertyEditorBase } from "./PropertyEditorManager.js";
+import { PopupButton, PopupContent, PopupOkCancelButtons, } from "./PopupButton.js";
+import { TimeField } from "../datepicker/TimeField.js";
+import { DatePicker } from "../datepicker/DatePicker.js";
+import { TypeConverterManager } from "../converters/TypeConverterManager.js";
+import { DateTimeTypeConverterBase } from "../converters/DateTimeTypeConverter.js";
+import { Text } from "@itwin/itwinui-react";
+import { adjustDateToTimezone } from "../common/DateUtils.js";
+/** DateTimeEditor React component that is a property editor for selection of date and time.
+ * @internal
+ */
+export class DateTimeEditor extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._isMounted = false;
+        this._enterKey = false;
+        this._divElement = React.createRef();
+        this.state = {
+            value: new Date(),
+            editInUtc: false,
+        };
+        this._handleChange = (newValue) => {
+            if (this._isMounted && this.state.typeConverter) {
+                if (this.state.editInUtc) {
+                    newValue = adjustDateToTimezone(newValue, newValue.getTimezoneOffset() * -1);
+                }
+                void this.processDateChange(this.state.typeConverter, newValue);
+            }
+        };
+        this._handleTimeChange = (time) => {
+            // Combine new time into selected Date
+            if (this.state.editInUtc) {
+                const newWorkingDate = 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 {
+                if (this.props.onCancel)
+                    this.props.onCancel();
+            }
+        };
+        this._handleOk = async (_event) => {
+            await this._handleCommit();
+        };
+        this._handleCancel = (_event) => {
+            if (this.props.onCancel) {
+                this.props.onCancel();
+            }
+        };
+        this._handleCommit = async () => {
+            if (this.props.propertyRecord && this.props.onCommit) {
+                const propertyValue = await this.getPropertyValue();
+                if (propertyValue !== undefined) {
+                    this.props.onCommit({
+                        propertyRecord: this.props.propertyRecord,
+                        newValue: propertyValue,
+                    });
+                }
+            }
+        };
+    }
+    async getPropertyValue() {
+        const record = this.props.propertyRecord;
+        let propertyValue;
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            propertyValue = {
+                valueFormat: PropertyValueFormat.Primitive,
+                value: this.state.value,
+                displayValue: this.state.displayValue,
+            };
+        }
+        return propertyValue;
+    }
+    get htmlElement() {
+        return this._divElement.current;
+    }
+    get hasFocus() {
+        let containsFocus = false;
+        if (this.htmlElement)
+            containsFocus = this.htmlElement.contains(document.activeElement);
+        return containsFocus;
+    }
+    async processDateChange(typeConverter, newValue) {
+        if (this.props.propertyRecord) {
+            const displayValue = await typeConverter.convertPropertyToString(this.props.propertyRecord.property, newValue);
+            this.setState({
+                value: newValue,
+                displayValue,
+            });
+        }
+    }
+    componentDidMount() {
+        this._isMounted = true;
+        void this.setStateFromProps();
+    }
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.propertyRecord !== prevProps.propertyRecord) {
+            void this.setStateFromProps();
+        }
+    }
+    async setStateFromProps() {
+        const record = this.props.propertyRecord;
+        let initialValue;
+        let typeConverter;
+        let timeDisplay;
+        let alternateDateFormat = AlternateDateFormats.None;
+        let editInUtc = false;
+        if (this.props.showTime)
+            timeDisplay = TimeDisplay.H12MC;
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            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.getConverter(record.property.typename, record.property.converter?.name);
+            const options = record.property.converter?.options;
+            if (options) {
+                if ("alternateDateFormat" in options) {
+                    if (DateTimeTypeConverterBase.isAlternateDateFormats(options.alternateDateFormat)) {
+                        timeDisplay = TimeDisplay.H24MS;
+                        alternateDateFormat = options.alternateDateFormat;
+                    }
+                }
+                if ("timeDisplay" in options && this.props.showTime) {
+                    timeDisplay = options.timeDisplay;
+                    // use 24 hr time display if alternateDateFormat is defined
+                    if (alternateDateFormat &&
+                        timeDisplay !== TimeDisplay.H24MS &&
+                        timeDisplay !== TimeDisplay.H24M)
+                        timeDisplay = TimeDisplay.H24MS;
+                }
+                if (alternateDateFormat) {
+                    editInUtc = true;
+                    if (this.props.showTime) {
+                        if (alternateDateFormat === AlternateDateFormats.IsoShort) {
+                            alternateDateFormat = AlternateDateFormats.IsoDateTime;
+                        }
+                        if (alternateDateFormat === AlternateDateFormats.UtcShort) {
+                            alternateDateFormat = AlternateDateFormats.UtcDateTime;
+                        }
+                        if (alternateDateFormat === AlternateDateFormats.UtcShortWithDay) {
+                            alternateDateFormat = AlternateDateFormats.UtcDateTimeWithDay;
+                        }
+                    }
+                    else {
+                        timeDisplay = undefined;
+                        if (alternateDateFormat === AlternateDateFormats.IsoDateTime)
+                            alternateDateFormat = AlternateDateFormats.IsoShort;
+                        if (alternateDateFormat === AlternateDateFormats.UtcDateTime)
+                            alternateDateFormat = AlternateDateFormats.UtcShort;
+                        if (alternateDateFormat === AlternateDateFormats.UtcDateTimeWithDay)
+                            alternateDateFormat = AlternateDateFormats.UtcShortWithDay;
+                    }
+                }
+            }
+        }
+        if (!initialValue) {
+            throw new Error("Bad Value");
+        }
+        if (!typeConverter) {
+            throw new Error("Unable to determine TypeConverter");
+        }
+        const isDisabled = record && !!record.isDisabled;
+        const displayValue = await typeConverter.convertPropertyToString(record.property, initialValue);
+        if (this._isMounted)
+            this.setState({
+                value: initialValue,
+                isDisabled,
+                timeDisplay,
+                typeConverter,
+                displayValue,
+                editInUtc,
+            });
+    }
+    render() {
+        const date = this.state.editInUtc
+            ? adjustDateToTimezone(this.state.value, 0)
+            : this.state.value;
+        const timeSpec = {
+            hours: date.getHours(),
+            minutes: date.getMinutes(),
+            seconds: date.getSeconds(),
+        };
+        const className = classnames("components-cell-editor", "components-datetime-editor", this.props.className);
+        return (React.createElement("div", { className: className, ref: this._divElement },
+            React.createElement(PopupButton, { label: this.state.displayValue, onClose: this._handleClose, onEnter: this._handleEnter, setFocus: this.props.setFocus },
+                React.createElement(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 // eslint-disable-line deprecation/deprecation
+                            , { selected: date, onDateChange: this._handleChange, showFocusOutline: false }),
+                            this.state.timeDisplay && (React.createElement("div", { className: "time-container" },
+                                React.createElement(Text, { variant: "body", className: "time-label" }, "Time"),
+                                React.createElement(TimeField, { time: timeSpec, timeDisplay: this.state.timeDisplay, onTimeChange: this._handleTimeChange }))))),
+                    React.createElement(PopupOkCancelButtons, { onOk: this._handleOk, onCancel: this._handleCancel })))));
+    }
+}
+/** DateTime Property Editor registered for the "number" type name and "DateTime" editor name.
+ * It uses the [[DateTimeEditor]] React component.
+ * @internal
+ */
+export class ShortDateTimePropertyEditor extends PropertyEditorBase {
+    get reactNode() {
+        return React.createElement(DateTimeEditor, { showTime: false });
+    }
+    get containerHandlesTab() {
+        return false;
+    }
+}
+/** DateTime Property Editor registered for the "number" type name and "DateTime" editor name.
+ * It uses the [[DateTimeEditor]] React component.
+ * @internal
+ */
+export class DateTimePropertyEditor extends PropertyEditorBase {
+    get reactNode() {
+        return React.createElement(DateTimeEditor, { showTime: true });
+    }
+    get containerHandlesTab() {
+        return false;
+    }
+}
+//# sourceMappingURL=DateTimeEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeEditor.js","sourceRoot":"","sources":["../../../src/components-react/editors/DateTimeEditor.tsx"],"names":[],"mappings":"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","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 PropertyEditors\n */\n\nimport \"./DateTimeEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { PropertyValue } from \"@itwin/appui-abstract\";\nimport {\n  AlternateDateFormats,\n  PropertyValueFormat,\n  TimeDisplay,\n} from \"@itwin/appui-abstract\";\nimport type { PropertyEditorProps, TypeEditor } from \"./EditorContainer.js\";\nimport { PropertyEditorBase } from \"./PropertyEditorManager.js\";\nimport {\n  PopupButton,\n  PopupContent,\n  PopupOkCancelButtons,\n} from \"./PopupButton.js\";\nimport type { TimeSpec } from \"../datepicker/TimeField.js\";\nimport { TimeField } from \"../datepicker/TimeField.js\";\nimport type { TypeConverter } from \"../converters/TypeConverter.js\";\nimport { DatePicker } from \"../datepicker/DatePicker.js\";\nimport { TypeConverterManager } from \"../converters/TypeConverterManager.js\";\nimport { DateTimeTypeConverterBase } from \"../converters/DateTimeTypeConverter.js\";\nimport { Text } from \"@itwin/itwinui-react\";\nimport { adjustDateToTimezone } from \"../common/DateUtils.js\";\n\n// cSpell:ignore datepicker\n\n/** @internal */\ninterface DateTimeEditorState {\n  value: Date;\n  displayValue?: string;\n  timeDisplay?: TimeDisplay;\n  isDisabled?: boolean;\n  typeConverter?: TypeConverter;\n  editInUtc: boolean;\n}\n\n/** @internal */\ninterface DateTimeEditorProps extends PropertyEditorProps {\n  showTime?: boolean;\n}\n\n/** DateTimeEditor React component that is a property editor for selection of date and time.\n * @internal\n */\nexport class DateTimeEditor\n  extends React.PureComponent<DateTimeEditorProps, DateTimeEditorState>\n  implements TypeEditor\n{\n  private _isMounted = false;\n  private _enterKey = false;\n  private _divElement = React.createRef<HTMLDivElement>();\n\n  public override readonly state: Readonly<DateTimeEditorState> = {\n    value: new Date(),\n    editInUtc: false,\n  };\n\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\n    const record = this.props.propertyRecord;\n    let propertyValue: PropertyValue | undefined;\n\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      propertyValue = {\n        valueFormat: PropertyValueFormat.Primitive,\n        value: this.state.value,\n        displayValue: this.state.displayValue,\n      };\n    }\n\n    return propertyValue;\n  }\n\n  public get htmlElement(): HTMLElement | null {\n    return this._divElement.current;\n  }\n\n  public get hasFocus(): boolean {\n    let containsFocus = false;\n    if (this.htmlElement)\n      containsFocus = this.htmlElement.contains(document.activeElement);\n    return containsFocus;\n  }\n\n  public async processDateChange(\n    typeConverter: TypeConverter,\n    newValue: Date\n  ): Promise<void> {\n    if (this.props.propertyRecord) {\n      const displayValue = await typeConverter.convertPropertyToString(\n        this.props.propertyRecord.property,\n        newValue\n      );\n      this.setState({\n        value: newValue,\n        displayValue,\n      });\n    }\n  }\n\n  private _handleChange = (newValue: Date): void => {\n    if (this._isMounted && this.state.typeConverter) {\n      if (this.state.editInUtc) {\n        newValue = adjustDateToTimezone(\n          newValue,\n          newValue.getTimezoneOffset() * -1\n        );\n      }\n\n      void this.processDateChange(this.state.typeConverter, newValue);\n    }\n  };\n\n  private _handleTimeChange = (time: TimeSpec): void => {\n    // Combine new time into selected Date\n    if (this.state.editInUtc) {\n      const newWorkingDate = adjustDateToTimezone(this.state.value, 0);\n      newWorkingDate.setUTCHours(time.hours, time.minutes, time.seconds);\n      this._handleChange(newWorkingDate);\n    } else {\n      const newWorkingDate = new Date(this.state.value.getTime());\n      newWorkingDate.setHours(time.hours, time.minutes, time.seconds);\n      this._handleChange(newWorkingDate);\n    }\n  };\n\n  public override componentDidMount() {\n    this._isMounted = true;\n    void this.setStateFromProps();\n  }\n\n  public override componentWillUnmount() {\n    this._isMounted = false;\n  }\n\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      void this.setStateFromProps();\n    }\n  }\n\n  private async setStateFromProps() {\n    const record = this.props.propertyRecord;\n    let initialValue: Date | undefined;\n    let typeConverter: TypeConverter | undefined;\n    let timeDisplay: TimeDisplay | undefined;\n    let alternateDateFormat = AlternateDateFormats.None;\n    let editInUtc = false;\n\n    if (this.props.showTime) timeDisplay = TimeDisplay.H12MC;\n\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      if (record.value.value instanceof Date)\n        initialValue = new Date(record.value.value);\n      else if (typeof record.value.value === \"string\")\n        initialValue = new Date(record.value.value);\n      else if (record.value.value === undefined) initialValue = new Date();\n\n      typeConverter = TypeConverterManager.getConverter(\n        record.property.typename,\n        record.property.converter?.name\n      );\n\n      const options = record.property.converter?.options;\n      if (options) {\n        if (\"alternateDateFormat\" in options) {\n          if (\n            DateTimeTypeConverterBase.isAlternateDateFormats(\n              options.alternateDateFormat\n            )\n          ) {\n            timeDisplay = TimeDisplay.H24MS;\n            alternateDateFormat = options.alternateDateFormat;\n          }\n        }\n\n        if (\"timeDisplay\" in options && this.props.showTime) {\n          timeDisplay = options.timeDisplay;\n          // use 24 hr time display if alternateDateFormat is defined\n          if (\n            alternateDateFormat &&\n            timeDisplay !== TimeDisplay.H24MS &&\n            timeDisplay !== TimeDisplay.H24M\n          )\n            timeDisplay = TimeDisplay.H24MS;\n        }\n\n        if (alternateDateFormat) {\n          editInUtc = true;\n\n          if (this.props.showTime) {\n            if (alternateDateFormat === AlternateDateFormats.IsoShort) {\n              alternateDateFormat = AlternateDateFormats.IsoDateTime;\n            }\n            if (alternateDateFormat === AlternateDateFormats.UtcShort) {\n              alternateDateFormat = AlternateDateFormats.UtcDateTime;\n            }\n            if (alternateDateFormat === AlternateDateFormats.UtcShortWithDay) {\n              alternateDateFormat = AlternateDateFormats.UtcDateTimeWithDay;\n            }\n          } else {\n            timeDisplay = undefined;\n            if (alternateDateFormat === AlternateDateFormats.IsoDateTime)\n              alternateDateFormat = AlternateDateFormats.IsoShort;\n            if (alternateDateFormat === AlternateDateFormats.UtcDateTime)\n              alternateDateFormat = AlternateDateFormats.UtcShort;\n            if (alternateDateFormat === AlternateDateFormats.UtcDateTimeWithDay)\n              alternateDateFormat = AlternateDateFormats.UtcShortWithDay;\n          }\n        }\n      }\n    }\n\n    if (!initialValue) {\n      throw new Error(\"Bad Value\");\n    }\n\n    if (!typeConverter) {\n      throw new Error(\"Unable to determine TypeConverter\");\n    }\n\n    const isDisabled = record && !!record.isDisabled;\n    const displayValue = await typeConverter.convertPropertyToString(\n      record!.property,\n      initialValue\n    );\n\n    if (this._isMounted)\n      this.setState({\n        value: initialValue,\n        isDisabled,\n        timeDisplay,\n        typeConverter,\n        displayValue,\n        editInUtc,\n      });\n  }\n\n  private _handleEnter = async (): Promise<void> => {\n    this._enterKey = true;\n    await this._handleCommit();\n  };\n\n  private _handleClose = async (): Promise<void> => {\n    if (this._enterKey) {\n      this._enterKey = false;\n    } else {\n      if (this.props.onCancel) this.props.onCancel();\n    }\n  };\n\n  private _handleOk = async (_event: React.MouseEvent): Promise<void> => {\n    await this._handleCommit();\n  };\n\n  private _handleCancel = (_event: React.MouseEvent): void => {\n    if (this.props.onCancel) {\n      this.props.onCancel();\n    }\n  };\n\n  private _handleCommit = async (): Promise<void> => {\n    if (this.props.propertyRecord && this.props.onCommit) {\n      const propertyValue = await this.getPropertyValue();\n      if (propertyValue !== undefined) {\n        this.props.onCommit({\n          propertyRecord: this.props.propertyRecord,\n          newValue: propertyValue,\n        });\n      }\n    }\n  };\n\n  public override render(): React.ReactNode {\n    const date = this.state.editInUtc\n      ? adjustDateToTimezone(this.state.value, 0)\n      : this.state.value;\n    const timeSpec: TimeSpec = {\n      hours: date.getHours(),\n      minutes: date.getMinutes(),\n      seconds: date.getSeconds(),\n    };\n\n    const className = classnames(\n      \"components-cell-editor\",\n      \"components-datetime-editor\",\n      this.props.className\n    );\n\n    return (\n      <div className={className} ref={this._divElement}>\n        <PopupButton\n          label={this.state.displayValue}\n          onClose={this._handleClose}\n          onEnter={this._handleEnter}\n          setFocus={this.props.setFocus}\n        >\n          <PopupContent>\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={date}\n                  onDateChange={this._handleChange}\n                  showFocusOutline={false}\n                />\n                {this.state.timeDisplay && (\n                  <div className=\"time-container\">\n                    <Text variant=\"body\" className=\"time-label\">\n                      {\"Time\"}\n                    </Text>\n                    <TimeField\n                      time={timeSpec}\n                      timeDisplay={this.state.timeDisplay}\n                      onTimeChange={this._handleTimeChange}\n                    />\n                  </div>\n                )}\n              </div>\n            </>\n            <PopupOkCancelButtons\n              onOk={this._handleOk}\n              onCancel={this._handleCancel}\n            />\n          </PopupContent>\n        </PopupButton>\n      </div>\n    );\n  }\n}\n\n/** DateTime Property Editor registered for the \"number\" type name and \"DateTime\" editor name.\n * It uses the [[DateTimeEditor]] React component.\n * @internal\n */\nexport class ShortDateTimePropertyEditor extends PropertyEditorBase {\n  public get reactNode(): React.ReactNode {\n    return <DateTimeEditor showTime={false} />;\n  }\n  public override get containerHandlesTab(): boolean {\n    return false;\n  }\n}\n\n/** DateTime Property Editor registered for the \"number\" type name and \"DateTime\" editor name.\n * It uses the [[DateTimeEditor]] React component.\n * @internal\n */\nexport class DateTimePropertyEditor extends PropertyEditorBase {\n  public get reactNode(): React.ReactNode {\n    return <DateTimeEditor showTime={true} />;\n  }\n  public override get containerHandlesTab(): boolean {\n    return false;\n  }\n}\n"]}

package/lib/components-react/editors/DateTimeEditor.scss

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+// cSpell:ignore datetime
+
+.components-datetime-editor {
+  min-width: 100%;
+}

package/lib/components-react/editors/EditorContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorContainer.d.ts","sourceRoot":"","sources":["../../../src/components-react/editors/EditorContainer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,wBAAwB,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAGV,cAAc,EACd,aAAa,EACd,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOrD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,kCAAkC;IAClC,cAAc,EAAE,cAAc,CAAC;IAC/B,sCAAsC;IACtC,QAAQ,EAAE,aAAa,CAAC;CACzB;AAED;;GAEG;AAEH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,kCAAkC;IAClC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,yBAAyB;IACzB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC/C,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,uBAAuB;IACvB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC3C,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED;;;GAGG;AAEH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,kCAAkC;IAClC,cAAc,EAAE,cAAc,CAAC;IAC/B,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC9C,yBAAyB;IACzB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,gBAAgB;IAChB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAMD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,gBAAgB,EAAE,MAAM,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC3D,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AAEH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAmL1D"}