@dynatrace/strato-components 3.1.3 → 3.2.0

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

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

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

@@ -27,6 +27,8 @@ import {
   isEqualTimeValue,
   removePrecisionFromTimeValue
 } from "../date-time-range-picker/helpers.js";
+import { onTimeframeCopyCapture } from "../date-time-range-picker/selection-copy-helpers.js";
+import { useSelectionInteractionHandlers } from "../date-time-range-picker/useSelectionInteractionHandlers.js";
 import { InternalBaseItem } from "../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js";
 import { useDateTimeMessages } from "../forms-core/hooks/useDateTimeMessages.js";
 import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
@@ -188,6 +190,12 @@ const DateTimePicker = forwardRef((props, forwardedRef) => {
       dateInputRef.current.expressionInputRef.textContent = "";
     }
   }, [propValue]);
+  const { onMouseDown, onKeyDown } = useSelectionInteractionHandlers(
+    touchedContainerRef,
+    useCallback(() => {
+      focusDateTimeInput(null, dateInputRef);
+    }, [])
+  );
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -234,16 +242,14 @@ const DateTimePicker = forwardRef((props, forwardedRef) => {
                   ),
                   tabIndex: disabled ? void 0 : 0,
                   onBlur: onBlurTouched,
-                  onKeyDown: (e) => {
-                    if (e.target === touchedContainerRef.current) {
-                      focusDateTimeInput(null, dateInputRef);
-                    }
-                  },
+                  onMouseDown,
+                  onKeyDown,
                   onFocus: (e) => {
                     if (!rootRef.current?.contains(e.relatedTarget)) {
                       focusDateTimeInput(e, dateInputRef);
                     }
                   },
+                  onCopyCapture: onTimeframeCopyCapture,
                   children: /* @__PURE__ */ jsx(
                     DateTimeInput,
                     {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-picker/DateTimePicker.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  FocusEventHandler,\n  type FocusEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DateSelector } from './DateSelector.js';\nimport * as styles from './DateTimePicker.sty.js';\nimport type { DateSelectorRef, DateTimePickerProps } from './types.js';\nimport { focusDateTimeInput } from './utils/focusDateTimeInput.js';\nimport { getDateTimePickerError } from './utils/get-error-message.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { fieldColors as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { DateTimeInput } from '../date-time-range-picker/DateTimeInput.js';\nimport { dateTimeRangeCSS } from '../date-time-range-picker/DateTimeRangePicker.sty.js';\nimport {\n  isEqualTimeValue,\n  removePrecisionFromTimeValue,\n} from '../date-time-range-picker/helpers.js';\nimport type {\n  DateTimeError,\n  DateTimeInputRef,\n} from '../date-time-range-picker/types.js';\nimport { InternalBaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useDateTimeMessages } from '../forms-core/hooks/useDateTimeMessages.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { getErrorType } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useMinMaxLogger } from '../forms-core/hooks/useMinMaxLogger.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { convertDateOnlyToDateTime } from '../forms-core/time/helpers.js';\nimport { getTimeValue } from '../forms-core/time/timeParser.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlWithOverlayRef } from '../shared-types.js';\n\nconst COMPONENT_NAME = 'DateTimePicker';\n\n/**\n * Component to comfortably enter a date time value.\n * The `DateTimePicker` component automatically uses the user's settings for the\n * locale and timezone and formats the date and time accordingly.\n * @public\n */\nexport const DateTimePicker = forwardRef<\n  FormControlWithOverlayRef<HTMLSpanElement>,\n  DateTimePickerProps\n>((props, forwardedRef) => {\n  const {\n    id: propId,\n    disabled: propDisabled,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    readOnly = false,\n    required: propRequired,\n    'aria-disabled': ariaDisabledProp,\n    precision = 'minutes',\n    placeholder,\n    value: propValue,\n    defaultValue: propDefaultValue,\n    onChange,\n    min,\n    max,\n    name,\n    type = 'datetime',\n    controlState,\n    ...remainingProps\n  }: DateTimePickerProps = props;\n\n  // log to the sdk when min is larger than max.\n  useMinMaxLogger(min, max, 'DateTimePicker');\n\n  const touchedContainerRef = useRef<HTMLDivElement>(null);\n\n  const { state: formFieldState, dispatch: formFieldDispatch } =\n    useFormFieldMessagesContext();\n  const { showError: showFormFieldError } = formFieldState;\n\n  // Backwards compatibility for controlState.\n  const [hasFormControlError, hint] = useFormControlState(controlState);\n  // _useInputHint will be replaced with new validation concept. APPDEV-8298\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { hintProps } = useInputHint({\n    hint,\n    hasError: hasFormControlError,\n  });\n\n  const showError = hasFormControlError || showFormFieldError;\n\n  const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: ariaDisabledProp,\n  });\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const convertedPropValue = getTimeValue(propValue, precision, type);\n\n  const [internalValue, setInternalValue] = useState(\n    propValue\n      ? convertedPropValue\n      : getTimeValue(propDefaultValue, precision, type),\n  );\n  const [prevPropValue, setPrevPropValue] = useState(\n    getTimeValue(propValue, precision, type) ?? null,\n  );\n\n  if (\n    propValue !== '' &&\n    !isEqualTimeValue(convertedPropValue ?? null, prevPropValue)\n  ) {\n    setPrevPropValue(convertedPropValue ?? null);\n    setInternalValue(convertedPropValue);\n  }\n\n  const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n\n  const dateInputRef = useRef<DateTimeInputRef>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const dateSelectorRef = useRef<DateSelectorRef>(null);\n\n  // No need to show the calendar widget if only a time value can be entered.\n  const showDateSelector = type !== 'time';\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: true,\n    color: showError ? 'critical' : 'neutral',\n    disabled,\n  });\n\n  const intl = useIntl();\n  const calendarTriggerLabel = intl.formatMessage({\n    defaultMessage: 'Datepicker calendar trigger',\n    id: 'Uuc6xAAPyctyHamM',\n    description: 'Text shown for the datetimepicker calendar trigger.',\n  });\n\n  // Provide root and input element reference and functions to interact with the calendar overlay\n  useImperativeHandle(\n    forwardedRef,\n    (): FormControlWithOverlayRef<HTMLSpanElement> => ({\n      element: rootRef.current,\n      inputRef: dateInputRef.current?.inputRef,\n      triggerRef: dateInputRef.current?.inputRef,\n      open: () => dateSelectorRef.current?.open(),\n      close: () => dateSelectorRef.current?.close(),\n      focus() {\n        dateInputRef.current?.inputRef?.focus();\n      },\n      validate() {\n        dateInputRef.current?.validate();\n        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      },\n    }),\n    [formFieldDispatch],\n  );\n\n  // mark the component as touched, if the touchedRef container is losing the focus\n  const onBlurTouched: FocusEventHandler = useCallback(\n    (e) => {\n      if (!touchedContainerRef.current?.contains(e.relatedTarget)) {\n        //  always validate and show error on blur if there is any\n        dateInputRef.current?.validate();\n        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n    },\n    [formFieldDispatch],\n  );\n\n  const dateTimePickerErrorId = useId();\n  const { formatString } = useDateTimeMessages({ precision });\n\n  const handleDateTimeInputError = useCallback(\n    (error: DateTimeError) => {\n      // Remove old errors.\n      formFieldDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: dateTimePickerErrorId,\n          messageType: 'formcontrol',\n        },\n      });\n\n      if (error !== null && error !== 'valueMissing') {\n        // To avoid duplicate error messages for e.g. 'valueMissing', we try to get the\n        // validity key from the native input first and fall back to 'customError'.\n        const validityKey =\n          dateInputRef.current &&\n          getErrorType(dateInputRef.current.inputRef?.validity);\n\n        if (\n          !validityKey ||\n          (validityKey === 'valueMissing' && error === 'invalid')\n        ) {\n          formFieldDispatch?.({\n            type: FormFieldMessagesAction.ADDMESSAGE,\n            payload: {\n              id: dateTimePickerErrorId,\n              validityStateKey: 'customError',\n              variant: 'error',\n              message: getDateTimePickerError(\n                intl,\n                formatString,\n                error,\n                min,\n                max,\n                precision,\n              ),\n              messageType: 'formcontrol',\n            },\n          });\n        }\n      }\n    },\n    [\n      dateTimePickerErrorId,\n      formFieldDispatch,\n      formatString,\n      intl,\n      max,\n      min,\n      precision,\n    ],\n  );\n\n  // remove the textContent when the value is set to null.\n  useEffect(() => {\n    if (\n      propValue === null &&\n      dateInputRef.current?.expressionInputRef &&\n      dateInputRef.current.expressionInputRef.textContent !== ''\n    ) {\n      dateInputRef.current.expressionInputRef.textContent = '';\n    }\n  }, [propValue]);\n\n  return (\n    <Flex\n      gap={4}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={rootRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <InputGroup\n        className={clsx(\n          styles.dateTimePicker({\n            type,\n            disabled: disabledOrAriaDisabled,\n            showError,\n            readOnly,\n          }),\n        )}\n        style={{ gridAutoColumns: '1fr auto' }}\n      >\n        <div\n          ref={touchedContainerRef}\n          className={clsx(\n            fieldColorsCSS({\n              color: showError ? 'critical' : 'neutral',\n              disabled: disabledOrAriaDisabled,\n              variant: 'emphasized',\n            }),\n            dateTimeRangeCSS({\n              showError,\n              disabled: disabledOrAriaDisabled,\n              readOnly,\n            }),\n            focusClassName,\n            inputGroupClassName,\n          )}\n          tabIndex={disabled ? undefined : 0}\n          onBlur={onBlurTouched}\n          onKeyDown={(e: ReactKeyboardEvent) => {\n            // Forward the focus when a key is pressed in this element.\n            if (e.target === touchedContainerRef.current) {\n              focusDateTimeInput(null, dateInputRef);\n            }\n          }}\n          onFocus={(e: FocusEvent) => {\n            // Forward the focus only if it is coming from outside this component.\n            // Focus the first spin button with textContent; otherwise, focus the input.\n            if (!rootRef.current?.contains(e.relatedTarget)) {\n              focusDateTimeInput(e, dateInputRef);\n            }\n          }}\n        >\n          <DateTimeInput\n            ref={dateInputRef}\n            id={id}\n            type={type}\n            precision={precision}\n            disabled={disabled}\n            readOnly={readOnly}\n            placeholder={placeholder}\n            name={name}\n            value={internalValue}\n            onChange={(value) => {\n              if (typeof value === 'string') {\n                onChange?.(value);\n                return;\n              }\n\n              // Call onChange for null only when the textContent is empty.\n              if (\n                value !== null ||\n                dateInputRef.current?.expressionInputRef?.textContent === ''\n              ) {\n                onChange?.(\n                  removePrecisionFromTimeValue(\n                    value,\n                    type === 'date' ? 'day' : precision,\n                  ),\n                );\n              }\n\n              setInternalValue(getTimeValue(value, precision, type));\n            }}\n            {...ariaLabelingProps}\n            aria-disabled={ariaDisabled}\n            min={min}\n            max={max}\n            required={required}\n            onError={handleDateTimeInputError}\n            controlId={id}\n            controlState={controlState}\n          />\n        </div>\n        {showDateSelector && (\n          <DateSelector\n            ref={dateSelectorRef}\n            value={convertDateOnlyToDateTime(internalValue?.value, type)}\n            onChange={(value) => {\n              const timeValue = getTimeValue(value, precision, type);\n              setInternalValue(timeValue);\n\n              if (timeValue?.type === 'expression') {\n                onChange?.(timeValue);\n              }\n\n              requestAnimationFrame(() => {\n                focusDateTimeInput(null, dateInputRef);\n              });\n            }}\n            aria-label={calendarTriggerLabel}\n            aria-disabled={ariaDisabled}\n            min={min}\n            max={max}\n            precision={precision}\n            readOnly={readOnly}\n            disabled={!!disabled}\n            error={showError}\n            className={clsx(styles.dateSelector, inputGroupClassName)}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          />\n        )}\n      </InputGroup>\n      {hint && (\n        <InternalBaseItem\n          variant={hasFormControlError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </InternalBaseItem>\n      )}\n    </Flex>\n  );\n});\n\n(\n  DateTimePicker as typeof DateTimePicker & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  FocusEventHandler,\n  type FocusEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DateSelector } from './DateSelector.js';\nimport * as styles from './DateTimePicker.sty.js';\nimport type { DateSelectorRef, DateTimePickerProps } from './types.js';\nimport { focusDateTimeInput } from './utils/focusDateTimeInput.js';\nimport { getDateTimePickerError } from './utils/get-error-message.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { fieldColors as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { DateTimeInput } from '../date-time-range-picker/DateTimeInput.js';\nimport { dateTimeRangeCSS } from '../date-time-range-picker/DateTimeRangePicker.sty.js';\nimport {\n  isEqualTimeValue,\n  removePrecisionFromTimeValue,\n} from '../date-time-range-picker/helpers.js';\nimport { onTimeframeCopyCapture } from '../date-time-range-picker/selection-copy-helpers.js';\nimport type {\n  DateTimeError,\n  DateTimeInputRef,\n} from '../date-time-range-picker/types.js';\nimport { useSelectionInteractionHandlers } from '../date-time-range-picker/useSelectionInteractionHandlers.js';\nimport { InternalBaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useDateTimeMessages } from '../forms-core/hooks/useDateTimeMessages.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { getErrorType } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useMinMaxLogger } from '../forms-core/hooks/useMinMaxLogger.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { convertDateOnlyToDateTime } from '../forms-core/time/helpers.js';\nimport { getTimeValue } from '../forms-core/time/timeParser.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlWithOverlayRef } from '../shared-types.js';\n\nconst COMPONENT_NAME = 'DateTimePicker';\n\n/**\n * Component to comfortably enter a date time value.\n * The `DateTimePicker` component automatically uses the user's settings for the\n * locale and timezone and formats the date and time accordingly.\n * @public\n */\nexport const DateTimePicker = forwardRef<\n  FormControlWithOverlayRef<HTMLSpanElement>,\n  DateTimePickerProps\n>((props, forwardedRef) => {\n  const {\n    id: propId,\n    disabled: propDisabled,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    readOnly = false,\n    required: propRequired,\n    'aria-disabled': ariaDisabledProp,\n    precision = 'minutes',\n    placeholder,\n    value: propValue,\n    defaultValue: propDefaultValue,\n    onChange,\n    min,\n    max,\n    name,\n    type = 'datetime',\n    controlState,\n    ...remainingProps\n  }: DateTimePickerProps = props;\n\n  // log to the sdk when min is larger than max.\n  useMinMaxLogger(min, max, 'DateTimePicker');\n\n  const touchedContainerRef = useRef<HTMLDivElement>(null);\n\n  const { state: formFieldState, dispatch: formFieldDispatch } =\n    useFormFieldMessagesContext();\n  const { showError: showFormFieldError } = formFieldState;\n\n  // Backwards compatibility for controlState.\n  const [hasFormControlError, hint] = useFormControlState(controlState);\n  // _useInputHint will be replaced with new validation concept. APPDEV-8298\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { hintProps } = useInputHint({\n    hint,\n    hasError: hasFormControlError,\n  });\n\n  const showError = hasFormControlError || showFormFieldError;\n\n  const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: ariaDisabledProp,\n  });\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const convertedPropValue = getTimeValue(propValue, precision, type);\n\n  const [internalValue, setInternalValue] = useState(\n    propValue\n      ? convertedPropValue\n      : getTimeValue(propDefaultValue, precision, type),\n  );\n  const [prevPropValue, setPrevPropValue] = useState(\n    getTimeValue(propValue, precision, type) ?? null,\n  );\n\n  if (\n    propValue !== '' &&\n    !isEqualTimeValue(convertedPropValue ?? null, prevPropValue)\n  ) {\n    setPrevPropValue(convertedPropValue ?? null);\n    setInternalValue(convertedPropValue);\n  }\n\n  const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n\n  const dateInputRef = useRef<DateTimeInputRef>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const dateSelectorRef = useRef<DateSelectorRef>(null);\n\n  // No need to show the calendar widget if only a time value can be entered.\n  const showDateSelector = type !== 'time';\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: true,\n    color: showError ? 'critical' : 'neutral',\n    disabled,\n  });\n\n  const intl = useIntl();\n  const calendarTriggerLabel = intl.formatMessage({\n    defaultMessage: 'Datepicker calendar trigger',\n    id: 'Uuc6xAAPyctyHamM',\n    description: 'Text shown for the datetimepicker calendar trigger.',\n  });\n\n  // Provide root and input element reference and functions to interact with the calendar overlay\n  useImperativeHandle(\n    forwardedRef,\n    (): FormControlWithOverlayRef<HTMLSpanElement> => ({\n      element: rootRef.current,\n      inputRef: dateInputRef.current?.inputRef,\n      triggerRef: dateInputRef.current?.inputRef,\n      open: () => dateSelectorRef.current?.open(),\n      close: () => dateSelectorRef.current?.close(),\n      focus() {\n        dateInputRef.current?.inputRef?.focus();\n      },\n      validate() {\n        dateInputRef.current?.validate();\n        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      },\n    }),\n    [formFieldDispatch],\n  );\n\n  // mark the component as touched, if the touchedRef container is losing the focus\n  const onBlurTouched: FocusEventHandler = useCallback(\n    (e) => {\n      if (!touchedContainerRef.current?.contains(e.relatedTarget)) {\n        //  always validate and show error on blur if there is any\n        dateInputRef.current?.validate();\n        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n    },\n    [formFieldDispatch],\n  );\n\n  const dateTimePickerErrorId = useId();\n  const { formatString } = useDateTimeMessages({ precision });\n\n  const handleDateTimeInputError = useCallback(\n    (error: DateTimeError) => {\n      // Remove old errors.\n      formFieldDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: dateTimePickerErrorId,\n          messageType: 'formcontrol',\n        },\n      });\n\n      if (error !== null && error !== 'valueMissing') {\n        // To avoid duplicate error messages for e.g. 'valueMissing', we try to get the\n        // validity key from the native input first and fall back to 'customError'.\n        const validityKey =\n          dateInputRef.current &&\n          getErrorType(dateInputRef.current.inputRef?.validity);\n\n        if (\n          !validityKey ||\n          (validityKey === 'valueMissing' && error === 'invalid')\n        ) {\n          formFieldDispatch?.({\n            type: FormFieldMessagesAction.ADDMESSAGE,\n            payload: {\n              id: dateTimePickerErrorId,\n              validityStateKey: 'customError',\n              variant: 'error',\n              message: getDateTimePickerError(\n                intl,\n                formatString,\n                error,\n                min,\n                max,\n                precision,\n              ),\n              messageType: 'formcontrol',\n            },\n          });\n        }\n      }\n    },\n    [\n      dateTimePickerErrorId,\n      formFieldDispatch,\n      formatString,\n      intl,\n      max,\n      min,\n      precision,\n    ],\n  );\n\n  // remove the textContent when the value is set to null.\n  useEffect(() => {\n    if (\n      propValue === null &&\n      dateInputRef.current?.expressionInputRef &&\n      dateInputRef.current.expressionInputRef.textContent !== ''\n    ) {\n      dateInputRef.current.expressionInputRef.textContent = '';\n    }\n  }, [propValue]);\n\n  const { onMouseDown, onKeyDown } = useSelectionInteractionHandlers(\n    touchedContainerRef,\n    useCallback(() => {\n      focusDateTimeInput(null, dateInputRef);\n    }, []),\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            fieldColorsCSS({\n              color: showError ? 'critical' : 'neutral',\n              disabled: disabledOrAriaDisabled,\n              variant: 'emphasized',\n            }),\n            dateTimeRangeCSS({\n              showError,\n              disabled: disabledOrAriaDisabled,\n              readOnly,\n            }),\n            focusClassName,\n            inputGroupClassName,\n          )}\n          tabIndex={disabled ? undefined : 0}\n          onBlur={onBlurTouched}\n          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            precision={precision}\n            disabled={disabled}\n            readOnly={readOnly}\n            placeholder={placeholder}\n            name={name}\n            value={internalValue}\n            onChange={(value) => {\n              if (typeof value === 'string') {\n                onChange?.(value);\n                return;\n              }\n\n              // Call onChange for null only when the textContent is empty.\n              if (\n                value !== null ||\n                dateInputRef.current?.expressionInputRef?.textContent === ''\n              ) {\n                onChange?.(\n                  removePrecisionFromTimeValue(\n                    value,\n                    type === 'date' ? 'day' : precision,\n                  ),\n                );\n              }\n\n              setInternalValue(getTimeValue(value, precision, type));\n            }}\n            {...ariaLabelingProps}\n            aria-disabled={ariaDisabled}\n            min={min}\n            max={max}\n            required={required}\n            onError={handleDateTimeInputError}\n            controlId={id}\n            controlState={controlState}\n          />\n        </div>\n        {showDateSelector && (\n          <DateSelector\n            ref={dateSelectorRef}\n            value={convertDateOnlyToDateTime(internalValue?.value, type)}\n            onChange={(value) => {\n              const timeValue = getTimeValue(value, precision, type);\n              setInternalValue(timeValue);\n\n              if (timeValue?.type === 'expression') {\n                onChange?.(timeValue);\n              }\n\n              requestAnimationFrame(() => {\n                focusDateTimeInput(null, dateInputRef);\n              });\n            }}\n            aria-label={calendarTriggerLabel}\n            aria-disabled={ariaDisabled}\n            min={min}\n            max={max}\n            precision={precision}\n            readOnly={readOnly}\n            disabled={!!disabled}\n            error={showError}\n            className={clsx(styles.dateSelector, inputGroupClassName)}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          />\n        )}\n      </InputGroup>\n      {hint && (\n        <InternalBaseItem\n          variant={hasFormControlError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </InternalBaseItem>\n      )}\n    </Flex>\n  );\n});\n\n(\n  DateTimePicker as typeof DateTimePicker & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

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

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

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

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

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

@@ -94,7 +94,8 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
     value: parseInt(parts.find((p) => p.type === "year")?.value ?? "0"),
     onChange: (value2) => {
       updatePart("year", value2?.toString() ?? "");
-    }
+    },
+    "data-pattern": "yyyy"
   };
   const monthProps = {
     ...sharedProps,
@@ -111,7 +112,8 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
       if (value2 !== formerValue) {
         updatePart("month", value2?.toString() ?? "");
       }
-    }
+    },
+    "data-pattern": "MM"
   };
   const dayProps = {
     ...sharedProps,
@@ -123,7 +125,8 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
     value: parseInt(parts.find((p) => p.type === "day")?.value ?? "0"),
     onChange: (value2) => {
       updatePart("day", value2?.toString() ?? "");
-    }
+    },
+    "data-pattern": "dd"
   };
   const hourProps = {
     ...sharedProps,
@@ -135,7 +138,8 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
     value: parseInt(parts.find((p) => p.type === "hour")?.value ?? "0"),
     onChange: (value2) => {
       updatePart("hour", value2?.toString() ?? "");
-    }
+    },
+    "data-pattern": parts.find((p) => p.type === "dayPeriod") ? "hh" : "HH"
   };
   const minuteProps = {
     ...sharedProps,
@@ -147,7 +151,8 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
     value: parseInt(parts.find((p) => p.type === "minute")?.value ?? "0"),
     onChange: (value2) => {
       updatePart("minute", value2?.toString() ?? "");
-    }
+    },
+    "data-pattern": "mm"
   };
   const secondsProps = {
     ...sharedProps,
@@ -159,7 +164,8 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
     value: parseInt(parts.find((p) => p.type === "second")?.value ?? "0"),
     onChange: (value2) => {
       updatePart("second", value2?.toString() ?? "");
-    }
+    },
+    "data-pattern": "ss"
   };
   const fractionalSecondProps = {
     ...sharedProps,
@@ -173,7 +179,8 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
     ),
     onChange: (value2) => {
       updatePart("fractionalSecond", value2?.toString() ?? "");
-    }
+    },
+    "data-pattern": "SSS"
   };
   const dayPeriodProps = {
     ...sharedProps,
@@ -185,7 +192,8 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
         return;
       }
       updatePart?.("dayPeriod", value2);
-    }
+    },
+    "data-pattern": "aa"
   };
   const { spinButtons, handlers } = useMemo(() => {
     const handlers2 = /* @__PURE__ */ new Map();

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, type)?.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  };\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  };\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  };\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  };\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  };\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  };\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  };\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  };\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 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, type)?.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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",
   "names": ["type", "value", "handlers", "spinButtons"]
 }

package/esm/forms/date-time-picker/utils/focusDateTimeInput.js

@@ -76,7 +76,16 @@ const focusDateTimeInput = (event, refFrom, refTo) => {
   }
   refFrom?.current?.expressionInputRef?.focus();
 };
+const focusTimeInput = (dateTimeFromRef) => {
+  const hourElement = dateTimeFromRef.current?.spinButtonHandlers.get("hour")?.element.current;
+  if (hourElement) {
+    hourElement.focus();
+    return;
+  }
+  focusDateTimeInput(null, dateTimeFromRef);
+};
 export {
-  focusDateTimeInput
+  focusDateTimeInput,
+  focusTimeInput
 };
 //# sourceMappingURL=focusDateTimeInput.js.map

package/esm/forms/date-time-picker/utils/focusDateTimeInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/date-time-picker/utils/focusDateTimeInput.ts"],
-  "sourcesContent": ["import {\n  type RefObject,\n  type FocusEvent as ReactFocusEvent,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport { type DateTimeInputRef } from '../../date-time-range-picker/types.js';\nimport type { SpinButtonHandler } from '../../spin-buttons/spin-button-group/types.js';\n\n/*\n * Handles the focus event within 'DateTimeInput' components.\n * Moving the focus to the `DateTimeInput` focuses the 'to input' or the first empty spin button.\n * If everything is empty focus the 'from input'.\n * If the target element is one of the spin buttons or expression, the focus is not redirected.\n * @internal\n */\nexport const focusDateTimeInput = (\n  event: ReactFocusEvent | ReactMouseEvent | null,\n  refFrom: RefObject<DateTimeInputRef | null>,\n  refTo?: RefObject<DateTimeInputRef | null>,\n) => {\n  const spinButtonHandlersTo = refTo?.current?.spinButtonHandlers;\n  const spinButtonHandlersFrom = refFrom?.current?.spinButtonHandlers;\n\n  /** Check if the target element is one of the spin buttons or expression. */\n  const isTargetValid = (target: EventTarget | undefined) => {\n    const spinButtonsFrom = Array.from(\n      spinButtonHandlersTo?.values() || [],\n    ).map((handler) => handler?.element.current);\n    const spinButtonsTo = Array.from(\n      spinButtonHandlersFrom?.values() || [],\n    ).map((handler) => handler?.element.current);\n\n    const allSpinButtons = [\n      ...spinButtonsFrom,\n      ...spinButtonsTo,\n      ...[refTo?.current?.expressionInputRef],\n      ...[refFrom?.current?.expressionInputRef],\n    ];\n\n    return (\n      target !== undefined && allSpinButtons.includes(target as HTMLSpanElement)\n    );\n  };\n\n  /**\n   * Checks if any spin button in the provided handlers is empty (has no textContent).\n   * Returns false if all spin buttons are empty or none are empty.\n   */\n  const isAnySpinButtonEmpty = (\n    handlers:\n      | Map<Intl.DateTimeFormatPartTypes, SpinButtonHandler | null>\n      | undefined,\n  ): boolean => {\n    if (!handlers) {\n      return false;\n    }\n\n    let hasEmpty = false;\n    let allEmpty = true;\n\n    for (const [, handler] of handlers) {\n      const textContent = handler?.element.current?.textContent;\n      if (textContent === '') {\n        hasEmpty = true;\n      } else {\n        allEmpty = false;\n      }\n    }\n\n    return hasEmpty && !allEmpty;\n  };\n\n  /**\n   * Find the first spin button or the first empty one.\n   */\n  const findLastEntryWithTextContent = (\n    handlers:\n      | Map<Intl.DateTimeFormatPartTypes, SpinButtonHandler | null>\n      | undefined,\n  ) => {\n    if (!handlers) {\n      return null;\n    }\n\n    let firstSpinButtonHandler: SpinButtonHandler | null = null;\n\n    for (const [, handler] of handlers) {\n      if (!firstSpinButtonHandler) {\n        firstSpinButtonHandler = handler;\n      }\n      if (!handler?.element.current?.textContent) {\n        firstSpinButtonHandler = handler;\n        break;\n      }\n    }\n\n    return firstSpinButtonHandler;\n  };\n\n  if (isTargetValid(event?.target)) {\n    return;\n  }\n\n  const emptyToSpinButton = isAnySpinButtonEmpty(spinButtonHandlersTo);\n  const emptyFromSpinButton = isAnySpinButtonEmpty(spinButtonHandlersFrom);\n\n  const firstFromSpinButtonHandler = findLastEntryWithTextContent(\n    spinButtonHandlersFrom,\n  );\n  const firstToSpinButtonHandler =\n    findLastEntryWithTextContent(spinButtonHandlersTo);\n\n  // Focus the 'to spin buttons', when they have at least one empty.\n  if (emptyToSpinButton && !emptyFromSpinButton) {\n    const firstToSpinButtonHandler =\n      findLastEntryWithTextContent(spinButtonHandlersTo);\n    if (firstToSpinButtonHandler) {\n      firstToSpinButtonHandler?.element.current?.focus();\n      return;\n    }\n  }\n\n  // Focus the 'from spin buttons' when they have at least one empty or when 'to input' is filled.\n  if (\n    emptyFromSpinButton ||\n    (firstFromSpinButtonHandler?.element.current?.textContent !== '' &&\n      (refTo?.current?.expressionInputRef?.textContent !== '' ||\n        firstToSpinButtonHandler?.element.current?.textContent !== ''))\n  ) {\n    if (firstFromSpinButtonHandler) {\n      firstFromSpinButtonHandler?.element.current?.focus();\n      return;\n    }\n  }\n\n  // Focus the 'to expression input' when 'from expression input' is filled and 'to input is empty'.\n  if (\n    refFrom?.current?.expressionInputRef?.textContent !== '' &&\n    refTo?.current?.expressionInputRef?.textContent === '' &&\n    firstToSpinButtonHandler?.element.current?.textContent === ''\n  ) {\n    refTo?.current?.expressionInputRef?.focus?.();\n    return;\n  }\n\n  // Focus the 'from expression input'.\n  refFrom?.current?.expressionInputRef?.focus();\n};\n"],
-  "mappings": "AAgBO,MAAM,qBAAqB,CAChC,OACA,SACA,UACG;AACH,QAAM,uBAAuB,OAAO,SAAS;AAC7C,QAAM,yBAAyB,SAAS,SAAS;AAGjD,QAAM,gBAAgB,CAAC,WAAoC;AACzD,UAAM,kBAAkB,MAAM;AAAA,MAC5B,sBAAsB,OAAO,KAAK,CAAC;AAAA,IACrC,EAAE,IAAI,CAAC,YAAY,SAAS,QAAQ,OAAO;AAC3C,UAAM,gBAAgB,MAAM;AAAA,MAC1B,wBAAwB,OAAO,KAAK,CAAC;AAAA,IACvC,EAAE,IAAI,CAAC,YAAY,SAAS,QAAQ,OAAO;AAE3C,UAAM,iBAAiB;AAAA,MACrB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG,CAAC,OAAO,SAAS,kBAAkB;AAAA,MACtC,GAAG,CAAC,SAAS,SAAS,kBAAkB;AAAA,IAC1C;AAEA,WACE,WAAW,UAAa,eAAe,SAAS,MAAyB;AAAA,EAE7E;AAMA,QAAM,uBAAuB,CAC3B,aAGY;AACZ,QAAI,CAAC,UAAU;AACb,aAAO;AAAA,IACT;AAEA,QAAI,WAAW;AACf,QAAI,WAAW;AAEf,eAAW,CAAC,EAAE,OAAO,KAAK,UAAU;AAClC,YAAM,cAAc,SAAS,QAAQ,SAAS;AAC9C,UAAI,gBAAgB,IAAI;AACtB,mBAAW;AAAA,MACb,OAAO;AACL,mBAAW;AAAA,MACb;AAAA,IACF;AAEA,WAAO,YAAY,CAAC;AAAA,EACtB;AAKA,QAAM,+BAA+B,CACnC,aAGG;AACH,QAAI,CAAC,UAAU;AACb,aAAO;AAAA,IACT;AAEA,QAAI,yBAAmD;AAEvD,eAAW,CAAC,EAAE,OAAO,KAAK,UAAU;AAClC,UAAI,CAAC,wBAAwB;AAC3B,iCAAyB;AAAA,MAC3B;AACA,UAAI,CAAC,SAAS,QAAQ,SAAS,aAAa;AAC1C,iCAAyB;AACzB;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAEA,MAAI,cAAc,OAAO,MAAM,GAAG;AAChC;AAAA,EACF;AAEA,QAAM,oBAAoB,qBAAqB,oBAAoB;AACnE,QAAM,sBAAsB,qBAAqB,sBAAsB;AAEvE,QAAM,6BAA6B;AAAA,IACjC;AAAA,EACF;AACA,QAAM,2BACJ,6BAA6B,oBAAoB;AAGnD,MAAI,qBAAqB,CAAC,qBAAqB;AAC7C,UAAMA,4BACJ,6BAA6B,oBAAoB;AACnD,QAAIA,2BAA0B;AAC5B,MAAAA,2BAA0B,QAAQ,SAAS,MAAM;AACjD;AAAA,IACF;AAAA,EACF;AAGA,MACE,uBACC,4BAA4B,QAAQ,SAAS,gBAAgB,OAC3D,OAAO,SAAS,oBAAoB,gBAAgB,MACnD,0BAA0B,QAAQ,SAAS,gBAAgB,KAC/D;AACA,QAAI,4BAA4B;AAC9B,kCAA4B,QAAQ,SAAS,MAAM;AACnD;AAAA,IACF;AAAA,EACF;AAGA,MACE,SAAS,SAAS,oBAAoB,gBAAgB,MACtD,OAAO,SAAS,oBAAoB,gBAAgB,MACpD,0BAA0B,QAAQ,SAAS,gBAAgB,IAC3D;AACA,WAAO,SAAS,oBAAoB,QAAQ;AAC5C;AAAA,EACF;AAGA,WAAS,SAAS,oBAAoB,MAAM;AAC9C;",
+  "sourcesContent": ["import {\n  type RefObject,\n  type FocusEvent as ReactFocusEvent,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport { type DateTimeInputRef } from '../../date-time-range-picker/types.js';\nimport type { SpinButtonHandler } from '../../spin-buttons/spin-button-group/types.js';\n\n/*\n * Handles the focus event within 'DateTimeInput' components.\n * Moving the focus to the `DateTimeInput` focuses the 'to input' or the first empty spin button.\n * If everything is empty focus the 'from input'.\n * If the target element is one of the spin buttons or expression, the focus is not redirected.\n * @internal\n */\nexport const focusDateTimeInput = (\n  event: ReactFocusEvent | ReactMouseEvent | null,\n  refFrom: RefObject<DateTimeInputRef | null>,\n  refTo?: RefObject<DateTimeInputRef | null>,\n) => {\n  const spinButtonHandlersTo = refTo?.current?.spinButtonHandlers;\n  const spinButtonHandlersFrom = refFrom?.current?.spinButtonHandlers;\n\n  /** Check if the target element is one of the spin buttons or expression. */\n  const isTargetValid = (target: EventTarget | undefined) => {\n    const spinButtonsFrom = Array.from(\n      spinButtonHandlersTo?.values() || [],\n    ).map((handler) => handler?.element.current);\n    const spinButtonsTo = Array.from(\n      spinButtonHandlersFrom?.values() || [],\n    ).map((handler) => handler?.element.current);\n\n    const allSpinButtons = [\n      ...spinButtonsFrom,\n      ...spinButtonsTo,\n      ...[refTo?.current?.expressionInputRef],\n      ...[refFrom?.current?.expressionInputRef],\n    ];\n\n    return (\n      target !== undefined && allSpinButtons.includes(target as HTMLSpanElement)\n    );\n  };\n\n  /**\n   * Checks if any spin button in the provided handlers is empty (has no textContent).\n   * Returns false if all spin buttons are empty or none are empty.\n   */\n  const isAnySpinButtonEmpty = (\n    handlers:\n      | Map<Intl.DateTimeFormatPartTypes, SpinButtonHandler | null>\n      | undefined,\n  ): boolean => {\n    if (!handlers) {\n      return false;\n    }\n\n    let hasEmpty = false;\n    let allEmpty = true;\n\n    for (const [, handler] of handlers) {\n      const textContent = handler?.element.current?.textContent;\n      if (textContent === '') {\n        hasEmpty = true;\n      } else {\n        allEmpty = false;\n      }\n    }\n\n    return hasEmpty && !allEmpty;\n  };\n\n  /**\n   * Find the first spin button or the first empty one.\n   */\n  const findLastEntryWithTextContent = (\n    handlers:\n      | Map<Intl.DateTimeFormatPartTypes, SpinButtonHandler | null>\n      | undefined,\n  ) => {\n    if (!handlers) {\n      return null;\n    }\n\n    let firstSpinButtonHandler: SpinButtonHandler | null = null;\n\n    for (const [, handler] of handlers) {\n      if (!firstSpinButtonHandler) {\n        firstSpinButtonHandler = handler;\n      }\n      if (!handler?.element.current?.textContent) {\n        firstSpinButtonHandler = handler;\n        break;\n      }\n    }\n\n    return firstSpinButtonHandler;\n  };\n\n  if (isTargetValid(event?.target)) {\n    return;\n  }\n\n  const emptyToSpinButton = isAnySpinButtonEmpty(spinButtonHandlersTo);\n  const emptyFromSpinButton = isAnySpinButtonEmpty(spinButtonHandlersFrom);\n\n  const firstFromSpinButtonHandler = findLastEntryWithTextContent(\n    spinButtonHandlersFrom,\n  );\n  const firstToSpinButtonHandler =\n    findLastEntryWithTextContent(spinButtonHandlersTo);\n\n  // Focus the 'to spin buttons', when they have at least one empty.\n  if (emptyToSpinButton && !emptyFromSpinButton) {\n    const firstToSpinButtonHandler =\n      findLastEntryWithTextContent(spinButtonHandlersTo);\n    if (firstToSpinButtonHandler) {\n      firstToSpinButtonHandler?.element.current?.focus();\n      return;\n    }\n  }\n\n  // Focus the 'from spin buttons' when they have at least one empty or when 'to input' is filled.\n  if (\n    emptyFromSpinButton ||\n    (firstFromSpinButtonHandler?.element.current?.textContent !== '' &&\n      (refTo?.current?.expressionInputRef?.textContent !== '' ||\n        firstToSpinButtonHandler?.element.current?.textContent !== ''))\n  ) {\n    if (firstFromSpinButtonHandler) {\n      firstFromSpinButtonHandler?.element.current?.focus();\n      return;\n    }\n  }\n\n  // Focus the 'to expression input' when 'from expression input' is filled and 'to input is empty'.\n  if (\n    refFrom?.current?.expressionInputRef?.textContent !== '' &&\n    refTo?.current?.expressionInputRef?.textContent === '' &&\n    firstToSpinButtonHandler?.element.current?.textContent === ''\n  ) {\n    refTo?.current?.expressionInputRef?.focus?.();\n    return;\n  }\n\n  // Focus the 'from expression input'.\n  refFrom?.current?.expressionInputRef?.focus();\n};\n\n/**\n * Attempts to move the focus to the \"hour\" spin button of the \"from\" input.\n * The hour spin button is only foucsable if the value is an absolute timeframe (ISO 8601)\n * and not an expression. If focus is not possible, falls back to {@link focusDateTimeInput}.\n * @param dateTimeFromRef - the ref of the \"from\" DateTimeInput component\n * @internal\n */\nexport const focusTimeInput = (\n  dateTimeFromRef: RefObject<DateTimeInputRef | null>,\n): void => {\n  const hourElement =\n    dateTimeFromRef.current?.spinButtonHandlers.get('hour')?.element.current;\n  if (hourElement) {\n    hourElement.focus();\n    return;\n  }\n  focusDateTimeInput(null, dateTimeFromRef);\n};\n"],
+  "mappings": "AAgBO,MAAM,qBAAqB,CAChC,OACA,SACA,UACG;AACH,QAAM,uBAAuB,OAAO,SAAS;AAC7C,QAAM,yBAAyB,SAAS,SAAS;AAGjD,QAAM,gBAAgB,CAAC,WAAoC;AACzD,UAAM,kBAAkB,MAAM;AAAA,MAC5B,sBAAsB,OAAO,KAAK,CAAC;AAAA,IACrC,EAAE,IAAI,CAAC,YAAY,SAAS,QAAQ,OAAO;AAC3C,UAAM,gBAAgB,MAAM;AAAA,MAC1B,wBAAwB,OAAO,KAAK,CAAC;AAAA,IACvC,EAAE,IAAI,CAAC,YAAY,SAAS,QAAQ,OAAO;AAE3C,UAAM,iBAAiB;AAAA,MACrB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG,CAAC,OAAO,SAAS,kBAAkB;AAAA,MACtC,GAAG,CAAC,SAAS,SAAS,kBAAkB;AAAA,IAC1C;AAEA,WACE,WAAW,UAAa,eAAe,SAAS,MAAyB;AAAA,EAE7E;AAMA,QAAM,uBAAuB,CAC3B,aAGY;AACZ,QAAI,CAAC,UAAU;AACb,aAAO;AAAA,IACT;AAEA,QAAI,WAAW;AACf,QAAI,WAAW;AAEf,eAAW,CAAC,EAAE,OAAO,KAAK,UAAU;AAClC,YAAM,cAAc,SAAS,QAAQ,SAAS;AAC9C,UAAI,gBAAgB,IAAI;AACtB,mBAAW;AAAA,MACb,OAAO;AACL,mBAAW;AAAA,MACb;AAAA,IACF;AAEA,WAAO,YAAY,CAAC;AAAA,EACtB;AAKA,QAAM,+BAA+B,CACnC,aAGG;AACH,QAAI,CAAC,UAAU;AACb,aAAO;AAAA,IACT;AAEA,QAAI,yBAAmD;AAEvD,eAAW,CAAC,EAAE,OAAO,KAAK,UAAU;AAClC,UAAI,CAAC,wBAAwB;AAC3B,iCAAyB;AAAA,MAC3B;AACA,UAAI,CAAC,SAAS,QAAQ,SAAS,aAAa;AAC1C,iCAAyB;AACzB;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAEA,MAAI,cAAc,OAAO,MAAM,GAAG;AAChC;AAAA,EACF;AAEA,QAAM,oBAAoB,qBAAqB,oBAAoB;AACnE,QAAM,sBAAsB,qBAAqB,sBAAsB;AAEvE,QAAM,6BAA6B;AAAA,IACjC;AAAA,EACF;AACA,QAAM,2BACJ,6BAA6B,oBAAoB;AAGnD,MAAI,qBAAqB,CAAC,qBAAqB;AAC7C,UAAMA,4BACJ,6BAA6B,oBAAoB;AACnD,QAAIA,2BAA0B;AAC5B,MAAAA,2BAA0B,QAAQ,SAAS,MAAM;AACjD;AAAA,IACF;AAAA,EACF;AAGA,MACE,uBACC,4BAA4B,QAAQ,SAAS,gBAAgB,OAC3D,OAAO,SAAS,oBAAoB,gBAAgB,MACnD,0BAA0B,QAAQ,SAAS,gBAAgB,KAC/D;AACA,QAAI,4BAA4B;AAC9B,kCAA4B,QAAQ,SAAS,MAAM;AACnD;AAAA,IACF;AAAA,EACF;AAGA,MACE,SAAS,SAAS,oBAAoB,gBAAgB,MACtD,OAAO,SAAS,oBAAoB,gBAAgB,MACpD,0BAA0B,QAAQ,SAAS,gBAAgB,IAC3D;AACA,WAAO,SAAS,oBAAoB,QAAQ;AAC5C;AAAA,EACF;AAGA,WAAS,SAAS,oBAAoB,MAAM;AAC9C;AASO,MAAM,iBAAiB,CAC5B,oBACS;AACT,QAAM,cACJ,gBAAgB,SAAS,mBAAmB,IAAI,MAAM,GAAG,QAAQ;AACnE,MAAI,aAAa;AACf,gBAAY,MAAM;AAClB;AAAA,EACF;AACA,qBAAmB,MAAM,eAAe;AAC1C;",
   "names": ["firstToSpinButtonHandler"]
 }

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

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

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

@@ -174,6 +174,7 @@ const DateRangeSelector = forwardRef((props, forwardedRef) => {
         disabled,
         "aria-disabled": ariaDisabledProp,
         variant: "emphasized",
+        "data-dt-name": "ShowCalendar",
         children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(CalendarIcon, {}) })
       }
     ),