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

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerPopupButton.js","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DatePickerPopupButton.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 * as React from \"react\";\r\nimport { DateFormatter, RelativePosition, SpecialKey, TimeDisplay } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, Popup } from \"@itwin/core-react\";\r\nimport { Text } from \"@itwin/itwinui-react\";\r\nimport { UiComponents } from \"../UiComponents\";\r\nimport { DatePicker } from \"./DatePicker\";\r\nimport { DateField } from \"./DateField\";\r\nimport { TimeField, TimeSpec } from \"./TimeField\";\r\nimport \"./DatePickerPopupButton.scss\";\r\n\r\n/** Props used by [[DatePickerPopupButton]] component.\r\n * @alpha */\r\nexport interface DatePickerPopupButtonProps extends CommonProps {\r\n  /** Date to be shown as the selected date. */\r\n  selected: Date;\r\n  /** If true show the date (and optionally time) edit field next to button */\r\n  displayEditField?: boolean;\r\n  // If defined show time in popup and also display time if input field is shown\r\n  timeDisplay?: TimeDisplay;\r\n  /** Function called when Date changes. */\r\n  onDateChange?: (day: Date) => void;\r\n  /** Optional tooltip */\r\n  buttonToolTip?: string;\r\n  /* Custom date formatter. WARNING: if used values will only be shown in specified format and will not be based on locale.\r\n   * If used the existence of a parseDate function will determine if the edit field allows editing. */\r\n  dateFormatter?: DateFormatter;\r\n  /** User defined class name for edit field. */\r\n  fieldClassName?: string;\r\n  /** User defined style for edit field. */\r\n  fieldStyle?: React.CSSProperties;\r\n}\r\n\r\n/** Component that displays a button used to pick a date and optionally a time.\r\n * @alpha\r\n * */\r\nexport function DatePickerPopupButton({ displayEditField, timeDisplay, selected, onDateChange, dateFormatter,\r\n  buttonToolTip, fieldStyle, fieldClassName, style }: DatePickerPopupButtonProps) {\r\n  const [workingDate, setWorkingDate] = React.useState(new Date(selected.getTime()));\r\n  const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);\r\n  const timeLabelRef = React.useRef(UiComponents.translate(\"datepicker.time\"));\r\n  const toolTipLabelRef = React.useRef(UiComponents.translate(\"datepicker.selectDate\"));\r\n  const toolTipLabel = React.useMemo(() => buttonToolTip ? buttonToolTip : toolTipLabelRef.current, [buttonToolTip]);\r\n\r\n  // See if props have changed since component mounted\r\n  React.useEffect(() => {\r\n    const newWorkingDate = new Date(selected.getTime());\r\n    setWorkingDate(newWorkingDate);\r\n  }, [selected]);\r\n\r\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\r\n  const togglePopupDisplay = React.useCallback((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\r\n    event.preventDefault();\r\n    setShowFocusOutline(false);\r\n    setIsSettingsOpen((prev) => !prev);\r\n  }, [setIsSettingsOpen]);\r\n\r\n  const handleCloseSetting = React.useCallback(() => {\r\n    setIsSettingsOpen(false);\r\n  }, [setIsSettingsOpen]);\r\n\r\n  const handleOnDateChanged = (day: Date) => {\r\n    // combine current time into selected Date\r\n    const newWorkingDate = new Date(day.getTime());\r\n    newWorkingDate.setHours(workingDate.getHours(), workingDate.getMinutes(), workingDate.getSeconds());\r\n    onDateChange && onDateChange(newWorkingDate);\r\n    !timeDisplay && setIsSettingsOpen(false);\r\n  };\r\n\r\n  const handleOnTimeChanged = (time: TimeSpec) => {\r\n    // Combine new time into selected Date\r\n    const newWorkingDate = new Date(workingDate.getTime());\r\n    newWorkingDate.setHours(time.hours, time.minutes, time.seconds);\r\n    setWorkingDate(newWorkingDate);\r\n    onDateChange && onDateChange(newWorkingDate);\r\n  };\r\n\r\n  const [showFocusOutline, setShowFocusOutline] = React.useState(false);\r\n  const handlePopupKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLButtonElement>) => {\r\n    // istanbul ignore else\r\n    if (event.key === SpecialKey.Space) {\r\n      setShowFocusOutline(true);\r\n      setIsSettingsOpen(true);\r\n    }\r\n  }, []);\r\n\r\n  const timeSpec: TimeSpec = { hours: workingDate.getHours(), minutes: workingDate.getMinutes(), seconds: workingDate.getSeconds() };\r\n  return (\r\n    <>\r\n      <button title={toolTipLabel} style={style} className=\"components-date-picker-calendar-popup-button\" onKeyDown={handlePopupKeyDown}\r\n        data-testid=\"components-date-picker-calendar-popup-button\" onPointerDown={togglePopupDisplay} ref={buttonRef}>\r\n        <div className=\"datepicker-button\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n            <path d=\"M13,13H9V10h4ZM16,3V15a1,1,0,0,1-1,1H1a1,1,0,0,1-1-1V3A1,1,0,0,1,1,2H3V0H4V2h8V0h1V2h2A1,1,0,0,1,16,3ZM15,6H1v9H15Z\" />\r\n          </svg>\r\n        </div>\r\n      </button>\r\n      <Popup\r\n        isOpen={isSettingsOpen}\r\n        position={RelativePosition.BottomLeft}\r\n        onClose={handleCloseSetting}\r\n        target={buttonRef.current}\r\n        closeOnEnter={false}\r\n        moveFocus={showFocusOutline}\r\n        closeOnNestedPopupOutsideClick\r\n      >\r\n        <div className=\"components-date-picker-calendar-popup-panel\" data-testid=\"components-date-picker-calendar-popup-panel\">\r\n          <DatePicker selected={workingDate} onDateChange={handleOnDateChanged} showFocusOutline={showFocusOutline} />\r\n          {timeDisplay &&\r\n            <div className=\"time-container\">\r\n              <Text variant=\"body\" className=\"time-label\">{timeLabelRef.current}</Text>\r\n              <TimeField time={timeSpec} timeDisplay={timeDisplay} onTimeChange={handleOnTimeChanged} />\r\n            </div>\r\n          }\r\n        </div>\r\n      </Popup >\r\n      {!!displayEditField && <DateField style={fieldStyle} className={fieldClassName} initialDate={workingDate} timeDisplay={timeDisplay} dateFormatter={dateFormatter} onDateChange={handleOnDateChanged} />}\r\n    </>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"DatePickerPopupButton.js","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DatePickerPopupButton.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 Date\n */\n\nimport * as React from \"react\";\nimport { DateFormatter, RelativePosition, SpecialKey, TimeDisplay } from \"@itwin/appui-abstract\";\nimport { CommonProps, Popup } from \"@itwin/core-react\";\nimport { Text } from \"@itwin/itwinui-react\";\nimport { UiComponents } from \"../UiComponents\";\nimport { DatePicker } from \"./DatePicker\";\nimport { DateField } from \"./DateField\";\nimport { TimeField, TimeSpec } from \"./TimeField\";\nimport \"./DatePickerPopupButton.scss\";\n\n/** Props used by [[DatePickerPopupButton]] component.\n * @alpha */\nexport interface DatePickerPopupButtonProps extends CommonProps {\n  /** Date to be shown as the selected date. */\n  selected: Date;\n  /** If true show the date (and optionally time) edit field next to button */\n  displayEditField?: boolean;\n  // If defined show time in popup and also display time if input field is shown\n  timeDisplay?: TimeDisplay;\n  /** Function called when Date changes. */\n  onDateChange?: (day: Date) => void;\n  /** Optional tooltip */\n  buttonToolTip?: string;\n  /* Custom date formatter. WARNING: if used values will only be shown in specified format and will not be based on locale.\n   * If used the existence of a parseDate function will determine if the edit field allows editing. */\n  dateFormatter?: DateFormatter;\n  /** User defined class name for edit field. */\n  fieldClassName?: string;\n  /** User defined style for edit field. */\n  fieldStyle?: React.CSSProperties;\n}\n\n/** Component that displays a button used to pick a date and optionally a time.\n * @alpha\n * */\nexport function DatePickerPopupButton({ displayEditField, timeDisplay, selected, onDateChange, dateFormatter,\n  buttonToolTip, fieldStyle, fieldClassName, style }: DatePickerPopupButtonProps) {\n  const [workingDate, setWorkingDate] = React.useState(new Date(selected.getTime()));\n  const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);\n  const timeLabelRef = React.useRef(UiComponents.translate(\"datepicker.time\"));\n  const toolTipLabelRef = React.useRef(UiComponents.translate(\"datepicker.selectDate\"));\n  const toolTipLabel = React.useMemo(() => buttonToolTip ? buttonToolTip : toolTipLabelRef.current, [buttonToolTip]);\n\n  // See if props have changed since component mounted\n  React.useEffect(() => {\n    const newWorkingDate = new Date(selected.getTime());\n    setWorkingDate(newWorkingDate);\n  }, [selected]);\n\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const togglePopupDisplay = React.useCallback((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    event.preventDefault();\n    setShowFocusOutline(false);\n    setIsSettingsOpen((prev) => !prev);\n  }, [setIsSettingsOpen]);\n\n  const handleCloseSetting = React.useCallback(() => {\n    setIsSettingsOpen(false);\n  }, [setIsSettingsOpen]);\n\n  const handleOnDateChanged = (day: Date) => {\n    // combine current time into selected Date\n    const newWorkingDate = new Date(day.getTime());\n    newWorkingDate.setHours(workingDate.getHours(), workingDate.getMinutes(), workingDate.getSeconds());\n    onDateChange && onDateChange(newWorkingDate);\n    !timeDisplay && setIsSettingsOpen(false);\n  };\n\n  const handleOnTimeChanged = (time: TimeSpec) => {\n    // Combine new time into selected Date\n    const newWorkingDate = new Date(workingDate.getTime());\n    newWorkingDate.setHours(time.hours, time.minutes, time.seconds);\n    setWorkingDate(newWorkingDate);\n    onDateChange && onDateChange(newWorkingDate);\n  };\n\n  const [showFocusOutline, setShowFocusOutline] = React.useState(false);\n  const handlePopupKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLButtonElement>) => {\n    // istanbul ignore else\n    if (event.key === SpecialKey.Space) {\n      setShowFocusOutline(true);\n      setIsSettingsOpen(true);\n    }\n  }, []);\n\n  const timeSpec: TimeSpec = { hours: workingDate.getHours(), minutes: workingDate.getMinutes(), seconds: workingDate.getSeconds() };\n  return (\n    <>\n      <button title={toolTipLabel} style={style} className=\"components-date-picker-calendar-popup-button\" onKeyDown={handlePopupKeyDown}\n        data-testid=\"components-date-picker-calendar-popup-button\" onPointerDown={togglePopupDisplay} ref={buttonRef}>\n        <div className=\"datepicker-button\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n            <path d=\"M13,13H9V10h4ZM16,3V15a1,1,0,0,1-1,1H1a1,1,0,0,1-1-1V3A1,1,0,0,1,1,2H3V0H4V2h8V0h1V2h2A1,1,0,0,1,16,3ZM15,6H1v9H15Z\" />\n          </svg>\n        </div>\n      </button>\n      <Popup\n        isOpen={isSettingsOpen}\n        position={RelativePosition.BottomLeft}\n        onClose={handleCloseSetting}\n        target={buttonRef.current}\n        closeOnEnter={false}\n        moveFocus={showFocusOutline}\n        closeOnNestedPopupOutsideClick\n      >\n        <div className=\"components-date-picker-calendar-popup-panel\" data-testid=\"components-date-picker-calendar-popup-panel\">\n          <DatePicker selected={workingDate} onDateChange={handleOnDateChanged} showFocusOutline={showFocusOutline} />\n          {timeDisplay &&\n            <div className=\"time-container\">\n              <Text variant=\"body\" className=\"time-label\">{timeLabelRef.current}</Text>\n              <TimeField time={timeSpec} timeDisplay={timeDisplay} onTimeChange={handleOnTimeChanged} />\n            </div>\n          }\n        </div>\n      </Popup >\n      {!!displayEditField && <DateField style={fieldStyle} className={fieldClassName} initialDate={workingDate} timeDisplay={timeDisplay} dateFormatter={dateFormatter} onDateChange={handleOnDateChanged} />}\n    </>\n  );\n}\n"]}

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

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

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

@@ -1,19 +1,19 @@
-/** @packageDocumentation
- * @module Date
- */
-import { DateFormatter } from "@itwin/appui-abstract";
-/**
- * A basic class that allows user to provide an Intl.DateTimeFormat
- * that can be used to format the date and time display. If no format is
- * specified a default format will be used. This default implementation does not
- * support parsing, so when used by [[DatePickerPopup]] the edit field will be readonly. If
- * a parseData function is implemented then the edit field will be editable.
- * @alpha
- */
-export declare class IntlFormatter implements DateFormatter {
-    private _intlFormatter?;
-    constructor(_intlFormatter?: Intl.DateTimeFormat | undefined);
-    get formatter(): Intl.DateTimeFormat;
-    formateDate(day: Date): string;
-}
+/** @packageDocumentation
+ * @module Date
+ */
+import { DateFormatter } from "@itwin/appui-abstract";
+/**
+ * A basic class that allows user to provide an Intl.DateTimeFormat
+ * that can be used to format the date and time display. If no format is
+ * specified a default format will be used. This default implementation does not
+ * support parsing, so when used by [[DatePickerPopup]] the edit field will be readonly. If
+ * a parseData function is implemented then the edit field will be editable.
+ * @alpha
+ */
+export declare class IntlFormatter implements DateFormatter {
+    private _intlFormatter?;
+    constructor(_intlFormatter?: Intl.DateTimeFormat | undefined);
+    get formatter(): Intl.DateTimeFormat;
+    formateDate(day: Date): string;
+}
 //# sourceMappingURL=IntlFormatter.d.ts.map

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

@@ -1,45 +1,45 @@
-"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
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IntlFormatter = void 0;
-/**
- * A basic class that allows user to provide an Intl.DateTimeFormat
- * that can be used to format the date and time display. If no format is
- * specified a default format will be used. This default implementation does not
- * support parsing, so when used by [[DatePickerPopup]] the edit field will be readonly. If
- * a parseData function is implemented then the edit field will be editable.
- * @alpha
- */
-class IntlFormatter {
-    constructor(_intlFormatter) {
-        this._intlFormatter = _intlFormatter;
-    }
-    get formatter() {
-        if (!this._intlFormatter) {
-            // https://tc39.es/ecma402/#sec-intl-datetimeformat-constructor
-            this._intlFormatter = new Intl.DateTimeFormat(undefined, {
-                weekday: "short",
-                year: "numeric",
-                month: "2-digit",
-                day: "2-digit",
-                hour: "numeric",
-                hour12: true,
-                minute: "numeric",
-                second: "numeric", /* "2-digit", "numeric" */
-                /* timeZoneName:	"short", */ /* "short", "long" */
-            });
-        }
-        return this._intlFormatter;
-    }
-    formateDate(day) {
-        return this.formatter.format(day);
-    }
-}
-exports.IntlFormatter = IntlFormatter;
+"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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IntlFormatter = void 0;
+/**
+ * A basic class that allows user to provide an Intl.DateTimeFormat
+ * that can be used to format the date and time display. If no format is
+ * specified a default format will be used. This default implementation does not
+ * support parsing, so when used by [[DatePickerPopup]] the edit field will be readonly. If
+ * a parseData function is implemented then the edit field will be editable.
+ * @alpha
+ */
+class IntlFormatter {
+    constructor(_intlFormatter) {
+        this._intlFormatter = _intlFormatter;
+    }
+    get formatter() {
+        if (!this._intlFormatter) {
+            // https://tc39.es/ecma402/#sec-intl-datetimeformat-constructor
+            this._intlFormatter = new Intl.DateTimeFormat(undefined, {
+                weekday: "short",
+                year: "numeric",
+                month: "2-digit",
+                day: "2-digit",
+                hour: "numeric",
+                hour12: true,
+                minute: "numeric",
+                second: "numeric", /* "2-digit", "numeric" */
+                /* timeZoneName:	"short", */ /* "short", "long" */
+            });
+        }
+        return this._intlFormatter;
+    }
+    formateDate(day) {
+        return this.formatter.format(day);
+    }
+}
+exports.IntlFormatter = IntlFormatter;
 //# sourceMappingURL=IntlFormatter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IntlFormatter.js","sourceRoot":"","sources":["../../../../src/components-react/datepicker/IntlFormatter.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAIH;;;;;;;GAOG;AACH,MAAa,aAAa;IACxB,YAAoB,cAAoC;QAApC,mBAAc,GAAd,cAAc,CAAsB;IACxD,CAAC;IAED,IAAW,SAAS;QAClB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACxB,+DAA+D;YAC/D,IAAI,CAAC,cAAc,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,EACrD;gBACE,OAAO,EAAE,OAAO;gBAChB,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,SAAS;gBAChB,GAAG,EAAE,SAAS;gBACd,IAAI,EAAE,SAAS;gBACf,MAAM,EAAE,IAAI;gBACZ,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,SAAS,EAAG,0BAA0B;gBAC9C,4BAA4B,CAAC,qBAAqB;aACnD,CAAC,CAAC;SACN;QACD,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAEM,WAAW,CAAC,GAAS;QAC1B,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACpC,CAAC;CAKF;AA9BD,sCA8BC","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 { DateFormatter } from \"@itwin/appui-abstract\";\r\n\r\n/**\r\n * A basic class that allows user to provide an Intl.DateTimeFormat\r\n * that can be used to format the date and time display. If no format is\r\n * specified a default format will be used. This default implementation does not\r\n * support parsing, so when used by [[DatePickerPopup]] the edit field will be readonly. If\r\n * a parseData function is implemented then the edit field will be editable.\r\n * @alpha\r\n */\r\nexport class IntlFormatter implements DateFormatter {\r\n  constructor(private _intlFormatter?: Intl.DateTimeFormat) {\r\n  }\r\n\r\n  public get formatter(): Intl.DateTimeFormat {\r\n    if (!this._intlFormatter) {\r\n      // https://tc39.es/ecma402/#sec-intl-datetimeformat-constructor\r\n      this._intlFormatter = new Intl.DateTimeFormat(undefined,\r\n        {\r\n          weekday: \"short\",    /* \"narrow\", \"short\", \"long\" */\r\n          year: \"numeric\",    /* \"2-digit\", \"numeric\" */\r\n          month: \"2-digit\",   /* \"2-digit\", \"numeric\", \"narrow\", \"short\", \"long\" */\r\n          day: \"2-digit\",     /* \"2-digit\", \"numeric\" */\r\n          hour: \"numeric\",    /* \"2-digit\", \"numeric\" */\r\n          hour12: true,\r\n          minute: \"numeric\",  /* \"2-digit\", \"numeric\" */\r\n          second: \"numeric\",  /* \"2-digit\", \"numeric\" */\r\n          /* timeZoneName:\t\"short\", */ /* \"short\", \"long\" */\r\n        });\r\n    }\r\n    return this._intlFormatter;\r\n  }\r\n\r\n  public formateDate(day: Date) {\r\n    return this.formatter.format(day);\r\n  }\r\n\r\n  // The default implementation does not currently support parsing. If a derived class supports parsing then the\r\n  // parseDate function must be implemented.\r\n  // parseDate(dateString: string): Date|undefined {}\r\n}\r\n\r\n"]}
+{"version":3,"file":"IntlFormatter.js","sourceRoot":"","sources":["../../../../src/components-react/datepicker/IntlFormatter.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAIH;;;;;;;GAOG;AACH,MAAa,aAAa;IACxB,YAAoB,cAAoC;QAApC,mBAAc,GAAd,cAAc,CAAsB;IACxD,CAAC;IAED,IAAW,SAAS;QAClB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACxB,+DAA+D;YAC/D,IAAI,CAAC,cAAc,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,EACrD;gBACE,OAAO,EAAE,OAAO;gBAChB,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,SAAS;gBAChB,GAAG,EAAE,SAAS;gBACd,IAAI,EAAE,SAAS;gBACf,MAAM,EAAE,IAAI;gBACZ,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,SAAS,EAAG,0BAA0B;gBAC9C,4BAA4B,CAAC,qBAAqB;aACnD,CAAC,CAAC;SACN;QACD,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAEM,WAAW,CAAC,GAAS;QAC1B,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACpC,CAAC;CAKF;AA9BD,sCA8BC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Date\n */\n\nimport { DateFormatter } from \"@itwin/appui-abstract\";\n\n/**\n * A basic class that allows user to provide an Intl.DateTimeFormat\n * that can be used to format the date and time display. If no format is\n * specified a default format will be used. This default implementation does not\n * support parsing, so when used by [[DatePickerPopup]] the edit field will be readonly. If\n * a parseData function is implemented then the edit field will be editable.\n * @alpha\n */\nexport class IntlFormatter implements DateFormatter {\n  constructor(private _intlFormatter?: Intl.DateTimeFormat) {\n  }\n\n  public get formatter(): Intl.DateTimeFormat {\n    if (!this._intlFormatter) {\n      // https://tc39.es/ecma402/#sec-intl-datetimeformat-constructor\n      this._intlFormatter = new Intl.DateTimeFormat(undefined,\n        {\n          weekday: \"short\",    /* \"narrow\", \"short\", \"long\" */\n          year: \"numeric\",    /* \"2-digit\", \"numeric\" */\n          month: \"2-digit\",   /* \"2-digit\", \"numeric\", \"narrow\", \"short\", \"long\" */\n          day: \"2-digit\",     /* \"2-digit\", \"numeric\" */\n          hour: \"numeric\",    /* \"2-digit\", \"numeric\" */\n          hour12: true,\n          minute: \"numeric\",  /* \"2-digit\", \"numeric\" */\n          second: \"numeric\",  /* \"2-digit\", \"numeric\" */\n          /* timeZoneName:\t\"short\", */ /* \"short\", \"long\" */\n        });\n    }\n    return this._intlFormatter;\n  }\n\n  public formateDate(day: Date) {\n    return this.formatter.format(day);\n  }\n\n  // The default implementation does not currently support parsing. If a derived class supports parsing then the\n  // parseDate function must be implemented.\n  // parseDate(dateString: string): Date|undefined {}\n}\n\n"]}

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

@@ -1,30 +1,30 @@
-/** @packageDocumentation
- * @module Date
- */
-/// <reference types="react" />
-import { TimeDisplay } from "@itwin/appui-abstract";
-import "./TimeField.scss";
-/** Interface used to hold 24 hour time in
- * hours, minutes, and seconds.
- * @internal
- */
-export interface TimeSpec {
-    hours: number;
-    minutes: number;
-    seconds: number;
-}
-/** Interface for props used by [[TimeField]] component.
- * @internal
- */
-export interface TimeFieldProps {
-    time: TimeSpec;
-    timeDisplay: TimeDisplay;
-    onTimeChange?: (time: TimeSpec) => void;
-    readOnly?: boolean;
-}
-/** Field used to set the Hour:Minutes:Seconds in the [[DatePicker]] Popup panel. The user may key-in the value or use up/down keys to
- * change the time.
- * @internal
- */
-export declare function TimeField({ time, timeDisplay, readOnly, onTimeChange }: TimeFieldProps): JSX.Element;
+/** @packageDocumentation
+ * @module Date
+ */
+/// <reference types="react" />
+import { TimeDisplay } from "@itwin/appui-abstract";
+import "./TimeField.scss";
+/** Interface used to hold 24 hour time in
+ * hours, minutes, and seconds.
+ * @internal
+ */
+export interface TimeSpec {
+    hours: number;
+    minutes: number;
+    seconds: number;
+}
+/** Interface for props used by [[TimeField]] component.
+ * @internal
+ */
+export interface TimeFieldProps {
+    time: TimeSpec;
+    timeDisplay: TimeDisplay;
+    onTimeChange?: (time: TimeSpec) => void;
+    readOnly?: boolean;
+}
+/** Field used to set the Hour:Minutes:Seconds in the [[DatePicker]] Popup panel. The user may key-in the value or use up/down keys to
+ * change the time.
+ * @internal
+ */
+export declare function TimeField({ time, timeDisplay, readOnly, onTimeChange }: TimeFieldProps): JSX.Element;
 //# sourceMappingURL=TimeField.d.ts.map