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

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

@@ -4,21 +4,25 @@
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
 @import "~@itwin/core-react/lib/cjs/core-react/style/opacity";
-@import "~@itwin/itwinui-css/scss/style/typography";
-@import "~@itwin/itwinui-css/scss/style/variables";
 @import "~@itwin/core-react/lib/cjs/core-react/icons/variables";
 @import "~@itwin/core-react/lib/cjs/core-react/button/variables";
 
 $date-picker-m: 16px;
-$date-picker-icons-color-actionable: rgba($buic-foreground-body, $uicore-opacity-2);
-$date-picker-icons-color-actionable-hover: rgba($buic-foreground-body, $uicore-opacity-1);
-$date-picker-outside-month-color: $buic-text-color-disabled;
+$date-picker-icons-color-actionable: rgba(
+  $buic-foreground-body,
+  $uicore-opacity-2
+);
+$date-picker-icons-color-actionable-hover: rgba(
+  $buic-foreground-body,
+  $uicore-opacity-1
+);
+$date-picker-outside-month-color: var(--iui-color-text-disabled);
 $outline-size: 2px;
 
 .components-date-picker-calendar {
-  border-radius: 3px 3px 0 0;
+  border-radius: var(--iui-border-radius-1) var(--iui-border-radius-1) 0 0;
   background-color: $buic-background-control;
-  color: $buic-foreground-body;
+  color: var(--iui-color-text);
   font-size: 14px;
 
   * {
@@ -38,7 +42,7 @@ $outline-size: 2px;
       border: none;
       cursor: pointer;
       padding: 5px;
-      font-size: $uicore-icons-small;
+      font-size: var(--iui-font-size-2);
       user-select: none;
       color: $date-picker-icons-color-actionable;
 
@@ -47,15 +51,16 @@ $outline-size: 2px;
 
         &.showFocusOutline {
           outline: 0px;
-          border: 0px solid $buic-inputs-border;
-          border-radius: 3px;
+          border: 0px solid var(--iui-color-border-foreground);
+          border-radius: var(--iui-border-radius-1);
           border-color: var(--buic-foreground-focus-border);
-          box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px, var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
+          box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
+            var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
         }
       }
 
       &:hover {
-        color: $buic-foreground-primary;
+        color: var(--iui-color-text-accent);
       }
     }
 
@@ -65,7 +70,7 @@ $outline-size: 2px;
 
     .components-month-year {
       flex: 2;
-      font-weight: $iui-font-weight-bold;
+      font-weight: var(--iui-font-weight-bold);
       text-align: center;
     }
   }
@@ -81,7 +86,7 @@ $outline-size: 2px;
     .components-date-picker-calendar-header-day-short {
       text-align: center;
       text-decoration: none;
-      font-weight: $iui-font-weight-bold;
+      font-weight: var(--iui-font-weight-bold);
       height: 32px;
       width: 32px;
       display: inline-flex;
@@ -104,17 +109,19 @@ $outline-size: 2px;
       outline: 0px;
 
       &.showFocusOutline {
-        border: 0px solid $buic-inputs-border;
-        border-radius: 3px;
+        border: 0px solid var(--iui-color-border-foreground);
+        border-radius: var(--iui-border-radius-1);
         border-color: var(--buic-foreground-focus-border);
-        box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px, var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
+        box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
+          var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
 
         .components-date-picker-calendar-day.focused {
           outline: 0px;
-          border: 1px solid $buic-inputs-border;
-          border-radius: 3px;
+          border: 1px solid var(--iui-color-border-foreground);
+          border-radius: var(--iui-border-radius-1);
           border-color: var(--buic-foreground-focus-border);
-          box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px, var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
+          box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
+            var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
           z-index: 1;
         }
       }
@@ -137,35 +144,34 @@ $outline-size: 2px;
 
       &:hover:not(.selected) {
         background-color: $buic-row-hover;
-        border-radius: $iui-border-radius;
-        font-weight: $iui-font-weight-semibold;
+        border-radius: var(--iui-border-radius-1);
+        font-weight: var(--iui-font-weight-semibold);
       }
 
       &.selected {
         background-color: $buic-background-primary;
-        color: $buic-foreground-accessory;
-        font-weight: $iui-font-weight-semibold;
-        border-radius: $iui-border-radius;
+        color: var(--iui-color-white);
+        font-weight: var(--iui-font-weight-semibold);
+        border-radius: var(--iui-border-radius-1);
 
         &:hover {
           background-color: $buic-row-hover;
-          color: $buic-foreground-body;
+          color: var(--iui-color-text);
         }
       }
 
       &.today {
         background-color: rgba($buic-foreground-body, $uicore-opacity-6);
-        font-weight: $iui-font-weight-semibold;
+        font-weight: var(--iui-font-weight-semibold);
         border-radius: 50%;
       }
 
       &.notCurrentMonth {
         &:not(.selected) {
           color: $date-picker-outside-month-color;
-          font-weight: $iui-font-weight-light;
+          font-weight: var(--iui-font-weight-light);
         }
       }
     }
   }
-
-}
+}

package/lib/cjs/components-react/datepicker/DatePickerPopupButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerPopupButton.d.ts","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DatePickerPopupButton.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAgC,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACjG,OAAO,EAAY,WAAW,EAAS,MAAM,mBAAmB,CAAC;AAKjE,OAAO,8BAA8B,CAAC;AAEtC;YACY;AACZ,MAAM,WAAW,0BAA2B,SAAQ,WAAW;IAC7D,6CAA6C;IAC7C,QAAQ,EAAE,IAAI,CAAC;IACf,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,yCAAyC;IACzC,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,uBAAuB;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yCAAyC;IACzC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAClC;AAED;;KAEK;AACL,wBAAgB,qBAAqB,CAAC,EAAE,gBAAgB,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAC1G,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,0BAA0B,eAkF/E"}
+{"version":3,"file":"DatePickerPopupButton.d.ts","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DatePickerPopupButton.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAgC,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACjG,OAAO,EAAE,WAAW,EAAS,MAAM,mBAAmB,CAAC;AAMvD,OAAO,8BAA8B,CAAC;AAEtC;YACY;AACZ,MAAM,WAAW,0BAA2B,SAAQ,WAAW;IAC7D,6CAA6C;IAC7C,QAAQ,EAAE,IAAI,CAAC;IACf,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,yCAAyC;IACzC,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,uBAAuB;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yCAAyC;IACzC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAClC;AAED;;KAEK;AACL,wBAAgB,qBAAqB,CAAC,EAAE,gBAAgB,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAC1G,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,0BAA0B,eAkF/E"}

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

@@ -30,6 +30,7 @@ exports.DatePickerPopupButton = void 0;
 const React = __importStar(require("react"));
 const appui_abstract_1 = require("@itwin/appui-abstract");
 const core_react_1 = require("@itwin/core-react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
 const UiComponents_1 = require("../UiComponents");
 const DatePicker_1 = require("./DatePicker");
 const DateField_1 = require("./DateField");
@@ -91,7 +92,7 @@ function DatePickerPopupButton({ displayEditField, timeDisplay, selected, onDate
                 React.createElement(DatePicker_1.DatePicker, { selected: workingDate, onDateChange: handleOnDateChanged, showFocusOutline: showFocusOutline }),
                 timeDisplay &&
                     React.createElement("div", { className: "time-container" },
-                        React.createElement(core_react_1.BodyText, { className: "time-label" }, timeLabelRef.current),
+                        React.createElement(itwinui_react_1.Text, { variant: "body", className: "time-label" }, timeLabelRef.current),
                         React.createElement(TimeField_1.TimeField, { time: timeSpec, timeDisplay: timeDisplay, onTimeChange: handleOnTimeChanged })))),
         !!displayEditField && React.createElement(DateField_1.DateField, { style: fieldStyle, className: fieldClassName, initialDate: workingDate, timeDisplay: timeDisplay, dateFormatter: dateFormatter, onDateChange: handleOnDateChanged })));
 }

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 { BodyText, CommonProps, Popup } from \"@itwin/core-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              <BodyText className=\"time-label\">{timeLabelRef.current}</BodyText>\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":["/*---------------------------------------------------------------------------------------------\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"]}

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

@@ -3,11 +3,10 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/core-react/lib/cjs/core-react/index";
-@import "~@itwin/itwinui-css/scss/style/typography";
 
 .components-date-picker-calendar-popup-button {
-  color: $buic-foreground-body;
-  font-size: $iui-font-size;
+  color: var(--iui-color-text);
+  font-size: var(--iui-font-size-1);
   background-color: transparent;
   height: 2.2em;
   border: none;
@@ -19,11 +18,11 @@
   }
 
   svg {
-    fill: $buic-foreground-body;
+    fill: var(--iui-color-icon);
   }
 
   &:hover {
-    color: $buic-foreground-primary-tone;
+    color: var(--iui-color-text-accent-hover);
     cursor: auto;
 
     svg {
@@ -47,7 +46,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    border-top: 2px solid $buic-inputs-border;
+    border-top: 2px solid var(--iui-color-border-foreground);
     padding-top: 8px;
     padding-bottom: 8px;
 
@@ -55,4 +54,4 @@
       margin-right: 4px;
     }
   }
-}
+}

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

@@ -11,13 +11,13 @@
   align-items: center;
   justify-content: flex-start;
   background-color: $buic-background-control;
-  border: 1px solid $buic-inputs-border;
-  border-radius: 3px;
+  border: 1px solid var(--iui-color-border-foreground);
+  border-radius: var(--iui-border-radius-1);
   box-shadow: var(--buic-inputs-boxshadow) 0px 1px 1px inset;
   box-sizing: border-box;
 
   &.has-error {
-    color: $buic-foreground-alert;
+    color: var(--iui-color-text-negative);
   }
 
   .components-time-input {
@@ -35,10 +35,11 @@
 
     &:focus {
       outline: 0px;
-      border: 1px solid $buic-inputs-border;
-      border-radius: 3px;
+      border: 1px solid var(--iui-color-border-foreground);
+      border-radius: var(--iui-border-radius-1);
       border-color: var(--buic-foreground-focus-border);
-      box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px, var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
+      box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
+        var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
       z-index: 1;
       /* bump z-index so drop shadow in not cut off by AM/PM */
     }
@@ -56,10 +57,11 @@
 
     &:focus {
       outline: 0px;
-      border: 1px solid $buic-inputs-border;
-      border-radius: 3px;
+      border: 1px solid var(--iui-color-border-foreground);
+      border-radius: var(--iui-border-radius-1);
       border-color: var(--buic-foreground-focus-border);
-      box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px, var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
+      box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
+        var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
     }
   }
 
@@ -71,4 +73,4 @@
   .iui-input {
     padding: $uicore-iui-input-padding;
   }
-}
+}

package/lib/cjs/components-react/editors/BooleanEditor.d.ts

@@ -20,6 +20,7 @@ export declare class BooleanEditor extends React.PureComponent<PropertyEditorPro
     /** @internal */
     readonly state: Readonly<BooleanEditorState>;
     getPropertyValue(): Promise<PropertyValue | undefined>;
+    private getPropertyValueSync;
     get htmlElement(): HTMLElement | null;
     get hasFocus(): boolean;
     private _updateCheckboxValue;

package/lib/cjs/components-react/editors/BooleanEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BooleanEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/editors/BooleanEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAA0C,MAAM,uBAAuB,CAAC;AAE9F,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAyB,MAAM,yBAAyB,CAAC;AAEpF,gBAAgB;AAChB,UAAU,kBAAkB;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,kBAAkB,CAAE,YAAW,UAAU;IACnH,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAuC;IAE5D,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAG1D;IAEW,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;IAgBnE,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,OAAO,CAAC,oBAAoB,CA2B1B;IAEF,gBAAgB;IACA,iBAAiB;IAKjC,gBAAgB;IACA,oBAAoB;IAIpC,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;YAMnD,iBAAiB;IAoB/B,gBAAgB;IACA,MAAM;CAmBvB;AAED;;;GAGG;AACH,qBAAa,qBAAsB,SAAQ,kBAAkB;IAE3D,IAAoB,oBAAoB,IAAI,OAAO,CAElD;IAED,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;CACF"}
+{"version":3,"file":"BooleanEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/editors/BooleanEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAA0C,MAAM,uBAAuB,CAAC;AAE9F,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAyB,MAAM,yBAAyB,CAAC;AAEpF,gBAAgB;AAChB,UAAU,kBAAkB;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,kBAAkB,CAAE,YAAW,UAAU;IACnH,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAuC;IAE5D,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAG1D;IAEW,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;IAInE,OAAO,CAAC,oBAAoB;IAgB5B,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,OAAO,CAAC,oBAAoB,CAkB1B;IAEF,gBAAgB;IACA,iBAAiB;IAKjC,gBAAgB;IACA,oBAAoB;IAIpC,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAMjE,OAAO,CAAC,iBAAiB;IAoBzB,gBAAgB;IACA,MAAM;CAmBvB;AAED;;;GAGG;AACH,qBAAa,qBAAsB,SAAQ,kBAAkB;IAE3D,IAAoB,oBAAoB,IAAI,OAAO,CAElD;IAED,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;CACF"}

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

@@ -52,21 +52,13 @@ class BooleanEditor extends React.PureComponent {
         this._updateCheckboxValue = (e) => {
             // istanbul ignore else
             if (this._isMounted) {
-                let checkboxValue = false;
-                // istanbul ignore if
-                if (e.target.checked !== undefined) // Needed for unit test environment
-                    checkboxValue = e.target.checked;
-                else {
-                    // istanbul ignore else
-                    if (e.target.value !== undefined && typeof e.target.value === "boolean")
-                        checkboxValue = e.target.value;
-                }
+                const checkboxValue = !!e.target.checked;
                 this.setState({
                     checkboxValue,
-                }, async () => {
+                }, () => {
                     // istanbul ignore else
                     if (this.props.propertyRecord && this.props.onCommit) {
-                        const propertyValue = await this.getPropertyValue();
+                        const propertyValue = this.getPropertyValueSync();
                         // istanbul ignore else
                         if (propertyValue !== undefined) {
                             this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });
@@ -77,6 +69,9 @@ class BooleanEditor extends React.PureComponent {
         };
     }
     async getPropertyValue() {
+        return this.getPropertyValueSync();
+    }
+    getPropertyValueSync() {
         const record = this.props.propertyRecord;
         let propertyValue;
         // istanbul ignore else
@@ -98,7 +93,7 @@ class BooleanEditor extends React.PureComponent {
     /** @internal */
     componentDidMount() {
         this._isMounted = true;
-        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+        this.setStateFromProps();
     }
     /** @internal */
     componentWillUnmount() {
@@ -107,10 +102,10 @@ class BooleanEditor extends React.PureComponent {
     /** @internal */
     componentDidUpdate(prevProps) {
         if (this.props.propertyRecord !== prevProps.propertyRecord) {
-            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+            this.setStateFromProps();
         }
     }
-    async setStateFromProps() {
+    setStateFromProps() {
         const { propertyRecord } = this.props;
         let checkboxValue = false;
         let isDisabled = false;

package/lib/cjs/components-react/editors/BooleanEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"BooleanEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/BooleanEditor.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 PropertyEditors\r\n */\r\n\r\nimport \"./BooleanEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { PropertyValue, PropertyValueFormat, StandardTypeNames } from \"@itwin/appui-abstract\";\r\nimport { Checkbox } from \"@itwin/itwinui-react\";\r\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\r\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\r\n\r\n/** @internal */\r\ninterface BooleanEditorState {\r\n  checkboxValue: boolean;\r\n  isDisabled?: boolean;\r\n}\r\n\r\n/** BooleanEditor React component that is a property editor with checkbox input\r\n * @public\r\n */\r\nexport class BooleanEditor extends React.PureComponent<PropertyEditorProps, BooleanEditorState> implements TypeEditor {\r\n  private _isMounted = false;\r\n  private _inputElement = React.createRef<HTMLInputElement>();\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<BooleanEditorState> = {\r\n    checkboxValue: false,\r\n    isDisabled: false,\r\n  };\r\n\r\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\r\n    const record = this.props.propertyRecord;\r\n    let propertyValue: PropertyValue | undefined;\r\n\r\n    // istanbul ignore else\r\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      propertyValue = {\r\n        valueFormat: PropertyValueFormat.Primitive,\r\n        value: this.state.checkboxValue,\r\n        displayValue: \"\",\r\n      };\r\n    }\r\n\r\n    return propertyValue;\r\n  }\r\n\r\n  public get htmlElement(): HTMLElement | null {\r\n    return this._inputElement.current;\r\n  }\r\n\r\n  public get hasFocus(): boolean {\r\n    return document.activeElement === this._inputElement.current;\r\n  }\r\n\r\n  private _updateCheckboxValue = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    // istanbul ignore else\r\n    if (this._isMounted) {\r\n      let checkboxValue: boolean = false;\r\n\r\n      // istanbul ignore if\r\n      if (e.target.checked !== undefined)   // Needed for unit test environment\r\n        checkboxValue = e.target.checked;\r\n      else {\r\n        // istanbul ignore else\r\n        if (e.target.value !== undefined && typeof e.target.value === \"boolean\")\r\n          checkboxValue = e.target.value;\r\n      }\r\n\r\n      this.setState({\r\n        checkboxValue,\r\n      }, async () => {\r\n        // istanbul ignore else\r\n        if (this.props.propertyRecord && this.props.onCommit) {\r\n          const propertyValue = await this.getPropertyValue();\r\n          // istanbul ignore else\r\n          if (propertyValue !== undefined) {\r\n            this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });\r\n          }\r\n        }\r\n      });\r\n    }\r\n  };\r\n\r\n  /** @internal */\r\n  public override componentDidMount() {\r\n    this._isMounted = true;\r\n    this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentWillUnmount() {\r\n    this._isMounted = false;\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\r\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\r\n      this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n    }\r\n  }\r\n\r\n  private async setStateFromProps() {\r\n    const { propertyRecord } = this.props;\r\n    let checkboxValue = false;\r\n    let isDisabled = false;\r\n\r\n    // istanbul ignore else\r\n    if (propertyRecord && propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      const primitiveValue = propertyRecord.value.value;\r\n      checkboxValue = primitiveValue as boolean;\r\n    }\r\n\r\n    // istanbul ignore else\r\n    if (propertyRecord && propertyRecord.isDisabled)\r\n      isDisabled = propertyRecord.isDisabled;\r\n\r\n    // istanbul ignore else\r\n    if (this._isMounted)\r\n      this.setState({ checkboxValue, isDisabled });\r\n  }\r\n\r\n  /** @internal */\r\n  public override render() {\r\n    const className = classnames(\"components-cell-editor\", \"components-boolean-editor\", this.props.className);\r\n    const checked = this.state.checkboxValue;\r\n    const isDisabled = !!this.state.isDisabled;\r\n\r\n    return (\r\n      <Checkbox\r\n        ref={this._inputElement}\r\n        onBlur={this.props.onBlur}\r\n        className={className}\r\n        style={this.props.style}\r\n        checked={checked}\r\n        onChange={this._updateCheckboxValue}\r\n        setFocus={this.props.setFocus}\r\n        disabled={isDisabled}\r\n        data-testid=\"components-checkbox-editor\">\r\n      </Checkbox>\r\n    );\r\n  }\r\n}\r\n\r\n/** Boolean Property Editor registered for the \"bool\" and \"boolean\" type names.\r\n * It uses the [[BooleanEditor]] React component.\r\n * @public\r\n */\r\nexport class BooleanPropertyEditor extends PropertyEditorBase {\r\n  // istanbul ignore next\r\n  public override get containerHandlesBlur(): boolean {\r\n    return false;\r\n  }\r\n\r\n  public get reactNode(): React.ReactNode {\r\n    return <BooleanEditor />;\r\n  }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Bool, BooleanPropertyEditor);\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Boolean, BooleanPropertyEditor);\r\n"]}
+{"version":3,"file":"BooleanEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/BooleanEditor.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 PropertyEditors\r\n */\r\n\r\nimport \"./BooleanEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { PropertyValue, PropertyValueFormat, StandardTypeNames } from \"@itwin/appui-abstract\";\r\nimport { Checkbox } from \"@itwin/itwinui-react\";\r\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\r\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\r\n\r\n/** @internal */\r\ninterface BooleanEditorState {\r\n  checkboxValue: boolean;\r\n  isDisabled?: boolean;\r\n}\r\n\r\n/** BooleanEditor React component that is a property editor with checkbox input\r\n * @public\r\n */\r\nexport class BooleanEditor extends React.PureComponent<PropertyEditorProps, BooleanEditorState> implements TypeEditor {\r\n  private _isMounted = false;\r\n  private _inputElement = React.createRef<HTMLInputElement>();\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<BooleanEditorState> = {\r\n    checkboxValue: false,\r\n    isDisabled: false,\r\n  };\r\n\r\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\r\n    return this.getPropertyValueSync();\r\n  }\r\n\r\n  private getPropertyValueSync(): PropertyValue | undefined {\r\n    const record = this.props.propertyRecord;\r\n    let propertyValue: PropertyValue | undefined;\r\n\r\n    // istanbul ignore else\r\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      propertyValue = {\r\n        valueFormat: PropertyValueFormat.Primitive,\r\n        value: this.state.checkboxValue,\r\n        displayValue: \"\",\r\n      };\r\n    }\r\n\r\n    return propertyValue;\r\n  }\r\n\r\n  public get htmlElement(): HTMLElement | null {\r\n    return this._inputElement.current;\r\n  }\r\n\r\n  public get hasFocus(): boolean {\r\n    return document.activeElement === this._inputElement.current;\r\n  }\r\n\r\n  private _updateCheckboxValue = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    // istanbul ignore else\r\n    if (this._isMounted) {\r\n      const checkboxValue = !!e.target.checked;\r\n\r\n      this.setState({\r\n        checkboxValue,\r\n      }, () => {\r\n        // istanbul ignore else\r\n        if (this.props.propertyRecord && this.props.onCommit) {\r\n          const propertyValue = this.getPropertyValueSync();\r\n          // istanbul ignore else\r\n          if (propertyValue !== undefined) {\r\n            this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });\r\n          }\r\n        }\r\n      });\r\n    }\r\n  };\r\n\r\n  /** @internal */\r\n  public override componentDidMount() {\r\n    this._isMounted = true;\r\n    this.setStateFromProps();\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentWillUnmount() {\r\n    this._isMounted = false;\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\r\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\r\n      this.setStateFromProps();\r\n    }\r\n  }\r\n\r\n  private setStateFromProps() {\r\n    const { propertyRecord } = this.props;\r\n    let checkboxValue = false;\r\n    let isDisabled = false;\r\n\r\n    // istanbul ignore else\r\n    if (propertyRecord && propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      const primitiveValue = propertyRecord.value.value;\r\n      checkboxValue = primitiveValue as boolean;\r\n    }\r\n\r\n    // istanbul ignore else\r\n    if (propertyRecord && propertyRecord.isDisabled)\r\n      isDisabled = propertyRecord.isDisabled;\r\n\r\n    // istanbul ignore else\r\n    if (this._isMounted)\r\n      this.setState({ checkboxValue, isDisabled });\r\n  }\r\n\r\n  /** @internal */\r\n  public override render() {\r\n    const className = classnames(\"components-cell-editor\", \"components-boolean-editor\", this.props.className);\r\n    const checked = this.state.checkboxValue;\r\n    const isDisabled = !!this.state.isDisabled;\r\n\r\n    return (\r\n      <Checkbox\r\n        ref={this._inputElement}\r\n        onBlur={this.props.onBlur}\r\n        className={className}\r\n        style={this.props.style}\r\n        checked={checked}\r\n        onChange={this._updateCheckboxValue}\r\n        setFocus={this.props.setFocus}\r\n        disabled={isDisabled}\r\n        data-testid=\"components-checkbox-editor\">\r\n      </Checkbox>\r\n    );\r\n  }\r\n}\r\n\r\n/** Boolean Property Editor registered for the \"bool\" and \"boolean\" type names.\r\n * It uses the [[BooleanEditor]] React component.\r\n * @public\r\n */\r\nexport class BooleanPropertyEditor extends PropertyEditorBase {\r\n  // istanbul ignore next\r\n  public override get containerHandlesBlur(): boolean {\r\n    return false;\r\n  }\r\n\r\n  public get reactNode(): React.ReactNode {\r\n    return <BooleanEditor />;\r\n  }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Bool, BooleanPropertyEditor);\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Boolean, BooleanPropertyEditor);\r\n"]}

package/lib/cjs/components-react/editors/BooleanEditor.scss

@@ -2,23 +2,21 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/space";
-@import "~@itwin/itwinui-css/scss/style/typography";
 
-$checkbox-size: $iui-font-size * 1.2;
+$checkbox-size: calc(var(--iui-font-size-1) * 1.2);
 
 .components-boolean-editor {
-  height:      $checkbox-size;
-  width:       $checkbox-size;
+  height: $checkbox-size;
+  width: $checkbox-size;
   margin-left: 0px;
 
   &.components-cell-editor {
-    border:      none;
+    border: none;
   }
 }
 
 .components-property-list--horizontal {
   .components-boolean-editor {
-    margin-left:        $iui-s;    // Clear the resizer in the PropertyGrid
+    margin-left: var(--iui-size-xs); // Clear the resizer in the PropertyGrid
   }
 }

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

@@ -40,7 +40,7 @@ const TimeField_1 = require("../datepicker/TimeField");
 const DatePicker_1 = require("../datepicker/DatePicker");
 const TypeConverterManager_1 = require("../converters/TypeConverterManager");
 const DateTimeTypeConverter_1 = require("../converters/DateTimeTypeConverter");
-const core_react_1 = require("@itwin/core-react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
 const DateUtils_1 = require("../common/DateUtils");
 /** DateTimeEditor React component that is a property editor for selection of date and time.
  * @internal
@@ -264,7 +264,7 @@ class DateTimeEditor extends React.PureComponent {
                             React.createElement(DatePicker_1.DatePicker, { selected: date, onDateChange: this._handleChange, showFocusOutline: false }),
                             this.state.timeDisplay &&
                                 React.createElement("div", { className: "time-container" },
-                                    React.createElement(core_react_1.BodyText, { className: "time-label" }, "Time"),
+                                    React.createElement(itwinui_react_1.Text, { variant: "body", className: "time-label" }, "Time"),
                                     React.createElement(TimeField_1.TimeField, { time: timeSpec, timeDisplay: this.state.timeDisplay, onTimeChange: this._handleTimeChange })))),
                     React.createElement(PopupButton_1.PopupOkCancelButtons, { onOk: this._handleOk, onCancel: this._handleCancel })))));
     }

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

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