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

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

@@ -1,33 +1,33 @@
-/** @packageDocumentation
- * @module Date
- */
-/// <reference types="react" />
-import "./DateField.scss";
-import { AlternateDateFormats, DateFormatter, TimeDisplay } from "@itwin/appui-abstract";
-import { CommonProps } from "@itwin/core-react";
-/** Props for [[DateField]] Component.
- * @internal
- */
-export interface DateFieldProps extends CommonProps {
-    /** Defines initial date and time for component. */
-    initialDate: Date;
-    /** Function to call when the date or time is changed. */
-    onDateChange?: (day: Date) => void;
-    /** Optional value to define if edit field allows editing. If a DateFormatter is provided
-     * it must provide a parseData function or the field will be read only no matter the setting of this value. */
-    readOnly?: boolean;
-    /** Optional date formatter that produces an explicit date display */
-    dateFormatter?: DateFormatter;
-    /** This property has two purposes, the first is specify that the display of time is desired and the second is to define the format of the time display. */
-    timeDisplay?: TimeDisplay;
-}
-/** Function to format a Date object that is used in control, type editor, and type converter
- * to produce a consistent formatted Date string.
- * @internal
- */
-export declare function formatInputDate(inputDate: Date, timeDisplay?: TimeDisplay, customFormatter?: DateFormatter, alternateDateFormat?: AlternateDateFormats): string | undefined;
-/** Date input component. This component is typically used by the [[DatePickerPopupButton]] to display and edit date and time.
- * @internal
- */
-export declare function DateField({ initialDate, onDateChange, readOnly, dateFormatter, timeDisplay, style, className }: DateFieldProps): JSX.Element;
+/** @packageDocumentation
+ * @module Date
+ */
+/// <reference types="react" />
+import "./DateField.scss";
+import { AlternateDateFormats, DateFormatter, TimeDisplay } from "@itwin/appui-abstract";
+import { CommonProps } from "@itwin/core-react";
+/** Props for [[DateField]] Component.
+ * @internal
+ */
+export interface DateFieldProps extends CommonProps {
+    /** Defines initial date and time for component. */
+    initialDate: Date;
+    /** Function to call when the date or time is changed. */
+    onDateChange?: (day: Date) => void;
+    /** Optional value to define if edit field allows editing. If a DateFormatter is provided
+     * it must provide a parseData function or the field will be read only no matter the setting of this value. */
+    readOnly?: boolean;
+    /** Optional date formatter that produces an explicit date display */
+    dateFormatter?: DateFormatter;
+    /** This property has two purposes, the first is specify that the display of time is desired and the second is to define the format of the time display. */
+    timeDisplay?: TimeDisplay;
+}
+/** Function to format a Date object that is used in control, type editor, and type converter
+ * to produce a consistent formatted Date string.
+ * @internal
+ */
+export declare function formatInputDate(inputDate: Date, timeDisplay?: TimeDisplay, customFormatter?: DateFormatter, alternateDateFormat?: AlternateDateFormats): string | undefined;
+/** Date input component. This component is typically used by the [[DatePickerPopupButton]] to display and edit date and time.
+ * @internal
+ */
+export declare function DateField({ initialDate, onDateChange, readOnly, dateFormatter, timeDisplay, style, className }: DateFieldProps): JSX.Element;
 //# sourceMappingURL=DateField.d.ts.map

package/lib/cjs/components-react/datepicker/DateField.js

@@ -1,157 +1,161 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Date
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateField = exports.formatInputDate = void 0;
-require("./DateField.scss");
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-const core_bentley_1 = require("@itwin/core-bentley");
-/** Function to format a Date object that is used in control, type editor, and type converter
- * to produce a consistent formatted Date string.
- * @internal
- */
-function formatInputDate(inputDate, timeDisplay, customFormatter, alternateDateFormat) {
-    if (customFormatter) {
-        return customFormatter.formateDate(inputDate);
-    }
-    if (alternateDateFormat) {
-        switch (alternateDateFormat) {
-            case appui_abstract_1.AlternateDateFormats.IsoDateTime:
-                return inputDate.toISOString();
-            case appui_abstract_1.AlternateDateFormats.IsoShort:
-                return inputDate.toISOString().slice(0, 10);
-            case appui_abstract_1.AlternateDateFormats.UtcDateTime:
-                return inputDate.toUTCString().slice(5);
-            case appui_abstract_1.AlternateDateFormats.UtcShort:
-                return inputDate.toUTCString().slice(5, 16);
-            case appui_abstract_1.AlternateDateFormats.UtcDateTimeWithDay:
-                return inputDate.toUTCString();
-            case appui_abstract_1.AlternateDateFormats.UtcShortWithDay:
-                return inputDate.toUTCString().slice(0, 16);
-        }
-    }
-    else {
-        const dateString = inputDate.toLocaleDateString(undefined, { day: "2-digit", month: "2-digit", year: "numeric" });
-        let timeString = "";
-        if (timeDisplay) {
-            switch (timeDisplay) {
-                case appui_abstract_1.TimeDisplay.H12MC:
-                    timeString = inputDate.toLocaleTimeString(undefined, { hour12: true, hour: "2-digit", minute: "2-digit" });
-                    break;
-                case appui_abstract_1.TimeDisplay.H12MSC:
-                    timeString = (inputDate.toLocaleTimeString(undefined, { hour12: true, hour: "2-digit", minute: "2-digit", second: "2-digit" }));
-                    break;
-                case appui_abstract_1.TimeDisplay.H24M:
-                    timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: "2-digit", minute: "2-digit" }));
-                    // istanbul ignore next
-                    if (timeString === "24:00")
-                        timeString = "00:00";
-                    break;
-                case appui_abstract_1.TimeDisplay.H24MS:
-                    timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" }));
-                    // istanbul ignore next
-                    if (timeString === "24:00:00")
-                        timeString = "00:00:00";
-                    break;
-            }
-        }
-        return timeString.length ? `${dateString}, ${timeString}` : dateString;
-    }
-}
-exports.formatInputDate = formatInputDate;
-/** Date input component. This component is typically used by the [[DatePickerPopupButton]] to display and edit date and time.
- * @internal
- */
-function DateField({ initialDate, onDateChange, readOnly, dateFormatter, timeDisplay, style, className }) {
-    const initialDateRef = React.useRef(initialDate);
-    const [hasBadInput, setHasBadInput] = React.useState(false);
-    const [inputValue, setInputValue] = React.useState(formatInputDate(initialDate, timeDisplay, dateFormatter));
-    // See if new initialDate props have changed since component mounted
-    React.useEffect(() => {
-        // istanbul ignore else
-        if (initialDate.getTime() !== initialDateRef.current.getTime()) {
-            initialDateRef.current = initialDate;
-        }
-        setInputValue(formatInputDate(initialDate, timeDisplay, dateFormatter));
-    }, [initialDate, dateFormatter, timeDisplay]);
-    const handleInputChange = React.useCallback((event) => {
-        setInputValue(event.currentTarget.value);
-    }, []);
-    const parseDate = React.useCallback((dateString) => {
-        try {
-            if (dateFormatter && dateFormatter.parseDate)
-                return dateFormatter.parseDate(dateString);
-            const newDateValue = Date.parse(dateString);
-            // istanbul ignore else
-            if (newDateValue)
-                return new Date(newDateValue);
-        }
-        catch (_error) /* istanbul ignore next */ {
-            core_bentley_1.Logger.logInfo("DateField", `Encountered error parsing input value '${dateString}' as a date.`);
-            return undefined;
-        }
-        // istanbul ignore next
-        return undefined;
-    }, [dateFormatter]);
-    const updateInputDate = React.useCallback((dateString) => {
-        try {
-            const newDateValue = parseDate(dateString);
-            if (newDateValue) {
-                const newDate = new Date(newDateValue);
-                onDateChange && onDateChange(newDate);
-                setHasBadInput(false);
-            }
-            else {
-                setHasBadInput(true);
-            }
-        }
-        catch (_error) {
-            // istanbul ignore next
-            setHasBadInput(true);
-        }
-    }, [onDateChange, parseDate]);
-    const handleOnBlur = React.useCallback((event) => {
-        updateInputDate(event.target.value);
-    }, [updateInputDate]);
-    function onInputKeyDown(event) {
-        // istanbul ignore else
-        if (event.key === "Enter") {
-            updateInputDate(event.currentTarget.value);
-            event.preventDefault();
-        }
-    }
-    const classNames = (0, classnames_1.default)(className, "components-date-input", hasBadInput && "components-date-has-error");
-    return React.createElement(itwinui_react_1.Input, { "data-testid": "components-date-input", style: style, className: classNames, onKeyDown: onInputKeyDown, onBlur: handleOnBlur, onChange: handleInputChange, value: inputValue, disabled: readOnly || (dateFormatter && !(dateFormatter.parseDate)), size: "small" });
-}
-exports.DateField = DateField;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Date
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateField = exports.formatInputDate = void 0;
+require("./DateField.scss");
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const core_bentley_1 = require("@itwin/core-bentley");
+/** Function to format a Date object that is used in control, type editor, and type converter
+ * to produce a consistent formatted Date string.
+ * @internal
+ */
+function formatInputDate(inputDate, timeDisplay, customFormatter, alternateDateFormat) {
+    if (customFormatter) {
+        return customFormatter.formateDate(inputDate);
+    }
+    if (alternateDateFormat) {
+        switch (alternateDateFormat) {
+            case appui_abstract_1.AlternateDateFormats.IsoDateTime:
+                return inputDate.toISOString();
+            case appui_abstract_1.AlternateDateFormats.IsoShort:
+                return inputDate.toISOString().slice(0, 10);
+            case appui_abstract_1.AlternateDateFormats.UtcDateTime:
+                return inputDate.toUTCString().slice(5);
+            case appui_abstract_1.AlternateDateFormats.UtcShort:
+                return inputDate.toUTCString().slice(5, 16);
+            case appui_abstract_1.AlternateDateFormats.UtcDateTimeWithDay:
+                return inputDate.toUTCString();
+            case appui_abstract_1.AlternateDateFormats.UtcShortWithDay:
+                return inputDate.toUTCString().slice(0, 16);
+        }
+    }
+    else {
+        const dateString = inputDate.toLocaleDateString(undefined, { day: "2-digit", month: "2-digit", year: "numeric" });
+        let timeString = "";
+        if (timeDisplay) {
+            switch (timeDisplay) {
+                case appui_abstract_1.TimeDisplay.H12MC:
+                    timeString = inputDate.toLocaleTimeString(undefined, { hour12: true, hour: "2-digit", minute: "2-digit" });
+                    break;
+                case appui_abstract_1.TimeDisplay.H12MSC:
+                    timeString = (inputDate.toLocaleTimeString(undefined, { hour12: true, hour: "2-digit", minute: "2-digit", second: "2-digit" }));
+                    break;
+                case appui_abstract_1.TimeDisplay.H24M:
+                    timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: "2-digit", minute: "2-digit" }));
+                    // istanbul ignore next
+                    if (timeString === "24:00")
+                        timeString = "00:00";
+                    break;
+                case appui_abstract_1.TimeDisplay.H24MS:
+                    timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" }));
+                    // istanbul ignore next
+                    if (timeString === "24:00:00")
+                        timeString = "00:00:00";
+                    break;
+            }
+        }
+        return timeString.length ? `${dateString}, ${timeString}` : dateString;
+    }
+}
+exports.formatInputDate = formatInputDate;
+/** Date input component. This component is typically used by the [[DatePickerPopupButton]] to display and edit date and time.
+ * @internal
+ */
+function DateField({ initialDate, onDateChange, readOnly, dateFormatter, timeDisplay, style, className }) {
+    const initialDateRef = React.useRef(initialDate);
+    const [hasBadInput, setHasBadInput] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState(formatInputDate(initialDate, timeDisplay, dateFormatter));
+    // See if new initialDate props have changed since component mounted
+    React.useEffect(() => {
+        // istanbul ignore else
+        if (initialDate.getTime() !== initialDateRef.current.getTime()) {
+            initialDateRef.current = initialDate;
+        }
+        setInputValue(formatInputDate(initialDate, timeDisplay, dateFormatter));
+    }, [initialDate, dateFormatter, timeDisplay]);
+    const handleInputChange = React.useCallback((event) => {
+        setInputValue(event.currentTarget.value);
+    }, []);
+    const parseDate = React.useCallback((dateString) => {
+        try {
+            if (dateFormatter && dateFormatter.parseDate)
+                return dateFormatter.parseDate(dateString);
+            const newDateValue = Date.parse(dateString);
+            // istanbul ignore else
+            if (newDateValue)
+                return new Date(newDateValue);
+        }
+        catch (_error) /* istanbul ignore next */ {
+            core_bentley_1.Logger.logInfo("DateField", `Encountered error parsing input value '${dateString}' as a date.`);
+            return undefined;
+        }
+        // istanbul ignore next
+        return undefined;
+    }, [dateFormatter]);
+    const updateInputDate = React.useCallback((dateString) => {
+        try {
+            const newDateValue = parseDate(dateString);
+            if (newDateValue) {
+                const newDate = new Date(newDateValue);
+                onDateChange && onDateChange(newDate);
+                setHasBadInput(false);
+            }
+            else {
+                setHasBadInput(true);
+            }
+        }
+        catch (_error) {
+            // istanbul ignore next
+            setHasBadInput(true);
+        }
+    }, [onDateChange, parseDate]);
+    const handleOnBlur = React.useCallback((event) => {
+        updateInputDate(event.target.value);
+    }, [updateInputDate]);
+    function onInputKeyDown(event) {
+        // istanbul ignore else
+        if (event.key === "Enter") {
+            updateInputDate(event.currentTarget.value);
+            event.preventDefault();
+        }
+    }
+    const classNames = (0, classnames_1.default)(className, "components-date-input", hasBadInput && "components-date-has-error");
+    return React.createElement(itwinui_react_1.Input, { "data-testid": "components-date-input", style: style, className: classNames, onKeyDown: onInputKeyDown, onBlur: handleOnBlur, onChange: handleInputChange, value: inputValue, disabled: readOnly || (dateFormatter && !(dateFormatter.parseDate)), size: "small" });
+}
+exports.DateField = DateField;
 //# sourceMappingURL=DateField.js.map

package/lib/cjs/components-react/datepicker/DateField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DateField.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Date\r\n */\r\n\r\nimport \"./DateField.scss\";\r\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { AlternateDateFormats, DateFormatter, TimeDisplay } from \"@itwin/appui-abstract\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { Input } from \"@itwin/itwinui-react\";\r\nimport { Logger } from \"@itwin/core-bentley\";\r\n\r\n/** Props for [[DateField]] Component.\r\n * @internal\r\n */\r\nexport interface DateFieldProps extends CommonProps {\r\n  /** Defines initial date and time for component. */\r\n  initialDate: Date;\r\n  /** Function to call when the date or time is changed. */\r\n  onDateChange?: (day: Date) => void;\r\n  /** Optional value to define if edit field allows editing. If a DateFormatter is provided\r\n   * it must provide a parseData function or the field will be read only no matter the setting of this value. */\r\n  readOnly?: boolean;\r\n  /** Optional date formatter that produces an explicit date display */\r\n  dateFormatter?: DateFormatter;\r\n  /** This property has two purposes, the first is specify that the display of time is desired and the second is to define the format of the time display. */\r\n  timeDisplay?: TimeDisplay;\r\n}\r\n\r\n/** Function to format a Date object that is used in control, type editor, and type converter\r\n * to produce a consistent formatted Date string.\r\n * @internal\r\n */\r\nexport function formatInputDate(inputDate: Date, timeDisplay?: TimeDisplay, customFormatter?: DateFormatter, alternateDateFormat?: AlternateDateFormats): string | undefined {\r\n  if (customFormatter) {\r\n    return customFormatter.formateDate(inputDate);\r\n  }\r\n\r\n  if (alternateDateFormat) {\r\n    switch (alternateDateFormat) {\r\n      case AlternateDateFormats.IsoDateTime:\r\n        return inputDate.toISOString();\r\n      case AlternateDateFormats.IsoShort:\r\n        return inputDate.toISOString().slice(0, 10);\r\n      case AlternateDateFormats.UtcDateTime:\r\n        return inputDate.toUTCString().slice(5);\r\n      case AlternateDateFormats.UtcShort:\r\n        return inputDate.toUTCString().slice(5, 16);\r\n      case AlternateDateFormats.UtcDateTimeWithDay:\r\n        return inputDate.toUTCString();\r\n      case AlternateDateFormats.UtcShortWithDay:\r\n        return inputDate.toUTCString().slice(0, 16);\r\n    }\r\n  } else {\r\n    const dateString = inputDate.toLocaleDateString(undefined, { day: \"2-digit\", month: \"2-digit\", year: \"numeric\" });\r\n    let timeString: string = \"\";\r\n\r\n    if (timeDisplay) {\r\n      switch (timeDisplay) {\r\n        case TimeDisplay.H12MC:\r\n          timeString = inputDate.toLocaleTimeString(undefined, { hour12: true, hour: \"2-digit\", minute: \"2-digit\" });\r\n          break;\r\n        case TimeDisplay.H12MSC:\r\n          timeString = (inputDate.toLocaleTimeString(undefined, { hour12: true, hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\" }));\r\n          break;\r\n        case TimeDisplay.H24M:\r\n          timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: \"2-digit\", minute: \"2-digit\" }));\r\n          // istanbul ignore next\r\n          if (timeString === \"24:00\")\r\n            timeString = \"00:00\";\r\n          break;\r\n        case TimeDisplay.H24MS:\r\n          timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\" }));\r\n          // istanbul ignore next\r\n          if (timeString === \"24:00:00\")\r\n            timeString = \"00:00:00\";\r\n          break;\r\n      }\r\n    }\r\n    return timeString.length ? `${dateString}, ${timeString}` : dateString;\r\n  }\r\n}\r\n\r\n/** Date input component. This component is typically used by the [[DatePickerPopupButton]] to display and edit date and time.\r\n * @internal\r\n */\r\nexport function DateField({ initialDate, onDateChange, readOnly, dateFormatter, timeDisplay, style, className }: DateFieldProps) {\r\n  const initialDateRef = React.useRef(initialDate);\r\n  const [hasBadInput, setHasBadInput] = React.useState(false);\r\n  const [inputValue, setInputValue] = React.useState(formatInputDate(initialDate, timeDisplay, dateFormatter));\r\n\r\n  // See if new initialDate props have changed since component mounted\r\n  React.useEffect(() => {\r\n    // istanbul ignore else\r\n    if (initialDate.getTime() !== initialDateRef.current.getTime()) {\r\n      initialDateRef.current = initialDate;\r\n    }\r\n    setInputValue(formatInputDate(initialDate, timeDisplay, dateFormatter));\r\n  }, [initialDate, dateFormatter, timeDisplay]);\r\n\r\n  const handleInputChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\r\n    setInputValue(event.currentTarget.value);\r\n  }, []);\r\n\r\n  const parseDate = React.useCallback((dateString: string) => {\r\n    try {\r\n      if (dateFormatter && dateFormatter.parseDate)\r\n        return dateFormatter.parseDate(dateString);\r\n\r\n      const newDateValue = Date.parse(dateString);\r\n      // istanbul ignore else\r\n      if (newDateValue)\r\n        return new Date(newDateValue);\r\n    } catch (_error) /* istanbul ignore next */ {\r\n      Logger.logInfo(\"DateField\", `Encountered error parsing input value '${dateString}' as a date.`);\r\n      return undefined;\r\n    }\r\n    // istanbul ignore next\r\n    return undefined;\r\n  }, [dateFormatter]);\r\n\r\n  const updateInputDate = React.useCallback((dateString: string) => {\r\n    try {\r\n      const newDateValue = parseDate(dateString);\r\n      if (newDateValue) {\r\n        const newDate = new Date(newDateValue);\r\n        onDateChange && onDateChange(newDate);\r\n        setHasBadInput(false);\r\n      } else {\r\n        setHasBadInput(true);\r\n      }\r\n    } catch (_error) {\r\n      // istanbul ignore next\r\n      setHasBadInput(true);\r\n    }\r\n  }, [onDateChange, parseDate]);\r\n\r\n  const handleOnBlur = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n    updateInputDate(event.target.value);\r\n  }, [updateInputDate]);\r\n\r\n  function onInputKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {\r\n    // istanbul ignore else\r\n    if (event.key === \"Enter\") {\r\n      updateInputDate(event.currentTarget.value);\r\n      event.preventDefault();\r\n    }\r\n  }\r\n  const classNames = classnames(className, \"components-date-input\", hasBadInput && \"components-date-has-error\");\r\n  return <Input data-testid=\"components-date-input\" style={style} className={classNames} onKeyDown={onInputKeyDown} onBlur={handleOnBlur}\r\n    onChange={handleInputChange} value={inputValue} disabled={readOnly || (dateFormatter && !(dateFormatter.parseDate))} size=\"small\" />;\r\n}\r\n"]}
+{"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DateField.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Date\r\n */\r\n\r\nimport \"./DateField.scss\";\r\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { AlternateDateFormats, DateFormatter, TimeDisplay } from \"@itwin/appui-abstract\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { Input } from \"@itwin/itwinui-react\";\r\nimport { Logger } from \"@itwin/core-bentley\";\r\n\r\n/** Props for [[DateField]] Component.\r\n * @internal\r\n */\r\nexport interface DateFieldProps extends CommonProps {\r\n  /** Defines initial date and time for component. */\r\n  initialDate: Date;\r\n  /** Function to call when the date or time is changed. */\r\n  onDateChange?: (day: Date) => void;\r\n  /** Optional value to define if edit field allows editing. If a DateFormatter is provided\r\n   * it must provide a parseData function or the field will be read only no matter the setting of this value. */\r\n  readOnly?: boolean;\r\n  /** Optional date formatter that produces an explicit date display */\r\n  dateFormatter?: DateFormatter;\r\n  /** This property has two purposes, the first is specify that the display of time is desired and the second is to define the format of the time display. */\r\n  timeDisplay?: TimeDisplay;\r\n}\r\n\r\n/** Function to format a Date object that is used in control, type editor, and type converter\r\n * to produce a consistent formatted Date string.\r\n * @internal\r\n */\r\nexport function formatInputDate(inputDate: Date, timeDisplay?: TimeDisplay, customFormatter?: DateFormatter, alternateDateFormat?: AlternateDateFormats): string | undefined {\r\n  if (customFormatter) {\r\n    return customFormatter.formateDate(inputDate);\r\n  }\r\n\r\n  if (alternateDateFormat) {\r\n    switch (alternateDateFormat) {\r\n      case AlternateDateFormats.IsoDateTime:\r\n        return inputDate.toISOString();\r\n      case AlternateDateFormats.IsoShort:\r\n        return inputDate.toISOString().slice(0, 10);\r\n      case AlternateDateFormats.UtcDateTime:\r\n        return inputDate.toUTCString().slice(5);\r\n      case AlternateDateFormats.UtcShort:\r\n        return inputDate.toUTCString().slice(5, 16);\r\n      case AlternateDateFormats.UtcDateTimeWithDay:\r\n        return inputDate.toUTCString();\r\n      case AlternateDateFormats.UtcShortWithDay:\r\n        return inputDate.toUTCString().slice(0, 16);\r\n    }\r\n  } else {\r\n    const dateString = inputDate.toLocaleDateString(undefined, { day: \"2-digit\", month: \"2-digit\", year: \"numeric\" });\r\n    let timeString: string = \"\";\r\n\r\n    if (timeDisplay) {\r\n      switch (timeDisplay) {\r\n        case TimeDisplay.H12MC:\r\n          timeString = inputDate.toLocaleTimeString(undefined, { hour12: true, hour: \"2-digit\", minute: \"2-digit\" });\r\n          break;\r\n        case TimeDisplay.H12MSC:\r\n          timeString = (inputDate.toLocaleTimeString(undefined, { hour12: true, hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\" }));\r\n          break;\r\n        case TimeDisplay.H24M:\r\n          timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: \"2-digit\", minute: \"2-digit\" }));\r\n          // istanbul ignore next\r\n          if (timeString === \"24:00\")\r\n            timeString = \"00:00\";\r\n          break;\r\n        case TimeDisplay.H24MS:\r\n          timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\" }));\r\n          // istanbul ignore next\r\n          if (timeString === \"24:00:00\")\r\n            timeString = \"00:00:00\";\r\n          break;\r\n      }\r\n    }\r\n    return timeString.length ? `${dateString}, ${timeString}` : dateString;\r\n  }\r\n}\r\n\r\n/** Date input component. This component is typically used by the [[DatePickerPopupButton]] to display and edit date and time.\r\n * @internal\r\n */\r\nexport function DateField({ initialDate, onDateChange, readOnly, dateFormatter, timeDisplay, style, className }: DateFieldProps) {\r\n  const initialDateRef = React.useRef(initialDate);\r\n  const [hasBadInput, setHasBadInput] = React.useState(false);\r\n  const [inputValue, setInputValue] = React.useState(formatInputDate(initialDate, timeDisplay, dateFormatter));\r\n\r\n  // See if new initialDate props have changed since component mounted\r\n  React.useEffect(() => {\r\n    // istanbul ignore else\r\n    if (initialDate.getTime() !== initialDateRef.current.getTime()) {\r\n      initialDateRef.current = initialDate;\r\n    }\r\n    setInputValue(formatInputDate(initialDate, timeDisplay, dateFormatter));\r\n  }, [initialDate, dateFormatter, timeDisplay]);\r\n\r\n  const handleInputChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\r\n    setInputValue(event.currentTarget.value);\r\n  }, []);\r\n\r\n  const parseDate = React.useCallback((dateString: string) => {\r\n    try {\r\n      if (dateFormatter && dateFormatter.parseDate)\r\n        return dateFormatter.parseDate(dateString);\r\n\r\n      const newDateValue = Date.parse(dateString);\r\n      // istanbul ignore else\r\n      if (newDateValue)\r\n        return new Date(newDateValue);\r\n    } catch (_error) /* istanbul ignore next */ {\r\n      Logger.logInfo(\"DateField\", `Encountered error parsing input value '${dateString}' as a date.`);\r\n      return undefined;\r\n    }\r\n    // istanbul ignore next\r\n    return undefined;\r\n  }, [dateFormatter]);\r\n\r\n  const updateInputDate = React.useCallback((dateString: string) => {\r\n    try {\r\n      const newDateValue = parseDate(dateString);\r\n      if (newDateValue) {\r\n        const newDate = new Date(newDateValue);\r\n        onDateChange && onDateChange(newDate);\r\n        setHasBadInput(false);\r\n      } else {\r\n        setHasBadInput(true);\r\n      }\r\n    } catch (_error) {\r\n      // istanbul ignore next\r\n      setHasBadInput(true);\r\n    }\r\n  }, [onDateChange, parseDate]);\r\n\r\n  const handleOnBlur = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n    updateInputDate(event.target.value);\r\n  }, [updateInputDate]);\r\n\r\n  function onInputKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {\r\n    // istanbul ignore else\r\n    if (event.key === \"Enter\") {\r\n      updateInputDate(event.currentTarget.value);\r\n      event.preventDefault();\r\n    }\r\n  }\r\n  const classNames = classnames(className, \"components-date-input\", hasBadInput && \"components-date-has-error\");\r\n  return <Input data-testid=\"components-date-input\" style={style} className={classNames} onKeyDown={onInputKeyDown} onBlur={handleOnBlur}\r\n    onChange={handleInputChange} value={inputValue} disabled={readOnly || (dateFormatter && !(dateFormatter.parseDate))} size=\"small\" />;\r\n}\r\n"]}

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

@@ -1,22 +1,22 @@
-/** @packageDocumentation
- * @module Date
- */
-/// <reference types="react" />
-import "./DatePicker.scss";
-/**
- * Props for [[DatePicker]] component.
- * @alpha
- */
-export interface DatePickerProps {
-    /** defines both date and time */
-    selected: Date;
-    /** function to call when date or time has changed */
-    onDateChange?: (day: Date) => void;
-    /** show focus outlines, useful for keyboard navigation */
-    showFocusOutline?: boolean;
-}
-/** DatePicker component. Show a month selector and a day calendar to select a specific date.
- * @alpha
- */
-export declare function DatePicker(props: DatePickerProps): JSX.Element;
+/** @packageDocumentation
+ * @module Date
+ */
+/// <reference types="react" />
+import "./DatePicker.scss";
+/**
+ * Props for [[DatePicker]] component.
+ * @alpha
+ */
+export interface DatePickerProps {
+    /** defines both date and time */
+    selected: Date;
+    /** function to call when date or time has changed */
+    onDateChange?: (day: Date) => void;
+    /** show focus outlines, useful for keyboard navigation */
+    showFocusOutline?: boolean;
+}
+/** DatePicker component. Show a month selector and a day calendar to select a specific date.
+ * @alpha
+ */
+export declare function DatePicker(props: DatePickerProps): JSX.Element;
 //# sourceMappingURL=DatePicker.d.ts.map