@dynatrace/strato-components 3.7.0 → 3.8.0

package/esm/forms/calendar/CalendarRoot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/calendar/CalendarRoot.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  type Ref,\n} from 'react';\n\nimport { CalendarHeader } from './calendar-header/CalendarHeader.js';\nimport { CALENDAR_ERROR_MESSAGES } from './calendarMessages.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useCalendarStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { validate } from '../../core/time/validation.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';\nimport * as styles from './Calendar.sty.js';\nimport type {\n  CalendarStrictValueType,\n  CalendarValueType,\n} from './Calendar.types.js';\nimport { SetTimeToNowButton } from './components/SetTimeToNowButton.js';\nimport { CalendarContext } from './contexts/CalendarContext.js';\nimport { UseCalendarProps, useCalendar } from './hooks/useCalendar.js';\nimport { useCalendarNavigation } from './hooks/useCalendarNavigation.js';\nimport type { CalendarViewType } from './types/shared-types.js';\nimport { SelectDayView } from './views/SelectDayView.js';\nimport { SelectMonthView } from './views/SelectMonthView.js';\nimport { SelectYearView } from './views/SelectYearView.js';\nimport { isFullTimeframe, isTimeValue } from '../../core/time/helpers.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\n\nconst COMPONENT_NAME = 'Calendar';\n\n//#region types\n/**\n * @internal\n */\nexport type CalendarType = 'single' | 'range';\n\n/** @internal */\nexport type CalendarProps<Type extends CalendarType> = FormControlProps<\n  CalendarValueType<Type>,\n  (date: CalendarStrictValueType<Type>) => void\n> &\n  StylingProps &\n  MaskingProps &\n  DataTestId & {\n    /** The earliest selectable date. It will always consider the start of the day as time. */\n    min?: string;\n    /** The latest selectable date. It will always consider the end of the day as time. */\n    max?: string;\n    /** Determines the calendar type. Single allows the selection of one date and range allows a range selection with a from and to value.\n     * @defaultValue 'single'\n     */\n    type?: Type;\n    /**\n     * The precision of the time shown in the display value.\n     * @defaultValue 'minutes'\n     */\n    precision?: 'minutes' | 'seconds' | 'milliseconds';\n  };\n//#endregion\n\n/** Render the correct view depending on the currentView state. */\nfunction renderView(view: CalendarViewType) {\n  switch (view) {\n    case 'month':\n      return <SelectMonthView />;\n    case 'year':\n      return <SelectYearView />;\n    default:\n      return <SelectDayView />;\n  }\n}\n\nfunction CalendarComponent<Type extends CalendarType = 'single'>(\n  props: Omit<CalendarProps<Type>, 'value' | 'defaultValue' | 'onChange'>,\n  forwardedRef: Ref<\n    | FormControlRef<HTMLDivElement>\n    | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n        Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n  >,\n) {\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    id,\n    disabled,\n    'aria-disabled': ariaDisabled,\n    required,\n    name,\n    readOnly = false,\n    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n    // @ts-ignore Strict mode transition - needs to be investigated\n    type = 'single',\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    ...remainingProps\n  } = props;\n\n  const calendarValue = useCalendarStore((state) => state.calendarValue);\n  const min = useCalendarStore((state) => state.min);\n  const max = useCalendarStore((state) => state.max);\n  const error = useCalendarStore((state) => state.calendarError);\n  const precision = useCalendarStore((state) => state.precision);\n\n  // Imperative Handle Construction\n  const calendarRef = useRef<HTMLDivElement>(null);\n  const ref = useRef<HTMLInputElement>(null);\n  const refTo = useRef<HTMLInputElement>(null);\n\n  const { uniqueId, state, dispatch } = useCalendar<Type>({\n    type,\n  } as UseCalendarProps<Type>);\n\n  useCalendarNavigation({\n    calendarRef,\n    view: state.currentView,\n    dispatch,\n  });\n\n  const { dispatch: formMessageDispatch } = useFormFieldMessagesContext();\n\n  const refValidate = useCallback(() => {\n    formMessageDispatch?.({\n      type: FormFieldMessagesAction.SETISTOUCHED,\n      payload: { isTouched: true },\n    });\n\n    validate(calendarValue, min, max, {\n      formMessageDispatch,\n      formerError: error,\n      precision,\n      showError: true,\n      checkOrder: false,\n      ref,\n      errorMessages: CALENDAR_ERROR_MESSAGES,\n    });\n  }, [min, max, formMessageDispatch, error, precision, ref, calendarValue]);\n\n  useImperativeHandle(\n    forwardedRef,\n    ():\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>) => {\n      if (type === 'single') {\n        return {\n          element: calendarRef.current,\n          inputRef: ref.current,\n          validate: refValidate,\n        };\n      }\n\n      return {\n        element: calendarRef.current,\n        inputRef: {\n          from: ref?.current,\n          to: refTo?.current,\n        },\n        validate: refValidate,\n      };\n    },\n    [refValidate, type],\n  );\n\n  const {\n    ariaProps,\n    onChange: validationOnChange,\n    onBlur,\n    onInvalid,\n  } = useFormFieldValidation(\n    ref,\n    {},\n    {\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-details': ariaDetailsProp,\n    },\n  );\n\n  const labelRef = useRef<string>(`calendar-body-label-${uniqueId}`);\n\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const getNativeProps = (suffix = '') => ({\n    readOnly: readOnly,\n    required,\n    disabled,\n    'aria-disabled': ariaDisabled,\n    name: name && `${name}${suffix}`,\n    id,\n  });\n\n  const calenderContextValue = useMemo(\n    () => ({ state, dispatch, readOnly }),\n    [state, dispatch, readOnly],\n  );\n\n  return (\n    <CalendarContext.Provider value={calenderContextValue}>\n      <div\n        className={clsx(styles.calendar({ readOnly }), consumerClassName, {\n          [styles.disabled]: disabledOrAriaDisabled,\n        })}\n        data-testid={dataTestId}\n        ref={calendarRef}\n        style={consumerStyle}\n        {...remainingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <CalendarHeader view={state.currentView} labelId={labelRef.current} />\n        <div aria-labelledby={labelRef.current}>\n          <table\n            role=\"grid\"\n            className={styles.body({\n              isReadOnly: !!readOnly,\n            })}\n          >\n            {renderView(state.currentView)}\n          </table>\n        </div>\n        {type === 'range' && <SetTimeToNowButton />}\n      </div>\n      <VisuallyHidden>\n        {isTimeValue(calendarValue) ? (\n          <input\n            onChange={validationOnChange}\n            onBlur={onBlur}\n            onInvalid={onInvalid}\n            {...ariaProps}\n            {...getNativeProps()}\n            ref={ref}\n            value={calendarValue?.absoluteDate ?? ''}\n            tabIndex={-1}\n          />\n        ) : (\n          <>\n            <input\n              onChange={validationOnChange}\n              onBlur={onBlur}\n              onInvalid={onInvalid}\n              {...ariaProps}\n              {...getNativeProps('-from')}\n              ref={ref}\n              // Only set if a complete timeframe is available to rely on the browser validation for required.\n              value={\n                isFullTimeframe(calendarValue) && calendarValue?.from?.value\n                  ? calendarValue.from.value\n                  : ''\n              }\n              tabIndex={-1}\n            />\n            {/* This input is ONLY used for form submission and not for validation. */}\n            <input\n              {...getNativeProps('-to')}\n              ref={refTo}\n              value={calendarValue?.to?.value ?? ''}\n              id={`${id}-to`}\n              type=\"hidden\"\n            />\n          </>\n        )}\n      </VisuallyHidden>\n    </CalendarContext.Provider>\n  );\n}\n\nCalendarComponent['displayName'] = COMPONENT_NAME;\n\n/**\n * Calendar component\n * Renders the calendar header and body depending on the current view\n * @internal\n */\nexport const CalendarRoot = forwardRef(CalendarComponent);\n"],
-  "mappings": "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",
+  "sourcesContent": ["\uFEFFimport clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  type Ref,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CalendarHeader } from './calendar-header/CalendarHeader.js';\nimport * as styles from './Calendar.sty.js';\nimport type {\n  CalendarStrictValueType,\n  CalendarValueType,\n} from './Calendar.types.js';\nimport { CALENDAR_ERROR_MESSAGES } from './calendarMessages.js';\nimport type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\nimport { SetTimeToNowButton } from './components/SetTimeToNowButton.js';\nimport { CalendarContext } from './contexts/CalendarContext.js';\nimport { UseCalendarProps, useCalendar } from './hooks/useCalendar.js';\nimport { useCalendarNavigation } from './hooks/useCalendarNavigation.js';\nimport type { CalendarViewType } from './types/shared-types.js';\nimport { SelectDayView } from './views/SelectDayView.js';\nimport { SelectMonthView } from './views/SelectMonthView.js';\nimport { SelectYearView } from './views/SelectYearView.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { isFullTimeframe, isTimeValue } from '../../core/time/helpers.js';\nimport { useCalendarStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { validate } from '../../core/time/validation.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  getI18nValidationState,\n  useFormFieldValidation,\n} from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\n\nconst COMPONENT_NAME = 'Calendar';\n\n//#region types\n/**\n * @internal\n */\nexport type CalendarType = 'single' | 'range';\n\n/** @internal */\nexport type CalendarProps<Type extends CalendarType> = FormControlProps<\n  CalendarValueType<Type>,\n  (date: CalendarStrictValueType<Type>) => void\n> &\n  StylingProps &\n  MaskingProps &\n  DataTestId & {\n    /** The earliest selectable date. It will always consider the start of the day as time. */\n    min?: string;\n    /** The latest selectable date. It will always consider the end of the day as time. */\n    max?: string;\n    /** Determines the calendar type. Single allows the selection of one date and range allows a range selection with a from and to value.\n     * @defaultValue 'single'\n     */\n    type?: Type;\n    /**\n     * The precision of the time shown in the display value.\n     * @defaultValue 'minutes'\n     */\n    precision?: 'minutes' | 'seconds' | 'milliseconds';\n  };\n//#endregion\n\n/** Render the correct view depending on the currentView state. */\nfunction renderView(view: CalendarViewType) {\n  switch (view) {\n    case 'month':\n      return <SelectMonthView />;\n    case 'year':\n      return <SelectYearView />;\n    default:\n      return <SelectDayView />;\n  }\n}\n\nfunction CalendarComponent<Type extends CalendarType = 'single'>(\n  props: Omit<CalendarProps<Type>, 'value' | 'defaultValue' | 'onChange'>,\n  forwardedRef: Ref<\n    | FormControlRef<HTMLDivElement>\n    | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n        Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n  >,\n) {\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    id,\n    disabled,\n    'aria-disabled': ariaDisabled,\n    required,\n    name,\n    readOnly = false,\n    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n    // @ts-ignore Strict mode transition - needs to be investigated\n    type = 'single',\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    onValidityChange,\n    ...remainingProps\n  } = props;\n\n  const calendarValue = useCalendarStore((state) => state.calendarValue);\n  const min = useCalendarStore((state) => state.min);\n  const max = useCalendarStore((state) => state.max);\n  const error = useCalendarStore((state) => state.calendarError);\n  const precision = useCalendarStore((state) => state.precision);\n\n  // Imperative Handle Construction\n  const intl = useIntl();\n  const calendarRef = useRef<HTMLDivElement>(null);\n  const ref = useRef<HTMLInputElement>(null);\n  const refTo = useRef<HTMLInputElement>(null);\n  const _emitValidationState = useValidationStateEmitter(onValidityChange);\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => getI18nValidationState(intl, ref.current, 'manual'),\n  );\n\n  const { uniqueId, state, dispatch } = useCalendar<Type>({\n    type,\n  } as UseCalendarProps<Type>);\n\n  useCalendarNavigation({\n    calendarRef,\n    view: state.currentView,\n    dispatch,\n  });\n\n  const { dispatch: formMessageDispatch } = useFormFieldMessagesContext();\n\n  const refValidate = useCallback(() => {\n    formMessageDispatch?.({\n      type: FormFieldMessagesAction.SETISTOUCHED,\n      payload: { isTouched: true },\n    });\n\n    validate(calendarValue, min, max, {\n      formMessageDispatch,\n      formerError: error,\n      precision,\n      showError: true,\n      checkOrder: false,\n      ref,\n      errorMessages: CALENDAR_ERROR_MESSAGES,\n    });\n  }, [min, max, formMessageDispatch, error, precision, ref, calendarValue]);\n\n  useImperativeHandle(\n    forwardedRef,\n    ():\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>) => {\n      if (type === 'single') {\n        return {\n          element: calendarRef.current,\n          inputRef: ref.current,\n          validate() {\n            refValidate();\n            emitValidationState(\n              getI18nValidationState(intl, ref.current, 'manual'),\n            );\n          },\n          // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n          validateAsync: async () => {\n            refValidate();\n            return emitValidationState(\n              getI18nValidationState(intl, ref.current, 'manual'),\n            );\n          },\n        };\n      }\n\n      return {\n        element: calendarRef.current,\n        inputRef: { from: ref?.current, to: refTo?.current },\n        validate() {\n          refValidate();\n          const fromState = getI18nValidationState(intl, ref.current, 'manual');\n          if (fromState.errors.length > 0) {\n            emitValidationState(fromState);\n            return;\n          }\n          emitValidationState(\n            getI18nValidationState(intl, refTo.current, 'manual'),\n          );\n        },\n        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n        validateAsync: async () => {\n          refValidate();\n          const fromState = getI18nValidationState(intl, ref.current, 'manual');\n          if (fromState.errors.length > 0) {\n            return emitValidationState(fromState);\n          }\n          return emitValidationState(\n            getI18nValidationState(intl, refTo.current, 'manual'),\n          );\n        },\n      };\n    },\n    [refValidate, type, emitValidationState, intl],\n  );\n\n  const {\n    ariaProps,\n    onChange: validationOnChange,\n    onBlur,\n    onInvalid,\n  } = useFormFieldValidation(\n    ref,\n    {},\n    {\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-details': ariaDetailsProp,\n    },\n    undefined,\n    _emitValidationState,\n  );\n\n  useEffect(() => {\n    validationOnChange();\n  }, [calendarValue, validationOnChange]);\n\n  const labelRef = useRef<string>(`calendar-body-label-${uniqueId}`);\n\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const getNativeProps = (suffix = '') => ({\n    readOnly: readOnly,\n    required,\n    disabled,\n    'aria-disabled': ariaDisabled,\n    name: name && `${name}${suffix}`,\n    id,\n  });\n\n  const calenderContextValue = useMemo(\n    () => ({ state, dispatch, readOnly }),\n    [state, dispatch, readOnly],\n  );\n\n  return (\n    <CalendarContext.Provider value={calenderContextValue}>\n      <div\n        role=\"group\"\n        className={clsx(styles.calendar({ readOnly }), consumerClassName, {\n          [styles.disabled]: disabledOrAriaDisabled,\n        })}\n        data-testid={dataTestId}\n        ref={calendarRef}\n        style={consumerStyle}\n        onBlur={(e) => {\n          if (!calendarRef.current?.contains(e.relatedTarget)) {\n            onBlur();\n          }\n        }}\n        {...remainingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <CalendarHeader view={state.currentView} labelId={labelRef.current} />\n        <div aria-labelledby={labelRef.current}>\n          <table\n            role=\"grid\"\n            className={styles.body({\n              isReadOnly: !!readOnly,\n            })}\n          >\n            {renderView(state.currentView)}\n          </table>\n        </div>\n        {type === 'range' && <SetTimeToNowButton />}\n      </div>\n      <VisuallyHidden>\n        {isTimeValue(calendarValue) ? (\n          <input\n            onChange={validationOnChange}\n            onBlur={onBlur}\n            onInvalid={onInvalid}\n            {...ariaProps}\n            {...getNativeProps()}\n            ref={ref}\n            value={calendarValue?.absoluteDate ?? ''}\n            tabIndex={-1}\n          />\n        ) : (\n          <>\n            <input\n              onChange={validationOnChange}\n              onBlur={onBlur}\n              onInvalid={onInvalid}\n              {...ariaProps}\n              {...getNativeProps('-from')}\n              ref={ref}\n              // Only set if a complete timeframe is available to rely on the browser validation for required.\n              value={\n                isFullTimeframe(calendarValue) && calendarValue?.from?.value\n                  ? calendarValue.from.value\n                  : ''\n              }\n              tabIndex={-1}\n            />\n            {/* This input is ONLY used for form submission and not for validation. */}\n            <input\n              {...getNativeProps('-to')}\n              ref={refTo}\n              value={calendarValue?.to?.value ?? ''}\n              id={`${id}-to`}\n              type=\"hidden\"\n            />\n          </>\n        )}\n      </VisuallyHidden>\n    </CalendarContext.Provider>\n  );\n}\n\nCalendarComponent['displayName'] = COMPONENT_NAME;\n\n/**\n * Calendar component\n * Renders the calendar header and body depending on the current view\n * @internal\n */\nexport const CalendarRoot = forwardRef(CalendarComponent);\n"],
+  "mappings": "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",
   "names": ["state"]
 }

package/esm/forms/calendar/components/CalendarItem.css

@@ -1,7 +1,7 @@
-._1basjc0-3-7-0 {
+._1basjc0-3-8-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1basjc1-3-7-0::after,._1basjc1-3-7-0::before {
+._1basjc1-3-8-0::after,._1basjc1-3-8-0::before {
   content: "";
   position: absolute;
   width: 4px;
@@ -11,11 +11,11 @@
   left: 50%;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._1basjc1-3-7-0::before {
+._1basjc1-3-8-0::before {
   transform: translate(-50%, 50%) scale(2);
   background: var(--dt-colors-background-surface-default, #fff);
 }
-._1basjc2-3-7-0 {
+._1basjc2-3-8-0 {
   padding-left: var(--dt-spacings-size-0, 0);
   padding-right: var(--dt-spacings-size-0, 0);
   margin: var(--dt-spacings-size-0, 0);
@@ -23,9 +23,9 @@
   position: relative;
   z-index: 0;
 }
-._1basjc2-3-7-0::after {
-  background: var(--_1jljrbf1-3-7-0);
+._1basjc2-3-8-0::after {
+  background: var(--_1jljrbf1-3-8-0);
 }
-._1basjc3-3-7-0 {
+._1basjc3-3-8-0 {
   flex-grow: 1;
 }

package/esm/forms/calendar/components/CalendarItem.sty.js

@@ -1,8 +1,8 @@
 import "./CalendarItem.css";
-var calendarButton = "_1basjc2-3-7-0";
-var currentIndicator = "_1basjc1-3-7-0";
-var headerButton = "_1basjc3-3-7-0";
-var outOfScopeDay = "_1basjc0-3-7-0";
+var calendarButton = "_1basjc2-3-8-0";
+var currentIndicator = "_1basjc1-3-8-0";
+var headerButton = "_1basjc3-3-8-0";
+var outOfScopeDay = "_1basjc0-3-8-0";
 export {
   calendarButton,
   currentIndicator,

package/esm/forms/calendar/components/CalendarItem.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/components/CalendarItem.css.ts"],
-  "sourcesContent": ["import './CalendarItem.css';\nexport var calendarButton = '_1basjc2-3-7-0';\nexport var currentIndicator = '_1basjc1-3-7-0';\nexport var headerButton = '_1basjc3-3-7-0';\nexport var outOfScopeDay = '_1basjc0-3-7-0';"],
+  "sourcesContent": ["import './CalendarItem.css';\nexport var calendarButton = '_1basjc2-3-8-0';\nexport var currentIndicator = '_1basjc1-3-8-0';\nexport var headerButton = '_1basjc3-3-8-0';\nexport var outOfScopeDay = '_1basjc0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,mBAAmB;AACvB,IAAI,eAAe;AACnB,IAAI,gBAAgB;",
   "names": []
 }

package/esm/forms/calendar/components/CalendarOutlineIcon.css

@@ -1,24 +1,24 @@
-._1uazq660-3-7-0 {
+._1uazq660-3-8-0 {
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   overflow: visible;
-  fill: var(--_1jljrbf1-3-7-0);
+  fill: var(--_1jljrbf1-3-8-0);
 }
-._1uazq661-3-7-0 {
-  fill: var(--_1jljrbf1-3-7-0);
+._1uazq661-3-8-0 {
+  fill: var(--_1jljrbf1-3-8-0);
 }
-._1uazq662-3-7-0 {
+._1uazq662-3-8-0 {
   fill: var(--dt-colors-background-surface-default, #fff);
 }
-._1uazq663-3-7-0 {
-  fill: var(--_1jljrbf0-3-7-0);
+._1uazq663-3-8-0 {
+  fill: var(--_1jljrbf0-3-8-0);
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   opacity: 0;
   transition-property: opacity;
 }
-._1uazq664-3-7-0 {
+._1uazq664-3-8-0 {
   opacity: 1;
 }

package/esm/forms/calendar/components/CalendarOutlineIcon.sty.js

@@ -1,9 +1,9 @@
 import "./CalendarOutlineIcon.css";
-var calendarIndicatorBackgroundCSS = "_1uazq662-3-7-0";
-var calendarIndicatorCSS = "_1uazq661-3-7-0";
-var calendarOutlineCSS = "_1uazq660-3-7-0";
-var calendarRangeCornersCSS = "_1uazq663-3-7-0";
-var calendarRangeCornorVisibleCSS = "_1uazq664-3-7-0";
+var calendarIndicatorBackgroundCSS = "_1uazq662-3-8-0";
+var calendarIndicatorCSS = "_1uazq661-3-8-0";
+var calendarOutlineCSS = "_1uazq660-3-8-0";
+var calendarRangeCornersCSS = "_1uazq663-3-8-0";
+var calendarRangeCornorVisibleCSS = "_1uazq664-3-8-0";
 export {
   calendarIndicatorBackgroundCSS,
   calendarIndicatorCSS,

package/esm/forms/calendar/components/CalendarOutlineIcon.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/components/CalendarOutlineIcon.css.ts"],
-  "sourcesContent": ["import './CalendarOutlineIcon.css';\nexport var calendarIndicatorBackgroundCSS = '_1uazq662-3-7-0';\nexport var calendarIndicatorCSS = '_1uazq661-3-7-0';\nexport var calendarOutlineCSS = '_1uazq660-3-7-0';\nexport var calendarRangeCornersCSS = '_1uazq663-3-7-0';\nexport var calendarRangeCornorVisibleCSS = '_1uazq664-3-7-0';"],
+  "sourcesContent": ["import './CalendarOutlineIcon.css';\nexport var calendarIndicatorBackgroundCSS = '_1uazq662-3-8-0';\nexport var calendarIndicatorCSS = '_1uazq661-3-8-0';\nexport var calendarOutlineCSS = '_1uazq660-3-8-0';\nexport var calendarRangeCornersCSS = '_1uazq663-3-8-0';\nexport var calendarRangeCornorVisibleCSS = '_1uazq664-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iCAAiC;AACrC,IAAI,uBAAuB;AAC3B,IAAI,qBAAqB;AACzB,IAAI,0BAA0B;AAC9B,IAAI,gCAAgC;",
   "names": []
 }

package/esm/forms/calendar/variables.sty.js

@@ -1,5 +1,5 @@
-var borderColor = "var(--_1jljrbf1-3-7-0)";
-var rangeColor = "var(--_1jljrbf0-3-7-0)";
+var borderColor = "var(--_1jljrbf1-3-8-0)";
+var rangeColor = "var(--_1jljrbf0-3-8-0)";
 export {
   borderColor,
   rangeColor

package/esm/forms/calendar/variables.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/calendar/variables.css.ts"],
-  "sourcesContent": ["export var borderColor = 'var(--_1jljrbf1-3-7-0)';\nexport var rangeColor = 'var(--_1jljrbf0-3-7-0)';"],
+  "sourcesContent": ["export var borderColor = 'var(--_1jljrbf1-3-8-0)';\nexport var rangeColor = 'var(--_1jljrbf0-3-8-0)';"],
   "mappings": "AAAO,IAAI,cAAc;AAClB,IAAI,aAAa;",
   "names": []
 }

package/esm/forms/checkbox/Checkbox.css

@@ -1,67 +1,67 @@
-._qmw7sp0-3-7-0 {
+._qmw7sp0-3-8-0 {
   display: flex;
   cursor: pointer;
 }
-._qmw7sp1-3-7-0 {
+._qmw7sp1-3-8-0 {
   cursor: not-allowed;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._qmw7sp2-3-7-0:after {
+._qmw7sp2-3-8-0:after {
   content: "*";
 }
-._qmw7sp3-3-7-0 {
+._qmw7sp3-3-8-0 {
   cursor: default;
 }
-._qmw7sp4-3-7-0 {
+._qmw7sp4-3-8-0 {
   width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
-  background-color: var(--_bx32h3-3-7-0);
+  background-color: var(--_bx32h3-3-8-0);
   flex-shrink: 0;
   box-sizing: border-box;
   position: relative;
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._qmw7sp5-3-7-0 {
+._qmw7sp5-3-8-0 {
   margin-right: var(--dt-spacings-size-8, 8px);
 }
-._qmw7sp6-3-7-0 {
+._qmw7sp6-3-8-0 {
   margin-right: 0;
 }
-._qmw7spg-3-7-0 {
+._qmw7spg-3-8-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._qmw7spg-3-7-0:not(:has(:focus-visible)) {
+._qmw7spg-3-8-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._qmw7sph-3-7-0 {
+._qmw7sph-3-8-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._qmw7sph-3-7-0:not(:has(:focus-visible)) {
+._qmw7sph-3-8-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._qmw7spi-3-7-0:not(:has(:focus-visible)) {
+._qmw7spi-3-8-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-disabled, #dadbe480);
 }
-._qmw7spj-3-7-0:not(:has(:focus-visible)) {
+._qmw7spj-3-8-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._qmw7spk-3-7-0:not(:has(:focus-visible)) {
+._qmw7spk-3-8-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._qmw7spl-3-7-0:not(:has(:focus-visible)) {
+._qmw7spl-3-8-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._qmw7spm-3-7-0 {
+._qmw7spm-3-8-0 {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  color: var(--_bx32h1-3-7-0);
+  color: var(--_bx32h1-3-8-0);
 }
-._qmw7spn-3-7-0 {
+._qmw7spn-3-8-0 {
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._qmw7spp-3-7-0 {
+._qmw7spp-3-8-0 {
   color: var(--dt-colors-icon-critical-default, #bb0731);
 }

package/esm/forms/checkbox/Checkbox.js

@@ -7,6 +7,7 @@ import {
   useImperativeHandle,
   useRef
 } from "react";
+import { useIntl } from "react-intl";
 import { CheckmarkSmallIcon, MinusIcon } from "@dynatrace/strato-icons";
 import {
   checkboxIconCSS,
@@ -26,10 +27,15 @@ import { fieldTokens as fieldColorsCSS } from "../../styles/field.sty.js";
 import { textStyle as textStyleCSS } from "../../styles/textStyle.sty.js";
 import { InternalBaseItem as BaseItem } from "../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js";
 import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
-import { useFormFieldValidation } from "../forms-core/hooks/useFormFieldValidation.js";
+import {
+  getI18nValidationState,
+  useFormFieldValidation
+} from "../forms-core/hooks/useFormFieldValidation.js";
 import { useSyncedFormControlProps } from "../forms-core/hooks/useSyncedFormControlProps.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
 import { useInputHint } from "../hooks/useInputHint.js";
+import { useCustomMessageEmitter } from "../validation/useCustomMessageEmitter.js";
+import { useValidationStateEmitter } from "../validation/useValidationStateEmitter.js";
 const COMPONENT_NAME = "Checkbox";
 const Checkbox = forwardRef(
   (props, forwardedRef) => {
@@ -42,6 +48,7 @@ const Checkbox = forwardRef(
       value,
       name,
       formValue,
+      onValidityChange,
       onChange,
       children,
       controlState,
@@ -70,14 +77,26 @@ const Checkbox = forwardRef(
       propAriaDisabled: ariaDisabledProp,
       propReadOnly
     });
+    const intl = useIntl();
     const rootRef = useRef(null);
     const inputRef = useRef(null);
+    const _emitValidationState = useValidationStateEmitter(onValidityChange);
+    const emitValidationState = useCustomMessageEmitter(
+      _emitValidationState,
+      () => getI18nValidationState(intl, inputRef.current, "manual")
+    );
     const {
       onChange: validationOnChange,
       onBlur: validationOnBlur,
       onInvalid: validationOnInvalid,
       ariaProps
-    } = useFormFieldValidation(inputRef, { required }, ariaLabelingProps);
+    } = useFormFieldValidation(
+      inputRef,
+      { required, value: String(value) },
+      ariaLabelingProps,
+      void 0,
+      _emitValidationState
+    );
     useImperativeHandle(forwardedRef, () => {
       return {
         element: rootRef.current,
@@ -92,7 +111,21 @@ const Checkbox = forwardRef(
               type: FormFieldMessagesAction.SETISTOUCHED,
               payload: { isTouched: true }
             });
+            emitValidationState(
+              getI18nValidationState(intl, inputRef.current, "manual")
+            );
           }
+        },
+        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
+        validateAsync: async () => {
+          inputRef.current?.checkValidity();
+          messagesContextDispatch?.({
+            type: FormFieldMessagesAction.SETISTOUCHED,
+            payload: { isTouched: true }
+          });
+          return emitValidationState(
+            getI18nValidationState(intl, inputRef.current, "manual")
+          );
         }
       };
     });
@@ -122,12 +155,6 @@ const Checkbox = forwardRef(
       setState(newValue);
       onChange?.(newValue, e);
       validationOnChange();
-      if (!messagesContextState.isTouched) {
-        messagesContextDispatch?.({
-          type: FormFieldMessagesAction.SETISTOUCHED,
-          payload: { isTouched: true }
-        });
-      }
     };
     useEffect(() => {
       if (inputRef.current) {

package/esm/forms/checkbox/Checkbox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/checkbox/Checkbox.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { CheckmarkSmallIcon, MinusIcon } from '@dynatrace/strato-icons';\n\nimport {\n  checkboxIconCSS,\n  checkboxKnobCSS,\n  checkboxLabelCSS,\n} from './Checkbox.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useSafeForwardProps as _useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FocusEvents } from '../../core/types/events.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlRef } from '../shared-types.js';\n\nconst COMPONENT_NAME = 'Checkbox';\n\n// #region Typings\n/**\n * @public\n */\nexport type CheckboxProps = FormControlProps<\n  boolean | 'indeterminate',\n  (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void | never\n> &\n  FocusEvents &\n  StylingProps &\n  DataTestId &\n  WithChildren &\n  MaskingProps &\n  BehaviorTrackingProps & {\n    /**\n     * A string representing the value used for the checkbox.\n     * When submitted in a form, it is only submitted if checked, with the set value.\n     * If undefined, the string 'on' is submitted by default as per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-value.\n     */\n    formValue?: string;\n  };\n// #endregion\n\n/**\n * Checkboxes allow the user to select one or more options from a list of options.\n * @public\n */\nexport const Checkbox = forwardRef<FormControlRef, CheckboxProps>(\n  (props, forwardedRef) => {\n    const {\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      defaultValue,\n      value,\n      name,\n      formValue,\n      onChange,\n      children,\n      controlState,\n      className: consumerClassName,\n      style: consumerStyle,\n      'aria-disabled': ariaDisabledProp,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: CheckboxProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const ariaLabelingProps = _useAriaLabelingProps(restProps);\n    const forwardProps = _useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const { state: messagesContextState, dispatch: messagesContextDispatch } =\n      useFormFieldMessagesContext();\n\n    const {\n      disabled,\n      required,\n      id,\n      ariaDisabled,\n      readOnly: _readOnly,\n    } = useSyncedFormControlProps({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled: ariaDisabledProp,\n      propReadOnly,\n    });\n\n    // Imperative Handle Construction\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const {\n      onChange: validationOnChange,\n      onBlur: validationOnBlur,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(inputRef, { required }, ariaLabelingProps);\n\n    useImperativeHandle(forwardedRef, (): FormControlRef => {\n      return {\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          if (messagesContextState) {\n            inputRef.current?.checkValidity();\n            messagesContextDispatch?.({\n              type: FormFieldMessagesAction.SETISTOUCHED,\n              payload: { isTouched: true },\n            });\n          }\n        },\n      };\n    });\n\n    const [state, setState] = useControllableState({\n      defaultValue,\n      value,\n    });\n\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n    const readOnly = !!_readOnly;\n\n    const [hasError, hint] = useFormControlState(controlState);\n    // _useInputHint will be replaced with new validation concept. APPDEV-8298\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const { inputProps, hintProps } = useInputHint({\n      hint,\n      hasError,\n    });\n\n    const showError = hasError || messagesContextState.showError;\n\n    let focusRingColor: 'neutral' | 'critical' | 'primary' = 'neutral';\n    if (showError) {\n      focusRingColor = 'critical';\n    } else if (!(disabled || readOnly) && state) {\n      focusRingColor = 'primary';\n    }\n\n    const handleOnChange = (e: ChangeEvent<HTMLInputElement>): void => {\n      if (readOnly) {\n        return;\n      }\n\n      const newValue = e.target.indeterminate ? true : e.target.checked;\n      setState(newValue);\n      onChange?.(newValue, e);\n      validationOnChange();\n\n      if (!messagesContextState.isTouched) {\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n    };\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = value === 'indeterminate';\n      }\n    }, [value]);\n\n    let fieldColorVariant: 'default' | 'accent' | 'emphasized' = 'default';\n    if (state === true || state === 'indeterminate') {\n      fieldColorVariant = 'accent';\n    } else if (showError || disabledOrAriaDisabled) {\n      fieldColorVariant = 'emphasized';\n    }\n\n    let fieldColorColor: 'neutral' | 'primary' | 'critical' = 'primary';\n    if (showError) {\n      fieldColorColor = 'critical';\n    } else if (state === false) {\n      fieldColorColor = 'neutral';\n    }\n\n    return (\n      <Flex\n        ref={rootRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        flexDirection=\"column\"\n        gap={4}\n        className={consumerClassName}\n        style={consumerStyle}\n        {...mergeProps(forwardProps, behavioralTrackingProps)}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <label\n          htmlFor={id}\n          className={clsx(\n            checkboxLabelCSS({\n              required: typeof children === 'string' && required,\n              disabled: disabledOrAriaDisabled,\n              readOnly,\n            }),\n            textStyleCSS({ fontStyle: 'text', textStyle: 'base' }),\n          )}\n        >\n          <div\n            className={clsx(\n              checkboxKnobCSS({\n                disabled: disabledOrAriaDisabled,\n                hasChildren: !!children,\n                hasError: showError,\n                checked: state === true || state === 'indeterminate',\n                readOnly,\n              }),\n              fieldColorsCSS({\n                variant: fieldColorVariant,\n                disabled: disabledOrAriaDisabled,\n                color: fieldColorColor,\n              }),\n              focusRingStatic({\n                when: 'focus-within-visible',\n                color: focusRingColor,\n                disabled,\n              }),\n            )}\n          >\n            <VisuallyHidden>\n              <input\n                id={id}\n                ref={inputRef}\n                type=\"checkbox\"\n                aria-checked={state === 'indeterminate' ? 'mixed' : state}\n                aria-required={required}\n                aria-disabled={ariaDisabled}\n                readOnly={readOnly}\n                name={name}\n                value={formValue}\n                disabled={disabled}\n                required={required}\n                checked={state === true}\n                onChange={handleOnChange}\n                onBlur={(event) => {\n                  validationOnBlur(event);\n                }}\n                onInvalid={validationOnInvalid}\n                {...(controlState ? inputProps : ariaProps)}\n              />\n            </VisuallyHidden>\n            <div className={checkboxIconCSS({ readOnly, hasError: showError })}>\n              <CheckboxIconSvg state={state} />\n            </div>\n          </div>\n          {children}\n        </label>\n        {hint && (\n          <BaseItem\n            variant={showError ? 'error' : 'hint'}\n            disabled={disabledOrAriaDisabled}\n            {...hintProps}\n          >\n            {hint}\n          </BaseItem>\n        )}\n      </Flex>\n    );\n  },\n);\n(Checkbox as typeof Checkbox & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\ntype CheckboxIconProps = {\n  state: boolean | 'indeterminate';\n};\n\n/** Determines what svg to display based on the checked and indeterminate attributes. */\nconst CheckboxIconSvg = memo((props: CheckboxIconProps) => {\n  switch (props.state) {\n    case true:\n      return <CheckmarkSmallIcon />;\n    case 'indeterminate':\n      return <MinusIcon />;\n    case false:\n    default:\n      return null;\n  }\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CheckmarkSmallIcon, MinusIcon } from '@dynatrace/strato-icons';\n\nimport {\n  checkboxIconCSS,\n  checkboxKnobCSS,\n  checkboxLabelCSS,\n} from './Checkbox.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useSafeForwardProps as _useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FocusEvents } from '../../core/types/events.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  getI18nValidationState,\n  useFormFieldValidation,\n} from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\n\nconst COMPONENT_NAME = 'Checkbox';\n\n// #region Typings\n/**\n * @public\n */\nexport type CheckboxProps = FormControlProps<\n  boolean | 'indeterminate',\n  (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void | never\n> &\n  FocusEvents &\n  StylingProps &\n  DataTestId &\n  WithChildren &\n  MaskingProps &\n  BehaviorTrackingProps & {\n    /**\n     * A string representing the value used for the checkbox.\n     * When submitted in a form, it is only submitted if checked, with the set value.\n     * If undefined, the string 'on' is submitted by default as per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-value.\n     */\n    formValue?: string;\n  };\n// #endregion\n\n/**\n * Checkboxes allow the user to select one or more options from a list of options.\n * @public\n */\nexport const Checkbox = forwardRef<FormControlRef, CheckboxProps>(\n  (props, forwardedRef) => {\n    const {\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      defaultValue,\n      value,\n      name,\n      formValue,\n      onValidityChange,\n      onChange,\n      children,\n      controlState,\n      className: consumerClassName,\n      style: consumerStyle,\n      'aria-disabled': ariaDisabledProp,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: CheckboxProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const ariaLabelingProps = _useAriaLabelingProps(restProps);\n    const forwardProps = _useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const { state: messagesContextState, dispatch: messagesContextDispatch } =\n      useFormFieldMessagesContext();\n\n    const {\n      disabled,\n      required,\n      id,\n      ariaDisabled,\n      readOnly: _readOnly,\n    } = useSyncedFormControlProps({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled: ariaDisabledProp,\n      propReadOnly,\n    });\n\n    // Imperative Handle Construction\n    const intl = useIntl();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const _emitValidationState = useValidationStateEmitter(onValidityChange);\n    const emitValidationState = useCustomMessageEmitter(\n      _emitValidationState,\n      () => getI18nValidationState(intl, inputRef.current, 'manual'),\n    );\n    const {\n      onChange: validationOnChange,\n      onBlur: validationOnBlur,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(\n      inputRef,\n      { required, value: String(value) },\n      ariaLabelingProps,\n      undefined,\n      _emitValidationState,\n    );\n\n    useImperativeHandle(forwardedRef, (): FormControlRef => {\n      return {\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          if (messagesContextState) {\n            inputRef.current?.checkValidity();\n            messagesContextDispatch?.({\n              type: FormFieldMessagesAction.SETISTOUCHED,\n              payload: { isTouched: true },\n            });\n            emitValidationState(\n              getI18nValidationState(intl, inputRef.current, 'manual'),\n            );\n          }\n        },\n        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n        validateAsync: async () => {\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          return emitValidationState(\n            getI18nValidationState(intl, inputRef.current, 'manual'),\n          );\n        },\n      };\n    });\n\n    const [state, setState] = useControllableState({\n      defaultValue,\n      value,\n    });\n\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n    const readOnly = !!_readOnly;\n\n    const [hasError, hint] = useFormControlState(controlState);\n    // _useInputHint will be replaced with new validation concept. APPDEV-8298\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const { inputProps, hintProps } = useInputHint({\n      hint,\n      hasError,\n    });\n\n    const showError = hasError || messagesContextState.showError;\n\n    let focusRingColor: 'neutral' | 'critical' | 'primary' = 'neutral';\n    if (showError) {\n      focusRingColor = 'critical';\n    } else if (!(disabled || readOnly) && state) {\n      focusRingColor = 'primary';\n    }\n\n    const handleOnChange = (e: ChangeEvent<HTMLInputElement>): void => {\n      if (readOnly) {\n        return;\n      }\n\n      const newValue = e.target.indeterminate ? true : e.target.checked;\n      setState(newValue);\n      onChange?.(newValue, e);\n      validationOnChange();\n    };\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = value === 'indeterminate';\n      }\n    }, [value]);\n\n    let fieldColorVariant: 'default' | 'accent' | 'emphasized' = 'default';\n    if (state === true || state === 'indeterminate') {\n      fieldColorVariant = 'accent';\n    } else if (showError || disabledOrAriaDisabled) {\n      fieldColorVariant = 'emphasized';\n    }\n\n    let fieldColorColor: 'neutral' | 'primary' | 'critical' = 'primary';\n    if (showError) {\n      fieldColorColor = 'critical';\n    } else if (state === false) {\n      fieldColorColor = 'neutral';\n    }\n\n    return (\n      <Flex\n        ref={rootRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        flexDirection=\"column\"\n        gap={4}\n        className={consumerClassName}\n        style={consumerStyle}\n        {...mergeProps(forwardProps, behavioralTrackingProps)}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <label\n          htmlFor={id}\n          className={clsx(\n            checkboxLabelCSS({\n              required: typeof children === 'string' && required,\n              disabled: disabledOrAriaDisabled,\n              readOnly,\n            }),\n            textStyleCSS({ fontStyle: 'text', textStyle: 'base' }),\n          )}\n        >\n          <div\n            className={clsx(\n              checkboxKnobCSS({\n                disabled: disabledOrAriaDisabled,\n                hasChildren: !!children,\n                hasError: showError,\n                checked: state === true || state === 'indeterminate',\n                readOnly,\n              }),\n              fieldColorsCSS({\n                variant: fieldColorVariant,\n                disabled: disabledOrAriaDisabled,\n                color: fieldColorColor,\n              }),\n              focusRingStatic({\n                when: 'focus-within-visible',\n                color: focusRingColor,\n                disabled,\n              }),\n            )}\n          >\n            <VisuallyHidden>\n              <input\n                id={id}\n                ref={inputRef}\n                type=\"checkbox\"\n                aria-checked={state === 'indeterminate' ? 'mixed' : state}\n                aria-required={required}\n                aria-disabled={ariaDisabled}\n                readOnly={readOnly}\n                name={name}\n                value={formValue}\n                disabled={disabled}\n                required={required}\n                checked={state === true}\n                onChange={handleOnChange}\n                onBlur={(event) => {\n                  validationOnBlur(event);\n                }}\n                onInvalid={validationOnInvalid}\n                {...(controlState ? inputProps : ariaProps)}\n              />\n            </VisuallyHidden>\n            <div className={checkboxIconCSS({ readOnly, hasError: showError })}>\n              <CheckboxIconSvg state={state} />\n            </div>\n          </div>\n          {children}\n        </label>\n        {hint && (\n          <BaseItem\n            variant={showError ? 'error' : 'hint'}\n            disabled={disabledOrAriaDisabled}\n            {...hintProps}\n          >\n            {hint}\n          </BaseItem>\n        )}\n      </Flex>\n    );\n  },\n);\n(Checkbox as typeof Checkbox & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\ntype CheckboxIconProps = {\n  state: boolean | 'indeterminate';\n};\n\n/** Determines what svg to display based on the checked and indeterminate attributes. */\nconst CheckboxIconSvg = memo((props: CheckboxIconProps) => {\n  switch (props.state) {\n    case true:\n      return <CheckmarkSmallIcon />;\n    case 'indeterminate':\n      return <MinusIcon />;\n    case false:\n    default:\n      return null;\n  }\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/checkbox/Checkbox.sty.js

@@ -2,9 +2,9 @@ import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./Checkbox.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var checkboxIconCSS = _7a468({ defaultClassName: "_qmw7spm-3-7-0", variantClassNames: { readOnly: { true: "_qmw7spn-3-7-0" }, hasError: { true: "_qmw7spo-3-7-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: true }, "_qmw7spp-3-7-0"]] });
-var checkboxKnobCSS = _7a468({ defaultClassName: "_qmw7sp4-3-7-0", variantClassNames: { hasChildren: { true: "_qmw7sp5-3-7-0", false: "_qmw7sp6-3-7-0" }, disabled: { true: "_qmw7sp7-3-7-0", false: "_qmw7sp8-3-7-0" }, hasError: { true: "_qmw7sp9-3-7-0", false: "_qmw7spa-3-7-0" }, checked: { true: "_qmw7spb-3-7-0", false: "_qmw7spc-3-7-0", indeterminate: "_qmw7spd-3-7-0", undefined: "_qmw7spe-3-7-0" }, readOnly: { true: "_qmw7spf-3-7-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: false, disabled: false }, "_qmw7spg-3-7-0"], [{ readOnly: true, hasError: true, disabled: false }, "_qmw7sph-3-7-0"], [{ disabled: true, hasError: true, checked: false }, "_qmw7spi-3-7-0"], [{ disabled: true, hasError: false, checked: false }, "_qmw7spj-3-7-0"], [{ disabled: false, hasError: true, checked: false }, "_qmw7spk-3-7-0"], [{ disabled: false, hasError: false, checked: false, readOnly: false }, "_qmw7spl-3-7-0"]] });
-var checkboxLabelCSS = _7a468({ defaultClassName: "_qmw7sp0-3-7-0", variantClassNames: { disabled: { true: "_qmw7sp1-3-7-0" }, required: { true: "_qmw7sp2-3-7-0" }, readOnly: { true: "_qmw7sp3-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
+var checkboxIconCSS = _7a468({ defaultClassName: "_qmw7spm-3-8-0", variantClassNames: { readOnly: { true: "_qmw7spn-3-8-0" }, hasError: { true: "_qmw7spo-3-8-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: true }, "_qmw7spp-3-8-0"]] });
+var checkboxKnobCSS = _7a468({ defaultClassName: "_qmw7sp4-3-8-0", variantClassNames: { hasChildren: { true: "_qmw7sp5-3-8-0", false: "_qmw7sp6-3-8-0" }, disabled: { true: "_qmw7sp7-3-8-0", false: "_qmw7sp8-3-8-0" }, hasError: { true: "_qmw7sp9-3-8-0", false: "_qmw7spa-3-8-0" }, checked: { true: "_qmw7spb-3-8-0", false: "_qmw7spc-3-8-0", indeterminate: "_qmw7spd-3-8-0", undefined: "_qmw7spe-3-8-0" }, readOnly: { true: "_qmw7spf-3-8-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: false, disabled: false }, "_qmw7spg-3-8-0"], [{ readOnly: true, hasError: true, disabled: false }, "_qmw7sph-3-8-0"], [{ disabled: true, hasError: true, checked: false }, "_qmw7spi-3-8-0"], [{ disabled: true, hasError: false, checked: false }, "_qmw7spj-3-8-0"], [{ disabled: false, hasError: true, checked: false }, "_qmw7spk-3-8-0"], [{ disabled: false, hasError: false, checked: false, readOnly: false }, "_qmw7spl-3-8-0"]] });
+var checkboxLabelCSS = _7a468({ defaultClassName: "_qmw7sp0-3-8-0", variantClassNames: { disabled: { true: "_qmw7sp1-3-8-0" }, required: { true: "_qmw7sp2-3-8-0" }, readOnly: { true: "_qmw7sp3-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   checkboxIconCSS,
   checkboxKnobCSS,

package/esm/forms/checkbox/Checkbox.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/checkbox/Checkbox.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Checkbox.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var checkboxIconCSS = _7a468({defaultClassName:'_qmw7spm-3-7-0',variantClassNames:{readOnly:{true:'_qmw7spn-3-7-0'},hasError:{true:'_qmw7spo-3-7-0'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:true},'_qmw7spp-3-7-0']]});\nexport var checkboxKnobCSS = _7a468({defaultClassName:'_qmw7sp4-3-7-0',variantClassNames:{hasChildren:{true:'_qmw7sp5-3-7-0',false:'_qmw7sp6-3-7-0'},disabled:{true:'_qmw7sp7-3-7-0',false:'_qmw7sp8-3-7-0'},hasError:{true:'_qmw7sp9-3-7-0',false:'_qmw7spa-3-7-0'},checked:{true:'_qmw7spb-3-7-0',false:'_qmw7spc-3-7-0',indeterminate:'_qmw7spd-3-7-0',undefined:'_qmw7spe-3-7-0'},readOnly:{true:'_qmw7spf-3-7-0'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:false,disabled:false},'_qmw7spg-3-7-0'],[{readOnly:true,hasError:true,disabled:false},'_qmw7sph-3-7-0'],[{disabled:true,hasError:true,checked:false},'_qmw7spi-3-7-0'],[{disabled:true,hasError:false,checked:false},'_qmw7spj-3-7-0'],[{disabled:false,hasError:true,checked:false},'_qmw7spk-3-7-0'],[{disabled:false,hasError:false,checked:false,readOnly:false},'_qmw7spl-3-7-0']]});\nexport var checkboxLabelCSS = _7a468({defaultClassName:'_qmw7sp0-3-7-0',variantClassNames:{disabled:{true:'_qmw7sp1-3-7-0'},required:{true:'_qmw7sp2-3-7-0'},readOnly:{true:'_qmw7sp3-3-7-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Checkbox.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var checkboxIconCSS = _7a468({defaultClassName:'_qmw7spm-3-8-0',variantClassNames:{readOnly:{true:'_qmw7spn-3-8-0'},hasError:{true:'_qmw7spo-3-8-0'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:true},'_qmw7spp-3-8-0']]});\nexport var checkboxKnobCSS = _7a468({defaultClassName:'_qmw7sp4-3-8-0',variantClassNames:{hasChildren:{true:'_qmw7sp5-3-8-0',false:'_qmw7sp6-3-8-0'},disabled:{true:'_qmw7sp7-3-8-0',false:'_qmw7sp8-3-8-0'},hasError:{true:'_qmw7sp9-3-8-0',false:'_qmw7spa-3-8-0'},checked:{true:'_qmw7spb-3-8-0',false:'_qmw7spc-3-8-0',indeterminate:'_qmw7spd-3-8-0',undefined:'_qmw7spe-3-8-0'},readOnly:{true:'_qmw7spf-3-8-0'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:false,disabled:false},'_qmw7spg-3-8-0'],[{readOnly:true,hasError:true,disabled:false},'_qmw7sph-3-8-0'],[{disabled:true,hasError:true,checked:false},'_qmw7spi-3-8-0'],[{disabled:true,hasError:false,checked:false},'_qmw7spj-3-8-0'],[{disabled:false,hasError:true,checked:false},'_qmw7spk-3-8-0'],[{disabled:false,hasError:false,checked:false,readOnly:false},'_qmw7spl-3-8-0']]});\nexport var checkboxLabelCSS = _7a468({defaultClassName:'_qmw7sp0-3-8-0',variantClassNames:{disabled:{true:'_qmw7sp1-3-8-0'},required:{true:'_qmw7sp2-3-8-0'},readOnly:{true:'_qmw7sp3-3-8-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;AAC7O,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,aAAY,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,SAAQ,EAAC,MAAK,kBAAiB,OAAM,kBAAiB,eAAc,kBAAiB,WAAU,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,OAAM,UAAS,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,UAAS,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,SAAQ,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,OAAM,SAAQ,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,OAAM,UAAS,MAAK,SAAQ,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,OAAM,UAAS,OAAM,SAAQ,OAAM,UAAS,MAAK,GAAE,gBAAgB,CAAC,EAAC,CAAC;AACv0B,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl";
 import { CalendarIcon } from "@dynatrace/strato-icons";
 import { Button } from "../../buttons/button/Button.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
-import { isVisualRefreshEnabled } from "../../core/utils/is-visual-refresh-enabled.js";
+import { useVisualRefreshEnabled } from "../../core/hooks/useVisualRefreshEnabled.js";
 import { useOverlayWithTrigger } from "../../overlays/hooks/useOverlayWithTrigger.js";
 import { Overlay } from "../../overlays/overlay/Overlay.js";
 import { globalSprinkles } from "../../styles/safe-sprinkles.js";
@@ -72,7 +72,7 @@ const DateSelector = forwardRef(
           ...overlayTriggerProps,
           size: "condensed",
           color: error ? "critical" : "neutral",
-          variant: isVisualRefreshEnabled() ? "emphasized" : "default",
+          variant: useVisualRefreshEnabled() ? "emphasized" : "default",
           "data-dt-name": "ShowCalendar",
           children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(CalendarIcon, {}) })
         }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-picker/DateSelector.tsx"],
-  "sourcesContent": ["import { forwardRef, useImperativeHandle, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CalendarIcon } from '@dynatrace/strato-icons';\n\nimport type { DateSelectorProps, DateSelectorRef } from './types.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { isVisualRefreshEnabled } from '../../core/utils/is-visual-refresh-enabled.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\nimport { globalSprinkles } from '../../styles/safe-sprinkles.js';\nimport { CalendarRoot } from '../calendar/CalendarRoot.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\n\n/**\n * Calendar widget trigger and overlay component.\n */\nexport const DateSelector = forwardRef<DateSelectorRef, DateSelectorProps>(\n  (props, forwardedRef) => {\n    const {\n      disabled,\n      error,\n      readOnly,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      'aria-disabled': ariaDisabledProp,\n      ...remainingProps\n    } = props;\n    const [open, setOpen] = useState(false);\n\n    const {\n      targetRef,\n      triggerRef,\n      overlayRef,\n      overlayState,\n      overlayProps,\n      overlayTriggerProps,\n    } = useOverlayWithTrigger({\n      placement: 'bottom-end',\n      offset: 8,\n      trapFocus: false,\n      shouldCloseOnBlur: false,\n      open,\n      onOpenChange: setOpen,\n      // the overlay should not open when disabled or readOnly\n      disabled: disabled || readOnly,\n    });\n\n    const rootRef = useMergeRefs<HTMLButtonElement>([triggerRef, targetRef]);\n    const intl = useIntl();\n    const calendarInputLabel = intl.formatMessage({\n      defaultMessage: 'Calendar for picking a date',\n      id: 'qpf+aqg3hXoviypu',\n      description:\n        'Aria label for the DateTimePicker calendar input used for form validation.',\n    });\n\n    useImperativeHandle(\n      forwardedRef,\n      (): DateSelectorRef => ({\n        open: () => setOpen(true),\n        close: () => setOpen(false),\n      }),\n      [],\n    );\n\n    const { state: formFieldState } = useFormFieldMessagesContext();\n\n    return (\n      <>\n        <Button\n          ref={rootRef}\n          data-testid={dataTestId}\n          className={consumerClassName}\n          aria-disabled={ariaDisabledProp}\n          style={consumerStyle}\n          {...remainingProps}\n          {...overlayTriggerProps}\n          size=\"condensed\"\n          color={error ? 'critical' : 'neutral'}\n          variant={isVisualRefreshEnabled() ? 'emphasized' : 'default'}\n          data-dt-name=\"ShowCalendar\"\n        >\n          <Button.Prefix>\n            <CalendarIcon />\n          </Button.Prefix>\n        </Button>\n        <Overlay\n          ref={overlayRef}\n          isOpen={overlayState.isOpen}\n          className={globalSprinkles({\n            paddingLeft: 16,\n            paddingTop: 16,\n            paddingRight: 16,\n            paddingBottom: 16,\n          })}\n          overlayProps={overlayProps}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          aria-label={intl.formatMessage({\n            defaultMessage: 'Calendar overlay for picking a date',\n            id: 'A9Pdb5T48IHfEauq',\n            description: 'Aria label for the date time picker overlay.',\n          })}\n        >\n          {/* The Calendar should not consume any validation context to not dispatch any errors. We still want the errorstate to adjust the day highlighting. */}\n          <FormFieldMessageContext.Provider\n            value={{\n              state: {\n                customMessages: [],\n                formControlMessages: [],\n                showError: formFieldState.showError,\n              },\n            }}\n          >\n            <CalendarRoot\n              aria-label={calendarInputLabel}\n              aria-disabled={ariaDisabledProp}\n            />\n          </FormFieldMessageContext.Provider>\n        </Overlay>\n      </>\n    );\n  },\n);\n"],
-  "mappings": "AA0EM,mBAeM,KAfN;AA1EN,SAAS,YAAY,qBAAqB,gBAAgB;AAC1D,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAG7B,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AACxC,SAAS,mCAAmC;AAKrC,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,iBAAiB;AAAA,MACjB,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,sBAAsB;AAAA,MACxB,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,mBAAmB;AAAA,MACnB;AAAA,MACA,cAAc;AAAA;AAAA,MAEd,UAAU,YAAY;AAAA,IACxB,CAAC;AAED,UAAM,UAAU,aAAgC,CAAC,YAAY,SAAS,CAAC;AACvE,UAAM,OAAO,QAAQ;AACrB,UAAM,qBAAqB,KAAK,cAAc;AAAA,MAC5C,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aACE;AAAA,IACJ,CAAC;AAED;AAAA,MACE;AAAA,MACA,OAAwB;AAAA,QACtB,MAAM,MAAM,QAAQ,IAAI;AAAA,QACxB,OAAO,MAAM,QAAQ,KAAK;AAAA,MAC5B;AAAA,MACA,CAAC;AAAA,IACH;AAEA,UAAM,EAAE,OAAO,eAAe,IAAI,4BAA4B;AAE9D,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,eAAa;AAAA,UACb,WAAW;AAAA,UACX,iBAAe;AAAA,UACf,OAAO;AAAA,UACN,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,MAAK;AAAA,UACL,OAAO,QAAQ,aAAa;AAAA,UAC5B,SAAS,uBAAuB,IAAI,eAAe;AAAA,UACnD,gBAAa;AAAA,UAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,gBAAa,GAChB;AAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,QAAQ,aAAa;AAAA,UACrB,WAAW,gBAAgB;AAAA,YACzB,aAAa;AAAA,YACb,YAAY;AAAA,YACZ,cAAc;AAAA,YACd,eAAe;AAAA,UACjB,CAAC;AAAA,UACD;AAAA,UACA,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,cAAY,KAAK,cAAc;AAAA,YAC7B,gBAAgB;AAAA,YAChB,IAAI;AAAA,YACJ,aAAa;AAAA,UACf,CAAC;AAAA,UAGD;AAAA,YAAC,wBAAwB;AAAA,YAAxB;AAAA,cACC,OAAO;AAAA,gBACL,OAAO;AAAA,kBACL,gBAAgB,CAAC;AAAA,kBACjB,qBAAqB,CAAC;AAAA,kBACtB,WAAW,eAAe;AAAA,gBAC5B;AAAA,cACF;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,cAAY;AAAA,kBACZ,iBAAe;AAAA;AAAA,cACjB;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import { forwardRef, useImperativeHandle, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CalendarIcon } from '@dynatrace/strato-icons';\n\nimport type { DateSelectorProps, DateSelectorRef } from './types.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useVisualRefreshEnabled } from '../../core/hooks/useVisualRefreshEnabled.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\nimport { globalSprinkles } from '../../styles/safe-sprinkles.js';\nimport { CalendarRoot } from '../calendar/CalendarRoot.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\n\n/**\n * Calendar widget trigger and overlay component.\n */\nexport const DateSelector = forwardRef<DateSelectorRef, DateSelectorProps>(\n  (props, forwardedRef) => {\n    const {\n      disabled,\n      error,\n      readOnly,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      'aria-disabled': ariaDisabledProp,\n      ...remainingProps\n    } = props;\n    const [open, setOpen] = useState(false);\n\n    const {\n      targetRef,\n      triggerRef,\n      overlayRef,\n      overlayState,\n      overlayProps,\n      overlayTriggerProps,\n    } = useOverlayWithTrigger({\n      placement: 'bottom-end',\n      offset: 8,\n      trapFocus: false,\n      shouldCloseOnBlur: false,\n      open,\n      onOpenChange: setOpen,\n      // the overlay should not open when disabled or readOnly\n      disabled: disabled || readOnly,\n    });\n\n    const rootRef = useMergeRefs<HTMLButtonElement>([triggerRef, targetRef]);\n    const intl = useIntl();\n    const calendarInputLabel = intl.formatMessage({\n      defaultMessage: 'Calendar for picking a date',\n      id: 'qpf+aqg3hXoviypu',\n      description:\n        'Aria label for the DateTimePicker calendar input used for form validation.',\n    });\n\n    useImperativeHandle(\n      forwardedRef,\n      (): DateSelectorRef => ({\n        open: () => setOpen(true),\n        close: () => setOpen(false),\n      }),\n      [],\n    );\n\n    const { state: formFieldState } = useFormFieldMessagesContext();\n\n    return (\n      <>\n        <Button\n          ref={rootRef}\n          data-testid={dataTestId}\n          className={consumerClassName}\n          aria-disabled={ariaDisabledProp}\n          style={consumerStyle}\n          {...remainingProps}\n          {...overlayTriggerProps}\n          size=\"condensed\"\n          color={error ? 'critical' : 'neutral'}\n          variant={useVisualRefreshEnabled() ? 'emphasized' : 'default'}\n          data-dt-name=\"ShowCalendar\"\n        >\n          <Button.Prefix>\n            <CalendarIcon />\n          </Button.Prefix>\n        </Button>\n        <Overlay\n          ref={overlayRef}\n          isOpen={overlayState.isOpen}\n          className={globalSprinkles({\n            paddingLeft: 16,\n            paddingTop: 16,\n            paddingRight: 16,\n            paddingBottom: 16,\n          })}\n          overlayProps={overlayProps}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          aria-label={intl.formatMessage({\n            defaultMessage: 'Calendar overlay for picking a date',\n            id: 'A9Pdb5T48IHfEauq',\n            description: 'Aria label for the date time picker overlay.',\n          })}\n        >\n          {/* The Calendar should not consume any validation context to not dispatch any errors. We still want the errorstate to adjust the day highlighting. */}\n          <FormFieldMessageContext.Provider\n            value={{\n              state: {\n                customMessages: [],\n                formControlMessages: [],\n                showError: formFieldState.showError,\n              },\n            }}\n          >\n            <CalendarRoot\n              aria-label={calendarInputLabel}\n              aria-disabled={ariaDisabledProp}\n            />\n          </FormFieldMessageContext.Provider>\n        </Overlay>\n      </>\n    );\n  },\n);\n"],
+  "mappings": "AA0EM,mBAeM,KAfN;AA1EN,SAAS,YAAY,qBAAqB,gBAAgB;AAC1D,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAG7B,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AACxC,SAAS,6BAA6B;AACtC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AACxC,SAAS,mCAAmC;AAKrC,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,iBAAiB;AAAA,MACjB,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,sBAAsB;AAAA,MACxB,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,mBAAmB;AAAA,MACnB;AAAA,MACA,cAAc;AAAA;AAAA,MAEd,UAAU,YAAY;AAAA,IACxB,CAAC;AAED,UAAM,UAAU,aAAgC,CAAC,YAAY,SAAS,CAAC;AACvE,UAAM,OAAO,QAAQ;AACrB,UAAM,qBAAqB,KAAK,cAAc;AAAA,MAC5C,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aACE;AAAA,IACJ,CAAC;AAED;AAAA,MACE;AAAA,MACA,OAAwB;AAAA,QACtB,MAAM,MAAM,QAAQ,IAAI;AAAA,QACxB,OAAO,MAAM,QAAQ,KAAK;AAAA,MAC5B;AAAA,MACA,CAAC;AAAA,IACH;AAEA,UAAM,EAAE,OAAO,eAAe,IAAI,4BAA4B;AAE9D,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,eAAa;AAAA,UACb,WAAW;AAAA,UACX,iBAAe;AAAA,UACf,OAAO;AAAA,UACN,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,MAAK;AAAA,UACL,OAAO,QAAQ,aAAa;AAAA,UAC5B,SAAS,wBAAwB,IAAI,eAAe;AAAA,UACpD,gBAAa;AAAA,UAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,gBAAa,GAChB;AAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,QAAQ,aAAa;AAAA,UACrB,WAAW,gBAAgB;AAAA,YACzB,aAAa;AAAA,YACb,YAAY;AAAA,YACZ,cAAc;AAAA,YACd,eAAe;AAAA,UACjB,CAAC;AAAA,UACD;AAAA,UACA,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,cAAY,KAAK,cAAc;AAAA,YAC7B,gBAAgB;AAAA,YAChB,IAAI;AAAA,YACJ,aAAa;AAAA,UACf,CAAC;AAAA,UAGD;AAAA,YAAC,wBAAwB;AAAA,YAAxB;AAAA,cACC,OAAO;AAAA,gBACL,OAAO;AAAA,kBACL,gBAAgB,CAAC;AAAA,kBACjB,qBAAqB,CAAC;AAAA,kBACtB,WAAW,eAAe;AAAA,gBAC5B;AAAA,cACF;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,cAAY;AAAA,kBACZ,iBAAe;AAAA;AAAA,cACjB;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACF;",
   "names": []
 }