@dynatrace/strato-components 3.12.2 → 3.13.2

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeInput.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type DragEvent,\n  type ClipboardEvent,\n  type CSSProperties,\n  type FocusEvent as ReactFocusEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { dateTimeInputRoot, expression } from './DateTimeInput.sty.js';\nimport * as styles from './DateTimeInput.sty.js';\nimport { useDateTimeInput } from './hooks/useDateTimeInput.js';\nimport type { DateTimeInputProps, DateTimeInputRef } from './types.js';\nimport * as visuallyHiddenStyles from '../../core/components/visually-hidden/VisuallyHidden.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useDateTimePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { validate } from '../../core/time/validation.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport * as dataTimePickerStyles from '../date-time-picker/DateTimePicker.sty.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { SpinButtonGroup } from '../spin-buttons/spin-button-group/SpinButtonGroup.js';\nimport { getValidationState } from '../validation/validation-builders.js';\n\nfunction preventDefault(e: DragEvent | ClipboardEvent) {\n  e.preventDefault();\n}\n\n/** Date & Time Input used in DateTimeRangePicker and DateTimePicker components\n * @internal\n */\nexport const DateTimeInput = forwardRef<DateTimeInputRef, DateTimeInputProps>(\n  (props, forwardedRef) => {\n    const rootRef = useRef<HTMLSpanElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const expressionInputRef = useRef<HTMLSpanElement>(null);\n\n    const min = useDateTimePickerStore((state) => state.min);\n    const max = useDateTimePickerStore((state) => state.max);\n    const precision = useDateTimePickerStore((state) => state.precision);\n    const formatString = useDateTimePickerStore((state) => state.formatString);\n\n    const intl = useIntl();\n    const {\n      ariaProps: ariaFormProps,\n      onChange: validationOnChange,\n      onBlur,\n      onInvalid,\n    } = useFormFieldValidation(inputRef);\n\n    const {\n      disabled,\n      readOnly,\n      placeholder: propPlaceholder,\n      className: consumerClassName,\n      style: consumerStyle,\n      name,\n      'data-testid': dataTestId,\n      'aria-disabled': ariaDisabledProp,\n      controlId,\n      form,\n      required,\n      type = 'datetime',\n      inputProps: formControlInputProps,\n      validationValueMode,\n      onLeadingEdge,\n      onTrailingEdge,\n      onTrailingOverflow,\n    }: DateTimeInputProps = props;\n\n    const dateTimePlaceholder = intl.formatMessage({\n      defaultMessage: 'Add date and time',\n      id: 'X9SZ3eLw4rz/ODZQ',\n      description: 'Default placeholder for the date time input.',\n    });\n    const datePlaceholder = intl.formatMessage({\n      defaultMessage: 'Add date',\n      id: 'XC7nO0JIPg0R0kBw',\n      description: 'Default placeholder for the date input.',\n    });\n    const timePlaceholder = intl.formatMessage({\n      defaultMessage: 'Add time',\n      id: 'MlwM+/jonCtjJ+L7',\n      description: 'Default placeholder for the time input.',\n    });\n\n    let placeholder = propPlaceholder;\n    if (!propPlaceholder) {\n      switch (type) {\n        case 'datetime':\n          placeholder = dateTimePlaceholder;\n          break;\n        case 'date':\n          placeholder = datePlaceholder;\n          break;\n        case 'time':\n          placeholder = timePlaceholder;\n          break;\n      }\n    }\n\n    const ariaLabelingProps = useAriaLabelingProps(props);\n\n    const {\n      expressionInputHandler,\n      expressionOnFocusHandler,\n      expressionOnBlurHandler,\n      expressionOnKeyDownHandler,\n      onPaste,\n      pasteText,\n      onPasteUndoKeyDown,\n      clearPasteUndo,\n      value,\n      valueType,\n      spinButtons,\n      spinButtonHandlers,\n      inputValue,\n      focus,\n      switchToExpressionMode,\n      setInputValue,\n    } = useDateTimeInput(props, expressionInputRef);\n\n    const isExpressionInput = valueType === 'expression';\n\n    const { dispatch: formMessageDispatch } = useFormFieldMessagesContext();\n\n    useImperativeHandle(\n      forwardedRef,\n      (): DateTimeInputRef => ({\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        expressionInputRef: expressionInputRef.current,\n        spinButtonHandlers,\n        focus,\n        setExpressionValue: switchToExpressionMode,\n        clearPasteUndo,\n        pasteText,\n        focusLast() {\n          if (valueType === 'expression') {\n            expressionInputRef.current?.focus();\n          } else {\n            const handlers = Array.from(spinButtonHandlers.values()).filter(\n              (h) => h !== null,\n            );\n            const lastHandler = handlers[handlers.length - 1];\n            lastHandler.element.current?.focus();\n            lastHandler.selectAll();\n          }\n        },\n        validate() {\n          const textContent = expressionInputRef.current?.textContent;\n          // Reset stale inputValue when expression span is empty so the hidden\n          // input correctly reports valueMissing for required-field validation.\n          if (valueType === 'expression' && !textContent) {\n            setInputValue('');\n          }\n          validate(value ?? null, min, max, {\n            formMessageDispatch,\n            precision,\n            showError: true,\n            checkOrder: true,\n            ref: rootRef,\n            expectedFormat: formatString,\n            valueMode: validationValueMode,\n            // In single mode, required validation is handled by core time validation\n            // (emits native valueMissing). Keeping native `required` here would add a\n            // second browser `valueMissing` message with identical text.\n            required: validationValueMode === 'single' ? false : required,\n          });\n          formMessageDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n        },\n        validateAsync: async () => {\n          const textContent = expressionInputRef.current?.textContent;\n          if (valueType === 'expression' && !textContent) {\n            setInputValue('');\n          }\n          validate(value ?? null, min, max, {\n            formMessageDispatch,\n            precision,\n            showError: true,\n            checkOrder: true,\n            ref: rootRef,\n            expectedFormat: formatString,\n            valueMode: validationValueMode,\n            required: validationValueMode === 'single' ? false : required,\n          });\n          formMessageDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          return getValidationState(inputRef.current, 'manual');\n        },\n      }),\n      [\n        spinButtonHandlers,\n        focus,\n        switchToExpressionMode,\n        setInputValue,\n        value,\n        valueType,\n        min,\n        max,\n        formMessageDispatch,\n        precision,\n        formatString,\n        validationValueMode,\n        required,\n      ],\n    );\n\n    const expressionLabel = intl.formatMessage(\n      {\n        defaultMessage: '{ariaLabelPrefix} expression',\n        id: 'M6eNgatb2wf4fQ3I',\n        description: 'Textbox to enter a dql timeframe expression.',\n      },\n      {\n        ariaLabelPrefix: ariaLabelingProps['aria-label'],\n      },\n    );\n\n    useEffect(() => {\n      validationOnChange(); // needs to be in an effect here because the value update should happen before the validation, which validates the input ref value\n      // validationOnChange doesn't change and can be excluded\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [inputValue]);\n\n    return (\n      <Flex\n        ref={rootRef}\n        as=\"span\"\n        className={clsx(\n          dateTimeInputRoot,\n          styles.dateTimeInput,\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        onPaste={onPaste}\n        onKeyDown={onPasteUndoKeyDown}\n        gap={0}\n        data-valuetype={valueType}\n      >\n        <VisuallyHidden>\n          <input\n            id={controlId}\n            ref={inputRef}\n            name={name}\n            value={inputValue ?? ''}\n            onChange={() => {\n              /** noop */\n            }}\n            onFocus={focus}\n            onBlur={onBlur}\n            onInvalid={onInvalid}\n            disabled={disabled}\n            tabIndex={-1}\n            required={required}\n            readOnly={readOnly}\n            aria-disabled={ariaDisabledProp}\n            {..._mergeProps(\n              formControlInputProps ?? ariaFormProps,\n              ariaLabelingProps,\n            )}\n            form={form}\n          />\n        </VisuallyHidden>\n\n        <span\n          className={clsx(expression, {\n            [visuallyHiddenStyles.visuallyHidden]: !isExpressionInput,\n          })}\n          role=\"textbox\"\n          spellCheck={false}\n          tabIndex={disabled || !isExpressionInput ? -1 : 0}\n          style={\n            {\n              '--data-placeholder': `\"${placeholder}\"`,\n            } as CSSProperties\n          }\n          data-valuetype=\"expression\"\n          ref={expressionInputRef}\n          contentEditable={!disabled && !readOnly ? true : undefined}\n          onInput={expressionInputHandler}\n          onFocus={(e: ReactFocusEvent<HTMLSpanElement>) => {\n            if (e.target.hasAttribute('contenteditable') === false) {\n              return;\n            }\n            expressionOnFocusHandler(e);\n          }}\n          onBlur={(e: ReactFocusEvent<HTMLSpanElement>) => {\n            if (e.target.hasAttribute('contenteditable') === false) {\n              return;\n            }\n            expressionOnBlurHandler(e);\n          }}\n          onKeyDown={expressionOnKeyDownHandler}\n          onPaste={preventDefault}\n          onDragOver={preventDefault}\n          onDrop={preventDefault}\n          aria-label={expressionLabel}\n        />\n        <SpinButtonGroup\n          className={clsx(dataTimePickerStyles.spinButtonGroup, {\n            [visuallyHiddenStyles.visuallyHidden]: isExpressionInput,\n          })}\n          valueOverflow\n          onLeadingEdge={onLeadingEdge}\n          onTrailingEdge={onTrailingEdge}\n          onTrailingOverflow={onTrailingOverflow}\n        >\n          {spinButtons}\n        </SpinButtonGroup>\n      </Flex>\n    );\n  },\n);\n"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type DragEvent,\n  type ClipboardEvent,\n  type CSSProperties,\n  type FocusEvent as ReactFocusEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { dateTimeInputRoot, expression } from './DateTimeInput.sty.js';\nimport * as styles from './DateTimeInput.sty.js';\nimport { useDateTimeInput } from './hooks/useDateTimeInput.js';\nimport type { DateTimeInputProps, DateTimeInputRef } from './types.js';\nimport * as visuallyHiddenStyles from '../../core/components/visually-hidden/VisuallyHidden.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useDateTimePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { validate } from '../../core/time/validation.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport * as dataTimePickerStyles from '../date-time-picker/DateTimePicker.sty.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { SpinButtonGroup } from '../spin-buttons/spin-button-group/SpinButtonGroup.js';\nimport { getValidationState } from '../validation/validation-builders.js';\n\nfunction preventDefault(e: DragEvent | ClipboardEvent) {\n  e.preventDefault();\n}\n\n/** Date & Time Input used in DateTimeRangePicker and DateTimePicker components\n * @internal\n */\nexport const DateTimeInput = forwardRef<DateTimeInputRef, DateTimeInputProps>(\n  (props, forwardedRef) => {\n    const rootRef = useRef<HTMLSpanElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const expressionInputRef = useRef<HTMLSpanElement>(null);\n\n    const min = useDateTimePickerStore((state) => state.min);\n    const max = useDateTimePickerStore((state) => state.max);\n    const precision = useDateTimePickerStore((state) => state.precision);\n    const formatString = useDateTimePickerStore((state) => state.formatString);\n\n    const intl = useIntl();\n    const {\n      ariaProps: ariaFormProps,\n      onChange: validationOnChange,\n      onBlur,\n      onInvalid,\n    } = useFormFieldValidation(inputRef);\n\n    const {\n      disabled,\n      readOnly,\n      placeholder: propPlaceholder,\n      className: consumerClassName,\n      style: consumerStyle,\n      name,\n      'data-testid': dataTestId,\n      'aria-disabled': ariaDisabledProp,\n      controlId,\n      form,\n      required,\n      type = 'datetime',\n      inputProps: formControlInputProps,\n      validationValueMode,\n      onLeadingEdge,\n      onTrailingEdge,\n      onTrailingOverflow,\n    }: DateTimeInputProps = props;\n\n    const dateTimePlaceholder = intl.formatMessage({\n      defaultMessage: 'Add date and time',\n      id: 'X9SZ3eLw4rz/ODZQ',\n      description: 'Default placeholder for the date time input.',\n    });\n    const datePlaceholder = intl.formatMessage({\n      defaultMessage: 'Add date',\n      id: 'XC7nO0JIPg0R0kBw',\n      description: 'Default placeholder for the date input.',\n    });\n    const timePlaceholder = intl.formatMessage({\n      defaultMessage: 'Add time',\n      id: 'MlwM+/jonCtjJ+L7',\n      description: 'Default placeholder for the time input.',\n    });\n\n    let placeholder = propPlaceholder;\n    if (!propPlaceholder) {\n      switch (type) {\n        case 'datetime':\n          placeholder = dateTimePlaceholder;\n          break;\n        case 'date':\n          placeholder = datePlaceholder;\n          break;\n        case 'time':\n          placeholder = timePlaceholder;\n          break;\n      }\n    }\n\n    const ariaLabelingProps = useAriaLabelingProps(props);\n\n    const {\n      expressionInputHandler,\n      expressionOnFocusHandler,\n      expressionOnBlurHandler,\n      expressionOnKeyDownHandler,\n      onPaste,\n      pasteText,\n      onPasteUndoKeyDown,\n      clearPasteUndo,\n      value,\n      valueType,\n      spinButtons,\n      spinButtonHandlers,\n      inputValue,\n      focus,\n      switchToExpressionMode,\n      setInputValue,\n    } = useDateTimeInput(props, expressionInputRef);\n\n    const isExpressionInput = valueType === 'expression';\n\n    const { dispatch: formMessageDispatch } = useFormFieldMessagesContext();\n\n    useImperativeHandle(\n      forwardedRef,\n      (): DateTimeInputRef => ({\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        expressionInputRef: expressionInputRef.current,\n        spinButtonHandlers,\n        focus,\n        setExpressionValue: switchToExpressionMode,\n        clearPasteUndo,\n        pasteText,\n        focusLast() {\n          if (valueType === 'expression') {\n            expressionInputRef.current?.focus();\n          } else {\n            const handlers = Array.from(spinButtonHandlers.values()).filter(\n              (h) => h !== null,\n            );\n            const lastHandler = handlers[handlers.length - 1];\n            lastHandler.element.current?.focus();\n            lastHandler.selectAll();\n          }\n        },\n        validate() {\n          const textContent = expressionInputRef.current?.textContent;\n          // Reset stale inputValue when expression span is empty so the hidden\n          // input correctly reports valueMissing for required-field validation.\n          if (valueType === 'expression' && !textContent) {\n            setInputValue('');\n          }\n          validate(value ?? null, min, max, {\n            formMessageDispatch,\n            precision,\n            showError: true,\n            checkOrder: true,\n            ref: rootRef,\n            expectedFormat: formatString,\n            valueMode: validationValueMode,\n            // In single mode, required validation is handled by core time validation\n            // (emits native valueMissing). Keeping native `required` here would add a\n            // second browser `valueMissing` message with identical text.\n            required: validationValueMode === 'single' ? false : required,\n          });\n          formMessageDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n        },\n        validateAsync: async () => {\n          const textContent = expressionInputRef.current?.textContent;\n          if (valueType === 'expression' && !textContent) {\n            setInputValue('');\n          }\n          validate(value ?? null, min, max, {\n            formMessageDispatch,\n            precision,\n            showError: true,\n            checkOrder: true,\n            ref: rootRef,\n            expectedFormat: formatString,\n            valueMode: validationValueMode,\n            required: validationValueMode === 'single' ? false : required,\n          });\n          formMessageDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          return getValidationState(inputRef.current, 'manual');\n        },\n      }),\n      [\n        spinButtonHandlers,\n        focus,\n        switchToExpressionMode,\n        setInputValue,\n        value,\n        valueType,\n        min,\n        max,\n        formMessageDispatch,\n        precision,\n        formatString,\n        validationValueMode,\n        required,\n      ],\n    );\n\n    const expressionLabel = intl.formatMessage(\n      {\n        defaultMessage: '{ariaLabelPrefix} expression',\n        id: 'M6eNgatb2wf4fQ3I',\n        description: 'Textbox to enter a dql timeframe expression.',\n      },\n      {\n        ariaLabelPrefix: ariaLabelingProps['aria-label'],\n      },\n    );\n\n    useEffect(() => {\n      validationOnChange(); // needs to be in an effect here because the value update should happen before the validation, which validates the input ref value\n      // validationOnChange doesn't change and can be excluded\n      // oxlint-disable-next-line react-hooks/exhaustive-deps\n    }, [inputValue]);\n\n    return (\n      <Flex\n        ref={rootRef}\n        as=\"span\"\n        className={clsx(\n          dateTimeInputRoot,\n          styles.dateTimeInput,\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        onPaste={onPaste}\n        onKeyDown={onPasteUndoKeyDown}\n        gap={0}\n        data-valuetype={valueType}\n      >\n        <VisuallyHidden>\n          <input\n            id={controlId}\n            ref={inputRef}\n            name={name}\n            value={inputValue ?? ''}\n            onChange={() => {\n              /** noop */\n            }}\n            onFocus={focus}\n            onBlur={onBlur}\n            onInvalid={onInvalid}\n            disabled={disabled}\n            tabIndex={-1}\n            required={required}\n            readOnly={readOnly}\n            aria-disabled={ariaDisabledProp}\n            {..._mergeProps(\n              formControlInputProps ?? ariaFormProps,\n              ariaLabelingProps,\n            )}\n            form={form}\n          />\n        </VisuallyHidden>\n\n        <span\n          className={clsx(expression, {\n            [visuallyHiddenStyles.visuallyHidden]: !isExpressionInput,\n          })}\n          role=\"textbox\"\n          spellCheck={false}\n          tabIndex={disabled || !isExpressionInput ? -1 : 0}\n          style={\n            {\n              '--data-placeholder': `\"${placeholder}\"`,\n            } as CSSProperties\n          }\n          data-valuetype=\"expression\"\n          ref={expressionInputRef}\n          contentEditable={!disabled && !readOnly ? true : undefined}\n          onInput={expressionInputHandler}\n          onFocus={(e: ReactFocusEvent<HTMLSpanElement>) => {\n            if (e.target.hasAttribute('contenteditable') === false) {\n              return;\n            }\n            expressionOnFocusHandler(e);\n          }}\n          onBlur={(e: ReactFocusEvent<HTMLSpanElement>) => {\n            if (e.target.hasAttribute('contenteditable') === false) {\n              return;\n            }\n            expressionOnBlurHandler(e);\n          }}\n          onKeyDown={expressionOnKeyDownHandler}\n          onPaste={preventDefault}\n          onDragOver={preventDefault}\n          onDrop={preventDefault}\n          aria-label={expressionLabel}\n        />\n        <SpinButtonGroup\n          className={clsx(dataTimePickerStyles.spinButtonGroup, {\n            [visuallyHiddenStyles.visuallyHidden]: isExpressionInput,\n          })}\n          valueOverflow\n          onLeadingEdge={onLeadingEdge}\n          onTrailingEdge={onTrailingEdge}\n          onTrailingOverflow={onTrailingOverflow}\n        >\n          {spinButtons}\n        </SpinButtonGroup>\n      </Flex>\n    );\n  },\n);\n"],
   "mappings": "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",
   "names": []
 }

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

@@ -5,9 +5,9 @@ import "../spin-buttons/SpinButton.css";
 import "../date-time-picker/DateTimePicker.css";
 import "./DateTimeRangePicker.css";
 import "./DateTimeInput.css";
-var dateTimeInput = "_5u9o251-3-12-2";
-var dateTimeInputRoot = "_5u9o250-3-12-2";
-var expression = "_5u9o252-3-12-2";
+var dateTimeInput = "_5u9o251-3-13-2";
+var dateTimeInputRoot = "_5u9o250-3-13-2";
+var expression = "_5u9o252-3-13-2";
 export {
   dateTimeInput,
   dateTimeInputRoot,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeInput.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport '../date-time-picker/DateTimePicker.css';\nimport './DateTimeRangePicker.css';\nimport './DateTimeInput.css';\nexport var dateTimeInput = '_5u9o251-3-12-2';\nexport var dateTimeInputRoot = '_5u9o250-3-12-2';\nexport var expression = '_5u9o252-3-12-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport '../date-time-picker/DateTimePicker.css';\nimport './DateTimeRangePicker.css';\nimport './DateTimeInput.css';\nexport var dateTimeInput = '_5u9o251-3-13-2';\nexport var dateTimeInputRoot = '_5u9o250-3-13-2';\nexport var expression = '_5u9o252-3-13-2';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,gBAAgB;AACpB,IAAI,oBAAoB;AACxB,IAAI,aAAa;",
   "names": []
 }

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

@@ -1,49 +1,49 @@
-._1vlwkc20-3-12-2 {
+._1vlwkc20-3-13-2 {
   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;
   padding-inline: var(--dt-spacings-size-12, 12px);
   padding-block: var(--dt-spacings-size-6, 6px);
   border-radius: var(--dt-borders-radius-field-default, 6px);
-  box-shadow: var(--_bx32h4-3-12-2);
+  box-shadow: var(--_bx32h4-3-13-2);
   white-space: nowrap;
   overflow: hidden;
-  color: var(--_bx32h0-3-12-2);
-  background: var(--_bx32h3-3-12-2);
+  color: var(--_bx32h0-3-13-2);
+  background: var(--_bx32h3-3-13-2);
   flex: 1 1 auto;
   position: relative;
 }
-._1vlwkc20-3-12-2._1vlwkc20-3-12-2 {
+._1vlwkc20-3-13-2._1vlwkc20-3-13-2 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc20-3-12-2:has(._1i883gjd-3-12-2) {
+._1vlwkc20-3-13-2:has(._1i883gjd-3-13-2) {
   padding-inline-end: var(--dt-spacings-size-32, 32px);
 }
-._1vlwkc20-3-12-2:has(._1i883gjd-3-12-2:hover) {
-  --_bx32h3-3-12-2: var(--_bx32h2-3-12-2);
+._1vlwkc20-3-13-2:has(._1i883gjd-3-13-2:hover) {
+  --_bx32h3-3-13-2: var(--_bx32h2-3-13-2);
 }
-._1vlwkc20-3-12-2:has(._1i883gjd-3-12-2:focus-visible) {
-  box-shadow: var(--_bx32h4-3-12-2, none);
+._1vlwkc20-3-13-2:has(._1i883gjd-3-13-2:focus-visible) {
+  box-shadow: var(--_bx32h4-3-13-2, none);
 }
-._1jgl8s50-3-12-2 ._1vlwkc20-3-12-2, ._1jgl8s50-3-12-2 ._1vlwkc20-3-12-2:hover, ._1jgl8s50-3-12-2 ._1vlwkc20-3-12-2:active {
-  --_bx32h3-3-12-2: var(--dt-colors-background-surface-default, #fff);
+._1jgl8s50-3-13-2 ._1vlwkc20-3-13-2, ._1jgl8s50-3-13-2 ._1vlwkc20-3-13-2:hover, ._1jgl8s50-3-13-2 ._1vlwkc20-3-13-2:active {
+  --_bx32h3-3-13-2: var(--dt-colors-background-surface-default, #fff);
 }
-._1vlwkc22-3-12-2 {
+._1vlwkc22-3-13-2 {
   cursor: not-allowed;
 }
-._1vlwkc23-3-12-2 {
-  --_bx32h3-3-12-2: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+._1vlwkc23-3-13-2 {
+  --_bx32h3-3-13-2: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-12-2 ._1vlwkc23-3-12-2, ._1jgl8s50-3-12-2 ._1vlwkc23-3-12-2:hover, ._1jgl8s50-3-12-2 ._1vlwkc23-3-12-2:active {
-  --_bx32h4-3-12-2: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-13-2 ._1vlwkc23-3-13-2, ._1jgl8s50-3-13-2 ._1vlwkc23-3-13-2:hover, ._1jgl8s50-3-13-2 ._1vlwkc23-3-13-2:active {
+  --_bx32h4-3-13-2: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1vlwkc24-3-12-2 {
-  --_bx32h3-3-12-2: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+._1vlwkc24-3-13-2 {
+  --_bx32h3-3-13-2: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-12-2 ._1vlwkc24-3-12-2, ._1jgl8s50-3-12-2 ._1vlwkc24-3-12-2:hover, ._1jgl8s50-3-12-2 ._1vlwkc24-3-12-2:active {
-  --_bx32h4-3-12-2: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-13-2 ._1vlwkc24-3-13-2, ._1jgl8s50-3-13-2 ._1vlwkc24-3-13-2:hover, ._1jgl8s50-3-13-2 ._1vlwkc24-3-13-2:active {
+  --_bx32h4-3-13-2: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1vlwkc25-3-12-2 {
+._1vlwkc25-3-13-2 {
   display: flex;
   flex: 1 1 auto;
   min-width: 0;
@@ -51,19 +51,19 @@
   overflow-y: hidden;
   scrollbar-width: none;
 }
-._1vlwkc25-3-12-2._1vlwkc25-3-12-2 {
+._1vlwkc25-3-13-2._1vlwkc25-3-13-2 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc25-3-12-2::-webkit-scrollbar {
+._1vlwkc25-3-13-2::-webkit-scrollbar {
   display: none;
 }
-._1vlwkc26-3-12-2._1vlwkc26-3-12-2 {
+._1vlwkc26-3-13-2._1vlwkc26-3-13-2 {
   flex-shrink: 0;
   overflow-x: visible;
 }
-._1vlwkc27-3-12-2 {
+._1vlwkc27-3-13-2 {
   flex-shrink: 0;
 }
-._1vlwkc27-3-12-2::selection {
+._1vlwkc27-3-13-2::selection {
   background: transparent;
 }

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

@@ -102,7 +102,7 @@ const DateTimeRangePicker = forwardRef(
     readOnly: propReadOnly,
     id: propId,
     "aria-disabled": propAriaDisabled,
-    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+    // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
     controlState,
     onBlur,
     ...remainingProps
@@ -116,7 +116,7 @@ const DateTimeRangePicker = forwardRef(
     const memoedDefaultValue = useMemo(
       () => mapToPartialTimeframe(propDefaultValue, precision),
       /** We're ignoring updates to defaultValue as it only considers the initial state. */
-      // eslint-disable-next-line react-hooks/exhaustive-deps
+      // oxlint-disable-next-line react-hooks/exhaustive-deps
       []
     );
     const { min, max } = useMinMax(propMin, propMax);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeRangePicker.tsx"],
-  "sourcesContent": ["import {\n  type Dispatch,\n  type RefObject,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { DateTimeRangePickerRoot } from './DateTimeRangePickerRoot.js';\nimport type {\n  DateTimeInputRef,\n  DateTimeRangePickerProps,\n  DateTimeRangePickerRef,\n} from './types.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { getDateTimeRangePickerActions } from '../../core/time/timeframeStore/actions/dateTimeRangePicker.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport type {\n  DateTimeRangePickerTimeframeStates,\n  DateTimeRangePickerTimeframeStoreActions,\n} from '../../core/time/timeframeStore/dateTimeRangePicker.types.js';\nimport { DateTimeRangePickerStoreProvider } from '../../core/time/timeframeStore/timeframeStoreProvider.js';\nimport { useDateTimeMessages } from '../../core/time/useDateTimeMessages.js';\nimport { useMinMax, useMinMaxStoreSync } from '../../core/time/useMinMax.js';\nimport { validate } from '../../core/time/validation.js';\nimport { type TimeValue } from '../../core/types/time.js';\nimport { getTimeOffsetFromInitialValue } from '../calendar/utils/helpers.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport { useMinMaxLogger } from '../forms-core/hooks/useMinMaxLogger.js';\nimport {\n  FormFieldMessagesAction,\n  type FormFieldMessagesReducerAction,\n} from '../forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../forms-core/time/date-time.js';\nimport {\n  removePrecisionFromTimeFrame,\n  mapToPartialTimeframe,\n} from '../forms-core/time/timeParser.js';\nimport type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';\n\ntype DateTimeRangePickerStore = StoreApi<\n  DateTimeRangePickerTimeframeStates & DateTimeRangePickerTimeframeStoreActions\n>;\n\n/**\n * Extracts the prop-to-store syncing effects into a dedicated hook so the\n * component body stays focused on wiring rather than implementation details.\n *\n * According to the zustand maintainer, the recommended way to keep a zustand\n * store in sync with React props is via useEffect.\n * see https://github.com/pmndrs/zustand/discussions/1390#discussion-4505803\n */\nfunction useSyncPropsAndState(\n  store: DateTimeRangePickerStore,\n  memoedValue: {\n    from: TimeValue | null;\n    to: TimeValue | null;\n  } | null,\n  isControlled: boolean,\n  precision: Exclude<Precision, 'day'>,\n  formatString: string | undefined,\n  required: boolean | undefined,\n  formFieldMessagesDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  dateTimeRangePickerRef: RefObject<DateTimeRangePickerRef | null>,\n) {\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(() => {\n    isControlled &&\n      store.setState((state) => {\n        const error = validate(memoedValue ?? null, state.min, state.max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          precision: state.precision,\n          showError: false,\n          checkOrder: true,\n          formerError: state.calendarError,\n          ref: dateTimeRangePickerRef,\n          expectedFormat: state.formatString,\n          valueMode: 'dateTimePicker',\n          required: state.required,\n        });\n\n        const value = removePrecisionFromTimeFrame(\n          memoedValue,\n          state.precision,\n        );\n        const timeOffset = getTimeOffsetFromInitialValue(\n          value,\n          'range',\n          state.min,\n          state.max,\n          precision,\n        );\n\n        return {\n          ...state,\n          dateTimeRangePickerTimeframe: value,\n          calendarValue: value,\n          calendarError: error,\n          dateTimeRangePickerError: error,\n          timeOffset,\n        };\n      });\n  }, [\n    formFieldMessagesDispatch,\n    isControlled,\n    memoedValue,\n    store,\n    precision,\n    dateTimeRangePickerRef,\n  ]);\n\n  // Sync precision and formatString into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const value = removePrecisionFromTimeFrame(\n        state.dateTimeRangePickerTimeframe,\n        precision,\n      );\n\n      return {\n        ...state,\n        precision,\n        formatString,\n        dateTimeRangePickerTimeframe: value,\n        calendarValue: value,\n        required,\n      };\n    });\n  }, [precision, formatString, store, required]);\n}\n\n/**\n * Component to comfortably enter a timeframe in localized format for expressions.\n * @internal\n */\nexport const DateTimeRangePicker = forwardRef<\n  DateTimeRangePickerRef,\n  DateTimeRangePickerProps\n>(\n  (\n    {\n      value: propValue,\n      defaultValue: propDefaultValue,\n      onChange,\n      min: propMin = GRAIL_MIN_DATE,\n      max: propMax = GRAIL_MAX_DATE,\n      precision = 'minutes',\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      'aria-disabled': propAriaDisabled,\n      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n      controlState,\n      onBlur,\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    const [isControlled] = useState(propValue !== undefined);\n    const onChangeProp = useCallbackRef(onChange);\n\n    const memoedValue = useMemo(\n      () => mapToPartialTimeframe(propValue, precision),\n      [precision, propValue],\n    );\n    const memoedDefaultValue = useMemo(\n      () => mapToPartialTimeframe(propDefaultValue, precision),\n      /** We're ignoring updates to defaultValue as it only considers the initial state. */\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    // Keep min and max updated at midnight\n    const { min, max } = useMinMax(propMin, propMax);\n    useMinMaxLogger(min, max, 'DateTimeRangePicker');\n\n    const calendarRef = useRef<\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n    >(null);\n    const dateTimeFromRef = useRef<DateTimeInputRef>(null);\n    const dateTimeRangePickerRef = useRef<DateTimeRangePickerRef>(null);\n\n    const formControl = useFormControl({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled,\n      propReadOnly,\n      controlState,\n    });\n    const { required, messageDispatch: formFieldMessagesDispatch } =\n      formControl;\n\n    const { formatString } = useDateTimeMessages({ precision });\n\n    const [initialState] = useState<DateTimeRangePickerTimeframeStates>(() => {\n      const value = isControlled ? memoedValue : memoedDefaultValue;\n      const timeOffset = getTimeOffsetFromInitialValue(\n        value,\n        'range',\n        min,\n        max,\n        precision,\n      );\n\n      const error = validate(value, min, max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: dateTimeRangePickerRef,\n        expectedFormat: formatString,\n        valueMode: 'dateTimePicker',\n        required,\n      });\n\n      return {\n        calendarValue: value,\n        dateTimeRangePickerTimeframe: value,\n        min,\n        max,\n        precision,\n        calendarRef,\n        dateTimeFromRef,\n        dateTimeRangePickerRef,\n        calendarError: error,\n        dateTimeRangePickerError: error,\n        timeOffset,\n        formatString,\n        required,\n      };\n    });\n\n    const [store] = useState(() =>\n      createTimeframeStore<\n        DateTimeRangePickerTimeframeStates,\n        DateTimeRangePickerTimeframeStoreActions\n      >(\n        initialState,\n        getDateTimeRangePickerActions(\n          isControlled,\n          formFieldMessagesDispatch,\n          onChangeProp,\n        ),\n      ),\n    );\n\n    useSyncPropsAndState(\n      store,\n      memoedValue,\n      isControlled,\n      precision,\n      formatString,\n      required,\n      formFieldMessagesDispatch,\n      dateTimeRangePickerRef,\n    );\n\n    // Keep min and max updated at midnight\n    useMinMaxStoreSync(\n      store,\n      min,\n      max,\n      useCallback(\n        (\n          state: DateTimeRangePickerTimeframeStates,\n          min: TimeValue | null,\n          max: TimeValue | null,\n        ) => {\n          const error = validate(state.dateTimeRangePickerTimeframe, min, max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.calendarError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: dateTimeRangePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'dateTimePicker',\n            required: state.required,\n          });\n          return { calendarError: error, dateTimeRangePickerError: error };\n        },\n        [formFieldMessagesDispatch],\n      ),\n    );\n\n    const mergedRef = useMergeRefs<DateTimeRangePickerRef>([\n      dateTimeRangePickerRef,\n      forwardedRef,\n    ]);\n\n    return (\n      <DateTimeRangePickerStoreProvider store={store}>\n        <DateTimeRangePickerRoot\n          {...remainingProps}\n          ref={mergedRef}\n          formControl={formControl}\n          onBlur={(event) => {\n            onBlur?.(event);\n\n            if (!event.target.contains(document.activeElement)) {\n              formFieldMessagesDispatch?.({\n                type: FormFieldMessagesAction.SETISTOUCHED,\n                payload: { isTouched: true },\n              });\n            }\n          }}\n        />\n      </DateTimeRangePickerStoreProvider>\n    );\n  },\n);\n"],
+  "sourcesContent": ["import {\n  type Dispatch,\n  type RefObject,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { DateTimeRangePickerRoot } from './DateTimeRangePickerRoot.js';\nimport type {\n  DateTimeInputRef,\n  DateTimeRangePickerProps,\n  DateTimeRangePickerRef,\n} from './types.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { getDateTimeRangePickerActions } from '../../core/time/timeframeStore/actions/dateTimeRangePicker.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport type {\n  DateTimeRangePickerTimeframeStates,\n  DateTimeRangePickerTimeframeStoreActions,\n} from '../../core/time/timeframeStore/dateTimeRangePicker.types.js';\nimport { DateTimeRangePickerStoreProvider } from '../../core/time/timeframeStore/timeframeStoreProvider.js';\nimport { useDateTimeMessages } from '../../core/time/useDateTimeMessages.js';\nimport { useMinMax, useMinMaxStoreSync } from '../../core/time/useMinMax.js';\nimport { validate } from '../../core/time/validation.js';\nimport { type TimeValue } from '../../core/types/time.js';\nimport { getTimeOffsetFromInitialValue } from '../calendar/utils/helpers.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport { useMinMaxLogger } from '../forms-core/hooks/useMinMaxLogger.js';\nimport {\n  FormFieldMessagesAction,\n  type FormFieldMessagesReducerAction,\n} from '../forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../forms-core/time/date-time.js';\nimport {\n  removePrecisionFromTimeFrame,\n  mapToPartialTimeframe,\n} from '../forms-core/time/timeParser.js';\nimport type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';\n\ntype DateTimeRangePickerStore = StoreApi<\n  DateTimeRangePickerTimeframeStates & DateTimeRangePickerTimeframeStoreActions\n>;\n\n/**\n * Extracts the prop-to-store syncing effects into a dedicated hook so the\n * component body stays focused on wiring rather than implementation details.\n *\n * According to the zustand maintainer, the recommended way to keep a zustand\n * store in sync with React props is via useEffect.\n * see https://github.com/pmndrs/zustand/discussions/1390#discussion-4505803\n */\nfunction useSyncPropsAndState(\n  store: DateTimeRangePickerStore,\n  memoedValue: {\n    from: TimeValue | null;\n    to: TimeValue | null;\n  } | null,\n  isControlled: boolean,\n  precision: Exclude<Precision, 'day'>,\n  formatString: string | undefined,\n  required: boolean | undefined,\n  formFieldMessagesDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  dateTimeRangePickerRef: RefObject<DateTimeRangePickerRef | null>,\n) {\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(() => {\n    isControlled &&\n      store.setState((state) => {\n        const error = validate(memoedValue ?? null, state.min, state.max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          precision: state.precision,\n          showError: false,\n          checkOrder: true,\n          formerError: state.calendarError,\n          ref: dateTimeRangePickerRef,\n          expectedFormat: state.formatString,\n          valueMode: 'dateTimePicker',\n          required: state.required,\n        });\n\n        const value = removePrecisionFromTimeFrame(\n          memoedValue,\n          state.precision,\n        );\n        const timeOffset = getTimeOffsetFromInitialValue(\n          value,\n          'range',\n          state.min,\n          state.max,\n          precision,\n        );\n\n        return {\n          ...state,\n          dateTimeRangePickerTimeframe: value,\n          calendarValue: value,\n          calendarError: error,\n          dateTimeRangePickerError: error,\n          timeOffset,\n        };\n      });\n  }, [\n    formFieldMessagesDispatch,\n    isControlled,\n    memoedValue,\n    store,\n    precision,\n    dateTimeRangePickerRef,\n  ]);\n\n  // Sync precision and formatString into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const value = removePrecisionFromTimeFrame(\n        state.dateTimeRangePickerTimeframe,\n        precision,\n      );\n\n      return {\n        ...state,\n        precision,\n        formatString,\n        dateTimeRangePickerTimeframe: value,\n        calendarValue: value,\n        required,\n      };\n    });\n  }, [precision, formatString, store, required]);\n}\n\n/**\n * Component to comfortably enter a timeframe in localized format for expressions.\n * @internal\n */\nexport const DateTimeRangePicker = forwardRef<\n  DateTimeRangePickerRef,\n  DateTimeRangePickerProps\n>(\n  (\n    {\n      value: propValue,\n      defaultValue: propDefaultValue,\n      onChange,\n      min: propMin = GRAIL_MIN_DATE,\n      max: propMax = GRAIL_MAX_DATE,\n      precision = 'minutes',\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      'aria-disabled': propAriaDisabled,\n      // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n      controlState,\n      onBlur,\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    const [isControlled] = useState(propValue !== undefined);\n    const onChangeProp = useCallbackRef(onChange);\n\n    const memoedValue = useMemo(\n      () => mapToPartialTimeframe(propValue, precision),\n      [precision, propValue],\n    );\n    const memoedDefaultValue = useMemo(\n      () => mapToPartialTimeframe(propDefaultValue, precision),\n      /** We're ignoring updates to defaultValue as it only considers the initial state. */\n      // oxlint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    // Keep min and max updated at midnight\n    const { min, max } = useMinMax(propMin, propMax);\n    useMinMaxLogger(min, max, 'DateTimeRangePicker');\n\n    const calendarRef = useRef<\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n    >(null);\n    const dateTimeFromRef = useRef<DateTimeInputRef>(null);\n    const dateTimeRangePickerRef = useRef<DateTimeRangePickerRef>(null);\n\n    const formControl = useFormControl({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled,\n      propReadOnly,\n      controlState,\n    });\n    const { required, messageDispatch: formFieldMessagesDispatch } =\n      formControl;\n\n    const { formatString } = useDateTimeMessages({ precision });\n\n    const [initialState] = useState<DateTimeRangePickerTimeframeStates>(() => {\n      const value = isControlled ? memoedValue : memoedDefaultValue;\n      const timeOffset = getTimeOffsetFromInitialValue(\n        value,\n        'range',\n        min,\n        max,\n        precision,\n      );\n\n      const error = validate(value, min, max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: dateTimeRangePickerRef,\n        expectedFormat: formatString,\n        valueMode: 'dateTimePicker',\n        required,\n      });\n\n      return {\n        calendarValue: value,\n        dateTimeRangePickerTimeframe: value,\n        min,\n        max,\n        precision,\n        calendarRef,\n        dateTimeFromRef,\n        dateTimeRangePickerRef,\n        calendarError: error,\n        dateTimeRangePickerError: error,\n        timeOffset,\n        formatString,\n        required,\n      };\n    });\n\n    const [store] = useState(() =>\n      createTimeframeStore<\n        DateTimeRangePickerTimeframeStates,\n        DateTimeRangePickerTimeframeStoreActions\n      >(\n        initialState,\n        getDateTimeRangePickerActions(\n          isControlled,\n          formFieldMessagesDispatch,\n          onChangeProp,\n        ),\n      ),\n    );\n\n    useSyncPropsAndState(\n      store,\n      memoedValue,\n      isControlled,\n      precision,\n      formatString,\n      required,\n      formFieldMessagesDispatch,\n      dateTimeRangePickerRef,\n    );\n\n    // Keep min and max updated at midnight\n    useMinMaxStoreSync(\n      store,\n      min,\n      max,\n      useCallback(\n        (\n          state: DateTimeRangePickerTimeframeStates,\n          min: TimeValue | null,\n          max: TimeValue | null,\n        ) => {\n          const error = validate(state.dateTimeRangePickerTimeframe, min, max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.calendarError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: dateTimeRangePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'dateTimePicker',\n            required: state.required,\n          });\n          return { calendarError: error, dateTimeRangePickerError: error };\n        },\n        [formFieldMessagesDispatch],\n      ),\n    );\n\n    const mergedRef = useMergeRefs<DateTimeRangePickerRef>([\n      dateTimeRangePickerRef,\n      forwardedRef,\n    ]);\n\n    return (\n      <DateTimeRangePickerStoreProvider store={store}>\n        <DateTimeRangePickerRoot\n          {...remainingProps}\n          ref={mergedRef}\n          formControl={formControl}\n          onBlur={(event) => {\n            onBlur?.(event);\n\n            if (!event.target.contains(document.activeElement)) {\n              formFieldMessagesDispatch?.({\n                type: FormFieldMessagesAction.SETISTOUCHED,\n                payload: { isTouched: true },\n              });\n            }\n          }}\n        />\n      </DateTimeRangePickerStoreProvider>\n    );\n  },\n);\n"],
   "mappings": "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",
   "names": ["min", "max"]
 }

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

@@ -5,10 +5,10 @@ import "../spin-buttons/SpinButton.css";
 import "../date-time-picker/DateTimePicker.css";
 import "./DateTimeRangePicker.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var dateTimeInput = "_1vlwkc26-3-12-2";
-var dateTimeRange = _7a468({ defaultClassName: "_1vlwkc20-3-12-2", variantClassNames: { showError: { true: "_1vlwkc21-3-12-2" }, disabled: { true: "_1vlwkc22-3-12-2" }, readOnly: { true: "_1vlwkc23-3-12-2" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-12-2"]] });
-var scrollContainer = "_1vlwkc25-3-12-2";
-var timeframeSeparator = "_1vlwkc27-3-12-2";
+var dateTimeInput = "_1vlwkc26-3-13-2";
+var dateTimeRange = _7a468({ defaultClassName: "_1vlwkc20-3-13-2", variantClassNames: { showError: { true: "_1vlwkc21-3-13-2" }, disabled: { true: "_1vlwkc22-3-13-2" }, readOnly: { true: "_1vlwkc23-3-13-2" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-13-2"]] });
+var scrollContainer = "_1vlwkc25-3-13-2";
+var timeframeSeparator = "_1vlwkc27-3-13-2";
 export {
   dateTimeInput,
   dateTimeRange,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeRangePicker.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport '../date-time-picker/DateTimePicker.css';\nimport './DateTimeRangePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dateTimeInput = '_1vlwkc26-3-12-2';\nexport var dateTimeRange = _7a468({defaultClassName:'_1vlwkc20-3-12-2',variantClassNames:{showError:{true:'_1vlwkc21-3-12-2'},disabled:{true:'_1vlwkc22-3-12-2'},readOnly:{true:'_1vlwkc23-3-12-2'}},defaultVariants:{},compoundVariants:[[{showError:true,readOnly:true},'_1vlwkc24-3-12-2']]});\nexport var scrollContainer = '_1vlwkc25-3-12-2';\nexport var timeframeSeparator = '_1vlwkc27-3-12-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport '../date-time-picker/DateTimePicker.css';\nimport './DateTimeRangePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dateTimeInput = '_1vlwkc26-3-13-2';\nexport var dateTimeRange = _7a468({defaultClassName:'_1vlwkc20-3-13-2',variantClassNames:{showError:{true:'_1vlwkc21-3-13-2'},disabled:{true:'_1vlwkc22-3-13-2'},readOnly:{true:'_1vlwkc23-3-13-2'}},defaultVariants:{},compoundVariants:[[{showError:true,readOnly:true},'_1vlwkc24-3-13-2']]});\nexport var scrollContainer = '_1vlwkc25-3-13-2';\nexport var timeframeSeparator = '_1vlwkc27-3-13-2';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB;AACpB,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,WAAU,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,WAAU,MAAK,UAAS,KAAI,GAAE,kBAAkB,CAAC,EAAC,CAAC;AACxR,IAAI,kBAAkB;AACtB,IAAI,qBAAqB;",
   "names": []
 }

package/esm/forms/date-time-range-picker/hooks/useDateTimeInput.js

@@ -203,7 +203,7 @@ const useDateTimeInput = (props, expressionInputRef) => {
       }
     },
     // no use in adding the expressionInputRef to the dep. array
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
     []
   );
   const spinButtonHandlersRef = useRef(spinButtonHandlers);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/date-time-range-picker/hooks/useDateTimeInput.ts"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport {\n  ClipboardEventHandler,\n  FocusEventHandler,\n  FocusEvent as ReactFocusEvent,\n  ReactEventHandler,\n  KeyboardEventHandler as ReactKeyboardEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type RefObject,\n} from 'react';\n\nimport {\n  _parseTimeExpression,\n  parseTimeAsTimeValue,\n} from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useDateTimeParser } from './useDateTimeParser.js';\nimport { spinExpressionValue } from './useExpressionSpin.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useControllableState } from '../../../core/hooks/useControllableState.js';\nimport { isEqualTimeValue } from '../../../core/time/helpers.js';\nimport { useDateTimePickerStore } from '../../../core/time/timeframeStore/useTimeframeStore.js';\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { useDateTimePicker } from '../../date-time-picker/hooks/useDateTimePicker.js';\nimport {\n  formatTimeValue,\n  getTimeValue,\n} from '../../forms-core/time/timeParser.js';\nimport { useSelection } from '../../spin-buttons/hooks/useSelection.js';\nimport type { NumberSpinButtonRef } from '../../spin-buttons/number-spin-button/types.js';\nimport type { SpinButtonHandler } from '../../spin-buttons/spin-button-group/types.js';\nimport {\n  captureUndoSnapshot,\n  isContentModifyingKey,\n  normalizeISOInput,\n  parseDateOnlyToISO,\n  parseTimeOnlyToISO,\n  partialDateTimeToISO,\n  tryParsePartialDate,\n  tryParsePartialTime,\n} from '../helpers.js';\nimport {\n  getExpressionCursorOffset,\n  restoreExpressionCursorOffset,\n} from '../selection-helpers.js';\nimport type { DateTimeInputProps, UndoSnapshot } from '../types.js';\n\nfunction isNumberSpinButton(\n  handler: SpinButtonHandler | undefined,\n): handler is NumberSpinButtonRef {\n  return handler?.type === 'number';\n}\n\nconst DATE_PART_TYPES: Set<Intl.DateTimeFormatPart['type']> = new Set([\n  'day',\n  'month',\n  'year',\n]);\nconst TIME_PART_TYPES: Set<Intl.DateTimeFormatPart['type']> = new Set([\n  'hour',\n  'minute',\n  'second',\n  'fractionalSecond',\n  'dayPeriod',\n]);\n\n/**\n * Inserts plain text at the current cursor position, replacing any active selection.\n */\nconst insertTextAtCursor = (text: string) => {\n  const selection = window.getSelection();\n  if (selection?.rangeCount) {\n    const range = selection.getRangeAt(0);\n    range.deleteContents();\n    const textNode = document.createTextNode(text);\n    range.insertNode(textNode);\n    range.setStartAfter(textNode);\n    range.collapse(true);\n    selection.removeAllRanges();\n    selection.addRange(range);\n  }\n};\n\n/**\n * Returns true when at least one non-literal spin button is empty.\n */\nconst hasAnyEmptySpinButton = (\n  handlersRef: RefObject<\n    Map<\n      keyof Intl.DateTimeFormatPartTypesRegistry,\n      SpinButtonHandler | null | undefined\n    >\n  >,\n): boolean =>\n  Array.from(handlersRef.current?.entries() ?? []).some(\n    ([type, handler]) =>\n      handler &&\n      type !== 'literal' &&\n      handler.element.current?.textContent === '',\n  );\n\n/**\n * Pastes text into the expression contenteditable span, either at the cursor\n * position (when the selection is inside the span) or by replacing its content.\n */\nconst pasteIntoExpressionInput = (\n  element: RefObject<HTMLSpanElement | null>,\n  text: string,\n): void => {\n  if (element.current) {\n    const selection = window.getSelection();\n    const range = selection?.rangeCount ? selection.getRangeAt(0) : null;\n\n    if (\n      range &&\n      element.current.contains(range.startContainer) &&\n      element.current.contains(range.endContainer)\n    ) {\n      insertTextAtCursor(text);\n    } else {\n      element.current.textContent = text;\n      moveCursorToEnd(element.current);\n    }\n\n    element.current.dispatchEvent(new InputEvent('input', { bubbles: true }));\n  }\n};\n\n/**\n * Moves the cursor (selection) to the end of the given element's content.\n */\nconst moveCursorToEnd = (element: HTMLSpanElement | null | undefined) => {\n  if (element) {\n    const range = document.createRange();\n    const selection = window.getSelection();\n    range.selectNodeContents(element);\n    range.collapse(false);\n    selection?.removeAllRanges();\n    selection?.addRange(range);\n  }\n};\n\n/*\n * A hook that provides the default functionality for the DateTimeInput picker\n */\nexport const useDateTimeInput = (\n  props: DateTimeInputProps,\n  expressionInputRef: RefObject<HTMLSpanElement | null>,\n) => {\n  const {\n    disabled,\n    readOnly,\n    type,\n    onChange,\n    onLeadingEdge,\n    onTrailingEdge,\n    dateOnlyPasteAnchor = 'startOfDay',\n    onPasteComplete,\n    partialTimeAnchorDate,\n  }: DateTimeInputProps = props;\n  const precision = useDateTimePickerStore((state) =>\n    state.precision !== 'day' ? state.precision : 'milliseconds',\n  );\n\n  const ariaProps = useAriaLabelingProps(props);\n  const { regexDateTimeStart, maxValue, types } = useDateTimeParser({\n    type,\n  });\n  // ? INVESTIGATE: without the generic, building the visreg story viewer and unit-test typechecking fails,\n  // ? but the components:build target still succeeds without any issues -> why?\n  const [value, setValue] = useControllableState<TimeValue | null>(props);\n  const isControlled = props.value !== undefined;\n  const [valueType, setValueType] = useState(value?.type ?? 'expression');\n  const firstRun = useRef(true);\n  // Tracks the previous value content so that a parent re-render that passes a\n  // new object reference with the same content does not trigger formatExpressionValue\n  // and reset DOM edits that haven't propagated through React state yet.\n  const prevValueRef = useRef<TimeValue | null | undefined>(undefined);\n  const [expressionEmpty, setExpressionEmpty] = useState(\n    !expressionInputRef.current?.textContent,\n  );\n  const [inputValue, setInputValue] = useState('');\n  // Skips no-op setInputValue calls in the [value] effect. Passive-effect\n  // writes that React can't bail out on schedule SyncLane commits that\n  // accumulate on rapid keypresses.\n  const lastInputValueRef = useRef(inputValue);\n  lastInputValueRef.current = inputValue;\n  const pasteUndoRef = useRef<{\n    snapshot: UndoSnapshot;\n    focusTarget: Element | null;\n    expressionCursorOffset?: number;\n  } | null>(null);\n\n  useEffect(() => {\n    return () => {\n      pasteUndoRef.current = null;\n    };\n  }, []);\n\n  // Tracks the last valid absoluteDate to pass a stable, parseable ISO string\n  // to useDateTimePicker while props.value temporarily has absoluteDate:'' during\n  // partial spinbutton editing. Keeps useDateTimePicker.value prop unchanged so\n  // its internal useEffect doesn't re-run and clear the spinbuttons.\n  const lastValidAbsoluteDateRef = useRef<string | null>(\n    value?.type === 'iso8601' && value.absoluteDate ? value.absoluteDate : null,\n  );\n  // True only during the requestAnimationFrame window opened by switchToExpressionMode.\n  // Used to suppress stale spinbutton onChange callbacks that fire while the mode\n  // transition is in flight, without blocking legitimate restore/undo calls.\n  const isSwitchingToExpressionRef = useRef(false);\n\n  // Use valueType (local state) not value.type (controlled prop) as the gate \u2014\n  // the controlled prop can temporarily become type:'expression' when the store\n  // echoes back a partial invalid value for validation while we're still in\n  // spinbutton mode.\n  if (\n    valueType === 'iso8601' &&\n    value?.type === 'iso8601' &&\n    value.absoluteDate\n  ) {\n    lastValidAbsoluteDateRef.current = value.absoluteDate;\n  }\n  const spinButtonValue =\n    valueType === 'iso8601' ? lastValidAbsoluteDateRef.current : null;\n\n  // Stores the date parts filled in by a partial paste so the focus can target\n  // the first spin button that was not filled.\n  const pendingFocusPartsRef = useRef<Set<\n    keyof Intl.DateTimeFormatPartTypesRegistry\n  > | null>(null);\n\n  const {\n    spinButtons,\n    handlers: spinButtonHandlers,\n    empty: spinButtonsEmpty,\n    applyDateTime,\n    firstSpinButtonHandler,\n  } = useDateTimePicker({\n    type,\n    precision,\n    disabled,\n    readOnly,\n    valueType,\n    value: spinButtonValue,\n    onChange: (newIsoDateTime) => {\n      const newValue = getTimeValue(newIsoDateTime ?? undefined, precision);\n\n      if (newValue === null || newValue === undefined) {\n        return;\n      }\n\n      // Suppress stale spinbutton callbacks that fire while switchToExpressionMode\n      // is transitioning. Any other caller (e.g. undo restore) is allowed through.\n      if (isSwitchingToExpressionRef.current) {\n        return;\n      }\n\n      if (expressionInputRef.current) {\n        expressionInputRef.current.textContent = '';\n      }\n\n      // If undo (or another caller) pushes a value while we're in expression mode,\n      // switch back to spinbutton mode now.\n      if (valueType !== 'iso8601') {\n        setValueType('iso8601');\n      }\n\n      // Forward invalid values (empty string or unparseable partial locale string)\n      // to onChange so the store validates and shows errors, but skip setValue so\n      // props.value stays stable and spinbuttons are not cleared.\n      if (newIsoDateTime === '' || newValue?.absoluteDate === '') {\n        onChange?.(newValue);\n        return;\n      }\n\n      setInputValue(newValue.value);\n      // only update the value if the newTimeValue differs from the prev. one\n      setValue((prevValue) =>\n        isEqualTimeValue(prevValue, newValue) ? prevValue : newValue,\n      );\n    },\n    ...ariaProps,\n  });\n\n  const empty = useMemo(\n    () => (valueType === 'expression' ? expressionEmpty : spinButtonsEmpty),\n    [valueType, expressionEmpty, spinButtonsEmpty],\n  );\n\n  // Shared state reset when switching (back) to expression mode.\n  const resetToExpressionMode = useCallback(\n    (expressionEmpty = true) => {\n      setValueType('expression');\n      setValue(null);\n      setInputValue('');\n      setExpressionEmpty(expressionEmpty);\n      lastValidAbsoluteDateRef.current = null;\n    },\n    [setValue],\n  );\n\n  // Tracks the last absoluteDate seen by the controlled-value effect.\n  // Used to distinguish a genuine value re-application (absoluteDate changed,\n  // e.g. from '' back to a valid ISO string) from an outdated reference change\n  // (the store re-parsed a sibling field and created a new object with the\n  // same absoluteDate).\n  const prevAbsoluteDateRef = useRef<string | null>(null);\n\n  // Called on onBlur to sanitize the current expression. Declared here (before\n  // the [value] useEffect below) so that React Compiler's immutability analysis\n  // can confirm the reference is available at the time the effect is registered.\n  const formatExpressionValue = useCallback(\n    (value: TimeValue | null) => {\n      if (!expressionInputRef.current) {\n        return;\n      }\n      const formattedValue = value ? formatTimeValue(value) : '';\n      const currentValue = formatTimeValue(\n        expressionInputRef.current?.textContent ?? '',\n      );\n\n      // only update if the current value differs from the new value\n      // don't update the textnode while typing but allow e.g. pasting a new expression\n      if (currentValue !== formattedValue) {\n        expressionInputRef.current.textContent = formattedValue;\n      }\n    },\n    // no use in adding the expressionInputRef to the dep. array\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  // Keep a ref to the latest spinButtonHandlers so that focus helpers\n  // inside requestAnimationFrame always use the current map.\n  const spinButtonHandlersRef = useRef(spinButtonHandlers);\n  spinButtonHandlersRef.current = spinButtonHandlers;\n\n  // switch input mode based on controlled value change\n  useEffect(() => {\n    const prevValue = prevValueRef.current;\n    prevValueRef.current = value;\n\n    const applyInputValue = (next: string) => {\n      if (lastInputValueRef.current === next) {\n        return;\n      }\n      lastInputValueRef.current = next;\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setInputValue(next);\n    };\n\n    if (value?.type === 'iso8601' && !spinButtonsEmpty) {\n      applyInputValue(value.value);\n    }\n\n    // ignore if in uncontrolled mode\n    if (!isControlled || typeof value === 'string') {\n      return;\n    }\n\n    const prevAbsoluteDate = prevAbsoluteDateRef.current;\n    prevAbsoluteDateRef.current = value?.absoluteDate ?? null;\n\n    // reset input if value is null\n    if (!value) {\n      setValueType('expression');\n      formatExpressionValue(null);\n      const input = expressionInputRef.current?.textContent;\n      setExpressionEmpty(input === '');\n      applyDateTime(null);\n      lastValidAbsoluteDateRef.current = null;\n      return;\n    }\n\n    // Skip values with empty absoluteDate: partial/invalid intermediate states\n    // forwarded to the store for validation only. The spinbuttons manage their\n    // own display; reacting here would switch to 'expression' mode and call\n    // formatExpressionValue, clearing the display.\n    if (value.absoluteDate === '') {\n      return;\n    }\n\n    // apply value to expression\n    // the spinbutton update is handled within the useSpinButton hook internally\n    if (valueType !== value.type) {\n      setValueType(value.type);\n    }\n    applyInputValue(value.value);\n    if (value.type === 'expression') {\n      // Only reformat the DOM when the expression content has actually changed.\n      // A parent re-render that produces a new object reference with the same\n      // value (e.g. due to a sibling input's state update) must not overwrite\n      // DOM edits (e.g. partial cross-expression deletion) that haven't yet\n      // propagated back through React state.\n      if (!isEqualTimeValue(prevValue ?? null, value)) {\n        formatExpressionValue(value);\n      }\n      setExpressionEmpty(value.value === '');\n    } else if (\n      value.type === 'iso8601' &&\n      hasAnyEmptySpinButton(spinButtonHandlersRef) &&\n      prevAbsoluteDate !== value.absoluteDate\n    ) {\n      applyDateTime(value.absoluteDate);\n    }\n    // only react to outside value changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  // Focuses the first spin button that is still empty, or the last spin button when\n  // everything is filled in.\n  const focusFirstUnfilledSpinButton = useCallback(\n    (filledParts: Set<keyof Intl.DateTimeFormatPartTypesRegistry>) => {\n      const handlers = spinButtonHandlersRef.current;\n      for (const [type, handler] of handlers) {\n        if (\n          handler &&\n          type !== 'literal' &&\n          !filledParts.has(\n            type as keyof Intl.DateTimeFormatPartTypesRegistry,\n          ) &&\n          handler.element.current?.textContent === ''\n        ) {\n          handler.element.current?.focus();\n          return;\n        }\n      }\n      // Fallback: focus the last spin button when everything is filled.\n      let lastHandler: SpinButtonHandler | null = null;\n      for (const [, handler] of handlers) {\n        if (handler) {\n          lastHandler = handler;\n        }\n      }\n      lastHandler?.element?.current?.focus();\n    },\n    [],\n  );\n\n  // Focus the first unfilled spin button after a partial paste triggers a mode switch.\n  useEffect(() => {\n    const filledParts = pendingFocusPartsRef.current;\n    if (!filledParts || valueType !== 'iso8601') {\n      return;\n    }\n    pendingFocusPartsRef.current = null;\n\n    requestAnimationFrame(() => {\n      focusFirstUnfilledSpinButton(filledParts);\n    });\n  }, [valueType, focusFirstUnfilledSpinButton]);\n\n  const { selectAll: expressionInputSelectAll } =\n    useSelection(expressionInputRef);\n\n  // handles input events on the expression contenteditable span\n  const expressionInputHandler: ReactEventHandler<HTMLSpanElement> =\n    useCallback(() => {\n      if (!expressionInputRef.current) {\n        return;\n      }\n\n      const input = expressionInputRef.current.textContent ?? '';\n\n      // Remove <br> added by browser in contenteditable to ensure placeholder works\n      if (expressionInputRef.current.innerHTML === '<br>') {\n        expressionInputRef.current.innerHTML = '';\n      }\n\n      // fallback to expression if text content is removed\n      if (input === '') {\n        setValueType('expression');\n        setValue(null);\n        setExpressionEmpty(true);\n        return;\n      }\n\n      setExpressionEmpty(false);\n\n      // if the input starts like a valid datetime for the current locale, switch to the datetime picker\n      const [, carryOver] = regexDateTimeStart.exec(input) ?? [];\n      if (Number.parseInt(carryOver) <= maxValue) {\n        setValueType('iso8601');\n\n        // clear all spinbuttons\n        applyDateTime(null);\n        lastValidAbsoluteDateRef.current = null;\n\n        // get a cleaned and sorted list of spinbutton handlers\n        const sortedHandlers = types\n          .filter((type) => type !== 'literal')\n          .map((type) => spinButtonHandlers.get(type))\n          .filter(Boolean) as SpinButtonHandler[];\n        const [carryOverSB, focusSB] = sortedHandlers;\n\n        // carry over entered value to the next number spinbutton\n        isNumberSpinButton(carryOverSB) &&\n          carryOverSB.applyText(carryOver, true);\n\n        // clear expression input content\n        expressionInputRef.current.textContent = '';\n\n        // set focus after switch to expression mode happened\n        requestAnimationFrame(() => {\n          // set focus to second spinbutton\n          focusSB?.element.current?.focus();\n        });\n        return;\n      }\n\n      // If the user types a number followed by \":\", switch to the datetime picker\n      // with the anchor date pre-filled and the typed hour applied, then focus the\n      // minute spin button so the user can continue typing the time.\n      // The anchor date defaults to today but can be overridden via `partialTimeAnchorDate`\n      if (type !== 'date') {\n        const colonMatch = /^(\\d{1,2}):$/.exec(input);\n        if (colonMatch) {\n          const hour = Number.parseInt(colonMatch[1]);\n          if (hour <= 23) {\n            const base = partialTimeAnchorDate\n              ? new TZDateMini(partialTimeAnchorDate, getTimezone())\n              : TZDateMini.tz(getTimezone());\n            const iso = TZDateMini.tz(\n              getTimezone(),\n              base.getFullYear(),\n              base.getMonth(),\n              base.getDate(),\n              hour,\n              0,\n              0,\n              0,\n            ).toISOString();\n\n            const partsToUpdate = new Set<\n              keyof Intl.DateTimeFormatPartTypesRegistry\n            >(['day', 'month', 'year', 'hour']);\n\n            setValueType('iso8601');\n            expressionInputRef.current.textContent = '';\n            applyDateTime(iso, partsToUpdate);\n\n            requestAnimationFrame(() => {\n              focusFirstUnfilledSpinButton(partsToUpdate);\n            });\n            return;\n          }\n        }\n      }\n\n      // If the copied text contains the formatted date in the user's locale (e.g.,\n      // \"12/24/2024\" or \"25.12.2024\"), switch to iso8601 mode and apply the parsed date\n      // fields to the spin buttons.\n      const typedPartialDate = tryParsePartialDate(input);\n      if (typedPartialDate) {\n        const dateResult = partialDateTimeToISO(typedPartialDate, null);\n        if (dateResult) {\n          setValueType('iso8601');\n          expressionInputRef.current.textContent = '';\n          applyDateTime(dateResult.iso, dateResult.partsToUpdate);\n\n          requestAnimationFrame(() =>\n            focusFirstUnfilledSpinButton(dateResult.partsToUpdate ?? new Set()),\n          );\n          return;\n        }\n      }\n\n      // if input is a valid expression, update the internal value state\n      const newValue = getTimeValue(input, precision) ?? null;\n\n      if (newValue?.absoluteDate === '') {\n        onChange?.(newValue);\n      }\n      // only update the value if the newTimeValue differs from the prev. one\n      setValue((prevValue) =>\n        isEqualTimeValue(prevValue, newValue) ? prevValue : newValue,\n      );\n\n      setInputValue(input);\n    }, [\n      expressionInputRef,\n      regexDateTimeStart,\n      maxValue,\n      partialTimeAnchorDate,\n      precision,\n      type,\n      setValue,\n      applyDateTime,\n      focusFirstUnfilledSpinButton,\n      types,\n      spinButtonHandlers,\n      onChange,\n    ]);\n\n  // select expression text content on focus\n  const expressionOnFocusHandler: FocusEventHandler<HTMLSpanElement> =\n    useCallback(\n      (event: ReactFocusEvent<HTMLSpanElement>) => {\n        // If the current selection spans multiple nodes (e.g. a drag-select or\n        // Cmd+A across multiple spin buttons / expression inputs), don't collapse\n        // it to just this expression input.\n        const selection = window.getSelection();\n        const selectionSpansMultipleNodes =\n          selection !== null &&\n          selection.anchorNode !== selection.focusNode &&\n          selection.toString().length > 0;\n\n        // Also skip if we are in the middle of a programmatic focus + setBaseAndExtent\n        // (guarded by data-restoring-selection on the .strato-inputgroup root).\n        const isRestoringSelection =\n          (event.target as HTMLElement)\n            .closest('.strato-inputgroup')\n            ?.hasAttribute('data-restoring-selection') ?? false;\n\n        // Skip if the user already has a non-collapsed selection inside this\n        // expression input (e.g. drag-select or Shift+arrow within one field).\n        // Calling selectAll() here would override that intended partial selection.\n        const expressionInputEl = event.target as HTMLElement;\n        const hasPartialSelectionWithin =\n          selection !== null &&\n          !selection.isCollapsed &&\n          expressionInputEl.contains(selection.anchorNode) &&\n          expressionInputEl.contains(selection.focusNode);\n\n        if (\n          selectionSpansMultipleNodes ||\n          isRestoringSelection ||\n          hasPartialSelectionWithin\n        ) {\n          return;\n        }\n\n        expressionInputSelectAll();\n      },\n      [expressionInputSelectAll],\n    );\n\n  // sanitize textnode if content is an expression\n  const expressionOnBlurHandler: FocusEventHandler<HTMLSpanElement> =\n    useCallback(() => {\n      if (expressionInputRef.current && value?.type === 'expression') {\n        const currentExpressionInput =\n          expressionInputRef.current.textContent ?? '';\n        const isValidExpression = _parseTimeExpression(\n          currentExpressionInput.trim(),\n        );\n\n        if (isValidExpression) {\n          expressionInputRef.current.textContent = formatTimeValue(value);\n        }\n      }\n\n      // eslint annoyingly wants to add the ref to the dependency list\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n  // Shared paste logic used by both the DOM paste event handler and the\n  // imperative pasteText method on DateTimeInputRef. Returns true when the\n  // paste was handled (caller should preventDefault), false to let native\n  // paste proceed (step 4: digits in iso8601 mode).\n  const pasteText = useCallback(\n    (text: string, skipUndoCapture = false): boolean => {\n      if (readOnly) {\n        return false;\n      }\n\n      let trimmedData = normalizeISOInput(text.trim());\n      if (!trimmedData) {\n        return true;\n      }\n\n      // Pre-parse locale-specific partial date/time for normalization and step 5.\n      const partialDate = tryParsePartialDate(trimmedData);\n      const partialTime = tryParsePartialTime(trimmedData);\n      const partialResult =\n        partialDate || partialTime\n          ? partialDateTimeToISO(partialDate, partialTime)\n          : null;\n\n      // When the result is complete (no partsToUpdate), normalize to ISO so\n      // the existing ISO checks (steps 1\u20133) can handle it.\n      if (partialResult && !partialResult.partsToUpdate) {\n        trimmedData = partialResult.iso;\n      }\n\n      // Capture undo snapshot before any state mutations unless the caller\n      // already owns the snapshot (e.g. range-level paste handler).\n      if (!skipUndoCapture) {\n        const snapshot = captureUndoSnapshot(\n          spinButtonHandlers,\n          expressionInputRef.current,\n          value,\n          valueType,\n        );\n\n        pasteUndoRef.current = {\n          snapshot,\n          focusTarget: document.activeElement,\n          expressionCursorOffset: expressionInputRef.current\n            ? getExpressionCursorOffset(expressionInputRef.current)\n            : undefined,\n        };\n      }\n\n      // 1. Date-only paste (e.g. \"2025-01-01\")\n      // 2. Time-only paste (e.g. \"02:00Z\", \"14:30:00\")\n      const dateOnly = parseDateOnlyToISO(trimmedData, dateOnlyPasteAnchor);\n      const timeOnly = parseTimeOnlyToISO(trimmedData);\n      const date = dateOnly ?? timeOnly;\n\n      if (date) {\n        setValueType('iso8601');\n        // When spinbuttons are empty (expression mode), apply all parts so the\n        // full date is filled in.  When parts are already populated, only\n        // overwrite the date or time group that matches the pasted value.\n        let partsFilter: Set<Intl.DateTimeFormatPart['type']> | undefined;\n        if (!spinButtonsEmpty) {\n          partsFilter = dateOnly ? DATE_PART_TYPES : TIME_PART_TYPES;\n        }\n        applyDateTime(date, partsFilter);\n\n        // When only a subset of parts was applied, focus the first empty spin\n        // button instead of advancing. When all parts were applied skip the check.\n        if (partsFilter && hasAnyEmptySpinButton(spinButtonHandlersRef)) {\n          focusFirstUnfilledSpinButton(partsFilter);\n        } else {\n          onPasteComplete?.();\n        }\n\n        return true;\n      }\n\n      // 3. Full ISO datetime or expression (e.g. \"2025-01-01T02:00Z\", \"now()-1h\")\n      const nextValue = parseTimeAsTimeValue(\n        trimmedData,\n        TZDateMini.tz(getTimezone()).getTime(),\n        precision,\n      );\n\n      if (nextValue) {\n        setValueType(nextValue.type);\n        if (nextValue.type === 'expression') {\n          formatExpressionValue(nextValue);\n          moveCursorToEnd(expressionInputRef.current);\n          setValue(nextValue);\n        } else {\n          applyDateTime(nextValue.absoluteDate);\n        }\n        onPasteComplete?.();\n        return true;\n      }\n\n      // 4. Allow numbers to be pasted into the spin buttons\n      if (valueType === 'iso8601' && /^\\d+$/.test(trimmedData)) {\n        return false;\n      }\n\n      // 5. Partial date/time paste (e.g. \"25.12\", \"14:30\", \"25.12.2024 14:30\")\n      // partialResult was pre-computed above the ISO checks.\n      if (partialResult?.partsToUpdate) {\n        const { iso, partsToUpdate } = partialResult;\n        setValueType('iso8601');\n        applyDateTime(iso, partsToUpdate);\n\n        // Clear any spin button that was not explicitly present in the pasted\n        // text (i.e. was a placeholder token or simply absent). This ensures\n        // paste always overwrites: fields not carried by the pasted value are\n        // emptied rather than left at their previous content.\n        for (const [key, handler] of spinButtonHandlersRef.current) {\n          if (handler && !partsToUpdate.has(key)) {\n            handler.clearValue(true);\n          }\n        }\n\n        if (hasAnyEmptySpinButton(spinButtonHandlersRef)) {\n          requestAnimationFrame(() => {\n            focusFirstUnfilledSpinButton(partsToUpdate);\n          });\n        } else {\n          onPasteComplete?.();\n        }\n\n        return true;\n      }\n\n      // 6. Fallback: switch to expression mode and paste the raw string.\n      if (valueType === 'expression') {\n        if (expressionInputRef.current) {\n          pasteIntoExpressionInput(expressionInputRef, trimmedData);\n        }\n      } else {\n        setValueType('expression');\n        if (expressionInputRef.current) {\n          expressionInputRef.current.textContent = trimmedData;\n          expressionInputRef.current.focus();\n          moveCursorToEnd(expressionInputRef.current);\n          expressionInputRef.current.dispatchEvent(\n            new InputEvent('input', { bubbles: true }),\n          );\n        }\n      }\n\n      return true;\n    },\n    [\n      readOnly,\n      spinButtonHandlers,\n      expressionInputRef,\n      value,\n      dateOnlyPasteAnchor,\n      precision,\n      valueType,\n      setValue,\n      onPasteComplete,\n      formatExpressionValue,\n      applyDateTime,\n      spinButtonsEmpty,\n      focusFirstUnfilledSpinButton,\n    ],\n  );\n\n  // clipboard paste handler. apply clipboard content if formatted correctly\n  const onPaste: ClipboardEventHandler<HTMLSpanElement> = useCallback(\n    (event) => {\n      const data = event.clipboardData?.getData('text/plain');\n      if (!data) {\n        event.preventDefault();\n        return;\n      }\n      if (pasteText(data)) {\n        event.preventDefault();\n      }\n    },\n    [pasteText],\n  );\n\n  // Ctrl+Z / Cmd+Z handler to undo a paste operation.\n  const onPasteUndoKeyDown: ReactKeyboardEventHandler<HTMLSpanElement> =\n    useCallback(\n      (event) => {\n        const isCtrlZ = (event.ctrlKey || event.metaKey) && event.key === 'z';\n\n        if (!isCtrlZ) {\n          // Invalidates the paste snapshot for any other input.\n          if (pasteUndoRef.current && isContentModifyingKey(event)) {\n            pasteUndoRef.current = null;\n          }\n          return;\n        }\n\n        if (!pasteUndoRef.current) {\n          // No paste to undo \u2014 block native browser contenteditable undo.\n          event.preventDefault();\n          event.stopPropagation();\n          return;\n        }\n\n        const { snapshot, focusTarget, expressionCursorOffset } =\n          pasteUndoRef.current;\n        pasteUndoRef.current = null;\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        // Restore value type first so the correct UI mode is rendered.\n        setValueType(snapshot.valueType);\n\n        if (snapshot.valueType === 'iso8601') {\n          // Restore spin button values from the snapshot.\n          snapshot.spinButtonTexts.forEach((text, type) => {\n            const handler = spinButtonHandlers.get(type) ?? null;\n            if (!handler) {\n              return;\n            }\n            if (text === '') {\n              handler.clearValue(true);\n            } else if (handler.type === 'number') {\n              handler.applyText(text, true);\n            } else {\n              handler.searchValue(text[0] ?? '', true);\n            }\n          });\n        } else {\n          // Restore expression text content.\n          if (expressionInputRef.current) {\n            expressionInputRef.current.textContent = snapshot.expressionText;\n          }\n          setExpressionEmpty(snapshot.expressionText === '');\n        }\n\n        setValue(snapshot.value);\n        setInputValue(snapshot.value?.value ?? '');\n\n        requestAnimationFrame(() => {\n          // Restore focus after the mode-switch re-render.\n          if (\n            focusTarget instanceof HTMLElement &&\n            focusTarget !== document.activeElement\n          ) {\n            focusTarget.focus();\n          }\n\n          // Restore cursor position in the expression input\n          if (\n            snapshot.valueType === 'expression' &&\n            expressionCursorOffset !== undefined &&\n            expressionInputRef.current\n          ) {\n            restoreExpressionCursorOffset(\n              expressionInputRef.current,\n              expressionCursorOffset,\n            );\n          }\n        });\n      },\n      [\n        spinButtonHandlers,\n        expressionInputRef,\n        setValue,\n        setValueType,\n        setExpressionEmpty,\n        setInputValue,\n      ],\n    );\n\n  // Handle keyboard events on the expression input: prevent Enter and spin on ArrowUp/ArrowDown\n  const expressionOnKeyDownHandler: ReactKeyboardEventHandler<HTMLSpanElement> =\n    useCallback(\n      (event) => {\n        if (event.key === 'Enter') {\n          event.preventDefault();\n          return;\n        }\n\n        if (\n          onLeadingEdge &&\n          event.key === 'Backspace' &&\n          (expressionInputRef.current?.textContent ?? '') === ''\n        ) {\n          event.preventDefault();\n          requestAnimationFrame(() => onLeadingEdge?.());\n          return;\n        }\n\n        if (\n          onTrailingEdge &&\n          event.key === 'Delete' &&\n          (expressionInputRef.current?.textContent ?? '') === ''\n        ) {\n          event.preventDefault();\n          requestAnimationFrame(() => onTrailingEdge?.());\n          return;\n        }\n\n        if (event.key === 'ArrowLeft' && onLeadingEdge) {\n          const selection = window.getSelection();\n          // If cursor is at the start (offset 0), navigate to the previous input\n          if (selection?.anchorOffset === 0 && selection?.focusOffset === 0) {\n            onLeadingEdge();\n            event.preventDefault();\n            return;\n          }\n        }\n\n        if (event.key === 'ArrowRight') {\n          const selection = window.getSelection();\n          const textContent = expressionInputRef.current?.textContent ?? '';\n          // If cursor is at the end, navigate to the next input\n          if (selection?.anchorOffset === textContent.length) {\n            onTrailingEdge?.();\n            event.preventDefault();\n            return;\n          }\n        }\n\n        if (\n          (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n          !disabled &&\n          !readOnly\n        ) {\n          const element = expressionInputRef.current;\n          if (!element) {\n            return;\n          }\n\n          const currentText = element.textContent ?? '';\n          if (!currentText.trim()) {\n            return;\n          }\n\n          const direction: 1 | -1 = event.key === 'ArrowUp' ? 1 : -1;\n          const newText = spinExpressionValue(currentText, direction);\n\n          if (newText === null) {\n            return;\n          }\n\n          event.preventDefault();\n\n          // Preserve cursor position\n          const selection = window.getSelection();\n          const cursorOffset = selection?.focusOffset ?? 0;\n\n          // Update the text content and fire the input handler\n          element.textContent = newText;\n\n          // Restore cursor position (clamped to new text length)\n          requestAnimationFrame(() => {\n            const textNode = element.firstChild;\n            if (textNode && selection) {\n              const newOffset = Math.min(cursorOffset, newText.length);\n              const range = document.createRange();\n              range.setStart(textNode, newOffset);\n              range.collapse(true);\n              selection.removeAllRanges();\n              selection.addRange(range);\n            }\n          });\n\n          // Trigger the input handler to propagate the value change\n          element.dispatchEvent(new Event('input', { bubbles: true }));\n        }\n      },\n      [onLeadingEdge, expressionInputRef, disabled, readOnly, onTrailingEdge],\n    );\n\n  // focus the first spinbutton or the expression input based on the current input mode\n  const focus = useCallback(() => {\n    switch (valueType) {\n      case 'expression':\n        expressionInputRef.current?.focus();\n        break;\n      case 'iso8601':\n        firstSpinButtonHandler?.element?.current?.focus();\n        break;\n    }\n    // no need to pass the refs as dependency\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [valueType, firstSpinButtonHandler]);\n\n  /**\n   * Clears all spin buttons, switches to expression mode, and seeds the\n   * expression input with the provided text. Used when a bulk-delete leaves\n   * exactly one spin button filled \u2014 that remaining value is carried over as\n   * the expression seed rather than leaving a partial date.\n   */\n  const switchToExpressionMode = useCallback(\n    (text: string) => {\n      // setExpressionValue is an imperative expression-mode transition. Do not\n      // parse the text through getTimeValue here: numeric fallback text such as\n      // \"01\" can otherwise be treated as an ISO value and switch the input back\n      // to spin-button mode while a bulk clear is still settling.\n      const parsedValue = parseTimeAsTimeValue(\n        text,\n        TZDateMini.tz(getTimezone()).getTime(),\n        precision,\n      );\n      const newValue: TimeValue | null =\n        text !== ''\n          ? {\n              absoluteDate: parsedValue?.absoluteDate ?? '',\n              value: text,\n              type: 'expression',\n            }\n          : null;\n\n      for (const handler of spinButtonHandlers.values()) {\n        handler?.clearValue(false);\n        if (handler?.element.current) {\n          handler.element.current.textContent = '';\n        }\n      }\n\n      setInputValue(text);\n\n      if (valueType === 'expression') {\n        // Already in expression mode \u2014 apply synchronously so the next\n        // keypress is not dropped by a deferred rAF write.\n        setValue(newValue);\n        setExpressionEmpty(text === '');\n        if (expressionInputRef.current) {\n          expressionInputRef.current.textContent = text;\n        }\n        return;\n      }\n\n      // Suppress stale spinbutton callbacks during the transition;\n      // cleared after the rAF so undo calls are not blocked.\n      isSwitchingToExpressionRef.current = true;\n      // Update the backing value synchronously. If this waits for rAF, React 19\n      // can flush the previous ISO value first and rehydrate the cleared spin\n      // buttons before the expression input receives its fallback text.\n      setValue(newValue);\n      setExpressionEmpty(text === '');\n      setValueType('expression');\n      requestAnimationFrame(() => {\n        if (expressionInputRef.current) {\n          expressionInputRef.current.textContent = text;\n        }\n        isSwitchingToExpressionRef.current = false;\n      });\n    },\n    [expressionInputRef, precision, setValue, spinButtonHandlers, valueType],\n  );\n\n  // first initialization of the uncontrolled expression value on component mount\n  useEffect(() => {\n    if (isControlled || value?.type !== 'expression') {\n      return;\n    }\n    formatExpressionValue(value);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // if the spinbuttons are empty ...\n  useEffect(() => {\n    // Don't run the empty spinbutton check on component mount.\n    if (firstRun.current) {\n      firstRun.current = false;\n      return;\n    }\n\n    // ... switch to expression input\n    if (valueType === 'iso8601' && spinButtonsEmpty) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      resetToExpressionMode();\n\n      // wait until the expression input is visible to set the focus\n      setTimeout(() => {\n        expressionInputRef?.current?.focus();\n      });\n    }\n    // only react on empty state changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [spinButtonsEmpty]);\n\n  useEffect(() => {\n    if (valueType !== 'expression') {\n      return;\n    }\n\n    if (empty) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setInputValue('');\n      return;\n    }\n\n    if (expressionInputRef.current?.textContent) {\n      setInputValue(expressionInputRef.current?.textContent); // fixes validating initial expression value in the DateTimeRangePicker\n    }\n    // valueType can be excluded because empty already depends on it\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [empty]);\n\n  return {\n    empty,\n    spinButtons,\n    spinButtonHandlers,\n    value,\n    valueType,\n    inputValue,\n    expressionInputHandler,\n    expressionOnFocusHandler,\n    expressionOnBlurHandler,\n    expressionOnKeyDownHandler,\n    onPaste,\n    pasteText,\n    onPasteUndoKeyDown,\n    clearPasteUndo: () => {\n      pasteUndoRef.current = null;\n    },\n    focus,\n    switchToExpressionMode,\n    setInputValue,\n  };\n};\n"],
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport {\n  ClipboardEventHandler,\n  FocusEventHandler,\n  FocusEvent as ReactFocusEvent,\n  ReactEventHandler,\n  KeyboardEventHandler as ReactKeyboardEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type RefObject,\n} from 'react';\n\nimport {\n  _parseTimeExpression,\n  parseTimeAsTimeValue,\n} from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useDateTimeParser } from './useDateTimeParser.js';\nimport { spinExpressionValue } from './useExpressionSpin.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useControllableState } from '../../../core/hooks/useControllableState.js';\nimport { isEqualTimeValue } from '../../../core/time/helpers.js';\nimport { useDateTimePickerStore } from '../../../core/time/timeframeStore/useTimeframeStore.js';\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { useDateTimePicker } from '../../date-time-picker/hooks/useDateTimePicker.js';\nimport {\n  formatTimeValue,\n  getTimeValue,\n} from '../../forms-core/time/timeParser.js';\nimport { useSelection } from '../../spin-buttons/hooks/useSelection.js';\nimport type { NumberSpinButtonRef } from '../../spin-buttons/number-spin-button/types.js';\nimport type { SpinButtonHandler } from '../../spin-buttons/spin-button-group/types.js';\nimport {\n  captureUndoSnapshot,\n  isContentModifyingKey,\n  normalizeISOInput,\n  parseDateOnlyToISO,\n  parseTimeOnlyToISO,\n  partialDateTimeToISO,\n  tryParsePartialDate,\n  tryParsePartialTime,\n} from '../helpers.js';\nimport {\n  getExpressionCursorOffset,\n  restoreExpressionCursorOffset,\n} from '../selection-helpers.js';\nimport type { DateTimeInputProps, UndoSnapshot } from '../types.js';\n\nfunction isNumberSpinButton(\n  handler: SpinButtonHandler | undefined,\n): handler is NumberSpinButtonRef {\n  return handler?.type === 'number';\n}\n\nconst DATE_PART_TYPES: Set<Intl.DateTimeFormatPart['type']> = new Set([\n  'day',\n  'month',\n  'year',\n]);\nconst TIME_PART_TYPES: Set<Intl.DateTimeFormatPart['type']> = new Set([\n  'hour',\n  'minute',\n  'second',\n  'fractionalSecond',\n  'dayPeriod',\n]);\n\n/**\n * Inserts plain text at the current cursor position, replacing any active selection.\n */\nconst insertTextAtCursor = (text: string) => {\n  const selection = window.getSelection();\n  if (selection?.rangeCount) {\n    const range = selection.getRangeAt(0);\n    range.deleteContents();\n    const textNode = document.createTextNode(text);\n    range.insertNode(textNode);\n    range.setStartAfter(textNode);\n    range.collapse(true);\n    selection.removeAllRanges();\n    selection.addRange(range);\n  }\n};\n\n/**\n * Returns true when at least one non-literal spin button is empty.\n */\nconst hasAnyEmptySpinButton = (\n  handlersRef: RefObject<\n    Map<\n      keyof Intl.DateTimeFormatPartTypesRegistry,\n      SpinButtonHandler | null | undefined\n    >\n  >,\n): boolean =>\n  Array.from(handlersRef.current?.entries() ?? []).some(\n    ([type, handler]) =>\n      handler &&\n      type !== 'literal' &&\n      handler.element.current?.textContent === '',\n  );\n\n/**\n * Pastes text into the expression contenteditable span, either at the cursor\n * position (when the selection is inside the span) or by replacing its content.\n */\nconst pasteIntoExpressionInput = (\n  element: RefObject<HTMLSpanElement | null>,\n  text: string,\n): void => {\n  if (element.current) {\n    const selection = window.getSelection();\n    const range = selection?.rangeCount ? selection.getRangeAt(0) : null;\n\n    if (\n      range &&\n      element.current.contains(range.startContainer) &&\n      element.current.contains(range.endContainer)\n    ) {\n      insertTextAtCursor(text);\n    } else {\n      element.current.textContent = text;\n      moveCursorToEnd(element.current);\n    }\n\n    element.current.dispatchEvent(new InputEvent('input', { bubbles: true }));\n  }\n};\n\n/**\n * Moves the cursor (selection) to the end of the given element's content.\n */\nconst moveCursorToEnd = (element: HTMLSpanElement | null | undefined) => {\n  if (element) {\n    const range = document.createRange();\n    const selection = window.getSelection();\n    range.selectNodeContents(element);\n    range.collapse(false);\n    selection?.removeAllRanges();\n    selection?.addRange(range);\n  }\n};\n\n/*\n * A hook that provides the default functionality for the DateTimeInput picker\n */\nexport const useDateTimeInput = (\n  props: DateTimeInputProps,\n  expressionInputRef: RefObject<HTMLSpanElement | null>,\n) => {\n  const {\n    disabled,\n    readOnly,\n    type,\n    onChange,\n    onLeadingEdge,\n    onTrailingEdge,\n    dateOnlyPasteAnchor = 'startOfDay',\n    onPasteComplete,\n    partialTimeAnchorDate,\n  }: DateTimeInputProps = props;\n  const precision = useDateTimePickerStore((state) =>\n    state.precision !== 'day' ? state.precision : 'milliseconds',\n  );\n\n  const ariaProps = useAriaLabelingProps(props);\n  const { regexDateTimeStart, maxValue, types } = useDateTimeParser({\n    type,\n  });\n  // ? INVESTIGATE: without the generic, building the visreg story viewer and unit-test typechecking fails,\n  // ? but the components:build target still succeeds without any issues -> why?\n  const [value, setValue] = useControllableState<TimeValue | null>(props);\n  const isControlled = props.value !== undefined;\n  const [valueType, setValueType] = useState(value?.type ?? 'expression');\n  const firstRun = useRef(true);\n  // Tracks the previous value content so that a parent re-render that passes a\n  // new object reference with the same content does not trigger formatExpressionValue\n  // and reset DOM edits that haven't propagated through React state yet.\n  const prevValueRef = useRef<TimeValue | null | undefined>(undefined);\n  const [expressionEmpty, setExpressionEmpty] = useState(\n    !expressionInputRef.current?.textContent,\n  );\n  const [inputValue, setInputValue] = useState('');\n  // Skips no-op setInputValue calls in the [value] effect. Passive-effect\n  // writes that React can't bail out on schedule SyncLane commits that\n  // accumulate on rapid keypresses.\n  const lastInputValueRef = useRef(inputValue);\n  lastInputValueRef.current = inputValue;\n  const pasteUndoRef = useRef<{\n    snapshot: UndoSnapshot;\n    focusTarget: Element | null;\n    expressionCursorOffset?: number;\n  } | null>(null);\n\n  useEffect(() => {\n    return () => {\n      pasteUndoRef.current = null;\n    };\n  }, []);\n\n  // Tracks the last valid absoluteDate to pass a stable, parseable ISO string\n  // to useDateTimePicker while props.value temporarily has absoluteDate:'' during\n  // partial spinbutton editing. Keeps useDateTimePicker.value prop unchanged so\n  // its internal useEffect doesn't re-run and clear the spinbuttons.\n  const lastValidAbsoluteDateRef = useRef<string | null>(\n    value?.type === 'iso8601' && value.absoluteDate ? value.absoluteDate : null,\n  );\n  // True only during the requestAnimationFrame window opened by switchToExpressionMode.\n  // Used to suppress stale spinbutton onChange callbacks that fire while the mode\n  // transition is in flight, without blocking legitimate restore/undo calls.\n  const isSwitchingToExpressionRef = useRef(false);\n\n  // Use valueType (local state) not value.type (controlled prop) as the gate \u2014\n  // the controlled prop can temporarily become type:'expression' when the store\n  // echoes back a partial invalid value for validation while we're still in\n  // spinbutton mode.\n  if (\n    valueType === 'iso8601' &&\n    value?.type === 'iso8601' &&\n    value.absoluteDate\n  ) {\n    lastValidAbsoluteDateRef.current = value.absoluteDate;\n  }\n  const spinButtonValue =\n    valueType === 'iso8601' ? lastValidAbsoluteDateRef.current : null;\n\n  // Stores the date parts filled in by a partial paste so the focus can target\n  // the first spin button that was not filled.\n  const pendingFocusPartsRef = useRef<Set<\n    keyof Intl.DateTimeFormatPartTypesRegistry\n  > | null>(null);\n\n  const {\n    spinButtons,\n    handlers: spinButtonHandlers,\n    empty: spinButtonsEmpty,\n    applyDateTime,\n    firstSpinButtonHandler,\n  } = useDateTimePicker({\n    type,\n    precision,\n    disabled,\n    readOnly,\n    valueType,\n    value: spinButtonValue,\n    onChange: (newIsoDateTime) => {\n      const newValue = getTimeValue(newIsoDateTime ?? undefined, precision);\n\n      if (newValue === null || newValue === undefined) {\n        return;\n      }\n\n      // Suppress stale spinbutton callbacks that fire while switchToExpressionMode\n      // is transitioning. Any other caller (e.g. undo restore) is allowed through.\n      if (isSwitchingToExpressionRef.current) {\n        return;\n      }\n\n      if (expressionInputRef.current) {\n        expressionInputRef.current.textContent = '';\n      }\n\n      // If undo (or another caller) pushes a value while we're in expression mode,\n      // switch back to spinbutton mode now.\n      if (valueType !== 'iso8601') {\n        setValueType('iso8601');\n      }\n\n      // Forward invalid values (empty string or unparseable partial locale string)\n      // to onChange so the store validates and shows errors, but skip setValue so\n      // props.value stays stable and spinbuttons are not cleared.\n      if (newIsoDateTime === '' || newValue?.absoluteDate === '') {\n        onChange?.(newValue);\n        return;\n      }\n\n      setInputValue(newValue.value);\n      // only update the value if the newTimeValue differs from the prev. one\n      setValue((prevValue) =>\n        isEqualTimeValue(prevValue, newValue) ? prevValue : newValue,\n      );\n    },\n    ...ariaProps,\n  });\n\n  const empty = useMemo(\n    () => (valueType === 'expression' ? expressionEmpty : spinButtonsEmpty),\n    [valueType, expressionEmpty, spinButtonsEmpty],\n  );\n\n  // Shared state reset when switching (back) to expression mode.\n  const resetToExpressionMode = useCallback(\n    (expressionEmpty = true) => {\n      setValueType('expression');\n      setValue(null);\n      setInputValue('');\n      setExpressionEmpty(expressionEmpty);\n      lastValidAbsoluteDateRef.current = null;\n    },\n    [setValue],\n  );\n\n  // Tracks the last absoluteDate seen by the controlled-value effect.\n  // Used to distinguish a genuine value re-application (absoluteDate changed,\n  // e.g. from '' back to a valid ISO string) from an outdated reference change\n  // (the store re-parsed a sibling field and created a new object with the\n  // same absoluteDate).\n  const prevAbsoluteDateRef = useRef<string | null>(null);\n\n  // Called on onBlur to sanitize the current expression. Declared here (before\n  // the [value] useEffect below) so that React Compiler's immutability analysis\n  // can confirm the reference is available at the time the effect is registered.\n  const formatExpressionValue = useCallback(\n    (value: TimeValue | null) => {\n      if (!expressionInputRef.current) {\n        return;\n      }\n      const formattedValue = value ? formatTimeValue(value) : '';\n      const currentValue = formatTimeValue(\n        expressionInputRef.current?.textContent ?? '',\n      );\n\n      // only update if the current value differs from the new value\n      // don't update the textnode while typing but allow e.g. pasting a new expression\n      if (currentValue !== formattedValue) {\n        expressionInputRef.current.textContent = formattedValue;\n      }\n    },\n    // no use in adding the expressionInputRef to the dep. array\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  // Keep a ref to the latest spinButtonHandlers so that focus helpers\n  // inside requestAnimationFrame always use the current map.\n  const spinButtonHandlersRef = useRef(spinButtonHandlers);\n  spinButtonHandlersRef.current = spinButtonHandlers;\n\n  // switch input mode based on controlled value change\n  useEffect(() => {\n    const prevValue = prevValueRef.current;\n    prevValueRef.current = value;\n\n    const applyInputValue = (next: string) => {\n      if (lastInputValueRef.current === next) {\n        return;\n      }\n      lastInputValueRef.current = next;\n      // oxlint-disable-next-line react-hooks/set-state-in-effect\n      setInputValue(next);\n    };\n\n    if (value?.type === 'iso8601' && !spinButtonsEmpty) {\n      applyInputValue(value.value);\n    }\n\n    // ignore if in uncontrolled mode\n    if (!isControlled || typeof value === 'string') {\n      return;\n    }\n\n    const prevAbsoluteDate = prevAbsoluteDateRef.current;\n    prevAbsoluteDateRef.current = value?.absoluteDate ?? null;\n\n    // reset input if value is null\n    if (!value) {\n      setValueType('expression');\n      formatExpressionValue(null);\n      const input = expressionInputRef.current?.textContent;\n      setExpressionEmpty(input === '');\n      applyDateTime(null);\n      lastValidAbsoluteDateRef.current = null;\n      return;\n    }\n\n    // Skip values with empty absoluteDate: partial/invalid intermediate states\n    // forwarded to the store for validation only. The spinbuttons manage their\n    // own display; reacting here would switch to 'expression' mode and call\n    // formatExpressionValue, clearing the display.\n    if (value.absoluteDate === '') {\n      return;\n    }\n\n    // apply value to expression\n    // the spinbutton update is handled within the useSpinButton hook internally\n    if (valueType !== value.type) {\n      setValueType(value.type);\n    }\n    applyInputValue(value.value);\n    if (value.type === 'expression') {\n      // Only reformat the DOM when the expression content has actually changed.\n      // A parent re-render that produces a new object reference with the same\n      // value (e.g. due to a sibling input's state update) must not overwrite\n      // DOM edits (e.g. partial cross-expression deletion) that haven't yet\n      // propagated back through React state.\n      if (!isEqualTimeValue(prevValue ?? null, value)) {\n        formatExpressionValue(value);\n      }\n      setExpressionEmpty(value.value === '');\n    } else if (\n      value.type === 'iso8601' &&\n      hasAnyEmptySpinButton(spinButtonHandlersRef) &&\n      prevAbsoluteDate !== value.absoluteDate\n    ) {\n      applyDateTime(value.absoluteDate);\n    }\n    // only react to outside value changes\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  // Focuses the first spin button that is still empty, or the last spin button when\n  // everything is filled in.\n  const focusFirstUnfilledSpinButton = useCallback(\n    (filledParts: Set<keyof Intl.DateTimeFormatPartTypesRegistry>) => {\n      const handlers = spinButtonHandlersRef.current;\n      for (const [type, handler] of handlers) {\n        if (\n          handler &&\n          type !== 'literal' &&\n          !filledParts.has(\n            type as keyof Intl.DateTimeFormatPartTypesRegistry,\n          ) &&\n          handler.element.current?.textContent === ''\n        ) {\n          handler.element.current?.focus();\n          return;\n        }\n      }\n      // Fallback: focus the last spin button when everything is filled.\n      let lastHandler: SpinButtonHandler | null = null;\n      for (const [, handler] of handlers) {\n        if (handler) {\n          lastHandler = handler;\n        }\n      }\n      lastHandler?.element?.current?.focus();\n    },\n    [],\n  );\n\n  // Focus the first unfilled spin button after a partial paste triggers a mode switch.\n  useEffect(() => {\n    const filledParts = pendingFocusPartsRef.current;\n    if (!filledParts || valueType !== 'iso8601') {\n      return;\n    }\n    pendingFocusPartsRef.current = null;\n\n    requestAnimationFrame(() => {\n      focusFirstUnfilledSpinButton(filledParts);\n    });\n  }, [valueType, focusFirstUnfilledSpinButton]);\n\n  const { selectAll: expressionInputSelectAll } =\n    useSelection(expressionInputRef);\n\n  // handles input events on the expression contenteditable span\n  const expressionInputHandler: ReactEventHandler<HTMLSpanElement> =\n    useCallback(() => {\n      if (!expressionInputRef.current) {\n        return;\n      }\n\n      const input = expressionInputRef.current.textContent ?? '';\n\n      // Remove <br> added by browser in contenteditable to ensure placeholder works\n      if (expressionInputRef.current.innerHTML === '<br>') {\n        expressionInputRef.current.innerHTML = '';\n      }\n\n      // fallback to expression if text content is removed\n      if (input === '') {\n        setValueType('expression');\n        setValue(null);\n        setExpressionEmpty(true);\n        return;\n      }\n\n      setExpressionEmpty(false);\n\n      // if the input starts like a valid datetime for the current locale, switch to the datetime picker\n      const [, carryOver] = regexDateTimeStart.exec(input) ?? [];\n      if (Number.parseInt(carryOver) <= maxValue) {\n        setValueType('iso8601');\n\n        // clear all spinbuttons\n        applyDateTime(null);\n        lastValidAbsoluteDateRef.current = null;\n\n        // get a cleaned and sorted list of spinbutton handlers\n        const sortedHandlers = types\n          .filter((type) => type !== 'literal')\n          .map((type) => spinButtonHandlers.get(type))\n          .filter(Boolean) as SpinButtonHandler[];\n        const [carryOverSB, focusSB] = sortedHandlers;\n\n        // carry over entered value to the next number spinbutton\n        isNumberSpinButton(carryOverSB) &&\n          carryOverSB.applyText(carryOver, true);\n\n        // clear expression input content\n        expressionInputRef.current.textContent = '';\n\n        // set focus after switch to expression mode happened\n        requestAnimationFrame(() => {\n          // set focus to second spinbutton\n          focusSB?.element.current?.focus();\n        });\n        return;\n      }\n\n      // If the user types a number followed by \":\", switch to the datetime picker\n      // with the anchor date pre-filled and the typed hour applied, then focus the\n      // minute spin button so the user can continue typing the time.\n      // The anchor date defaults to today but can be overridden via `partialTimeAnchorDate`\n      if (type !== 'date') {\n        const colonMatch = /^(\\d{1,2}):$/.exec(input);\n        if (colonMatch) {\n          const hour = Number.parseInt(colonMatch[1]);\n          if (hour <= 23) {\n            const base = partialTimeAnchorDate\n              ? new TZDateMini(partialTimeAnchorDate, getTimezone())\n              : TZDateMini.tz(getTimezone());\n            const iso = TZDateMini.tz(\n              getTimezone(),\n              base.getFullYear(),\n              base.getMonth(),\n              base.getDate(),\n              hour,\n              0,\n              0,\n              0,\n            ).toISOString();\n\n            const partsToUpdate = new Set<\n              keyof Intl.DateTimeFormatPartTypesRegistry\n            >(['day', 'month', 'year', 'hour']);\n\n            setValueType('iso8601');\n            expressionInputRef.current.textContent = '';\n            applyDateTime(iso, partsToUpdate);\n\n            requestAnimationFrame(() => {\n              focusFirstUnfilledSpinButton(partsToUpdate);\n            });\n            return;\n          }\n        }\n      }\n\n      // If the copied text contains the formatted date in the user's locale (e.g.,\n      // \"12/24/2024\" or \"25.12.2024\"), switch to iso8601 mode and apply the parsed date\n      // fields to the spin buttons.\n      const typedPartialDate = tryParsePartialDate(input);\n      if (typedPartialDate) {\n        const dateResult = partialDateTimeToISO(typedPartialDate, null);\n        if (dateResult) {\n          setValueType('iso8601');\n          expressionInputRef.current.textContent = '';\n          applyDateTime(dateResult.iso, dateResult.partsToUpdate);\n\n          requestAnimationFrame(() =>\n            focusFirstUnfilledSpinButton(dateResult.partsToUpdate ?? new Set()),\n          );\n          return;\n        }\n      }\n\n      // if input is a valid expression, update the internal value state\n      const newValue = getTimeValue(input, precision) ?? null;\n\n      if (newValue?.absoluteDate === '') {\n        onChange?.(newValue);\n      }\n      // only update the value if the newTimeValue differs from the prev. one\n      setValue((prevValue) =>\n        isEqualTimeValue(prevValue, newValue) ? prevValue : newValue,\n      );\n\n      setInputValue(input);\n    }, [\n      expressionInputRef,\n      regexDateTimeStart,\n      maxValue,\n      partialTimeAnchorDate,\n      precision,\n      type,\n      setValue,\n      applyDateTime,\n      focusFirstUnfilledSpinButton,\n      types,\n      spinButtonHandlers,\n      onChange,\n    ]);\n\n  // select expression text content on focus\n  const expressionOnFocusHandler: FocusEventHandler<HTMLSpanElement> =\n    useCallback(\n      (event: ReactFocusEvent<HTMLSpanElement>) => {\n        // If the current selection spans multiple nodes (e.g. a drag-select or\n        // Cmd+A across multiple spin buttons / expression inputs), don't collapse\n        // it to just this expression input.\n        const selection = window.getSelection();\n        const selectionSpansMultipleNodes =\n          selection !== null &&\n          selection.anchorNode !== selection.focusNode &&\n          selection.toString().length > 0;\n\n        // Also skip if we are in the middle of a programmatic focus + setBaseAndExtent\n        // (guarded by data-restoring-selection on the .strato-inputgroup root).\n        const isRestoringSelection =\n          (event.target as HTMLElement)\n            .closest('.strato-inputgroup')\n            ?.hasAttribute('data-restoring-selection') ?? false;\n\n        // Skip if the user already has a non-collapsed selection inside this\n        // expression input (e.g. drag-select or Shift+arrow within one field).\n        // Calling selectAll() here would override that intended partial selection.\n        const expressionInputEl = event.target as HTMLElement;\n        const hasPartialSelectionWithin =\n          selection !== null &&\n          !selection.isCollapsed &&\n          expressionInputEl.contains(selection.anchorNode) &&\n          expressionInputEl.contains(selection.focusNode);\n\n        if (\n          selectionSpansMultipleNodes ||\n          isRestoringSelection ||\n          hasPartialSelectionWithin\n        ) {\n          return;\n        }\n\n        expressionInputSelectAll();\n      },\n      [expressionInputSelectAll],\n    );\n\n  // sanitize textnode if content is an expression\n  const expressionOnBlurHandler: FocusEventHandler<HTMLSpanElement> =\n    useCallback(() => {\n      if (expressionInputRef.current && value?.type === 'expression') {\n        const currentExpressionInput =\n          expressionInputRef.current.textContent ?? '';\n        const isValidExpression = _parseTimeExpression(\n          currentExpressionInput.trim(),\n        );\n\n        if (isValidExpression) {\n          expressionInputRef.current.textContent = formatTimeValue(value);\n        }\n      }\n\n      // eslint annoyingly wants to add the ref to the dependency list\n      // oxlint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n  // Shared paste logic used by both the DOM paste event handler and the\n  // imperative pasteText method on DateTimeInputRef. Returns true when the\n  // paste was handled (caller should preventDefault), false to let native\n  // paste proceed (step 4: digits in iso8601 mode).\n  const pasteText = useCallback(\n    (text: string, skipUndoCapture = false): boolean => {\n      if (readOnly) {\n        return false;\n      }\n\n      let trimmedData = normalizeISOInput(text.trim());\n      if (!trimmedData) {\n        return true;\n      }\n\n      // Pre-parse locale-specific partial date/time for normalization and step 5.\n      const partialDate = tryParsePartialDate(trimmedData);\n      const partialTime = tryParsePartialTime(trimmedData);\n      const partialResult =\n        partialDate || partialTime\n          ? partialDateTimeToISO(partialDate, partialTime)\n          : null;\n\n      // When the result is complete (no partsToUpdate), normalize to ISO so\n      // the existing ISO checks (steps 1\u20133) can handle it.\n      if (partialResult && !partialResult.partsToUpdate) {\n        trimmedData = partialResult.iso;\n      }\n\n      // Capture undo snapshot before any state mutations unless the caller\n      // already owns the snapshot (e.g. range-level paste handler).\n      if (!skipUndoCapture) {\n        const snapshot = captureUndoSnapshot(\n          spinButtonHandlers,\n          expressionInputRef.current,\n          value,\n          valueType,\n        );\n\n        pasteUndoRef.current = {\n          snapshot,\n          focusTarget: document.activeElement,\n          expressionCursorOffset: expressionInputRef.current\n            ? getExpressionCursorOffset(expressionInputRef.current)\n            : undefined,\n        };\n      }\n\n      // 1. Date-only paste (e.g. \"2025-01-01\")\n      // 2. Time-only paste (e.g. \"02:00Z\", \"14:30:00\")\n      const dateOnly = parseDateOnlyToISO(trimmedData, dateOnlyPasteAnchor);\n      const timeOnly = parseTimeOnlyToISO(trimmedData);\n      const date = dateOnly ?? timeOnly;\n\n      if (date) {\n        setValueType('iso8601');\n        // When spinbuttons are empty (expression mode), apply all parts so the\n        // full date is filled in.  When parts are already populated, only\n        // overwrite the date or time group that matches the pasted value.\n        let partsFilter: Set<Intl.DateTimeFormatPart['type']> | undefined;\n        if (!spinButtonsEmpty) {\n          partsFilter = dateOnly ? DATE_PART_TYPES : TIME_PART_TYPES;\n        }\n        applyDateTime(date, partsFilter);\n\n        // When only a subset of parts was applied, focus the first empty spin\n        // button instead of advancing. When all parts were applied skip the check.\n        if (partsFilter && hasAnyEmptySpinButton(spinButtonHandlersRef)) {\n          focusFirstUnfilledSpinButton(partsFilter);\n        } else {\n          onPasteComplete?.();\n        }\n\n        return true;\n      }\n\n      // 3. Full ISO datetime or expression (e.g. \"2025-01-01T02:00Z\", \"now()-1h\")\n      const nextValue = parseTimeAsTimeValue(\n        trimmedData,\n        TZDateMini.tz(getTimezone()).getTime(),\n        precision,\n      );\n\n      if (nextValue) {\n        setValueType(nextValue.type);\n        if (nextValue.type === 'expression') {\n          formatExpressionValue(nextValue);\n          moveCursorToEnd(expressionInputRef.current);\n          setValue(nextValue);\n        } else {\n          applyDateTime(nextValue.absoluteDate);\n        }\n        onPasteComplete?.();\n        return true;\n      }\n\n      // 4. Allow numbers to be pasted into the spin buttons\n      if (valueType === 'iso8601' && /^\\d+$/.test(trimmedData)) {\n        return false;\n      }\n\n      // 5. Partial date/time paste (e.g. \"25.12\", \"14:30\", \"25.12.2024 14:30\")\n      // partialResult was pre-computed above the ISO checks.\n      if (partialResult?.partsToUpdate) {\n        const { iso, partsToUpdate } = partialResult;\n        setValueType('iso8601');\n        applyDateTime(iso, partsToUpdate);\n\n        // Clear any spin button that was not explicitly present in the pasted\n        // text (i.e. was a placeholder token or simply absent). This ensures\n        // paste always overwrites: fields not carried by the pasted value are\n        // emptied rather than left at their previous content.\n        for (const [key, handler] of spinButtonHandlersRef.current) {\n          if (handler && !partsToUpdate.has(key)) {\n            handler.clearValue(true);\n          }\n        }\n\n        if (hasAnyEmptySpinButton(spinButtonHandlersRef)) {\n          requestAnimationFrame(() => {\n            focusFirstUnfilledSpinButton(partsToUpdate);\n          });\n        } else {\n          onPasteComplete?.();\n        }\n\n        return true;\n      }\n\n      // 6. Fallback: switch to expression mode and paste the raw string.\n      if (valueType === 'expression') {\n        if (expressionInputRef.current) {\n          pasteIntoExpressionInput(expressionInputRef, trimmedData);\n        }\n      } else {\n        setValueType('expression');\n        if (expressionInputRef.current) {\n          expressionInputRef.current.textContent = trimmedData;\n          expressionInputRef.current.focus();\n          moveCursorToEnd(expressionInputRef.current);\n          expressionInputRef.current.dispatchEvent(\n            new InputEvent('input', { bubbles: true }),\n          );\n        }\n      }\n\n      return true;\n    },\n    [\n      readOnly,\n      spinButtonHandlers,\n      expressionInputRef,\n      value,\n      dateOnlyPasteAnchor,\n      precision,\n      valueType,\n      setValue,\n      onPasteComplete,\n      formatExpressionValue,\n      applyDateTime,\n      spinButtonsEmpty,\n      focusFirstUnfilledSpinButton,\n    ],\n  );\n\n  // clipboard paste handler. apply clipboard content if formatted correctly\n  const onPaste: ClipboardEventHandler<HTMLSpanElement> = useCallback(\n    (event) => {\n      const data = event.clipboardData?.getData('text/plain');\n      if (!data) {\n        event.preventDefault();\n        return;\n      }\n      if (pasteText(data)) {\n        event.preventDefault();\n      }\n    },\n    [pasteText],\n  );\n\n  // Ctrl+Z / Cmd+Z handler to undo a paste operation.\n  const onPasteUndoKeyDown: ReactKeyboardEventHandler<HTMLSpanElement> =\n    useCallback(\n      (event) => {\n        const isCtrlZ = (event.ctrlKey || event.metaKey) && event.key === 'z';\n\n        if (!isCtrlZ) {\n          // Invalidates the paste snapshot for any other input.\n          if (pasteUndoRef.current && isContentModifyingKey(event)) {\n            pasteUndoRef.current = null;\n          }\n          return;\n        }\n\n        if (!pasteUndoRef.current) {\n          // No paste to undo \u2014 block native browser contenteditable undo.\n          event.preventDefault();\n          event.stopPropagation();\n          return;\n        }\n\n        const { snapshot, focusTarget, expressionCursorOffset } =\n          pasteUndoRef.current;\n        pasteUndoRef.current = null;\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        // Restore value type first so the correct UI mode is rendered.\n        setValueType(snapshot.valueType);\n\n        if (snapshot.valueType === 'iso8601') {\n          // Restore spin button values from the snapshot.\n          snapshot.spinButtonTexts.forEach((text, type) => {\n            const handler = spinButtonHandlers.get(type) ?? null;\n            if (!handler) {\n              return;\n            }\n            if (text === '') {\n              handler.clearValue(true);\n            } else if (handler.type === 'number') {\n              handler.applyText(text, true);\n            } else {\n              handler.searchValue(text[0] ?? '', true);\n            }\n          });\n        } else {\n          // Restore expression text content.\n          if (expressionInputRef.current) {\n            expressionInputRef.current.textContent = snapshot.expressionText;\n          }\n          setExpressionEmpty(snapshot.expressionText === '');\n        }\n\n        setValue(snapshot.value);\n        setInputValue(snapshot.value?.value ?? '');\n\n        requestAnimationFrame(() => {\n          // Restore focus after the mode-switch re-render.\n          if (\n            focusTarget instanceof HTMLElement &&\n            focusTarget !== document.activeElement\n          ) {\n            focusTarget.focus();\n          }\n\n          // Restore cursor position in the expression input\n          if (\n            snapshot.valueType === 'expression' &&\n            expressionCursorOffset !== undefined &&\n            expressionInputRef.current\n          ) {\n            restoreExpressionCursorOffset(\n              expressionInputRef.current,\n              expressionCursorOffset,\n            );\n          }\n        });\n      },\n      [\n        spinButtonHandlers,\n        expressionInputRef,\n        setValue,\n        setValueType,\n        setExpressionEmpty,\n        setInputValue,\n      ],\n    );\n\n  // Handle keyboard events on the expression input: prevent Enter and spin on ArrowUp/ArrowDown\n  const expressionOnKeyDownHandler: ReactKeyboardEventHandler<HTMLSpanElement> =\n    useCallback(\n      (event) => {\n        if (event.key === 'Enter') {\n          event.preventDefault();\n          return;\n        }\n\n        if (\n          onLeadingEdge &&\n          event.key === 'Backspace' &&\n          (expressionInputRef.current?.textContent ?? '') === ''\n        ) {\n          event.preventDefault();\n          requestAnimationFrame(() => onLeadingEdge?.());\n          return;\n        }\n\n        if (\n          onTrailingEdge &&\n          event.key === 'Delete' &&\n          (expressionInputRef.current?.textContent ?? '') === ''\n        ) {\n          event.preventDefault();\n          requestAnimationFrame(() => onTrailingEdge?.());\n          return;\n        }\n\n        if (event.key === 'ArrowLeft' && onLeadingEdge) {\n          const selection = window.getSelection();\n          // If cursor is at the start (offset 0), navigate to the previous input\n          if (selection?.anchorOffset === 0 && selection?.focusOffset === 0) {\n            onLeadingEdge();\n            event.preventDefault();\n            return;\n          }\n        }\n\n        if (event.key === 'ArrowRight') {\n          const selection = window.getSelection();\n          const textContent = expressionInputRef.current?.textContent ?? '';\n          // If cursor is at the end, navigate to the next input\n          if (selection?.anchorOffset === textContent.length) {\n            onTrailingEdge?.();\n            event.preventDefault();\n            return;\n          }\n        }\n\n        if (\n          (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n          !disabled &&\n          !readOnly\n        ) {\n          const element = expressionInputRef.current;\n          if (!element) {\n            return;\n          }\n\n          const currentText = element.textContent ?? '';\n          if (!currentText.trim()) {\n            return;\n          }\n\n          const direction: 1 | -1 = event.key === 'ArrowUp' ? 1 : -1;\n          const newText = spinExpressionValue(currentText, direction);\n\n          if (newText === null) {\n            return;\n          }\n\n          event.preventDefault();\n\n          // Preserve cursor position\n          const selection = window.getSelection();\n          const cursorOffset = selection?.focusOffset ?? 0;\n\n          // Update the text content and fire the input handler\n          element.textContent = newText;\n\n          // Restore cursor position (clamped to new text length)\n          requestAnimationFrame(() => {\n            const textNode = element.firstChild;\n            if (textNode && selection) {\n              const newOffset = Math.min(cursorOffset, newText.length);\n              const range = document.createRange();\n              range.setStart(textNode, newOffset);\n              range.collapse(true);\n              selection.removeAllRanges();\n              selection.addRange(range);\n            }\n          });\n\n          // Trigger the input handler to propagate the value change\n          element.dispatchEvent(new Event('input', { bubbles: true }));\n        }\n      },\n      [onLeadingEdge, expressionInputRef, disabled, readOnly, onTrailingEdge],\n    );\n\n  // focus the first spinbutton or the expression input based on the current input mode\n  const focus = useCallback(() => {\n    switch (valueType) {\n      case 'expression':\n        expressionInputRef.current?.focus();\n        break;\n      case 'iso8601':\n        firstSpinButtonHandler?.element?.current?.focus();\n        break;\n    }\n    // no need to pass the refs as dependency\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [valueType, firstSpinButtonHandler]);\n\n  /**\n   * Clears all spin buttons, switches to expression mode, and seeds the\n   * expression input with the provided text. Used when a bulk-delete leaves\n   * exactly one spin button filled \u2014 that remaining value is carried over as\n   * the expression seed rather than leaving a partial date.\n   */\n  const switchToExpressionMode = useCallback(\n    (text: string) => {\n      // setExpressionValue is an imperative expression-mode transition. Do not\n      // parse the text through getTimeValue here: numeric fallback text such as\n      // \"01\" can otherwise be treated as an ISO value and switch the input back\n      // to spin-button mode while a bulk clear is still settling.\n      const parsedValue = parseTimeAsTimeValue(\n        text,\n        TZDateMini.tz(getTimezone()).getTime(),\n        precision,\n      );\n      const newValue: TimeValue | null =\n        text !== ''\n          ? {\n              absoluteDate: parsedValue?.absoluteDate ?? '',\n              value: text,\n              type: 'expression',\n            }\n          : null;\n\n      for (const handler of spinButtonHandlers.values()) {\n        handler?.clearValue(false);\n        if (handler?.element.current) {\n          handler.element.current.textContent = '';\n        }\n      }\n\n      setInputValue(text);\n\n      if (valueType === 'expression') {\n        // Already in expression mode \u2014 apply synchronously so the next\n        // keypress is not dropped by a deferred rAF write.\n        setValue(newValue);\n        setExpressionEmpty(text === '');\n        if (expressionInputRef.current) {\n          expressionInputRef.current.textContent = text;\n        }\n        return;\n      }\n\n      // Suppress stale spinbutton callbacks during the transition;\n      // cleared after the rAF so undo calls are not blocked.\n      isSwitchingToExpressionRef.current = true;\n      // Update the backing value synchronously. If this waits for rAF, React 19\n      // can flush the previous ISO value first and rehydrate the cleared spin\n      // buttons before the expression input receives its fallback text.\n      setValue(newValue);\n      setExpressionEmpty(text === '');\n      setValueType('expression');\n      requestAnimationFrame(() => {\n        if (expressionInputRef.current) {\n          expressionInputRef.current.textContent = text;\n        }\n        isSwitchingToExpressionRef.current = false;\n      });\n    },\n    [expressionInputRef, precision, setValue, spinButtonHandlers, valueType],\n  );\n\n  // first initialization of the uncontrolled expression value on component mount\n  useEffect(() => {\n    if (isControlled || value?.type !== 'expression') {\n      return;\n    }\n    formatExpressionValue(value);\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // if the spinbuttons are empty ...\n  useEffect(() => {\n    // Don't run the empty spinbutton check on component mount.\n    if (firstRun.current) {\n      firstRun.current = false;\n      return;\n    }\n\n    // ... switch to expression input\n    if (valueType === 'iso8601' && spinButtonsEmpty) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      resetToExpressionMode();\n\n      // wait until the expression input is visible to set the focus\n      setTimeout(() => {\n        expressionInputRef?.current?.focus();\n      });\n    }\n    // only react on empty state changes\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [spinButtonsEmpty]);\n\n  useEffect(() => {\n    if (valueType !== 'expression') {\n      return;\n    }\n\n    if (empty) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setInputValue('');\n      return;\n    }\n\n    if (expressionInputRef.current?.textContent) {\n      setInputValue(expressionInputRef.current?.textContent); // fixes validating initial expression value in the DateTimeRangePicker\n    }\n    // valueType can be excluded because empty already depends on it\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [empty]);\n\n  return {\n    empty,\n    spinButtons,\n    spinButtonHandlers,\n    value,\n    valueType,\n    inputValue,\n    expressionInputHandler,\n    expressionOnFocusHandler,\n    expressionOnBlurHandler,\n    expressionOnKeyDownHandler,\n    onPaste,\n    pasteText,\n    onPasteUndoKeyDown,\n    clearPasteUndo: () => {\n      pasteUndoRef.current = null;\n    },\n    focus,\n    switchToExpressionMode,\n    setInputValue,\n  };\n};\n"],
   "mappings": "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",
   "names": ["expressionEmpty", "value", "type"]
 }

package/esm/forms/form/hooks/useInternalFormRegistration.js

@@ -68,7 +68,7 @@ function useInternalFormRegistration(options) {
     );
   };
   const resolvedId = id ?? formFieldContext.formFieldId ?? // DEPRECATION: APPDEV-18319 - Remove deprecated `controlId`.
-  // eslint-disable-next-line @typescript-eslint/no-deprecated
+  // oxlint-disable-next-line typescript/no-deprecated
   formFieldContext.controlId ?? generatedId;
   const wrappedValidateField = useCallback(
     async (validateOptions) => {