@dynatrace/strato-components 3.12.2 → 3.13.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-picker/DateTimePicker.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport './DateTimePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearIconButton = '_1i883gjd-3-12-2';\nexport var dateSelector = '_1i883gjc-3-12-2';\nexport var dateTimePicker = _7a468({defaultClassName:'_1i883gj4-3-12-2',variantClassNames:{readOnly:{true:'_1i883gj5-3-12-2'},showError:{true:'_1i883gj6-3-12-2'},disabled:{true:'_1i883gj7-3-12-2'},type:{date:'_1i883gj8-3-12-2',time:'_1i883gj9-3-12-2',datetime:'_1i883gja-3-12-2'}},defaultVariants:{},compoundVariants:[]});\nexport var spinButtonGroup = '_1i883gjb-3-12-2 _da9a8v0-3-12-2 _da9a8v2-3-12-2 _da9a8v3-3-12-2 _da9a8vb-3-12-2';\nexport var spinButtonSelectionBackgroundColorVar = 'var(--_1i883gj3-3-12-2)';\nexport var spinButtonSelectionColorVar = 'var(--_1i883gj2-3-12-2)';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport './DateTimePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearIconButton = '_1i883gjd-3-13-0';\nexport var dateSelector = '_1i883gjc-3-13-0';\nexport var dateTimePicker = _7a468({defaultClassName:'_1i883gj4-3-13-0',variantClassNames:{readOnly:{true:'_1i883gj5-3-13-0'},showError:{true:'_1i883gj6-3-13-0'},disabled:{true:'_1i883gj7-3-13-0'},type:{date:'_1i883gj8-3-13-0',time:'_1i883gj9-3-13-0',datetime:'_1i883gja-3-13-0'}},defaultVariants:{},compoundVariants:[]});\nexport var spinButtonGroup = '_1i883gjb-3-13-0 _da9a8v0-3-13-0 _da9a8v2-3-13-0 _da9a8v3-3-13-0 _da9a8vb-3-13-0';\nexport var spinButtonSelectionBackgroundColorVar = 'var(--_1i883gj3-3-13-0)';\nexport var spinButtonSelectionColorVar = 'var(--_1i883gj2-3-13-0)';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,kBAAkB;AACtB,IAAI,eAAe;AACnB,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,GAAE,WAAU,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,GAAE,MAAK,EAAC,MAAK,oBAAmB,MAAK,oBAAmB,UAAS,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACzT,IAAI,kBAAkB;AACtB,IAAI,wCAAwC;AAC5C,IAAI,8BAA8B;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/date-time-picker/hooks/useDateTimePicker.tsx"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { isAfter, isBefore, isValid } from 'date-fns';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useDateTimeFormat } from './useDateTimeFormat.js';\nimport { useSpinButtons } from './useSpinButtons.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { usePrevious } from '../../../core/hooks/usePrevious.js';\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  getTimeValue,\n  removePrecision,\n} from '../../forms-core/time/timeParser.js';\nimport type {\n  DateSelectorProps,\n  DateTimePickerProps,\n  DateTimePickerType,\n} from '../types.js';\nimport { focusElementWithRetry } from '../utils/focusDateTimeInput.js';\n\n/**\n * Hook to provide the validation and 2way binding between the iso date and the rendered spinbuttons.\n */\nexport function useDateTimePicker(\n  // 'type' may be 'never', but for the hook we always want to accept it.\n  props: Omit<DateTimePickerProps, 'type'> & {\n    type?: DateTimePickerType;\n    valueType?: TimeValue['type'];\n    value: string | null;\n  },\n) {\n  const {\n    type,\n    precision,\n    min,\n    max,\n    disabled = false,\n    readOnly = false,\n    value: propValue,\n    onChange,\n    required,\n    valueType,\n  } = props;\n\n  // The spin buttons are only visible and interactive\n  // in 'iso8601' mode and should be disabled for expression input\n  const isDisabled = disabled || valueType !== 'iso8601';\n\n  const timezone = getTimezone();\n\n  // use the aria label of the datetime picker to prefix each spinbutton aria label\n  const { 'aria-label': ariaLabelPrefix } = useAriaLabelingProps(props);\n\n  const value = propValue === '' ? null : propValue;\n\n  const [isoDateTime, setIsoDateTime] = useState(\n    getTimeValue(value ?? undefined, precision)?.absoluteDate ?? null,\n  );\n\n  // Values we dispatched to onChange but the parent hasn't echoed back yet.\n  // The controlled-value effect uses this set to skip echoes of our own\n  // dispatches, which would otherwise reset the spin button cursor.\n  const dispatchedValuesRef = useRef(new Set<string | null>([value]));\n  // Newest dispatched value; its echo marks the round-trip as settled.\n  const latestDispatchedValueRef = useRef<string | null>(value);\n  // Last ISO key sent to onChange. Dedupes back-to-back dispatches when\n  // dateTime is unchanged (INVALID_DATE singleton) and keeps the sync\n  // keyDown path aligned with the passive effect.\n  const lastDispatchedIsoRef = useRef<string | null>(\n    getTimeValue(value ?? undefined, precision)?.absoluteDate ?? null,\n  );\n  const spinButtonChangeHandledRef = useRef(false);\n  // Set to true by updatePart when a clear (partValue === '') occurs; ensures\n  // the passive effect runs even when a prior sync dispatch already set\n  // spinButtonChangeHandledRef, so bulk \"non-empty + clear\" batches don't lose\n  // the final null/'Invalid Date' onChange.\n  const hasPendingClearRef = useRef(false);\n  const { toParts, emptyParts } = useDateTimeFormat(type, precision);\n  const {\n    state: { isValid: isValidFormControl },\n  } = useFormFieldMessagesContext();\n  const dispatchDateTimeChange = useCallback(\n    (newDateTime: Date | null | undefined) => {\n      spinButtonChangeHandledRef.current = true;\n\n      let newKey: string | null;\n      if (!newDateTime) {\n        newKey = null;\n      } else if (!isValid(newDateTime)) {\n        newKey = 'Invalid Date';\n      } else {\n        newKey = newDateTime.toISOString();\n      }\n\n      if (lastDispatchedIsoRef.current === newKey) {\n        spinButtonChangeHandledRef.current = false;\n        return;\n      }\n      lastDispatchedIsoRef.current = newKey;\n\n      const dispatched = dispatchedValuesRef.current;\n      if (newKey === null) {\n        dispatched.add(null);\n        latestDispatchedValueRef.current = null;\n        setIsoDateTime(null);\n        onChange?.(null);\n      } else if (newKey === 'Invalid Date') {\n        dispatched.add('Invalid Date');\n        latestDispatchedValueRef.current = 'Invalid Date';\n        setIsoDateTime(null);\n        onChange?.('Invalid Date');\n      } else {\n        const precisionMode = type === 'date' ? 'day' : precision;\n        const dispatchedValue = removePrecision(newKey, precisionMode);\n        dispatched.add(dispatchedValue);\n        latestDispatchedValueRef.current = dispatchedValue;\n        setIsoDateTime(newKey);\n        onChange?.(getTimeValue(newKey, precision) ?? null);\n      }\n\n      // Defensive size cap: evict the oldest entry if the set grows beyond the\n      // limit. This bounds memory usage when the parent permanently drops echoes\n      // for the latest dispatch (which is the only trigger for bulk-clear).\n      // Evicting an orphaned entry is safe in practice \u2014 it just means a later\n      // external write matching that value will re-apply rather than be skipped.\n      // JavaScript Set preserves insertion order so values().next() is oldest.\n      while (dispatched.size > 20) {\n        const oldest = dispatched.values().next();\n        if (!oldest.done) {\n          dispatched.delete(oldest.value);\n        } else {\n          break;\n        }\n      }\n    },\n    [onChange, precision, type],\n  );\n\n  const onPartClear = useCallback(() => {\n    hasPendingClearRef.current = true;\n  }, []);\n\n  const { spinButtons, dateTime, updateParts, handlers, parts, toDateTime } =\n    useSpinButtons(\n      isoDateTime,\n      type,\n      precision,\n      isDisabled,\n      readOnly,\n      ariaLabelPrefix,\n      value,\n      dispatchDateTimeChange,\n      onPartClear,\n    );\n  const prevDateTime = usePrevious(dateTime);\n\n  const minDateTime = useMemo(() => {\n    const candidate =\n      min !== undefined ? new TZDateMini(min, timezone) : undefined;\n    return isValid(candidate) ? candidate : undefined;\n  }, [min, timezone]);\n  const maxDateTime = useMemo(() => {\n    const candidate =\n      max !== undefined ? new TZDateMini(max, timezone) : undefined;\n    return isValid(candidate) ? candidate : undefined;\n  }, [max, timezone]);\n\n  /**\n   * Callback to apply a given iso date to the currently rendered spinbuttons\n   * Accepts a pass filter to apply the iso datetime to only a subset of the spinbuttons.\n   * Returns true, if the iso date was applied successfully. False otherwise.\n   */\n  const applyDateTime = useCallback(\n    (\n      isoDateTime: string | null,\n      passFilter?: Set<Intl.DateTimeFormatPart['type']>,\n    ) => {\n      if (isoDateTime === null) {\n        updateParts(emptyParts);\n        return true;\n      }\n\n      const newDate = new TZDateMini(isoDateTime, timezone);\n\n      // Add timezone offset for type 'date' to have the correct date when there is no time information (2025-01-01Z).\n      newDate.setMinutes(\n        newDate.getMinutes() +\n          (type === 'date' ? newDate.getTimezoneOffset() : 0),\n      );\n\n      if (!isValid(newDate)) {\n        return false;\n      }\n      const newDateParts = toParts(newDate);\n      passFilter\n        ? updateParts(newDateParts.filter((p) => passFilter.has(p.type)))\n        : updateParts(newDateParts);\n\n      return true;\n    },\n    [emptyParts, timezone, toParts, type, updateParts],\n  );\n\n  const dateSelectorProps: DateSelectorProps = useMemo(\n    () => ({\n      value: isoDateTime ?? TZDateMini.tz(timezone).toISOString(),\n      onChange: (newIsoString: string) => {\n        // Only apply the date part of the iso date returned by the calendar.\n        // Don't touch the time values, but set the focus to the hour field in the next render cycle.\n        applyDateTime(newIsoString, new Set(['year', 'month', 'day']));\n        // Selecting a date in the calendar closes the overlay and restores the focus to the date picker trigger.\n        // In order to set the focus to the time spin buttons, we need to defer setting the focus.\n        focusElementWithRetry(() => handlers.get('hour')?.element.current);\n      },\n      disabled: disabled || readOnly,\n      error: false,\n    }),\n    [isoDateTime, timezone, disabled, readOnly, applyDateTime, handlers],\n  );\n\n  // Show the error state, if the value is outside of given bounds or the date object is invalid.\n  const error = useMemo(() => {\n    if (!isValidFormControl) {\n      return true;\n    }\n\n    if (!required && isoDateTime === null) {\n      return false;\n    }\n\n    return (\n      (dateTime === null ||\n        !isValid(dateTime) ||\n        (minDateTime && isBefore(dateTime, minDateTime)) ||\n        (maxDateTime && isAfter(dateTime, maxDateTime))) ??\n      false\n    );\n  }, [\n    isValidFormControl,\n    required,\n    isoDateTime,\n    dateTime,\n    minDateTime,\n    maxDateTime,\n  ]);\n\n  // true, if none of the content parts contains any content\n  const empty = useMemo(\n    () => !parts.some((part) => part.type !== 'literal' && part.value !== ''),\n    [parts],\n  );\n\n  // Dispatches dateTime changes from non-spinbutton paths (calendar,\n  // applyDateTime). The `handled` flag skips this effect when the sync\n  // keyDown path already dispatched; the numeric guards drop no-op re-fires\n  // when the memo returns a new reference for the same value.\n  // `clearPending` overrides `handled`: if a clear happened in the same batch\n  // as a sync dispatch (e.g. Backspace on a filled field), the effect must\n  // still run to coalesce and dispatch the resulting null/'Invalid Date'.\n  useEffect(() => {\n    const handled = spinButtonChangeHandledRef.current;\n    spinButtonChangeHandledRef.current = false;\n    const clearPending = hasPendingClearRef.current;\n    hasPendingClearRef.current = false;\n    if (handled && !clearPending) {\n      return;\n    }\n    const numericDateTime = +(dateTime || 0);\n    const numericPrevDateTime = +(prevDateTime || 0);\n    if (\n      prevDateTime === undefined ||\n      (Number.isNaN(numericDateTime) && Number.isNaN(numericPrevDateTime)) ||\n      numericDateTime === numericPrevDateTime\n    ) {\n      return;\n    }\n    dispatchDateTimeChange(dateTime);\n  });\n\n  // If the controlled value has changed, apply the new value to the spinbuttons.\n  // Don't combine with the above effect, this needs to run in the next render cycle.\n  //\n  // Known limitation (out-of-order echoes): if the parent echoes the latest dispatch\n  // before an earlier one (e.g. async state updates delivered out of order), the\n  // dispatched.clear() below fires early and discards the still-pending earlier entry.\n  // The earlier echo then falls through to applyDateTime, momentarily re-applying a\n  // stale intermediate value. In practice this requires out-of-order controlled-prop\n  // updates which React's batching makes unlikely; a generation-counter approach would\n  // eliminate this but is not warranted at the current risk level.\n  useEffect(() => {\n    const dispatched = dispatchedValuesRef.current;\n\n    if (dispatched.has(value)) {\n      // Echo of our newest dispatch: clear the whole Set so entries the\n      // parent coalesced away can't linger and later block a legitimate\n      // external write. Stale (non-latest) echoes only remove their own entry.\n      if (value === latestDispatchedValueRef.current) {\n        dispatched.clear();\n      } else {\n        dispatched.delete(value);\n      }\n      return;\n    }\n\n    const appliedIso =\n      getTimeValue(value ?? undefined, precision)?.absoluteDate ?? null;\n    applyDateTime(appliedIso);\n    // Reset so a subsequent user edit to the same value isn't silently dropped\n    // by the dedup guard in dispatchDateTimeChange.\n    lastDispatchedIsoRef.current = appliedIso;\n\n    // Only run if the controlled prop value is updated.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  return {\n    isoDateTime,\n    spinButtons,\n    handlers,\n    dateSelectorProps,\n    error,\n    empty,\n    applyDateTime,\n    firstSpinButtonHandler: handlers.get(parts[0]?.type),\n    dateTime,\n    toDateTime,\n    parts,\n  };\n}\n"],
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { isAfter, isBefore, isValid } from 'date-fns';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useDateTimeFormat } from './useDateTimeFormat.js';\nimport { useSpinButtons } from './useSpinButtons.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { usePrevious } from '../../../core/hooks/usePrevious.js';\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  getTimeValue,\n  removePrecision,\n} from '../../forms-core/time/timeParser.js';\nimport type {\n  DateSelectorProps,\n  DateTimePickerProps,\n  DateTimePickerType,\n} from '../types.js';\nimport { focusElementWithRetry } from '../utils/focusDateTimeInput.js';\n\n/**\n * Hook to provide the validation and 2way binding between the iso date and the rendered spinbuttons.\n */\nexport function useDateTimePicker(\n  // 'type' may be 'never', but for the hook we always want to accept it.\n  props: Omit<DateTimePickerProps, 'type'> & {\n    type?: DateTimePickerType;\n    valueType?: TimeValue['type'];\n    value: string | null;\n  },\n) {\n  const {\n    type,\n    precision,\n    min,\n    max,\n    disabled = false,\n    readOnly = false,\n    value: propValue,\n    onChange,\n    required,\n    valueType,\n  } = props;\n\n  // The spin buttons are only visible and interactive\n  // in 'iso8601' mode and should be disabled for expression input\n  const isDisabled = disabled || valueType !== 'iso8601';\n\n  const timezone = getTimezone();\n\n  // use the aria label of the datetime picker to prefix each spinbutton aria label\n  const { 'aria-label': ariaLabelPrefix } = useAriaLabelingProps(props);\n\n  const value = propValue === '' ? null : propValue;\n\n  const [isoDateTime, setIsoDateTime] = useState(\n    getTimeValue(value ?? undefined, precision)?.absoluteDate ?? null,\n  );\n\n  // Values we dispatched to onChange but the parent hasn't echoed back yet.\n  // The controlled-value effect uses this set to skip echoes of our own\n  // dispatches, which would otherwise reset the spin button cursor.\n  const dispatchedValuesRef = useRef(new Set<string | null>([value]));\n  // Newest dispatched value; its echo marks the round-trip as settled.\n  const latestDispatchedValueRef = useRef<string | null>(value);\n  // Last ISO key sent to onChange. Dedupes back-to-back dispatches when\n  // dateTime is unchanged (INVALID_DATE singleton) and keeps the sync\n  // keyDown path aligned with the passive effect.\n  const lastDispatchedIsoRef = useRef<string | null>(\n    getTimeValue(value ?? undefined, precision)?.absoluteDate ?? null,\n  );\n  const spinButtonChangeHandledRef = useRef(false);\n  // Set to true by updatePart when a clear (partValue === '') occurs; ensures\n  // the passive effect runs even when a prior sync dispatch already set\n  // spinButtonChangeHandledRef, so bulk \"non-empty + clear\" batches don't lose\n  // the final null/'Invalid Date' onChange.\n  const hasPendingClearRef = useRef(false);\n  const { toParts, emptyParts } = useDateTimeFormat(type, precision);\n  const {\n    state: { isValid: isValidFormControl },\n  } = useFormFieldMessagesContext();\n  const dispatchDateTimeChange = useCallback(\n    (newDateTime: Date | null | undefined) => {\n      spinButtonChangeHandledRef.current = true;\n\n      let newKey: string | null;\n      if (!newDateTime) {\n        newKey = null;\n      } else if (!isValid(newDateTime)) {\n        newKey = 'Invalid Date';\n      } else {\n        newKey = newDateTime.toISOString();\n      }\n\n      if (lastDispatchedIsoRef.current === newKey) {\n        spinButtonChangeHandledRef.current = false;\n        return;\n      }\n      lastDispatchedIsoRef.current = newKey;\n\n      const dispatched = dispatchedValuesRef.current;\n      if (newKey === null) {\n        dispatched.add(null);\n        latestDispatchedValueRef.current = null;\n        setIsoDateTime(null);\n        onChange?.(null);\n      } else if (newKey === 'Invalid Date') {\n        dispatched.add('Invalid Date');\n        latestDispatchedValueRef.current = 'Invalid Date';\n        setIsoDateTime(null);\n        onChange?.('Invalid Date');\n      } else {\n        const precisionMode = type === 'date' ? 'day' : precision;\n        const dispatchedValue = removePrecision(newKey, precisionMode);\n        dispatched.add(dispatchedValue);\n        latestDispatchedValueRef.current = dispatchedValue;\n        setIsoDateTime(newKey);\n        onChange?.(getTimeValue(newKey, precision) ?? null);\n      }\n\n      // Defensive size cap: evict the oldest entry if the set grows beyond the\n      // limit. This bounds memory usage when the parent permanently drops echoes\n      // for the latest dispatch (which is the only trigger for bulk-clear).\n      // Evicting an orphaned entry is safe in practice \u2014 it just means a later\n      // external write matching that value will re-apply rather than be skipped.\n      // JavaScript Set preserves insertion order so values().next() is oldest.\n      while (dispatched.size > 20) {\n        const oldest = dispatched.values().next();\n        if (!oldest.done) {\n          dispatched.delete(oldest.value);\n        } else {\n          break;\n        }\n      }\n    },\n    [onChange, precision, type],\n  );\n\n  const onPartClear = useCallback(() => {\n    hasPendingClearRef.current = true;\n  }, []);\n\n  const { spinButtons, dateTime, updateParts, handlers, parts, toDateTime } =\n    useSpinButtons(\n      isoDateTime,\n      type,\n      precision,\n      isDisabled,\n      readOnly,\n      ariaLabelPrefix,\n      value,\n      dispatchDateTimeChange,\n      onPartClear,\n    );\n  const prevDateTime = usePrevious(dateTime);\n\n  const minDateTime = useMemo(() => {\n    const candidate =\n      min !== undefined ? new TZDateMini(min, timezone) : undefined;\n    return isValid(candidate) ? candidate : undefined;\n  }, [min, timezone]);\n  const maxDateTime = useMemo(() => {\n    const candidate =\n      max !== undefined ? new TZDateMini(max, timezone) : undefined;\n    return isValid(candidate) ? candidate : undefined;\n  }, [max, timezone]);\n\n  /**\n   * Callback to apply a given iso date to the currently rendered spinbuttons\n   * Accepts a pass filter to apply the iso datetime to only a subset of the spinbuttons.\n   * Returns true, if the iso date was applied successfully. False otherwise.\n   */\n  const applyDateTime = useCallback(\n    (\n      isoDateTime: string | null,\n      passFilter?: Set<Intl.DateTimeFormatPart['type']>,\n    ) => {\n      if (isoDateTime === null) {\n        updateParts(emptyParts);\n        return true;\n      }\n\n      const newDate = new TZDateMini(isoDateTime, timezone);\n\n      // Add timezone offset for type 'date' to have the correct date when there is no time information (2025-01-01Z).\n      newDate.setMinutes(\n        newDate.getMinutes() +\n          (type === 'date' ? newDate.getTimezoneOffset() : 0),\n      );\n\n      if (!isValid(newDate)) {\n        return false;\n      }\n      const newDateParts = toParts(newDate);\n      passFilter\n        ? updateParts(newDateParts.filter((p) => passFilter.has(p.type)))\n        : updateParts(newDateParts);\n\n      return true;\n    },\n    [emptyParts, timezone, toParts, type, updateParts],\n  );\n\n  const dateSelectorProps: DateSelectorProps = useMemo(\n    () => ({\n      value: isoDateTime ?? TZDateMini.tz(timezone).toISOString(),\n      onChange: (newIsoString: string) => {\n        // Only apply the date part of the iso date returned by the calendar.\n        // Don't touch the time values, but set the focus to the hour field in the next render cycle.\n        applyDateTime(newIsoString, new Set(['year', 'month', 'day']));\n        // Selecting a date in the calendar closes the overlay and restores the focus to the date picker trigger.\n        // In order to set the focus to the time spin buttons, we need to defer setting the focus.\n        focusElementWithRetry(() => handlers.get('hour')?.element.current);\n      },\n      disabled: disabled || readOnly,\n      error: false,\n    }),\n    [isoDateTime, timezone, disabled, readOnly, applyDateTime, handlers],\n  );\n\n  // Show the error state, if the value is outside of given bounds or the date object is invalid.\n  const error = useMemo(() => {\n    if (!isValidFormControl) {\n      return true;\n    }\n\n    if (!required && isoDateTime === null) {\n      return false;\n    }\n\n    return (\n      (dateTime === null ||\n        !isValid(dateTime) ||\n        (minDateTime && isBefore(dateTime, minDateTime)) ||\n        (maxDateTime && isAfter(dateTime, maxDateTime))) ??\n      false\n    );\n  }, [\n    isValidFormControl,\n    required,\n    isoDateTime,\n    dateTime,\n    minDateTime,\n    maxDateTime,\n  ]);\n\n  // true, if none of the content parts contains any content\n  const empty = useMemo(\n    () => !parts.some((part) => part.type !== 'literal' && part.value !== ''),\n    [parts],\n  );\n\n  // Dispatches dateTime changes from non-spinbutton paths (calendar,\n  // applyDateTime). The `handled` flag skips this effect when the sync\n  // keyDown path already dispatched; the numeric guards drop no-op re-fires\n  // when the memo returns a new reference for the same value.\n  // `clearPending` overrides `handled`: if a clear happened in the same batch\n  // as a sync dispatch (e.g. Backspace on a filled field), the effect must\n  // still run to coalesce and dispatch the resulting null/'Invalid Date'.\n  useEffect(() => {\n    const handled = spinButtonChangeHandledRef.current;\n    spinButtonChangeHandledRef.current = false;\n    const clearPending = hasPendingClearRef.current;\n    hasPendingClearRef.current = false;\n    if (handled && !clearPending) {\n      return;\n    }\n    const numericDateTime = +(dateTime || 0);\n    const numericPrevDateTime = +(prevDateTime || 0);\n    if (\n      prevDateTime === undefined ||\n      (Number.isNaN(numericDateTime) && Number.isNaN(numericPrevDateTime)) ||\n      numericDateTime === numericPrevDateTime\n    ) {\n      return;\n    }\n    dispatchDateTimeChange(dateTime);\n  });\n\n  // If the controlled value has changed, apply the new value to the spinbuttons.\n  // Don't combine with the above effect, this needs to run in the next render cycle.\n  //\n  // Known limitation (out-of-order echoes): if the parent echoes the latest dispatch\n  // before an earlier one (e.g. async state updates delivered out of order), the\n  // dispatched.clear() below fires early and discards the still-pending earlier entry.\n  // The earlier echo then falls through to applyDateTime, momentarily re-applying a\n  // stale intermediate value. In practice this requires out-of-order controlled-prop\n  // updates which React's batching makes unlikely; a generation-counter approach would\n  // eliminate this but is not warranted at the current risk level.\n  useEffect(() => {\n    const dispatched = dispatchedValuesRef.current;\n\n    if (dispatched.has(value)) {\n      // Echo of our newest dispatch: clear the whole Set so entries the\n      // parent coalesced away can't linger and later block a legitimate\n      // external write. Stale (non-latest) echoes only remove their own entry.\n      if (value === latestDispatchedValueRef.current) {\n        dispatched.clear();\n      } else {\n        dispatched.delete(value);\n      }\n      return;\n    }\n\n    const appliedIso =\n      getTimeValue(value ?? undefined, precision)?.absoluteDate ?? null;\n    applyDateTime(appliedIso);\n    // Reset so a subsequent user edit to the same value isn't silently dropped\n    // by the dedup guard in dispatchDateTimeChange.\n    lastDispatchedIsoRef.current = appliedIso;\n\n    // Only run if the controlled prop value is updated.\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  return {\n    isoDateTime,\n    spinButtons,\n    handlers,\n    dateSelectorProps,\n    error,\n    empty,\n    applyDateTime,\n    firstSpinButtonHandler: handlers.get(parts[0]?.type),\n    dateTime,\n    toDateTime,\n    parts,\n  };\n}\n"],
   "mappings": "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",
   "names": ["isoDateTime"]
 }

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

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

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

@@ -1,4 +1,4 @@
-._1uftu980-3-12-2 {
+._1uftu980-3-13-0 {
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   transition-property: color, background-color, transform;

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

@@ -1,5 +1,5 @@
 import "./DateRangeSelector.css";
-var selector = "_1uftu980-3-12-2";
+var selector = "_1uftu980-3-13-0";
 export {
   selector
 };

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

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

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

@@ -1,33 +1,33 @@
-._5u9o250-3-12-2 {
+._5u9o250-3-13-0 {
   min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
 }
-._5u9o250-3-12-2::-webkit-scrollbar {
+._5u9o250-3-13-0::-webkit-scrollbar {
   display: none;
 }
-._5u9o252-3-12-2 {
+._5u9o252-3-13-0 {
   outline: none;
 }
-._5u9o252-3-12-2:not(:focus-visible) {
+._5u9o252-3-13-0:not(:focus-visible) {
   caret-color: transparent;
 }
-._5u9o252-3-12-2:empty::before {
+._5u9o252-3-13-0:empty::before {
   content: var(--data-placeholder);
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1vlwkc21-3-12-2 ._5u9o252-3-12-2:empty::before {
+._1vlwkc21-3-13-0 ._5u9o252-3-13-0:empty::before {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1vlwkc22-3-12-2 ._5u9o252-3-12-2:empty::before {
+._1vlwkc22-3-13-0 ._5u9o252-3-13-0:empty::before {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1vlwkc22-3-12-2._1vlwkc21-3-12-2 ._5u9o252-3-12-2:empty::before {
+._1vlwkc22-3-13-0._1vlwkc21-3-13-0 ._5u9o252-3-13-0:empty::before {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }
-._5u9o252-3-12-2::selection {
-  color: var(--_1i883gj2-3-12-2);
-  background-color: var(--_1i883gj3-3-12-2);
+._5u9o252-3-13-0::selection {
+  color: var(--_1i883gj2-3-13-0);
+  background-color: var(--_1i883gj3-3-13-0);
 }

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": "AA8OM,SAgBI,KAhBJ;AA9ON,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AACP,SAAS,eAAe;AAExB,SAAS,mBAAmB,kBAAkB;AAC9C,YAAY,YAAY;AACxB,SAAS,wBAAwB;AAEjC,YAAY,0BAA0B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,gBAAgB;AACzB,SAAS,cAAc,mBAAmB;AAC1C,SAAS,YAAY;AACrB,YAAY,0BAA0B;AACtC,SAAS,mCAAmC;AAC5C,SAAS,8BAA8B;AACvC,SAAS,+BAA+B;AACxC,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AAEnC,SAAS,eAAe,GAA+B;AACrD,IAAE,eAAe;AACnB;AAKO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,iBAAiB;AACvB,UAAM,UAAU,OAAwB,IAAI;AAC5C,UAAM,WAAW,OAAyB,IAAI;AAC9C,UAAM,qBAAqB,OAAwB,IAAI;AAEvD,UAAM,MAAM,uBAAuB,CAAC,UAAU,MAAM,GAAG;AACvD,UAAM,MAAM,uBAAuB,CAAC,UAAU,MAAM,GAAG;AACvD,UAAM,YAAY,uBAAuB,CAAC,UAAU,MAAM,SAAS;AACnE,UAAM,eAAe,uBAAuB,CAAC,UAAU,MAAM,YAAY;AAEzE,UAAM,OAAO,QAAQ;AACrB,UAAM;AAAA,MACJ,WAAW;AAAA,MACX,UAAU;AAAA,MACV;AAAA,MACA;AAAA,IACF,IAAI,uBAAuB,QAAQ;AAEnC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,WAAW;AAAA,MACX,OAAO;AAAA,MACP;AAAA,MACA,eAAe;AAAA,MACf,iBAAiB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAwB;AAExB,UAAM,sBAAsB,KAAK,cAAc;AAAA,MAC7C,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aAAa;AAAA,IACf,CAAC;AACD,UAAM,kBAAkB,KAAK,cAAc;AAAA,MACzC,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aAAa;AAAA,IACf,CAAC;AACD,UAAM,kBAAkB,KAAK,cAAc;AAAA,MACzC,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aAAa;AAAA,IACf,CAAC;AAED,QAAI,cAAc;AAClB,QAAI,CAAC,iBAAiB;AACpB,cAAQ,MAAM;AAAA,QACZ,KAAK;AACH,wBAAc;AACd;AAAA,QACF,KAAK;AACH,wBAAc;AACd;AAAA,QACF,KAAK;AACH,wBAAc;AACd;AAAA,MACJ;AAAA,IACF;AAEA,UAAM,oBAAoB,qBAAqB,KAAK;AAEpD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,iBAAiB,OAAO,kBAAkB;AAE9C,UAAM,oBAAoB,cAAc;AAExC,UAAM,EAAE,UAAU,oBAAoB,IAAI,4BAA4B;AAEtE;AAAA,MACE;AAAA,MACA,OAAyB;AAAA,QACvB,SAAS,QAAQ;AAAA,QACjB,UAAU,SAAS;AAAA,QACnB,oBAAoB,mBAAmB;AAAA,QACvC;AAAA,QACA;AAAA,QACA,oBAAoB;AAAA,QACpB;AAAA,QACA;AAAA,QACA,YAAY;AACV,cAAI,cAAc,cAAc;AAC9B,+BAAmB,SAAS,MAAM;AAAA,UACpC,OAAO;AACL,kBAAM,WAAW,MAAM,KAAK,mBAAmB,OAAO,CAAC,EAAE;AAAA,cACvD,CAAC,MAAM,MAAM;AAAA,YACf;AACA,kBAAM,cAAc,SAAS,SAAS,SAAS,CAAC;AAChD,wBAAY,QAAQ,SAAS,MAAM;AACnC,wBAAY,UAAU;AAAA,UACxB;AAAA,QACF;AAAA,QACA,WAAW;AACT,gBAAM,cAAc,mBAAmB,SAAS;AAGhD,cAAI,cAAc,gBAAgB,CAAC,aAAa;AAC9C,0BAAc,EAAE;AAAA,UAClB;AACA,mBAAS,SAAS,MAAM,KAAK,KAAK;AAAA,YAChC;AAAA,YACA;AAAA,YACA,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,KAAK;AAAA,YACL,gBAAgB;AAAA,YAChB,WAAW;AAAA;AAAA;AAAA;AAAA,YAIX,UAAU,wBAAwB,WAAW,QAAQ;AAAA,UACvD,CAAC;AACD,gCAAsB;AAAA,YACpB,MAAM,wBAAwB;AAAA,YAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,UAC7B,CAAC;AAAA,QACH;AAAA,QACA,eAAe,YAAY;AACzB,gBAAM,cAAc,mBAAmB,SAAS;AAChD,cAAI,cAAc,gBAAgB,CAAC,aAAa;AAC9C,0BAAc,EAAE;AAAA,UAClB;AACA,mBAAS,SAAS,MAAM,KAAK,KAAK;AAAA,YAChC;AAAA,YACA;AAAA,YACA,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,KAAK;AAAA,YACL,gBAAgB;AAAA,YAChB,WAAW;AAAA,YACX,UAAU,wBAAwB,WAAW,QAAQ;AAAA,UACvD,CAAC;AACD,gCAAsB;AAAA,YACpB,MAAM,wBAAwB;AAAA,YAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,UAC7B,CAAC;AACD,iBAAO,mBAAmB,SAAS,SAAS,QAAQ;AAAA,QACtD;AAAA,MACF;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,UAAM,kBAAkB,KAAK;AAAA,MAC3B;AAAA,QACE,gBAAgB;AAAA,QAChB,IAAI;AAAA,QACJ,aAAa;AAAA,MACf;AAAA,MACA;AAAA,QACE,iBAAiB,kBAAkB,YAAY;AAAA,MACjD;AAAA,IACF;AAEA,cAAU,MAAM;AACd,yBAAmB;AAAA,IAGrB,GAAG,CAAC,UAAU,CAAC;AAEf,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,IAAG;AAAA,QACH,WAAW;AAAA,UACT;AAAA,UACA,OAAO;AAAA,UACP;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QACP,eAAa;AAAA,QACb;AAAA,QACA,WAAW;AAAA,QACX,KAAK;AAAA,QACL,kBAAgB;AAAA,QAEhB;AAAA,8BAAC,kBACC;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,KAAK;AAAA,cACL;AAAA,cACA,OAAO,cAAc;AAAA,cACrB,UAAU,MAAM;AAAA,cAEhB;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA,UAAU;AAAA,cACV;AAAA,cACA;AAAA,cACA,iBAAe;AAAA,cACd,GAAG;AAAA,gBACF,yBAAyB;AAAA,gBACzB;AAAA,cACF;AAAA,cACA;AAAA;AAAA,UACF,GACF;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,KAAK,YAAY;AAAA,gBAC1B,CAAC,qBAAqB,cAAc,GAAG,CAAC;AAAA,cAC1C,CAAC;AAAA,cACD,MAAK;AAAA,cACL,YAAY;AAAA,cACZ,UAAU,YAAY,CAAC,oBAAoB,KAAK;AAAA,cAChD,OACE;AAAA,gBACE,sBAAsB,IAAI,WAAW;AAAA,cACvC;AAAA,cAEF,kBAAe;AAAA,cACf,KAAK;AAAA,cACL,iBAAiB,CAAC,YAAY,CAAC,WAAW,OAAO;AAAA,cACjD,SAAS;AAAA,cACT,SAAS,CAAC,MAAwC;AAChD,oBAAI,EAAE,OAAO,aAAa,iBAAiB,MAAM,OAAO;AACtD;AAAA,gBACF;AACA,yCAAyB,CAAC;AAAA,cAC5B;AAAA,cACA,QAAQ,CAAC,MAAwC;AAC/C,oBAAI,EAAE,OAAO,aAAa,iBAAiB,MAAM,OAAO;AACtD;AAAA,gBACF;AACA,wCAAwB,CAAC;AAAA,cAC3B;AAAA,cACA,WAAW;AAAA,cACX,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,QAAQ;AAAA,cACR,cAAY;AAAA;AAAA,UACd;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,KAAK,qBAAqB,iBAAiB;AAAA,gBACpD,CAAC,qBAAqB,cAAc,GAAG;AAAA,cACzC,CAAC;AAAA,cACD,eAAa;AAAA,cACb;AAAA,cACA;AAAA,cACA;AAAA,cAEC;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
   "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-0";
+var dateTimeInputRoot = "_5u9o250-3-13-0";
+var expression = "_5u9o252-3-13-0";
 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-0';\nexport var dateTimeInputRoot = '_5u9o250-3-13-0';\nexport var expression = '_5u9o252-3-13-0';"],
   "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-0 {
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   transition-property: color, background-color, transform;
   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-0);
   white-space: nowrap;
   overflow: hidden;
-  color: var(--_bx32h0-3-12-2);
-  background: var(--_bx32h3-3-12-2);
+  color: var(--_bx32h0-3-13-0);
+  background: var(--_bx32h3-3-13-0);
   flex: 1 1 auto;
   position: relative;
 }
-._1vlwkc20-3-12-2._1vlwkc20-3-12-2 {
+._1vlwkc20-3-13-0._1vlwkc20-3-13-0 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc20-3-12-2:has(._1i883gjd-3-12-2) {
+._1vlwkc20-3-13-0:has(._1i883gjd-3-13-0) {
   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-0:has(._1i883gjd-3-13-0:hover) {
+  --_bx32h3-3-13-0: var(--_bx32h2-3-13-0);
 }
-._1vlwkc20-3-12-2:has(._1i883gjd-3-12-2:focus-visible) {
-  box-shadow: var(--_bx32h4-3-12-2, none);
+._1vlwkc20-3-13-0:has(._1i883gjd-3-13-0:focus-visible) {
+  box-shadow: var(--_bx32h4-3-13-0, 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-0 ._1vlwkc20-3-13-0, ._1jgl8s50-3-13-0 ._1vlwkc20-3-13-0:hover, ._1jgl8s50-3-13-0 ._1vlwkc20-3-13-0:active {
+  --_bx32h3-3-13-0: var(--dt-colors-background-surface-default, #fff);
 }
-._1vlwkc22-3-12-2 {
+._1vlwkc22-3-13-0 {
   cursor: not-allowed;
 }
-._1vlwkc23-3-12-2 {
-  --_bx32h3-3-12-2: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+._1vlwkc23-3-13-0 {
+  --_bx32h3-3-13-0: 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-0 ._1vlwkc23-3-13-0, ._1jgl8s50-3-13-0 ._1vlwkc23-3-13-0:hover, ._1jgl8s50-3-13-0 ._1vlwkc23-3-13-0:active {
+  --_bx32h4-3-13-0: 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-0 {
+  --_bx32h3-3-13-0: 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-0 ._1vlwkc24-3-13-0, ._1jgl8s50-3-13-0 ._1vlwkc24-3-13-0:hover, ._1jgl8s50-3-13-0 ._1vlwkc24-3-13-0:active {
+  --_bx32h4-3-13-0: 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-0 {
   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-0._1vlwkc25-3-13-0 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc25-3-12-2::-webkit-scrollbar {
+._1vlwkc25-3-13-0::-webkit-scrollbar {
   display: none;
 }
-._1vlwkc26-3-12-2._1vlwkc26-3-12-2 {
+._1vlwkc26-3-13-0._1vlwkc26-3-13-0 {
   flex-shrink: 0;
   overflow-x: visible;
 }
-._1vlwkc27-3-12-2 {
+._1vlwkc27-3-13-0 {
   flex-shrink: 0;
 }
-._1vlwkc27-3-12-2::selection {
+._1vlwkc27-3-13-0::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-0";
+var dateTimeRange = _7a468({ defaultClassName: "_1vlwkc20-3-13-0", variantClassNames: { showError: { true: "_1vlwkc21-3-13-0" }, disabled: { true: "_1vlwkc22-3-13-0" }, readOnly: { true: "_1vlwkc23-3-13-0" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-13-0"]] });
+var scrollContainer = "_1vlwkc25-3-13-0";
+var timeframeSeparator = "_1vlwkc27-3-13-0";
 export {
   dateTimeInput,
   dateTimeRange,