@dynatrace/strato-components 3.3.3 → 3.4.1

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 {\n  type Dispatch,\n  type RefObject,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { DateTimePickerRoot } from './DateTimePickerRoot.js';\nimport type { DateTimePickerProps } from './types.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { getDateTimePickerActions } from '../../core/time/timeframeStore/actions/dateTimePicker.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport type {\n  DateTimePickerValueStates,\n  DateTimePickerValueStoreActions,\n} from '../../core/time/timeframeStore/dateTimePicker.types.js';\nimport { DateTimePickerStoreProvider } from '../../core/time/timeframeStore/timeframeStoreProvider.js';\nimport { useDateTimeMessages } from '../../core/time/useDateTimeMessages.js';\nimport { useMinMax, useMinMaxStoreSync } from '../../core/time/useMinMax.js';\nimport { validate } from '../../core/time/validation.js';\nimport type { TimeValue } from '../../core/types/time.js';\nimport type { FormFieldMessagesReducerAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { toCalendarValue } from '../../forms/forms-core/time/helpers.js';\nimport {\n  removePrecisionFromTimeValue,\n  getTimeValue,\n} from '../../forms/forms-core/time/timeParser.js';\nimport { getTimeOffsetFromInitialValue } from '../calendar/utils/helpers.js';\nimport type { DateTimeInputRef } from '../date-time-range-picker/types.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../forms-core/time/date-time.js';\nimport type {\n  FormControlRef,\n  FormControlWithOverlayRef,\n  TimeRangePickerRef,\n} from '../shared-types.js';\n\ntype DateTimePickerStore = StoreApi<\n  DateTimePickerValueStates & DateTimePickerValueStoreActions\n>;\n\n/**\n * Extracts the prop-to-store syncing effects into a dedicated hook so the\n * component body stays focused on wiring rather than implementation details.\n *\n * According to the zustand maintainer, the recommended way to keep a zustand\n * store in sync with React props is via useEffect.\n * see https://github.com/pmndrs/zustand/discussions/1390#discussion-4505803\n */\nfunction useSyncPropsAndState(\n  store: DateTimePickerStore,\n  memoedValue: TimeValue | null | undefined,\n  isControlled: boolean,\n  precision: Precision,\n  formatString: string | undefined,\n  required: boolean | undefined,\n  formFieldMessagesDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  dateTimePickerRef: RefObject<FormControlWithOverlayRef<HTMLSpanElement>>,\n) {\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(() => {\n    isControlled &&\n      store.setState((state) => {\n        // In case of an invalid interim state the onChange can emit a string that\n        // is not a valid time value yet. Don't overwrite internal state in that case,\n        // so users can continue editing.\n        if (memoedValue?.absoluteDate === '') {\n          return state;\n        }\n\n        const error = validate(memoedValue ?? null, state.min, state.max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          formerError: state.calendarError,\n          precision: state.precision,\n          showError: false,\n          checkOrder: true,\n          ref: dateTimePickerRef,\n          expectedFormat: state.formatString,\n          valueMode: 'single',\n        });\n\n        const value = removePrecisionFromTimeValue(\n          memoedValue ?? null,\n          state.precision,\n        );\n        const timeOffset = getTimeOffsetFromInitialValue(\n          value,\n          'single',\n          state.min,\n          state.max,\n          state.precision,\n        );\n\n        return {\n          ...state,\n          dateTimePickerValue: value,\n          calendarValue: toCalendarValue(value, state.precision),\n          calendarError: error,\n          dateTimePickerError: error,\n          timeOffset,\n        };\n      });\n  }, [\n    formFieldMessagesDispatch,\n    isControlled,\n    memoedValue,\n    store,\n    dateTimePickerRef,\n  ]);\n\n  // Sync precision, formatString, and required into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const value = removePrecisionFromTimeValue(\n        state.dateTimePickerValue,\n        precision,\n      );\n\n      const error = validate(value, state.min, state.max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        formerError: state.dateTimePickerError,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: dateTimePickerRef,\n        expectedFormat: formatString,\n        valueMode: 'single',\n        required,\n      });\n\n      return {\n        ...state,\n        formatString,\n        precision,\n        dateTimePickerValue: value,\n        calendarValue: toCalendarValue(value, precision),\n        required,\n        calendarError: error,\n        dateTimePickerError: error,\n      };\n    });\n  }, [\n    formatString,\n    precision,\n    store,\n    required,\n    formFieldMessagesDispatch,\n    dateTimePickerRef,\n  ]);\n}\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>(\n  (\n    {\n      value: propValue,\n      defaultValue: propDefaultValue,\n      onChange,\n      min: propMin = GRAIL_MIN_DATE,\n      max: propMax = GRAIL_MAX_DATE,\n      precision: propPrecision = 'minutes',\n      disabled: propDisabled,\n      required: propRequired,\n      id: propId,\n      'aria-disabled': propAriaDisabled,\n      type,\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    const [isControlled] = useState(propValue !== undefined);\n    const onChangeProp = useCallbackRef(onChange);\n    const precision = type === 'date' ? 'day' : propPrecision;\n\n    const memoedValue = useMemo(\n      () => getTimeValue(propValue, precision) ?? null,\n      [precision, propValue],\n    );\n    const memoedDefaultValue = useMemo(\n      () => getTimeValue(propDefaultValue, precision),\n      /** We're ignoring updates to defaultValue as it only considers the initial state. */\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    // Keep min and max updated at midnight\n    const { min, max } = useMinMax(propMin, propMax, precision);\n\n    const calendarRef = useRef<\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n    >(null);\n    const dateTimeInputRef = useRef<DateTimeInputRef>(null);\n    const dateTimePickerRef =\n      useRef<FormControlWithOverlayRef<HTMLSpanElement>>(null);\n\n    const { dispatch: formFieldMessagesDispatch } =\n      useFormFieldMessagesContext();\n\n    const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled: propAriaDisabled,\n    });\n\n    const { formatString } = useDateTimeMessages({ precision });\n    const [initialState] = useState<DateTimePickerValueStates>(() => {\n      const _value = isControlled ? memoedValue : memoedDefaultValue;\n      const value = _value ?? null;\n      const timeOffset = getTimeOffsetFromInitialValue(\n        value,\n        'single',\n        min,\n        max,\n        precision,\n      );\n\n      const error = validate(value, min, max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: dateTimePickerRef,\n        expectedFormat: formatString,\n        valueMode: 'single',\n      });\n\n      // The DateTimePicker can handle partial timeValues but the calendar can't\n      // so we need to adjust the calendar value accordingly\n      const calendarValue = toCalendarValue(value, precision);\n\n      return {\n        calendarValue,\n        dateTimePickerValue: value,\n        min,\n        max,\n        precision,\n        calendarRef,\n        dateTimeInputRef,\n        dateTimePickerRef,\n        calendarError: error,\n        dateTimePickerError: error,\n        timeOffset,\n      };\n    });\n\n    const [store] = useState(() =>\n      createTimeframeStore<\n        DateTimePickerValueStates,\n        DateTimePickerValueStoreActions\n      >(\n        initialState,\n        getDateTimePickerActions(\n          formFieldMessagesDispatch,\n          onChangeProp,\n          isControlled,\n        ),\n      ),\n    );\n\n    useSyncPropsAndState(\n      store,\n      memoedValue,\n      isControlled,\n      precision,\n      formatString,\n      required,\n      formFieldMessagesDispatch,\n      dateTimePickerRef,\n    );\n\n    // Keep min and max updated at midnight\n    useMinMaxStoreSync(\n      store,\n      min,\n      max,\n      useCallback(\n        (\n          state: DateTimePickerValueStates,\n          min: TimeValue | null,\n          max: TimeValue | null,\n        ) => {\n          const error = validate(state.dateTimePickerValue, min, max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.calendarError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: dateTimePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'single',\n          });\n          return { calendarError: error, dateTimePickerError: error };\n        },\n        [formFieldMessagesDispatch],\n      ),\n    );\n\n    const mergedRef = useMergeRefs([dateTimePickerRef, forwardedRef]);\n\n    return (\n      <DateTimePickerStoreProvider store={store}>\n        <DateTimePickerRoot\n          {...remainingProps}\n          id={id}\n          ref={mergedRef}\n          aria-disabled={ariaDisabled}\n          disabled={disabled}\n          required={required}\n          type={type}\n        />\n      </DateTimePickerStoreProvider>\n    );\n  },\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type Dispatch,\n  type RefObject,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { DateTimePickerRoot } from './DateTimePickerRoot.js';\nimport type { DateTimePickerProps } from './types.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { getDateTimePickerActions } from '../../core/time/timeframeStore/actions/dateTimePicker.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport type {\n  DateTimePickerValueStates,\n  DateTimePickerValueStoreActions,\n} from '../../core/time/timeframeStore/dateTimePicker.types.js';\nimport { DateTimePickerStoreProvider } from '../../core/time/timeframeStore/timeframeStoreProvider.js';\nimport { useDateTimeMessages } from '../../core/time/useDateTimeMessages.js';\nimport { useMinMax, useMinMaxStoreSync } from '../../core/time/useMinMax.js';\nimport { validate } from '../../core/time/validation.js';\nimport type { TimeValue } from '../../core/types/time.js';\nimport type { FormFieldMessagesReducerAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { toCalendarValue } from '../../forms/forms-core/time/helpers.js';\nimport {\n  removePrecisionFromTimeValue,\n  getTimeValue,\n} from '../../forms/forms-core/time/timeParser.js';\nimport { getTimeOffsetFromInitialValue } from '../calendar/utils/helpers.js';\nimport type { DateTimeInputRef } from '../date-time-range-picker/types.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../forms-core/time/date-time.js';\nimport type {\n  FormControlRef,\n  FormControlWithOverlayRef,\n  TimeRangePickerRef,\n} from '../shared-types.js';\n\ntype DateTimePickerStore = StoreApi<\n  DateTimePickerValueStates & DateTimePickerValueStoreActions\n>;\n\n/**\n * Extracts the prop-to-store syncing effects into a dedicated hook so the\n * component body stays focused on wiring rather than implementation details.\n *\n * According to the zustand maintainer, the recommended way to keep a zustand\n * store in sync with React props is via useEffect.\n * see https://github.com/pmndrs/zustand/discussions/1390#discussion-4505803\n */\nfunction useSyncPropsAndState(\n  store: DateTimePickerStore,\n  memoedValue: TimeValue | null | undefined,\n  isControlled: boolean,\n  precision: Precision,\n  formatString: string | undefined,\n  required: boolean | undefined,\n  formFieldMessagesDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  dateTimePickerRef: RefObject<FormControlWithOverlayRef<HTMLSpanElement>>,\n) {\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(() => {\n    isControlled &&\n      store.setState((state) => {\n        // In case of an invalid interim state the onChange can emit a string that\n        // is not a valid time value yet. Don't overwrite internal state in that case,\n        // so users can continue editing.\n        if (memoedValue?.absoluteDate === '') {\n          return state;\n        }\n\n        const error = validate(memoedValue ?? null, state.min, state.max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          formerError: state.calendarError,\n          precision: state.precision,\n          showError: false,\n          checkOrder: true,\n          ref: dateTimePickerRef,\n          expectedFormat: state.formatString,\n          valueMode: 'single',\n        });\n\n        const value = removePrecisionFromTimeValue(\n          memoedValue ?? null,\n          state.precision,\n        );\n        const timeOffset = getTimeOffsetFromInitialValue(\n          value,\n          'single',\n          state.min,\n          state.max,\n          state.precision,\n        );\n\n        return {\n          ...state,\n          dateTimePickerValue: value,\n          calendarValue: toCalendarValue(value, state.precision),\n          calendarError: error,\n          dateTimePickerError: error,\n          timeOffset,\n        };\n      });\n  }, [\n    formFieldMessagesDispatch,\n    isControlled,\n    memoedValue,\n    store,\n    dateTimePickerRef,\n  ]);\n\n  // Sync precision, formatString, and required into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const value = removePrecisionFromTimeValue(\n        state.dateTimePickerValue,\n        precision,\n      );\n\n      const error = validate(value, state.min, state.max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        formerError: state.dateTimePickerError,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: dateTimePickerRef,\n        expectedFormat: formatString,\n        valueMode: 'single',\n        required,\n      });\n\n      return {\n        ...state,\n        formatString,\n        precision,\n        dateTimePickerValue: value,\n        calendarValue: toCalendarValue(value, precision),\n        required,\n        calendarError: error,\n        dateTimePickerError: error,\n      };\n    });\n  }, [\n    formatString,\n    precision,\n    store,\n    required,\n    formFieldMessagesDispatch,\n    dateTimePickerRef,\n  ]);\n}\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>(\n  (\n    {\n      value: propValue,\n      defaultValue: propDefaultValue,\n      onChange,\n      min: propMin = GRAIL_MIN_DATE,\n      max: propMax = GRAIL_MAX_DATE,\n      precision: propPrecision = 'minutes',\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      'aria-disabled': propAriaDisabled,\n      type,\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    const [isControlled] = useState(propValue !== undefined);\n    const onChangeProp = useCallbackRef(onChange);\n    const precision = type === 'date' ? 'day' : propPrecision;\n\n    const memoedValue = useMemo(\n      () => getTimeValue(propValue, precision) ?? null,\n      [precision, propValue],\n    );\n    const memoedDefaultValue = useMemo(\n      () => getTimeValue(propDefaultValue, precision),\n      /** We're ignoring updates to defaultValue as it only considers the initial state. */\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    // Keep min and max updated at midnight\n    const { min, max } = useMinMax(propMin, propMax, precision);\n\n    const calendarRef = useRef<\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n    >(null);\n    const dateTimeInputRef = useRef<DateTimeInputRef>(null);\n    const dateTimePickerRef =\n      useRef<FormControlWithOverlayRef<HTMLSpanElement>>(null);\n\n    const { dispatch: formFieldMessagesDispatch } =\n      useFormFieldMessagesContext();\n\n    const { disabled, required, id, ariaDisabled, readOnly } =\n      useSyncedFormControlProps({\n        propDisabled,\n        propRequired,\n        propId,\n        propAriaDisabled,\n        propReadOnly,\n      });\n\n    const { formatString } = useDateTimeMessages({ precision });\n    const [initialState] = useState<DateTimePickerValueStates>(() => {\n      const _value = isControlled ? memoedValue : memoedDefaultValue;\n      const value = _value ?? null;\n      const timeOffset = getTimeOffsetFromInitialValue(\n        value,\n        'single',\n        min,\n        max,\n        precision,\n      );\n\n      const error = validate(value, min, max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: dateTimePickerRef,\n        expectedFormat: formatString,\n        valueMode: 'single',\n      });\n\n      // The DateTimePicker can handle partial timeValues but the calendar can't\n      // so we need to adjust the calendar value accordingly\n      const calendarValue = toCalendarValue(value, precision);\n\n      return {\n        calendarValue,\n        dateTimePickerValue: value,\n        min,\n        max,\n        precision,\n        calendarRef,\n        dateTimeInputRef,\n        dateTimePickerRef,\n        calendarError: error,\n        dateTimePickerError: error,\n        timeOffset,\n      };\n    });\n\n    const [store] = useState(() =>\n      createTimeframeStore<\n        DateTimePickerValueStates,\n        DateTimePickerValueStoreActions\n      >(\n        initialState,\n        getDateTimePickerActions(\n          formFieldMessagesDispatch,\n          onChangeProp,\n          isControlled,\n        ),\n      ),\n    );\n\n    useSyncPropsAndState(\n      store,\n      memoedValue,\n      isControlled,\n      precision,\n      formatString,\n      required,\n      formFieldMessagesDispatch,\n      dateTimePickerRef,\n    );\n\n    // Keep min and max updated at midnight\n    useMinMaxStoreSync(\n      store,\n      min,\n      max,\n      useCallback(\n        (\n          state: DateTimePickerValueStates,\n          min: TimeValue | null,\n          max: TimeValue | null,\n        ) => {\n          const error = validate(state.dateTimePickerValue, min, max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.calendarError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: dateTimePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'single',\n          });\n          return { calendarError: error, dateTimePickerError: error };\n        },\n        [formFieldMessagesDispatch],\n      ),\n    );\n\n    const mergedRef = useMergeRefs([dateTimePickerRef, forwardedRef]);\n\n    return (\n      <DateTimePickerStoreProvider store={store}>\n        <DateTimePickerRoot\n          {...remainingProps}\n          id={id}\n          ref={mergedRef}\n          aria-disabled={ariaDisabled}\n          disabled={disabled}\n          required={required}\n          readOnly={readOnly}\n          type={type}\n        />\n      </DateTimePickerStoreProvider>\n    );\n  },\n);\n"],
+  "mappings": "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",
   "names": ["min", "max"]
 }

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 clearIconButton = "_1i883gjf-3-3-3";
-var dateSelector = "_1i883gje-3-3-3";
-var dateTimePicker = _7a468({ defaultClassName: "_1i883gj6-3-3-3", variantClassNames: { readOnly: { true: "_1i883gj7-3-3-3" }, showError: { true: "_1i883gj8-3-3-3" }, disabled: { true: "_1i883gj9-3-3-3" }, type: { date: "_1i883gja-3-3-3", time: "_1i883gjb-3-3-3", datetime: "_1i883gjc-3-3-3" } }, defaultVariants: {}, compoundVariants: [] });
-var spinButtonGroup = "_1i883gjd-3-3-3 _da9a8v0-3-3-3 _da9a8v2-3-3-3 _da9a8v3-3-3-3 _da9a8vb-3-3-3";
-var spinButtonSelectionBackgroundColorVar = "var(--_1i883gj5-3-3-3)";
-var spinButtonSelectionColorVar = "var(--_1i883gj4-3-3-3)";
+var clearIconButton = "_1i883gjh-3-4-1";
+var dateSelector = "_1i883gjg-3-4-1";
+var dateTimePicker = _7a468({ defaultClassName: "_1i883gj7-3-4-1", variantClassNames: { readOnly: { true: "_1i883gj8-3-4-1" }, showError: { true: "_1i883gj9-3-4-1" }, disabled: { true: "_1i883gja-3-4-1" }, type: { date: "_1i883gjb-3-4-1", time: "_1i883gjc-3-4-1", datetime: "_1i883gjd-3-4-1" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, showError: true }, "_1i883gje-3-4-1"]] });
+var spinButtonGroup = "_1i883gjf-3-4-1 _da9a8v0-3-4-1 _da9a8v2-3-4-1 _da9a8v3-3-4-1 _da9a8vb-3-4-1";
+var spinButtonSelectionBackgroundColorVar = "var(--_1i883gj6-3-4-1)";
+var spinButtonSelectionColorVar = "var(--_1i883gj5-3-4-1)";
 export {
   clearIconButton,
   dateSelector,

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 clearIconButton = '_1i883gjf-3-3-3';\nexport var dateSelector = '_1i883gje-3-3-3';\nexport var dateTimePicker = _7a468({defaultClassName:'_1i883gj6-3-3-3',variantClassNames:{readOnly:{true:'_1i883gj7-3-3-3'},showError:{true:'_1i883gj8-3-3-3'},disabled:{true:'_1i883gj9-3-3-3'},type:{date:'_1i883gja-3-3-3',time:'_1i883gjb-3-3-3',datetime:'_1i883gjc-3-3-3'}},defaultVariants:{},compoundVariants:[]});\nexport var spinButtonGroup = '_1i883gjd-3-3-3 _da9a8v0-3-3-3 _da9a8v2-3-3-3 _da9a8v3-3-3-3 _da9a8vb-3-3-3';\nexport var spinButtonSelectionBackgroundColorVar = 'var(--_1i883gj5-3-3-3)';\nexport var spinButtonSelectionColorVar = 'var(--_1i883gj4-3-3-3)';"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,kBAAkB;AACtB,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,kBAAkB;AACtB,IAAI,wCAAwC;AAC5C,IAAI,8BAA8B;",
+  "sourcesContent": ["import '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport './DateTimePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearIconButton = '_1i883gjh-3-4-1';\nexport var dateSelector = '_1i883gjg-3-4-1';\nexport var dateTimePicker = _7a468({defaultClassName:'_1i883gj7-3-4-1',variantClassNames:{readOnly:{true:'_1i883gj8-3-4-1'},showError:{true:'_1i883gj9-3-4-1'},disabled:{true:'_1i883gja-3-4-1'},type:{date:'_1i883gjb-3-4-1',time:'_1i883gjc-3-4-1',datetime:'_1i883gjd-3-4-1'}},defaultVariants:{},compoundVariants:[[{readOnly:true,showError:true},'_1i883gje-3-4-1']]});\nexport var spinButtonGroup = '_1i883gjf-3-4-1 _da9a8v0-3-4-1 _da9a8v2-3-4-1 _da9a8v3-3-4-1 _da9a8vb-3-4-1';\nexport var spinButtonSelectionBackgroundColorVar = 'var(--_1i883gj6-3-4-1)';\nexport var spinButtonSelectionColorVar = 'var(--_1i883gj5-3-4-1)';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,kBAAkB;AACtB,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,CAAC,EAAC,UAAS,MAAK,WAAU,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACpW,IAAI,kBAAkB;AACtB,IAAI,wCAAwC;AAC5C,IAAI,8BAA8B;",
   "names": []
 }

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

@@ -14,13 +14,14 @@ import { DateSelector } from "./DateSelector.js";
 import * as styles from "./DateTimePicker.sty.js";
 import { Button } from "../../buttons/button/Button.js";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useFormControlState } from "../../core/hooks/useFormControlState.js";
 import { useFocusRing } from "../../core/styles/useFocusRing.js";
 import { useDateTimePickerStore } from "../../core/time/timeframeStore/useTimeframeStore.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 import { inputGroupClassName } from "../../layouts/input-group/InputGroup.sty.js";
 import { InputGroup } from "../../layouts/input-group/InputGroup.js";
-import { fieldColors } from "../../styles/field.sty.js";
+import { fieldTokens } from "../../styles/field.sty.js";
 import { DateTimeInput } from "../date-time-range-picker/DateTimeInput.js";
 import { dateTimeRange } from "../date-time-range-picker/DateTimeRangePicker.sty.js";
 import { InternalBaseItem } from "../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js";
@@ -52,6 +53,7 @@ const DateTimePickerRoot = forwardRef((props, forwardedRef) => {
     controlState,
     ...remainingProps
   } = props;
+  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);
   const min = useDateTimePickerStore((state) => state.min);
   const max = useDateTimePickerStore((state) => state.max);
   const value = useDateTimePickerStore((state) => state.dateTimePickerValue);
@@ -85,6 +87,7 @@ const DateTimePickerRoot = forwardRef((props, forwardedRef) => {
   const showDateSelector = type !== "time";
   const { focusClassName } = useFocusRing({
     focusWithin: true,
+    ignoreModality: true,
     color: showError ? "critical" : "neutral",
     disabled
   });
@@ -140,7 +143,8 @@ const DateTimePickerRoot = forwardRef((props, forwardedRef) => {
     touchedContainerRef,
     useCallback(() => {
       focusDateTimeInput(null, dateInputRef);
-    }, [dateInputRef])
+    }, [dateInputRef]),
+    dateInputRef
   );
   const onKeyDown = useCallback(
     (event) => {
@@ -150,7 +154,21 @@ const DateTimePickerRoot = forwardRef((props, forwardedRef) => {
       }
       const isIso = dateInputRef.current?.element?.getAttribute("data-valuetype") === "iso8601";
       if (isExpressionTriggerKey(event) && isIso) {
-        dateInputRef.current?.switchToExpression(event.key, true);
+        dateInputRef.current?.setExpressionValue(event.key);
+        requestAnimationFrame(() => {
+          const expressionInputRef = dateInputRef.current?.expressionInputRef;
+          if (expressionInputRef) {
+            expressionInputRef.focus();
+            const selection = window.getSelection();
+            if (selection) {
+              const range = document.createRange();
+              range.selectNodeContents(expressionInputRef);
+              range.collapse(false);
+              selection.removeAllRanges();
+              selection.addRange(range);
+            }
+          }
+        });
         event.preventDefault();
         event.stopPropagation();
         return;
@@ -170,6 +188,7 @@ const DateTimePickerRoot = forwardRef((props, forwardedRef) => {
       ref: rootRef,
       className: consumerClassName,
       style: consumerStyle,
+      ...behavioralTrackingProps,
       "data-dt-component": COMPONENT_NAME,
       children: [
         /* @__PURE__ */ jsxs(
@@ -190,7 +209,7 @@ const DateTimePickerRoot = forwardRef((props, forwardedRef) => {
                 {
                   ref: touchedContainerRef,
                   className: clsx(
-                    fieldColors({
+                    fieldTokens({
                       color: showError ? "critical" : "neutral",
                       disabled: disabledOrAriaDisabled,
                       variant: "emphasized"

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-picker/DateTimePickerRoot.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 { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { DateSelector } from './DateSelector.js';\nimport * as styles from './DateTimePicker.sty.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { useDateTimePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.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 } from '../../styles/field.sty.js';\nimport { DateTimeInput } from '../date-time-range-picker/DateTimeInput.js';\nimport { dateTimeRange } from '../date-time-range-picker/DateTimeRangePicker.sty.js';\nimport { InternalBaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.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 { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlWithOverlayRef } from '../shared-types.js';\nimport type { DateSelectorRef, DateTimePickerProps } from './types.js';\nimport { focusDateTimeInput } from './utils/focusDateTimeInput.js';\nimport { isExpressionTriggerKey } from '../date-time-range-picker/expression-trigger-helpers.js';\nimport { onTimeframeCopyCapture } from '../date-time-range-picker/selection-copy-helpers.js';\nimport { useSelectionInteractionHandlers } from '../date-time-range-picker/useSelectionInteractionHandlers.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 * @internal\n */\nexport const DateTimePickerRoot = 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    placeholder,\n    name,\n    type = 'datetime',\n    controlState,\n    ...remainingProps\n  }: DateTimePickerProps = props;\n\n  const min = useDateTimePickerStore((state) => state.min);\n  const max = useDateTimePickerStore((state) => state.max);\n  const value = useDateTimePickerStore((state) => state.dateTimePickerValue);\n  const setValue = useDateTimePickerStore(\n    (state) => state.setDateTimePickerValue,\n  );\n  const dateInputRef = useDateTimePickerStore(\n    (state) => state.dateTimeInputRef,\n  );\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const dateSelectorRef = useRef<DateSelectorRef>(null);\n\n  const [hasInputContent, setHasInputContent] = useState(false);\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 ariaLabelingProps = useAriaLabelingProps(remainingProps);\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  const clearButtonLabel = intl.formatMessage({\n    defaultMessage: 'Clear date and time',\n    id: '5i26Rr1LLz0OIGNJ',\n    description: 'Aria label for the DateTimePicker clear button.',\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, dateInputRef],\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        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n    },\n    [formFieldDispatch],\n  );\n\n  // remove the textContent when the value is set to null.\n  useEffect(() => {\n    if (\n      value === null &&\n      dateInputRef.current?.expressionInputRef &&\n      dateInputRef.current.expressionInputRef.textContent !== '' &&\n      dateInputRef.current.element?.getAttribute('data-valuetype') !==\n        'expression'\n    ) {\n      dateInputRef.current.expressionInputRef.textContent = '';\n    }\n  }, [value, dateInputRef]);\n\n  const { onMouseDown, onKeyDown: handleSelectionKeyDown } =\n    useSelectionInteractionHandlers(\n      touchedContainerRef,\n      useCallback(() => {\n        focusDateTimeInput(null, dateInputRef);\n      }, [dateInputRef]),\n    );\n\n  const onKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (disabled || readOnly) {\n        handleSelectionKeyDown(event);\n        return;\n      }\n\n      const isIso =\n        dateInputRef.current?.element?.getAttribute('data-valuetype') ===\n        'iso8601';\n\n      if (isExpressionTriggerKey(event) && isIso) {\n        dateInputRef.current?.switchToExpression(event.key, true);\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n\n      handleSelectionKeyDown(event);\n    },\n    [disabled, readOnly, handleSelectionKeyDown, dateInputRef],\n  );\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            fieldColors({\n              color: showError ? 'critical' : 'neutral',\n              disabled: disabledOrAriaDisabled,\n              variant: 'emphasized',\n            }),\n            dateTimeRange({\n              showError,\n              disabled: disabledOrAriaDisabled,\n              readOnly,\n            }),\n            focusClassName,\n            inputGroupClassName,\n          )}\n          tabIndex={disabled ? undefined : 0}\n          onBlur={onBlurTouched}\n          onInput={() => {\n            setHasInputContent(\n              !!dateInputRef.current?.expressionInputRef?.textContent,\n            );\n          }}\n          onMouseDown={onMouseDown}\n          onKeyDown={onKeyDown}\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          onCopyCapture={onTimeframeCopyCapture}\n        >\n          <DateTimeInput\n            ref={dateInputRef}\n            id={id}\n            type={type}\n            disabled={disabled}\n            readOnly={readOnly}\n            placeholder={placeholder}\n            name={name}\n            value={value}\n            onChange={(newValue) => {\n              if (typeof newValue !== 'string') {\n                setValue(newValue);\n              }\n            }}\n            {...ariaLabelingProps}\n            aria-disabled={ariaDisabled}\n            required={required}\n            validationValueMode=\"single\"\n            controlId={id}\n            controlState={controlState}\n            onPasteComplete={() => {\n              requestAnimationFrame(() => {\n                dateInputRef.current?.focusLast();\n              });\n            }}\n          />\n          {!readOnly &&\n            !disabledOrAriaDisabled &&\n            ((value !== null && value.value !== '') || hasInputContent) && (\n              <Button\n                onFocus={() => {\n                  formFieldDispatch?.({\n                    type: FormFieldMessagesAction.SETISTOUCHED,\n                    payload: { isTouched: true },\n                  });\n                }}\n                onClick={() => {\n                  setValue(null);\n                  if (dateInputRef.current?.expressionInputRef) {\n                    dateInputRef.current.expressionInputRef.textContent = '';\n                  }\n                  setHasInputContent(false);\n                  requestAnimationFrame(() => {\n                    dateInputRef.current?.expressionInputRef?.focus();\n                  });\n                }}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') {\n                    e.stopPropagation();\n                  }\n                }}\n                className={styles.clearIconButton}\n                color={showError ? 'critical' : 'neutral'}\n                size=\"condensed\"\n                aria-label={clearButtonLabel}\n              >\n                <XmarkIcon />\n              </Button>\n            )}\n        </div>\n        {showDateSelector && (\n          <DateSelector\n            ref={dateSelectorRef}\n            aria-label={calendarTriggerLabel}\n            aria-disabled={ariaDisabled}\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  DateTimePickerRoot as typeof DateTimePickerRoot & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type FocusEvent,\n  FocusEventHandler,\n  forwardRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { DateSelector } from './DateSelector.js';\nimport * as styles from './DateTimePicker.sty.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { useDateTimePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.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 { fieldTokens } from '../../styles/field.sty.js';\nimport { DateTimeInput } from '../date-time-range-picker/DateTimeInput.js';\nimport { dateTimeRange } from '../date-time-range-picker/DateTimeRangePicker.sty.js';\nimport { InternalBaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.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 { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlWithOverlayRef } from '../shared-types.js';\nimport type { DateSelectorRef, DateTimePickerProps } from './types.js';\nimport { focusDateTimeInput } from './utils/focusDateTimeInput.js';\nimport { isExpressionTriggerKey } from '../date-time-range-picker/expression-trigger-helpers.js';\nimport { onTimeframeCopyCapture } from '../date-time-range-picker/selection-copy-helpers.js';\nimport { useSelectionInteractionHandlers } from '../date-time-range-picker/useSelectionInteractionHandlers.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 * @internal\n */\nexport const DateTimePickerRoot = 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    placeholder,\n    name,\n    type = 'datetime',\n    controlState,\n    ...remainingProps\n  }: DateTimePickerProps = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n\n  const min = useDateTimePickerStore((state) => state.min);\n  const max = useDateTimePickerStore((state) => state.max);\n  const value = useDateTimePickerStore((state) => state.dateTimePickerValue);\n  const setValue = useDateTimePickerStore(\n    (state) => state.setDateTimePickerValue,\n  );\n  const dateInputRef = useDateTimePickerStore(\n    (state) => state.dateTimeInputRef,\n  );\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const dateSelectorRef = useRef<DateSelectorRef>(null);\n\n  const [hasInputContent, setHasInputContent] = useState(false);\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 ariaLabelingProps = useAriaLabelingProps(remainingProps);\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    ignoreModality: 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  const clearButtonLabel = intl.formatMessage({\n    defaultMessage: 'Clear date and time',\n    id: '5i26Rr1LLz0OIGNJ',\n    description: 'Aria label for the DateTimePicker clear button.',\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, dateInputRef],\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        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n    },\n    [formFieldDispatch],\n  );\n\n  // remove the textContent when the value is set to null.\n  useEffect(() => {\n    if (\n      value === null &&\n      dateInputRef.current?.expressionInputRef &&\n      dateInputRef.current.expressionInputRef.textContent !== '' &&\n      dateInputRef.current.element?.getAttribute('data-valuetype') !==\n        'expression'\n    ) {\n      dateInputRef.current.expressionInputRef.textContent = '';\n    }\n  }, [value, dateInputRef]);\n\n  const { onMouseDown, onKeyDown: handleSelectionKeyDown } =\n    useSelectionInteractionHandlers(\n      touchedContainerRef,\n      useCallback(() => {\n        focusDateTimeInput(null, dateInputRef);\n      }, [dateInputRef]),\n      dateInputRef,\n    );\n\n  const onKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (disabled || readOnly) {\n        handleSelectionKeyDown(event);\n        return;\n      }\n\n      const isIso =\n        dateInputRef.current?.element?.getAttribute('data-valuetype') ===\n        'iso8601';\n\n      if (isExpressionTriggerKey(event) && isIso) {\n        dateInputRef.current?.setExpressionValue(event.key);\n        requestAnimationFrame(() => {\n          const expressionInputRef = dateInputRef.current?.expressionInputRef;\n          if (expressionInputRef) {\n            expressionInputRef.focus();\n            const selection = window.getSelection();\n            if (selection) {\n              const range = document.createRange();\n              range.selectNodeContents(expressionInputRef);\n              range.collapse(false);\n              selection.removeAllRanges();\n              selection.addRange(range);\n            }\n          }\n        });\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n\n      handleSelectionKeyDown(event);\n    },\n    [disabled, readOnly, handleSelectionKeyDown, dateInputRef],\n  );\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      {...behavioralTrackingProps}\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            fieldTokens({\n              color: showError ? 'critical' : 'neutral',\n              disabled: disabledOrAriaDisabled,\n              variant: 'emphasized',\n            }),\n            dateTimeRange({\n              showError,\n              disabled: disabledOrAriaDisabled,\n              readOnly,\n            }),\n            focusClassName,\n            inputGroupClassName,\n          )}\n          tabIndex={disabled ? undefined : 0}\n          onBlur={onBlurTouched}\n          onInput={() => {\n            setHasInputContent(\n              !!dateInputRef.current?.expressionInputRef?.textContent,\n            );\n          }}\n          onMouseDown={onMouseDown}\n          onKeyDown={onKeyDown}\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          onCopyCapture={onTimeframeCopyCapture}\n        >\n          <DateTimeInput\n            ref={dateInputRef}\n            id={id}\n            type={type}\n            disabled={disabled}\n            readOnly={readOnly}\n            placeholder={placeholder}\n            name={name}\n            value={value}\n            onChange={(newValue) => {\n              if (typeof newValue !== 'string') {\n                setValue(newValue);\n              }\n            }}\n            {...ariaLabelingProps}\n            aria-disabled={ariaDisabled}\n            required={required}\n            validationValueMode=\"single\"\n            controlId={id}\n            controlState={controlState}\n            onPasteComplete={() => {\n              requestAnimationFrame(() => {\n                dateInputRef.current?.focusLast();\n              });\n            }}\n          />\n          {!readOnly &&\n            !disabledOrAriaDisabled &&\n            ((value !== null && value.value !== '') || hasInputContent) && (\n              <Button\n                onFocus={() => {\n                  formFieldDispatch?.({\n                    type: FormFieldMessagesAction.SETISTOUCHED,\n                    payload: { isTouched: true },\n                  });\n                }}\n                onClick={() => {\n                  setValue(null);\n                  if (dateInputRef.current?.expressionInputRef) {\n                    dateInputRef.current.expressionInputRef.textContent = '';\n                  }\n                  setHasInputContent(false);\n                  requestAnimationFrame(() => {\n                    dateInputRef.current?.expressionInputRef?.focus();\n                  });\n                }}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') {\n                    e.stopPropagation();\n                  }\n                }}\n                className={styles.clearIconButton}\n                color={showError ? 'critical' : 'neutral'}\n                size=\"condensed\"\n                aria-label={clearButtonLabel}\n              >\n                <XmarkIcon />\n              </Button>\n            )}\n        </div>\n        {showDateSelector && (\n          <DateSelector\n            ref={dateSelectorRef}\n            aria-label={calendarTriggerLabel}\n            aria-disabled={ariaDisabled}\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  DateTimePickerRoot as typeof DateTimePickerRoot & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -6,6 +6,7 @@ import { isNil } from "lodash-es";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useIntl } from "react-intl";
 import { getTimezone } from "@dynatrace-sdk/user-preferences";
+import { getPlaceholder } from "../../../core/time/useDateTimeMessages.js";
 import { replaceSecondFractions } from "../../forms-core/time/date-time.js";
 import {
   convertDateOnlyToDateTime,
@@ -222,11 +223,7 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
                   prefix
                 }
               ),
-              placeholder: intl.formatMessage({
-                defaultMessage: "yyyy",
-                id: "c6bnAmHe/EY7/jQS",
-                description: "The abbreviation of the year part of a date"
-              })
+              placeholder: getPlaceholder(type2, intl.formatMessage)
             }
           );
         case "month":
@@ -249,11 +246,7 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
                   prefix
                 }
               ),
-              placeholder: intl.formatMessage({
-                defaultMessage: "mm",
-                id: "LnDfRkxwzq9Vq/up",
-                description: "The abbreviation of the month part of a date"
-              })
+              placeholder: getPlaceholder(type2, intl.formatMessage)
             }
           );
         case "day":
@@ -276,11 +269,7 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
                   prefix
                 }
               ),
-              placeholder: intl.formatMessage({
-                defaultMessage: "dd",
-                id: "akyhaFko0pgLR1Q5",
-                description: "The abbreviation of the day part of a date"
-              })
+              placeholder: getPlaceholder(type2, intl.formatMessage)
             }
           );
         case "hour":
@@ -303,11 +292,7 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
                   prefix
                 }
               ),
-              placeholder: intl.formatMessage({
-                defaultMessage: "hh",
-                id: "8ioXZP1LdljRBssM",
-                description: "The abbreviation of the hour part of a time"
-              })
+              placeholder: getPlaceholder(type2, intl.formatMessage)
             }
           );
         case "minute":
@@ -330,11 +315,7 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
                   prefix
                 }
               ),
-              placeholder: intl.formatMessage({
-                defaultMessage: "mm",
-                id: "Uk/Q/HKAITavgOfU",
-                description: "The abbreviation of the minute part of a time"
-              })
+              placeholder: getPlaceholder(type2, intl.formatMessage)
             }
           );
         case "second":
@@ -357,11 +338,7 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
                   prefix
                 }
               ),
-              placeholder: intl.formatMessage({
-                defaultMessage: "ss",
-                id: "wnjOChhd1Lw9s9Gg",
-                description: "The abbreviation of the second part of a time"
-              })
+              placeholder: getPlaceholder(type2, intl.formatMessage)
             }
           );
         case "fractionalSecond":
@@ -384,11 +361,7 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
                   prefix
                 }
               ),
-              placeholder: intl.formatMessage({
-                defaultMessage: "fff",
-                id: "ZSJMoZevK9FVBtMR",
-                description: "The abbreviation of the fractional of a second part of a time"
-              })
+              placeholder: getPlaceholder(type2, intl.formatMessage)
             }
           );
         case "dayPeriod":
@@ -411,11 +384,7 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
                   prefix
                 }
               ),
-              placeholder: intl.formatMessage({
-                defaultMessage: "aa",
-                id: "8I3jLlYKntZOjiy8",
-                description: "The abbreviation for the day period (am/pm) part of a time"
-              })
+              placeholder: getPlaceholder(type2, intl.formatMessage)
             }
           );
         case "literal":
@@ -479,7 +448,9 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
     [handlers]
   );
   useEffect(() => {
-    setParts(() => dateTime === null ? emptyParts : toParts(dateTime));
+    setParts(
+      () => dateTime === null || !isValid(dateTime) ? emptyParts : toParts(dateTime)
+    );
   }, [emptyParts, toDateTime, toParts, precision]);
   return {
     spinButtons,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/date-time-picker/hooks/useSpinButtons.tsx"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { getDaysInMonth, isValid, startOfDay } from 'date-fns';\nimport { isNil } from 'lodash-es';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { replaceSecondFractions } from '../../forms-core/time/date-time.js';\nimport {\n  convertDateOnlyToDateTime,\n  getDayPeriodValues,\n} from '../../forms-core/time/helpers.js';\nimport { getTimeValue } from '../../forms-core/time/timeParser.js';\nimport { SpinButtonGroup } from '../../spin-buttons/spin-button-group/SpinButtonGroup.js';\nimport type { SpinButtonHandler } from '../../spin-buttons/spin-button-group/types.js';\nimport type { DateTimePickerProps } from '../types.js';\nimport { useDateTimeFormat } from './useDateTimeFormat.js';\nimport type { NumberSpinButtonProps } from '../../spin-buttons/number-spin-button/types.js';\nimport type { TextSpinButtonProps } from '../../spin-buttons/text-spin-button/types.js';\n/**\n * Returns a list of preconfigured spinbuttons for a given datetime and format configuration.\n */\nexport function useSpinButtons(\n  isoDateTime: TimeValue | string | null,\n  type: DateTimePickerProps['type'],\n  precision: DateTimePickerProps['precision'],\n  isDisabled: boolean,\n  isReadonly: boolean,\n  ariaLabelPrefix: string | undefined,\n  value?: TimeValue | string | null,\n) {\n  const intl = useIntl();\n  const prefix = ariaLabelPrefix ? `${ariaLabelPrefix} ` : '';\n\n  const { toParts, toDateTime, emptyParts } = useDateTimeFormat(\n    type,\n    precision,\n  );\n  const timeValue = useMemo(() => getTimeValue(isoDateTime), [isoDateTime]);\n  const dayPeriodValues = useMemo(() => getDayPeriodValues(), []);\n  const timezone = getTimezone();\n\n  const [parts, setParts] = useState(\n    timeValue !== null && timeValue !== undefined\n      ? toParts(\n          new TZDateMini(\n            convertDateOnlyToDateTime(timeValue.absoluteDate, type),\n            timezone,\n          ),\n        )\n      : emptyParts,\n  );\n  const hasDayPeriod = useMemo(\n    () => parts.some((p) => p.type === 'dayPeriod'),\n    [parts],\n  );\n\n  const precisionRef = useRef(precision);\n\n  const dateTime = useMemo(() => {\n    const newDateTime = toDateTime(parts);\n    if (!newDateTime || !isValid(newDateTime)) {\n      return newDateTime;\n    }\n\n    if (precision === precisionRef.current && precision === 'milliseconds') {\n      return newDateTime;\n    }\n\n    const date = new TZDateMini(\n      getTimeValue(value, precision)?.absoluteDate ??\n        startOfDay(TZDateMini.tz(timezone)).toISOString(),\n      timezone,\n    );\n    const milliseconds = date.getMilliseconds();\n    const seconds = date.getUTCSeconds();\n\n    if (\n      precision !== precisionRef.current ||\n      precision === 'minutes' ||\n      precision === undefined\n    ) {\n      newDateTime.setUTCSeconds(seconds);\n      precisionRef.current = precision;\n    }\n\n    return new TZDateMini(\n      replaceSecondFractions(\n        newDateTime.toISOString(),\n        milliseconds.toString(),\n      ),\n      timezone,\n    );\n  }, [toDateTime, parts, precision, value, timezone]);\n\n  const daysInMonth =\n    dateTime !== null && isValid(dateTime) ? getDaysInMonth(dateTime) : 31;\n\n  const updatePart = useCallback(\n    (type: Intl.DateTimeFormatPart['type'] | undefined, value: string) => {\n      setParts((prevParts) => {\n        const index = prevParts.findIndex((p) => p.type === type);\n\n        // Ignore invalid part type or if value is unchanged\n        if (\n          index < 0 ||\n          prevParts[index].value === value ||\n          type === undefined\n        ) {\n          return prevParts;\n        }\n\n        // Clone the parts and update entry with new value\n        const newParts = [...prevParts];\n        newParts[index] = { type, value };\n        return newParts;\n      });\n    },\n    [],\n  );\n\n  const sharedProps = {\n    required: false,\n    disabled: isDisabled,\n    readOnly: isReadonly,\n    isCyclic: true,\n  };\n\n  const yearProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 4,\n    },\n    maxValue: 9999,\n    minValue: 0,\n    value: parseInt(parts.find((p) => p.type === 'year')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('year', value?.toString() ?? '');\n    },\n    'data-pattern': 'yyyy',\n  };\n\n  const monthProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: 12,\n    minValue: 1,\n    value: parseInt(parts.find((p) => p.type === 'month')?.value ?? '0'),\n    onChange: (value) => {\n      const formerValue = parseInt(\n        parts.find((p) => p.type === 'month')?.value ?? '0',\n      );\n      if (value !== formerValue) {\n        updatePart('month', value?.toString() ?? '');\n      }\n    },\n    'data-pattern': 'MM',\n  };\n\n  const dayProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: daysInMonth,\n    minValue: 1,\n    value: parseInt(parts.find((p) => p.type === 'day')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('day', value?.toString() ?? '');\n    },\n    'data-pattern': 'dd',\n  };\n\n  const hourProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: hasDayPeriod ? 12 : 23,\n    minValue: hasDayPeriod ? 1 : 0,\n    value: parseInt(parts.find((p) => p.type === 'hour')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('hour', value?.toString() ?? '');\n    },\n    'data-pattern': parts.find((p) => p.type === 'dayPeriod') ? 'hh' : 'HH',\n  };\n\n  const minuteProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: 59,\n    minValue: 0,\n    value: parseInt(parts.find((p) => p.type === 'minute')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('minute', value?.toString() ?? '');\n    },\n    'data-pattern': 'mm',\n  };\n\n  const secondsProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: 59,\n    minValue: 0,\n    value: parseInt(parts.find((p) => p.type === 'second')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('second', value?.toString() ?? '');\n    },\n    'data-pattern': 'ss',\n  };\n\n  const fractionalSecondProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 3,\n    },\n    maxValue: 999,\n    minValue: 0,\n    value: parseInt(\n      parts.find((p) => p.type === 'fractionalSecond')?.value ?? '0',\n    ),\n    onChange: (value) => {\n      updatePart('fractionalSecond', value?.toString() ?? '');\n    },\n    'data-pattern': 'SSS',\n  };\n\n  const dayPeriodProps: TextSpinButtonProps = {\n    ...sharedProps,\n    options: dayPeriodValues,\n    value: parts.find((p) => p.type === 'dayPeriod')?.value,\n    onChange: (value) => {\n      if (value === null) {\n        updatePart?.('dayPeriod', '');\n        return;\n      }\n      updatePart?.('dayPeriod', value);\n    },\n    'data-pattern': 'aa',\n  };\n\n  const { spinButtons, handlers } = useMemo(() => {\n    // Keep a map of all the imperative handlers per spinbutton\n    const handlers = new Map<\n      Intl.DateTimeFormatPartTypes,\n      SpinButtonHandler | null\n    >();\n\n    const setHandler = (\n      handler: SpinButtonHandler | null,\n      type: Intl.DateTimeFormatPart['type'],\n    ) => {\n      handlers?.set?.(type, handler);\n    };\n\n    // Create an array of preconfigured spinbuttons for each datetime part.\n    const spinButtons = parts.map(({ type, value }, index) => {\n      switch (type) {\n        case 'year':\n          return (\n            <SpinButtonGroup.Number\n              {...yearProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                yearProps.value !== undefined\n                  ? yearProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}year',\n                  id: 'nZk5lg177+CQcO/Z',\n                  description: 'The aria label for the year input of a date.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'yyyy',\n                id: 'c6bnAmHe/EY7/jQS',\n                description: 'The abbreviation of the year part of a date',\n              })}\n            />\n          );\n        case 'month':\n          return (\n            <SpinButtonGroup.Number\n              {...monthProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                monthProps.value !== undefined\n                  ? monthProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}month',\n                  id: 'LoBSMcHvTQEABp39',\n                  description: 'The aria label for the month input of a date.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'mm',\n                id: 'LnDfRkxwzq9Vq/up',\n                description: 'The abbreviation of the month part of a date',\n              })}\n            />\n          );\n        case 'day':\n          return (\n            <SpinButtonGroup.Number\n              {...dayProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                dayProps.value !== undefined ? dayProps.value : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}day',\n                  id: 'Dz8K7VMW5UFpwetG',\n                  description: 'The aria label for the day input of a date.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'dd',\n                id: 'akyhaFko0pgLR1Q5',\n                description: 'The abbreviation of the day part of a date',\n              })}\n            />\n          );\n        case 'hour':\n          return (\n            <SpinButtonGroup.Number\n              {...hourProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                hourProps.value !== undefined\n                  ? hourProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}hour',\n                  id: 'DXoXEb27LMuapbC4',\n                  description: 'The aria label for the hour input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'hh',\n                id: '8ioXZP1LdljRBssM',\n                description: 'The abbreviation of the hour part of a time',\n              })}\n            />\n          );\n        case 'minute':\n          return (\n            <SpinButtonGroup.Number\n              {...minuteProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                minuteProps.value !== undefined\n                  ? minuteProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}minute',\n                  id: 'pGR/6J+2uPcvCSju',\n                  description: 'The aria label for the minute input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'mm',\n                id: 'Uk/Q/HKAITavgOfU',\n                description: 'The abbreviation of the minute part of a time',\n              })}\n            />\n          );\n        case 'second':\n          return (\n            <SpinButtonGroup.Number\n              {...secondsProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                secondsProps.value !== undefined\n                  ? secondsProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}second',\n                  id: 'WD6kswCbAgSXwMnO',\n                  description: 'The aria label for the second input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'ss',\n                id: 'wnjOChhd1Lw9s9Gg',\n                description: 'The abbreviation of the second part of a time',\n              })}\n            />\n          );\n        case 'fractionalSecond':\n          return (\n            <SpinButtonGroup.Number\n              {...fractionalSecondProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                fractionalSecondProps.value !== undefined\n                  ? fractionalSecondProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}millisecond',\n                  id: 'wa4ct2vRPvqd0Uif',\n                  description:\n                    'The aria label for the millisecond input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'fff',\n                id: 'ZSJMoZevK9FVBtMR',\n                description:\n                  'The abbreviation of the fractional of a second part of a time',\n              })}\n            />\n          );\n        case 'dayPeriod':\n          return (\n            <SpinButtonGroup.Text\n              {...dayPeriodProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                dayPeriodProps.value !== undefined\n                  ? dayPeriodProps.value\n                  : value\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}day period',\n                  id: 'a9uVGc0cPE1OqAJj',\n                  description:\n                    'The aria label for the day period (am/pm) input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'aa',\n                id: '8I3jLlYKntZOjiy8',\n                description:\n                  'The abbreviation for the day period (am/pm) part of a time',\n              })}\n            />\n          );\n        case 'literal':\n          return isNil(value) ? null : (\n            // Show the whole literal but only use the first char as trigger.\n            <SpinButtonGroup.Separator\n              key={`${type}_${index}`}\n              trigger={value[0]}\n            >\n              {value}\n            </SpinButtonGroup.Separator>\n          );\n        default:\n          // For unknown part types, simply render the value as textnode in the DOM.\n          return value;\n      }\n    });\n\n    return { handlers, spinButtons };\n    // Do not recreate the spinbuttons on parts update. This prevents prefix issues when starting values with 0.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    isDisabled,\n    isReadonly,\n    updatePart,\n    daysInMonth,\n    hasDayPeriod,\n    parts.length,\n    yearProps.value,\n    monthProps.value,\n    dayProps.value,\n    hourProps.value,\n    minuteProps.value,\n    secondsProps.value,\n    fractionalSecondProps.value,\n    dayPeriodProps.value,\n  ]);\n\n  // Callback to push the given part values to the corresponding spinbuttons.\n  const updateParts = useCallback(\n    (updatedParts: Intl.DateTimeFormatPart[]) => {\n      const nonLiteralParts = updatedParts.filter(\n        ({ type }) => type !== 'literal',\n      );\n\n      const lookup = new Map(\n        nonLiteralParts.map(({ type, value }) => [type, value]),\n      );\n\n      // Apply the new values to the spinbuttons.\n      // Would not be necessary, if the spinbuttons would be controlled. But this is not possible because this\n      // interferes with the expected typing behavior for spinbuttons with format patterns like for this one used for the datetime parts.\n      nonLiteralParts.forEach((part) => {\n        const handler = handlers.get(part.type);\n        if (part.value === '') {\n          handler?.clearValue();\n        } else if (handler?.type === 'number') {\n          handler.applyText(part.value, true);\n        } else if (handler?.type === 'text') {\n          handler.searchValue(part.value[0], true);\n        }\n      });\n\n      // update the parts with new values\n      setParts((prevParts) => {\n        return prevParts.map((part) => {\n          const newValue = lookup.get(part.type);\n          return newValue !== undefined ? { ...part, value: newValue } : part;\n        });\n      });\n    },\n    [handlers],\n  );\n\n  // If the format, type or precision is changing, restore the prev. values when generating a set of new spinbuttons.\n  useEffect(() => {\n    setParts(() => (dateTime === null ? emptyParts : toParts(dateTime)));\n    // Need to update the parts on precision change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [emptyParts, toDateTime, toParts, precision]);\n\n  return {\n    spinButtons,\n    dateTime,\n    updateParts,\n    handlers,\n    parts,\n    toDateTime,\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { getDaysInMonth, isValid, startOfDay } from 'date-fns';\nimport { isNil } from 'lodash-es';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { getPlaceholder } from '../../../core/time/useDateTimeMessages.js';\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { replaceSecondFractions } from '../../forms-core/time/date-time.js';\nimport {\n  convertDateOnlyToDateTime,\n  getDayPeriodValues,\n} from '../../forms-core/time/helpers.js';\nimport { getTimeValue } from '../../forms-core/time/timeParser.js';\nimport { SpinButtonGroup } from '../../spin-buttons/spin-button-group/SpinButtonGroup.js';\nimport type { SpinButtonHandler } from '../../spin-buttons/spin-button-group/types.js';\nimport type { DateTimePickerProps } from '../types.js';\nimport { useDateTimeFormat } from './useDateTimeFormat.js';\nimport type { NumberSpinButtonProps } from '../../spin-buttons/number-spin-button/types.js';\nimport type { TextSpinButtonProps } from '../../spin-buttons/text-spin-button/types.js';\n/**\n * Returns a list of preconfigured spinbuttons for a given datetime and format configuration.\n */\nexport function useSpinButtons(\n  isoDateTime: TimeValue | string | null,\n  type: DateTimePickerProps['type'],\n  precision: DateTimePickerProps['precision'],\n  isDisabled: boolean,\n  isReadonly: boolean,\n  ariaLabelPrefix: string | undefined,\n  value?: TimeValue | string | null,\n) {\n  const intl = useIntl();\n  const prefix = ariaLabelPrefix ? `${ariaLabelPrefix} ` : '';\n\n  const { toParts, toDateTime, emptyParts } = useDateTimeFormat(\n    type,\n    precision,\n  );\n  const timeValue = useMemo(() => getTimeValue(isoDateTime), [isoDateTime]);\n  const dayPeriodValues = useMemo(() => getDayPeriodValues(), []);\n  const timezone = getTimezone();\n\n  const [parts, setParts] = useState(\n    timeValue !== null && timeValue !== undefined\n      ? toParts(\n          new TZDateMini(\n            convertDateOnlyToDateTime(timeValue.absoluteDate, type),\n            timezone,\n          ),\n        )\n      : emptyParts,\n  );\n  const hasDayPeriod = useMemo(\n    () => parts.some((p) => p.type === 'dayPeriod'),\n    [parts],\n  );\n\n  const precisionRef = useRef(precision);\n\n  const dateTime = useMemo(() => {\n    const newDateTime = toDateTime(parts);\n    if (!newDateTime || !isValid(newDateTime)) {\n      return newDateTime;\n    }\n\n    if (precision === precisionRef.current && precision === 'milliseconds') {\n      return newDateTime;\n    }\n\n    const date = new TZDateMini(\n      getTimeValue(value, precision)?.absoluteDate ??\n        startOfDay(TZDateMini.tz(timezone)).toISOString(),\n      timezone,\n    );\n    const milliseconds = date.getMilliseconds();\n    const seconds = date.getUTCSeconds();\n\n    if (\n      precision !== precisionRef.current ||\n      precision === 'minutes' ||\n      precision === undefined\n    ) {\n      newDateTime.setUTCSeconds(seconds);\n      precisionRef.current = precision;\n    }\n\n    return new TZDateMini(\n      replaceSecondFractions(\n        newDateTime.toISOString(),\n        milliseconds.toString(),\n      ),\n      timezone,\n    );\n  }, [toDateTime, parts, precision, value, timezone]);\n\n  const daysInMonth =\n    dateTime !== null && isValid(dateTime) ? getDaysInMonth(dateTime) : 31;\n\n  const updatePart = useCallback(\n    (type: Intl.DateTimeFormatPart['type'] | undefined, value: string) => {\n      setParts((prevParts) => {\n        const index = prevParts.findIndex((p) => p.type === type);\n\n        // Ignore invalid part type or if value is unchanged\n        if (\n          index < 0 ||\n          prevParts[index].value === value ||\n          type === undefined\n        ) {\n          return prevParts;\n        }\n\n        // Clone the parts and update entry with new value\n        const newParts = [...prevParts];\n        newParts[index] = { type, value };\n        return newParts;\n      });\n    },\n    [],\n  );\n\n  const sharedProps = {\n    required: false,\n    disabled: isDisabled,\n    readOnly: isReadonly,\n    isCyclic: true,\n  };\n\n  const yearProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 4,\n    },\n    maxValue: 9999,\n    minValue: 0,\n    value: parseInt(parts.find((p) => p.type === 'year')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('year', value?.toString() ?? '');\n    },\n    'data-pattern': 'yyyy',\n  };\n\n  const monthProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: 12,\n    minValue: 1,\n    value: parseInt(parts.find((p) => p.type === 'month')?.value ?? '0'),\n    onChange: (value) => {\n      const formerValue = parseInt(\n        parts.find((p) => p.type === 'month')?.value ?? '0',\n      );\n      if (value !== formerValue) {\n        updatePart('month', value?.toString() ?? '');\n      }\n    },\n    'data-pattern': 'MM',\n  };\n\n  const dayProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: daysInMonth,\n    minValue: 1,\n    value: parseInt(parts.find((p) => p.type === 'day')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('day', value?.toString() ?? '');\n    },\n    'data-pattern': 'dd',\n  };\n\n  const hourProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: hasDayPeriod ? 12 : 23,\n    minValue: hasDayPeriod ? 1 : 0,\n    value: parseInt(parts.find((p) => p.type === 'hour')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('hour', value?.toString() ?? '');\n    },\n    'data-pattern': parts.find((p) => p.type === 'dayPeriod') ? 'hh' : 'HH',\n  };\n\n  const minuteProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: 59,\n    minValue: 0,\n    value: parseInt(parts.find((p) => p.type === 'minute')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('minute', value?.toString() ?? '');\n    },\n    'data-pattern': 'mm',\n  };\n\n  const secondsProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: 59,\n    minValue: 0,\n    value: parseInt(parts.find((p) => p.type === 'second')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('second', value?.toString() ?? '');\n    },\n    'data-pattern': 'ss',\n  };\n\n  const fractionalSecondProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 3,\n    },\n    maxValue: 999,\n    minValue: 0,\n    value: parseInt(\n      parts.find((p) => p.type === 'fractionalSecond')?.value ?? '0',\n    ),\n    onChange: (value) => {\n      updatePart('fractionalSecond', value?.toString() ?? '');\n    },\n    'data-pattern': 'SSS',\n  };\n\n  const dayPeriodProps: TextSpinButtonProps = {\n    ...sharedProps,\n    options: dayPeriodValues,\n    value: parts.find((p) => p.type === 'dayPeriod')?.value,\n    onChange: (value) => {\n      if (value === null) {\n        updatePart?.('dayPeriod', '');\n        return;\n      }\n      updatePart?.('dayPeriod', value);\n    },\n    'data-pattern': 'aa',\n  };\n\n  const { spinButtons, handlers } = useMemo(() => {\n    // Keep a map of all the imperative handlers per spinbutton\n    const handlers = new Map<\n      Intl.DateTimeFormatPartTypes,\n      SpinButtonHandler | null\n    >();\n\n    const setHandler = (\n      handler: SpinButtonHandler | null,\n      type: Intl.DateTimeFormatPart['type'],\n    ) => {\n      handlers?.set?.(type, handler);\n    };\n\n    // Create an array of preconfigured spinbuttons for each datetime part.\n    const spinButtons = parts.map(({ type, value }, index) => {\n      switch (type) {\n        case 'year':\n          return (\n            <SpinButtonGroup.Number\n              {...yearProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                yearProps.value !== undefined\n                  ? yearProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}year',\n                  id: 'nZk5lg177+CQcO/Z',\n                  description: 'The aria label for the year input of a date.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'month':\n          return (\n            <SpinButtonGroup.Number\n              {...monthProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                monthProps.value !== undefined\n                  ? monthProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}month',\n                  id: 'LoBSMcHvTQEABp39',\n                  description: 'The aria label for the month input of a date.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'day':\n          return (\n            <SpinButtonGroup.Number\n              {...dayProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                dayProps.value !== undefined ? dayProps.value : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}day',\n                  id: 'Dz8K7VMW5UFpwetG',\n                  description: 'The aria label for the day input of a date.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'hour':\n          return (\n            <SpinButtonGroup.Number\n              {...hourProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                hourProps.value !== undefined\n                  ? hourProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}hour',\n                  id: 'DXoXEb27LMuapbC4',\n                  description: 'The aria label for the hour input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'minute':\n          return (\n            <SpinButtonGroup.Number\n              {...minuteProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                minuteProps.value !== undefined\n                  ? minuteProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}minute',\n                  id: 'pGR/6J+2uPcvCSju',\n                  description: 'The aria label for the minute input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'second':\n          return (\n            <SpinButtonGroup.Number\n              {...secondsProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                secondsProps.value !== undefined\n                  ? secondsProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}second',\n                  id: 'WD6kswCbAgSXwMnO',\n                  description: 'The aria label for the second input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'fractionalSecond':\n          return (\n            <SpinButtonGroup.Number\n              {...fractionalSecondProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                fractionalSecondProps.value !== undefined\n                  ? fractionalSecondProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}millisecond',\n                  id: 'wa4ct2vRPvqd0Uif',\n                  description:\n                    'The aria label for the millisecond input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'dayPeriod':\n          return (\n            <SpinButtonGroup.Text\n              {...dayPeriodProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                dayPeriodProps.value !== undefined\n                  ? dayPeriodProps.value\n                  : value\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}day period',\n                  id: 'a9uVGc0cPE1OqAJj',\n                  description:\n                    'The aria label for the day period (am/pm) input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              /* e.g. \"AM/PM\" - should be localized accordingly */\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'literal':\n          return isNil(value) ? null : (\n            // Show the whole literal but only use the first char as trigger.\n            <SpinButtonGroup.Separator\n              key={`${type}_${index}`}\n              trigger={value[0]}\n            >\n              {value}\n            </SpinButtonGroup.Separator>\n          );\n        default:\n          // For unknown part types, simply render the value as textnode in the DOM.\n          return value;\n      }\n    });\n\n    return { handlers, spinButtons };\n    // Do not recreate the spinbuttons on parts update. This prevents prefix issues when starting values with 0.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    isDisabled,\n    isReadonly,\n    updatePart,\n    daysInMonth,\n    hasDayPeriod,\n    parts.length,\n    yearProps.value,\n    monthProps.value,\n    dayProps.value,\n    hourProps.value,\n    minuteProps.value,\n    secondsProps.value,\n    fractionalSecondProps.value,\n    dayPeriodProps.value,\n  ]);\n\n  // Callback to push the given part values to the corresponding spinbuttons.\n  const updateParts = useCallback(\n    (updatedParts: Intl.DateTimeFormatPart[]) => {\n      const nonLiteralParts = updatedParts.filter(\n        ({ type }) => type !== 'literal',\n      );\n\n      const lookup = new Map(\n        nonLiteralParts.map(({ type, value }) => [type, value]),\n      );\n\n      // Apply the new values to the spinbuttons.\n      // Would not be necessary, if the spinbuttons would be controlled. But this is not possible because this\n      // interferes with the expected typing behavior for spinbuttons with format patterns like for this one used for the datetime parts.\n      nonLiteralParts.forEach((part) => {\n        const handler = handlers.get(part.type);\n        if (part.value === '') {\n          handler?.clearValue();\n        } else if (handler?.type === 'number') {\n          handler.applyText(part.value, true);\n        } else if (handler?.type === 'text') {\n          handler.searchValue(part.value[0], true);\n        }\n      });\n\n      // update the parts with new values\n      setParts((prevParts) => {\n        return prevParts.map((part) => {\n          const newValue = lookup.get(part.type);\n          return newValue !== undefined ? { ...part, value: newValue } : part;\n        });\n      });\n    },\n    [handlers],\n  );\n\n  // If the format, type or precision is changing, restore the prev. values when generating a set of new spinbuttons.\n  useEffect(() => {\n    setParts(() =>\n      dateTime === null || !isValid(dateTime) ? emptyParts : toParts(dateTime),\n    );\n    // Need to update the parts on precision change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [emptyParts, toDateTime, toParts, precision]);\n\n  return {\n    spinButtons,\n    dateTime,\n    updateParts,\n    handlers,\n    parts,\n    toDateTime,\n  };\n}\n"],
+  "mappings": "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",
   "names": ["type", "value", "handlers", "spinButtons"]
 }

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

@@ -1,8 +1,9 @@
-._1uftu980-3-3-3 {
+._1uftu980-3-4-1 {
   cursor: not-allowed;
-  background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  color: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  background: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1uftu981-3-3-3 {
+._1uftu981-3-4-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;