@dynatrace/strato-components 3.0.1 → 3.1.1

package/esm/forms/date-time-picker/DateTimePicker.css

@@ -1,77 +1,69 @@
-._1i883gj6-3-0-1 {
-  --_1i883gj0-3-0-1: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_1i883gj1-3-0-1: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_1i883gj2-3-0-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_1i883gj3-3-0-1: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
-  --_1i883gj4-3-0-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_1i883gj5-3-0-1: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+._1i883gj6-3-1-1 {
+  --_1i883gj0-3-1-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_1i883gj1-3-1-1: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_1i883gj2-3-1-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_1i883gj3-3-1-1: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+  --_1i883gj4-3-1-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_1i883gj5-3-1-1: var(--dt-colors-background-field-neutral-accent, #5b5c81);
   cursor: text;
 }
-._1i883gj7-3-0-1 {
-  --_1i883gj4-3-0-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_1i883gj5-3-0-1: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+._1i883gj7-3-1-1 {
+  --_1i883gj4-3-1-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_1i883gj5-3-1-1: var(--dt-colors-background-field-neutral-accent, #5b5c81);
   cursor: not-allowed;
 }
-._1i883gj8-3-0-1 {
-  --_1i883gj0-3-0-1: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj1-3-0-1: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj2-3-0-1: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-  --_1i883gj3-3-0-1: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
-  --_1i883gj4-3-0-1: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --_1i883gj5-3-0-1: var(--dt-colors-background-field-critical-accent, #c62239);
+._1i883gj8-3-1-1 {
+  --_1i883gj0-3-1-1: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj1-3-1-1: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj2-3-1-1: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  --_1i883gj3-3-1-1: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
+  --_1i883gj4-3-1-1: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --_1i883gj5-3-1-1: var(--dt-colors-background-field-critical-accent, #c62239);
 }
-._1i883gj9-3-0-1 {
-  --_1i883gj0-3-0-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj1-3-0-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj2-3-0-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1i883gj3-3-0-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1i883gj4-3-0-1: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
-  --_1i883gj5-3-0-1: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+._1i883gj9-3-1-1 {
+  --_1i883gj0-3-1-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj1-3-1-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj2-3-1-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_1i883gj3-3-1-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_1i883gj4-3-1-1: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
+  --_1i883gj5-3-1-1: var(--dt-colors-background-field-neutral-accent, #5b5c81);
   cursor: not-allowed;
 }
-._1i883gjb-3-0-1 {
+._1i883gjb-3-1-1 {
   border-start-end-radius: var(--dt-borders-radius-field-default, 6px);
   border-end-end-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1i883gjd-3-0-1 {
-  transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
-  transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
-  transition-property: color, background-color, transform;
-}
-._1i883gje-3-0-1 {
+._1i883gjd-3-1-1 {
   display: flex;
   flex: 1;
-  color: var(--_1i883gj1-3-0-1);
+  color: var(--_1i883gj1-3-1-1);
   white-space-collapse: preserve;
 }
-._1i883gjf-3-0-1 {
+._1i883gje-3-1-1 {
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-8, 8px);
   border-radius: 0;
   border-start-end-radius: var(--dt-borders-radius-field-default, 6px);
   border-end-end-radius: var(--dt-borders-radius-field-default, 6px);
-  color: var(--_1i883gj0-3-0-1);
-  background-color: var(--_1i883gj2-3-0-1);
+  color: var(--_1i883gj0-3-1-1);
+  background-color: var(--_1i883gj2-3-1-1);
 }
-._1i883gjf-3-0-1:hover {
-  background-color: var(--_1i883gj3-3-0-1);
+._1i883gje-3-1-1:hover {
+  background-color: var(--_1i883gj3-3-1-1);
 }
-._r47o0w0-3-0-1 ._r47o0w1-3-0-1 {
-  transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
-  transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
-  transition-property: color, background-color, transform;
-  color: var(--_1i883gj0-3-0-1);
+._r47o0w0-3-1-1 ._r47o0w1-3-1-1 {
+  color: var(--_1i883gj0-3-1-1);
 }
-._r47o0w0-3-0-1 ._r47o0w1-3-0-1::before {
-  color: var(--_1i883gj1-3-0-1);
+._r47o0w0-3-1-1 ._r47o0w1-3-1-1::before {
+  color: var(--_1i883gj1-3-1-1);
 }
-._r47o0w0-3-0-1 ._r47o0w1-3-0-1:focus {
-  background-color: var(--_1i883gj5-3-0-1);
-  color: var(--_1i883gj4-3-0-1);
+._r47o0w0-3-1-1 ._r47o0w1-3-1-1:focus {
+  background-color: var(--_1i883gj5-3-1-1);
+  color: var(--_1i883gj4-3-1-1);
 }
-._r47o0w0-3-0-1 ._r47o0w1-3-0-1:focus::before {
-  color: var(--_1i883gj4-3-0-1);
+._r47o0w0-3-1-1 ._r47o0w1-3-1-1:focus::before {
+  color: var(--_1i883gj4-3-1-1);
 }
-._r47o0w0-3-0-1 *::selection {
-  color: var(--_1i883gj4-3-0-1);
-  background-color: var(--_1i883gj5-3-0-1);
+._r47o0w0-3-1-1 *::selection {
+  color: var(--_1i883gj4-3-1-1);
+  background-color: var(--_1i883gj5-3-1-1);
 }

package/esm/forms/date-time-picker/DateTimePicker.js

@@ -10,7 +10,7 @@ import {
 } from "react";
 import { useIntl } from "react-intl";
 import { DateSelector } from "./DateSelector.js";
-import { dateSelectorCSS, dateTimePickerCSS } from "./DateTimePicker.sty.js";
+import * as styles from "./DateTimePicker.sty.js";
 import { focusDateTimeInput } from "./utils/focusDateTimeInput.js";
 import { getDateTimePickerError } from "./utils/get-error-message.js";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
@@ -205,7 +205,7 @@ const DateTimePicker = forwardRef((props, forwardedRef) => {
           InputGroup,
           {
             className: clsx(
-              dateTimePickerCSS({
+              styles.dateTimePicker({
                 type,
                 disabled: disabledOrAriaDisabled,
                 showError,
@@ -306,7 +306,7 @@ const DateTimePicker = forwardRef((props, forwardedRef) => {
                   readOnly,
                   disabled: !!disabled,
                   error: showError,
-                  className: clsx(dateSelectorCSS, inputGroupClassName),
+                  className: clsx(styles.dateSelector, inputGroupClassName),
                   "data-dtrum-mask": dataDtrumMask,
                   "data-dtrum-allow": dataDtrumAllow
                 }

package/esm/forms/date-time-picker/DateTimePicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-picker/DateTimePicker.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  FocusEventHandler,\n  type FocusEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DateSelector } from './DateSelector.js';\nimport { dateSelectorCSS, dateTimePickerCSS } from './DateTimePicker.sty.js';\nimport type { DateSelectorRef, DateTimePickerProps } from './types.js';\nimport { focusDateTimeInput } from './utils/focusDateTimeInput.js';\nimport { getDateTimePickerError } from './utils/get-error-message.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { fieldColors as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { DateTimeInput } from '../date-time-range-picker/DateTimeInput.js';\nimport { dateTimeRangeCSS } from '../date-time-range-picker/DateTimeRangePicker.sty.js';\nimport {\n  isEqualTimeValue,\n  removePrecisionFromTimeValue,\n} from '../date-time-range-picker/helpers.js';\nimport type {\n  DateTimeError,\n  DateTimeInputRef,\n} from '../date-time-range-picker/types.js';\nimport { InternalBaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useDateTimeMessages } from '../forms-core/hooks/useDateTimeMessages.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { getErrorType } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useMinMaxLogger } from '../forms-core/hooks/useMinMaxLogger.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { convertDateOnlyToDateTime } from '../forms-core/time/helpers.js';\nimport { getTimeValue } from '../forms-core/time/timeParser.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlWithOverlayRef } from '../shared-types.js';\n\nconst COMPONENT_NAME = 'DateTimePicker';\n\n/**\n * Component to comfortably enter a date time value.\n * The `DateTimePicker` component automatically uses the user's settings for the\n * locale and timezone and formats the date and time accordingly.\n * @public\n */\nexport const DateTimePicker = forwardRef<\n  FormControlWithOverlayRef<HTMLSpanElement>,\n  DateTimePickerProps\n>((props, forwardedRef) => {\n  const {\n    id: propId,\n    disabled: propDisabled,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    readOnly = false,\n    required: propRequired,\n    'aria-disabled': ariaDisabledProp,\n    precision = 'minutes',\n    placeholder,\n    value: propValue,\n    defaultValue: propDefaultValue,\n    onChange,\n    min,\n    max,\n    name,\n    type = 'datetime',\n    controlState,\n    ...remainingProps\n  }: DateTimePickerProps = props;\n\n  // log to the sdk when min is larger than max.\n  useMinMaxLogger(min, max, 'DateTimePicker');\n\n  const touchedContainerRef = useRef<HTMLDivElement>(null);\n\n  const { state: formFieldState, dispatch: formFieldDispatch } =\n    useFormFieldMessagesContext();\n  const { showError: showFormFieldError } = formFieldState;\n\n  // Backwards compatibility for controlState.\n  const [hasFormControlError, hint] = useFormControlState(controlState);\n  // _useInputHint will be replaced with new validation concept. APPDEV-8298\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { hintProps } = useInputHint({\n    hint,\n    hasError: hasFormControlError,\n  });\n\n  const showError = hasFormControlError || showFormFieldError;\n\n  const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: ariaDisabledProp,\n  });\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const convertedPropValue = getTimeValue(propValue, precision, type);\n\n  const [internalValue, setInternalValue] = useState(\n    propValue\n      ? convertedPropValue\n      : getTimeValue(propDefaultValue, precision, type),\n  );\n  const [prevPropValue, setPrevPropValue] = useState(\n    getTimeValue(propValue, precision, type) ?? null,\n  );\n\n  if (\n    propValue !== '' &&\n    !isEqualTimeValue(convertedPropValue ?? null, prevPropValue)\n  ) {\n    setPrevPropValue(convertedPropValue ?? null);\n    setInternalValue(convertedPropValue);\n  }\n\n  const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n\n  const dateInputRef = useRef<DateTimeInputRef>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const dateSelectorRef = useRef<DateSelectorRef>(null);\n\n  // No need to show the calendar widget if only a time value can be entered.\n  const showDateSelector = type !== 'time';\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: true,\n    color: showError ? 'critical' : 'neutral',\n    disabled,\n  });\n\n  const intl = useIntl();\n  const calendarTriggerLabel = intl.formatMessage({\n    defaultMessage: 'Datepicker calendar trigger',\n    id: 'Uuc6xAAPyctyHamM',\n    description: 'Text shown for the datetimepicker calendar trigger.',\n  });\n\n  // Provide root and input element reference and functions to interact with the calendar overlay\n  useImperativeHandle(\n    forwardedRef,\n    (): FormControlWithOverlayRef<HTMLSpanElement> => ({\n      element: rootRef.current,\n      inputRef: dateInputRef.current?.inputRef,\n      triggerRef: dateInputRef.current?.inputRef,\n      open: () => dateSelectorRef.current?.open(),\n      close: () => dateSelectorRef.current?.close(),\n      focus() {\n        dateInputRef.current?.inputRef?.focus();\n      },\n      validate() {\n        dateInputRef.current?.validate();\n        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      },\n    }),\n    [formFieldDispatch],\n  );\n\n  // mark the component as touched, if the touchedRef container is losing the focus\n  const onBlurTouched: FocusEventHandler = useCallback(\n    (e) => {\n      if (!touchedContainerRef.current?.contains(e.relatedTarget)) {\n        //  always validate and show error on blur if there is any\n        dateInputRef.current?.validate();\n        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n    },\n    [formFieldDispatch],\n  );\n\n  const dateTimePickerErrorId = useId();\n  const { formatString } = useDateTimeMessages({ precision });\n\n  const handleDateTimeInputError = useCallback(\n    (error: DateTimeError) => {\n      // Remove old errors.\n      formFieldDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: dateTimePickerErrorId,\n          messageType: 'formcontrol',\n        },\n      });\n\n      if (error !== null && error !== 'valueMissing') {\n        // To avoid duplicate error messages for e.g. 'valueMissing', we try to get the\n        // validity key from the native input first and fall back to 'customError'.\n        const validityKey =\n          dateInputRef.current &&\n          getErrorType(dateInputRef.current.inputRef?.validity);\n\n        if (\n          !validityKey ||\n          (validityKey === 'valueMissing' && error === 'invalid')\n        ) {\n          formFieldDispatch?.({\n            type: FormFieldMessagesAction.ADDMESSAGE,\n            payload: {\n              id: dateTimePickerErrorId,\n              validityStateKey: 'customError',\n              variant: 'error',\n              message: getDateTimePickerError(\n                intl,\n                formatString,\n                error,\n                min,\n                max,\n                precision,\n              ),\n              messageType: 'formcontrol',\n            },\n          });\n        }\n      }\n    },\n    [\n      dateTimePickerErrorId,\n      formFieldDispatch,\n      formatString,\n      intl,\n      max,\n      min,\n      precision,\n    ],\n  );\n\n  // remove the textContent when the value is set to null.\n  useEffect(() => {\n    if (\n      propValue === null &&\n      dateInputRef.current?.expressionInputRef &&\n      dateInputRef.current.expressionInputRef.textContent !== ''\n    ) {\n      dateInputRef.current.expressionInputRef.textContent = '';\n    }\n  }, [propValue]);\n\n  return (\n    <Flex\n      gap={4}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={rootRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <InputGroup\n        className={clsx(\n          dateTimePickerCSS({\n            type,\n            disabled: disabledOrAriaDisabled,\n            showError,\n            readOnly,\n          }),\n        )}\n        style={{ gridAutoColumns: '1fr auto' }}\n      >\n        <div\n          ref={touchedContainerRef}\n          className={clsx(\n            fieldColorsCSS({\n              color: showError ? 'critical' : 'neutral',\n              disabled: disabledOrAriaDisabled,\n              variant: 'emphasized',\n            }),\n            dateTimeRangeCSS({\n              showError,\n              disabled: disabledOrAriaDisabled,\n              readOnly,\n            }),\n            focusClassName,\n            inputGroupClassName,\n          )}\n          tabIndex={disabled ? undefined : 0}\n          onBlur={onBlurTouched}\n          onKeyDown={(e: ReactKeyboardEvent) => {\n            // Forward the focus when a key is pressed in this element.\n            if (e.target === touchedContainerRef.current) {\n              focusDateTimeInput(null, dateInputRef);\n            }\n          }}\n          onFocus={(e: FocusEvent) => {\n            // Forward the focus only if it is coming from outside this component.\n            // Focus the first spin button with textContent; otherwise, focus the input.\n            if (!rootRef.current?.contains(e.relatedTarget)) {\n              focusDateTimeInput(e, dateInputRef);\n            }\n          }}\n        >\n          <DateTimeInput\n            ref={dateInputRef}\n            id={id}\n            type={type}\n            precision={precision}\n            disabled={disabled}\n            readOnly={readOnly}\n            placeholder={placeholder}\n            name={name}\n            value={internalValue}\n            onChange={(value) => {\n              if (typeof value === 'string') {\n                onChange?.(value);\n                return;\n              }\n\n              // Call onChange for null only when the textContent is empty.\n              if (\n                value !== null ||\n                dateInputRef.current?.expressionInputRef?.textContent === ''\n              ) {\n                onChange?.(\n                  removePrecisionFromTimeValue(\n                    value,\n                    type === 'date' ? 'day' : precision,\n                  ),\n                );\n              }\n\n              setInternalValue(getTimeValue(value, precision, type));\n            }}\n            {...ariaLabelingProps}\n            aria-disabled={ariaDisabled}\n            min={min}\n            max={max}\n            required={required}\n            onError={handleDateTimeInputError}\n            controlId={id}\n            controlState={controlState}\n          />\n        </div>\n        {showDateSelector && (\n          <DateSelector\n            ref={dateSelectorRef}\n            value={convertDateOnlyToDateTime(internalValue?.value, type)}\n            onChange={(value) => {\n              const timeValue = getTimeValue(value, precision, type);\n              setInternalValue(timeValue);\n\n              if (timeValue?.type === 'expression') {\n                onChange?.(timeValue);\n              }\n\n              requestAnimationFrame(() => {\n                focusDateTimeInput(null, dateInputRef);\n              });\n            }}\n            aria-label={calendarTriggerLabel}\n            aria-disabled={ariaDisabled}\n            min={min}\n            max={max}\n            precision={precision}\n            readOnly={readOnly}\n            disabled={!!disabled}\n            error={showError}\n            className={clsx(dateSelectorCSS, inputGroupClassName)}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          />\n        )}\n      </InputGroup>\n      {hint && (\n        <InternalBaseItem\n          variant={hasFormControlError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </InternalBaseItem>\n      )}\n    </Flex>\n  );\n});\n\n(\n  DateTimePicker as typeof DateTimePicker & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
-  "mappings": "AA+QM,SA2CI,KA3CJ;AA/QN,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB,yBAAyB;AAEnD,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,2BAA2B;AACpC,SAAS,kBAAkB;AAC3B,SAAS,eAAe,sBAAsB;AAC9C,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAKP,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iCAAiC;AAC1C,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAC1C,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAG7B,MAAM,iBAAiB;AAQhB,MAAM,iBAAiB,WAG5B,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,IAAyB;AAGzB,kBAAgB,KAAK,KAAK,gBAAgB;AAE1C,QAAM,sBAAsB,OAAuB,IAAI;AAEvD,QAAM,EAAE,OAAO,gBAAgB,UAAU,kBAAkB,IACzD,4BAA4B;AAC9B,QAAM,EAAE,WAAW,mBAAmB,IAAI;AAG1C,QAAM,CAAC,qBAAqB,IAAI,IAAI,oBAAoB,YAAY;AAGpE,QAAM,EAAE,UAAU,IAAI,aAAa;AAAA,IACjC;AAAA,IACA,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,YAAY,uBAAuB;AAEzC,QAAM,EAAE,UAAU,UAAU,IAAI,aAAa,IAAI,0BAA0B;AAAA,IACzE;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,EACpB,CAAC;AACD,QAAM,yBAAyB,YAAY,gBAAgB;AAE3D,QAAM,qBAAqB,aAAa,WAAW,WAAW,IAAI;AAElE,QAAM,CAAC,eAAe,gBAAgB,IAAI;AAAA,IACxC,YACI,qBACA,aAAa,kBAAkB,WAAW,IAAI;AAAA,EACpD;AACA,QAAM,CAAC,eAAe,gBAAgB,IAAI;AAAA,IACxC,aAAa,WAAW,WAAW,IAAI,KAAK;AAAA,EAC9C;AAEA,MACE,cAAc,MACd,CAAC,iBAAiB,sBAAsB,MAAM,aAAa,GAC3D;AACA,qBAAiB,sBAAsB,IAAI;AAC3C,qBAAiB,kBAAkB;AAAA,EACrC;AAEA,QAAM,oBAAoB,qBAAqB,cAAc;AAE7D,QAAM,eAAe,OAAyB,IAAI;AAClD,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,kBAAkB,OAAwB,IAAI;AAGpD,QAAM,mBAAmB,SAAS;AAElC,QAAM,EAAE,eAAe,IAAI,aAAa;AAAA,IACtC,aAAa;AAAA,IACb,OAAO,YAAY,aAAa;AAAA,IAChC;AAAA,EACF,CAAC;AAED,QAAM,OAAO,QAAQ;AACrB,QAAM,uBAAuB,KAAK,cAAc;AAAA,IAC9C,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf,CAAC;AAGD;AAAA,IACE;AAAA,IACA,OAAmD;AAAA,MACjD,SAAS,QAAQ;AAAA,MACjB,UAAU,aAAa,SAAS;AAAA,MAChC,YAAY,aAAa,SAAS;AAAA,MAClC,MAAM,MAAM,gBAAgB,SAAS,KAAK;AAAA,MAC1C,OAAO,MAAM,gBAAgB,SAAS,MAAM;AAAA,MAC5C,QAAQ;AACN,qBAAa,SAAS,UAAU,MAAM;AAAA,MACxC;AAAA,MACA,WAAW;AACT,qBAAa,SAAS,SAAS;AAC/B,4BAAoB;AAAA,UAClB,MAAM,wBAAwB;AAAA,UAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,QAC7B,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAGA,QAAM,gBAAmC;AAAA,IACvC,CAAC,MAAM;AACL,UAAI,CAAC,oBAAoB,SAAS,SAAS,EAAE,aAAa,GAAG;AAE3D,qBAAa,SAAS,SAAS;AAC/B,4BAAoB;AAAA,UAClB,MAAM,wBAAwB;AAAA,UAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,QAC7B,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,wBAAwB,MAAM;AACpC,QAAM,EAAE,aAAa,IAAI,oBAAoB,EAAE,UAAU,CAAC;AAE1D,QAAM,2BAA2B;AAAA,IAC/B,CAAC,UAAyB;AAExB,0BAAoB;AAAA,QAClB,MAAM,wBAAwB;AAAA,QAC9B,SAAS;AAAA,UACP,IAAI;AAAA,UACJ,aAAa;AAAA,QACf;AAAA,MACF,CAAC;AAED,UAAI,UAAU,QAAQ,UAAU,gBAAgB;AAG9C,cAAM,cACJ,aAAa,WACb,aAAa,aAAa,QAAQ,UAAU,QAAQ;AAEtD,YACE,CAAC,eACA,gBAAgB,kBAAkB,UAAU,WAC7C;AACA,8BAAoB;AAAA,YAClB,MAAM,wBAAwB;AAAA,YAC9B,SAAS;AAAA,cACP,IAAI;AAAA,cACJ,kBAAkB;AAAA,cAClB,SAAS;AAAA,cACT,SAAS;AAAA,gBACP;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cACA,aAAa;AAAA,YACf;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAGA,YAAU,MAAM;AACd,QACE,cAAc,QACd,aAAa,SAAS,sBACtB,aAAa,QAAQ,mBAAmB,gBAAgB,IACxD;AACA,mBAAa,QAAQ,mBAAmB,cAAc;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAc;AAAA,MACd,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,KAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO;AAAA,MACP,qBAAmB;AAAA,MAEnB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,kBAAkB;AAAA,gBAChB;AAAA,gBACA,UAAU;AAAA,gBACV;AAAA,gBACA;AAAA,cACF,CAAC;AAAA,YACH;AAAA,YACA,OAAO,EAAE,iBAAiB,WAAW;AAAA,YAErC;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,WAAW;AAAA,oBACT,eAAe;AAAA,sBACb,OAAO,YAAY,aAAa;AAAA,sBAChC,UAAU;AAAA,sBACV,SAAS;AAAA,oBACX,CAAC;AAAA,oBACD,iBAAiB;AAAA,sBACf;AAAA,sBACA,UAAU;AAAA,sBACV;AAAA,oBACF,CAAC;AAAA,oBACD;AAAA,oBACA;AAAA,kBACF;AAAA,kBACA,UAAU,WAAW,SAAY;AAAA,kBACjC,QAAQ;AAAA,kBACR,WAAW,CAAC,MAA0B;AAEpC,wBAAI,EAAE,WAAW,oBAAoB,SAAS;AAC5C,yCAAmB,MAAM,YAAY;AAAA,oBACvC;AAAA,kBACF;AAAA,kBACA,SAAS,CAAC,MAAkB;AAG1B,wBAAI,CAAC,QAAQ,SAAS,SAAS,EAAE,aAAa,GAAG;AAC/C,yCAAmB,GAAG,YAAY;AAAA,oBACpC;AAAA,kBACF;AAAA,kBAEA;AAAA,oBAAC;AAAA;AAAA,sBACC,KAAK;AAAA,sBACL;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA,OAAO;AAAA,sBACP,UAAU,CAAC,UAAU;AACnB,4BAAI,OAAO,UAAU,UAAU;AAC7B,qCAAW,KAAK;AAChB;AAAA,wBACF;AAGA,4BACE,UAAU,QACV,aAAa,SAAS,oBAAoB,gBAAgB,IAC1D;AACA;AAAA,4BACE;AAAA,8BACE;AAAA,8BACA,SAAS,SAAS,QAAQ;AAAA,4BAC5B;AAAA,0BACF;AAAA,wBACF;AAEA,yCAAiB,aAAa,OAAO,WAAW,IAAI,CAAC;AAAA,sBACvD;AAAA,sBACC,GAAG;AAAA,sBACJ,iBAAe;AAAA,sBACf;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA,SAAS;AAAA,sBACT,WAAW;AAAA,sBACX;AAAA;AAAA,kBACF;AAAA;AAAA,cACF;AAAA,cACC,oBACC;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,OAAO,0BAA0B,eAAe,OAAO,IAAI;AAAA,kBAC3D,UAAU,CAAC,UAAU;AACnB,0BAAM,YAAY,aAAa,OAAO,WAAW,IAAI;AACrD,qCAAiB,SAAS;AAE1B,wBAAI,WAAW,SAAS,cAAc;AACpC,iCAAW,SAAS;AAAA,oBACtB;AAEA,0CAAsB,MAAM;AAC1B,yCAAmB,MAAM,YAAY;AAAA,oBACvC,CAAC;AAAA,kBACH;AAAA,kBACA,cAAY;AAAA,kBACZ,iBAAe;AAAA,kBACf;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,UAAU,CAAC,CAAC;AAAA,kBACZ,OAAO;AAAA,kBACP,WAAW,KAAK,iBAAiB,mBAAmB;AAAA,kBACpD,mBAAiB;AAAA,kBACjB,oBAAkB;AAAA;AAAA,cACpB;AAAA;AAAA;AAAA,QAEJ;AAAA,QACC,QACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,sBAAsB,UAAU;AAAA,YACzC,UAAU,YAAY;AAAA,YACrB,GAAG;AAAA,YAEH;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAGC,eACA,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  FocusEventHandler,\n  type FocusEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DateSelector } from './DateSelector.js';\nimport * as styles from './DateTimePicker.sty.js';\nimport type { DateSelectorRef, DateTimePickerProps } from './types.js';\nimport { focusDateTimeInput } from './utils/focusDateTimeInput.js';\nimport { getDateTimePickerError } from './utils/get-error-message.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { fieldColors as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { DateTimeInput } from '../date-time-range-picker/DateTimeInput.js';\nimport { dateTimeRangeCSS } from '../date-time-range-picker/DateTimeRangePicker.sty.js';\nimport {\n  isEqualTimeValue,\n  removePrecisionFromTimeValue,\n} from '../date-time-range-picker/helpers.js';\nimport type {\n  DateTimeError,\n  DateTimeInputRef,\n} from '../date-time-range-picker/types.js';\nimport { InternalBaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useDateTimeMessages } from '../forms-core/hooks/useDateTimeMessages.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { getErrorType } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useMinMaxLogger } from '../forms-core/hooks/useMinMaxLogger.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { convertDateOnlyToDateTime } from '../forms-core/time/helpers.js';\nimport { getTimeValue } from '../forms-core/time/timeParser.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlWithOverlayRef } from '../shared-types.js';\n\nconst COMPONENT_NAME = 'DateTimePicker';\n\n/**\n * Component to comfortably enter a date time value.\n * The `DateTimePicker` component automatically uses the user's settings for the\n * locale and timezone and formats the date and time accordingly.\n * @public\n */\nexport const DateTimePicker = forwardRef<\n  FormControlWithOverlayRef<HTMLSpanElement>,\n  DateTimePickerProps\n>((props, forwardedRef) => {\n  const {\n    id: propId,\n    disabled: propDisabled,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    readOnly = false,\n    required: propRequired,\n    'aria-disabled': ariaDisabledProp,\n    precision = 'minutes',\n    placeholder,\n    value: propValue,\n    defaultValue: propDefaultValue,\n    onChange,\n    min,\n    max,\n    name,\n    type = 'datetime',\n    controlState,\n    ...remainingProps\n  }: DateTimePickerProps = props;\n\n  // log to the sdk when min is larger than max.\n  useMinMaxLogger(min, max, 'DateTimePicker');\n\n  const touchedContainerRef = useRef<HTMLDivElement>(null);\n\n  const { state: formFieldState, dispatch: formFieldDispatch } =\n    useFormFieldMessagesContext();\n  const { showError: showFormFieldError } = formFieldState;\n\n  // Backwards compatibility for controlState.\n  const [hasFormControlError, hint] = useFormControlState(controlState);\n  // _useInputHint will be replaced with new validation concept. APPDEV-8298\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { hintProps } = useInputHint({\n    hint,\n    hasError: hasFormControlError,\n  });\n\n  const showError = hasFormControlError || showFormFieldError;\n\n  const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: ariaDisabledProp,\n  });\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const convertedPropValue = getTimeValue(propValue, precision, type);\n\n  const [internalValue, setInternalValue] = useState(\n    propValue\n      ? convertedPropValue\n      : getTimeValue(propDefaultValue, precision, type),\n  );\n  const [prevPropValue, setPrevPropValue] = useState(\n    getTimeValue(propValue, precision, type) ?? null,\n  );\n\n  if (\n    propValue !== '' &&\n    !isEqualTimeValue(convertedPropValue ?? null, prevPropValue)\n  ) {\n    setPrevPropValue(convertedPropValue ?? null);\n    setInternalValue(convertedPropValue);\n  }\n\n  const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n\n  const dateInputRef = useRef<DateTimeInputRef>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const dateSelectorRef = useRef<DateSelectorRef>(null);\n\n  // No need to show the calendar widget if only a time value can be entered.\n  const showDateSelector = type !== 'time';\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: true,\n    color: showError ? 'critical' : 'neutral',\n    disabled,\n  });\n\n  const intl = useIntl();\n  const calendarTriggerLabel = intl.formatMessage({\n    defaultMessage: 'Datepicker calendar trigger',\n    id: 'Uuc6xAAPyctyHamM',\n    description: 'Text shown for the datetimepicker calendar trigger.',\n  });\n\n  // Provide root and input element reference and functions to interact with the calendar overlay\n  useImperativeHandle(\n    forwardedRef,\n    (): FormControlWithOverlayRef<HTMLSpanElement> => ({\n      element: rootRef.current,\n      inputRef: dateInputRef.current?.inputRef,\n      triggerRef: dateInputRef.current?.inputRef,\n      open: () => dateSelectorRef.current?.open(),\n      close: () => dateSelectorRef.current?.close(),\n      focus() {\n        dateInputRef.current?.inputRef?.focus();\n      },\n      validate() {\n        dateInputRef.current?.validate();\n        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      },\n    }),\n    [formFieldDispatch],\n  );\n\n  // mark the component as touched, if the touchedRef container is losing the focus\n  const onBlurTouched: FocusEventHandler = useCallback(\n    (e) => {\n      if (!touchedContainerRef.current?.contains(e.relatedTarget)) {\n        //  always validate and show error on blur if there is any\n        dateInputRef.current?.validate();\n        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n    },\n    [formFieldDispatch],\n  );\n\n  const dateTimePickerErrorId = useId();\n  const { formatString } = useDateTimeMessages({ precision });\n\n  const handleDateTimeInputError = useCallback(\n    (error: DateTimeError) => {\n      // Remove old errors.\n      formFieldDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: dateTimePickerErrorId,\n          messageType: 'formcontrol',\n        },\n      });\n\n      if (error !== null && error !== 'valueMissing') {\n        // To avoid duplicate error messages for e.g. 'valueMissing', we try to get the\n        // validity key from the native input first and fall back to 'customError'.\n        const validityKey =\n          dateInputRef.current &&\n          getErrorType(dateInputRef.current.inputRef?.validity);\n\n        if (\n          !validityKey ||\n          (validityKey === 'valueMissing' && error === 'invalid')\n        ) {\n          formFieldDispatch?.({\n            type: FormFieldMessagesAction.ADDMESSAGE,\n            payload: {\n              id: dateTimePickerErrorId,\n              validityStateKey: 'customError',\n              variant: 'error',\n              message: getDateTimePickerError(\n                intl,\n                formatString,\n                error,\n                min,\n                max,\n                precision,\n              ),\n              messageType: 'formcontrol',\n            },\n          });\n        }\n      }\n    },\n    [\n      dateTimePickerErrorId,\n      formFieldDispatch,\n      formatString,\n      intl,\n      max,\n      min,\n      precision,\n    ],\n  );\n\n  // remove the textContent when the value is set to null.\n  useEffect(() => {\n    if (\n      propValue === null &&\n      dateInputRef.current?.expressionInputRef &&\n      dateInputRef.current.expressionInputRef.textContent !== ''\n    ) {\n      dateInputRef.current.expressionInputRef.textContent = '';\n    }\n  }, [propValue]);\n\n  return (\n    <Flex\n      gap={4}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={rootRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <InputGroup\n        className={clsx(\n          styles.dateTimePicker({\n            type,\n            disabled: disabledOrAriaDisabled,\n            showError,\n            readOnly,\n          }),\n        )}\n        style={{ gridAutoColumns: '1fr auto' }}\n      >\n        <div\n          ref={touchedContainerRef}\n          className={clsx(\n            fieldColorsCSS({\n              color: showError ? 'critical' : 'neutral',\n              disabled: disabledOrAriaDisabled,\n              variant: 'emphasized',\n            }),\n            dateTimeRangeCSS({\n              showError,\n              disabled: disabledOrAriaDisabled,\n              readOnly,\n            }),\n            focusClassName,\n            inputGroupClassName,\n          )}\n          tabIndex={disabled ? undefined : 0}\n          onBlur={onBlurTouched}\n          onKeyDown={(e: ReactKeyboardEvent) => {\n            // Forward the focus when a key is pressed in this element.\n            if (e.target === touchedContainerRef.current) {\n              focusDateTimeInput(null, dateInputRef);\n            }\n          }}\n          onFocus={(e: FocusEvent) => {\n            // Forward the focus only if it is coming from outside this component.\n            // Focus the first spin button with textContent; otherwise, focus the input.\n            if (!rootRef.current?.contains(e.relatedTarget)) {\n              focusDateTimeInput(e, dateInputRef);\n            }\n          }}\n        >\n          <DateTimeInput\n            ref={dateInputRef}\n            id={id}\n            type={type}\n            precision={precision}\n            disabled={disabled}\n            readOnly={readOnly}\n            placeholder={placeholder}\n            name={name}\n            value={internalValue}\n            onChange={(value) => {\n              if (typeof value === 'string') {\n                onChange?.(value);\n                return;\n              }\n\n              // Call onChange for null only when the textContent is empty.\n              if (\n                value !== null ||\n                dateInputRef.current?.expressionInputRef?.textContent === ''\n              ) {\n                onChange?.(\n                  removePrecisionFromTimeValue(\n                    value,\n                    type === 'date' ? 'day' : precision,\n                  ),\n                );\n              }\n\n              setInternalValue(getTimeValue(value, precision, type));\n            }}\n            {...ariaLabelingProps}\n            aria-disabled={ariaDisabled}\n            min={min}\n            max={max}\n            required={required}\n            onError={handleDateTimeInputError}\n            controlId={id}\n            controlState={controlState}\n          />\n        </div>\n        {showDateSelector && (\n          <DateSelector\n            ref={dateSelectorRef}\n            value={convertDateOnlyToDateTime(internalValue?.value, type)}\n            onChange={(value) => {\n              const timeValue = getTimeValue(value, precision, type);\n              setInternalValue(timeValue);\n\n              if (timeValue?.type === 'expression') {\n                onChange?.(timeValue);\n              }\n\n              requestAnimationFrame(() => {\n                focusDateTimeInput(null, dateInputRef);\n              });\n            }}\n            aria-label={calendarTriggerLabel}\n            aria-disabled={ariaDisabled}\n            min={min}\n            max={max}\n            precision={precision}\n            readOnly={readOnly}\n            disabled={!!disabled}\n            error={showError}\n            className={clsx(styles.dateSelector, inputGroupClassName)}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          />\n        )}\n      </InputGroup>\n      {hint && (\n        <InternalBaseItem\n          variant={hasFormControlError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </InternalBaseItem>\n      )}\n    </Flex>\n  );\n});\n\n(\n  DateTimePicker as typeof DateTimePicker & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/date-time-picker/DateTimePicker.sty.js

@@ -2,12 +2,12 @@ import "../../styles/textStyle.css";
 import "../spin-buttons/SpinButton.css";
 import "./DateTimePicker.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var dateSelectorCSS = "_1i883gjf-3-0-1";
-var dateTimePickerCSS = _7a468({ defaultClassName: "_1i883gj6-3-0-1", variantClassNames: { readOnly: { true: "_1i883gj7-3-0-1" }, showError: { true: "_1i883gj8-3-0-1" }, disabled: { true: "_1i883gj9-3-0-1" }, type: { date: "_1i883gja-3-0-1", time: "_1i883gjb-3-0-1", datetime: "_1i883gjc-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var dateTimePickerSpinButtonGroupCSS = "_1i883gje-3-0-1 _da9a8v0-3-0-1 _da9a8v2-3-0-1 _da9a8v3-3-0-1 _da9a8vb-3-0-1 _1i883gjd-3-0-1";
+var dateSelector = "_1i883gje-3-1-1";
+var dateTimePicker = _7a468({ defaultClassName: "_1i883gj6-3-1-1", variantClassNames: { readOnly: { true: "_1i883gj7-3-1-1" }, showError: { true: "_1i883gj8-3-1-1" }, disabled: { true: "_1i883gj9-3-1-1" }, type: { date: "_1i883gja-3-1-1", time: "_1i883gjb-3-1-1", datetime: "_1i883gjc-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
+var dateTimePickerSpinButtonGroup = "_1i883gjd-3-1-1 _da9a8v0-3-1-1 _da9a8v2-3-1-1 _da9a8v3-3-1-1 _da9a8vb-3-1-1";
 export {
-  dateSelectorCSS,
-  dateTimePickerCSS,
-  dateTimePickerSpinButtonGroupCSS
+  dateSelector,
+  dateTimePicker,
+  dateTimePickerSpinButtonGroup
 };
 //# sourceMappingURL=DateTimePicker.sty.js.map

package/esm/forms/date-time-picker/DateTimePicker.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-picker/DateTimePicker.css.ts"],
-  "sourcesContent": ["import '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport './DateTimePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dateSelectorCSS = '_1i883gjf-3-0-1';\nexport var dateTimePickerCSS = _7a468({defaultClassName:'_1i883gj6-3-0-1',variantClassNames:{readOnly:{true:'_1i883gj7-3-0-1'},showError:{true:'_1i883gj8-3-0-1'},disabled:{true:'_1i883gj9-3-0-1'},type:{date:'_1i883gja-3-0-1',time:'_1i883gjb-3-0-1',datetime:'_1i883gjc-3-0-1'}},defaultVariants:{},compoundVariants:[]});\nexport var dateTimePickerSpinButtonGroupCSS = '_1i883gje-3-0-1 _da9a8v0-3-0-1 _da9a8v2-3-0-1 _da9a8v3-3-0-1 _da9a8vb-3-0-1 _1i883gjd-3-0-1';"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,kBAAkB;AACtB,IAAI,oBAAoB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,WAAU,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,MAAK,EAAC,MAAK,mBAAkB,MAAK,mBAAkB,UAAS,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrT,IAAI,mCAAmC;",
+  "sourcesContent": ["import '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport './DateTimePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dateSelector = '_1i883gje-3-1-1';\nexport var dateTimePicker = _7a468({defaultClassName:'_1i883gj6-3-1-1',variantClassNames:{readOnly:{true:'_1i883gj7-3-1-1'},showError:{true:'_1i883gj8-3-1-1'},disabled:{true:'_1i883gj9-3-1-1'},type:{date:'_1i883gja-3-1-1',time:'_1i883gjb-3-1-1',datetime:'_1i883gjc-3-1-1'}},defaultVariants:{},compoundVariants:[]});\nexport var dateTimePickerSpinButtonGroup = '_1i883gjd-3-1-1 _da9a8v0-3-1-1 _da9a8v2-3-1-1 _da9a8v3-3-1-1 _da9a8vb-3-1-1';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe;AACnB,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,WAAU,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,MAAK,EAAC,MAAK,mBAAkB,MAAK,mBAAkB,UAAS,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAClT,IAAI,gCAAgC;",
   "names": []
 }

package/esm/forms/date-time-picker/hooks/useDateTimeFormat.js

@@ -118,9 +118,9 @@ function useDateTimeFormat(type = "datetime", precision = "minutes") {
             if (dayPeriod) {
               date2 = setHours(date2, intValue % 12);
               const dayPeriodValue = trimSpace(dayPeriod.value);
-              if (dayPeriodValue === trimSpace(dayPeriodValues[1])) {
+              if (dayPeriodValue === trimSpace(dayPeriodValues[1]) || dayPeriodValue === "PM") {
                 date2 = addHours(date2, 12);
-              } else if (dayPeriodValue !== trimSpace(dayPeriodValues[0])) {
+              } else if (dayPeriodValue !== trimSpace(dayPeriodValues[0]) && dayPeriodValue !== "AM") {
                 date2 = INVALID_DATE;
               }
               return date2;

package/esm/forms/date-time-picker/hooks/useDateTimeFormat.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/date-time-picker/hooks/useDateTimeFormat.ts"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport {\n  addHours,\n  getDaysInMonth,\n  setDate,\n  setHours,\n  setMilliseconds,\n  setMinutes,\n  setMonth,\n  setSeconds,\n  setYear,\n  startOfDay,\n} from 'date-fns';\nimport { useCallback, useMemo } from 'react';\nimport type { FormatDateOptions } from 'react-intl';\nimport { createIntl } from 'react-intl';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport {\n  getDayPeriodValues,\n  getSafeRegionalFormat,\n} from '../../forms-core/time/helpers.js';\nimport type { DateTimePickerProps } from '../types.js';\nimport { intlCache } from '../utils/intl-cache.js';\n\nconst INVALID_DATE = new TZDateMini('Invalid');\n\n/** Trim any spaces inside a string. */\nfunction trimSpace(str: string) {\n  return str.replace(/\\s+/g, '');\n}\n\n// TODO: Use the newly introduced _useDateTimeMessages hook and avoid duplication\n/** Provides functions to convert a date object to its parts and vice versa. */\nexport function useDateTimeFormat(\n  type: DateTimePickerProps['type'] = 'datetime',\n  precision: DateTimePickerProps['precision'] = 'minutes',\n) {\n  const regionUserSetting = getSafeRegionalFormat();\n  const timezoneUserSetting = getTimezone();\n  const dayPeriodValues = useMemo(() => getDayPeriodValues(), []);\n\n  // Create intl object based on current user settings\n  const { timeZone, formatDateToParts } = useMemo(\n    () =>\n      createIntl(\n        { locale: regionUserSetting, timeZone: timezoneUserSetting },\n        intlCache,\n      ),\n    [regionUserSetting, timezoneUserSetting],\n  );\n\n  // Formatting rules for given type and precision combination.\n  const format = useMemo(() => {\n    const options: FormatDateOptions = {};\n    switch (type) {\n      case 'date':\n        options['year'] = 'numeric';\n        options['month'] = '2-digit';\n        options['day'] = '2-digit';\n        return options; // Return config and ignore precision prop if only the date is shown.\n      case 'datetime':\n        options['year'] = 'numeric';\n        options['month'] = '2-digit';\n        options['day'] = '2-digit';\n        options['hour'] = '2-digit';\n        options['minute'] = '2-digit';\n        break;\n      case 'time':\n        options['hour'] = 'numeric';\n        options['minute'] = '2-digit';\n        break;\n    }\n\n    switch (precision) {\n      case 'seconds':\n        options['second'] = '2-digit';\n        break;\n      case 'milliseconds':\n        options['second'] = '2-digit';\n        options['fractionalSecondDigits'] = 3;\n        break;\n    }\n\n    return options;\n  }, [type, precision]);\n\n  /**\n   * Convert a date object to its parts for the configured format.\n   * Part values are always zoned and based on the configured timezone.\n   */\n  const toParts = useCallback(\n    (date: Date) => formatDateToParts(date, format),\n    [format, formatDateToParts],\n  );\n\n  /** Convert parts to a UTC date object.  */\n  const toDateTime = useCallback(\n    (parts: Intl.DateTimeFormatPart[]) => {\n      // every non literal part must be empty\n      const isEmpty = !parts.some(\n        ({ type, value }) => type !== 'literal' && value !== '',\n      );\n\n      if (isEmpty) {\n        return null;\n      }\n\n      // Calculate max nrOfDays for given year and month.\n      const year = parts.find((p) => p.type === 'year')?.value;\n      const month = parts.find((p) => p.type === 'month')?.value;\n      const day = parts.find((p) => p.type === 'day')?.value;\n      const maxNrOfDays =\n        year !== undefined && month !== undefined\n          ? getDaysInMonth(\n              new TZDateMini(\n                parseInt(year),\n                parseInt(month) - 1,\n                timeZone ?? 'UTC',\n              ),\n            )\n          : 31;\n\n      // creates an initial date at the start of the current day\n      const current = TZDateMini.tz(timeZone ?? 'UTC');\n      // take year from parts or the current year\n      const yearValue = year ? parseInt(year) : current.getFullYear();\n      // take month from parts or the current month\n      const monthValue = month ? parseInt(month) - 1 : current.getMonth();\n      // take day from parts or the current day\n      const dayValue = day ? parseInt(day) : current.getDate();\n      const initialDate = startOfDay(\n        new TZDateMini(yearValue, monthValue, dayValue, timeZone),\n      );\n\n      const dayPeriod = parts.find((part) => part.type === 'dayPeriod');\n\n      const date = parts.reduce((date: Date, part) => {\n        const intValue = parseInt(part.value);\n        switch (part.type) {\n          case 'year':\n            // In the Japanese region, the date format is YYYY.MM.DD, and setYear(date, 0) is called first.\n            // If a leading 0 is entered, the initialDate becomes '1899-12-31T23:00:00Z'.\n            // This can cause the date to underflow to '-000001-12-31', resulting in invalid dates.\n            if (intValue === 0) {\n              return INVALID_DATE;\n            }\n            return setYear(date, intValue);\n          case 'month':\n            // setMonth interprets the leading 0 as December of the previous year.\n            if (intValue === 0) {\n              return INVALID_DATE;\n            }\n            return setMonth(date, intValue - 1);\n          case 'day':\n            // setDay interprets the leading 0 as the 31st of the previous month.\n            if (intValue > maxNrOfDays || intValue === 0) {\n              return INVALID_DATE;\n            }\n            return setDate(date, intValue);\n          case 'hour':\n            if (dayPeriod) {\n              // We handle the day period together with the hours as the day period can be defined\n              // before or after the hours in different languages. To ensure a proper handling of\n              // the hours together with day periods we do this together.\n              date = setHours(date, intValue % 12); // Treat 12 as 0 in 12h notation.\n              //Some locales do have a space in the day period, e.g. 'a. m.' or 'p. m.'. To compare them we trim the spaces.\n              const dayPeriodValue = trimSpace(dayPeriod.value);\n\n              if (dayPeriodValue === trimSpace(dayPeriodValues[1])) {\n                date = addHours(date, 12); // If the day period is in the afternoon add 12 hours.\n              } else if (dayPeriodValue !== trimSpace(dayPeriodValues[0])) {\n                date = INVALID_DATE; // If the day period doesn't match AM or PM (in any locale), we treat it as invalid date.\n              }\n              return date;\n            }\n\n            return setHours(date, intValue);\n          case 'minute':\n            return setMinutes(date, intValue);\n          case 'second':\n            return setSeconds(date, intValue);\n          case 'fractionalSecond':\n            return setMilliseconds(date, intValue);\n          default:\n            // Ignore time literals and other part types.\n            return date;\n        }\n        // Already set the month and year of the new date to the month selected to avoid issues when setting the day.\n        // If in the current locale, the date format is e.g. <day><month><year>, setting the day may shift to the next\n        // month if the current month has less days.\n        // e.g.\n        //    current month = April\n        //    selected day = 31\n        //    setDate(31) would shift to May 1, since April only has 30 days\n        // FIXME\n        // In the 'should not close the overlay when the input is blurred' unit test, for some reason in the 'to' input,\n        // the month spin button 'onChange' is triggered when typing '1', even though spin buttons should not even be\n        // rendered. The year fallback is to avoid errors generating the new date in this case ('-01-01' is not supported).\n        // Doesn't happen in the browser, but may be some state updates somewhere that could cause issues at some point.\n      }, initialDate);\n\n      return date;\n    },\n    [timeZone, dayPeriodValues],\n  );\n\n  // provide empty parts for null value in current datetime format\n  const emptyParts = useMemo(\n    () =>\n      toParts(TZDateMini.tz(timeZone ?? 'UTC')).map(({ type, value }) => {\n        return { type, value: type === 'literal' ? value : '' };\n      }),\n    [toParts, timeZone],\n  );\n\n  return { format, toParts, toDateTime, emptyParts };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport {\n  addHours,\n  getDaysInMonth,\n  setDate,\n  setHours,\n  setMilliseconds,\n  setMinutes,\n  setMonth,\n  setSeconds,\n  setYear,\n  startOfDay,\n} from 'date-fns';\nimport { useCallback, useMemo } from 'react';\nimport type { FormatDateOptions } from 'react-intl';\nimport { createIntl } from 'react-intl';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport {\n  getDayPeriodValues,\n  getSafeRegionalFormat,\n} from '../../forms-core/time/helpers.js';\nimport type { DateTimePickerProps } from '../types.js';\nimport { intlCache } from '../utils/intl-cache.js';\n\nconst INVALID_DATE = new TZDateMini('Invalid');\n\n/** Trim any spaces inside a string. */\nfunction trimSpace(str: string) {\n  return str.replace(/\\s+/g, '');\n}\n\n// TODO: Use the newly introduced _useDateTimeMessages hook and avoid duplication\n/** Provides functions to convert a date object to its parts and vice versa. */\nexport function useDateTimeFormat(\n  type: DateTimePickerProps['type'] = 'datetime',\n  precision: DateTimePickerProps['precision'] = 'minutes',\n) {\n  const regionUserSetting = getSafeRegionalFormat();\n  const timezoneUserSetting = getTimezone();\n  const dayPeriodValues = useMemo(() => getDayPeriodValues(), []);\n\n  // Create intl object based on current user settings\n  const { timeZone, formatDateToParts } = useMemo(\n    () =>\n      createIntl(\n        { locale: regionUserSetting, timeZone: timezoneUserSetting },\n        intlCache,\n      ),\n    [regionUserSetting, timezoneUserSetting],\n  );\n\n  // Formatting rules for given type and precision combination.\n  const format = useMemo(() => {\n    const options: FormatDateOptions = {};\n    switch (type) {\n      case 'date':\n        options['year'] = 'numeric';\n        options['month'] = '2-digit';\n        options['day'] = '2-digit';\n        return options; // Return config and ignore precision prop if only the date is shown.\n      case 'datetime':\n        options['year'] = 'numeric';\n        options['month'] = '2-digit';\n        options['day'] = '2-digit';\n        options['hour'] = '2-digit';\n        options['minute'] = '2-digit';\n        break;\n      case 'time':\n        options['hour'] = 'numeric';\n        options['minute'] = '2-digit';\n        break;\n    }\n\n    switch (precision) {\n      case 'seconds':\n        options['second'] = '2-digit';\n        break;\n      case 'milliseconds':\n        options['second'] = '2-digit';\n        options['fractionalSecondDigits'] = 3;\n        break;\n    }\n\n    return options;\n  }, [type, precision]);\n\n  /**\n   * Convert a date object to its parts for the configured format.\n   * Part values are always zoned and based on the configured timezone.\n   */\n  const toParts = useCallback(\n    (date: Date) => formatDateToParts(date, format),\n    [format, formatDateToParts],\n  );\n\n  /** Convert parts to a UTC date object.  */\n  const toDateTime = useCallback(\n    (parts: Intl.DateTimeFormatPart[]) => {\n      // every non literal part must be empty\n      const isEmpty = !parts.some(\n        ({ type, value }) => type !== 'literal' && value !== '',\n      );\n\n      if (isEmpty) {\n        return null;\n      }\n\n      // Calculate max nrOfDays for given year and month.\n      const year = parts.find((p) => p.type === 'year')?.value;\n      const month = parts.find((p) => p.type === 'month')?.value;\n      const day = parts.find((p) => p.type === 'day')?.value;\n      const maxNrOfDays =\n        year !== undefined && month !== undefined\n          ? getDaysInMonth(\n              new TZDateMini(\n                parseInt(year),\n                parseInt(month) - 1,\n                timeZone ?? 'UTC',\n              ),\n            )\n          : 31;\n\n      // creates an initial date at the start of the current day\n      const current = TZDateMini.tz(timeZone ?? 'UTC');\n      // take year from parts or the current year\n      const yearValue = year ? parseInt(year) : current.getFullYear();\n      // take month from parts or the current month\n      const monthValue = month ? parseInt(month) - 1 : current.getMonth();\n      // take day from parts or the current day\n      const dayValue = day ? parseInt(day) : current.getDate();\n      const initialDate = startOfDay(\n        new TZDateMini(yearValue, monthValue, dayValue, timeZone),\n      );\n\n      const dayPeriod = parts.find((part) => part.type === 'dayPeriod');\n\n      const date = parts.reduce((date: Date, part) => {\n        const intValue = parseInt(part.value);\n        switch (part.type) {\n          case 'year':\n            // In the Japanese region, the date format is YYYY.MM.DD, and setYear(date, 0) is called first.\n            // If a leading 0 is entered, the initialDate becomes '1899-12-31T23:00:00Z'.\n            // This can cause the date to underflow to '-000001-12-31', resulting in invalid dates.\n            if (intValue === 0) {\n              return INVALID_DATE;\n            }\n            return setYear(date, intValue);\n          case 'month':\n            // setMonth interprets the leading 0 as December of the previous year.\n            if (intValue === 0) {\n              return INVALID_DATE;\n            }\n            return setMonth(date, intValue - 1);\n          case 'day':\n            // setDay interprets the leading 0 as the 31st of the previous month.\n            if (intValue > maxNrOfDays || intValue === 0) {\n              return INVALID_DATE;\n            }\n            return setDate(date, intValue);\n          case 'hour':\n            if (dayPeriod) {\n              // We handle the day period together with the hours as the day period can be defined\n              // before or after the hours in different languages. To ensure a proper handling of\n              // the hours together with day periods we do this together.\n              date = setHours(date, intValue % 12); // Treat 12 as 0 in 12h notation.\n              //Some locales do have a space in the day period, e.g. 'a. m.' or 'p. m.'. To compare them we trim the spaces.\n              const dayPeriodValue = trimSpace(dayPeriod.value);\n\n              if (\n                dayPeriodValue === trimSpace(dayPeriodValues[1]) ||\n                dayPeriodValue === 'PM'\n              ) {\n                date = addHours(date, 12); // If the day period is in the afternoon add 12 hours.\n              } else if (\n                dayPeriodValue !== trimSpace(dayPeriodValues[0]) &&\n                dayPeriodValue !== 'AM'\n              ) {\n                date = INVALID_DATE; // If the day period doesn't match AM or PM (in any locale), we treat it as invalid date.\n              }\n              return date;\n            }\n\n            return setHours(date, intValue);\n          case 'minute':\n            return setMinutes(date, intValue);\n          case 'second':\n            return setSeconds(date, intValue);\n          case 'fractionalSecond':\n            return setMilliseconds(date, intValue);\n          default:\n            // Ignore time literals and other part types.\n            return date;\n        }\n        // Already set the month and year of the new date to the month selected to avoid issues when setting the day.\n        // If in the current locale, the date format is e.g. <day><month><year>, setting the day may shift to the next\n        // month if the current month has less days.\n        // e.g.\n        //    current month = April\n        //    selected day = 31\n        //    setDate(31) would shift to May 1, since April only has 30 days\n        // FIXME\n        // In the 'should not close the overlay when the input is blurred' unit test, for some reason in the 'to' input,\n        // the month spin button 'onChange' is triggered when typing '1', even though spin buttons should not even be\n        // rendered. The year fallback is to avoid errors generating the new date in this case ('-01-01' is not supported).\n        // Doesn't happen in the browser, but may be some state updates somewhere that could cause issues at some point.\n      }, initialDate);\n\n      return date;\n    },\n    [timeZone, dayPeriodValues],\n  );\n\n  // provide empty parts for null value in current datetime format\n  const emptyParts = useMemo(\n    () =>\n      toParts(TZDateMini.tz(timeZone ?? 'UTC')).map(({ type, value }) => {\n        return { type, value: type === 'literal' ? value : '' };\n      }),\n    [toParts, timeZone],\n  );\n\n  return { format, toParts, toDateTime, emptyParts };\n}\n"],
+  "mappings": "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",
   "names": ["type", "date"]
 }

package/esm/forms/date-time-range-picker/DateRangeSelector.css

@@ -1,8 +1,8 @@
-._1uftu980-3-0-1 {
+._1uftu980-3-1-1 {
   cursor: not-allowed;
   background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1uftu981-3-0-1 {
+._1uftu981-3-1-1 {
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   transition-property: color, background-color, transform;

package/esm/forms/date-time-range-picker/DateRangeSelector.sty.js

@@ -1,6 +1,6 @@
 import "./DateRangeSelector.css";
-var readOnly = "_1uftu980-3-0-1";
-var selector = "_1uftu981-3-0-1";
+var readOnly = "_1uftu980-3-1-1";
+var selector = "_1uftu981-3-1-1";
 export {
   readOnly,
   selector

package/esm/forms/date-time-range-picker/DateRangeSelector.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateRangeSelector.css.ts"],
-  "sourcesContent": ["import './DateRangeSelector.css';\nexport var readOnly = '_1uftu980-3-0-1';\nexport var selector = '_1uftu981-3-0-1';"],
+  "sourcesContent": ["import './DateRangeSelector.css';\nexport var readOnly = '_1uftu980-3-1-1';\nexport var selector = '_1uftu981-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,WAAW;",
   "names": []
 }

package/esm/forms/date-time-range-picker/DateTimeInput.css

@@ -1,21 +1,21 @@
-._5u9o250-3-0-1 {
+._5u9o250-3-1-1 {
   outline: none;
 }
-._5u9o250-3-0-1:not(:focus-visible) {
+._5u9o250-3-1-1:not(:focus-visible) {
   caret-color: transparent;
 }
-._5u9o250-3-0-1:empty::before {
+._5u9o250-3-1-1:empty::before {
   content: var(--data-placeholder);
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1vlwkc21-3-0-1 ._5u9o250-3-0-1:empty::before {
+._1vlwkc21-3-1-1 ._5u9o250-3-1-1:empty::before {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1vlwkc22-3-0-1 ._5u9o250-3-0-1:empty::before {
+._1vlwkc22-3-1-1 ._5u9o250-3-1-1:empty::before {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1vlwkc22-3-0-1._1vlwkc21-3-0-1 ._5u9o250-3-0-1:empty::before {
+._1vlwkc22-3-1-1._1vlwkc21-3-1-1 ._5u9o250-3-1-1:empty::before {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }

package/esm/forms/date-time-range-picker/DateTimeInput.js

@@ -16,7 +16,7 @@ import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useFormControlState } from "../../core/hooks/useFormControlState.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
 import { Flex } from "../../layouts/flex/Flex.js";
-import { dateTimePickerSpinButtonGroupCSS } from "../date-time-picker/DateTimePicker.sty.js";
+import { dateTimePickerSpinButtonGroup } from "../date-time-picker/DateTimePicker.sty.js";
 import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
 import { useFormFieldValidation } from "../forms-core/hooks/useFormFieldValidation.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
@@ -214,7 +214,7 @@ const DateTimeInput = forwardRef(
           /* @__PURE__ */ jsx(
             SpinButtonGroup,
             {
-              className: clsx(dateTimePickerSpinButtonGroupCSS, {
+              className: clsx(dateTimePickerSpinButtonGroup, {
                 [styles.visuallyHidden]: isExpressionInput
               }),
               valueOverflow: true,

package/esm/forms/date-time-range-picker/DateTimeInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeInput.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  DragEvent,\n  ClipboardEvent,\n  type CSSProperties,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\n\nimport { expressionCSS } from './DateTimeInput.sty.js';\nimport { useDateTimeInput } from './hooks/useDateTimeInput.js';\nimport type { DateTimeInputProps, DateTimeInputRef } from './types.js';\nimport * as styles from '../../core/components/visually-hidden/VisuallyHidden.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { dateTimePickerSpinButtonGroupCSS } from '../date-time-picker/DateTimePicker.sty.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport { SpinButtonGroup } from '../spin-buttons/spin-button-group/SpinButtonGroup.js';\n\nfunction preventDefault(e: DragEvent | ClipboardEvent) {\n  e.preventDefault();\n}\n\n/** DateTimeRangePicker component\n * @internal\n */\nexport const DateTimeInput = forwardRef<DateTimeInputRef, DateTimeInputProps>(\n  (props, forwardedRef) => {\n    const rootRef = useRef<HTMLSpanElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const expressionInputRef = useRef<HTMLSpanElement>(null);\n    const intl = useIntl();\n    const {\n      ariaProps: ariaFormProps,\n      onChange: validationOnChange,\n      onBlur,\n      onInvalid,\n    } = useFormFieldValidation(inputRef);\n\n    const {\n      disabled,\n      readOnly,\n      placeholder: propPlaceholder,\n      className: consumerClassName,\n      style: consumerStyle,\n      name,\n      'data-testid': dataTestId,\n      'aria-disabled': ariaDisabledProp,\n      controlId,\n      required,\n      type = 'datetime',\n      controlState,\n    }: DateTimeInputProps = props;\n\n    const dateTimePlaceholder = intl.formatMessage({\n      defaultMessage: 'Date time',\n      id: '3BkbHvGCQ51HRbQ0',\n      description: 'Placeholder for the date time input',\n    });\n    const datePlaceholder = intl.formatMessage({\n      defaultMessage: 'Date',\n      id: 'iOw//K55EJMc00O4',\n      description: 'Placeholder for the date input',\n    });\n    const timePlaceholder = intl.formatMessage({\n      defaultMessage: 'Time',\n      id: 'QCPgO1L4QJB9hMGs',\n      description: 'Placeholder for the time input',\n    });\n\n    let placeholder = propPlaceholder;\n    if (!propPlaceholder) {\n      switch (type) {\n        case 'datetime':\n          placeholder = dateTimePlaceholder;\n          break;\n        case 'date':\n          placeholder = datePlaceholder;\n          break;\n        case 'time':\n          placeholder = timePlaceholder;\n          break;\n      }\n    }\n\n    // Backwards compatibility for controlState.\n    const [hasFormControlError, hint] = useFormControlState(controlState);\n    // _useInputHint will be replaced with new validation concept. APPDEV-8298\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const { inputProps } = useInputHint({\n      hint,\n      hasError: hasFormControlError,\n    });\n\n    const ariaLabelingProps = useAriaLabelingProps(props);\n\n    const {\n      expressionInputHandler,\n      expressionOnFocusHandler,\n      expressionOnBlurHandler,\n      expressionOnKeyDownHandler,\n      onCopyCapture,\n      onPaste,\n      value,\n      valueType,\n      spinButtons,\n      spinButtonHandlers,\n      inputValue,\n      focus,\n      validateTimeValue,\n    } = useDateTimeInput(props, expressionInputRef);\n\n    const isExpressionInput = valueType === 'expression';\n\n    const [isEditable, setIsEditable] = useState(true);\n\n    const { dispatch: formMessageDispatch } = useFormFieldMessagesContext();\n\n    useImperativeHandle(\n      forwardedRef,\n      (): DateTimeInputRef => ({\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        expressionInputRef: expressionInputRef.current,\n        spinButtonHandlers,\n        focus,\n        validate() {\n          validateTimeValue(\n            value,\n            expressionInputRef.current?.textContent ?? undefined,\n          );\n          formMessageDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n        },\n      }),\n      [\n        focus,\n        formMessageDispatch,\n        spinButtonHandlers,\n        validateTimeValue,\n        value,\n      ],\n    );\n\n    const expressionLabel = intl.formatMessage(\n      {\n        defaultMessage: '{ariaLabelPrefix} expression',\n        id: 'M6eNgatb2wf4fQ3I',\n        description: 'Textbox to enter a dql timeframe expression.',\n      },\n      {\n        ariaLabelPrefix: ariaLabelingProps['aria-label'],\n      },\n    );\n\n    useEffect(() => {\n      validationOnChange(); // needs to be in an effect here because the value update should happen before the validation, which validates the input ref value\n      // validationOnChange doesn't change and can be excluded\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [inputValue]);\n\n    return (\n      <Flex\n        ref={rootRef}\n        as=\"span\"\n        className={consumerClassName}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        onCopyCapture={onCopyCapture}\n        onPaste={onPaste}\n        gap={0}\n      >\n        <VisuallyHidden>\n          <input\n            id={controlId}\n            ref={inputRef}\n            name={name}\n            value={inputValue}\n            onChange={() => {\n              /** noop */\n            }}\n            onFocus={focus}\n            onBlur={onBlur}\n            onInvalid={onInvalid}\n            disabled={disabled}\n            tabIndex={-1}\n            required={required}\n            readOnly={readOnly}\n            aria-disabled={ariaDisabledProp}\n            {..._mergeProps(\n              // Backwards compatibility for controlState.\n              controlState ? inputProps : ariaFormProps,\n              ariaLabelingProps,\n            )}\n          />\n        </VisuallyHidden>\n        <span\n          className={clsx(expressionCSS, {\n            [styles.visuallyHidden]: !isExpressionInput,\n          })}\n          role=\"textbox\"\n          spellCheck={false}\n          tabIndex={disabled || !isExpressionInput ? -1 : 0}\n          style={\n            {\n              '--data-placeholder': `\"${placeholder}\"`,\n            } as CSSProperties\n          }\n          ref={expressionInputRef}\n          contentEditable={\n            !disabled &&\n            !readOnly &&\n            // contentEditable when focused and non-editable when blurred, allowing text selection.\n            (isEditable ||\n              value === null ||\n              value === undefined ||\n              value?.value === '')\n          }\n          onInput={expressionInputHandler}\n          onFocus={(e) => {\n            setIsEditable(true);\n            expressionOnFocusHandler(e);\n          }}\n          onBlur={(e) => {\n            expressionOnBlurHandler(e);\n            setIsEditable(false);\n          }}\n          onKeyDown={expressionOnKeyDownHandler}\n          onPaste={preventDefault}\n          onDragOver={preventDefault}\n          onDrop={preventDefault}\n          aria-label={expressionLabel}\n        />\n        <SpinButtonGroup\n          className={clsx(dateTimePickerSpinButtonGroupCSS, {\n            [styles.visuallyHidden]: isExpressionInput,\n          })}\n          valueOverflow\n        >\n          {spinButtons}\n        </SpinButtonGroup>\n      </Flex>\n    );\n  },\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  DragEvent,\n  ClipboardEvent,\n  type CSSProperties,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { expressionCSS } from './DateTimeInput.sty.js';\nimport { useDateTimeInput } from './hooks/useDateTimeInput.js';\nimport type { DateTimeInputProps, DateTimeInputRef } from './types.js';\nimport * as styles from '../../core/components/visually-hidden/VisuallyHidden.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { dateTimePickerSpinButtonGroup } from '../date-time-picker/DateTimePicker.sty.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport { SpinButtonGroup } from '../spin-buttons/spin-button-group/SpinButtonGroup.js';\n\nfunction preventDefault(e: DragEvent | ClipboardEvent) {\n  e.preventDefault();\n}\n\n/** DateTimeRangePicker component\n * @internal\n */\nexport const DateTimeInput = forwardRef<DateTimeInputRef, DateTimeInputProps>(\n  (props, forwardedRef) => {\n    const rootRef = useRef<HTMLSpanElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const expressionInputRef = useRef<HTMLSpanElement>(null);\n    const intl = useIntl();\n    const {\n      ariaProps: ariaFormProps,\n      onChange: validationOnChange,\n      onBlur,\n      onInvalid,\n    } = useFormFieldValidation(inputRef);\n\n    const {\n      disabled,\n      readOnly,\n      placeholder: propPlaceholder,\n      className: consumerClassName,\n      style: consumerStyle,\n      name,\n      'data-testid': dataTestId,\n      'aria-disabled': ariaDisabledProp,\n      controlId,\n      required,\n      type = 'datetime',\n      controlState,\n    }: DateTimeInputProps = props;\n\n    const dateTimePlaceholder = intl.formatMessage({\n      defaultMessage: 'Date time',\n      id: '3BkbHvGCQ51HRbQ0',\n      description: 'Placeholder for the date time input',\n    });\n    const datePlaceholder = intl.formatMessage({\n      defaultMessage: 'Date',\n      id: 'iOw//K55EJMc00O4',\n      description: 'Placeholder for the date input',\n    });\n    const timePlaceholder = intl.formatMessage({\n      defaultMessage: 'Time',\n      id: 'QCPgO1L4QJB9hMGs',\n      description: 'Placeholder for the time input',\n    });\n\n    let placeholder = propPlaceholder;\n    if (!propPlaceholder) {\n      switch (type) {\n        case 'datetime':\n          placeholder = dateTimePlaceholder;\n          break;\n        case 'date':\n          placeholder = datePlaceholder;\n          break;\n        case 'time':\n          placeholder = timePlaceholder;\n          break;\n      }\n    }\n\n    // Backwards compatibility for controlState.\n    const [hasFormControlError, hint] = useFormControlState(controlState);\n    // _useInputHint will be replaced with new validation concept. APPDEV-8298\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const { inputProps } = useInputHint({\n      hint,\n      hasError: hasFormControlError,\n    });\n\n    const ariaLabelingProps = useAriaLabelingProps(props);\n\n    const {\n      expressionInputHandler,\n      expressionOnFocusHandler,\n      expressionOnBlurHandler,\n      expressionOnKeyDownHandler,\n      onCopyCapture,\n      onPaste,\n      value,\n      valueType,\n      spinButtons,\n      spinButtonHandlers,\n      inputValue,\n      focus,\n      validateTimeValue,\n    } = useDateTimeInput(props, expressionInputRef);\n\n    const isExpressionInput = valueType === 'expression';\n\n    const [isEditable, setIsEditable] = useState(true);\n\n    const { dispatch: formMessageDispatch } = useFormFieldMessagesContext();\n\n    useImperativeHandle(\n      forwardedRef,\n      (): DateTimeInputRef => ({\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        expressionInputRef: expressionInputRef.current,\n        spinButtonHandlers,\n        focus,\n        validate() {\n          validateTimeValue(\n            value,\n            expressionInputRef.current?.textContent ?? undefined,\n          );\n          formMessageDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n        },\n      }),\n      [\n        focus,\n        formMessageDispatch,\n        spinButtonHandlers,\n        validateTimeValue,\n        value,\n      ],\n    );\n\n    const expressionLabel = intl.formatMessage(\n      {\n        defaultMessage: '{ariaLabelPrefix} expression',\n        id: 'M6eNgatb2wf4fQ3I',\n        description: 'Textbox to enter a dql timeframe expression.',\n      },\n      {\n        ariaLabelPrefix: ariaLabelingProps['aria-label'],\n      },\n    );\n\n    useEffect(() => {\n      validationOnChange(); // needs to be in an effect here because the value update should happen before the validation, which validates the input ref value\n      // validationOnChange doesn't change and can be excluded\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [inputValue]);\n\n    return (\n      <Flex\n        ref={rootRef}\n        as=\"span\"\n        className={consumerClassName}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        onCopyCapture={onCopyCapture}\n        onPaste={onPaste}\n        gap={0}\n      >\n        <VisuallyHidden>\n          <input\n            id={controlId}\n            ref={inputRef}\n            name={name}\n            value={inputValue}\n            onChange={() => {\n              /** noop */\n            }}\n            onFocus={focus}\n            onBlur={onBlur}\n            onInvalid={onInvalid}\n            disabled={disabled}\n            tabIndex={-1}\n            required={required}\n            readOnly={readOnly}\n            aria-disabled={ariaDisabledProp}\n            {..._mergeProps(\n              // Backwards compatibility for controlState.\n              controlState ? inputProps : ariaFormProps,\n              ariaLabelingProps,\n            )}\n          />\n        </VisuallyHidden>\n        <span\n          className={clsx(expressionCSS, {\n            [styles.visuallyHidden]: !isExpressionInput,\n          })}\n          role=\"textbox\"\n          spellCheck={false}\n          tabIndex={disabled || !isExpressionInput ? -1 : 0}\n          style={\n            {\n              '--data-placeholder': `\"${placeholder}\"`,\n            } as CSSProperties\n          }\n          ref={expressionInputRef}\n          contentEditable={\n            !disabled &&\n            !readOnly &&\n            // contentEditable when focused and non-editable when blurred, allowing text selection.\n            (isEditable ||\n              value === null ||\n              value === undefined ||\n              value?.value === '')\n          }\n          onInput={expressionInputHandler}\n          onFocus={(e) => {\n            setIsEditable(true);\n            expressionOnFocusHandler(e);\n          }}\n          onBlur={(e) => {\n            expressionOnBlurHandler(e);\n            setIsEditable(false);\n          }}\n          onKeyDown={expressionOnKeyDownHandler}\n          onPaste={preventDefault}\n          onDragOver={preventDefault}\n          onDrop={preventDefault}\n          aria-label={expressionLabel}\n        />\n        <SpinButtonGroup\n          className={clsx(dateTimePickerSpinButtonGroup, {\n            [styles.visuallyHidden]: isExpressionInput,\n          })}\n          valueOverflow\n        >\n          {spinButtons}\n        </SpinButtonGroup>\n      </Flex>\n    );\n  },\n);\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/date-time-range-picker/DateTimeInput.sty.js

@@ -1,7 +1,7 @@
 import "../../styles/field.css";
 import "./DateTimeRangePicker.css";
 import "./DateTimeInput.css";
-var expressionCSS = "_5u9o250-3-0-1";
+var expressionCSS = "_5u9o250-3-1-1";
 export {
   expressionCSS
 };

package/esm/forms/date-time-range-picker/DateTimeInput.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeInput.css.ts"],
-  "sourcesContent": ["import '../../styles/field.css';\nimport './DateTimeRangePicker.css';\nimport './DateTimeInput.css';\nexport var expressionCSS = '_5u9o250-3-0-1';"],
+  "sourcesContent": ["import '../../styles/field.css';\nimport './DateTimeRangePicker.css';\nimport './DateTimeInput.css';\nexport var expressionCSS = '_5u9o250-3-1-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }

package/esm/forms/date-time-range-picker/DateTimeRangePicker.css

@@ -1,4 +1,4 @@
-._1vlwkc20-3-0-1 {
+._1vlwkc20-3-1-1 {
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   transition-property: color, background-color, transform;
@@ -7,16 +7,16 @@
   border-radius: var(--dt-borders-radius-field-default, 6px);
   white-space: nowrap;
   overflow: hidden;
-  color: var(--_bx32h0-3-0-1);
-  background: var(--_bx32h3-3-0-1);
+  color: var(--_bx32h0-3-1-1);
+  background: var(--_bx32h3-3-1-1);
   flex: 1 1 auto;
 }
-._1vlwkc20-3-0-1._1vlwkc20-3-0-1 {
+._1vlwkc20-3-1-1._1vlwkc20-3-1-1 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc22-3-0-1 {
+._1vlwkc22-3-1-1 {
   cursor: not-allowed;
 }
-._1vlwkc23-3-0-1 {
+._1vlwkc23-3-1-1 {
   cursor: not-allowed;
 }

package/esm/forms/date-time-range-picker/DateTimeRangePicker.js

@@ -22,7 +22,7 @@ import { inputGroupClassName } from "../../layouts/input-group/InputGroup.sty.js
 import { InputGroup } from "../../layouts/input-group/InputGroup.js";
 import { fieldColors as fieldColorsCSS } from "../../styles/field.sty.js";
 import { textStyle as textStyleCSS } from "../../styles/textStyle.sty.js";
-import { dateTimePickerCSS } from "../date-time-picker/DateTimePicker.sty.js";
+import { dateTimePicker } from "../date-time-picker/DateTimePicker.sty.js";
 import { focusDateTimeInput } from "../date-time-picker/utils/focusDateTimeInput.js";
 import { FormFieldMessageContext } from "../forms-core/contexts/FormFieldMessageContext.js";
 import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
@@ -106,6 +106,7 @@ const DateTimeRangePickerBody = forwardRef((props, forwardedRef) => {
       open: () => dateRangeSelectorRef.current?.open(),
       close: () => dateRangeSelectorRef.current?.close(),
       focus: () => dateTimeFromRef.current?.focus?.(),
+      getCurrentValue: () => ({ from: value.from, to: value.to }),
       validate() {
         validate(value.from, value.to, true);
         formMessageDispatch?.({
@@ -164,7 +165,7 @@ const DateTimeRangePickerBody = forwardRef((props, forwardedRef) => {
             ref: touchedContainerRef,
             className: clsx(
               inputGroupClassName,
-              dateTimePickerCSS({
+              dateTimePicker({
                 readOnly,
                 showError,
                 disabled,