@dynatrace/strato-components 3.0.1 → 3.1.1

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 clsx from 'clsx';\nimport {\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n  useState,\n  useContext,\n  useMemo,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type FocusEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\n\nimport { SelectedOverCalendarContext } from './contexts/SelectedOverCalendarContext.js';\nimport { DateRangeSelector } from './DateRangeSelector.js';\nimport { DateTimeInput } from './DateTimeInput.js';\nimport { dateTimeRangeCSS } from './DateTimeRangePicker.sty.js';\nimport { removePrecisionFromTimeValue } from './helpers.js';\nimport { useDateTimeRangePicker } from './hooks/useDateTimeRangePicker.js';\nimport type {\n  DateTimeRangePickerProps,\n  DateTimeRangePickerRef,\n} from './types.js';\nimport { DateRangeSelectorRef, DateTimeInputRef } from './types.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { fieldColors as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\nimport { dateTimePickerCSS } from '../date-time-picker/DateTimePicker.sty.js';\nimport { focusDateTimeInput } from '../date-time-picker/utils/focusDateTimeInput.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } 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';\n\nconst DateTimeRangePickerBody = forwardRef<\n  DateTimeRangePickerRef,\n  DateTimeRangePickerProps\n>((props, forwardedRef) => {\n  const {\n    id: propId,\n    precision = 'minutes',\n    disabled: propDisabled,\n    readOnly = false,\n    name,\n    style: consumerStyle,\n    className: consumerClassName,\n    min = GRAIL_MIN_DATE,\n    max = GRAIL_MAX_DATE,\n    required: propRequired,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    defaultValue,\n    value: propValue,\n    onChange: propOnChange,\n    placeholder: placeholderProp,\n  }: DateTimeRangePickerProps = props;\n\n  const COMPONENT_NAME = 'DateTimeRangePicker';\n\n  const ariaProps = _useAriaLabelingProps(props);\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const touchedContainerRef = useRef<HTMLDivElement>(null);\n  const dateTimeFromRef = useRef<DateTimeInputRef>(null);\n  const dateTimeToRef = useRef<DateTimeInputRef>(null);\n  const dateRangeSelectorRef = useRef<DateRangeSelectorRef>(null);\n\n  const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: ariaDisabledProp,\n  });\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const {\n    value,\n    onChange,\n    placeholder,\n    onCopyCapture,\n    onPasteCapture,\n    onBlurTouched,\n    onError,\n    errorTo,\n    errorFrom,\n    validate,\n  } = useDateTimeRangePicker({\n    value: propValue,\n    defaultValue,\n    placeholder: placeholderProp,\n    readOnly,\n    min,\n    max,\n    precision,\n    onChange: propOnChange,\n    touchedContainerRef,\n    validationInputRef: dateTimeFromRef,\n  });\n  const intl = useIntl();\n\n  const {\n    state: { showError },\n    dispatch: formMessageDispatch,\n  } = useFormFieldMessagesContext();\n\n  // Provide root and input element reference and functions to interact with the calendar overlay\n  useImperativeHandle(\n    forwardedRef,\n    (): DateTimeRangePickerRef => ({\n      element: rootRef.current,\n      inputRef: {\n        from: dateTimeFromRef.current?.inputRef,\n        to: dateTimeToRef.current?.inputRef,\n      },\n      open: () => dateRangeSelectorRef.current?.open(),\n      close: () => dateRangeSelectorRef.current?.close(),\n      focus: () => dateTimeFromRef.current?.focus?.(),\n      validate() {\n        validate(value.from, value.to, true);\n        formMessageDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      },\n    }),\n    [formMessageDispatch, validate, value.from, value.to],\n  );\n\n  const variantStyle = dateTimeRangeCSS({\n    showError,\n    disabled: disabledOrAriaDisabled,\n    readOnly: readOnly,\n  });\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: true,\n    isMinimal: false,\n    disabled,\n    color: showError ? 'critical' : 'neutral',\n  });\n\n  const dateTimeFromLabel = intl.formatMessage({\n    defaultMessage: 'DateTime from',\n    id: 'fMy6q/KKOqbvCA3H',\n    description:\n      'Textbox to enter a relative or absolute timeframe from value.',\n  });\n\n  const dateTimeToLabel = intl.formatMessage({\n    defaultMessage: 'DateTime to',\n    id: 'uuhhc3nEZptwtV2E',\n    description: 'Textbox to enter a relative or absolute timeframe to value.',\n  });\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      state: {\n        customMessages: [],\n        formControlMessages: [],\n        showError,\n      },\n    }),\n    [showError],\n  );\n\n  return (\n    <Flex\n      ref={rootRef}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      style={consumerStyle}\n      className={consumerClassName}\n      {...ariaProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n        <InputGroup style={{ gridTemplateColumns: '1fr auto' }}>\n          <Flex\n            ref={touchedContainerRef}\n            className={clsx(\n              inputGroupClassName,\n              dateTimePickerCSS({\n                readOnly,\n                showError,\n                disabled,\n                type: 'datetime',\n              }),\n              textStyleCSS({ textStyle: 'base' }),\n              fieldColorsCSS({\n                color: showError ? 'critical' : 'neutral',\n                disabled: disabledOrAriaDisabled,\n                variant: 'emphasized',\n              }),\n              focusClassName,\n              variantStyle,\n            )}\n            onCopyCapture={onCopyCapture}\n            onPasteCapture={onPasteCapture}\n            onBlur={onBlurTouched}\n            tabIndex={disabled ? undefined : 0}\n            onKeyDown={(e: ReactKeyboardEvent) => {\n              // Forward the focus when a key is pressed in this element.\n              if (e.target === touchedContainerRef.current) {\n                focusDateTimeInput(null, dateTimeFromRef, dateTimeToRef);\n              }\n            }}\n            onFocus={(e: FocusEvent) => {\n              // Forward the focus only if it is coming from outside this component.\n              // Focus the first spin button with textContent; otherwise, focus the input.\n              if (!rootRef.current?.contains(e.relatedTarget)) {\n                focusDateTimeInput(e, dateTimeFromRef, dateTimeToRef);\n              }\n            }}\n          >\n            <DateTimeInput\n              ref={dateTimeFromRef}\n              precision={precision}\n              disabled={disabled}\n              readOnly={readOnly}\n              placeholder={placeholder.from}\n              name={name !== undefined ? `${name}-from` : undefined}\n              value={value.from}\n              onChange={(value) => {\n                // FIXME: All selectors using the spin buttons should support strings in the\n                // onChange to inform the user that the current value is invalid, but not empty\n                if (typeof value !== 'string') {\n                  // controlled changes should remove the precision of the value\n                  const precisionRemovedValue = removePrecisionFromTimeValue(\n                    value,\n                    precision,\n                  );\n                  onChange.from(precisionRemovedValue);\n                }\n              }}\n              aria-label={dateTimeFromLabel}\n              aria-disabled={ariaDisabled}\n              min={min}\n              max={max}\n              required={required}\n              onError={onError.from}\n              controlId={id}\n            />\n\n            <span>\u2192</span>\n            <DateTimeInput\n              ref={dateTimeToRef}\n              precision={precision}\n              disabled={disabled}\n              readOnly={readOnly}\n              placeholder={placeholder.to}\n              name={name !== undefined ? `${name}-to` : undefined}\n              value={value.to}\n              onChange={(value) => {\n                // FIXME: All selectors using the spin buttons should support strings in the\n                // onChange to inform the user that the current value is invalid, but not empty\n                if (typeof value !== 'string') {\n                  // controlled changes should remove the precision of the value\n                  const precisionRemovedValue = removePrecisionFromTimeValue(\n                    value,\n                    precision,\n                  );\n                  onChange.to(precisionRemovedValue);\n                }\n              }}\n              aria-label={dateTimeToLabel}\n              aria-disabled={ariaDisabled}\n              min={min}\n              max={max}\n              required={required}\n              onError={onError.to}\n            />\n          </Flex>\n          <DateRangeSelector\n            ref={dateRangeSelectorRef}\n            value={value}\n            onChange={(selectedRange) => {\n              const newFrom = selectedRange?.from ?? null;\n\n              onChange.from(newFrom);\n              onChange.to(selectedRange?.to ?? null);\n              requestAnimationFrame(() => {\n                focusDateTimeInput(null, dateTimeFromRef);\n              });\n            }}\n            precision={precision}\n            disabled={disabled}\n            aria-disabled={ariaDisabled}\n            readOnly={readOnly}\n            errorFrom={errorFrom}\n            errorTo={errorTo}\n            error={showError}\n            min={min}\n            max={max}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          />\n        </InputGroup>\n      </FormFieldMessageContext.Provider>\n    </Flex>\n  );\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>((props, forwardedRef) => {\n  const { selectedOverCalendar, setSelectedOverCalendar } = useContext(\n    SelectedOverCalendarContext,\n  );\n\n  const [fallbackSelectedOverCalendar, setFallbackSelectedOverCalendar] =\n    useState<boolean | undefined>(false);\n\n  const [selectedOverCalendarFlag, setSelectedOverCalendarFlag] = useState<\n    boolean | undefined\n  >(false);\n\n  if (\n    selectedOverCalendar !== undefined ||\n    setSelectedOverCalendar !== undefined\n  ) {\n    return <DateTimeRangePickerBody {...props} ref={forwardedRef} />;\n  }\n\n  return (\n    <SelectedOverCalendarContext.Provider\n      value={{\n        selectedOverCalendar: fallbackSelectedOverCalendar,\n        setSelectedOverCalendar: setFallbackSelectedOverCalendar,\n        calendarOnChangeFlag: selectedOverCalendarFlag,\n        setCalendarOnChangeFlag: setSelectedOverCalendarFlag,\n      }}\n    >\n      <DateTimeRangePickerBody {...props} ref={forwardedRef} />\n    </SelectedOverCalendarContext.Provider>\n  );\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n  useState,\n  useContext,\n  useMemo,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type FocusEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { SelectedOverCalendarContext } from './contexts/SelectedOverCalendarContext.js';\nimport { DateRangeSelector } from './DateRangeSelector.js';\nimport { DateTimeInput } from './DateTimeInput.js';\nimport { dateTimeRangeCSS } from './DateTimeRangePicker.sty.js';\nimport { removePrecisionFromTimeValue } from './helpers.js';\nimport { useDateTimeRangePicker } from './hooks/useDateTimeRangePicker.js';\nimport type {\n  DateTimeRangePickerProps,\n  DateTimeRangePickerRef,\n} from './types.js';\nimport { DateRangeSelectorRef, DateTimeInputRef } from './types.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { fieldColors as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\nimport { dateTimePicker } from '../date-time-picker/DateTimePicker.sty.js';\nimport { focusDateTimeInput } from '../date-time-picker/utils/focusDateTimeInput.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } 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';\n\nconst DateTimeRangePickerBody = forwardRef<\n  DateTimeRangePickerRef,\n  DateTimeRangePickerProps\n>((props, forwardedRef) => {\n  const {\n    id: propId,\n    precision = 'minutes',\n    disabled: propDisabled,\n    readOnly = false,\n    name,\n    style: consumerStyle,\n    className: consumerClassName,\n    min = GRAIL_MIN_DATE,\n    max = GRAIL_MAX_DATE,\n    required: propRequired,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    defaultValue,\n    value: propValue,\n    onChange: propOnChange,\n    placeholder: placeholderProp,\n  }: DateTimeRangePickerProps = props;\n\n  const COMPONENT_NAME = 'DateTimeRangePicker';\n\n  const ariaProps = _useAriaLabelingProps(props);\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const touchedContainerRef = useRef<HTMLDivElement>(null);\n  const dateTimeFromRef = useRef<DateTimeInputRef>(null);\n  const dateTimeToRef = useRef<DateTimeInputRef>(null);\n  const dateRangeSelectorRef = useRef<DateRangeSelectorRef>(null);\n\n  const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: ariaDisabledProp,\n  });\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const {\n    value,\n    onChange,\n    placeholder,\n    onCopyCapture,\n    onPasteCapture,\n    onBlurTouched,\n    onError,\n    errorTo,\n    errorFrom,\n    validate,\n  } = useDateTimeRangePicker({\n    value: propValue,\n    defaultValue,\n    placeholder: placeholderProp,\n    readOnly,\n    min,\n    max,\n    precision,\n    onChange: propOnChange,\n    touchedContainerRef,\n    validationInputRef: dateTimeFromRef,\n  });\n  const intl = useIntl();\n\n  const {\n    state: { showError },\n    dispatch: formMessageDispatch,\n  } = useFormFieldMessagesContext();\n\n  // Provide root and input element reference and functions to interact with the calendar overlay\n  useImperativeHandle(\n    forwardedRef,\n    (): DateTimeRangePickerRef => ({\n      element: rootRef.current,\n      inputRef: {\n        from: dateTimeFromRef.current?.inputRef,\n        to: dateTimeToRef.current?.inputRef,\n      },\n      open: () => dateRangeSelectorRef.current?.open(),\n      close: () => dateRangeSelectorRef.current?.close(),\n      focus: () => dateTimeFromRef.current?.focus?.(),\n      getCurrentValue: () => ({ from: value.from, to: value.to }),\n      validate() {\n        validate(value.from, value.to, true);\n        formMessageDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      },\n    }),\n    [formMessageDispatch, validate, value.from, value.to],\n  );\n\n  const variantStyle = dateTimeRangeCSS({\n    showError,\n    disabled: disabledOrAriaDisabled,\n    readOnly: readOnly,\n  });\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: true,\n    isMinimal: false,\n    disabled,\n    color: showError ? 'critical' : 'neutral',\n  });\n\n  const dateTimeFromLabel = intl.formatMessage({\n    defaultMessage: 'DateTime from',\n    id: 'fMy6q/KKOqbvCA3H',\n    description:\n      'Textbox to enter a relative or absolute timeframe from value.',\n  });\n\n  const dateTimeToLabel = intl.formatMessage({\n    defaultMessage: 'DateTime to',\n    id: 'uuhhc3nEZptwtV2E',\n    description: 'Textbox to enter a relative or absolute timeframe to value.',\n  });\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      state: {\n        customMessages: [],\n        formControlMessages: [],\n        showError,\n      },\n    }),\n    [showError],\n  );\n\n  return (\n    <Flex\n      ref={rootRef}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      style={consumerStyle}\n      className={consumerClassName}\n      {...ariaProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n        <InputGroup style={{ gridTemplateColumns: '1fr auto' }}>\n          <Flex\n            ref={touchedContainerRef}\n            className={clsx(\n              inputGroupClassName,\n              dateTimePicker({\n                readOnly,\n                showError,\n                disabled,\n                type: 'datetime',\n              }),\n              textStyleCSS({ textStyle: 'base' }),\n              fieldColorsCSS({\n                color: showError ? 'critical' : 'neutral',\n                disabled: disabledOrAriaDisabled,\n                variant: 'emphasized',\n              }),\n              focusClassName,\n              variantStyle,\n            )}\n            onCopyCapture={onCopyCapture}\n            onPasteCapture={onPasteCapture}\n            onBlur={onBlurTouched}\n            tabIndex={disabled ? undefined : 0}\n            onKeyDown={(e: ReactKeyboardEvent) => {\n              // Forward the focus when a key is pressed in this element.\n              if (e.target === touchedContainerRef.current) {\n                focusDateTimeInput(null, dateTimeFromRef, dateTimeToRef);\n              }\n            }}\n            onFocus={(e: FocusEvent) => {\n              // Forward the focus only if it is coming from outside this component.\n              // Focus the first spin button with textContent; otherwise, focus the input.\n              if (!rootRef.current?.contains(e.relatedTarget)) {\n                focusDateTimeInput(e, dateTimeFromRef, dateTimeToRef);\n              }\n            }}\n          >\n            <DateTimeInput\n              ref={dateTimeFromRef}\n              precision={precision}\n              disabled={disabled}\n              readOnly={readOnly}\n              placeholder={placeholder.from}\n              name={name !== undefined ? `${name}-from` : undefined}\n              value={value.from}\n              onChange={(value) => {\n                // FIXME: All selectors using the spin buttons should support strings in the\n                // onChange to inform the user that the current value is invalid, but not empty\n                if (typeof value !== 'string') {\n                  // controlled changes should remove the precision of the value\n                  const precisionRemovedValue = removePrecisionFromTimeValue(\n                    value,\n                    precision,\n                  );\n                  onChange.from(precisionRemovedValue);\n                }\n              }}\n              aria-label={dateTimeFromLabel}\n              aria-disabled={ariaDisabled}\n              min={min}\n              max={max}\n              required={required}\n              onError={onError.from}\n              controlId={id}\n            />\n\n            <span>\u2192</span>\n            <DateTimeInput\n              ref={dateTimeToRef}\n              precision={precision}\n              disabled={disabled}\n              readOnly={readOnly}\n              placeholder={placeholder.to}\n              name={name !== undefined ? `${name}-to` : undefined}\n              value={value.to}\n              onChange={(value) => {\n                // FIXME: All selectors using the spin buttons should support strings in the\n                // onChange to inform the user that the current value is invalid, but not empty\n                if (typeof value !== 'string') {\n                  // controlled changes should remove the precision of the value\n                  const precisionRemovedValue = removePrecisionFromTimeValue(\n                    value,\n                    precision,\n                  );\n                  onChange.to(precisionRemovedValue);\n                }\n              }}\n              aria-label={dateTimeToLabel}\n              aria-disabled={ariaDisabled}\n              min={min}\n              max={max}\n              required={required}\n              onError={onError.to}\n            />\n          </Flex>\n          <DateRangeSelector\n            ref={dateRangeSelectorRef}\n            value={value}\n            onChange={(selectedRange) => {\n              const newFrom = selectedRange?.from ?? null;\n\n              onChange.from(newFrom);\n              onChange.to(selectedRange?.to ?? null);\n              requestAnimationFrame(() => {\n                focusDateTimeInput(null, dateTimeFromRef);\n              });\n            }}\n            precision={precision}\n            disabled={disabled}\n            aria-disabled={ariaDisabled}\n            readOnly={readOnly}\n            errorFrom={errorFrom}\n            errorTo={errorTo}\n            error={showError}\n            min={min}\n            max={max}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          />\n        </InputGroup>\n      </FormFieldMessageContext.Provider>\n    </Flex>\n  );\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>((props, forwardedRef) => {\n  const { selectedOverCalendar, setSelectedOverCalendar } = useContext(\n    SelectedOverCalendarContext,\n  );\n\n  const [fallbackSelectedOverCalendar, setFallbackSelectedOverCalendar] =\n    useState<boolean | undefined>(false);\n\n  const [selectedOverCalendarFlag, setSelectedOverCalendarFlag] = useState<\n    boolean | undefined\n  >(false);\n\n  if (\n    selectedOverCalendar !== undefined ||\n    setSelectedOverCalendar !== undefined\n  ) {\n    return <DateTimeRangePickerBody {...props} ref={forwardedRef} />;\n  }\n\n  return (\n    <SelectedOverCalendarContext.Provider\n      value={{\n        selectedOverCalendar: fallbackSelectedOverCalendar,\n        setSelectedOverCalendar: setFallbackSelectedOverCalendar,\n        calendarOnChangeFlag: selectedOverCalendarFlag,\n        setCalendarOnChangeFlag: setSelectedOverCalendarFlag,\n      }}\n    >\n      <DateTimeRangePickerBody {...props} ref={forwardedRef} />\n    </SelectedOverCalendarContext.Provider>\n  );\n});\n"],
+  "mappings": "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",
   "names": ["value"]
 }

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

@@ -1,7 +1,7 @@
 import "../../styles/field.css";
 import "./DateTimeRangePicker.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var dateTimeRangeCSS = _7a468({ defaultClassName: "_1vlwkc20-3-0-1", variantClassNames: { showError: { true: "_1vlwkc21-3-0-1" }, disabled: { true: "_1vlwkc22-3-0-1" }, readOnly: { true: "_1vlwkc23-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var dateTimeRangeCSS = _7a468({ defaultClassName: "_1vlwkc20-3-1-1", variantClassNames: { showError: { true: "_1vlwkc21-3-1-1" }, disabled: { true: "_1vlwkc22-3-1-1" }, readOnly: { true: "_1vlwkc23-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   dateTimeRangeCSS
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeRangePicker.css.ts"],
-  "sourcesContent": ["import '../../styles/field.css';\nimport './DateTimeRangePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dateTimeRangeCSS = _7a468({defaultClassName:'_1vlwkc20-3-0-1',variantClassNames:{showError:{true:'_1vlwkc21-3-0-1'},disabled:{true:'_1vlwkc22-3-0-1'},readOnly:{true:'_1vlwkc23-3-0-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import '../../styles/field.css';\nimport './DateTimeRangePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dateTimeRangeCSS = _7a468({defaultClassName:'_1vlwkc20-3-1-1',variantClassNames:{showError:{true:'_1vlwkc21-3-1-1'},disabled:{true:'_1vlwkc22-3-1-1'},readOnly:{true:'_1vlwkc23-3-1-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

@@ -48,9 +48,11 @@ const useDateTimeInputValidation = (validationProps, parts, toDateTime) => {
         validateExpression(value, expressionValue);
       } else if (date !== null) {
         validateDate(value, date);
+      } else {
+        updateError(null);
       }
     },
-    [parts, toDateTime, validateDate, validateExpression]
+    [parts, toDateTime, updateError, validateDate, validateExpression]
   );
   return {
     validateTimeValue

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/date-time-range-picker/hooks/useDateTimeIInputValidation.tsx"],
-  "sourcesContent": ["import { isValid } from 'date-fns';\nimport { useCallback, useRef } from 'react';\n\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { isOutOfBounds } from '../../calendar/state/calendar-validation.js';\nimport type { DateTimeError, DateTimeInputProps } from '../types.js';\n\nexport const useDateTimeInputValidation = (\n  validationProps: Pick<\n    DateTimeInputProps,\n    'onError' | 'min' | 'max' | 'required'\n  >,\n  parts: Intl.DateTimeFormatPart[],\n  toDateTime: (parts: Intl.DateTimeFormatPart[]) => Date | null,\n) => {\n  const { onError, min, max, required } = validationProps;\n\n  const errorType = useRef<DateTimeError>(null);\n\n  const updateError = useCallback(\n    (newErrorType: DateTimeError) => {\n      if (newErrorType !== errorType.current) {\n        errorType.current = newErrorType;\n        onError?.(newErrorType);\n      }\n    },\n    [onError],\n  );\n\n  /*\n   * Validates and updates error states from expression strings.\n   */\n  const validateExpression = useCallback(\n    (value?: TimeValue | null, expressionValue?: string) => {\n      if (value === null && expressionValue) {\n        updateError('invalid');\n      } else if ((value === null || value === undefined) && required) {\n        updateError('valueMissing');\n      } else if (isOutOfBounds(value?.value, min, max)) {\n        updateError('outsideRange');\n      } else {\n        updateError(null);\n      }\n    },\n    [max, min, required, updateError],\n  );\n\n  /*\n   * Validates and updates error states for dates from SpinButtons.\n   */\n  const validateDate = useCallback(\n    (value?: TimeValue | null, date?: Date | null) => {\n      if (!isValid(date) && date !== null) {\n        updateError('invalid');\n      } else if (\n        (value === null || value === undefined) &&\n        date === null &&\n        required\n      ) {\n        updateError('valueMissing');\n      } else if (date && isOutOfBounds(date, min, max)) {\n        updateError('outsideRange');\n      } else {\n        updateError(null);\n      }\n    },\n    [max, min, required, updateError],\n  );\n\n  const validateTimeValue = useCallback(\n    (value?: TimeValue | null, expressionValue?: string) => {\n      const date = toDateTime(parts);\n      if (expressionValue !== undefined && date === null) {\n        validateExpression(value, expressionValue);\n      } else if (date !== null) {\n        validateDate(value, date);\n      }\n    },\n    [parts, toDateTime, validateDate, validateExpression],\n  );\n\n  return {\n    validateTimeValue,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,eAAe;AACxB,SAAS,aAAa,cAAc;AAGpC,SAAS,qBAAqB;AAGvB,MAAM,6BAA6B,CACxC,iBAIA,OACA,eACG;AACH,QAAM,EAAE,SAAS,KAAK,KAAK,SAAS,IAAI;AAExC,QAAM,YAAY,OAAsB,IAAI;AAE5C,QAAM,cAAc;AAAA,IAClB,CAAC,iBAAgC;AAC/B,UAAI,iBAAiB,UAAU,SAAS;AACtC,kBAAU,UAAU;AACpB,kBAAU,YAAY;AAAA,MACxB;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAKA,QAAM,qBAAqB;AAAA,IACzB,CAAC,OAA0B,oBAA6B;AACtD,UAAI,UAAU,QAAQ,iBAAiB;AACrC,oBAAY,SAAS;AAAA,MACvB,YAAY,UAAU,QAAQ,UAAU,WAAc,UAAU;AAC9D,oBAAY,cAAc;AAAA,MAC5B,WAAW,cAAc,OAAO,OAAO,KAAK,GAAG,GAAG;AAChD,oBAAY,cAAc;AAAA,MAC5B,OAAO;AACL,oBAAY,IAAI;AAAA,MAClB;AAAA,IACF;AAAA,IACA,CAAC,KAAK,KAAK,UAAU,WAAW;AAAA,EAClC;AAKA,QAAM,eAAe;AAAA,IACnB,CAAC,OAA0B,SAAuB;AAChD,UAAI,CAAC,QAAQ,IAAI,KAAK,SAAS,MAAM;AACnC,oBAAY,SAAS;AAAA,MACvB,YACG,UAAU,QAAQ,UAAU,WAC7B,SAAS,QACT,UACA;AACA,oBAAY,cAAc;AAAA,MAC5B,WAAW,QAAQ,cAAc,MAAM,KAAK,GAAG,GAAG;AAChD,oBAAY,cAAc;AAAA,MAC5B,OAAO;AACL,oBAAY,IAAI;AAAA,MAClB;AAAA,IACF;AAAA,IACA,CAAC,KAAK,KAAK,UAAU,WAAW;AAAA,EAClC;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,OAA0B,oBAA6B;AACtD,YAAM,OAAO,WAAW,KAAK;AAC7B,UAAI,oBAAoB,UAAa,SAAS,MAAM;AAClD,2BAAmB,OAAO,eAAe;AAAA,MAC3C,WAAW,SAAS,MAAM;AACxB,qBAAa,OAAO,IAAI;AAAA,MAC1B;AAAA,IACF;AAAA,IACA,CAAC,OAAO,YAAY,cAAc,kBAAkB;AAAA,EACtD;AAEA,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { isValid } from 'date-fns';\nimport { useCallback, useRef } from 'react';\n\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { isOutOfBounds } from '../../calendar/state/calendar-validation.js';\nimport type { DateTimeError, DateTimeInputProps } from '../types.js';\n\nexport const useDateTimeInputValidation = (\n  validationProps: Pick<\n    DateTimeInputProps,\n    'onError' | 'min' | 'max' | 'required'\n  >,\n  parts: Intl.DateTimeFormatPart[],\n  toDateTime: (parts: Intl.DateTimeFormatPart[]) => Date | null,\n) => {\n  const { onError, min, max, required } = validationProps;\n\n  const errorType = useRef<DateTimeError>(null);\n\n  const updateError = useCallback(\n    (newErrorType: DateTimeError) => {\n      if (newErrorType !== errorType.current) {\n        errorType.current = newErrorType;\n        onError?.(newErrorType);\n      }\n    },\n    [onError],\n  );\n\n  /*\n   * Validates and updates error states from expression strings.\n   */\n  const validateExpression = useCallback(\n    (value?: TimeValue | null, expressionValue?: string) => {\n      if (value === null && expressionValue) {\n        updateError('invalid');\n      } else if ((value === null || value === undefined) && required) {\n        updateError('valueMissing');\n      } else if (isOutOfBounds(value?.value, min, max)) {\n        updateError('outsideRange');\n      } else {\n        updateError(null);\n      }\n    },\n    [max, min, required, updateError],\n  );\n\n  /*\n   * Validates and updates error states for dates from SpinButtons.\n   */\n  const validateDate = useCallback(\n    (value?: TimeValue | null, date?: Date | null) => {\n      if (!isValid(date) && date !== null) {\n        updateError('invalid');\n      } else if (\n        (value === null || value === undefined) &&\n        date === null &&\n        required\n      ) {\n        updateError('valueMissing');\n      } else if (date && isOutOfBounds(date, min, max)) {\n        updateError('outsideRange');\n      } else {\n        updateError(null);\n      }\n    },\n    [max, min, required, updateError],\n  );\n\n  const validateTimeValue = useCallback(\n    (value?: TimeValue | null, expressionValue?: string) => {\n      const date = toDateTime(parts);\n      if (expressionValue !== undefined && date === null) {\n        validateExpression(value, expressionValue);\n      } else if (date !== null) {\n        validateDate(value, date);\n      } else {\n        updateError(null);\n      }\n    },\n    [parts, toDateTime, updateError, validateDate, validateExpression],\n  );\n\n  return {\n    validateTimeValue,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,eAAe;AACxB,SAAS,aAAa,cAAc;AAGpC,SAAS,qBAAqB;AAGvB,MAAM,6BAA6B,CACxC,iBAIA,OACA,eACG;AACH,QAAM,EAAE,SAAS,KAAK,KAAK,SAAS,IAAI;AAExC,QAAM,YAAY,OAAsB,IAAI;AAE5C,QAAM,cAAc;AAAA,IAClB,CAAC,iBAAgC;AAC/B,UAAI,iBAAiB,UAAU,SAAS;AACtC,kBAAU,UAAU;AACpB,kBAAU,YAAY;AAAA,MACxB;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAKA,QAAM,qBAAqB;AAAA,IACzB,CAAC,OAA0B,oBAA6B;AACtD,UAAI,UAAU,QAAQ,iBAAiB;AACrC,oBAAY,SAAS;AAAA,MACvB,YAAY,UAAU,QAAQ,UAAU,WAAc,UAAU;AAC9D,oBAAY,cAAc;AAAA,MAC5B,WAAW,cAAc,OAAO,OAAO,KAAK,GAAG,GAAG;AAChD,oBAAY,cAAc;AAAA,MAC5B,OAAO;AACL,oBAAY,IAAI;AAAA,MAClB;AAAA,IACF;AAAA,IACA,CAAC,KAAK,KAAK,UAAU,WAAW;AAAA,EAClC;AAKA,QAAM,eAAe;AAAA,IACnB,CAAC,OAA0B,SAAuB;AAChD,UAAI,CAAC,QAAQ,IAAI,KAAK,SAAS,MAAM;AACnC,oBAAY,SAAS;AAAA,MACvB,YACG,UAAU,QAAQ,UAAU,WAC7B,SAAS,QACT,UACA;AACA,oBAAY,cAAc;AAAA,MAC5B,WAAW,QAAQ,cAAc,MAAM,KAAK,GAAG,GAAG;AAChD,oBAAY,cAAc;AAAA,MAC5B,OAAO;AACL,oBAAY,IAAI;AAAA,MAClB;AAAA,IACF;AAAA,IACA,CAAC,KAAK,KAAK,UAAU,WAAW;AAAA,EAClC;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,OAA0B,oBAA6B;AACtD,YAAM,OAAO,WAAW,KAAK;AAC7B,UAAI,oBAAoB,UAAa,SAAS,MAAM;AAClD,2BAAmB,OAAO,eAAe;AAAA,MAC3C,WAAW,SAAS,MAAM;AACxB,qBAAa,OAAO,IAAI;AAAA,MAC1B,OAAO;AACL,oBAAY,IAAI;AAAA,MAClB;AAAA,IACF;AAAA,IACA,CAAC,OAAO,YAAY,aAAa,cAAc,kBAAkB;AAAA,EACnE;AAEA,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -161,7 +161,7 @@ const useDateTimeInput = (props, expressionInputRef) => {
       setValueType("expression");
       setValue(null);
       setExpressionEmpty(true);
-      validateTimeValue(parseTimeAsTimeValue(input));
+      validateTimeValue(parseTimeAsTimeValue(input), input);
       return;
     }
     setExpressionEmpty(false);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/date-time-range-picker/hooks/useDateTimeInput.ts"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type RefObject,\n  FormEventHandler as ReactFormEventHandler,\n  FocusEventHandler,\n  ClipboardEventHandler,\n  KeyboardEventHandler as ReactKeyboardEventHandler,\n} from 'react';\n\nimport {\n  parseTimeAsTimeValue,\n  _parseTimeExpression,\n} from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useDateTimeInputValidation } from './useDateTimeIInputValidation.js';\nimport { useDateTimeParser } from './useDateTimeParser.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useControllableState } from '../../../core/hooks/useControllableState.js';\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { useDateTimePicker } from '../../date-time-picker/hooks/useDateTimePicker.js';\nimport {\n  getTimeValue,\n  formatTimeValue,\n} from '../../forms-core/time/timeParser.js';\nimport { useSelection } from '../../spin-buttons/hooks/useSelection.js';\nimport type { NumberSpinButtonRef } from '../../spin-buttons/number-spin-button/types.js';\nimport type { SpinButtonHandler } from '../../spin-buttons/spin-button-group/types.js';\nimport { isEqualTimeValue } from '../helpers.js';\nimport type { DateTimeInputProps } from '../types.js';\n\nfunction isNumberSpinButton(\n  handler: SpinButtonHandler | undefined,\n): handler is NumberSpinButtonRef {\n  return handler !== undefined && handler.type === 'number';\n}\n\n/*\n * A hook that provides the default functionality for the DateTimeInput picker\n */\nexport const useDateTimeInput = (\n  props: DateTimeInputProps,\n  expressionInputRef: RefObject<HTMLSpanElement | null>,\n) => {\n  const {\n    precision,\n    disabled,\n    readOnly,\n    required,\n    onError,\n    min,\n    max,\n    type,\n    onChange,\n  }: DateTimeInputProps = props;\n\n  const ariaProps = useAriaLabelingProps(props);\n  const { regexDateTimeStart, maxValue, types } = useDateTimeParser({\n    type,\n    precision,\n  });\n  // ? INVESTIGATE: without the generic, building the visreg story viewer and unit-test typechecking fails,\n  // ? but the components-preview:build target still succeeds without any issues -> why?\n  const [value, setValue] = useControllableState<TimeValue | null>(props);\n  const isControlled = props.value !== undefined;\n  const [valueType, setValueType] = useState(value?.type ?? 'expression');\n  const firstRun = useRef(true);\n  const [expressionEmpty, setExpressionEmpty] = useState(\n    !expressionInputRef.current?.textContent,\n  );\n  const [inputValue, setInputValue] = useState('');\n\n  const {\n    spinButtons,\n    parts,\n    toDateTime,\n    handlers: spinButtonHandlers,\n    empty: spinButtonsEmpty,\n    applyDateTime,\n    firstSpinButtonHandler,\n  } = useDateTimePicker({\n    type,\n    precision,\n    disabled,\n    readOnly,\n    valueType,\n    value:\n      // only apply the absolute date if the input mode was already the datetimepicker\n      value?.type === 'iso8601' && valueType === 'iso8601'\n        ? value.absoluteDate\n        : null,\n    onChange: (newIsoDateTime) => {\n      const newValue = getTimeValue(newIsoDateTime ?? undefined);\n\n      if (newIsoDateTime === '') {\n        // Trigger the onChange passed to the DateTimePicker to let the user know\n        // that the currently entered value is invalid (incomplete spin buttons input).\n        onChange?.('');\n        return;\n      }\n\n      if (newValue === undefined) {\n        return;\n      }\n\n      // only update the value if the newTimeValue differs from the prev. one\n      setValue((prevValue) =>\n        isEqualTimeValue(prevValue, newValue) ? prevValue : newValue,\n      );\n\n      validateTimeValue(newValue);\n    },\n    ...ariaProps,\n  });\n\n  const empty = useMemo(\n    () => (valueType === 'expression' ? expressionEmpty : spinButtonsEmpty),\n    [valueType, expressionEmpty, spinButtonsEmpty],\n  );\n\n  // switch input mode based on controlled value change\n  useEffect(() => {\n    if (value?.type === 'iso8601' && !spinButtonsEmpty) {\n      setInputValue(value.value);\n    }\n\n    // ignore if in uncontrolled mode\n    if (!isControlled || typeof value === 'string') {\n      return;\n    }\n\n    // reset input if value is null\n    if (!value) {\n      setValueType('expression');\n      updateExpression(null);\n      const input = expressionInputRef.current?.textContent;\n      setExpressionEmpty(input === '');\n      spinButtonHandlers.forEach((sb) => sb?.clearValue(true));\n      validateTimeValue(value, input ?? '');\n      return;\n    }\n\n    // apply value to expression\n    // the spinbutton update is handled within the useSpinButton hook internally\n    const newValueType = value.type ?? 'expression';\n    setValueType(value.type);\n    setInputValue(value.value);\n    if (newValueType === 'expression') {\n      updateExpression(value);\n      setExpressionEmpty(value.value === '');\n      const input = expressionInputRef.current?.textContent;\n      validateTimeValue(value, input ?? '');\n    }\n    // only react to outside value changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  // hook to evaluate the error state based on the given expression, value, and spinbutton state\n  const { validateTimeValue } = useDateTimeInputValidation(\n    {\n      min,\n      max,\n      required,\n      onError, // fired on update\n    },\n    parts,\n    toDateTime,\n  );\n\n  useEffect(() => {\n    // Ignore expression updates, only handle spinbutton update in here\n    if (valueType === 'expression') {\n      return;\n    }\n    validateTimeValue(value);\n  }, [validateTimeValue, value, valueType]);\n\n  const { selectAll: expressionInputSelectAll } =\n    useSelection(expressionInputRef);\n\n  // called on onBlur to sanitize the current expression\n  const updateExpression = useCallback(\n    (value: TimeValue | null) => {\n      if (!expressionInputRef.current) {\n        return;\n      }\n      const formattedValue = value ? formatTimeValue(value) : '';\n      const currentValue = formatTimeValue(\n        expressionInputRef.current?.textContent ?? '',\n      );\n\n      // only update if the current value differs from the new value\n      // don't update the textnode while typing but allow e.g. pasting a new expression\n      if (currentValue !== formattedValue) {\n        expressionInputRef.current.textContent = formattedValue;\n      }\n    },\n    // no use in adding the expressionInputRef to the dep. array\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  // handles input events on the expression contenteditable span\n  const expressionInputHandler: ReactFormEventHandler<HTMLSpanElement> =\n    useCallback(() => {\n      if (!expressionInputRef.current) {\n        return;\n      }\n\n      const input = expressionInputRef.current.textContent ?? '';\n\n      // Remove <br> added by browser in contenteditable to ensure placeholder works\n      if (expressionInputRef.current.innerHTML === '<br>') {\n        expressionInputRef.current.innerHTML = '';\n      }\n\n      // fallback to expression if text content is removed\n      if (input === '') {\n        setValueType('expression');\n        setValue(null);\n        setExpressionEmpty(true);\n        validateTimeValue(parseTimeAsTimeValue(input));\n        return;\n      }\n\n      setExpressionEmpty(false);\n\n      // if the input starts like a valid datetime for the current locale, switch to the datetime picker\n      const [, carryOver] = regexDateTimeStart.exec(input) ?? [];\n      if (Number.parseInt(carryOver) <= maxValue) {\n        setValueType('iso8601');\n\n        // clear all spinbuttons\n        applyDateTime(null);\n\n        // get a cleaned and sorted list of spinbutton handlers\n        const sortedHandlers = types\n          .filter((type) => type !== 'literal')\n          .map((type) => spinButtonHandlers.get(type))\n          .filter(Boolean) as SpinButtonHandler[];\n        const [carryOverSB, focusSB] = sortedHandlers;\n\n        // carry over entered value to the next number spinbutton\n        isNumberSpinButton(carryOverSB) &&\n          carryOverSB.applyText(carryOver, true);\n\n        // clear expression input content\n        expressionInputRef.current.textContent = '';\n\n        // set focus after switch to expression mode happened\n        requestAnimationFrame(() => {\n          // set focus to second spinbutton\n          focusSB?.element.current?.focus();\n        });\n        return;\n      }\n\n      // if input is a valid expression, update the internal value state\n      const newValue = parseTimeAsTimeValue(input);\n\n      // reevaluate if the new input is valid or not\n      validateTimeValue(newValue, input);\n\n      if (newValue === null && input !== '') {\n        onChange?.('');\n      }\n      // only update the value if the newTimeValue differs from the prev. one\n      setValue((prevValue) =>\n        isEqualTimeValue(prevValue, newValue) ? prevValue : newValue,\n      );\n\n      setInputValue(input);\n    }, [\n      expressionInputRef,\n      regexDateTimeStart,\n      maxValue,\n      validateTimeValue,\n      setValue,\n      applyDateTime,\n      types,\n      spinButtonHandlers,\n      onChange,\n    ]);\n\n  // select expression text content on focus\n  const expressionOnFocusHandler: FocusEventHandler<HTMLSpanElement> =\n    useCallback(() => {\n      expressionInputSelectAll();\n    }, [expressionInputSelectAll]);\n\n  // sanitize textnode if content is an expression\n  const expressionOnBlurHandler: FocusEventHandler<HTMLSpanElement> =\n    useCallback(() => {\n      if (expressionInputRef.current && value?.type === 'expression') {\n        const currentExpressionInput =\n          expressionInputRef.current.textContent ?? '';\n        const isValidExpression = _parseTimeExpression(\n          currentExpressionInput.trim(),\n        );\n\n        if (isValidExpression) {\n          expressionInputRef.current.textContent = formatTimeValue(value);\n        }\n      }\n\n      // eslint annoyingly wants to add the ref to the dependency list\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n  // if the value is a valid TimeValue, copy the ISO or expression to the clipboard\n  const onCopyCapture: ClipboardEventHandler<HTMLSpanElement> = useCallback(\n    async (event) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (value === null) {\n        return;\n      }\n      try {\n        await navigator.clipboard.writeText(value.value);\n      } catch {\n        // For now, we silently ignore clipboard write errors.\n      }\n    },\n    [value],\n  );\n\n  // clipboard paste handler. apply clipboard content if formatted correctly\n  const onPaste: ClipboardEventHandler<HTMLSpanElement> = useCallback(\n    (event) => {\n      if (readOnly) {\n        return;\n      }\n\n      const data = event.clipboardData?.getData('text/plain');\n      if (!data) {\n        return;\n      }\n\n      // if the clipboard content is a valid expression or ISO, apply it as value\n      const nextValue = parseTimeAsTimeValue(\n        data.trim(),\n        TZDateMini.tz(getTimezone()).getTime(),\n        precision,\n      );\n      if (nextValue) {\n        setValueType(nextValue.type);\n        if (nextValue.type === 'expression') {\n          updateExpression(nextValue);\n        } else {\n          // If the new value is switching the input mode, delay updating the spinbuttons by one render cycle\n          requestAnimationFrame(() => applyDateTime(nextValue.absoluteDate));\n        }\n        setValue(nextValue);\n        event.preventDefault();\n      }\n    },\n    [applyDateTime, precision, readOnly, setValue, updateExpression],\n  );\n\n  // prevent unwanted input keys like ENTER\n  const expressionOnKeyDownHandler: ReactKeyboardEventHandler<HTMLSpanElement> =\n    useCallback((event) => {\n      if (event.key === 'Enter') {\n        event.preventDefault();\n      }\n    }, []);\n\n  // focus the first spinbutton or the expression input based on the current input mode\n  const focus = useCallback(() => {\n    switch (valueType) {\n      case 'expression':\n        expressionInputRef.current?.focus();\n        break;\n      case 'iso8601':\n        firstSpinButtonHandler?.element?.current?.focus();\n        break;\n    }\n    // no need to pass the refs as dependency\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [valueType, firstSpinButtonHandler]);\n\n  // first initialization of the uncontrolled expression value on component mount\n  useEffect(() => {\n    if (isControlled || value?.type !== 'expression') {\n      return;\n    }\n    updateExpression(value);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // if the spinbuttons are empty ...\n  useEffect(() => {\n    // Don't run the empty spinbutton check on component mount.\n    if (firstRun.current) {\n      firstRun.current = false;\n      validateTimeValue(value);\n      return;\n    }\n\n    // ... switch to expression input\n    if (valueType === 'iso8601' && spinButtonsEmpty) {\n      setValueType('expression');\n      setExpressionEmpty(true);\n\n      if (value !== null) {\n        setValue(null);\n      }\n\n      setInputValue('');\n\n      // reevaluate error state\n      validateTimeValue(null);\n\n      // wait until the expression input is visible to set the focus\n      setTimeout(() => {\n        expressionInputRef?.current?.focus();\n      });\n    }\n    // only react on empty state changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [spinButtonsEmpty]);\n\n  useEffect(() => {\n    if (valueType !== 'expression') {\n      return;\n    }\n\n    if (empty) {\n      setInputValue('');\n      return;\n    }\n\n    if (expressionInputRef.current?.textContent) {\n      setInputValue(expressionInputRef.current?.textContent); // fixes validating initial expression value in the DateTimeRangePicker\n    }\n    // valueType can be excluded because empty already depends on it\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [empty]);\n\n  return {\n    empty,\n    spinButtons,\n    spinButtonHandlers,\n    value: typeof value === 'string' ? null : value,\n    valueType,\n    inputValue,\n    expressionInputHandler,\n    expressionOnFocusHandler,\n    expressionOnBlurHandler,\n    expressionOnKeyDownHandler,\n    onCopyCapture,\n    onPaste,\n    focus,\n    validateTimeValue,\n  };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type RefObject,\n  FormEventHandler as ReactFormEventHandler,\n  FocusEventHandler,\n  ClipboardEventHandler,\n  KeyboardEventHandler as ReactKeyboardEventHandler,\n} from 'react';\n\nimport {\n  parseTimeAsTimeValue,\n  _parseTimeExpression,\n} from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useDateTimeInputValidation } from './useDateTimeIInputValidation.js';\nimport { useDateTimeParser } from './useDateTimeParser.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useControllableState } from '../../../core/hooks/useControllableState.js';\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { useDateTimePicker } from '../../date-time-picker/hooks/useDateTimePicker.js';\nimport {\n  getTimeValue,\n  formatTimeValue,\n} from '../../forms-core/time/timeParser.js';\nimport { useSelection } from '../../spin-buttons/hooks/useSelection.js';\nimport type { NumberSpinButtonRef } from '../../spin-buttons/number-spin-button/types.js';\nimport type { SpinButtonHandler } from '../../spin-buttons/spin-button-group/types.js';\nimport { isEqualTimeValue } from '../helpers.js';\nimport type { DateTimeInputProps } from '../types.js';\n\nfunction isNumberSpinButton(\n  handler: SpinButtonHandler | undefined,\n): handler is NumberSpinButtonRef {\n  return handler !== undefined && handler.type === 'number';\n}\n\n/*\n * A hook that provides the default functionality for the DateTimeInput picker\n */\nexport const useDateTimeInput = (\n  props: DateTimeInputProps,\n  expressionInputRef: RefObject<HTMLSpanElement | null>,\n) => {\n  const {\n    precision,\n    disabled,\n    readOnly,\n    required,\n    onError,\n    min,\n    max,\n    type,\n    onChange,\n  }: DateTimeInputProps = props;\n\n  const ariaProps = useAriaLabelingProps(props);\n  const { regexDateTimeStart, maxValue, types } = useDateTimeParser({\n    type,\n    precision,\n  });\n  // ? INVESTIGATE: without the generic, building the visreg story viewer and unit-test typechecking fails,\n  // ? but the components:build target still succeeds without any issues -> why?\n  const [value, setValue] = useControllableState<TimeValue | null>(props);\n  const isControlled = props.value !== undefined;\n  const [valueType, setValueType] = useState(value?.type ?? 'expression');\n  const firstRun = useRef(true);\n  const [expressionEmpty, setExpressionEmpty] = useState(\n    !expressionInputRef.current?.textContent,\n  );\n  const [inputValue, setInputValue] = useState('');\n\n  const {\n    spinButtons,\n    parts,\n    toDateTime,\n    handlers: spinButtonHandlers,\n    empty: spinButtonsEmpty,\n    applyDateTime,\n    firstSpinButtonHandler,\n  } = useDateTimePicker({\n    type,\n    precision,\n    disabled,\n    readOnly,\n    valueType,\n    value:\n      // only apply the absolute date if the input mode was already the datetimepicker\n      value?.type === 'iso8601' && valueType === 'iso8601'\n        ? value.absoluteDate\n        : null,\n    onChange: (newIsoDateTime) => {\n      const newValue = getTimeValue(newIsoDateTime ?? undefined);\n\n      if (newIsoDateTime === '') {\n        // Trigger the onChange passed to the DateTimePicker to let the user know\n        // that the currently entered value is invalid (incomplete spin buttons input).\n        onChange?.('');\n        return;\n      }\n\n      if (newValue === undefined) {\n        return;\n      }\n\n      // only update the value if the newTimeValue differs from the prev. one\n      setValue((prevValue) =>\n        isEqualTimeValue(prevValue, newValue) ? prevValue : newValue,\n      );\n\n      validateTimeValue(newValue);\n    },\n    ...ariaProps,\n  });\n\n  const empty = useMemo(\n    () => (valueType === 'expression' ? expressionEmpty : spinButtonsEmpty),\n    [valueType, expressionEmpty, spinButtonsEmpty],\n  );\n\n  // switch input mode based on controlled value change\n  useEffect(() => {\n    if (value?.type === 'iso8601' && !spinButtonsEmpty) {\n      setInputValue(value.value);\n    }\n\n    // ignore if in uncontrolled mode\n    if (!isControlled || typeof value === 'string') {\n      return;\n    }\n\n    // reset input if value is null\n    if (!value) {\n      setValueType('expression');\n      updateExpression(null);\n      const input = expressionInputRef.current?.textContent;\n      setExpressionEmpty(input === '');\n      spinButtonHandlers.forEach((sb) => sb?.clearValue(true));\n      validateTimeValue(value, input ?? '');\n      return;\n    }\n\n    // apply value to expression\n    // the spinbutton update is handled within the useSpinButton hook internally\n    const newValueType = value.type ?? 'expression';\n    setValueType(value.type);\n    setInputValue(value.value);\n    if (newValueType === 'expression') {\n      updateExpression(value);\n      setExpressionEmpty(value.value === '');\n      const input = expressionInputRef.current?.textContent;\n      validateTimeValue(value, input ?? '');\n    }\n    // only react to outside value changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  // hook to evaluate the error state based on the given expression, value, and spinbutton state\n  const { validateTimeValue } = useDateTimeInputValidation(\n    {\n      min,\n      max,\n      required,\n      onError, // fired on update\n    },\n    parts,\n    toDateTime,\n  );\n\n  useEffect(() => {\n    // Ignore expression updates, only handle spinbutton update in here\n    if (valueType === 'expression') {\n      return;\n    }\n    validateTimeValue(value);\n  }, [validateTimeValue, value, valueType]);\n\n  const { selectAll: expressionInputSelectAll } =\n    useSelection(expressionInputRef);\n\n  // called on onBlur to sanitize the current expression\n  const updateExpression = useCallback(\n    (value: TimeValue | null) => {\n      if (!expressionInputRef.current) {\n        return;\n      }\n      const formattedValue = value ? formatTimeValue(value) : '';\n      const currentValue = formatTimeValue(\n        expressionInputRef.current?.textContent ?? '',\n      );\n\n      // only update if the current value differs from the new value\n      // don't update the textnode while typing but allow e.g. pasting a new expression\n      if (currentValue !== formattedValue) {\n        expressionInputRef.current.textContent = formattedValue;\n      }\n    },\n    // no use in adding the expressionInputRef to the dep. array\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  // handles input events on the expression contenteditable span\n  const expressionInputHandler: ReactFormEventHandler<HTMLSpanElement> =\n    useCallback(() => {\n      if (!expressionInputRef.current) {\n        return;\n      }\n\n      const input = expressionInputRef.current.textContent ?? '';\n\n      // Remove <br> added by browser in contenteditable to ensure placeholder works\n      if (expressionInputRef.current.innerHTML === '<br>') {\n        expressionInputRef.current.innerHTML = '';\n      }\n\n      // fallback to expression if text content is removed\n      if (input === '') {\n        setValueType('expression');\n        setValue(null);\n        setExpressionEmpty(true);\n        validateTimeValue(parseTimeAsTimeValue(input), input);\n        return;\n      }\n\n      setExpressionEmpty(false);\n\n      // if the input starts like a valid datetime for the current locale, switch to the datetime picker\n      const [, carryOver] = regexDateTimeStart.exec(input) ?? [];\n      if (Number.parseInt(carryOver) <= maxValue) {\n        setValueType('iso8601');\n\n        // clear all spinbuttons\n        applyDateTime(null);\n\n        // get a cleaned and sorted list of spinbutton handlers\n        const sortedHandlers = types\n          .filter((type) => type !== 'literal')\n          .map((type) => spinButtonHandlers.get(type))\n          .filter(Boolean) as SpinButtonHandler[];\n        const [carryOverSB, focusSB] = sortedHandlers;\n\n        // carry over entered value to the next number spinbutton\n        isNumberSpinButton(carryOverSB) &&\n          carryOverSB.applyText(carryOver, true);\n\n        // clear expression input content\n        expressionInputRef.current.textContent = '';\n\n        // set focus after switch to expression mode happened\n        requestAnimationFrame(() => {\n          // set focus to second spinbutton\n          focusSB?.element.current?.focus();\n        });\n        return;\n      }\n\n      // if input is a valid expression, update the internal value state\n      const newValue = parseTimeAsTimeValue(input);\n\n      // reevaluate if the new input is valid or not\n      validateTimeValue(newValue, input);\n\n      if (newValue === null && input !== '') {\n        onChange?.('');\n      }\n      // only update the value if the newTimeValue differs from the prev. one\n      setValue((prevValue) =>\n        isEqualTimeValue(prevValue, newValue) ? prevValue : newValue,\n      );\n\n      setInputValue(input);\n    }, [\n      expressionInputRef,\n      regexDateTimeStart,\n      maxValue,\n      validateTimeValue,\n      setValue,\n      applyDateTime,\n      types,\n      spinButtonHandlers,\n      onChange,\n    ]);\n\n  // select expression text content on focus\n  const expressionOnFocusHandler: FocusEventHandler<HTMLSpanElement> =\n    useCallback(() => {\n      expressionInputSelectAll();\n    }, [expressionInputSelectAll]);\n\n  // sanitize textnode if content is an expression\n  const expressionOnBlurHandler: FocusEventHandler<HTMLSpanElement> =\n    useCallback(() => {\n      if (expressionInputRef.current && value?.type === 'expression') {\n        const currentExpressionInput =\n          expressionInputRef.current.textContent ?? '';\n        const isValidExpression = _parseTimeExpression(\n          currentExpressionInput.trim(),\n        );\n\n        if (isValidExpression) {\n          expressionInputRef.current.textContent = formatTimeValue(value);\n        }\n      }\n\n      // eslint annoyingly wants to add the ref to the dependency list\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n  // if the value is a valid TimeValue, copy the ISO or expression to the clipboard\n  const onCopyCapture: ClipboardEventHandler<HTMLSpanElement> = useCallback(\n    async (event) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (value === null) {\n        return;\n      }\n      try {\n        await navigator.clipboard.writeText(value.value);\n      } catch {\n        // For now, we silently ignore clipboard write errors.\n      }\n    },\n    [value],\n  );\n\n  // clipboard paste handler. apply clipboard content if formatted correctly\n  const onPaste: ClipboardEventHandler<HTMLSpanElement> = useCallback(\n    (event) => {\n      if (readOnly) {\n        return;\n      }\n\n      const data = event.clipboardData?.getData('text/plain');\n      if (!data) {\n        return;\n      }\n\n      // if the clipboard content is a valid expression or ISO, apply it as value\n      const nextValue = parseTimeAsTimeValue(\n        data.trim(),\n        TZDateMini.tz(getTimezone()).getTime(),\n        precision,\n      );\n      if (nextValue) {\n        setValueType(nextValue.type);\n        if (nextValue.type === 'expression') {\n          updateExpression(nextValue);\n        } else {\n          // If the new value is switching the input mode, delay updating the spinbuttons by one render cycle\n          requestAnimationFrame(() => applyDateTime(nextValue.absoluteDate));\n        }\n        setValue(nextValue);\n        event.preventDefault();\n      }\n    },\n    [applyDateTime, precision, readOnly, setValue, updateExpression],\n  );\n\n  // prevent unwanted input keys like ENTER\n  const expressionOnKeyDownHandler: ReactKeyboardEventHandler<HTMLSpanElement> =\n    useCallback((event) => {\n      if (event.key === 'Enter') {\n        event.preventDefault();\n      }\n    }, []);\n\n  // focus the first spinbutton or the expression input based on the current input mode\n  const focus = useCallback(() => {\n    switch (valueType) {\n      case 'expression':\n        expressionInputRef.current?.focus();\n        break;\n      case 'iso8601':\n        firstSpinButtonHandler?.element?.current?.focus();\n        break;\n    }\n    // no need to pass the refs as dependency\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [valueType, firstSpinButtonHandler]);\n\n  // first initialization of the uncontrolled expression value on component mount\n  useEffect(() => {\n    if (isControlled || value?.type !== 'expression') {\n      return;\n    }\n    updateExpression(value);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // if the spinbuttons are empty ...\n  useEffect(() => {\n    // Don't run the empty spinbutton check on component mount.\n    if (firstRun.current) {\n      firstRun.current = false;\n      validateTimeValue(value);\n      return;\n    }\n\n    // ... switch to expression input\n    if (valueType === 'iso8601' && spinButtonsEmpty) {\n      setValueType('expression');\n      setExpressionEmpty(true);\n\n      if (value !== null) {\n        setValue(null);\n      }\n\n      setInputValue('');\n\n      // reevaluate error state\n      validateTimeValue(null);\n\n      // wait until the expression input is visible to set the focus\n      setTimeout(() => {\n        expressionInputRef?.current?.focus();\n      });\n    }\n    // only react on empty state changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [spinButtonsEmpty]);\n\n  useEffect(() => {\n    if (valueType !== 'expression') {\n      return;\n    }\n\n    if (empty) {\n      setInputValue('');\n      return;\n    }\n\n    if (expressionInputRef.current?.textContent) {\n      setInputValue(expressionInputRef.current?.textContent); // fixes validating initial expression value in the DateTimeRangePicker\n    }\n    // valueType can be excluded because empty already depends on it\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [empty]);\n\n  return {\n    empty,\n    spinButtons,\n    spinButtonHandlers,\n    value: typeof value === 'string' ? null : value,\n    valueType,\n    inputValue,\n    expressionInputHandler,\n    expressionOnFocusHandler,\n    expressionOnBlurHandler,\n    expressionOnKeyDownHandler,\n    onCopyCapture,\n    onPaste,\n    focus,\n    validateTimeValue,\n  };\n};\n"],
+  "mappings": "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",
   "names": ["value", "type"]
 }

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

@@ -15,6 +15,10 @@ import { filterOutGrailLimit } from "../../forms-core/time/helpers.js";
 const useDateTimeRangePickerValidation = (touchedContainerRef, validationInputRef, valueFrom, valueTo, max, min, precision) => {
   const [errorFrom, setErrorFrom] = useState(null);
   const [errorTo, setErrorTo] = useState(null);
+  const errorFromRef = useRef(errorFrom);
+  errorFromRef.current = errorFrom;
+  const errorToRef = useRef(errorTo);
+  errorToRef.current = errorTo;
   const { dispatch: dispatchErrorMessage } = useFormFieldMessagesContext();
   const timeframe = { from: valueFrom?.value, to: valueTo?.value };
   const { getErrorMessage } = useDateTimeRangeErrorMessage({
@@ -61,30 +65,39 @@ const useDateTimeRangePickerValidation = (touchedContainerRef, validationInputRe
         });
       }
       function validateFor(error) {
-        if (errorFrom === error || errorTo === error) {
+        if (errorFromRef.current === error || errorToRef.current === error) {
           pushError({
             error,
-            source: errorFrom === errorTo ? "both" : errorFrom === error ? "from" : "to"
+            source: errorFromRef.current === errorToRef.current ? "both" : errorFromRef.current === error ? "from" : "to"
           });
           return false;
         }
         return true;
       }
       function validateForBothValues() {
-        if (from && !to || to && !from) {
+        const isRequired = validationInputRef.current?.inputRef?.required;
+        const containsNowExpression = from?.value === "now()" || to?.value === "now()";
+        const fromOrToIsEmpty = from && !to || to && !from;
+        if (fromOrToIsEmpty && containsNowExpression) {
           pushError({
             error: "valueMissing",
             source: from ? "to" : "from"
           });
           return false;
         }
+        if (isRequired && !from && !to) {
+          pushError({
+            error: "valueMissing",
+            source: "both"
+          });
+          return false;
+        }
         return true;
       }
       const isValid = (
-        // If one of the field is invalid, this is always the error with the highest priority
-        validateFor("invalid") && // If on value is there, the one one has to be there as well
-        validateForBothValues() && // Next, prioritize if a value is missing
-        validateFor("valueMissing") && // Next, check if both values are within given boundaries
+        // If one of the fields is invalid, this is always the error with the highest priority
+        validateFor("invalid") && // If one value is there, the other one has to be there as well
+        validateForBothValues() && // Next, check if both values are within given boundaries
         validateFor("outsideRange")
       );
       if (!isValid) {
@@ -108,16 +121,13 @@ const useDateTimeRangePickerValidation = (touchedContainerRef, validationInputRe
     [
       dateTimeRangePickerErrorId,
       dispatchErrorMessage,
-      errorFrom,
-      errorTo,
       getErrorMessage,
       reevaluate
     ]
   );
   const onBlurTouched = useCallback(
     (e) => {
-      if (e.relatedTarget !== null && // otherwise on outside clicks, we would see validation errors briefly before closing the overlay
-      !touchedContainerRef.current?.contains(e.relatedTarget)) {
+      if (!touchedContainerRef.current?.contains(e.relatedTarget)) {
         validate(valueFrom, valueTo);
         dispatchErrorMessage?.({
           type: FormFieldMessagesAction.SETISTOUCHED,
@@ -131,7 +141,7 @@ const useDateTimeRangePickerValidation = (touchedContainerRef, validationInputRe
   );
   useEffect(() => {
     validate(valueFrom, valueTo);
-  }, [validate, valueFrom, valueTo]);
+  }, [validate, valueFrom, valueTo, errorFrom, errorTo]);
   useEffect(() => {
     const onInvalid = () => {
       dispatchErrorMessage?.({

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/date-time-range-picker/hooks/useDateTimeRangePickerValidation.tsx"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type RefObject,\n  FocusEventHandler,\n} from 'react';\n\nimport { parseTimeAsTimeValue } from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useDateTimeRangeErrorMessage } from './useDateTimeRangeErrorMessage.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { FormFieldMessagesAction } from '../../forms-core/state/formfield-messages-state-reducer.js';\nimport { filterOutGrailLimit } from '../../forms-core/time/helpers.js';\nimport type {\n  DateTimeError,\n  DateTimeInputRef,\n  DateTimeRangeError,\n  ValidationError,\n} from '../types.js';\n\nexport const useDateTimeRangePickerValidation = (\n  touchedContainerRef: RefObject<HTMLElement | null>,\n  validationInputRef: RefObject<DateTimeInputRef | null>,\n  valueFrom: TimeValue | null,\n  valueTo: TimeValue | null,\n  max?: string,\n  min?: string,\n  precision?: 'minutes' | 'seconds' | 'milliseconds',\n) => {\n  const [errorFrom, setErrorFrom] = useState<DateTimeRangeError>(null);\n  const [errorTo, setErrorTo] = useState<DateTimeRangeError>(null);\n\n  const { dispatch: dispatchErrorMessage } = useFormFieldMessagesContext();\n\n  const timeframe = { from: valueFrom?.value, to: valueTo?.value };\n  const { getErrorMessage } = useDateTimeRangeErrorMessage({\n    precision,\n    // The default min or max is set according to the Grail min or max and shouldn't show in the info message, so we treat it as if it is never set.\n    max: filterOutGrailLimit(timeframe, max),\n    min: filterOutGrailLimit(timeframe, min),\n  });\n\n  // use shared now value for all expression parsing\n  const sharedNow = useRef<number>(TZDateMini.tz(getTimezone()).getTime());\n\n  const dateTimeRangePickerErrorId = useId();\n\n  // Create a timevalue based on current expression\n  const evaluate = useCallback(\n    (input: string | null) =>\n      parseTimeAsTimeValue(input, sharedNow.current, precision),\n    [precision],\n  );\n\n  // Update the timestamp for expression base timevalue instances\n  const reevaluate = useCallback(\n    (value: TimeValue | null) => {\n      if (value?.type === 'expression') {\n        return evaluate(value.value);\n      }\n\n      return value;\n    },\n    [evaluate],\n  );\n\n  const validate = useCallback(\n    (\n      from: TimeValue | null,\n      to: TimeValue | null,\n      showInitialError?: boolean,\n    ) => {\n      // Push any errors to the messages slot\n      function pushError(error: ValidationError) {\n        // remove old errors\n        dispatchErrorMessage?.({\n          type: FormFieldMessagesAction.REMOVEMESSAGE,\n          payload: {\n            id: dateTimeRangePickerErrorId,\n            messageType: 'formcontrol',\n          },\n        });\n\n        dispatchErrorMessage?.({\n          type: FormFieldMessagesAction.ADDMESSAGE,\n          payload: {\n            id: dateTimeRangePickerErrorId,\n            validityStateKey: 'customError',\n            variant: 'error',\n            message: getErrorMessage(error),\n            messageType: 'formcontrol',\n            showError: showInitialError,\n          },\n        });\n      }\n\n      // Check if one of the values is affected by given error\n      function validateFor(error: DateTimeError) {\n        if (errorFrom === error || errorTo === error) {\n          pushError({\n            error,\n            source:\n              errorFrom === errorTo\n                ? 'both'\n                : errorFrom === error\n                ? 'from'\n                : 'to',\n          });\n          return false;\n        }\n        return true;\n      }\n\n      // Check if one value is set, the other one has to be set as well. Regardless if required or not.\n      function validateForBothValues() {\n        if ((from && !to) || (to && !from)) {\n          pushError({\n            error: 'valueMissing',\n            source: from ? 'to' : 'from',\n          });\n          return false;\n        }\n        return true;\n      }\n\n      const isValid =\n        // If one of the field is invalid, this is always the error with the highest priority\n        validateFor('invalid') &&\n        // If on value is there, the one one has to be there as well\n        validateForBothValues() &&\n        // Next, prioritize if a value is missing\n        validateFor('valueMissing') &&\n        // Next, check if both values are within given boundaries\n        validateFor('outsideRange');\n\n      if (!isValid) {\n        return; //nothing more to do\n      }\n\n      // Check if the from && to values are in correct order\n      // Reevaluate any expression upfront to have the same 'now' as base to compare both values\n      const newFrom = reevaluate(from);\n      const newTo = reevaluate(to);\n\n      const timezone = getTimezone();\n      if (\n        newFrom &&\n        newTo &&\n        new TZDateMini(newFrom.absoluteDate, timezone).getTime() >=\n          new TZDateMini(newTo.absoluteDate, timezone).getTime()\n      ) {\n        pushError({ error: 'invalidOrder', source: 'both' });\n        return;\n      }\n\n      // Everything seems to be fine, clear any existing error\n      dispatchErrorMessage?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: dateTimeRangePickerErrorId,\n          messageType: 'formcontrol',\n        },\n      });\n    },\n    [\n      dateTimeRangePickerErrorId,\n      dispatchErrorMessage,\n      errorFrom,\n      errorTo,\n      getErrorMessage,\n      reevaluate,\n    ],\n  );\n\n  // mark the component as touched, if the touchedRef container is losing the focus\n  const onBlurTouched: FocusEventHandler = useCallback(\n    (e) => {\n      if (\n        e.relatedTarget !== null && // otherwise on outside clicks, we would see validation errors briefly before closing the overlay\n        !touchedContainerRef.current?.contains(e.relatedTarget)\n      ) {\n        //  always validate and show error on blur if there is any\n        validate(valueFrom, valueTo);\n        dispatchErrorMessage?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n    },\n    // no need to set the touched refs as dep.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [validate, valueFrom, valueTo],\n  );\n\n  // error validation effect\n  useEffect(() => {\n    validate(valueFrom, valueTo);\n  }, [validate, valueFrom, valueTo]);\n\n  // push any error to context if value is invalid\n  useEffect(() => {\n    const onInvalid = () => {\n      dispatchErrorMessage?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: true },\n      });\n    };\n    const inputEl = validationInputRef.current?.inputRef;\n\n    inputEl?.addEventListener('invalid', onInvalid);\n\n    return () => {\n      inputEl?.removeEventListener('invalid', onInvalid);\n\n      dispatchErrorMessage?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: dateTimeRangePickerErrorId,\n          messageType: 'formcontrol',\n        },\n      });\n    };\n    // no use to provide the input ref in the dep array\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return {\n    evaluate,\n    reevaluate,\n    onBlurTouched,\n    onError: {\n      from: setErrorFrom,\n      to: setErrorTo,\n    },\n    errorFrom,\n    errorTo,\n    validate,\n  };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type RefObject,\n  FocusEventHandler,\n} from 'react';\n\nimport { parseTimeAsTimeValue } from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useDateTimeRangeErrorMessage } from './useDateTimeRangeErrorMessage.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { FormFieldMessagesAction } from '../../forms-core/state/formfield-messages-state-reducer.js';\nimport { filterOutGrailLimit } from '../../forms-core/time/helpers.js';\nimport type {\n  DateTimeError,\n  DateTimeInputRef,\n  DateTimeRangeError,\n  ValidationError,\n} from '../types.js';\n\nexport const useDateTimeRangePickerValidation = (\n  touchedContainerRef: RefObject<HTMLElement | null>,\n  validationInputRef: RefObject<DateTimeInputRef | null>,\n  valueFrom: TimeValue | null,\n  valueTo: TimeValue | null,\n  max?: string,\n  min?: string,\n  precision?: 'minutes' | 'seconds' | 'milliseconds',\n) => {\n  const [errorFrom, setErrorFrom] = useState<DateTimeRangeError>(null);\n  const [errorTo, setErrorTo] = useState<DateTimeRangeError>(null);\n\n  // Keep refs in sync on every render so that validate() always reads the\n  // latest error values without needing to be recreated when they change.\n  const errorFromRef = useRef(errorFrom);\n  errorFromRef.current = errorFrom;\n  const errorToRef = useRef(errorTo);\n  errorToRef.current = errorTo;\n\n  const { dispatch: dispatchErrorMessage } = useFormFieldMessagesContext();\n\n  const timeframe = { from: valueFrom?.value, to: valueTo?.value };\n  const { getErrorMessage } = useDateTimeRangeErrorMessage({\n    precision,\n    // The default min or max is set according to the Grail min or max and shouldn't show in the info message, so we treat it as if it is never set.\n    max: filterOutGrailLimit(timeframe, max),\n    min: filterOutGrailLimit(timeframe, min),\n  });\n\n  // use shared now value for all expression parsing\n  const sharedNow = useRef<number>(TZDateMini.tz(getTimezone()).getTime());\n\n  const dateTimeRangePickerErrorId = useId();\n\n  // Create a timevalue based on current expression\n  const evaluate = useCallback(\n    (input: string | null) =>\n      parseTimeAsTimeValue(input, sharedNow.current, precision),\n    [precision],\n  );\n\n  // Update the timestamp for expression base timevalue instances\n  const reevaluate = useCallback(\n    (value: TimeValue | null) => {\n      if (value?.type === 'expression') {\n        return evaluate(value.value);\n      }\n\n      return value;\n    },\n    [evaluate],\n  );\n\n  const validate = useCallback(\n    (\n      from: TimeValue | null,\n      to: TimeValue | null,\n      showInitialError?: boolean,\n    ) => {\n      // Push any errors to the messages slot\n      function pushError(error: ValidationError) {\n        // remove old errors\n        dispatchErrorMessage?.({\n          type: FormFieldMessagesAction.REMOVEMESSAGE,\n          payload: {\n            id: dateTimeRangePickerErrorId,\n            messageType: 'formcontrol',\n          },\n        });\n\n        dispatchErrorMessage?.({\n          type: FormFieldMessagesAction.ADDMESSAGE,\n          payload: {\n            id: dateTimeRangePickerErrorId,\n            validityStateKey: 'customError',\n            variant: 'error',\n            message: getErrorMessage(error),\n            messageType: 'formcontrol',\n            showError: showInitialError,\n          },\n        });\n      }\n\n      // Check if one of the values is affected by given error\n      function validateFor(error: DateTimeError) {\n        if (errorFromRef.current === error || errorToRef.current === error) {\n          pushError({\n            error,\n            source:\n              errorFromRef.current === errorToRef.current\n                ? 'both'\n                : errorFromRef.current === error\n                ? 'from'\n                : 'to',\n          });\n          return false;\n        }\n        return true;\n      }\n\n      // Check if one value is set, the other one has to be set as well.\n      function validateForBothValues() {\n        const isRequired = validationInputRef.current?.inputRef?.required;\n\n        const containsNowExpression =\n          from?.value === 'now()' || to?.value === 'now()';\n        const fromOrToIsEmpty = (from && !to) || (to && !from);\n\n        if (fromOrToIsEmpty && containsNowExpression) {\n          pushError({\n            error: 'valueMissing',\n            source: from ? 'to' : 'from',\n          });\n          return false;\n        }\n\n        if (isRequired && !from && !to) {\n          pushError({\n            error: 'valueMissing',\n            source: 'both',\n          });\n          return false;\n        }\n        return true;\n      }\n\n      const isValid =\n        // If one of the fields is invalid, this is always the error with the highest priority\n        validateFor('invalid') &&\n        // If one value is there, the other one has to be there as well\n        validateForBothValues() &&\n        // Next, check if both values are within given boundaries\n        validateFor('outsideRange');\n\n      if (!isValid) {\n        return; //nothing more to do\n      }\n\n      // Check if the from && to values are in correct order\n      // Reevaluate any expression upfront to have the same 'now' as base to compare both values\n      const newFrom = reevaluate(from);\n      const newTo = reevaluate(to);\n\n      const timezone = getTimezone();\n      if (\n        newFrom &&\n        newTo &&\n        new TZDateMini(newFrom.absoluteDate, timezone).getTime() >=\n          new TZDateMini(newTo.absoluteDate, timezone).getTime()\n      ) {\n        pushError({ error: 'invalidOrder', source: 'both' });\n        return;\n      }\n\n      // Everything seems to be fine, clear any existing error\n      dispatchErrorMessage?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: dateTimeRangePickerErrorId,\n          messageType: 'formcontrol',\n        },\n      });\n    },\n    [\n      dateTimeRangePickerErrorId,\n      dispatchErrorMessage,\n      getErrorMessage,\n      reevaluate,\n    ],\n  );\n\n  // mark the component as touched, if the touchedRef container is losing the focus\n  const onBlurTouched: FocusEventHandler = useCallback(\n    (e) => {\n      if (!touchedContainerRef.current?.contains(e.relatedTarget)) {\n        //  always validate and show error on blur if there is any\n        validate(valueFrom, valueTo);\n        dispatchErrorMessage?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n    },\n    // no need to set the touched refs as dep.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [validate, valueFrom, valueTo],\n  );\n\n  // error validation effect\n  // errorFrom/errorTo are included so the effect re-runs when errors change\n  useEffect(() => {\n    validate(valueFrom, valueTo);\n  }, [validate, valueFrom, valueTo, errorFrom, errorTo]);\n\n  // push any error to context if value is invalid\n  useEffect(() => {\n    const onInvalid = () => {\n      dispatchErrorMessage?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: true },\n      });\n    };\n    const inputEl = validationInputRef.current?.inputRef;\n\n    inputEl?.addEventListener('invalid', onInvalid);\n\n    return () => {\n      inputEl?.removeEventListener('invalid', onInvalid);\n\n      dispatchErrorMessage?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: dateTimeRangePickerErrorId,\n          messageType: 'formcontrol',\n        },\n      });\n    };\n    // no use to provide the input ref in the dep array\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return {\n    evaluate,\n    reevaluate,\n    onBlurTouched,\n    onError: {\n      from: setErrorFrom,\n      to: setErrorTo,\n    },\n    errorFrom,\n    errorTo,\n    validate,\n  };\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/forms-core/components/field-set/FieldSet.css

@@ -1,4 +1,4 @@
-._1dphm0f0-3-0-1 {
+._1dphm0f0-3-1-1 {
   appearance: none;
   margin: 0;
   border: none;
@@ -6,7 +6,7 @@
   min-width: 0;
   min-height: 0;
 }
-._1dphm0f1-3-0-1 {
+._1dphm0f1-3-1-1 {
   padding: 0;
   appearance: none;
   margin-bottom: var(--dt-spacings-size-12, 12px);

package/esm/forms/forms-core/components/field-set/FieldSet.sty.js

@@ -1,6 +1,6 @@
 import "./FieldSet.css";
-var fieldset = "_1dphm0f0-3-0-1";
-var legend = "_1dphm0f1-3-0-1";
+var fieldset = "_1dphm0f0-3-1-1";
+var legend = "_1dphm0f1-3-1-1";
 export {
   fieldset,
   legend

package/esm/forms/forms-core/components/field-set/FieldSet.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/field-set/FieldSet.css.ts"],
-  "sourcesContent": ["import './FieldSet.css';\nexport var fieldset = '_1dphm0f0-3-0-1';\nexport var legend = '_1dphm0f1-3-0-1';"],
+  "sourcesContent": ["import './FieldSet.css';\nexport var fieldset = '_1dphm0f0-3-1-1';\nexport var legend = '_1dphm0f1-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,SAAS;",
   "names": []
 }

package/esm/forms/forms-core/components/form-field/FormField.sty.js

@@ -1,5 +1,5 @@
 import "./FormField.css";
-var formField = "_mvcxum0-3-0-1";
+var formField = "_mvcxum0-3-1-1";
 export {
   formField
 };

package/esm/forms/forms-core/components/form-field/FormField.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field/FormField.css.ts"],
-  "sourcesContent": ["import './FormField.css';\nexport var formField = '_mvcxum0-3-0-1';"],
+  "sourcesContent": ["import './FormField.css';\nexport var formField = '_mvcxum0-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessageItem.css

@@ -1,17 +1,17 @@
-._16z6rg10-3-0-1 {
+._16z6rg10-3-1-1 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
 }
-._16z6rg11-3-0-1 {
+._16z6rg11-3-1-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._16z6rg12-3-0-1 {
+._16z6rg12-3-1-1 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._16z6rg13-3-0-1 {
+._16z6rg13-3-1-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._16z6rg14-3-0-1 {
+._16z6rg14-3-1-1 {
   min-width: 0;
   overflow-wrap: break-word;
 }

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessageItem.sty.js

@@ -1,7 +1,7 @@
 import "./FormFieldMessageItem.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var formFieldMessageItem = _7a468({ defaultClassName: "_16z6rg10-3-0-1", variantClassNames: { variant: { hint: "_16z6rg11-3-0-1", error: "_16z6rg12-3-0-1" }, disabled: { true: "_16z6rg13-3-0-1" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
-var formFieldMessageItemText = "_16z6rg14-3-0-1";
+var formFieldMessageItem = _7a468({ defaultClassName: "_16z6rg10-3-1-1", variantClassNames: { variant: { hint: "_16z6rg11-3-1-1", error: "_16z6rg12-3-1-1" }, disabled: { true: "_16z6rg13-3-1-1" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
+var formFieldMessageItemText = "_16z6rg14-3-1-1";
 export {
   formFieldMessageItem,
   formFieldMessageItemText

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessageItem.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field-messages/FormFieldMessageItem.css.ts"],
-  "sourcesContent": ["import './FormFieldMessageItem.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var formFieldMessageItem = _7a468({defaultClassName:'_16z6rg10-3-0-1',variantClassNames:{variant:{hint:'_16z6rg11-3-0-1',error:'_16z6rg12-3-0-1'},disabled:{true:'_16z6rg13-3-0-1'}},defaultVariants:{variant:'hint',disabled:false},compoundVariants:[]});\nexport var formFieldMessageItemText = '_16z6rg14-3-0-1';"],
+  "sourcesContent": ["import './FormFieldMessageItem.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var formFieldMessageItem = _7a468({defaultClassName:'_16z6rg10-3-1-1',variantClassNames:{variant:{hint:'_16z6rg11-3-1-1',error:'_16z6rg12-3-1-1'},disabled:{true:'_16z6rg13-3-1-1'}},defaultVariants:{variant:'hint',disabled:false},compoundVariants:[]});\nexport var formFieldMessageItemText = '_16z6rg14-3-1-1';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,SAAQ,QAAO,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACzP,IAAI,2BAA2B;",
   "names": []
 }

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessages.sty.js

@@ -1,5 +1,5 @@
 import "./FormFieldMessages.css";
-var formFieldMessages = "_1l9bja60-3-0-1";
+var formFieldMessages = "_1l9bja60-3-1-1";
 export {
   formFieldMessages
 };

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessages.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field-messages/FormFieldMessages.css.ts"],
-  "sourcesContent": ["import './FormFieldMessages.css';\nexport var formFieldMessages = '_1l9bja60-3-0-1';"],
+  "sourcesContent": ["import './FormFieldMessages.css';\nexport var formFieldMessages = '_1l9bja60-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;",
   "names": []
 }

package/esm/forms/forms-core/components/label/Label.css

@@ -1,9 +1,9 @@
-._1gxatyo0-3-0-1 {
+._1gxatyo0-3-1-1 {
   display: inline-block;
 }
-._1gxatyo1-3-0-1 {
+._1gxatyo1-3-1-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1gxatyo2-3-0-1:after {
+._1gxatyo2-3-1-1:after {
   content: "*" / "";
 }

package/esm/forms/forms-core/components/label/Label.sty.js

@@ -1,6 +1,6 @@
 import "./Label.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var LabelCSS = _7a468({ defaultClassName: "_1gxatyo0-3-0-1", variantClassNames: { disabled: { true: "_1gxatyo1-3-0-1" }, required: { true: "_1gxatyo2-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var LabelCSS = _7a468({ defaultClassName: "_1gxatyo0-3-1-1", variantClassNames: { disabled: { true: "_1gxatyo1-3-1-1" }, required: { true: "_1gxatyo2-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   LabelCSS
 };

package/esm/forms/forms-core/components/label/Label.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/label/Label.css.ts"],
-  "sourcesContent": ["import './Label.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var LabelCSS = _7a468({defaultClassName:'_1gxatyo0-3-0-1',variantClassNames:{disabled:{true:'_1gxatyo1-3-0-1'},required:{true:'_1gxatyo2-3-0-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './Label.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var LabelCSS = _7a468({defaultClassName:'_1gxatyo0-3-1-1',variantClassNames:{disabled:{true:'_1gxatyo1-3-1-1'},required:{true:'_1gxatyo2-3-1-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,WAAW,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }